ssq-flow
v0.1.3
Published
[TOC]
Readme
[TOC]
Installation
npm i ssq-flow-Dnpm i mxgraph -D// webpack.config.js
module.exports = {
module: {
rules: [
...,
{
test: require.resolve("mxgraph/javascript/mxClient"),
use:
"exports-loader?" + "mxClient,mxEditor,mxLog,mxObjectIdentity,mxDictionary,mxResources,mxEffects,mxUtils,mxConstants,mxEvent,mxClipboard,mxUrlConverter,mxVmlCanvas2D,mxStencilRegistry," + "mxMarker,mxHierarchicalEdgeStyle,mxCell,mxCellPath,mxPerimeter,mxEdgeStyle,mxStyleRegistry,mxCodecRegistry,mxGenericChangeCodec,mxStylesheetCodec,mxDefaultToolbarCodec," + "mxGraph,mxRubberband,mxHierarchicalLayout,mxFastOrganicLayout,mxGraphModel,mxPanningHandler,mxKeyHandler,mxParallelEdgeLayout,mxLayoutManager,mxCompactTreeLayout," + "mxPrintPreview,mxToolbar,mxOutline,mxCellTracker,mxCellOverlay,mxImage,mxLoadResources,mxPopupMenu,mxCylinder,mxRectangle,mxCellRenderer,mxVertexHandler,mxPoint," +
"mxHandle,mxRhombus,mxActor,mxArrow,mxArrowConnector,mxCloud,mxConnector,mxConnector,mxEllipse,mxHexagon,mxImageShape,mxLabel,mxLine,mxPolyline,mxMarker,mxRectangleShape," + "mxShape,mxStencil,mxStencilRegistry,mxSwimlane,mxText,mxTriangle,mxAutoSaveManager,mxDivResizer,mxForm,mxGuide,mxImageBundle,mxImageExport,mxLog,mxMorphing,mxMouseEvent," + "mxPanningManager,mxSvgCanvas2D,mxUndoableEdit,mxUndoManager,mxUrlConverter,mxWindow,mxXmlCanvas2D,mxXmlRequest,mxCellEditor,mxCellState,mxCellStatePreview,mxConnectionConstraint," + "mxGraphSelectionModel,mxGraphView,mxMultiplicity,mxSwimlaneManager,mxTemporaryCellStates,mxGeometry,mxStackLayout,mxRadialTreeLayout,mxPartitionLayout,mxGraphLayout," + "mxEdgeLabelLayout,mxCompositeLayout,mxCircleLayout,mxSwimlaneOrdering,mxMinimumCycleRemover,mxMedianHybridCrossingReduction,mxHierarchicalLayoutStage,mxCoordinateAssignment," + "mxSwimlaneLayout,mxObjectCodec,mxGenericChangeCodec,mxTooltipHandler,mxSelectionCellsHandler,mxPopupMenuHandler,mxGraphHandler,mxElbowEdgeHandler,mxEdgeHandler," + "mxConstraintHandler,mxConnectionHandler,mxCellMarker,mxCellHighlight,mxDefaultPopupMenu,mxDefaultKeyHandler,mxCodec,mxGraphHierarchyModel,mxGraphAbstractHierarchyCell," +
"mxGraphHierarchyEdge,mxGraphHierarchyNode,mxSwimlaneModel,mxEdgeSegmentHandler"
},
...
]
}
}Flow Component
FlowController
เป็น function controler สำหรับจัดการการทำงานของ Flow ประกอบไปด้วย
Method
| Name | Return | Type | Desc | | ----------------------------------- | ------ | ------ | ----------------------------------------------------------- | | renderFlowWithXmlStr(graph, xmlStr) | - | | เป็น function อ่าน xml ออกมาเป็น Flow | | initialGraphProperties(editor) | - | | เป็น function สำหรับกำหนด properties พื้นฐานของ Flow | | convertValueToString(graph) | value | String | เป็น function สำหรับแสดงข้อความบน node | | setNodeCounter(graph) | - | | เป็น function สำหรับแสดงค่าของจำนวน node บน Flow (ไม่นับเส้นเชื่อม) | | initialGraphEvent(editor) | - | | เป็น function สำหรับกำหนด event พื้นฐานของ Flow | | printFlow(editor) | - | | เป็น function preview และ print Flow |
Flow
Properties
| Name | Default | Type | Desc | | ------ | ------- | ------ | --------------------------------- | | id | random | String | Id สำหรับอ้างอิง component | | editor | null | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow | | graph | null | Object | เป็นตัวแปรสำหรับจัดการค่าของ Flow | | height | 500 | Number | ความสูงของ Flow |
Method
| Name | Return | Type | Desc | | -------------- | ------ | ---- | ----------------------------- | | loadGraph(ref) | - | | เป็น function สำหรับ load allow |
Example
import {
Flow
} from "ssq-flow";
<Flow height={800} ref={this.flowRef} id={id} />import React, { Component } from "react";
import _ from "lodash";
import {
mxClient,
mxUtils,
mxEditor,
mxParallelEdgeLayout,
mxLayoutManager,
mxGraph,
mxKeyHandler,
mxDefaultKeyHandler
} from "mxgraph/javascript/mxClient";
import { createPopupMenu } from "./popupController";
import {
Flow,
Node,
ActionBar,
Properties,
Outline,
FlowController
} from "ssq-flow";
import KeyHandler from "./resources/keyHandler.txt";
const listNode = [
{
nodeId: "start",
nodeType: "start",
icon: "https://dl.dropboxusercontent.com/s/rxsb183p5x163ya/start.svg",
nodeName: "Start",
style:
"shape=ellipse;strokeWidth=2;fillColor=#28A745;strokeColor=#218838;noLabel=1",
height: 40,
width: 40,
multiplicities: {
source: true,
attr: null,
value: null,
min: 0,
max: 1,
validNeighbors: {
allow: ["ALL"],
block: ["end", "loop"]
},
countError: "Only 1 targets allowed",
typeError: "Can not connect from other nodes.",
validNeighborsAllowed: ""
}
},
{
nodeId: "end",
nodeType: "end",
icon: "https://dl.dropboxusercontent.com/s/eiywz47egx0u8zx/end.svg",
nodeName: "End",
style:
"shape=ellipse;strokeWidth=2;fillColor=#DB3545;strokeColor=#C82332;noLabel=1",
height: 40,
width: 40,
multiplicities: {
source: true,
attr: null,
value: null,
min: 1,
max: 0,
validNeighbors: {
allow: ["ALL"],
block: ["start", "end", "loop", "decision"]
},
countError: "Can not connect to other nodes.",
typeError: "Can not connect to Start node",
validNeighborsAllowed: ""
}
},
...
];
export default class flow extends Component {
constructor(props) {
super(props);
this.state = { graph: null, editor: null };
this.flowRef = React.createRef();
}
loadGraph = ref => {
const container = document.getElementById(`${ref.props.id}Flow`);
let graph = "";
let editor = "";
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
// Displays an error message if the browser is not supported.
mxUtils.error("Browser is not supported!", 200, false);
} else {
if (mxClient.IS_QUIRKS) {
document.body.style.overflow = "hidden";
new mxDivResizer(container);
}
window.mxEditor = mxEditor;
window.mxGraph = mxGraph;
window.mxDefaultKeyHandler = mxDefaultKeyHandler;
window.mxKeyHandler = mxKeyHandler;
const doc = mxUtils.parseXml(KeyHandler);
const config = doc.getElementsByTagName("mxEditor")[0];
editor = new mxEditor(config);
graph = editor.graph;
FlowController.initialGraphProperties(editor);
FlowController.initialGraphEvent(editor);
// Sets the graph container and configures the editor
editor.setGraphContainer(container);
// Automatically handle parallel edges
const layout = new mxParallelEdgeLayout(graph);
const layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell) {
if (cell.getChildCount() > 0) {
return layout;
}
};
FlowController.convertValueToString(graph);
graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {
return createPopupMenu(editor, menu, cell, evt);
};
this.setState({
graph,
editor
});
}
};
componentDidMount() {
this.loadGraph(this.flowRef.current);
}
render() {
const { editor } = this.state;
const id = "flow";
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-2 col-sm-3">
{!_.isEmpty(editor) && (
<Node data={listNode} editor={editor} id={id} />
)}
</div>
<div className="col-md-7 col-sm-5">
<div className="row">
{!_.isEmpty(editor) && (
<ActionBar flow={this.flowRef.current} editor={editor} />
)}
</div>
<div className="row">
{!_.isEmpty(editor) && <Outline id={id} editor={editor} />}
<Flow height={800} ref={this.flowRef} id={id} />
</div>
</div>
<div className="col-md-3 col-sm-4">
<Properties />
</div>
</div>
</div>
);
}
}Node
Properties
| Name | Default | Type | Desc | | ------ | ------- | ------ | --------------------------------- | | id | random | String | Id สำหรับอ้างอิง component | | editor | null | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow | | data | [ ] | Array | Json Data สำหรับการแสดง node |
Example
import {
Node
} from "ssq-flow";
const listNode = [
{
nodeId: "start",
nodeType: "start",
icon: "https://dl.dropboxusercontent.com/s/rxsb183p5x163ya/start.svg",
nodeName: "Start",
style:
"shape=ellipse;strokeWidth=2;fillColor=#28A745;strokeColor=#218838;noLabel=1",
height: 40,
width: 40,
multiplicities: {
source: true,
attr: null,
value: null,
min: 0,
max: 1,
validNeighbors: {
allow: ["ALL"],
block: ["end", "loop"]
},
countError: "Only 1 targets allowed",
typeError: "Can not connect from other nodes.",
validNeighborsAllowed: ""
}
},
{
nodeId: "end",
nodeType: "end",
icon: "https://dl.dropboxusercontent.com/s/eiywz47egx0u8zx/end.svg",
nodeName: "End",
style:
"shape=ellipse;strokeWidth=2;fillColor=#DB3545;strokeColor=#C82332;noLabel=1",
height: 40,
width: 40,
multiplicities: {
source: true,
attr: null,
value: null,
min: 1,
max: 0,
validNeighbors: {
allow: ["ALL"],
block: ["start", "end", "loop", "decision"]
},
countError: "Can not connect to other nodes.",
typeError: "Can not connect to Start node",
validNeighborsAllowed: ""
}
},
...
];
<Node data={listNode} editor={editor} id={id} />ActionBar
Properties
| Name | Default | Type | Desc | | ------ | ------- | ------ | --------------------------------- | | flow | Null | Ref | Ref สำหรับอ้างอิง component ของ Flow | | editor | null | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow |
Example
import {
ActionBar
} from "ssq-flow";
this.flowRef = React.createRef();
<Flow height={800} ref={this.flowRef} id={id} />
<ActionBar height={800} flow={this.flowRef.current} />Properties
Properties
| Name | Default | Type | Desc | | ---- | ------- | ---- | ---- | | | | | |
Example
import {
Properties
} from "ssq-flow";
<Properties />Outline
Properties
| Name | Default | Type | Desc | | ------ | ------- | ------ | --------------------------------- | | id | random | String | Id สำหรับอ้างอิง component | | editor | null | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow |
Example
import {
Outline
} from "ssq-flow";
<Outline id={id} editor={editor} />