From b7cddd7b6f2919da6aaf199c850fd15210d75b47 Mon Sep 17 00:00:00 2001
From: zhandouxiaojiji <zhandouxiaojiji@gmail.com>
Date: Tue, 27 Oct 2020 11:47:20 +0800
Subject: [PATCH] add RegisterNode

---
 render-process/RegisterNode.ts | 272 +++++++++++++++++++++++++++++++++
 render-process/index.tsx       | 268 +-------------------------------
 2 files changed, 274 insertions(+), 266 deletions(-)
 create mode 100644 render-process/RegisterNode.ts

diff --git a/render-process/RegisterNode.ts b/render-process/RegisterNode.ts
new file mode 100644
index 0000000..c37f3f1
--- /dev/null
+++ b/render-process/RegisterNode.ts
@@ -0,0 +1,272 @@
+import G6 from '@antv/g6';
+import Settings from '../main-process/Settings';
+
+const NODE_COLORS: any = {
+  ['Composite']: 'rgb(91,237,32)',
+  ['Decorator']: 'rgb(218,167,16)',
+  ['Condition']: 'rgb(228,20,139)',
+  ['Action']: 'rgb(91,143,249)',
+  ['Other']: 'rgb(112,112,112)',
+}
+
+
+export default function (settings: Settings) {
+  G6.registerNode(
+    'TreeNode',
+    {
+      options: {
+        type: 'rect',
+        labelCfg: {
+          style: {
+            fill: 'blue',
+            fontSize: 10
+          }
+        },
+        style: {
+          fill: "white",
+        },
+        stateStyles: {
+          selected: {
+            'main-box': {
+              stroke: 'black',
+              lineWidth: 3,
+            },
+          },
+          hover: {
+            stroke: 'white',
+            lineWidth: 3,
+          },
+          dragSrc: {
+            fill: 'gray',
+          },
+          dragRight: {
+            'drag-right': {
+              fillOpacity: 0.6,
+            }
+          },
+          dragUp: {
+            'drag-up': {
+              fillOpacity: 0.6,
+            }
+          },
+          dragDown: {
+            'drag-down': {
+              fillOpacity: 0.6,
+            }
+          }
+        },
+      },
+      draw(cfg, group) {
+        const nodeConf = settings.getNodeConf(cfg.name as string);
+        const classify = nodeConf.type || 'Other';
+        const color = NODE_COLORS[classify] || 'Other';
+        var size = cfg.size ? cfg.size as number[] : [150, 40];
+        const w = size[0];
+        const h = size[1];
+        const x0 = -w / 2;
+        const y0 = -h / 2;
+        const r = 2;
+        const shape = group.addShape('rect', {
+          attrs: {
+            x: x0,
+            y: y0,
+            width: w,
+            height: h,
+            stroke: color,
+            lineWidth: 2,
+            fill: 'white',
+            radius: r,
+          },
+          name: 'main-box',
+          draggable: true,
+        });
+
+        // name bg
+        group.addShape('rect', {
+          attrs: {
+            x: x0 + 1.5,
+            y: y0 + 1.5,
+            width: w - 3,
+            height: 16,
+            fill: color,
+            // radius: r,
+          },
+          name: 'name-bg',
+          draggable: true,
+        });
+
+        // id text
+        group.addShape('text', {
+          attrs: {
+            textBaseline: 'top',
+            x: x0 - 3,
+            y: -8,
+            fontSize: 20,
+            lineHeight: 20,
+            text: cfg.id,
+            textAlign: 'right',
+            fill: 'white',
+            stroke: 'black',
+            lineWidth: 2,
+          },
+          name: 'id-text',
+        });
+
+        // icon
+        var img = `./static/icons/${classify}.svg`;
+        group.addShape('image', {
+          attrs: {
+            x: x0 + 3,
+            y: y0 + 2,
+            height: 14,
+            width: 14,
+            img,
+          },
+          name: 'node-icon',
+        });
+
+        // name text
+        group.addShape('text', {
+          attrs: {
+            textBaseline: 'top',
+            x: x0 + 18,
+            y: y0 + 4,
+            fontWeight: 800,
+            lineHeight: 20,
+            text: cfg.name,
+            fill: 'black',
+          },
+          name: 'name-text',
+        });
+
+        var x = x0 + 2;
+        var y = y0 + 23;
+        // desc text
+        const desc = cfg.desc || nodeConf.desc;
+        if (desc) {
+          group.addShape('text', {
+            attrs: {
+              textBaseline: 'top',
+              x,
+              y,
+              lineHeight: 20,
+              fontWeight: 800,
+              text: `备注:${desc}`,
+              fill: 'black',
+            },
+            name: 'desc-text',
+          });
+        }
+
+        const args: any = cfg.args;
+        if (args && Object.keys(args).length > 0) {
+          y += 20;
+          group.addShape('text', {
+            attrs: {
+              textBaseline: 'top',
+              x,
+              y,
+              lineHeight: 20,
+              text: `参数:${JSON.stringify(args)}`,
+              fill: 'black',
+            },
+            name: 'args-text',
+          });
+        }
+
+        const input: [] = cfg.input ? cfg.input as [] : [];
+        if (input.length > 0) {
+          y += 20;
+          group.addShape('text', {
+            attrs: {
+              textBaseline: 'top',
+              x,
+              y,
+              lineHeight: 20,
+              text: `输入:${JSON.stringify(input)}`,
+              fill: 'black',
+            },
+            name: 'input-text',
+          });
+        }
+
+        const output: [] = cfg.output ? cfg.output as [] : [];
+        if (output.length > 0) {
+          y += 20;
+          group.addShape('text', {
+            attrs: {
+              textBaseline: 'top',
+              x,
+              y,
+              lineHeight: 20,
+              text: `输出:${JSON.stringify(output)}`,
+              fill: 'black',
+            },
+            name: 'output-text',
+          });
+        }
+
+        if (cfg.children) {
+          group.addShape('marker', {
+            attrs: {
+              x: w / 2,
+              y: 0,
+              r: 6,
+              cursor: 'pointer',
+              symbol: G6.Marker.collapse,
+              stroke: '#666',
+              lineWidth: 1,
+              fill: '#fff',
+            },
+            name: 'collapse-icon',
+          });
+        }
+
+
+        group.addShape('rect', {
+          name: 'drag-up',
+          attrs: {
+            x: -w / 2,
+            y: -h / 2,
+            width: w,
+            height: h / 2,
+            fill: 'blue',
+            fillOpacity: 0,
+          },
+          draggable: true,
+          // visible: false,
+        });
+
+        group.addShape('rect', {
+          name: 'drag-down',
+          attrs: {
+            x: -w / 2,
+            y: 0,
+            width: w,
+            height: h / 2,
+            fill: 'blue',
+            fillOpacity: 0,
+          },
+          draggable: true,
+          // visible: false,
+        });
+
+        group.addShape('rect', {
+          name: 'drag-right',
+          attrs: {
+            x: w * 0.1,
+            y: -h / 2,
+            width: w * 0.4,
+            height: h,
+            fill: 'blue',
+            fillOpacity: 0,
+          },
+          draggable: true,
+          // visible: false,
+        });
+        return shape;
+      }
+    },
+    'single-node',
+  );
+}
\ No newline at end of file
diff --git a/render-process/index.tsx b/render-process/index.tsx
index 7e59a05..4d0c45d 100644
--- a/render-process/index.tsx
+++ b/render-process/index.tsx
@@ -15,17 +15,11 @@ import G6 from '@antv/g6';
 import 'antd/dist/antd.dark.css';
 import './index.css';
 import { ModelConfig, Item } from "@antv/g6/lib/types";
