From 1dcea813f33177a2fb8d0224b528422552f0ef9a Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Mon, 8 Mar 2021 21:16:18 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.03.08:=E6=B7=BB=E5=8A=A0antdG6?=
 =?UTF-8?q?=E6=80=9D=E7=BB=B4=E5=AF=BC=E5=9B=BE=E7=95=8C=E9=9D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    |   3 +-
 src/utils/setIconfont.ts        |   4 +-
 src/views/fun/mindMap/index.vue | 709 ++++++++++++++++++++++----------
 3 files changed, 494 insertions(+), 222 deletions(-)

diff --git a/package.json b/package.json
index 0eeafef..a48b78e 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@antv/g6": "^4.1.16",
     "axios": "^0.21.1",
     "clipboard": "^2.0.6",
     "countup.js": "^2.0.7",
@@ -37,4 +36,4 @@
     "typescript": "^4.2.3",
     "vite": "^2.0.5"
   }
-}
+}
\ No newline at end of file
diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts
index 9f3dcde..0f26d9a 100644
--- a/src/utils/setIconfont.ts
+++ b/src/utils/setIconfont.ts
@@ -4,7 +4,9 @@ const cssCdnUrlList: Array<string> = [
     '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
 ]
 // 第三方 js url
-const jsCdnUrlList: Array<string> = []
+const jsCdnUrlList: Array<string> = [
+    'https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.8.1/dist/g6.min.js'
+]
 
 // 动态设置字体图标
 export function setCssCdn() {
diff --git a/src/views/fun/mindMap/index.vue b/src/views/fun/mindMap/index.vue
index b1fda67..62a7237 100644
--- a/src/views/fun/mindMap/index.vue
+++ b/src/views/fun/mindMap/index.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { toRefs, reactive, computed, onMounted, nextTick } from "vue";
-import G6 from "@antv/g6";
 import { useStore } from "/@/store/index.ts";
 export default {
   name: "mindMap",
@@ -23,258 +22,533 @@ export default {
     });
     // 初始化 antv/G6
     const initAntvG6 = () => {
-      console.log(G6);
+      const { Util } = G6;
+      const colorArr = [
+        "#5B8FF9",
+        "#5AD8A6",
+        "#5D7092",
+        "#F6BD16",
+        "#6F5EF9",
+        "#6DC8EC",
+        "#D3EEF9",
+        "#DECFEA",
+        "#FFE0C7",
+        "#1E9493",
+        "#BBDEDE",
+        "#FF99C3",
+        "#FFE0ED",
+        "#CDDDFD",
+        "#CDF3E4",
+        "#CED4DE",
+        "#FCEBB9",
+        "#D3CEFD",
+        "#945FB9",
+        "#FF9845",
+      ];
 
-      const fontSize = 12;
-      // 自定义节点
-      G6.registerNode("line", {
-        draw: (cfg, group) => {
-          const width = cfg.label.length * 10;
-          const rect = group.addShape("rect", {
-            attrs: {
-              x: 0,
-              y: -10,
-              ...cfg.style,
-              width,
-              height: 20,
-              lineWidth: 0,
-              opacity: 0,
-            },
-            name: "rect-shape",
-            draggable: true,
-          });
-          const label = group.addShape("text", {
-            attrs: {
-              text: cfg.label,
-              fill: "#000",
-              fontSize,
-              x: 0,
-              y: -5,
-            },
-            name: "label-shape",
-            draggable: true,
-          });
-          const labelBBox = label.getBBox();
-          // const icon = group.addShape('circle', {
-          //   attrs: {
-          //     x: labelBBox.maxX + 10,
-          //     y: (labelBBox.minY + labelBBox.maxY) / 2,
-          //     r: 5,
-          //     stroke: '#000'
-          //   },
-          //   name: 'circle-shape',
-          //   draggable: true
-          // });
-          const bboxWidth = label.getBBox().width + 20;
-          rect.attr({ width: bboxWidth });
-          group.addShape("path", {
-            attrs: {
-              lineWidth: 1,
-              fill: "#ccc",
-              stroke: "#0092ff",
-              path: [
-                ["M", 0, 0],
-                ["L", bboxWidth, 0],
-              ],
-            },
-            name: "path-shape",
-            draggable: true,
-          });
-          return rect;
-        },
-      });
-      //获取宽度
-      const width = document.getElementById("antvG6").clientWidth;
-      const height = document.getElementById("antvG6").clientHeight;
-
-      // return false;
-      const graph = new G6.TreeGraph({
-        container: "antvG6",
-        width,
-        height,
-        pixelRatio: 2,
-        modes: {
-          default: ["collapse-expand", "drag-canvas", "zoom-canvas"],
-        },
-        // 节点类型及样式
-        defaultNode: {
-          type: "rect",
-          // size: 16,
-          width: "auto",
-          anchorPoints: [
-            [0, 0.5],
-            [1, 0.5],
-          ],
-          style: {
-            fill: "#005ff2", //背景色
-            stroke: "#005ff2", //边框
-          },
-          labelCfg: {
-            style: {
-              fill: "#ffffff",
-              fontSize,
-            },
-          },
-        },
-        //  连线类型及样式
-        defaultEdge: {
-          type: "cubic-horizontal",
-          // polyline
-          style: {
-            stroke: "#0092ff",
-          },
-        },
-        // 布局
-        layout: {
-          type: "mindmap",
-          direction: "H",
-          getHeight: function getHeight() {
-            return 16;
-          },
-          getWidth: function getWidth() {
-            return 16;
-          },
-          getVGap: function getVGap() {
-            return 10;
-          },
-          getHGap: function getHGap() {
-            return 100;
-          },
-        },
-      });
-      graph.node(function (node) {
-        // depth 类似节点标识
-        if (node.depth == 0) {
-          return {
-            // size:[100,60],
-            style: {
-              fill: "#005ff2", //背景色
-              stroke: "#005ff2", //边框
-            },
-            // label:node.id
-          };
-        }
-        if (node.depth == 1) {
-          return {
-            style: {
-              //渐变色
-              fill:
-                "l(0) 0:rgba(0,36,186,1) 0.5:rgba(0,36,186,0.5) 1:rgba(0,0,0,0.1)",
-            },
-          };
-        }
-        if (node.depth == 2) {
-          return {
-            type: "line",
-          };
-        }
-        return {
-          // label: node.id, // 设置显示名称
-          labelCfg: {
-            // position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left', // 设置显示左右
-            offset: 5,
-          },
-        };
-      });
-      const data = {
-        id: "id1",
-        label: "遗属补助小专项",
+      const rawData = {
+        label: "vue-next-admin",
+        id: "0",
         children: [
           {
-            id: "id1-1",
-            label: "已死亡",
+            label: "Classification",
+            id: "0-1",
+            color: "#5AD8A6",
             children: [
               {
-                id: "id1-1-1",
-                label: "问题数：35个",
+                label: "Logistic regression",
+                id: "0-1-1",
               },
               {
-                id: "id1-1-2",
-                label: "人数：50人",
+                label: "Linear discriminant analysis",
+                id: "0-1-2",
               },
               {
-                id: "id1-1-3",
-                label: "资金：340万",
+                label: "Rules",
+                id: "0-1-3",
+              },
+              {
+                label: "Decision trees",
+                id: "0-1-4",
+              },
+              {
+                label: "Naive Bayes",
+                id: "0-1-5",
+              },
+              {
+                label: "K nearest neighbor",
+                id: "0-1-6",
+              },
+              {
+                label: "Probabilistic neural network",
+                id: "0-1-7",
+              },
+              {
+                label: "Support vector machine",
+                id: "0-1-8",
               },
             ],
           },
           {
-            id: "id1-2",
-            label: "姓名与身份证不符",
+            label: "Consensus",
+            id: "0-2",
+            color: "#F6BD16",
             children: [
               {
-                id: "id1-2-1",
-                label: "问题数：35个",
+                label: "Models diversity",
+                id: "0-2-1",
+                children: [
+                  {
+                    label: "Different initializations",
+                    id: "0-2-1-1",
+                  },
+                  {
+                    label: "Different parameter choices",
+                    id: "0-2-1-2",
+                  },
+                  {
+                    label: "Different architectures",
+                    id: "0-2-1-3",
+                  },
+                  {
+                    label: "Different modeling methods",
+                    id: "0-2-1-4",
+                  },
+                  {
+                    label: "Different training sets",
+                    id: "0-2-1-5",
+                  },
+                  {
+                    label: "Different feature sets",
+                    id: "0-2-1-6",
+                  },
+                ],
               },
               {
-                id: "id1-2-2",
-                label: "人数：50人",
+                label: "Methods",
+                id: "0-2-2",
+                children: [
+                  {
+                    label: "Classifier selection",
+                    id: "0-2-2-1",
+                  },
+                  {
+                    label: "Classifier fusion",
+                    id: "0-2-2-2",
+                  },
+                ],
               },
               {
-                id: "id1-2-3",
-                label: "资金：340万",
+                label: "Common",
+                id: "0-2-3",
+                children: [
+                  {
+                    label: "Bagging",
+                    id: "0-2-3-1",
+                  },
+                  {
+                    label: "Boosting",
+                    id: "0-2-3-2",
+                  },
+                  {
+                    label: "AdaBoost",
+                    id: "0-2-3-3",
+                  },
+                ],
               },
             ],
           },
           {
-            id: "id1-3",
-            label: "未查到身份证信息",
+            label: "Regression",
+            id: "0-3",
+            color: "#269A99",
             children: [
               {
-                id: "id1-3-1",
-                label: "问题数：35个",
+                label: "Multiple linear regression",
+                id: "0-3-1",
               },
               {
-                id: "id1-3-2",
-                label: "人数：50人",
+                label: "Partial least squares",
+                id: "0-3-2",
               },
               {
-                id: "id1-3-3",
-                label: "资金：340万",
-              },
-            ],
-          },
-          {
-            id: "id1-4",
-            label: "领取低保",
-            children: [
-              {
-                id: "id1-4-1",
-                label: "问题数：35个",
+                label: "Multi-layer feedforward neural network",
+                id: "0-3-3",
               },
               {
-                id: "id1-4-2",
-                label: "人数：50人",
+                label: "General regression neural network",
+                id: "0-3-4",
               },
               {
-                id: "id1-4-3",
-                label: "资金：340万",
-              },
-            ],
-          },
-          {
-            id: "id1-5",
-            label: "年龄不符合",
-            children: [
-              {
-                id: "id1-5-1",
-                label: "问题数：35个",
-              },
-              {
-                id: "id1-5-2",
-                label: "人数：50人",
-              },
-              {
-                id: "id1-5-3",
-                label: "资金：340万",
+                label: "Support vector regression",
+                id: "0-3-5",
               },
             ],
           },
         ],
       };
-      graph.data(data);
-      graph.render();
-      graph.fitView();
+
+      G6.registerNode(
+        "dice-mind-map-root",
+        {
+          jsx: (cfg) => {
+            const width = Util.getTextSize(cfg.label, 16)[0] + 24;
+            const stroke = cfg.style.stroke || "#096dd9";
+            const fill = cfg.style.fill;
+
+            return `
+      <group>
+        <rect draggable="true" style={{width: ${width}, height: 42, stroke: ${stroke}, radius: 4}} keyshape>
+          <text style={{ fontSize: 16, marginLeft: 12, marginTop: 12 }}>${
+            cfg.label
+          }</text>
+          <text style={{ marginLeft: ${
+            width - 16
+          }, marginTop: -20, stroke: '#66ccff', fill: '#000', cursor: 'pointer', opacity: ${
+              cfg.hover ? 0.75 : 0
+            } }} action="add">+</text>
+        </rect>
+      </group>
+    `;
+          },
+          getAnchorPoints() {
+            return [
+              [0, 0.5],
+              [1, 0.5],
+            ];
+          },
+        },
+        "single-node"
+      );
+
+      G6.registerNode(
+        "dice-mind-map-sub",
+        {
+          jsx: (cfg) => {
+            const width = Util.getTextSize(cfg.label, 14)[0] + 24;
+            const color = cfg.color || cfg.style.stroke;
+
+            return `
+      <group>
+        <rect draggable="true" style={{width: ${
+          width + 24
+        }, height: 22}} keyshape>
+          <text draggable="true" style={{ fontSize: 14, marginLeft: 12, marginTop: 6 }}>${
+            cfg.label
+          }</text>
+          <text style={{ marginLeft: ${
+            width - 8
+          }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
+              cfg.hover ? 0.75 : 0
+            }, next: 'inline' }} action="add">+</text>
+          <text style={{ marginLeft: ${
+            width - 4
+          }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
+              cfg.hover ? 0.75 : 0
+            }, next: 'inline' }} action="delete">-</text>
+        </rect>
+        <rect style={{ fill: ${color}, width: ${
+              width + 24
+            }, height: 2, x: 0, y: 22 }} />
+        
+      </group>
+    `;
+          },
+          getAnchorPoints() {
+            return [
+              [0, 0.965],
+              [1, 0.965],
+            ];
+          },
+        },
+        "single-node"
+      );
+
+      G6.registerNode(
+        "dice-mind-map-leaf",
+        {
+          jsx: (cfg) => {
+            const width = Util.getTextSize(cfg.label, 12)[0] + 24;
+            const color = cfg.color || cfg.style.stroke;
+
+            return `
+      <group>
+        <rect draggable="true" style={{width: ${
+          width + 20
+        }, height: 26, fill: 'transparent' }}>
+          <text style={{ fontSize: 12, marginLeft: 12, marginTop: 6 }}>${
+            cfg.label
+          }</text>
+              <text style={{ marginLeft: ${
+                width - 8
+              }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
+              cfg.hover ? 0.75 : 0
+            }, next: 'inline' }} action="add">+</text>
+              <text style={{ marginLeft: ${
+                width - 4
+              }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
+              cfg.hover ? 0.75 : 0
+            }, next: 'inline' }} action="delete">-</text>
+        </rect>
+        <rect style={{ fill: ${color}, width: ${
+              width + 24
+            }, height: 2, x: 0, y: 32 }} />
+        
+      </group>
+    `;
+          },
+          getAnchorPoints() {
+            return [
+              [0, 0.965],
+              [1, 0.965],
+            ];
+          },
+        },
+        "single-node"
+      );
+
+      G6.registerBehavior("dice-mindmap", {
+        getEvents() {
+          return {
+            "node:click": "clickNode",
+            "node:dblclick": "editNode",
+            "node:mouseenter": "hoverNode",
+            "node:mouseleave": "hoverNodeOut",
+          };
+        },
+        clickNode(evt) {
+          const model = evt.item.get("model");
+          const name = evt.target.get("action");
+          switch (name) {
+            case "add":
+              const newId =
+                model.id +
+                "-" +
+                (((model.children &&
+                  model.children.reduce((a, b) => {
+                    const num = Number(b.id.split("-").pop());
+                    return a < num ? num : a;
+                  }, 0)) ||
+                  0) +
+                  1);
+              evt.currentTarget.updateItem(evt.item, {
+                children: (model.children || []).concat([
+                  {
+                    id: newId,
+                    direction:
+                      newId.charCodeAt(newId.length - 1) % 2 === 0
+                        ? "right"
+                        : "left",
+                    label: "New",
+                    type: "dice-mind-map-leaf",
+                    color:
+                      model.color ||
+                      colorArr[Math.floor(Math.random() * colorArr.length)],
+                  },
+                ]),
+              });
+              evt.currentTarget.refreshLayout(false);
+              break;
+            case "delete":
+              const parent = evt.item.get("parent");
+              evt.currentTarget.updateItem(parent, {
+                children: (parent.get("model").children || []).filter(
+                  (e) => e.id !== model.id
+                ),
+              });
+              evt.currentTarget.refreshLayout(false);
+              break;
+            case "edit":
+              break;
+            default:
+              return;
+          }
+        },
+        editNode(evt) {
+          const item = evt.item;
+          const model = item.get("model");
+          const { x, y } = item.calculateBBox();
+          const graph = evt.currentTarget;
+          const realPosition = evt.currentTarget.getClientByPoint(x, y);
+          const el = document.createElement("div");
+          const fontSizeMap = {
+            "dice-mind-map-root": 24,
+            "dice-mind-map-sub": 18,
+            "dice-mind-map-leaf": 16,
+          };
+          el.style.fontSize = fontSizeMap[model.type] + "px";
+          el.style.position = "fixed";
+          el.style.top = realPosition.y + "px";
+          el.style.left = realPosition.x + "px";
+          el.style.paddingLeft = "12px";
+          el.style.transformOrigin = "top left";
+          el.style.transform = `scale(${evt.currentTarget.getZoom()})`;
+          const input = document.createElement("input");
+          input.style.border = "none";
+          input.value = model.label;
+          input.style.width =
+            Util.getTextSize(model.label, fontSizeMap[model.type])[0] + "px";
+          input.className = "dice-input";
+          el.className = "dice-input";
+          el.appendChild(input);
+          document.body.appendChild(el);
+          const destroyEl = () => {
+            document.body.removeChild(el);
+          };
+          const clickEvt = (event) => {
+            if (!event.target["className"].includes("dice-input")) {
+              window.removeEventListener("mousedown", clickEvt);
+              window.removeEventListener("scroll", clickEvt);
+              graph.updateItem(item, {
+                label: input.value,
+              });
+              graph.refreshLayout(false);
+              graph.off("wheelZoom", clickEvt);
+              destroyEl();
+            }
+          };
+          graph.on("wheelZoom", clickEvt);
+          window.addEventListener("mousedown", clickEvt);
+          window.addEventListener("scroll", clickEvt);
+          input.addEventListener("keyup", (event) => {
+            if (event.key === "Enter") {
+              clickEvt({
+                target: {},
+              });
+            }
+          });
+        },
+        hoverNode(evt) {
+          evt.currentTarget.updateItem(evt.item, {
+            hover: true,
+          });
+        },
+        hoverNodeOut(evt) {
+          evt.currentTarget.updateItem(evt.item, {
+            hover: false,
+          });
+        },
+      });
+
+      G6.registerBehavior("scroll-canvas", {
+        getEvents: function getEvents() {
+          return {
+            wheel: "onWheel",
+          };
+        },
+
+        onWheel: function onWheel(ev) {
+          const { graph } = this;
+          if (!graph) {
+            return;
+          }
+          if (ev.ctrlKey) {
+            const canvas = graph.get("canvas");
+            const point = canvas.getPointByClient(ev.clientX, ev.clientY);
+            let ratio = graph.getZoom();
+            if (ev.wheelDelta > 0) {
+              ratio += ratio * 0.05;
+            } else {
+              ratio *= ratio * 0.05;
+            }
+            graph.zoomTo(ratio, {
+              x: point.x,
+              y: point.y,
+            });
+          } else {
+            const x = ev.deltaX || ev.movementX;
+            const y = ev.deltaY || ev.movementY || (-ev.wheelDelta * 125) / 3;
+            graph.translate(-x, -y);
+          }
+          ev.preventDefault();
+        },
+      });
+
+      const dataTransform = (data) => {
+        const changeData = (d, level = 0, color) => {
+          const data = {
+            ...d,
+          };
+          switch (level) {
+            case 0:
+              data.type = "dice-mind-map-root";
+              break;
+            case 1:
+              data.type = "dice-mind-map-sub";
+              break;
+            default:
+              data.type = "dice-mind-map-leaf";
+              break;
+          }
+
+          data.hover = false;
+
+          if (color) {
+            data.color = color;
+          }
+
+          if (level === 1 && !d.direction) {
+            if (!d.direction) {
+              data.direction =
+                d.id.charCodeAt(d.id.length - 1) % 2 === 0 ? "right" : "left";
+            }
+          }
+
+          if (d.children) {
+            data.children = d.children.map((child) =>
+              changeData(child, level + 1, data.color)
+            );
+          }
+          return data;
+        };
+        return changeData(data);
+      };
+
+      const container = document.getElementById("antvG6");
+      const width = container.scrollWidth;
+      const height = container.scrollHeight;
+      const tree = new G6.TreeGraph({
+        container: "antvG6",
+        width,
+        height,
+        fitView: true,
+        fitViewPadding: [10, 20],
+        layout: {
+          type: "mindmap",
+          direction: "H",
+          getHeight: () => {
+            return 16;
+          },
+          getWidth: (node) => {
+            return node.level === 0
+              ? Util.getTextSize(node.label, 16)[0] + 12
+              : Util.getTextSize(node.label, 12)[0];
+          },
+          getVGap: () => {
+            return 10;
+          },
+          getHGap: () => {
+            return 60;
+          },
+          getSide: (node) => {
+            return node.data.direction;
+          },
+        },
+        defaultEdge: {
+          type: "cubic-horizontal",
+          style: {
+            lineWidth: 2,
+          },
+        },
+        minZoom: 0.5,
+        modes: {
+          default: ["drag-canvas", "zoom-canvas", "dice-mindmap"],
+        },
+      });
+
+      tree.data(dataTransform(rawData));
+
+      tree.render();
     };
     // 页面加载时
     onMounted(() => {
@@ -286,7 +560,4 @@ export default {
     };
   },
 };
-</script>
-
-<style scoped lang="scss">
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file