1.1.6 • Published 4 years ago
flowchart-core v1.1.6
flowchart-core
A tiny svg javascript lib, Ability to quickly draw flowchart and topology graph.
Advantage
Two configurable modes: link-mode and render-mode.
link-mode:
quickly
start flowchart config.render-mode:
quickly
drawing topological relationships.
Install
NPM
$ npm install flowchart-core
Yarn
$ yarn flowchart-core
Layout
Topology
Check Demo | Get Usage
// create topology graph, just use one statement.
import { RSGraph } from 'flowchart-core';
const nodes = [
{
id: 'root',
children: ['node1', 'node2'],
title: 'start',
desc: '1',
parent: null,
},
{
id: 'node1',
children: [],
title: 'doing',
desc: '2',
parent: 'root',
},
{
id: 'node2',
children: [],
title: 'end',
desc: '3',
parent: 'root',
},
];
// create node div dom element. this just a case.
nodes.forEach(node => {
const { title, desc } = node;
const body = document.querySelector('body');
const div = document.createElement('div');
div.setAttribute('data-rsgraph-id', node.id);
div.setAttribute('class', 'item');
div.innerHTML = `<div class="desc">${desc}</div><div class="title">${title}</div>`;
body.appendChild(div);
});
const config = {
data: nodes,
zoom: true, // default is false
direction: 'x-axis', // x-axis || y-axis. default value is 'y-axis'
coreOptions: {
style: {
borderTop: '1px dashed #000',
overflow: 'scroll',
},
line: {
style: {
stroke: 'deepskyblue',
},
arrow: {
style: {
fill: '#888',
},
viewBox: '0 0 18 18',
},
},
linkDot: {
display: 'none', // default is display: none
},
mode: 'link-mode', // set link-mode will not work.
},
};
const graph = new RSGraph('#svg-container', config);
warning
Add data-rsgraph-id
attribute to the DOM element of node before using it.
Flowchart
Check Demo
Mount
mount with global
<!-- html -->
<svg id="svg-container"></svg>
import { Core, Node } from 'flowchart-core';
// initial Core.
const core = new Core('#svg-container', {
style: {
width: 1000,
height: 600,
border: '1px dashed #000',
},
mode: 'link-mode',
});
// define node container width & height.
const width = 140;
const height = 70;
// initial Node.
const node = new Node({
position: {
x: 100,
y: 50,
},
style: {
width,
height,
strokeWidth: 2,
stroke: 'black',
cursor: 'grab',
rx: 10,
},
});
// zoom graph
core.zoom();
// add node to container
core.addNode(node);
API Reference
new Core(selectors, options)
prop | type | desc | must |
---|---|---|---|
selectors | CSS selectors | Svg DOM selector name | 1 |
options | coreOptions | core config options | 1 |
coreOptions
Type: { style: {}, line: {}, linkDot: {}, mode: 'render-mode' }
Arguments:
prop type desc must style stylesheet css style 1 line lineObject link path config 0 linkDot linkDotObject link dot config 0 mode String link-mode. render-mode. 1
##### lineObject
link line props.
| prop | type | desc | must |
| :---- | :---------------------------------- | :------------------ | :--- |
| style | stylesheet | _css style_ | 0 |
| arrow | [arrowObject](#arrowObject) | _line arrow config_ | 0 |
##### linkDotObject
> `Only` the following table styles can be used.
| prop | type | desc | must |
| :---------- | :------------- | :-------------------------- | :--- |
| r | radius | \<circle> _attr `r` radius_ | 0 |
| fill | fill color | _color_ | 0 |
| stroke | stroke color | _color_ | 0 |
| strokeWidth | stroke width | _px_ | 0 |
| display | css display | _display value_ | 0 |
##### arrowObject
| prop | type | desc | must |
| :------ | :----------- | :---------------------------------------------------------------------------------- | :--- |
| style | `stylesheet` | _css style_ | 0 |
| viewBox | `String` | _[svg viewBox](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox)_ | 0 |
Usage:
const options = { style: { width: '100vw', height: '100vh', border: '1px dashed #000', }, line: { style: { stroke: 'deepskyblue', }, arrow: { style: { fill: 'deepskyblue', }, viewBox: '0 0 18 18', d: 'M1,2 L8,6 L1,10 Z', }, }, linkDot: { r: 2, fill: 'deepskyblue', stroke: 'deepskyblue', strokeWidth: 2, }, };
new Node(config)
prop | type | desc | must |
---|---|---|---|
config | nodeConfig | node config | 1 |
nodeConfig
Type: { style: {}, position: { x, y }, html: { meta } }
Arguments:
prop type desc must style stylesheet css style 1 position positionObject node position in svg 1 html htmlObject 1 1 positionObject
prop type desc must x x axis
MouseEvent.clientX 1 y y axis
MouseEvent.clientY 1 htmlObject
prop type desc must meta DomInstance
Dom element 1
Usage:
const config = { position: { // node position in svg. x: 100, y: 150, }, style: { width: 140, height: 70, }, html: { meta: '<div>...</div>', // html template. }, };
new Edge(config)
prop | type | desc | must |
---|---|---|---|
config | edgeConfig | edge config | 0 |
edgeConfig
Type: { style: {} }
Arguments:
prop type desc must style stylesheet
css style 1
Usage:
const config = { style: { stroke: 'deepskyblue', }, };
new RSGraph(selectors, config)
prop | type | desc | must |
---|---|---|---|
selectors | CSS selectors | css selectors | 1 |
config | rsGraphConfig | rsgraph config | 0 |
rsGraphConfig
Type: { data: [], zoom: true, coreOptions: {} }
Arguments:
prop type desc must data Array
node relation data 1 zoom Boolean
zoom in or zoom out 0 direction String
change the direction of topological 0 coreOptions coreOptions core config options 0
Usage:
const config = { data: nodes, zoom: true, direction: 'x-axis', // x-axis || y-axis. default value is 'y-axis' coreOptions: { style: { borderTop: '1px dashed #000', overflow: 'scroll', }, linkDot: { display: 'none', // default is display: none }, mode: 'link-mode', // set link-mode will not work. }, };
Methods
Core Methods
prop | type | desc |
---|---|---|
addNode(node) | Function | add node to svg container |
addEdge(edge, config) | Function | add a path to svg container to describe the relationship between nodes, just use in render mode, config: { source, target, dotLink, dotEndLink } |
deleteNode(node) | Function | delete node data and remove node from svg container |
deleteEdge(edge) | Function | delete edge data and remove edge from svg container |
showSvgElement(svgElement, type) | Function | show a svg element. enum value is 'node' or 'edge' |
hiddenSvgElement(svgElement, type) | Function | hidden a svg element. enum value is 'node' or 'edge' |
zoom() | Function | make graph zoom in or zoom out. drag-and-drop are not supported after called zoom() |
zoomClose() | Function | close zoom,Core.mode value back to Core.options.mode value |
Usage:
// eg. how to appendChild a edge in core instance.
const coreInstance = new Core('#svg-container', { ... });
const edgeInstance = new Edge({ ... });
coreInstance.addEdge(edgeInstance, {
source: sourceNode.id,
target: targetNode.id,
dotLink: 'bottom',
dotEndLink: 'top'
});
Node Methods
prop | type | desc |
---|---|---|
changePosition(position) | Function | change node position , attribute is a positionObject |
Usage:
// eg. how to change the position attribute.
const coreInstance = new Core('#svg-container', { ... });
const nodeInstance = new Node({ ... });
nodeInstance.changePosition({
x: 130,
y: 100,
});
Class Attributes
More
complex effects
can be achieved through these exposure methods.
Core
Arguments:
prop type desc container SvgElement<svg>
Svg Dom nodes Array<Object>
node dom list edges Array<Object>
edge dom list nodeG SvgElement<g>
\ tag. nodes container edgeG SvgElement<g>
\ tag. edges container
Node
Arguments:
prop type desc id Number
unique node id node SvgElement<g>
node container \. As real node to use. Accessible to all DOM attribute values on it
html String
html element embed
in node insidestyle stylesheet
node style Usage:
// eg. how to make a node instance visible or hidden. const coreInstance = new Core('#svg-container', { ... }); const nodeInstance = new Node({ position: { x: 100, y: 100, }, style: { width, height, }, }); const operatorType = 'node'; // hidden. coreInstance.hiddenSvgElement(nodeInstance, operatorType); // visible. coreInstance.showSvgElement(nodeInstance, operatorType);
Edge
Arguments:
prop type desc id Number
unique edge id edge SvgElement<g>
edge container \ source Number
source node id target Number
target node id dotLink String
node start link dot's position: top | bottom| left | right dotEndLink String
node end link dot's position: top | bottom | left | right lineData String
link path data. \ prop d
Usage:
// eg. create edge instance & append child on svg const coreInstance = new Core('#svg-container', { ... }) const edgeInstance = new Edge({ style: { stroke: 'deepskyblue', }, }); // key step. coreInstance.addEdge(edgeInstance, { source: sourceNode.id, target: targetNode.id, dotLink: 'bottom', dotEndLink: 'top' });
Example
Recommand to check more example (how to embed self define div node
)
- self define html embed node
- flowchart config.