+import RegisterNode from "./RegisterNode";
 
 const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
 
-const NODE_COLORS: any = {
-  ['Composite']: 'rgb(91,237,32)',
-  ['Decorator']: 'rgb(218,167,16)',
-  ['Condition']: 'rgb(228,20,139)',
-  ['Action']: 'rgb(91,143,249)',
-  ['Other']: 'rgb(112,112,112)',
-}
 
 interface MainState {
   workspace: string;
@@ -43,265 +37,7 @@ export default class Main extends Component {
 
   componentWillMount() {
     this.updateSettings();
-    const settings = this.settings;
-    G6.registerNode(
-      'TreeNode',
-      {
-        options: {
-          type: 'rect',
-          labelCfg: {
-            style: {
-              fill: 'blue',
-              fontSize: 10
-            }
-          },
-          style: {
-            fill: "white",
-          },
-          stateStyles: {
-            selected: {
-              'main-box': {
-                stroke: 'black',
-                lineWidth: 3,
-              },
-            },
-            hover: {
-              stroke: 'white',
-              lineWidth: 3,
-            },
-            dragSrc: {
-              fill: 'gray',
-            },
-            dragRight: {
-              'drag-right': {
-                fillOpacity: 0.6,
-              }
-            },
-            dragUp: {
-              'drag-up': {
-                fillOpacity: 0.6,
-              }
-            },
-            dragDown: {
-              'drag-down': {
-                fillOpacity: 0.6,
-              }
-            }
-          },
-        },
-        draw(cfg, group) {
-          const nodeConf = settings.getNodeConf(cfg.name as string);
-          const classify = nodeConf.type || 'Other';
-          const color = NODE_COLORS[classify] || 'Other';
-          var size = cfg.size ? cfg.size as number[] : [150, 40];
-          const w = size[0];
-          const h = size[1];
-          const x0 = -w / 2;
-          const y0 = -h / 2;
-          const r = 2;
-          const shape = group.addShape('rect', {
-            attrs: {
-              x: x0,
-              y: y0,
-              width: w,
-              height: h,
-              stroke: color,
-              lineWidth: 2,
-              fill: 'white',
-              radius: r,
-            },
-            name: 'main-box',
-            draggable: true,
-          });
-
-          // name bg
-          group.addShape('rect', {
-            attrs: {
-              x: x0 + 1.5,
-              y: y0 + 1.5,
-              width: w - 3,
-              height: 16,
-              fill: color,
-              // radius: r,
-            },
-            name: 'name-bg',
-            draggable: true,
-          });
-
-          // id text
-          group.addShape('text', {
-            attrs: {
-              textBaseline: 'top',
-              x: x0 - 3,
-              y: -8,
-              fontSize: 20,
-              lineHeight: 20,
-              text: cfg.id,
-              textAlign: 'right',
-              fill: 'white',
-              stroke: 'black',
-              lineWidth: 2,
-            },
-            name: 'id-text',
-          });
-
-          // icon
-          var img = `./static/icons/${classify}.svg`;
-          group.addShape('image', {
-            attrs: {
-              x: x0 + 3,
-              y: y0 + 2,
-              height: 14,
-              width: 14,
-              img,
-            },
-            name: 'node-icon',
-          });
-
-          // name text
-          group.addShape('text', {
-            attrs: {
-              textBaseline: 'top',
-              x: x0 + 18,
-              y: y0 + 4,
-              fontWeight: 800,
-              lineHeight: 20,
-              text: cfg.name,
-              fill: 'black',
-            },
-            name: 'name-text',
-          });
-
-          var x = x0 + 2;
-          var y = y0 + 23;
-          // desc text
-          const desc = cfg.desc || nodeConf.desc;
-          if (desc) {
-            group.addShape('text', {
-              attrs: {
-                textBaseline: 'top',
-                x,
-                y,
-                lineHeight: 20,
-                fontWeight: 800,
-                text: `备注:${desc}`,
-                fill: 'black',
-              },
-              name: 'desc-text',
-            });
-          }
-
-          const args: any = cfg.args;
-          if (args && Object.keys(args).length > 0) {
-            y += 20;
-            group.addShape('text', {
-              attrs: {
-                textBaseline: 'top',
-                x,
-                y,
-                lineHeight: 20,
-                text: `参数:${JSON.stringify(args)}`,
-                fill: 'black',
-              },
-              name: 'args-text',
-            });
-          }
-
-          const input: [] = cfg.input ? cfg.input as [] : [];
-          if (input.length > 0) {
-            y += 20;
-            group.addShape('text', {
-              attrs: {
-                textBaseline: 'top',
-                x,
-                y,
-                lineHeight: 20,
-                text: `输入:${JSON.stringify(input)}`,
-                fill: 'black',
-              },
-              name: 'input-text',
-            });
-          }
-
-          const output: [] = cfg.output ? cfg.output as [] : [];
-          if (output.length > 0) {
-            y += 20;
-            group.addShape('text', {
-              attrs: {
-                textBaseline: 'top',
-                x,
-                y,
-                lineHeight: 20,
-                text: `输出:${JSON.stringify(output)}`,
-                fill: 'black',
-              },
-              name: 'output-text',
-            });
-          }
-
-          if (cfg.children) {
-            group.addShape('marker', {
-              attrs: {
-                x: w / 2,
-                y: 0,
-                r: 6,
-                cursor: 'pointer',
-                symbol: G6.Marker.collapse,
-                stroke: '#666',
-                lineWidth: 1,
-                fill: '#fff',
-              },
-              name: 'collapse-icon',
-            });
-          }
-
-
-          group.addShape('rect', {
-            name: 'drag-up',
-            attrs: {
-              x: -w / 2,
-              y: -h / 2,
-              width: w,
-              height: h / 2,
-              fill: 'blue',
-              fillOpacity: 0,
-            },
-            draggable: true,
-            // visible: false,
-          });
-
-          group.addShape('rect', {
-            name: 'drag-down',
-            attrs: {
-              x: -w / 2,
-              y: 0,
-              width: w,
-              height: h / 2,
-              fill: 'blue',
-              fillOpacity: 0,
-            },
-            draggable: true,
-            // visible: false,
-          });
-
-          group.addShape('rect', {
-            name: 'drag-right',
-            attrs: {
-              x: w * 0.1,
-              y: -h / 2,
-              width: w * 0.4,
-              height: h,
-              fill: 'blue',
-              fillOpacity: 0,
-            },
-            draggable: true,
-            // visible: false,
-          });
-          return shape;
-        }
-      },
-      'single-node',
-    );
+    RegisterNode(this.settings);
   }
 
   componentDidMount() {