添加三叉树

2021-08-25 18:50:34 +08:00
parent 80e761a57e
commit 7980dc7b50
2 changed files with 269 additions and 0 deletions
@@ -0,0 +1,100 @@
+import * as G6 from "./../Lib/g6.js";
+
+
+export default G6.registerNode('tri-tree-node', {
+    draw(cfg, group) {
+        cfg.size = cfg.size;
+
+        const width = cfg.size[0],
+              height = cfg.size[1];
+
+        const wrapperRect = group.addShape('rect', {
+            attrs: {
+                x: width / 2,
+                y: height / 2,
+                width: width,
+                height: height,
+                stroke: cfg.style.stroke || '#333',
+                cursor: cfg.style.cursor,
+                fill: '#eee'
+            },
+            name: 'wrapper'
+        });
+
+        group.addShape('rect', {
+            attrs: {
+                x: width / 4 + width / 2,
+                y: height / 2,
+                width: width / 2,
+                height: height / 4,
+                fill: '#eee',
+                stroke: cfg.style.stroke || '#333',
+                cursor: cfg.style.cursor
+            },
+            name: 'top',
+            draggable: true
+        });
+
+        group.addShape('rect', {
+            attrs: {
+                x: width / 4 + width / 2,
+                y: height / 2 + height / 4,
+                width: width / 2,
+                height: height / 4 * 3,
+                fill: cfg.color || cfg.style.fill,
+                stroke: cfg.style.stroke || '#333',
+                cursor: cfg.style.cursor
+            },
+            name: 'bottom',
+            draggable: true
+        });
+
+        if (cfg.label) {
+            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+            group.addShape('text', {
+                attrs: {
+                    x: width, // 居中
+                    y: height + height / 8,
+                    textAlign: 'center',
+                    textBaseline: 'middle',
+                    text: cfg.label,
+                    fill: style.fill || '#000',
+                    fontSize: style.fontSize || 16,
+                    cursor: cfg.style.cursor
+                },
+                name: 'text',
+                draggable: true
+            });
+        }
+
+        if (cfg.root) {
+            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+            group.addShape('text', {
+                attrs: {
+                    x: width, // 居中
+                    y: height / 4 * 3,
+                    textAlign: 'center',
+                    textBaseline: 'middle',
+                    text: "^",
+                    fill: style.fill || '#000',
+                    fontSize: style.fontSize || 14,
+                    cursor: cfg.style.cursor
+                },
+                name: 'parent',
+                draggable: true
+            });
+        }
+
+        return wrapperRect;
+    },
+
+    getAnchorPoints() {
+        return [
+            [0.125, 0.5],
+            [0.875, 0.5],
+            [0.5, 1],
+            [0.5, 0],
+            [0.5, 0.125]
+        ];
+    },
+});