Table-Flow-Graph

A simple flow graph editor/viewer. (working in progress)

Features

• Light-weight flow graph based on html table
• Grid based lines
• Movable & resizable nodes
• Fully customizable

Installation

Via npm

  npm install table-flow-graph

Via yarn

  yarn add table-flow-graph

Usage

Step1: add js & css files

option A: Copy table-flow-graph/dist/index.css and table-flow-graph/dist/index.min.js to your project's static, and include them directly into html file:

<link rel="stylesheet" href="./static/table-fow-graph/index.css">
<script src="./static/table-flow-graph/index.min.js"></script>

option B: For libraries like react and vue, first import the css file into your project's entry file(usally the main.js file):

// add css to mian.js/ts/jsx/tsx
import 'table-flow-graph/dist/index.css';

then import TableFlowGraph wherever needed:

import { TableFlowGraph } from 'table-flow-graph';

Step2: prepare the dom element:

<div id="my_flow_graph"></div>

Step3: initiate TableFlowGraph instance:

const el = document.getElementById('my_flow_graph');
// create a table-flow-graph with 10x10 cells
const graphInstance = new TableFlowGraph(el, {
    isEditor: true,
    totalColumns: 10,
    totalRows: 10,
});

Options

Option	Type	Description	Default
isEditor	Boolean	If set to true, this flow graph instance will be editable.	false
nodes	Array	nodes(blocks) of the flow graph.	[]
columns	Array	stores data of table header title and column width.	[]
lines	Array	2D array of anchor point ids to draw lines.	[]
totalRows	positive integer	Total row number of flow graph table.	8
totalColumns	positive integer	Total column numbe fo flow graph table.	8
maxRows	positive integer	Disable add row functionalitiy when totalRows reaches maxRows.	30
maxColumns	positive integer	Disable add column functionalitiy when totalColumns reaches maxColumns.	12
tableLayoutFixed	Boolean	If true, the width of each column will be equal.	false
labels	Object	No i18n functionalitiy provided in this project, you can use this option to customize all the texts/labels.	-
onChangeLines	Function	Event hook triggered when new line is drawn or a line is deleted.	-
addColumn	Function	Event hook triggered when 'Add Column' button is pressed. This will overwrite the build in functionalitiy of adding new column(which will trigger onAddColumn). You need to call refresh(newOptions) to refresh the flow graph instance after adding column with this method.	-
onAddColumn	Function	Event hook triggered after adding column with build in method.	-
editColumn	Function	Event hook triggered when 'Edit Column' button is pressed. This will overwrite the build in functionalitiy of editing a column(which will trigger onEditColumn). You need to call refresh(newOptions) to refresh the flow graph instance after editing column with this method.	-
onEditColumn	Function	Event hook triggered after editing column with build in method.	-
deleteColumn	Function	Event hook triggered when 'Delete Column' button is pressed. This will overwrite the build in functionalitiy of deleting a column(which will trigger onDeleteColumn). You need to call refresh(newOptions) to refresh the flow graph instance after deleting column with this method.	-
onDeleteColumn	Function	Event hook triggered after deleting column with build in method.	-
addRow	Function	Event hook triggered when 'Add Row' button is pressed. This will overwrite the build in functionalitiy of adding new row(which will trigger onAddRow). You need to call refresh(newOptions) to refresh the flow graph instance after adding row with this method.	-
onAddRow	Function	Event hook triggered after adding row with build in method.	-
deleteRow	Function	Event hook triggered when 'Delete Row' button is pressed. This will overwrite the build in functionalitiy of deleting a row(which will trigger onDeleteRow). You need to call refresh(newOptions) to refresh the flow graph instance after deleting row with this method.	-
onDeleteRow	Function	Event hook triggered after deleting row with build in method.	-
addNode	Function	Event hook triggered when 'Add Node' button is pressed. This will overwrite the build in functionalitiy of adding a node(which will trigger onAddNode). You need to call refresh(newOptions) to refresh the flow graph instance after adding node with this method.	-
onAddNode	Function	Event hook triggered after adding node with build in method.	-
editNode	Function	Event hook triggered when 'Edit Node' button is pressed. This will overwrite the build in functionalitiy of editing node(which will trigger onEditNode). You need to call refresh(newOptions to refresh the flow graph instance after editing node with this method.	-
onEditNode	Function	Event hook triggered after editing node with build in method.	-
deleteNode	Function	Event hook triggered when 'Delete Node' button is pressed. This will overwrite the build in functionalitiy of deleting a node(which will trigger onDeleteNode). You need to call refresh(newOptions)	-
onDeleteNode	Function	Event hook triggered after deleting node with build in method.	-
onClickNode	Function	Event hook triggered when node is clicked in viewer mode.	-
renderNode	Function	Customize how the node content is rendered.	-
renderNodeHoverPopup	Function	Customize how the node's hover Popup is rendered.	-