Merge pull request #5 from yhlchao/master

feat(extension): v0.2.0

Author: sunyongjian

examples/src/App.css

@@ -14,4 +14,6 @@
 
 .viewport {
   height: 100%;
+  overflow: hidden;
+  position: relative;
 }

examples/src/components/example-header/style.css

@@ -3,6 +3,7 @@
   margin-bottom: 10px;
   border-bottom: 1px rgb(230, 230, 230) solid;
   color: rgb(90, 90, 90);
+  flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;

examples/src/pages/advance/custom-edge/arrow/arrow.ts

@@ -0,0 +1,28 @@
+type RegisterProcessType = {
+  LineEdge: any;
+  LineEdgeModel: any;
+};
+
+export const registerProcess: any = ({
+  LineEdge,
+  LineEdgeModel,
+}: RegisterProcessType) => {
+  class ProcessView extends LineEdge {
+    getAttributes() {
+      const attr = super.getAttributes();
+      if (attr.properties.isExecuted) {
+        attr.stroke = 'green';
+      }
+      return attr;
+    }
+    getArrowStyle() {
+      const style = super.getArrowStyle();
+      style.fill = "transparent";
+      return style;
+    }
+  }
+  return {
+    view: ProcessView,
+    model: LineEdgeModel,
+  };
+};

examples/src/pages/advance/custom-edge/index.tsx renamed to examples/src/pages/advance/custom-edge/arrow/index.tsx

@@ -1,52 +1,72 @@
 import React, { useEffect } from 'react';
 import LogicFlow from '@logicflow/core';
-import { registerCustomPolylineEdge } from './customPolylineEdge';
+import { registerProcess } from './arrow';
 
 const config = {
   stopScrollGraph: true,
   stopZoomGraph: true,
-  tool: {
-    menu: false,
-    control: false
-  }
 };
 
 const data = {
   nodes: [
     {
       id: 10,
       type: 'rect',
-      x: 150,
-      y: 70,
-      text: '矩形'
+      x: 100,
+      y: 110,
+      text: '审批通过'
     },
     {
       id: 20,
-      type: 'circle',
-      x: 400,
-      y: 70,
-      text: '圆形'
+      type: 'rect',
+      x: 300,
+      y: 110,
+      text: '审批中'
+    },
+    {
+      id: 30,
+      type: 'rect',
+      x: 500,
+      y: 110,
+      text: '未开始'
     }
   ],
   edges: [
     {
-      type: 'customPolyline',
+      type: 'process',
       sourceNodeId: 10,
       targetNodeId: 20,
-      text: '自定义直角折线和箭头',
       startPoint: {
         id: '150-110',
         x: 150,
         y: 110
       },
       endPoint: {
-        id: '150-60',
-        x: 400,
-        y: 120
+        id: '250-110',
+        x: 250,
+        y: 110
       },
       properties: {
         isExecuted: true
       }
+    },
+    {
+      type: 'process',
+      sourceNodeId: 20,
+      targetNodeId: 30,
+      startPoint: {
+        id: '350-110',
+        x: 350,
+        y: 110
+      },
+      endPoint: {
+        id: '450-110',
+        x: 450,
+        y: 110
+      },
+      properties: {
+        isExecuted: false
+      }
     }
   ]
 };
@@ -58,7 +78,7 @@ export default function CustomEdgeExample() {
       ...config,
       container: document.querySelector('#graph') as HTMLElement
     });
-    lf.register('customPolyline', registerCustomPolylineEdge);
+    lf.register('process', registerProcess);
     lf.render(data);
   }, []);
 

examples/src/pages/advance/custom-edge/customPolylineEdge.ts

@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react';
+import LogicFlow from '@logicflow/core';
+import { registerProcess } from './process';
+
+const config = {
+  stopScrollGraph: true,
+  stopZoomGraph: true,
+};
+
+const data = {
+  nodes: [
+    {
+      id: 10,
+      type: 'rect',
+      x: 100,
+      y: 110,
+      text: '审批通过'
+    },
+    {
+      id: 20,
+      type: 'rect',
+      x: 300,
+      y: 110,
+      text: '审批中'
+    },
+    {
+      id: 30,
+      type: 'rect',
+      x: 500,
+      y: 110,
+      text: '未开始'
+    }
+  ],
+  edges: [
+    {
+      type: 'process',
+      sourceNodeId: 10,
+      targetNodeId: 20,
+      startPoint: {
+        id: '150-110',
+        x: 150,
+        y: 110
+      },
+      endPoint: {
+        id: '250-110',
+        x: 250,
+        y: 110
+      },
+      properties: {
+        isExecuted: true
+      }
+    },
+    {
+      type: 'process',
+      sourceNodeId: 20,
+      targetNodeId: 30,
+      startPoint: {
+        id: '350-110',
+        x: 350,
+        y: 110
+      },
+      endPoint: {
+        id: '450-110',
+        x: 450,
+        y: 110
+      },
+      properties: {
+        isExecuted: false
+      }
+    }
+  ]
+};
+
+export default function CustomEdgeExample() {
+
+  useEffect(() => {
+    const lf = new LogicFlow({
+      ...config,
+      container: document.querySelector('#graph') as HTMLElement
+    });
+    lf.register('process', registerProcess);
+    lf.render(data);
+  }, []);
+
+  return <div id="graph" className="viewport" />;
+}

examples/src/pages/advance/custom-edge/process/index.tsx

@@ -0,0 +1,23 @@
+type RegisterProcessType = {
+  LineEdge: any;
+  LineEdgeModel: any;
+};
+
+export const registerProcess: any = ({
+  LineEdge,
+  LineEdgeModel,
+}: RegisterProcessType) => {
+  class ProcessView extends LineEdge {
+    getAttributes() {
+      const attr = super.getAttributes();
+      if (attr.properties.isExecuted) {
+        attr.stroke = "green";
+      }
+      return attr;
+    }
+  }
+  return {
+    view: ProcessView,
+    model: LineEdgeModel,
+  };
+};

examples/src/pages/advance/custom-edge/process/process.ts

@@ -1,16 +1,12 @@
 import React, { useEffect } from 'react';
 import LogicFlow from '@logicflow/core';
 import { registerGatewayNode } from './gatewayNode';
-import { registerUserTaskNode } from '../content/userTaskNode';
+import { registerUserTaskNode } from '../userTask/userTask';
 import ExampleHeader from '../../../../components/example-header';
 
 const config = {
   stopScrollGraph: true,
   stopZoomGraph: true,
-  tool: {
-    menu: false,
-    control: false
-  },
   style: {
     circle: {
       r: 40

examples/src/pages/advance/custom-node/properties/beginNode.ts

@@ -6,10 +6,6 @@ const config = {
   isSilentMode: true,
   stopScrollGraph: true,
   stopZoomGraph: true,
-  tool: {
-    menu: false,
-    control: false
-  }
 };
 
 const data = {