{"componentChunkName":"component---node-modules-snfe-gatsby-theme-mtdv-site-templates-document-tsx","path":"/docs/manual/plugins/layoutForce","result":{"data":{"site":{"siteMetadata":{"isChartSite":false,"isGraphSite":true,"title":"MTDV","docs":[{"slug":"manual/force-graph-vis","title":"关联图","order":1},{"slug":"manual/api","title":"API","order":2},{"slug":"manual/plugins","title":"拓展能力","order":3},{"slug":"manual/flow-graph-g6","title":"编排图","order":99}]},"pathPrefix":""},"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"demo @/demo/force-graph-vis-demo/demo-layout/layout-force.vue"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"code-classlanguage-textgraphlayoutforcecode","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#code-classlanguage-textgraphlayoutforcecode","ariaLabel":"code classlanguage textgraphlayoutforcecode permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"graph.layoutForce()"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Function"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"对图谱进行力导向布局"}]}],"data":{"quirksMode":false}},"tableOfContents":"<ul>\n<li><a href=\"/docs/manual/plugins/layoutForce/#code-classlanguage-textgraphlayoutforcecode\"><strong><code class=\"language-text\">graph.layoutForce()</code></strong></a></li>\n</ul>","fields":{"slug":"/docs/manual/plugins/layoutForce","readingTime":{"text":"1 min read","time":4800}},"frontmatter":{"title":"力导向布局"},"parent":{"__typename":"File","relativePath":"manual/plugins/layoutForce.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/docs/manual/api/graph"},"frontmatter":{"title":"图谱实例","order":0}}},{"node":{"fields":{"slug":"/docs/manual/flow-graph-g6/intro"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/docs/manual/plugins/bezierCurveController"},"frontmatter":{"title":"贝塞尔曲线控制点","order":0}}},{"node":{"fields":{"slug":"/docs/manual/force-graph-vis/intro"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/docs/manual/api/render"},"frontmatter":{"title":"渲染","order":1}}},{"node":{"fields":{"slug":"/docs/manual/flow-graph-g6/flow-graph-g6"},"frontmatter":{"title":"入门教程","order":1}}},{"node":{"fields":{"slug":"/docs/manual/force-graph-vis/begin"},"frontmatter":{"title":"入门教程","order":1}}},{"node":{"fields":{"slug":"/docs/manual/plugins/colorPalette"},"frontmatter":{"title":"颜色板","order":1}}},{"node":{"fields":{"slug":"/docs/manual/api/simulation"},"frontmatter":{"title":"力学模拟","order":2}}},{"node":{"fields":{"slug":"/docs/manual/flow-graph-g6/main-concept"},"frontmatter":{"title":"核心概念","order":2}}},{"node":{"fields":{"slug":"/docs/manual/force-graph-vis/main-concept"},"frontmatter":{"title":"核心概念","order":2}}},{"node":{"fields":{"slug":"/docs/manual/plugins/dynamicLoadData"},"frontmatter":{"title":"动态加载","order":2}}},{"node":{"fields":{"slug":"/docs/manual/api/zoom"},"frontmatter":{"title":"平移缩放","order":3}}},{"node":{"fields":{"slug":"/docs/manual/flow-graph-g6/API"},"frontmatter":{"title":"API","order":3}}},{"node":{"fields":{"slug":"/docs/manual/force-graph-vis/options"},"frontmatter":{"title":"图谱配置项","order":3}}},{"node":{"fields":{"slug":"/docs/manual/plugins/highlight"},"frontmatter":{"title":"高亮","order":3}}},{"node":{"fields":{"slug":"/docs/manual/api/eventEmitter"},"frontmatter":{"title":"事件","order":4}}},{"node":{"fields":{"slug":"/docs/manual/flow-graph-g6/example"},"frontmatter":{"title":"示例","order":4}}},{"node":{"fields":{"slug":"/docs/manual/plugins/layoutForce"},"frontmatter":{"title":"力导向布局","order":4}}},{"node":{"fields":{"slug":"/docs/manual/plugins/layoutLayer"},"frontmatter":{"title":"层次布局","order":5}}},{"node":{"fields":{"slug":"/docs/manual/plugins/layoutRing"},"frontmatter":{"title":"环形布局","order":6}}},{"node":{"fields":{"slug":"/docs/manual/plugins/occlusionDetection"},"frontmatter":{"title":"遮挡检测","order":7}}},{"node":{"fields":{"slug":"/docs/manual/plugins/RectSelection"},"frontmatter":{"title":"框选工具","order":8}}},{"node":{"fields":{"slug":"/docs/manual/plugins/selector"},"frontmatter":{"title":"快捷选择器","order":9}}},{"node":{"fields":{"slug":"/docs/manual/plugins/globalGraphHelper"},"frontmatter":{"title":"工具函数","order":10}}},{"node":{"fields":{"slug":"/docs/manual/plugins/minimap"},"frontmatter":{"title":"缩略图","order":11}}},{"node":{"fields":{"slug":"/docs/manual/plugins/customPlugin"},"frontmatter":{"title":"如何开发一个插件","order":12}}},{"node":{"fields":{"slug":"/docs/common/design-principle"},"frontmatter":{"title":"","order":null}}}]}},"pageContext":{"examples":[{"relativePath":"force-graph-vis/demo/VueGraphDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/demo/VueGraphDemo.vue","order":-1,"filename":"VueGraphDemo.vue","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'VueGraphDemo',\n  async mounted() {\n    new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: ForceGraphData.base,\n      auto: true,\n      d3,\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'VueGraphDemo',\n  async mounted() {\n    new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: ForceGraphData.base,\n      auto: true,\n      d3,\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"flow-graph-g6/layout/demo/node.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/layout/demo/node.vue","order":0,"filename":"node.vue","title":"自定义节点","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/node-demo.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'base',\n      id: 'node0', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      name: '数据读写',\n      inputs: [\n        [0, 0],\n        [0.5, 0],\n        [1, 0],\n      ],\n      outputs: [\n        [0, 1],\n        [0.5, 1],\n        [1, 1],\n      ],\n      leftFillWidth: 0,\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 200, // Number，可选，节点位置的 y 值\n      name: '数据读写',\n      inputs: [\n        [0, 0],\n        [0.5, 0],\n        [1, 0],\n      ],\n      outputs: [\n        [0, 1],\n        [0.5, 1],\n        [1, 1],\n      ],\n    },\n    {\n      type: 'base',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n    },\n    {\n      type: 'base',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      status: 1,\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      leftFillWidth: 32,\n      textLeftMargin: 38,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      status: 1,\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      leftFillWidth: 32,\n      textLeftMargin: 38,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node5', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      statusDesc: '异常121x',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      leftFillWidth: 32,\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node6', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      leftIcon: 'e68c',\n      name: '数据读写',\n      leftFillWidth: 32,\n      textLeftMargin: 36,\n    },\n    {\n      type: 'base',\n      id: 'node7', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 500, // Number，可选，节点位置的 y 值\n      leftIcon: 'e68c',\n      name: '数据读写',\n      textLeftMargin: 36,\n      leftIconColor: 'rgba(17,25,37,1)',\n    },\n    {\n      type: 'base',\n      id: 'node8', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 600, // Number，可选，节点位置的 y 值\n      name: '数据读写',\n      status: 'success',\n    },\n    {\n      type: 'base',\n      id: 'node9', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      name: '数据拆分',\n      status: 'loading',\n    },\n    {\n      type: 'base',\n      id: 'node10', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 500, // Number，可选，节点位置的 y 值\n      name: '通用预测',\n      status: 'error',\n    },\n    {\n      type: 'base',\n      id: 'node11', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 600, // Number，可选，节点位置的 y 值\n      name: '写hive表',\n      status: 'cancel',\n    },\n    {\n      type: 'base',\n      id: 'node12', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      name: 'XGboost分类',\n      status: 'warning',\n    },\n    {\n      type: 'cardNode',\n      id: 'node13', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 500, // Number，可选，节点位置的 y 值\n      name: 'XGboost分类',\n      leftIcon: 'e6a3',\n      panels: [\n        {\n          title: '成功率',\n          value: '11%',\n        },\n        {\n          title: '耗时',\n          value: '111',\n        },\n      ],\n      inputs: [\n        [0, 0],\n        [0.5, 0],\n        [1, 0],\n      ],\n      outputs: [\n        [0, 1],\n        [0.5, 1],\n        [1, 1],\n      ],\n    },\n  ],\n  // 边集\n  edges: [],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'base',\n      id: 'node0', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      name: '数据读写',\n      inputs: [\n        [0, 0],\n        [0.5, 0],\n        [1, 0],\n      ],\n      outputs: [\n        [0, 1],\n        [0.5, 1],\n        [1, 1],\n      ],\n      leftFillWidth: 0,\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 200, // Number，可选，节点位置的 y 值\n      name: '数据读写',\n      inputs: [\n        [0, 0],\n        [0.5, 0],\n        [1, 0],\n      ],\n      outputs: [\n        [0, 1],\n        [0.5, 1],\n        [1, 1],\n      ],\n    },\n    {\n      type: 'base',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n    },\n    {\n      type: 'base',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      status: 1,\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      leftFillWidth: 32,\n      textLeftMargin: 38,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      status: 1,\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      leftFillWidth: 32,\n      textLeftMargin: 38,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node5', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: 'dim_sc_grid_ext',\n      statusDesc: '异常121x',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      leftFillWidth: 32,\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node6', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      leftIcon: 'e68c',\n      name: '数据读写',\n      leftFillWidth: 32,\n      textLeftMargin: 36,\n    },\n    {\n      type: 'base',\n      id: 'node7', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 500, // Number，可选，节点位置的 y 值\n      leftIcon: 'e68c',\n      name: '数据读写',\n      textLeftMargin: 36,\n      leftIconColor: 'rgba(17,25,37,1)',\n    },\n    {\n      type: 'base',\n      id: 'node8', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 600, // Number，可选，节点位置的 y 值\n      name: '数据读写',\n      status: 'success',\n    },\n    {\n      type: 'base',\n      id: 'node9', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      name: '数据拆分',\n      status: 'loading',\n    },\n    {\n      type: 'base',\n      id: 'node10', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 500, // Number，可选，节点位置的 y 值\n      name: '通用预测',\n      status: 'error',\n    },\n    {\n      type: 'base',\n      id: 'node11', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 600, // Number，可选，节点位置的 y 值\n      name: '写hive表',\n      status: 'cancel',\n    },\n    {\n      type: 'base',\n      id: 'node12', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      name: 'XGboost分类',\n      status: 'warning',\n    },\n    {\n      type: 'cardNode',\n      id: 'node13', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 500, // Number，可选，节点位置的 y 值\n      name: 'XGboost分类',\n      leftIcon: 'e6a3',\n      panels: [\n        {\n          title: '成功率',\n          value: '11%',\n        },\n        {\n          title: '耗时',\n          value: '111',\n        },\n      ],\n      inputs: [\n        [0, 0],\n        [0.5, 0],\n        [1, 0],\n      ],\n      outputs: [\n        [0, 1],\n        [0.5, 1],\n        [1, 1],\n      ],\n    },\n  ],\n  // 边集\n  edges: [],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"flow-graph-g6/layout/demo/combo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/layout/demo/combo.vue","order":2,"filename":"combo.vue","title":"自定义combo","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/combo.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst nodes = [\n  {\n    type: 'simpleRectNode',\n    id: '1',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点1',\n    comboId: 'A',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '2',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点2',\n    comboId: 'A',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '3',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点3',\n    comboId: 'A',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '4',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点4',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '5',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点5',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '6',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#00ff00',\n    name: '节点6',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '7',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#ff0000',\n    name: '节点7',\n    comboId: 'C',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '8',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点8',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名;这是一个文件名;',\n      admin: '小红',\n    },\n    comboId: 'B',\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '9',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#0000ff20',\n    strokeColor: '#0000ff',\n    name: '节点9',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '10',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点10',\n    comboId: 'C',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '11',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点11',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n];\nconst edges = [\n  {\n    type: 'customEdge',\n    source: '1',\n    target: '2',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '2',\n    target: '3',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '3',\n    target: '4',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '4',\n    target: '5',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '5',\n    target: '6',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '6',\n    target: '11',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '4',\n    target: '8',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '8',\n    target: '9',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '3',\n    target: '10',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '3',\n    target: '7',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '10',\n    target: '11',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '9',\n    target: '11',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n];\n\nconst combos = [\n  {\n    id: 'A',\n    label: 'combo A',\n    style: {\n      fill: '#C4E3B2',\n      stroke: '#C4E3B2',\n    },\n  },\n  {\n    id: 'B',\n    label: 'combo B',\n    style: {\n      stroke: '#99C0ED',\n      fill: '#99C0ED',\n    },\n  },\n  {\n    id: 'C',\n    label: 'combo C',\n    style: {\n      stroke: '#eee',\n      fill: '#eee',\n    },\n  },\n];\n\nconst graphData = {\n  nodes,\n  edges,\n  combos,\n};\n\nconst radius = 4;\nconst lineHeight = 20;\nconst editImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/edit.png';\nconst rightImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/right.png';\nconst testImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/test.png';\nconst refreshImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/refresh-o.png';\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [\n            {\n              nodeType: 'simpleRectNode',\n              width: 200,\n              height: 104,\n              drawNodeShape: (cfg, group) => {\n                return this.createMultipleNode(group, cfg, 200, 104);\n              },\n            },\n          ],\n          layout: {\n            type: 'dagre',\n            rankdir: 'TB',\n            align: 'DL',\n            nodesep: 80,\n            // nodesepFunc: () => 10,\n            ranksepFunc: () => 30,\n          },\n          groupByTypes: false,\n          defaultCombo: {\n            type: 'rect',\n            style: {\n              fillOpacity: 0.3,\n            },\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n    createMultipleNode(group, cfg, w, h) {\n      const { strokeColor, fillColor, data } = cfg;\n\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: 0,\n          y: 0,\n          width: w,\n          height: h,\n          radius: radius,\n          stroke: strokeColor,\n          fill: fillColor,\n          lineWidth: 1,\n        },\n        name: 'rect-shape',\n      });\n\n      // 头部条形背景\n      group.addShape('rect', {\n        attrs: {\n          x: 0,\n          y: 0,\n          width: w,\n          height: 20,\n          fill: strokeColor,\n          radius: [radius, radius, 0, 0],\n        },\n        name: 'top-bar-shape',\n      });\n\n      // 标题\n      group.addShape('text', {\n        attrs: {\n          text: cfg.name,\n          x: 4,\n          y: 4,\n          fill: '#ffffff',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'name-text-shape',\n        draggable: true,\n      });\n\n      // 计划完成时间 - key\n      group.addShape('text', {\n        attrs: {\n          text: '计划完成时间：',\n          x: 4,\n          y: 4 + lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'name-text',\n        draggable: true,\n      });\n\n      // 计划完成时间 - value\n      group.addShape('text', {\n        attrs: {\n          text: data.time,\n          x: 4 + 80,\n          y: 4 + lineHeight,\n          fill: 'rgba(0,0,0,1)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'name-text-value',\n        draggable: true,\n      });\n\n      // 编辑计划完成时间按钮\n      group.addShape('image', {\n        attrs: {\n          x: w - 20,\n          y: 4 + lineHeight,\n          height: 12,\n          width: 12,\n          cursor: 'pointer',\n          img: editImg,\n        },\n        name: 'edit-icon',\n      });\n\n      this.addTask(group, cfg, w, h);\n\n      this.addFile(group, cfg, w, h);\n\n      // 分割线\n      group.addShape('path', {\n        attrs: {\n          path: [\n            ['M', 0, 4 + 4 * lineHeight],\n            ['L', w, 4 + 4 * lineHeight],\n          ],\n          stroke: 'rgba(0,0,0,0.1)',\n          lineWidth: 1,\n          lineAppendWidth: 5,\n        },\n        // must be assigned in G6 3.3 and later versions. it can be any value you want\n        name: 'path-shape',\n      });\n\n      // 责任人 - key\n      group.addShape('text', {\n        attrs: {\n          text: '责任人：',\n          x: 4,\n          y: 4 + 4 + 4 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-text',\n        draggable: true,\n      });\n\n      // 责任人 - key\n      group.addShape('text', {\n        attrs: {\n          text: data.admin,\n          x: 4 + 43,\n          y: 4 + 4 + 4 * lineHeight,\n          fill: 'rgba(0,0,0,1)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-text',\n        draggable: true,\n      });\n\n      // 底部按钮\n      group.addShape('image', {\n        attrs: {\n          x: w - 20,\n          y: 4 + 4 + 4 * lineHeight,\n          height: 12,\n          width: 12,\n          cursor: 'pointer',\n          img: refreshImg,\n        },\n        name: 'refresh-icon',\n      });\n\n      // 底部按钮\n      group.addShape('image', {\n        attrs: {\n          x: w - 40,\n          y: 4 + 4 + 4 * lineHeight,\n          height: 12,\n          width: 12,\n          cursor: 'pointer',\n          img: testImg,\n        },\n        name: 'test-icon',\n      });\n\n      return rect;\n    },\n    afterDraw(cfg, group, flow) {\n      /* 编辑时间按钮 事件 */\n      const editIcon = group.find((element) => element.get('name') === 'edit-icon');\n      if (editIcon) {\n        editIcon.on('mouseenter', () => {\n          editIcon.attr('cursor', 'pointer');\n        });\n        editIcon.on('click', () => {\n          flow.bus.emit('click:editIcon', {\n            target: editIcon,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      // 任务名称点击事件\n      const taskText = group.find((element) => element.get('name') === 'task-name-value');\n      if (taskText) {\n        taskText.on('mouseenter', () => {\n          taskText.attr('cursor', 'pointer');\n          taskText.attr('fontWeight', 700);\n        });\n        taskText.on('mouseout', () => {\n          taskText.attr('fontWeight', 400);\n        });\n        taskText.on('click', () => {\n          flow.bus.emit('click:taskText', {\n            target: fileText,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      // 文件名称点击事件\n      const fileText = group.find((element) => element.get('name') === 'file-name-value');\n      if (fileText) {\n        fileText.on('mouseenter', () => {\n          fileText.attr('cursor', 'pointer');\n          fileText.attr('fontWeight', 700);\n        });\n        fileText.on('mouseout', () => {\n          fileText.attr('fontWeight', 400);\n        });\n        fileText.on('click', () => {\n          flow.bus.emit('click:fileText', {\n            target: fileText,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      const refreshIcon = group.find((element) => element.get('name') === 'refresh-icon');\n      if (refreshIcon) {\n        refreshIcon.on('mouseenter', () => {\n          refreshIcon.attr('cursor', 'pointer');\n        });\n        refreshIcon.on('click', () => {\n          flow.bus.emit('click:refreshIcon', {\n            target: refreshIcon,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      const testIcon = group.find((element) => element.get('name') === 'test-icon');\n      if (testIcon) {\n        testIcon.on('mouseenter', () => {\n          testIcon.attr('cursor', 'pointer');\n        });\n        testIcon.on('click', () => {\n          flow.bus.emit('click:testIcon', {\n            target: testIcon,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n    },\n    ellipsis(shape, text, width) {\n      let ellipsisText = text;\n      while (shape.getBBox().width > width) {\n        ellipsisText = ellipsisText.slice(0, -1);\n        shape.attr('text', ellipsisText + '...');\n      }\n    },\n    addTask(group, cfg, w, h) {\n      const { strokeColor, fillColor, data } = cfg;\n\n      // 任务 - key\n      group.addShape('text', {\n        attrs: {\n          text: '任务：',\n          x: 4,\n          y: 4 + 2 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'task-text',\n        draggable: true,\n      });\n\n      // 任务 - value\n      const successTaskShape = group.addShape('text', {\n        attrs: {\n          text: 50,\n          x: 4 + 30,\n          y: 4 + 2 * lineHeight,\n          fill: '#ff0000',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'success-task-text-value',\n        draggable: true,\n      });\n\n      const successTaskShapeWidth = successTaskShape.getBBox().width;\n\n      // 任务 - 分割符\n      const taskSplitShape = group.addShape('text', {\n        attrs: {\n          text: '/',\n          x: 4 + 30 + successTaskShapeWidth,\n          y: 4 + 2 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'task-split-shape',\n        draggable: true,\n      });\n\n      const taskSplitShapeWidth = taskSplitShape.getBBox().width;\n\n      // 任务 - 分割符\n      const totalTaskShape = group.addShape('text', {\n        attrs: {\n          text: '200',\n          x: 4 + 30 + successTaskShapeWidth + taskSplitShapeWidth,\n          y: 4 + 2 * lineHeight,\n          fill: '#00ff00',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'total-task-text-value',\n        draggable: true,\n      });\n\n      const totalTaskShapeWidth = totalTaskShape.getBBox().width;\n\n      let taskText = data.task;\n      // 任务 - 任务名\n      const taskNameShape = group.addShape('text', {\n        attrs: {\n          text: taskText,\n          x: 4 + 30 + successTaskShapeWidth + taskSplitShapeWidth + totalTaskShapeWidth + 5,\n          y: 4 + 2 * lineHeight,\n          fill: '#1890ff',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'task-name-value',\n        draggable: true,\n      });\n\n      this.ellipsis(\n        taskNameShape,\n        taskText,\n        w - (4 + 30 + successTaskShapeWidth + taskSplitShapeWidth + totalTaskShapeWidth + 5 + 20)\n      );\n\n      group.addShape('image', {\n        attrs: {\n          x: w - 18,\n          y: 4 + 2 * lineHeight,\n          height: 14,\n          width: 14,\n          cursor: 'pointer',\n          img: rightImg,\n        },\n        name: 'task-more-icon',\n      });\n    },\n    addFile(group, cfg, w, h) {\n      const { strokeColor, fillColor, data } = cfg;\n\n      // 任务 - key\n      group.addShape('text', {\n        attrs: {\n          text: '文件：',\n          x: 4,\n          y: 4 + 3 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-key',\n        draggable: true,\n      });\n\n      // 任务 - value\n      const successShape = group.addShape('text', {\n        attrs: {\n          text: 50,\n          x: 4 + 30,\n          y: 4 + 3 * lineHeight,\n          fill: '#ff0000',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'success-file-text-value',\n        draggable: true,\n      });\n\n      const successShapeWidth = successShape.getBBox().width;\n\n      // 任务 - 分割符\n      const splitShape = group.addShape('text', {\n        attrs: {\n          text: '/',\n          x: 4 + 30 + successShapeWidth,\n          y: 4 + 3 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-split',\n        draggable: true,\n      });\n\n      const splitShapeWidth = splitShape.getBBox().width;\n\n      // 任务 - 分割符\n      const totalShape = group.addShape('text', {\n        attrs: {\n          text: '200',\n          x: 4 + 30 + successShapeWidth + splitShapeWidth,\n          y: 4 + 3 * lineHeight,\n          fill: '#00ff00',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'total-file-value',\n        draggable: true,\n      });\n\n      const totalShapeWidth = totalShape.getBBox().width;\n\n      let text = data.file;\n      // 任务 - 任务名\n      const nameShape = group.addShape('text', {\n        attrs: {\n          text: text,\n          x: 4 + 30 + successShapeWidth + splitShapeWidth + totalShapeWidth + 5,\n          y: 4 + 3 * lineHeight,\n          fill: '#1890ff',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-name-value',\n        draggable: true,\n      });\n\n      this.ellipsis(nameShape, text, w - (4 + 30 + successShapeWidth + splitShapeWidth + totalShapeWidth + 5 + 20));\n\n      group.addShape('image', {\n        attrs: {\n          x: w - 18,\n          y: 4 + 3 * lineHeight,\n          height: 14,\n          width: 14,\n          cursor: 'pointer',\n          img: rightImg,\n        },\n        name: 'file-more-icon',\n      });\n    },\n    ellipsis(shape, text, width) {\n      let ellipsisText = text;\n      while (shape.getBBox().width > width) {\n        ellipsisText = ellipsisText.slice(0, -1);\n        shape.attr('text', ellipsisText + '...');\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst nodes = [\n  {\n    type: 'simpleRectNode',\n    id: '1',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点1',\n    comboId: 'A',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '2',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点2',\n    comboId: 'A',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '3',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点3',\n    comboId: 'A',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '4',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点4',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '5',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点5',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '6',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#00ff00',\n    name: '节点6',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '7',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#ff0000',\n    name: '节点7',\n    comboId: 'C',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '8',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点8',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名;这是一个文件名;',\n      admin: '小红',\n    },\n    comboId: 'B',\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '9',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#0000ff20',\n    strokeColor: '#0000ff',\n    name: '节点9',\n    comboId: 'B',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '10',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点10',\n    comboId: 'C',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '11',\n    x: 0,\n    y: 0,\n    color: '#69c0ff',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点11',\n    data: {\n      time: '2021.11.22',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n    status: 1,\n    component: {\n      inputs: [\n        {\n          portId: 0,\n        },\n      ],\n      outputs: [\n        {\n          portId: 1,\n        },\n      ],\n    },\n  },\n];\nconst edges = [\n  {\n    type: 'customEdge',\n    source: '1',\n    target: '2',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '2',\n    target: '3',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '3',\n    target: '4',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '4',\n    target: '5',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '5',\n    target: '6',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '6',\n    target: '11',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '4',\n    target: '8',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '8',\n    target: '9',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '3',\n    target: '10',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '3',\n    target: '7',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '10',\n    target: '11',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n  {\n    type: 'customEdge',\n    source: '9',\n    target: '11',\n    outputPortIndex: 0,\n    inputPortIndex: 0,\n  },\n];\n\nconst combos = [\n  {\n    id: 'A',\n    label: 'combo A',\n    style: {\n      fill: '#C4E3B2',\n      stroke: '#C4E3B2',\n    },\n  },\n  {\n    id: 'B',\n    label: 'combo B',\n    style: {\n      stroke: '#99C0ED',\n      fill: '#99C0ED',\n    },\n  },\n  {\n    id: 'C',\n    label: 'combo C',\n    style: {\n      stroke: '#eee',\n      fill: '#eee',\n    },\n  },\n];\n\nconst graphData = {\n  nodes,\n  edges,\n  combos,\n};\n\nconst radius = 4;\nconst lineHeight = 20;\nconst editImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/edit.png';\nconst rightImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/right.png';\nconst testImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/test.png';\nconst refreshImg = 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/refresh-o.png';\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [\n            {\n              nodeType: 'simpleRectNode',\n              width: 200,\n              height: 104,\n              drawNodeShape: (cfg, group) => {\n                return this.createMultipleNode(group, cfg, 200, 104);\n              },\n            },\n          ],\n          layout: {\n            type: 'dagre',\n            rankdir: 'TB',\n            align: 'DL',\n            nodesep: 80,\n            // nodesepFunc: () => 10,\n            ranksepFunc: () => 30,\n          },\n          groupByTypes: false,\n          defaultCombo: {\n            type: 'rect',\n            style: {\n              fillOpacity: 0.3,\n            },\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n    createMultipleNode(group, cfg, w, h) {\n      const { strokeColor, fillColor, data } = cfg;\n\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: 0,\n          y: 0,\n          width: w,\n          height: h,\n          radius: radius,\n          stroke: strokeColor,\n          fill: fillColor,\n          lineWidth: 1,\n        },\n        name: 'rect-shape',\n      });\n\n      // 头部条形背景\n      group.addShape('rect', {\n        attrs: {\n          x: 0,\n          y: 0,\n          width: w,\n          height: 20,\n          fill: strokeColor,\n          radius: [radius, radius, 0, 0],\n        },\n        name: 'top-bar-shape',\n      });\n\n      // 标题\n      group.addShape('text', {\n        attrs: {\n          text: cfg.name,\n          x: 4,\n          y: 4,\n          fill: '#ffffff',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'name-text-shape',\n        draggable: true,\n      });\n\n      // 计划完成时间 - key\n      group.addShape('text', {\n        attrs: {\n          text: '计划完成时间：',\n          x: 4,\n          y: 4 + lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'name-text',\n        draggable: true,\n      });\n\n      // 计划完成时间 - value\n      group.addShape('text', {\n        attrs: {\n          text: data.time,\n          x: 4 + 80,\n          y: 4 + lineHeight,\n          fill: 'rgba(0,0,0,1)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'name-text-value',\n        draggable: true,\n      });\n\n      // 编辑计划完成时间按钮\n      group.addShape('image', {\n        attrs: {\n          x: w - 20,\n          y: 4 + lineHeight,\n          height: 12,\n          width: 12,\n          cursor: 'pointer',\n          img: editImg,\n        },\n        name: 'edit-icon',\n      });\n\n      this.addTask(group, cfg, w, h);\n\n      this.addFile(group, cfg, w, h);\n\n      // 分割线\n      group.addShape('path', {\n        attrs: {\n          path: [\n            ['M', 0, 4 + 4 * lineHeight],\n            ['L', w, 4 + 4 * lineHeight],\n          ],\n          stroke: 'rgba(0,0,0,0.1)',\n          lineWidth: 1,\n          lineAppendWidth: 5,\n        },\n        // must be assigned in G6 3.3 and later versions. it can be any value you want\n        name: 'path-shape',\n      });\n\n      // 责任人 - key\n      group.addShape('text', {\n        attrs: {\n          text: '责任人：',\n          x: 4,\n          y: 4 + 4 + 4 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-text',\n        draggable: true,\n      });\n\n      // 责任人 - key\n      group.addShape('text', {\n        attrs: {\n          text: data.admin,\n          x: 4 + 43,\n          y: 4 + 4 + 4 * lineHeight,\n          fill: 'rgba(0,0,0,1)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-text',\n        draggable: true,\n      });\n\n      // 底部按钮\n      group.addShape('image', {\n        attrs: {\n          x: w - 20,\n          y: 4 + 4 + 4 * lineHeight,\n          height: 12,\n          width: 12,\n          cursor: 'pointer',\n          img: refreshImg,\n        },\n        name: 'refresh-icon',\n      });\n\n      // 底部按钮\n      group.addShape('image', {\n        attrs: {\n          x: w - 40,\n          y: 4 + 4 + 4 * lineHeight,\n          height: 12,\n          width: 12,\n          cursor: 'pointer',\n          img: testImg,\n        },\n        name: 'test-icon',\n      });\n\n      return rect;\n    },\n    afterDraw(cfg, group, flow) {\n      /* 编辑时间按钮 事件 */\n      const editIcon = group.find((element) => element.get('name') === 'edit-icon');\n      if (editIcon) {\n        editIcon.on('mouseenter', () => {\n          editIcon.attr('cursor', 'pointer');\n        });\n        editIcon.on('click', () => {\n          flow.bus.emit('click:editIcon', {\n            target: editIcon,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      // 任务名称点击事件\n      const taskText = group.find((element) => element.get('name') === 'task-name-value');\n      if (taskText) {\n        taskText.on('mouseenter', () => {\n          taskText.attr('cursor', 'pointer');\n          taskText.attr('fontWeight', 700);\n        });\n        taskText.on('mouseout', () => {\n          taskText.attr('fontWeight', 400);\n        });\n        taskText.on('click', () => {\n          flow.bus.emit('click:taskText', {\n            target: fileText,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      // 文件名称点击事件\n      const fileText = group.find((element) => element.get('name') === 'file-name-value');\n      if (fileText) {\n        fileText.on('mouseenter', () => {\n          fileText.attr('cursor', 'pointer');\n          fileText.attr('fontWeight', 700);\n        });\n        fileText.on('mouseout', () => {\n          fileText.attr('fontWeight', 400);\n        });\n        fileText.on('click', () => {\n          flow.bus.emit('click:fileText', {\n            target: fileText,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      const refreshIcon = group.find((element) => element.get('name') === 'refresh-icon');\n      if (refreshIcon) {\n        refreshIcon.on('mouseenter', () => {\n          refreshIcon.attr('cursor', 'pointer');\n        });\n        refreshIcon.on('click', () => {\n          flow.bus.emit('click:refreshIcon', {\n            target: refreshIcon,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n\n      const testIcon = group.find((element) => element.get('name') === 'test-icon');\n      if (testIcon) {\n        testIcon.on('mouseenter', () => {\n          testIcon.attr('cursor', 'pointer');\n        });\n        testIcon.on('click', () => {\n          flow.bus.emit('click:testIcon', {\n            target: testIcon,\n            config: cfg,\n            group,\n            flow,\n          });\n        });\n      }\n    },\n    ellipsis(shape, text, width) {\n      let ellipsisText = text;\n      while (shape.getBBox().width > width) {\n        ellipsisText = ellipsisText.slice(0, -1);\n        shape.attr('text', ellipsisText + '...');\n      }\n    },\n    addTask(group, cfg, w, h) {\n      const { strokeColor, fillColor, data } = cfg;\n\n      // 任务 - key\n      group.addShape('text', {\n        attrs: {\n          text: '任务：',\n          x: 4,\n          y: 4 + 2 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'task-text',\n        draggable: true,\n      });\n\n      // 任务 - value\n      const successTaskShape = group.addShape('text', {\n        attrs: {\n          text: 50,\n          x: 4 + 30,\n          y: 4 + 2 * lineHeight,\n          fill: '#ff0000',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'success-task-text-value',\n        draggable: true,\n      });\n\n      const successTaskShapeWidth = successTaskShape.getBBox().width;\n\n      // 任务 - 分割符\n      const taskSplitShape = group.addShape('text', {\n        attrs: {\n          text: '/',\n          x: 4 + 30 + successTaskShapeWidth,\n          y: 4 + 2 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'task-split-shape',\n        draggable: true,\n      });\n\n      const taskSplitShapeWidth = taskSplitShape.getBBox().width;\n\n      // 任务 - 分割符\n      const totalTaskShape = group.addShape('text', {\n        attrs: {\n          text: '200',\n          x: 4 + 30 + successTaskShapeWidth + taskSplitShapeWidth,\n          y: 4 + 2 * lineHeight,\n          fill: '#00ff00',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'total-task-text-value',\n        draggable: true,\n      });\n\n      const totalTaskShapeWidth = totalTaskShape.getBBox().width;\n\n      let taskText = data.task;\n      // 任务 - 任务名\n      const taskNameShape = group.addShape('text', {\n        attrs: {\n          text: taskText,\n          x: 4 + 30 + successTaskShapeWidth + taskSplitShapeWidth + totalTaskShapeWidth + 5,\n          y: 4 + 2 * lineHeight,\n          fill: '#1890ff',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'task-name-value',\n        draggable: true,\n      });\n\n      this.ellipsis(\n        taskNameShape,\n        taskText,\n        w - (4 + 30 + successTaskShapeWidth + taskSplitShapeWidth + totalTaskShapeWidth + 5 + 20)\n      );\n\n      group.addShape('image', {\n        attrs: {\n          x: w - 18,\n          y: 4 + 2 * lineHeight,\n          height: 14,\n          width: 14,\n          cursor: 'pointer',\n          img: rightImg,\n        },\n        name: 'task-more-icon',\n      });\n    },\n    addFile(group, cfg, w, h) {\n      const { strokeColor, fillColor, data } = cfg;\n\n      // 任务 - key\n      group.addShape('text', {\n        attrs: {\n          text: '文件：',\n          x: 4,\n          y: 4 + 3 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-key',\n        draggable: true,\n      });\n\n      // 任务 - value\n      const successShape = group.addShape('text', {\n        attrs: {\n          text: 50,\n          x: 4 + 30,\n          y: 4 + 3 * lineHeight,\n          fill: '#ff0000',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'success-file-text-value',\n        draggable: true,\n      });\n\n      const successShapeWidth = successShape.getBBox().width;\n\n      // 任务 - 分割符\n      const splitShape = group.addShape('text', {\n        attrs: {\n          text: '/',\n          x: 4 + 30 + successShapeWidth,\n          y: 4 + 3 * lineHeight,\n          fill: 'rgba(0,0,0, 0.4)',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-split',\n        draggable: true,\n      });\n\n      const splitShapeWidth = splitShape.getBBox().width;\n\n      // 任务 - 分割符\n      const totalShape = group.addShape('text', {\n        attrs: {\n          text: '200',\n          x: 4 + 30 + successShapeWidth + splitShapeWidth,\n          y: 4 + 3 * lineHeight,\n          fill: '#00ff00',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'total-file-value',\n        draggable: true,\n      });\n\n      const totalShapeWidth = totalShape.getBBox().width;\n\n      let text = data.file;\n      // 任务 - 任务名\n      const nameShape = group.addShape('text', {\n        attrs: {\n          text: text,\n          x: 4 + 30 + successShapeWidth + splitShapeWidth + totalShapeWidth + 5,\n          y: 4 + 3 * lineHeight,\n          fill: '#1890ff',\n          fontSize: 12,\n          textAlign: 'left',\n          textBaseline: 'top',\n        },\n        name: 'file-name-value',\n        draggable: true,\n      });\n\n      this.ellipsis(nameShape, text, w - (4 + 30 + successShapeWidth + splitShapeWidth + totalShapeWidth + 5 + 20));\n\n      group.addShape('image', {\n        attrs: {\n          x: w - 18,\n          y: 4 + 3 * lineHeight,\n          height: 14,\n          width: 14,\n          cursor: 'pointer',\n          img: rightImg,\n        },\n        name: 'file-more-icon',\n      });\n    },\n    ellipsis(shape, text, width) {\n      let ellipsisText = text;\n      while (shape.getBBox().width > width) {\n        ellipsisText = ellipsisText.slice(0, -1);\n        shape.attr('text', ellipsisText + '...');\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"flow-graph-g6/orientation/demo/orientation-TB.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/orientation/demo/orientation-TB.vue","order":1,"filename":"orientation-TB.vue","title":"竖向排列","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/orientation-TB.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      name: 'node 1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      name: 'node 2-1',\n    },\n    {\n      id: '3',\n      name: 'node 2-2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '4',\n      name: 'node 3-1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '5',\n      name: 'node 3-2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '6',\n      name: 'node 3-3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '7',\n      name: 'node 3-4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '1',\n      target: '3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '7',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          registerNodeConfigs: [\n            {\n              nodeType: 'sql',\n              width: 234,\n              height: 64,\n              drawNodeShape: (cfg, group) => {\n                return this.createSimpleNode(group, cfg, 55, 20);\n              },\n            },\n          ],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之一处\n                        ['L', endPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      lineWidth: 1.2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 70;\n            },\n            ranksep: 50,\n            controlPoints: true,\n            rankdir: 'TB',\n          },\n          defaultNode: {\n            type: 'base',\n            leftFillWidth: 0,\n            width: 100,\n            fillColor: '#e1eefc',\n          },\n          defaultEdge: {\n            type: 'hvh',\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    createSimpleNode(group, cfg, w, h) {\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: -75,\n          y: -25,\n          width: 150,\n          height: 50,\n          radius: 10,\n          stroke: '#5B8FF9',\n          fill: '#C6E5FF',\n          lineWidth: 3,\n        },\n        name: 'rect-shape',\n      });\n      if (cfg.name) {\n        group.addShape('text', {\n          attrs: {\n            text: cfg.name,\n            x: 0,\n            y: 0,\n            fill: '#00287E',\n            fontSize: 14,\n            textAlign: 'center',\n            textBaseline: 'middle',\n            fontWeight: 'bold',\n          },\n          name: 'text-shape',\n        });\n\n        return rect;\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      name: 'node 1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      name: 'node 2-1',\n    },\n    {\n      id: '3',\n      name: 'node 2-2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '4',\n      name: 'node 3-1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '5',\n      name: 'node 3-2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '6',\n      name: 'node 3-3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '7',\n      name: 'node 3-4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '1',\n      target: '3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '7',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          registerNodeConfigs: [\n            {\n              nodeType: 'sql',\n              width: 234,\n              height: 64,\n              drawNodeShape: (cfg, group) => {\n                return this.createSimpleNode(group, cfg, 55, 20);\n              },\n            },\n          ],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之一处\n                        ['L', endPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      lineWidth: 1.2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 70;\n            },\n            ranksep: 50,\n            controlPoints: true,\n            rankdir: 'TB',\n          },\n          defaultNode: {\n            type: 'base',\n            leftFillWidth: 0,\n            width: 100,\n            fillColor: '#e1eefc',\n          },\n          defaultEdge: {\n            type: 'hvh',\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    createSimpleNode(group, cfg, w, h) {\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: -75,\n          y: -25,\n          width: 150,\n          height: 50,\n          radius: 10,\n          stroke: '#5B8FF9',\n          fill: '#C6E5FF',\n          lineWidth: 3,\n        },\n        name: 'rect-shape',\n      });\n      if (cfg.name) {\n        group.addShape('text', {\n          attrs: {\n            text: cfg.name,\n            x: 0,\n            y: 0,\n            fill: '#00287E',\n            fontSize: 14,\n            textAlign: 'center',\n            textBaseline: 'middle',\n            fontWeight: 'bold',\n          },\n          name: 'text-shape',\n        });\n\n        return rect;\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"flow-graph-g6/orientation/demo/orientation-LR.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/orientation/demo/orientation-LR.vue","order":0,"filename":"orientation-LR.vue","title":"横向排列","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/orientation-LR.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      name: 'node 1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '2',\n      name: 'node 2-1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '3',\n\n      name: 'node 2-2',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '4',\n      name: 'node 3-1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '5',\n      name: 'node 3-2',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '6',\n      name: 'node 3-3',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '7',\n      name: 'node 3-4',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '1',\n      target: '3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '7',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          registerNodeConfigs: [],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x / 2 + endPoint.x / 2, startPoint.y], // 三分之一处\n                        ['L', startPoint.x / 2 + endPoint.x / 2, endPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      lineWidth: 1.2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 50;\n            },\n            ranksep: 70,\n            controlPoints: true,\n            rankdir: 'LR',\n          },\n          defaultEdge: {\n            type: 'hvh',\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    createSimpleNode(group, cfg, w, h) {\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: -75,\n          y: -25,\n          width: 150,\n          height: 50,\n          radius: 10,\n          stroke: '#5B8FF9',\n          fill: '#C6E5FF',\n          lineWidth: 3,\n        },\n        name: 'rect-shape',\n      });\n      if (cfg.name) {\n        group.addShape('text', {\n          attrs: {\n            text: cfg.name,\n            x: 0,\n            y: 0,\n            fill: '#00287E',\n            fontSize: 14,\n            textAlign: 'center',\n            textBaseline: 'middle',\n            fontWeight: 'bold',\n          },\n          name: 'text-shape',\n        });\n\n        return rect;\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      name: 'node 1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '2',\n      name: 'node 2-1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '3',\n\n      name: 'node 2-2',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '4',\n      name: 'node 3-1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '5',\n      name: 'node 3-2',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '6',\n      name: 'node 3-3',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n    {\n      id: '7',\n      name: 'node 3-4',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      type: 'base',\n      leftFillWidth: 0,\n      width: 100,\n      fillColor: '#e1eefc',\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '1',\n      target: '3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '7',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          registerNodeConfigs: [],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x / 2 + endPoint.x / 2, startPoint.y], // 三分之一处\n                        ['L', startPoint.x / 2 + endPoint.x / 2, endPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      lineWidth: 1.2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 50;\n            },\n            ranksep: 70,\n            controlPoints: true,\n            rankdir: 'LR',\n          },\n          defaultEdge: {\n            type: 'hvh',\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    createSimpleNode(group, cfg, w, h) {\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: -75,\n          y: -25,\n          width: 150,\n          height: 50,\n          radius: 10,\n          stroke: '#5B8FF9',\n          fill: '#C6E5FF',\n          lineWidth: 3,\n        },\n        name: 'rect-shape',\n      });\n      if (cfg.name) {\n        group.addShape('text', {\n          attrs: {\n            text: cfg.name,\n            x: 0,\n            y: 0,\n            fill: '#00287E',\n            fontSize: 14,\n            textAlign: 'center',\n            textBaseline: 'middle',\n            fontWeight: 'bold',\n          },\n          name: 'text-shape',\n        });\n\n        return rect;\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"flow-graph-g6/vis/demo/demo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/vis/demo/demo.vue","order":0,"filename":"demo.vue","title":"基本编排图","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/base-demo.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'base',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node5', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node6', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node1',\n      target: 'node3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node4',\n      target: 'node6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x / 2 + endPoint.x / 2, startPoint.y], // 三分之一处\n                        ['L', startPoint.x / 2 + endPoint.x / 2, endPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      endArrow: {\n                        path: 'M 0,0 L 6,3 L 4,0 L 6,-3 Z',\n                        fill: '#F6BD16',\n                      },\n                      lineWidth: 2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 50;\n            },\n            ranksep: 100,\n            controlPoints: true,\n            rankdir: 'LR',\n          },\n          defaultEdge: {\n            type: 'hvh',\n            style: {\n              radius: 20,\n              offset: 45,\n              endArrow: {\n                path: 'M 0,0 L 12,6 L 9,0 L 12,-6 Z',\n                fill: '#F6BD16',\n              },\n              lineWidth: 10,\n            },\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n      this.flow.graph.zoom(0.7);\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'base',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node5', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n    {\n      type: 'base',\n      id: 'node6', // String，该节点存在则必须，节点的唯一标识\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      name: 'dim_sc_grid_ext',\n      description: '供应链-网格化-维度扩展表',\n      height: 56,\n      leftIcon: 'e6a3',\n      textLeftMargin: 36,\n      width: 240,\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node1',\n      target: 'node3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: 'node4',\n      target: 'node6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x / 2 + endPoint.x / 2, startPoint.y], // 三分之一处\n                        ['L', startPoint.x / 2 + endPoint.x / 2, endPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      endArrow: {\n                        path: 'M 0,0 L 6,3 L 4,0 L 6,-3 Z',\n                        fill: '#F6BD16',\n                      },\n                      lineWidth: 2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 50;\n            },\n            ranksep: 100,\n            controlPoints: true,\n            rankdir: 'LR',\n          },\n          defaultEdge: {\n            type: 'hvh',\n            style: {\n              radius: 20,\n              offset: 45,\n              endArrow: {\n                path: 'M 0,0 L 12,6 L 9,0 L 12,-6 Z',\n                fill: '#F6BD16',\n              },\n              lineWidth: 10,\n            },\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n      this.flow.graph.zoom(0.7);\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"flow-graph-g6/orientation/demo/orientation-drage.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/orientation/demo/orientation-drage.vue","order":2,"filename":"orientation-drage.vue","title":"drage","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/orientation-drage.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      name: 'node 1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      name: 'node 2',\n    },\n    {\n      id: '3',\n      name: 'node 3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '4',\n      name: 'node 4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '5',\n      name: 'node 5',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '6',\n      name: 'node 6',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '7',\n      name: 'node 7',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '1',\n      target: '3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '7',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          registerNodeConfigs: [\n            {\n              nodeType: 'sql',\n              width: 234,\n              height: 64,\n              drawNodeShape: (cfg, group) => {\n                return this.createSimpleNode(group, cfg, 55, 20);\n              },\n            },\n          ],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之一处\n                        ['L', endPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      lineWidth: 1.2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 70;\n            },\n            ranksep: 50,\n            controlPoints: true,\n            rankdir: 'TB',\n          },\n          defaultNode: {\n            type: 'base',\n            leftFillWidth: 0,\n            width: 100,\n            fillColor: '#e1eefc',\n          },\n          defaultEdge: {\n            type: 'cubic',\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    createSimpleNode(group, cfg, w, h) {\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: -75,\n          y: -25,\n          width: 150,\n          height: 50,\n          radius: 10,\n          stroke: '#5B8FF9',\n          fill: '#C6E5FF',\n          lineWidth: 3,\n        },\n        name: 'rect-shape',\n      });\n      if (cfg.name) {\n        group.addShape('text', {\n          attrs: {\n            text: cfg.name,\n            x: 0,\n            y: 0,\n            fill: '#00287E',\n            fontSize: 14,\n            textAlign: 'center',\n            textBaseline: 'middle',\n            fontWeight: 'bold',\n          },\n          name: 'text-shape',\n        });\n\n        return rect;\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      name: 'node 1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      name: 'node 2',\n    },\n    {\n      id: '3',\n      name: 'node 3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '4',\n      name: 'node 4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '5',\n      name: 'node 5',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '6',\n      name: 'node 6',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      id: '7',\n      name: 'node 7',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '1',\n      target: '3',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '4',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '2',\n      target: '5',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '6',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n    {\n      source: '3',\n      target: '7',\n      outputPortIndex: 0,\n      inputPortIndex: 0,\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          registerNodeConfigs: [\n            {\n              nodeType: 'sql',\n              width: 234,\n              height: 64,\n              drawNodeShape: (cfg, group) => {\n                return this.createSimpleNode(group, cfg, 55, 20);\n              },\n            },\n          ],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#babcc0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之一处\n                        ['L', endPoint.x, startPoint.y / 2 + endPoint.y / 2], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                      lineWidth: 1.2,\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n          ],\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesepFunc: (d) => {\n              return 70;\n            },\n            ranksep: 50,\n            controlPoints: true,\n            rankdir: 'TB',\n          },\n          defaultNode: {\n            type: 'base',\n            leftFillWidth: 0,\n            width: 100,\n            fillColor: '#e1eefc',\n          },\n          defaultEdge: {\n            type: 'cubic',\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    createSimpleNode(group, cfg, w, h) {\n      // 外边框\n      const rect = group.addShape('rect', {\n        attrs: {\n          x: -75,\n          y: -25,\n          width: 150,\n          height: 50,\n          radius: 10,\n          stroke: '#5B8FF9',\n          fill: '#C6E5FF',\n          lineWidth: 3,\n        },\n        name: 'rect-shape',\n      });\n      if (cfg.name) {\n        group.addShape('text', {\n          attrs: {\n            text: cfg.name,\n            x: 0,\n            y: 0,\n            fill: '#00287E',\n            fontSize: 14,\n            textAlign: 'center',\n            textBaseline: 'middle',\n            fontWeight: 'bold',\n          },\n          name: 'text-shape',\n        });\n\n        return rect;\n      }\n    },\n  },\n  mounted() {\n    this.initGraph();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"flow-graph-g6/vis/demo/drage.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/vis/demo/drage.vue","order":1,"filename":"drage.vue","title":"流程图","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/drage.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'baseNode',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 200, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点1',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      type: 'baseNode',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      x: 200, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点2',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      type: 'baseNode',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点3',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      type: 'baseNode',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点4',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1', // String，必须，起始点 id\n      target: 'node2', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node1', // String，必须，起始点 id\n      target: 'node3', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node2', // String，必须，起始点 id\n      target: 'node4', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node3', // String，必须，起始点 id\n      target: 'node4', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          showPort: false,\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'baseNode',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 200, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点1',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      type: 'baseNode',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      x: 200, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点2',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      type: 'baseNode',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      x: 400, // Number，可选，节点位置的 x 值\n      y: 300, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点3',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n    {\n      type: 'baseNode',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      color: '#ff8800',\n      fillColor: '#fff3e4',\n      strokeColor: '#ff8800',\n      icon: '',\n      name: '节点4',\n      status: 2,\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1', // String，必须，起始点 id\n      target: 'node2', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node1', // String，必须，起始点 id\n      target: 'node3', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node2', // String，必须，起始点 id\n      target: 'node4', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node3', // String，必须，起始点 id\n      target: 'node4', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          showPort: false,\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"force-graph-vis/custom-styles/demo/StyleLinkArrow.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/custom-styles/demo/StyleLinkArrow.vue","order":3,"filename":"StyleLinkArrow.vue","title":"自定义边箭头","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/linkArrow.png","source":"<template>\n  <div class=\"style-link-arrow-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"边箭头配置\">\n      <ControlPanelItem title=\"箭头大小\">\n        <mtd-slider :max=\"20\" :min=\"5\" v-model=\"arrowSize\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头位置\">\n        <mtd-slider :max=\"100\" :min=\"0\" v-model=\"arrowPosition\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkArrow',\n  data() {\n    return {\n      $graph: null,\n      arrowSize: 15,\n      arrowPosition: 0,\n    };\n  },\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a' },\n        { id: 'b' },\n        { id: 'c' },\n        { id: 'd' },\n        { id: 'e' },\n        { id: 'f' },\n        { id: 'g' },\n        { id: 'h' },\n        { id: 'i' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkType: 'straight' },\n        { source: 'a', color: '#9661bc', target: 'c', linkType: 'straight' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkType: 'arc:lower' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkType: 'arc:lower' },\n        { source: 'a', color: '#78d3f8', target: 'h' },\n        { source: 'a', color: '#FD8C04', target: 'g' },\n        { source: 'a', color: '#93ABD3', target: 'i' },\n        { source: 'a', color: '#0E9AA7', target: 'f' },\n        { source: 'f', color: '#ff6b3b', target: 'f' }, //  自环边\n      ],\n    };\n\n    this.$graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      showLinkArrow: true,\n      linkArrowSize: this.arrowSize,\n      linkArrowPosition: this.arrowPosition,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(20);\n            forceObj.forceLink.distance(120).strength(1);\n            forceObj.forceManyBody = ForceGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n  },\n  methods: {\n    handleChange() {\n      this.$graph.setOptions({\n        linkArrowSize: this.arrowSize,\n        linkArrowPosition: this.arrowPosition,\n      });\n      this.$graph.createDefs();\n    },\n  },\n};\n</script>\n\n<style>\n.style-link-arrow-container {\n  position: relative;\n  height: 100%;\n}\n\n.style-link-arrow-container .mtd-slider {\n  margin-bottom: 30px;\n  padding-bottom: 8px;\n}\n\n.style-link-arrow-container .mtd-slider-mark {\n  top: -5px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"style-link-arrow-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"边箭头配置\">\n      <ControlPanelItem title=\"箭头大小\">\n        <mtd-slider :max=\"20\" :min=\"5\" v-model=\"arrowSize\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头位置\">\n        <mtd-slider :max=\"100\" :min=\"0\" v-model=\"arrowPosition\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkArrow',\n  data() {\n    return {\n      $graph: null,\n      arrowSize: 15,\n      arrowPosition: 0,\n    };\n  },\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a' },\n        { id: 'b' },\n        { id: 'c' },\n        { id: 'd' },\n        { id: 'e' },\n        { id: 'f' },\n        { id: 'g' },\n        { id: 'h' },\n        { id: 'i' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkType: 'straight' },\n        { source: 'a', color: '#9661bc', target: 'c', linkType: 'straight' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkType: 'arc:lower' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkType: 'arc:lower' },\n        { source: 'a', color: '#78d3f8', target: 'h' },\n        { source: 'a', color: '#FD8C04', target: 'g' },\n        { source: 'a', color: '#93ABD3', target: 'i' },\n        { source: 'a', color: '#0E9AA7', target: 'f' },\n        { source: 'f', color: '#ff6b3b', target: 'f' }, //  自环边\n      ],\n    };\n\n    this.$graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      showLinkArrow: true,\n      linkArrowSize: this.arrowSize,\n      linkArrowPosition: this.arrowPosition,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(20);\n            forceObj.forceLink.distance(120).strength(1);\n            forceObj.forceManyBody = ForceGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n  },\n  methods: {\n    handleChange() {\n      this.$graph.setOptions({\n        linkArrowSize: this.arrowSize,\n        linkArrowPosition: this.arrowPosition,\n      });\n      this.$graph.createDefs();\n    },\n  },\n};\n</script>\n\n<style>\n.style-link-arrow-container {\n  position: relative;\n  height: 100%;\n}\n\n.style-link-arrow-container .mtd-slider {\n  margin-bottom: 30px;\n  padding-bottom: 8px;\n}\n\n.style-link-arrow-container .mtd-slider-mark {\n  top: -5px;\n}\n</style>\n"},{"relativePath":"flow-graph-g6/layout/demo/edge.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/layout/demo/edge.vue","order":1,"filename":"edge.vue","title":"自定义边","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/edge-demo.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'base',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 250, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 250, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node5', // String，该节点存在则必须，节点的唯一标识\n      x: 500, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点5',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node6', // String，该节点存在则必须，节点的唯一标识\n      x: 600, // Number，可选，节点位置的 x 值\n      y: 325, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点6',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node9', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点9',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node10', // String，该节点存在则必须，节点的唯一标识\n      x: 800, // Number，可选，节点位置的 x 值\n      y: 325, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点10',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node11', // String，该节点存在则必须，节点的唯一标识\n      x: 500, // Number，可选，节点位置的 x 值\n      y: 550, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点11',\n      inputs: [[0.5, 0]],\n      outputs: [\n        [0.5, 1],\n        [1, 0.5],\n      ],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node12', // String，该节点存在则必须，节点的唯一标识\n      x: 900, // Number，可选，节点位置的 x 值\n      y: 550, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点12',\n      inputs: [\n        [0.5, 0],\n        [0, 0.5],\n      ],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node7', // String，该节点存在则必须，节点的唯一标识\n      x: 200, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点7',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node8', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 550, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点8',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node13', // String，该节点存在则必须，节点的唯一标识\n      x: 200, // Number，可选，节点位置的 x 值\n      y: 675, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点13',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1', // String，必须，起始点 id\n      target: 'node2', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node3', // String，必须，起始点 id\n      target: 'node4', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node5', // String，必须，起始点 id\n      target: 'node6', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n        lineDash: true,\n      },\n      type: 'polyline',\n    },\n    {\n      source: 'node2', // String，必须，起始点 id\n      target: 'node7', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'hvh',\n    },\n    {\n      source: 'node4', // String，必须，起始点 id\n      target: 'node7', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'hvh',\n    },\n    {\n      source: 'node7', // String，必须，起始点 id\n      target: 'node8', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'mid-point-edge',\n    },\n    {\n      source: 'node9', // String，必须，起始点 id\n      target: 'node10', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#fdae37',\n      },\n      type: 'line-dash',\n    },\n    {\n      source: 'node6', // String，必须，起始点 id\n      target: 'node11', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      label: '依赖',\n      type: 'line-dash',\n    },\n    {\n      source: 'node11', // String，必须，起始点 id\n      target: 'node12', // String，必须，目标点 id\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 1,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      type: 'mid-edit-edge',\n    },\n    {\n      source: 'node10', // String，必须，起始点 id\n      target: 'node12', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      type: 'polyline',\n      label: '编辑',\n    },\n    {\n      source: 'node7', // String，必须，起始点 id\n      target: 'node13', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      type: 'mid-icon-edge',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const lineDash = [4, 2, 1, 2];\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#e0e0e0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x, endPoint.y / 2 + (1 / 2) * startPoint.y], // 三分之一处\n                        ['L', endPoint.x, endPoint.y / 2 + (1 / 2) * startPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n            {\n              edgeType: 'mid-point-edge',\n              options: {\n                afterDraw(cfg, group) {\n                  // 获取图形组中的第一个图形，在这里就是边的路径图形\n                  const shape = group.get('children')[0];\n                  // 获取路径图形的中点坐标\n                  const midPoint = shape.getPoint(0.5);\n                  // 在中点增加一个矩形，注意矩形的原点在其左上角\n                  group.addShape('rect', {\n                    attrs: {\n                      width: 34,\n                      height: 20,\n                      fill: '#fff',\n                      stroke: '#aec7f2',\n                      // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上\n                      x: midPoint.x - 20,\n                      y: midPoint.y - 10,\n                      radius: 10,\n                    },\n                  });\n                  group.addShape('text', {\n                    attrs: {\n                      text: '依赖',\n                      x: midPoint.x - 16,\n                      y: midPoint.y - 6,\n                      fill: 'rgba(17,25,37,1)',\n                      fontSize: 12,\n                      textBaseline: 'top',\n                    },\n                  });\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'cubic',\n            },\n            {\n              edgeType: 'mid-icon-edge',\n              options: {\n                afterDraw(cfg, group) {\n                  // 获取图形组中的第一个图形，在这里就是边的路径图形\n                  const shape = group.get('children')[0];\n                  // 获取路径图形的中点坐标\n                  const midPoint = shape.getPoint(0.5);\n                  // 在中点增加一个矩形，注意矩形的原点在其左上角\n                  group.addShape('rect', {\n                    attrs: {\n                      width: 34,\n                      height: 20,\n                      fill: '#fff',\n                      stroke: '#aec7f2',\n                      // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上\n                      x: midPoint.x - 17,\n                      y: midPoint.y - 10,\n                      radius: 10,\n                    },\n                  });\n                  group.addShape('text', {\n                    attrs: {\n                      text: '\\ue63f',\n                      x: midPoint.x,\n                      y: midPoint.y,\n                      fill: '#aec7f2',\n                      fontSize: 12,\n                      textBaseline: 'top',\n                      fontFamily: 'iconfont',\n                      textAlign: 'center',\n                      textBaseline: 'middle',\n                    },\n                  });\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'line',\n            },\n            {\n              edgeType: 'line-dash',\n              options: {\n                afterDraw(cfg, group) {\n                  const shape = group.get('children')[0];\n                  let index = 0;\n                  // Define the animation\n                  shape.animate(\n                    () => {\n                      index++;\n                      if (index > 9) {\n                        index = 0;\n                      }\n                      const res = {\n                        lineDash,\n                        lineDashOffset: -index,\n                      };\n                      // returns the modified configurations here, lineDash and lineDashOffset here\n                      return res;\n                    },\n                    {\n                      repeat: true, // whether executes the animation repeatly\n                      duration: 3000, // the duration for executing once\n                    }\n                  );\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'polyline',\n            },\n            {\n              edgeType: 'line-cubic-dash',\n              options: {\n                afterDraw(cfg, group) {\n                  const shape = group.get('children')[0];\n                  let index = 0;\n                  // Define the animation\n                  shape.animate(\n                    () => {\n                      index++;\n                      if (index > 9) {\n                        index = 0;\n                      }\n                      const res = {\n                        lineDash,\n                        lineDashOffset: -index,\n                      };\n                      // returns the modified configurations here, lineDash and lineDashOffset here\n                      return res;\n                    },\n                    {\n                      repeat: true, // whether executes the animation repeatly\n                      duration: 3000, // the duration for executing once\n                    }\n                  );\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'cubic',\n            },\n            {\n              edgeType: 'mid-edit-edge',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#e0e0e0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', (startPoint.x + endPoint.x) / 2 - 5, startPoint.y], // 三分之一处\n                        ['M', (startPoint.x + endPoint.x) / 2 + 5, startPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n                afterDraw(cfg, group) {\n                  // 获取图形组中的第一个图形，在这里就是边的路径图形\n                  const shape = group.get('children')[0];\n                  // 获取路径图形的中点坐标\n                  const midPoint = shape.getPoint(0.5);\n                  // 在中点增加一个矩形，注意矩形的原点在其左上角\n                  group.addShape('text', {\n                    attrs: {\n                      width: 10,\n                      height: 10,\n                      fill: '#aec7f2',\n                      // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上\n                      x: midPoint.x - 5,\n                      y: midPoint.y,\n                      text: '\\ue60d',\n                      fontFamily: 'iconfont',\n                      textAlign: 'center',\n                      textBaseline: 'middle',\n                      stroke: '#aec7f2',\n                      fontSize: 14,\n                    },\n                  });\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'line',\n            },\n          ],\n          defaultEdge: {\n            labelCfg: {\n              autoRotate: false,\n              style: {\n                fill: '#1890ff',\n                fontSize: 12,\n                background: {\n                  fill: '#ffffff',\n                  stroke: '#9EC9FF',\n                  padding: [6, 4, 4, 6],\n                  radius: 10,\n                },\n              },\n            },\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n  },\n  mounted() {\n    this.initGraph();\n    //this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      type: 'base',\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 250, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node3', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node4', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 250, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node5', // String，该节点存在则必须，节点的唯一标识\n      x: 500, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点5',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node6', // String，该节点存在则必须，节点的唯一标识\n      x: 600, // Number，可选，节点位置的 x 值\n      y: 325, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点6',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node9', // String，该节点存在则必须，节点的唯一标识\n      x: 700, // Number，可选，节点位置的 x 值\n      y: 100, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点9',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node10', // String，该节点存在则必须，节点的唯一标识\n      x: 800, // Number，可选，节点位置的 x 值\n      y: 325, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点10',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node11', // String，该节点存在则必须，节点的唯一标识\n      x: 500, // Number，可选，节点位置的 x 值\n      y: 550, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点11',\n      inputs: [[0.5, 0]],\n      outputs: [\n        [0.5, 1],\n        [1, 0.5],\n      ],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node12', // String，该节点存在则必须，节点的唯一标识\n      x: 900, // Number，可选，节点位置的 x 值\n      y: 550, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点12',\n      inputs: [\n        [0.5, 0],\n        [0, 0.5],\n      ],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node7', // String，该节点存在则必须，节点的唯一标识\n      x: 200, // Number，可选，节点位置的 x 值\n      y: 400, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点7',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node8', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 550, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点8',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      type: 'base',\n      id: 'node13', // String，该节点存在则必须，节点的唯一标识\n      x: 200, // Number，可选，节点位置的 x 值\n      y: 675, // Number，可选，节点位置的 y 值\n      icon: '',\n      name: '节点13',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1', // String，必须，起始点 id\n      target: 'node2', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node3', // String，必须，起始点 id\n      target: 'node4', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'line',\n    },\n    {\n      source: 'node5', // String，必须，起始点 id\n      target: 'node6', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n        lineDash: true,\n      },\n      type: 'polyline',\n    },\n    {\n      source: 'node2', // String，必须，起始点 id\n      target: 'node7', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'hvh',\n    },\n    {\n      source: 'node4', // String，必须，起始点 id\n      target: 'node7', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'hvh',\n    },\n    {\n      source: 'node7', // String，必须，起始点 id\n      target: 'node8', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'mid-point-edge',\n    },\n    {\n      source: 'node9', // String，必须，起始点 id\n      target: 'node10', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#fdae37',\n      },\n      type: 'line-dash',\n    },\n    {\n      source: 'node6', // String，必须，起始点 id\n      target: 'node11', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      label: '依赖',\n      type: 'line-dash',\n    },\n    {\n      source: 'node11', // String，必须，起始点 id\n      target: 'node12', // String，必须，目标点 id\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 1,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      type: 'mid-edit-edge',\n    },\n    {\n      source: 'node10', // String，必须，起始点 id\n      target: 'node12', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      type: 'polyline',\n      label: '编辑',\n    },\n    {\n      source: 'node7', // String，必须，起始点 id\n      target: 'node13', // String，必须，目标点 id\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        radius: 10,\n        offset: 90, // 拐弯处距离端点的最小距离\n        endArrow: true,\n        stroke: '#aec7f2',\n      },\n      type: 'mid-icon-edge',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const lineDash = [4, 2, 1, 2];\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          registerEdgeConfigs: [\n            {\n              edgeType: 'hvh',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#e0e0e0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', startPoint.x, endPoint.y / 2 + (1 / 2) * startPoint.y], // 三分之一处\n                        ['L', endPoint.x, endPoint.y / 2 + (1 / 2) * startPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n              },\n            },\n            {\n              edgeType: 'mid-point-edge',\n              options: {\n                afterDraw(cfg, group) {\n                  // 获取图形组中的第一个图形，在这里就是边的路径图形\n                  const shape = group.get('children')[0];\n                  // 获取路径图形的中点坐标\n                  const midPoint = shape.getPoint(0.5);\n                  // 在中点增加一个矩形，注意矩形的原点在其左上角\n                  group.addShape('rect', {\n                    attrs: {\n                      width: 34,\n                      height: 20,\n                      fill: '#fff',\n                      stroke: '#aec7f2',\n                      // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上\n                      x: midPoint.x - 20,\n                      y: midPoint.y - 10,\n                      radius: 10,\n                    },\n                  });\n                  group.addShape('text', {\n                    attrs: {\n                      text: '依赖',\n                      x: midPoint.x - 16,\n                      y: midPoint.y - 6,\n                      fill: 'rgba(17,25,37,1)',\n                      fontSize: 12,\n                      textBaseline: 'top',\n                    },\n                  });\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'cubic',\n            },\n            {\n              edgeType: 'mid-icon-edge',\n              options: {\n                afterDraw(cfg, group) {\n                  // 获取图形组中的第一个图形，在这里就是边的路径图形\n                  const shape = group.get('children')[0];\n                  // 获取路径图形的中点坐标\n                  const midPoint = shape.getPoint(0.5);\n                  // 在中点增加一个矩形，注意矩形的原点在其左上角\n                  group.addShape('rect', {\n                    attrs: {\n                      width: 34,\n                      height: 20,\n                      fill: '#fff',\n                      stroke: '#aec7f2',\n                      // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上\n                      x: midPoint.x - 17,\n                      y: midPoint.y - 10,\n                      radius: 10,\n                    },\n                  });\n                  group.addShape('text', {\n                    attrs: {\n                      text: '\\ue63f',\n                      x: midPoint.x,\n                      y: midPoint.y,\n                      fill: '#aec7f2',\n                      fontSize: 12,\n                      textBaseline: 'top',\n                      fontFamily: 'iconfont',\n                      textAlign: 'center',\n                      textBaseline: 'middle',\n                    },\n                  });\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'line',\n            },\n            {\n              edgeType: 'line-dash',\n              options: {\n                afterDraw(cfg, group) {\n                  const shape = group.get('children')[0];\n                  let index = 0;\n                  // Define the animation\n                  shape.animate(\n                    () => {\n                      index++;\n                      if (index > 9) {\n                        index = 0;\n                      }\n                      const res = {\n                        lineDash,\n                        lineDashOffset: -index,\n                      };\n                      // returns the modified configurations here, lineDash and lineDashOffset here\n                      return res;\n                    },\n                    {\n                      repeat: true, // whether executes the animation repeatly\n                      duration: 3000, // the duration for executing once\n                    }\n                  );\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'polyline',\n            },\n            {\n              edgeType: 'line-cubic-dash',\n              options: {\n                afterDraw(cfg, group) {\n                  const shape = group.get('children')[0];\n                  let index = 0;\n                  // Define the animation\n                  shape.animate(\n                    () => {\n                      index++;\n                      if (index > 9) {\n                        index = 0;\n                      }\n                      const res = {\n                        lineDash,\n                        lineDashOffset: -index,\n                      };\n                      // returns the modified configurations here, lineDash and lineDashOffset here\n                      return res;\n                    },\n                    {\n                      repeat: true, // whether executes the animation repeatly\n                      duration: 3000, // the duration for executing once\n                    }\n                  );\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'cubic',\n            },\n            {\n              edgeType: 'mid-edit-edge',\n              options: {\n                draw: (cfg, group) => {\n                  const startPoint = cfg.startPoint;\n                  const endPoint = cfg.endPoint;\n                  const shape = group.addShape('path', {\n                    attrs: {\n                      stroke: '#e0e0e0',\n                      path: [\n                        ['M', startPoint.x, startPoint.y],\n                        ['L', (startPoint.x + endPoint.x) / 2 - 5, startPoint.y], // 三分之一处\n                        ['M', (startPoint.x + endPoint.x) / 2 + 5, startPoint.y], // 三分之二处\n                        ['L', endPoint.x, endPoint.y],\n                      ],\n                    },\n                    // must be assigned in G6 3.3 and later versions. it can be any value you want\n                    name: 'path-shape',\n                  });\n                  return shape;\n                },\n                afterDraw(cfg, group) {\n                  // 获取图形组中的第一个图形，在这里就是边的路径图形\n                  const shape = group.get('children')[0];\n                  // 获取路径图形的中点坐标\n                  const midPoint = shape.getPoint(0.5);\n                  // 在中点增加一个矩形，注意矩形的原点在其左上角\n                  group.addShape('text', {\n                    attrs: {\n                      width: 10,\n                      height: 10,\n                      fill: '#aec7f2',\n                      // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上\n                      x: midPoint.x - 5,\n                      y: midPoint.y,\n                      text: '\\ue60d',\n                      fontFamily: 'iconfont',\n                      textAlign: 'center',\n                      textBaseline: 'middle',\n                      stroke: '#aec7f2',\n                      fontSize: 14,\n                    },\n                  });\n                },\n                update: undefined,\n              },\n              extendedEdgeName: 'line',\n            },\n          ],\n          defaultEdge: {\n            labelCfg: {\n              autoRotate: false,\n              style: {\n                fill: '#1890ff',\n                fontSize: 12,\n                background: {\n                  fill: '#ffffff',\n                  stroke: '#9EC9FF',\n                  padding: [6, 4, 4, 6],\n                  radius: 10,\n                },\n              },\n            },\n          },\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n  },\n  mounted() {\n    this.initGraph();\n    //this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"force-graph-vis/custom-styles/demo/ColorPaletteDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/custom-styles/demo/ColorPaletteDemo.vue","order":1,"filename":"ColorPaletteDemo.vue","title":"自定义颜色板颜色","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/colorPalette.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'ColorPaletteDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', color: '#2F86A6', radius: 10 },\n        { id: 'b', color: '#34BE82', radius: 40 },\n        { id: 'c', color: '#2FDD92', radius: 30 },\n        { id: 'd', color: '#F2F013', radius: 50 },\n        { id: 'e', color: '#EC5858', radius: 20 },\n        { id: 'f', color: '#FD8C04', radius: 24 },\n        { id: 'g', color: '#534E52', radius: 25 },\n        { id: 'h', color: '#93ABD3', radius: 45 },\n        { id: 'i', color: '#00BCD4', radius: 23 },\n        { id: 'j', color: '#B6EB7A', radius: 10 },\n        { id: 'k', color: '#17706E', radius: 16 },\n        { id: 'l', color: '#0E9AA7', radius: 8 },\n        { id: 'm', color: '#0779E4', radius: 5 },\n        { id: 'n', color: '#000839', radius: 18 },\n        { id: 'o', color: '#85A392', radius: 40 },\n        { id: 'p', color: '#B7472A', radius: 10 },\n        { id: 'q', color: '#5F6CAF', radius: 30 },\n        { id: 'r', color: '#52006A', radius: 8 },\n      ],\n      links: [],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(30);\n          },\n        },\n      },\n    });\n    function changeColorPalette() {\n      graph.colorStatic = graph.color(graph.colorPalette.colorMaterialDesign14Get(Math.floor(Math.random() * 9)));\n    }\n    function getRadius() {\n      return Math.max(5, Math.random() * 50);\n    }\n    async function animation() {\n      try {\n        await graph.$sleep(500);\n        changeColorPalette();\n        graph.data.nodes.forEach((item) => {\n          item.stokeColor = graph.colorStatic(Math.random());\n          item.color = item.stokeColor + '12';\n          item.radius = getRadius();\n        });\n        await graph.nodesGroup\n          .selectAll('circle')\n          .transition()\n          .style('stroke', (d) => d.stokeColor)\n          .attr('r', (d) => d.radius)\n          .style('fill', (d) => d.color)\n          .duration(1000)\n          .end();\n        await graph.$sleep(200);\n        graph.data.nodes.forEach((item) => {\n          item.stokeColor = graph.colorStatic(Math.random());\n          item.color = item.stokeColor + '12';\n          item.radius = getRadius();\n        });\n        await graph.nodesGroup\n          .selectAll('circle')\n          .transition()\n          .style('stroke', (d) => d.stokeColor)\n          .attr('r', (d) => d.radius)\n          .style('fill', (d) => d.color)\n          .duration(1000)\n          .end();\n        animation();\n      } catch (e) {\n        console.log(e);\n      }\n    }\n    animation();\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'ColorPaletteDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', color: '#2F86A6', radius: 10 },\n        { id: 'b', color: '#34BE82', radius: 40 },\n        { id: 'c', color: '#2FDD92', radius: 30 },\n        { id: 'd', color: '#F2F013', radius: 50 },\n        { id: 'e', color: '#EC5858', radius: 20 },\n        { id: 'f', color: '#FD8C04', radius: 24 },\n        { id: 'g', color: '#534E52', radius: 25 },\n        { id: 'h', color: '#93ABD3', radius: 45 },\n        { id: 'i', color: '#00BCD4', radius: 23 },\n        { id: 'j', color: '#B6EB7A', radius: 10 },\n        { id: 'k', color: '#17706E', radius: 16 },\n        { id: 'l', color: '#0E9AA7', radius: 8 },\n        { id: 'm', color: '#0779E4', radius: 5 },\n        { id: 'n', color: '#000839', radius: 18 },\n        { id: 'o', color: '#85A392', radius: 40 },\n        { id: 'p', color: '#B7472A', radius: 10 },\n        { id: 'q', color: '#5F6CAF', radius: 30 },\n        { id: 'r', color: '#52006A', radius: 8 },\n      ],\n      links: [],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(30);\n          },\n        },\n      },\n    });\n    function changeColorPalette() {\n      graph.colorStatic = graph.color(graph.colorPalette.colorMaterialDesign14Get(Math.floor(Math.random() * 9)));\n    }\n    function getRadius() {\n      return Math.max(5, Math.random() * 50);\n    }\n    async function animation() {\n      try {\n        await graph.$sleep(500);\n        changeColorPalette();\n        graph.data.nodes.forEach((item) => {\n          item.stokeColor = graph.colorStatic(Math.random());\n          item.color = item.stokeColor + '12';\n          item.radius = getRadius();\n        });\n        await graph.nodesGroup\n          .selectAll('circle')\n          .transition()\n          .style('stroke', (d) => d.stokeColor)\n          .attr('r', (d) => d.radius)\n          .style('fill', (d) => d.color)\n          .duration(1000)\n          .end();\n        await graph.$sleep(200);\n        graph.data.nodes.forEach((item) => {\n          item.stokeColor = graph.colorStatic(Math.random());\n          item.color = item.stokeColor + '12';\n          item.radius = getRadius();\n        });\n        await graph.nodesGroup\n          .selectAll('circle')\n          .transition()\n          .style('stroke', (d) => d.stokeColor)\n          .attr('r', (d) => d.radius)\n          .style('fill', (d) => d.color)\n          .duration(1000)\n          .end();\n        animation();\n      } catch (e) {\n        console.log(e);\n      }\n    }\n    animation();\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/custom-styles/demo/StyleLinkType.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/custom-styles/demo/StyleLinkType.vue","order":4,"filename":"StyleLinkType.vue","title":"自定义边类型","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/linkType.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkType',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }, { id: 'e' }, { id: 'f' }, { id: 'g' }, { id: 'h' }],\n      links: [\n        { source: 'c', target: 'd', linkType: 'straight' }, //直线\n        { source: 'a', target: 'b', linkType: 'arc:upper' }, //上弧线\n        { source: 'b', target: 'a', linkType: 'arc:upper' }, //上弧线\n        { source: 'e', target: 'f', linkType: 'arc:lower' }, //下弧线\n        { source: 'f', target: 'e', linkType: 'arc:lower' }, //下弧线\n        { source: 'd', target: 'g', linkType: 'bezier' }, //贝塞尔曲线边\n        { source: 'g', target: 'g', angle: 180 }, //  自环边角度调整\n        { source: 'h', target: 'h' }, //  自环边\n      ],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      showLinkArrow: true,\n      d3,\n      layout: {\n        type: 'rect',\n        options: {\n          columnN: 4,\n          rowN: 2,\n          xCenter: 0.5,\n          yCenter: 0.5,\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkType',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }, { id: 'e' }, { id: 'f' }, { id: 'g' }, { id: 'h' }],\n      links: [\n        { source: 'c', target: 'd', linkType: 'straight' }, //直线\n        { source: 'a', target: 'b', linkType: 'arc:upper' }, //上弧线\n        { source: 'b', target: 'a', linkType: 'arc:upper' }, //上弧线\n        { source: 'e', target: 'f', linkType: 'arc:lower' }, //下弧线\n        { source: 'f', target: 'e', linkType: 'arc:lower' }, //下弧线\n        { source: 'd', target: 'g', linkType: 'bezier' }, //贝塞尔曲线边\n        { source: 'g', target: 'g', angle: 180 }, //  自环边角度调整\n        { source: 'h', target: 'h' }, //  自环边\n      ],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      showLinkArrow: true,\n      d3,\n      layout: {\n        type: 'rect',\n        options: {\n          columnN: 4,\n          rowN: 2,\n          xCenter: 0.5,\n          yCenter: 0.5,\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/custom-styles/demo/StyleNodeText.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/custom-styles/demo/StyleNodeText.vue","order":0,"filename":"StyleNodeText.vue","title":"自定义节点文字","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/nodeText.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleNodeText',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', radius: 20, name: '香瓜', fontSize: '6pt' },\n        { id: 'b', radius: 20, name: '红枣', fontSize: '12pt' },\n        { id: 'c', radius: 30, name: '番茄', fontSize: '10pt' },\n        { id: 'd', radius: 25, name: '西瓜', fontSize: '15pt' },\n        { id: 'e', radius: 25, name: '榴莲', fontSize: '12px' },\n        { id: 'f', radius: 25, name: '草莓', fontSize: '14px' },\n        { id: 'g', radius: 25, name: '西柚', fontSize: '15px' },\n        { id: 'h', radius: 25, name: '雪梨', fontSize: '16px' },\n      ],\n      links: [],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(30);\n          },\n        },\n      },\n      drawNodeExtend(nodesGroup, graph) {\n        nodesGroup\n          .selectAll('circle.kg-force-node-entity')\n          .style('fill', 'none')\n          .style('stroke', graph.nodeColor)\n          .style('stroke-width', '2px');\n\n        nodesGroup.selectAll('text.kg-force-text').remove();\n        nodesGroup\n          .append('text')\n          .attr('class', 'kg-force-text')\n          .style('text-anchor', 'middle')\n          .style('text-shadow', (d) => `4px 4px 2px ${graph.nodeColor(d)}60`)\n          .style('font-size', (d) => d.fontSize)\n          .style('fill', graph.nodeColor)\n          .text((d) => d.name);\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleNodeText',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', radius: 20, name: '香瓜', fontSize: '6pt' },\n        { id: 'b', radius: 20, name: '红枣', fontSize: '12pt' },\n        { id: 'c', radius: 30, name: '番茄', fontSize: '10pt' },\n        { id: 'd', radius: 25, name: '西瓜', fontSize: '15pt' },\n        { id: 'e', radius: 25, name: '榴莲', fontSize: '12px' },\n        { id: 'f', radius: 25, name: '草莓', fontSize: '14px' },\n        { id: 'g', radius: 25, name: '西柚', fontSize: '15px' },\n        { id: 'h', radius: 25, name: '雪梨', fontSize: '16px' },\n      ],\n      links: [],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(30);\n          },\n        },\n      },\n      drawNodeExtend(nodesGroup, graph) {\n        nodesGroup\n          .selectAll('circle.kg-force-node-entity')\n          .style('fill', 'none')\n          .style('stroke', graph.nodeColor)\n          .style('stroke-width', '2px');\n\n        nodesGroup.selectAll('text.kg-force-text').remove();\n        nodesGroup\n          .append('text')\n          .attr('class', 'kg-force-text')\n          .style('text-anchor', 'middle')\n          .style('text-shadow', (d) => `4px 4px 2px ${graph.nodeColor(d)}60`)\n          .style('font-size', (d) => d.fontSize)\n          .style('fill', graph.nodeColor)\n          .text((d) => d.name);\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/custom-styles/demo/StyleLinkColor.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/custom-styles/demo/StyleLinkColor.vue","order":2,"filename":"StyleLinkColor.vue","title":"自定义边颜色","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/linkColor.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkColor',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', color: '#999' },\n        { id: 'b', color: '#999' },\n        { id: 'c', color: '#999' },\n        { id: 'd', color: '#999' },\n        { id: 'e', color: '#999' },\n        { id: 'f', color: '#999' },\n        { id: 'g', color: '#999' },\n        { id: 'h', color: '#999' },\n        { id: 'i', color: '#999' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkWidth: '3px' },\n        { source: 'a', color: '#9661bc', target: 'c', linkWidth: '3px' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkWidth: '3px' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkWidth: '3px' },\n        { source: 'a', color: '#78d3f8', target: 'h', linkWidth: '3px' },\n        { source: 'a', color: '#FD8C04', target: 'g', linkWidth: '3px' },\n        { source: 'a', color: '#93ABD3', target: 'i', linkWidth: '3px' },\n        { source: 'a', color: '#0E9AA7', target: 'f', linkWidth: '3px' },\n      ],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(20);\n            forceObj.forceLink.distance(120).strength(1);\n            forceObj.forceManyBody = ForceGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkColor',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', color: '#999' },\n        { id: 'b', color: '#999' },\n        { id: 'c', color: '#999' },\n        { id: 'd', color: '#999' },\n        { id: 'e', color: '#999' },\n        { id: 'f', color: '#999' },\n        { id: 'g', color: '#999' },\n        { id: 'h', color: '#999' },\n        { id: 'i', color: '#999' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkWidth: '3px' },\n        { source: 'a', color: '#9661bc', target: 'c', linkWidth: '3px' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkWidth: '3px' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkWidth: '3px' },\n        { source: 'a', color: '#78d3f8', target: 'h', linkWidth: '3px' },\n        { source: 'a', color: '#FD8C04', target: 'g', linkWidth: '3px' },\n        { source: 'a', color: '#93ABD3', target: 'i', linkWidth: '3px' },\n        { source: 'a', color: '#0E9AA7', target: 'f', linkWidth: '3px' },\n      ],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(20);\n            forceObj.forceLink.distance(120).strength(1);\n            forceObj.forceManyBody = ForceGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"flow-graph-g6/vis/demo/tree.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/flow-graph-g6/vis/demo/tree.vue","order":2,"filename":"tree.vue","title":"树图","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/tree.png","source":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  id: '200000004',\n  tooltip: 'Thing',\n  label: '事物',\n  description: null,\n  descriptionZh: null,\n  depth: 3,\n  subTypeCount: 9,\n  status: 0,\n  children: [\n    {\n      id: '500000061',\n      tooltip: 'Person',\n      label: '自然人',\n      description: null,\n      descriptionZh: null,\n      depth: 1,\n      subTypeCount: 1,\n      status: 0,\n      children: [\n        {\n          id: '707000085',\n          tooltip: 'FilmPerson',\n          label: '电影人',\n          description: null,\n          descriptionZh: null,\n          depth: 5,\n          subTypeCount: 3,\n          status: 1,\n          children: [\n            {\n              id: '707000090',\n              tooltip: 'FilmDirector',\n              label: '电影导演',\n              description: null,\n              descriptionZh: null,\n              depth: 0,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n            {\n              id: '707000091',\n              tooltip: 'FilmWriter',\n              label: '电影编剧',\n              description: null,\n              descriptionZh: null,\n              depth: 4,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n            {\n              id: '707000092',\n              tooltip: 'FilmStar',\n              label: '电影主演',\n              description: null,\n              descriptionZh: null,\n              depth: 4,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n          ],\n        },\n        {\n          id: '707000086',\n          tooltip: 'MusicPerson',\n          label: '音乐人',\n          description: null,\n          descriptionZh: null,\n          depth: 17,\n          subTypeCount: 2,\n          status: 1,\n          children: [],\n        },\n      ],\n    },\n    {\n      id: '200000005',\n      tooltip: 'Music',\n      label: '音乐',\n      description: null,\n      descriptionZh: null,\n      depth: 3,\n      subTypeCount: 2,\n      status: 1,\n      children: [],\n    },\n    {\n      id: '707000128',\n      tooltip: 'Film',\n      label: '电影',\n      description: null,\n      descriptionZh: null,\n      depth: 4,\n      subTypeCount: 0,\n      status: 1,\n      children: [\n        {\n          id: '7070032328',\n          tooltip: 'Comedy',\n          label: '喜剧',\n          description: null,\n          descriptionZh: null,\n          depth: 4,\n          operation: 'C',\n          subTypeCount: 0,\n          status: 1,\n          children: [],\n        },\n      ],\n    },\n    {\n      id: '707000095',\n      tooltip: 'FilmGenre',\n      label: '电影类别',\n      description: null,\n      descriptionZh: null,\n      depth: 4,\n      subTypeCount: 0,\n      status: 1,\n      children: [],\n    },\n    {\n      id: '702000021',\n      tooltip: 'Organization',\n      label: '机构',\n      description: null,\n      descriptionZh: null,\n      depth: 47,\n      subTypeCount: 1,\n      status: 0,\n      children: [\n        {\n          id: '500000063',\n          tooltip: 'Company',\n          label: '公司',\n          description: null,\n          descriptionZh: null,\n          depth: 4,\n          subTypeCount: 2,\n          status: 1,\n          children: [\n            {\n              id: '707000093',\n              tooltip: 'FilmCompany',\n              label: '电影公司',\n              description: null,\n              descriptionZh: null,\n              depth: 4,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n            {\n              id: '707000094',\n              tooltip: 'MusicCompany',\n              label: '音乐公司',\n              description: null,\n              descriptionZh: null,\n              depth: 2,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          showPort: false,\n          graphType: 'treeGraph',\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" @drop=\"onDrop\" ref=\"graph\" @contextmenu=\"preventDefault\"></div>\n</template>\n\n<script>\nconst graphData = {\n  id: '200000004',\n  tooltip: 'Thing',\n  label: '事物',\n  description: null,\n  descriptionZh: null,\n  depth: 3,\n  subTypeCount: 9,\n  status: 0,\n  children: [\n    {\n      id: '500000061',\n      tooltip: 'Person',\n      label: '自然人',\n      description: null,\n      descriptionZh: null,\n      depth: 1,\n      subTypeCount: 1,\n      status: 0,\n      children: [\n        {\n          id: '707000085',\n          tooltip: 'FilmPerson',\n          label: '电影人',\n          description: null,\n          descriptionZh: null,\n          depth: 5,\n          subTypeCount: 3,\n          status: 1,\n          children: [\n            {\n              id: '707000090',\n              tooltip: 'FilmDirector',\n              label: '电影导演',\n              description: null,\n              descriptionZh: null,\n              depth: 0,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n            {\n              id: '707000091',\n              tooltip: 'FilmWriter',\n              label: '电影编剧',\n              description: null,\n              descriptionZh: null,\n              depth: 4,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n            {\n              id: '707000092',\n              tooltip: 'FilmStar',\n              label: '电影主演',\n              description: null,\n              descriptionZh: null,\n              depth: 4,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n          ],\n        },\n        {\n          id: '707000086',\n          tooltip: 'MusicPerson',\n          label: '音乐人',\n          description: null,\n          descriptionZh: null,\n          depth: 17,\n          subTypeCount: 2,\n          status: 1,\n          children: [],\n        },\n      ],\n    },\n    {\n      id: '200000005',\n      tooltip: 'Music',\n      label: '音乐',\n      description: null,\n      descriptionZh: null,\n      depth: 3,\n      subTypeCount: 2,\n      status: 1,\n      children: [],\n    },\n    {\n      id: '707000128',\n      tooltip: 'Film',\n      label: '电影',\n      description: null,\n      descriptionZh: null,\n      depth: 4,\n      subTypeCount: 0,\n      status: 1,\n      children: [\n        {\n          id: '7070032328',\n          tooltip: 'Comedy',\n          label: '喜剧',\n          description: null,\n          descriptionZh: null,\n          depth: 4,\n          operation: 'C',\n          subTypeCount: 0,\n          status: 1,\n          children: [],\n        },\n      ],\n    },\n    {\n      id: '707000095',\n      tooltip: 'FilmGenre',\n      label: '电影类别',\n      description: null,\n      descriptionZh: null,\n      depth: 4,\n      subTypeCount: 0,\n      status: 1,\n      children: [],\n    },\n    {\n      id: '702000021',\n      tooltip: 'Organization',\n      label: '机构',\n      description: null,\n      descriptionZh: null,\n      depth: 47,\n      subTypeCount: 1,\n      status: 0,\n      children: [\n        {\n          id: '500000063',\n          tooltip: 'Company',\n          label: '公司',\n          description: null,\n          descriptionZh: null,\n          depth: 4,\n          subTypeCount: 2,\n          status: 1,\n          children: [\n            {\n              id: '707000093',\n              tooltip: 'FilmCompany',\n              label: '电影公司',\n              description: null,\n              descriptionZh: null,\n              depth: 4,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n            {\n              id: '707000094',\n              tooltip: 'MusicCompany',\n              label: '音乐公司',\n              description: null,\n              descriptionZh: null,\n              depth: 2,\n              subTypeCount: 0,\n              status: 1,\n              children: [],\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  components: {},\n  props: {\n    msg: String,\n    menuItems: {\n      type: Array,\n      default: function () {\n        return [];\n      },\n    },\n  },\n  data: function () {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n    };\n  },\n  methods: {\n    initGraph() {\n      const graphDom = this.$refs.graph;\n      const flow = new Flow(\n        {\n          container: graphDom,\n          width: 1000,\n          height: 1000,\n          defaultEdgeType: 'cubic-vertical',\n          registerNodeConfigs: [],\n          showPort: false,\n          graphType: 'treeGraph',\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    /**\n     * edges 的 source 与 target 可能会变成对象，需要对其进行处理\n     */\n    formatEdgeData(graphData) {\n      graphData.edges.forEach((item) => {\n        if (typeof item.source === 'object') {\n          item.source = item.source._cfg.id;\n        }\n        if (typeof item.target === 'object') {\n          item.target = item.target._cfg.id;\n        }\n      });\n      return graphData;\n    },\n    preventDefault(e) {\n      e.preventDefault();\n    },\n    onDrop(e) {\n      e.preventDefault();\n    },\n    handleGraphEvent() {\n      const { events } = graphUtil;\n      this.flow.bus.on(events.nodeSelect, (e) => {\n        console.log('nodeSelect', e);\n      });\n      this.flow.bus.on(events.canvasClick, (e) => {\n        console.log('canvasClick', e);\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        console.log('edgeCreate', e);\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        console.log('nodeRightClick', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        console.log('edgeRightClick', e);\n      });\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#ffff00');\n            shape.attr('stroke', '#00ff00');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\n      const edgeStates = [\n        {\n          name: 'selected',\n          exec: (edge, shape) => {\n            shape.attr('stroke', '#ff0000');\n            shape.attr('lineWidth', 1.4);\n          },\n        },\n      ];\n      this.flow.registerState(edgeStates, 'edge');\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n    this.handleGraphEvent();\n  },\n  destroyed() {},\n};\n</script>\n\n<style>\n.graph-container {\n  width: 100%;\n  height: 600px;\n}\n</style>\n"},{"relativePath":"force-graph-vis/layout/demo/LayoutForce.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/layout/demo/LayoutForce.vue","order":0,"filename":"LayoutForce.vue","title":"力导向布局","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/baseDemo.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutForce',\n  methods: {\n    initGraph() {\n      new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.base,\n        d3,\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutForce',\n  methods: {\n    initGraph() {\n      new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.base,\n        d3,\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/layout/demo/LayoutCluster.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/layout/demo/LayoutCluster.vue","order":2,"filename":"LayoutCluster.vue","title":"中心布局","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/layoutCluster.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutCluster',\n  methods: {\n    initGraph() {\n      new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.cluster,\n        d3: d3,\n        layout: {\n          type: 'cluster',\n        },\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutCluster',\n  methods: {\n    initGraph() {\n      new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.cluster,\n        d3: d3,\n        layout: {\n          type: 'cluster',\n        },\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/layout/demo/LayoutLayer.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/layout/demo/LayoutLayer.vue","order":4,"filename":"LayoutLayer.vue","title":"层次布局","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/layoutLayer.png","source":"<template>\n  <div class=\"layout-layer-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"布局配置\">\n      <ControlPanelItem title=\"布局方式\">\n        <mtd-radio-group v-model=\"layout\" @change=\"handleChange\">\n          <mtd-radio value=\"layer\">平铺</mtd-radio>\n          <mtd-radio value=\"radial\">中心放射</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <div v-if=\"layout === 'layer'\">\n        <ControlPanelItem title=\"节点间距\">\n          <mtd-slider :max=\"10\" :min=\"-5\" v-model=\"nodeGap\" size=\"small\" @input=\"handleChange\" />\n        </ControlPanelItem>\n        <ControlPanelItem title=\"层级间距\">\n          <mtd-slider :max=\"300\" :min=\"50\" v-model=\"levelGap\" size=\"small\" @input=\"handleChange\" />\n        </ControlPanelItem>\n      </div>\n      <div v-if=\"layout === 'radial'\">\n        <ControlPanelItem title=\"层级间距\">\n          <mtd-slider :max=\"600\" :min=\"300\" v-model=\"radialLevelGap\" size=\"small\" @input=\"handleChange\" />\n        </ControlPanelItem>\n      </div>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutLayer',\n  data() {\n    return {\n      $graph: null,\n      layout: 'layer',\n      nodeGap: 0,\n      levelGap: 200,\n      radialLevelGap: 360,\n    };\n  },\n  methods: {\n    initGraph() {\n      const root = d3.hierarchy(ForceGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      const graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes, links },\n        d3,\n        cloneData: false,\n        layout: {\n          type: 'layer',\n          options: {\n            root: ['flare'],\n            width: 'auto',\n            height: 'auto',\n            nodeGap: this.nodeGap,\n            levelGap: this.levelGap,\n            initDuration: 0,\n          },\n        },\n      });\n      this.$graph = graph;\n    },\n    handleChange() {\n      if (this.layout === 'radial') {\n        // todo\n        this.$graph.transformTo(d3.zoomIdentity.translate(0, 0).scale(1), 0);\n        this.$graph.changeLayout('ring', { root: ['flare'], radius: this.radialLevelGap });\n      } else {\n        this.$graph.changeLayout('layer', {\n          root: ['flare'],\n          width: 'auto',\n          height: 'auto',\n          nodeGap: this.nodeGap,\n          levelGap: this.levelGap,\n          initDuration: 0,\n        });\n      }\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style>\n.layout-layer-container {\n  position: relative;\n  height: 100%;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"layout-layer-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"布局配置\">\n      <ControlPanelItem title=\"布局方式\">\n        <mtd-radio-group v-model=\"layout\" @change=\"handleChange\">\n          <mtd-radio value=\"layer\">平铺</mtd-radio>\n          <mtd-radio value=\"radial\">中心放射</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <div v-if=\"layout === 'layer'\">\n        <ControlPanelItem title=\"节点间距\">\n          <mtd-slider :max=\"10\" :min=\"-5\" v-model=\"nodeGap\" size=\"small\" @input=\"handleChange\" />\n        </ControlPanelItem>\n        <ControlPanelItem title=\"层级间距\">\n          <mtd-slider :max=\"300\" :min=\"50\" v-model=\"levelGap\" size=\"small\" @input=\"handleChange\" />\n        </ControlPanelItem>\n      </div>\n      <div v-if=\"layout === 'radial'\">\n        <ControlPanelItem title=\"层级间距\">\n          <mtd-slider :max=\"600\" :min=\"300\" v-model=\"radialLevelGap\" size=\"small\" @input=\"handleChange\" />\n        </ControlPanelItem>\n      </div>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutLayer',\n  data() {\n    return {\n      $graph: null,\n      layout: 'layer',\n      nodeGap: 0,\n      levelGap: 200,\n      radialLevelGap: 360,\n    };\n  },\n  methods: {\n    initGraph() {\n      const root = d3.hierarchy(ForceGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      const graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes, links },\n        d3,\n        cloneData: false,\n        layout: {\n          type: 'layer',\n          options: {\n            root: ['flare'],\n            width: 'auto',\n            height: 'auto',\n            nodeGap: this.nodeGap,\n            levelGap: this.levelGap,\n            initDuration: 0,\n          },\n        },\n      });\n      this.$graph = graph;\n    },\n    handleChange() {\n      if (this.layout === 'radial') {\n        // todo\n        this.$graph.transformTo(d3.zoomIdentity.translate(0, 0).scale(1), 0);\n        this.$graph.changeLayout('ring', { root: ['flare'], radius: this.radialLevelGap });\n      } else {\n        this.$graph.changeLayout('layer', {\n          root: ['flare'],\n          width: 'auto',\n          height: 'auto',\n          nodeGap: this.nodeGap,\n          levelGap: this.levelGap,\n          initDuration: 0,\n        });\n      }\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style>\n.layout-layer-container {\n  position: relative;\n  height: 100%;\n}\n</style>\n"},{"relativePath":"force-graph-vis/plugins/demo/BezierCurveControllerDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/plugins/demo/BezierCurveControllerDemo.vue","order":0,"filename":"BezierCurveControllerDemo.vue","title":"贝塞尔曲线控制点","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/bezierCurveController.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'BezierCurveControllerDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', x: 100, y: 100 },\n        { id: 'b', x: 200, y: 100 },\n        { id: 'c', x: 200, y: 200 },\n        { id: 'd', x: 100, y: 200 },\n      ],\n      links: [\n        { source: 'a', target: 'b', linkType: 'bezier', id: 'link_a_b' },\n        { source: 'b', target: 'c', linkType: 'bezier', id: 'link_b_c' },\n        { source: 'c', target: 'd', linkType: 'bezier', id: 'link_c_d' },\n        { source: 'd', target: 'a', linkType: 'bezier', id: 'link_d_a' },\n      ],\n    };\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceLink.distance(240).strength(1);\n          },\n        },\n      },\n      pluginOptions: {\n        bezierCurveController: {\n          enable: true,\n          controlPoints: true,\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'BezierCurveControllerDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', x: 100, y: 100 },\n        { id: 'b', x: 200, y: 100 },\n        { id: 'c', x: 200, y: 200 },\n        { id: 'd', x: 100, y: 200 },\n      ],\n      links: [\n        { source: 'a', target: 'b', linkType: 'bezier', id: 'link_a_b' },\n        { source: 'b', target: 'c', linkType: 'bezier', id: 'link_b_c' },\n        { source: 'c', target: 'd', linkType: 'bezier', id: 'link_c_d' },\n        { source: 'd', target: 'a', linkType: 'bezier', id: 'link_d_a' },\n      ],\n    };\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceLink.distance(240).strength(1);\n          },\n        },\n      },\n      pluginOptions: {\n        bezierCurveController: {\n          enable: true,\n          controlPoints: true,\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/plugins/demo/ColorPaletteDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/plugins/demo/ColorPaletteDemo.vue","order":1,"filename":"ColorPaletteDemo.vue","title":"颜色板","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/colorPalette.png","source":"<template>\n  <div class=\"color-palette-demo-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"颜色板配置\">\n      <mtd-select :max=\"20\" :min=\"5\" v-model=\"colorPlatte\" @change=\"changeColorPalette\" style=\"width: 100%\">\n        <mtd-option v-for=\"(item, index) in options\" :key=\"index\" :label=\"item.label\" :value=\"item.value\"></mtd-option>\n      </mtd-select>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ColorPaletteDemo',\n  data() {\n    return {\n      $graph: null,\n      colorPlatte: 'colorMTDV',\n      options: [\n        { label: '基础色板', value: 'colorMTDV' },\n        { label: '活力蓝5', value: 'colorMtdvVitalityBlue5' },\n        { label: '活力蓝20', value: 'colorMtdvVitalityBlue20' },\n        { label: '活力黄5', value: 'colorMtdvVitalityYellow5' },\n        { label: '活力黄20', value: 'colorMtdvVitalityYellow20' },\n      ],\n    };\n  },\n  mounted() {\n    this.$nextTick(() => {\n      const { width, height } = this.$refs.graph.getBoundingClientRect();\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: {\n          nodes: [],\n          links: [],\n        },\n        d3,\n        layout: {\n          type: 'rect',\n          options: {\n            height: height / 2,\n            columnN: 10,\n            rowN: 2,\n          },\n        },\n      });\n      this.changeColorPalette();\n    });\n  },\n  methods: {\n    changeColorPalette() {\n      const { height } = this.$refs.graph.getBoundingClientRect();\n      const colors = ForceGraphUtil.Constants.colorPalette[this.colorPlatte];\n      this.$graph.color(colors, false);\n      this.$graph.setData({\n        links: [],\n        nodes: Array.from({ length: colors.length }).map((_) => ({ id: Math.random() })),\n      });\n      this.$graph.changeLayout('rect', {\n        height: height / 2,\n        columnN: 10,\n        rowN: 2,\n      });\n    },\n  },\n};\n</script>\n\n<style>\n.color-palette-demo-container {\n  position: relative;\n  height: 100%;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"color-palette-demo-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"颜色板配置\">\n      <mtd-select :max=\"20\" :min=\"5\" v-model=\"colorPlatte\" @change=\"changeColorPalette\" style=\"width: 100%\">\n        <mtd-option v-for=\"(item, index) in options\" :key=\"index\" :label=\"item.label\" :value=\"item.value\"></mtd-option>\n      </mtd-select>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ColorPaletteDemo',\n  data() {\n    return {\n      $graph: null,\n      colorPlatte: 'colorMTDV',\n      options: [\n        { label: '基础色板', value: 'colorMTDV' },\n        { label: '活力蓝5', value: 'colorMtdvVitalityBlue5' },\n        { label: '活力蓝20', value: 'colorMtdvVitalityBlue20' },\n        { label: '活力黄5', value: 'colorMtdvVitalityYellow5' },\n        { label: '活力黄20', value: 'colorMtdvVitalityYellow20' },\n      ],\n    };\n  },\n  mounted() {\n    this.$nextTick(() => {\n      const { width, height } = this.$refs.graph.getBoundingClientRect();\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: {\n          nodes: [],\n          links: [],\n        },\n        d3,\n        layout: {\n          type: 'rect',\n          options: {\n            height: height / 2,\n            columnN: 10,\n            rowN: 2,\n          },\n        },\n      });\n      this.changeColorPalette();\n    });\n  },\n  methods: {\n    changeColorPalette() {\n      const { height } = this.$refs.graph.getBoundingClientRect();\n      const colors = ForceGraphUtil.Constants.colorPalette[this.colorPlatte];\n      this.$graph.color(colors, false);\n      this.$graph.setData({\n        links: [],\n        nodes: Array.from({ length: colors.length }).map((_) => ({ id: Math.random() })),\n      });\n      this.$graph.changeLayout('rect', {\n        height: height / 2,\n        columnN: 10,\n        rowN: 2,\n      });\n    },\n  },\n};\n</script>\n\n<style>\n.color-palette-demo-container {\n  position: relative;\n  height: 100%;\n}\n</style>\n"},{"relativePath":"force-graph-vis/plugins/demo/DynamicLoadDataDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/plugins/demo/DynamicLoadDataDemo.vue","order":2,"filename":"DynamicLoadDataDemo.vue","title":"动态加载","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/dynamicLoadData.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'DynamicLoadDataDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: { nodes: [], links: [] },\n      d3,\n    });\n    const seeds = [\n      '香瓜',\n      '红枣',\n      '番茄',\n      '西瓜',\n      '排骨',\n      '青椒',\n      '猪肉',\n      '榴莲',\n      '奶茶',\n      '火锅',\n      '猛犸',\n      '草莓',\n      '西柚',\n      '雪梨',\n      '苹果',\n    ];\n    const randomIndex = (seeds) => Math.ceil(Math.random() * seeds.length - 1);\n    function genData() {\n      const _seeds = [...seeds];\n      const nodes = Array.from({ length: randomIndex(_seeds) || 1 }).map(() => {\n        const id = _seeds.splice(randomIndex(_seeds), 1).toString();\n        return { id, name: id };\n      });\n      const links = Array.from({ length: nodes.length - 1 }).map((i, index) => ({\n        source: nodes[index].id,\n        target: nodes[index + 1].id,\n        id: `${nodes[index].id}-${nodes[index + 1].id}`,\n      }));\n      return { nodes, links };\n    }\n    graph.updateData(genData());\n    this.timer = setInterval(() => {\n      const seeds = graph.data.nodes.map((node) => node.id);\n      if ((Math.random() > 0.5 && seeds.length < 13) || seeds.length < 3) {\n        graph.updateData(genData());\n      } else {\n        graph.deleteNodeById(\n          Array.from({ length: randomIndex(seeds) || 1 }).map(() => seeds.splice(randomIndex(seeds), 1).toString())\n        );\n      }\n    }, 2000);\n  },\n  beforeDestroy() {\n    clearInterval(this.timer);\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'DynamicLoadDataDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: { nodes: [], links: [] },\n      d3,\n    });\n    const seeds = [\n      '香瓜',\n      '红枣',\n      '番茄',\n      '西瓜',\n      '排骨',\n      '青椒',\n      '猪肉',\n      '榴莲',\n      '奶茶',\n      '火锅',\n      '猛犸',\n      '草莓',\n      '西柚',\n      '雪梨',\n      '苹果',\n    ];\n    const randomIndex = (seeds) => Math.ceil(Math.random() * seeds.length - 1);\n    function genData() {\n      const _seeds = [...seeds];\n      const nodes = Array.from({ length: randomIndex(_seeds) || 1 }).map(() => {\n        const id = _seeds.splice(randomIndex(_seeds), 1).toString();\n        return { id, name: id };\n      });\n      const links = Array.from({ length: nodes.length - 1 }).map((i, index) => ({\n        source: nodes[index].id,\n        target: nodes[index + 1].id,\n        id: `${nodes[index].id}-${nodes[index + 1].id}`,\n      }));\n      return { nodes, links };\n    }\n    graph.updateData(genData());\n    this.timer = setInterval(() => {\n      const seeds = graph.data.nodes.map((node) => node.id);\n      if ((Math.random() > 0.5 && seeds.length < 13) || seeds.length < 3) {\n        graph.updateData(genData());\n      } else {\n        graph.deleteNodeById(\n          Array.from({ length: randomIndex(seeds) || 1 }).map(() => seeds.splice(randomIndex(seeds), 1).toString())\n        );\n      }\n    }, 2000);\n  },\n  beforeDestroy() {\n    clearInterval(this.timer);\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/plugins/demo/HighlightDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/plugins/demo/HighlightDemo.vue","order":3,"filename":"HighlightDemo.vue","title":"高亮动画","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/highlight.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'HighlightDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const root = d3.hierarchy(ForceGraphData.tree);\n    const links = root.links();\n    const nodes = root.descendants();\n    nodes.forEach((node) => (node.id = node.data.name));\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: { nodes, links },\n      d3,\n      cloneData: false,\n      layout: {\n        type: 'layer',\n        options: {\n          root: ['flare'],\n          padding: {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n          },\n          width: 'auto',\n          height: 'auto',\n          levelGap: 150,\n          nodeGap: 0,\n          initDuration: 0,\n        },\n      },\n      drawLinkExtend: function (linksGroup, pathsGroup) {\n        pathsGroup.style('stroke-dasharray', 1000).style('stroke-dashoffset', 1000);\n      },\n    });\n\n    await graph.flyLine(undefined, 2000);\n    graph.dark();\n    graph.setHighlightStep(graph.data.nodes.find((node) => node.id === 'flare'));\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'HighlightDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const root = d3.hierarchy(ForceGraphData.tree);\n    const links = root.links();\n    const nodes = root.descendants();\n    nodes.forEach((node) => (node.id = node.data.name));\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: { nodes, links },\n      d3,\n      cloneData: false,\n      layout: {\n        type: 'layer',\n        options: {\n          root: ['flare'],\n          padding: {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n          },\n          width: 'auto',\n          height: 'auto',\n          levelGap: 150,\n          nodeGap: 0,\n          initDuration: 0,\n        },\n      },\n      drawLinkExtend: function (linksGroup, pathsGroup) {\n        pathsGroup.style('stroke-dasharray', 1000).style('stroke-dashoffset', 1000);\n      },\n    });\n\n    await graph.flyLine(undefined, 2000);\n    graph.dark();\n    graph.setHighlightStep(graph.data.nodes.find((node) => node.id === 'flare'));\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/plugins/demo/OcclusionDetectionDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/plugins/demo/OcclusionDetectionDemo.vue","order":4,"filename":"OcclusionDetectionDemo.vue","title":"遮挡检测","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/occlusionDetection.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'OcclusionDetectionDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: ForceGraphData.complex,\n      d3,\n      pluginOptions: {\n        occlusionDetection: {\n          enable: true, // 是否进行动态遮挡检测\n        },\n      },\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(30);\n          },\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'OcclusionDetectionDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: ForceGraphData.complex,\n      d3,\n      pluginOptions: {\n        occlusionDetection: {\n          enable: true, // 是否进行动态遮挡检测\n        },\n      },\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(30);\n          },\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/plugins/demo/RectSelectionDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/plugins/demo/RectSelectionDemo.vue","order":5,"filename":"RectSelectionDemo.vue","title":"框选工具","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/rectSelection.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'RectSelectionDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', x: 100, y: 100 },\n        { id: 'b', x: 200, y: 100 },\n        { id: 'c', x: 200, y: 200 },\n        { id: 'd', x: 100, y: 200 },\n      ],\n      links: [\n        { source: 'a', target: 'b' },\n        { source: 'b', target: 'c' },\n        { source: 'c', target: 'd' },\n        { source: 'd', target: 'a' },\n      ],\n    };\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      enableZoom: false,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceLink.distance(140).strength(1);\n          },\n        },\n      },\n    });\n\n    const rectSelection = new ForceGraphUtil.plugin.RectSelection({\n      handleBrush: (nodes) => {\n        this.$mtd.message({\n          message: `框选了${nodes.length}个节点`,\n          type: 'success',\n        });\n      },\n    });\n    graph.use(rectSelection);\n    graph.activeRectSelection();\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'RectSelectionDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', x: 100, y: 100 },\n        { id: 'b', x: 200, y: 100 },\n        { id: 'c', x: 200, y: 200 },\n        { id: 'd', x: 100, y: 200 },\n      ],\n      links: [\n        { source: 'a', target: 'b' },\n        { source: 'b', target: 'c' },\n        { source: 'c', target: 'd' },\n        { source: 'd', target: 'a' },\n      ],\n    };\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      enableZoom: false,\n      d3,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceLink.distance(140).strength(1);\n          },\n        },\n      },\n    });\n\n    const rectSelection = new ForceGraphUtil.plugin.RectSelection({\n      handleBrush: (nodes) => {\n        this.$mtd.message({\n          message: `框选了${nodes.length}个节点`,\n          type: 'success',\n        });\n      },\n    });\n    graph.use(rectSelection);\n    graph.activeRectSelection();\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/styles/demo/EventDemo.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/styles/demo/EventDemo.vue","order":0,"filename":"EventDemo.vue","title":"事件","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/eventDemo.png","source":"<template>\n  <div class=\"event-demo-container\">\n    <span style=\"position: absolute\">双击节点试试看</span>\n    <div class=\"graph-container\" ref=\"graph\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'EventDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'Myriel' }, { id: 'Napoleon' }],\n      links: [{ source: 'Myriel', target: 'Napoleon' }],\n    };\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n    });\n    graph.eventEmitter.on(ForceGraphUtil.Events.node.dblclick, ({ item, index, array, event }) => {\n      this.$mtd.message.success(`节点${item.id}被点击了`);\n      const circle = d3.select(array[index]).append('circle').attr('r', 0).attr('fill', 'rgba(0,0,0,0.1)');\n      circle\n        .transition()\n        .attr('r', 2000)\n        .attr('fill', 'transparent')\n        .duration(650)\n        .ease(d3.easeExpIn)\n        .end()\n        .then(() => {\n          circle.remove();\n        });\n    });\n  },\n};\n</script>\n\n<style>\n.event-demo-container {\n  height: 100%;\n  position: relative;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"event-demo-container\">\n    <span style=\"position: absolute\">双击节点试试看</span>\n    <div class=\"graph-container\" ref=\"graph\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'EventDemo',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'Myriel' }, { id: 'Napoleon' }],\n      links: [{ source: 'Myriel', target: 'Napoleon' }],\n    };\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n    });\n    graph.eventEmitter.on(ForceGraphUtil.Events.node.dblclick, ({ item, index, array, event }) => {\n      this.$mtd.message.success(`节点${item.id}被点击了`);\n      const circle = d3.select(array[index]).append('circle').attr('r', 0).attr('fill', 'rgba(0,0,0,0.1)');\n      circle\n        .transition()\n        .attr('r', 2000)\n        .attr('fill', 'transparent')\n        .duration(650)\n        .ease(d3.easeExpIn)\n        .end()\n        .then(() => {\n          circle.remove();\n        });\n    });\n  },\n};\n</script>\n\n<style>\n.event-demo-container {\n  height: 100%;\n  position: relative;\n}\n</style>\n"},{"relativePath":"force-graph-vis/styles/demo/StyleLinkArrow.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/styles/demo/StyleLinkArrow.vue","order":3,"filename":"StyleLinkArrow.vue","title":"边箭头","screenshot":"https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/linkArrow.png","source":"<template>\n  <div class=\"style-link-arrow-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"边箭头配置\">\n      <ControlPanelItem title=\"箭头大小\">\n        <mtd-slider :max=\"20\" :min=\"5\" v-model=\"arrowSize\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头位置\">\n        <mtd-slider :max=\"100\" :min=\"0\" v-model=\"arrowPosition\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkArrow',\n  data() {\n    return {\n      $graph: null,\n      arrowSize: 15,\n      arrowPosition: 0,\n    };\n  },\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a' },\n        { id: 'b' },\n        { id: 'c' },\n        { id: 'd' },\n        { id: 'e' },\n        { id: 'f' },\n        { id: 'g' },\n        { id: 'h' },\n        { id: 'i' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkType: 'straight' },\n        { source: 'a', color: '#9661bc', target: 'c', linkType: 'straight' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkType: 'arc:lower' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkType: 'arc:lower' },\n        { source: 'a', color: '#78d3f8', target: 'h' },\n        { source: 'a', color: '#FD8C04', target: 'g' },\n        { source: 'a', color: '#93ABD3', target: 'i' },\n        { source: 'a', color: '#0E9AA7', target: 'f' },\n        { source: 'f', color: '#ff6b3b', target: 'f' }, //  自环边\n      ],\n    };\n\n    this.$graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      showLinkArrow: true,\n      linkArrowSize: this.arrowSize,\n      linkArrowPosition: this.arrowPosition,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(20);\n            forceObj.forceLink.distance(120).strength(1);\n            forceObj.forceManyBody = ForceGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n  },\n  methods: {\n    handleChange() {\n      this.$graph.setOptions({\n        linkArrowSize: this.arrowSize,\n        linkArrowPosition: this.arrowPosition,\n      });\n      this.$graph.createDefs();\n    },\n  },\n};\n</script>\n\n<style>\n.style-link-arrow-container {\n  position: relative;\n  height: 100%;\n}\n\n.style-link-arrow-container .mtd-slider {\n  margin-bottom: 30px;\n  padding-bottom: 8px;\n}\n\n.style-link-arrow-container .mtd-slider-mark {\n  top: -5px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"style-link-arrow-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"边箭头配置\">\n      <ControlPanelItem title=\"箭头大小\">\n        <mtd-slider :max=\"20\" :min=\"5\" v-model=\"arrowSize\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头位置\">\n        <mtd-slider :max=\"100\" :min=\"0\" v-model=\"arrowPosition\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkArrow',\n  data() {\n    return {\n      $graph: null,\n      arrowSize: 15,\n      arrowPosition: 0,\n    };\n  },\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a' },\n        { id: 'b' },\n        { id: 'c' },\n        { id: 'd' },\n        { id: 'e' },\n        { id: 'f' },\n        { id: 'g' },\n        { id: 'h' },\n        { id: 'i' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkType: 'straight' },\n        { source: 'a', color: '#9661bc', target: 'c', linkType: 'straight' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkType: 'arc:lower' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkType: 'arc:lower' },\n        { source: 'a', color: '#78d3f8', target: 'h' },\n        { source: 'a', color: '#FD8C04', target: 'g' },\n        { source: 'a', color: '#93ABD3', target: 'i' },\n        { source: 'a', color: '#0E9AA7', target: 'f' },\n        { source: 'f', color: '#ff6b3b', target: 'f' }, //  自环边\n      ],\n    };\n\n    this.$graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n      showLinkArrow: true,\n      linkArrowSize: this.arrowSize,\n      linkArrowPosition: this.arrowPosition,\n      layout: {\n        type: 'force',\n        options: {\n          force(forceObj) {\n            forceObj.forceCollide.radius(20);\n            forceObj.forceLink.distance(120).strength(1);\n            forceObj.forceManyBody = ForceGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n  },\n  methods: {\n    handleChange() {\n      this.$graph.setOptions({\n        linkArrowSize: this.arrowSize,\n        linkArrowPosition: this.arrowPosition,\n      });\n      this.$graph.createDefs();\n    },\n  },\n};\n</script>\n\n<style>\n.style-link-arrow-container {\n  position: relative;\n  height: 100%;\n}\n\n.style-link-arrow-container .mtd-slider {\n  margin-bottom: 30px;\n  padding-bottom: 8px;\n}\n\n.style-link-arrow-container .mtd-slider-mark {\n  top: -5px;\n}\n</style>\n"},{"relativePath":"force-graph-vis/styles/demo/StyleLinkType.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/styles/demo/StyleLinkType.vue","order":4,"filename":"StyleLinkType.vue","title":"边类型","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/linkType.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkType',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }, { id: 'e' }, { id: 'f' }, { id: 'g' }, { id: 'h' }],\n      links: [\n        { source: 'c', target: 'd', linkType: 'straight' }, //直线\n        { source: 'a', target: 'b', linkType: 'arc:upper' }, //上弧线\n        { source: 'b', target: 'a', linkType: 'arc:upper' }, //上弧线\n        { source: 'e', target: 'f', linkType: 'arc:lower' }, //下弧线\n        { source: 'f', target: 'e', linkType: 'arc:lower' }, //下弧线\n        { source: 'd', target: 'g', linkType: 'bezier' }, //贝塞尔曲线边\n        { source: 'g', target: 'g', angle: 180 }, //  自环边角度调整\n        { source: 'h', target: 'h' }, //  自环边\n      ],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      showLinkArrow: true,\n      d3,\n      layout: {\n        type: 'rect',\n        options: {\n          columnN: 4,\n          rowN: 2,\n          xCenter: 0.5,\n          yCenter: 0.5,\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkType',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }, { id: 'e' }, { id: 'f' }, { id: 'g' }, { id: 'h' }],\n      links: [\n        { source: 'c', target: 'd', linkType: 'straight' }, //直线\n        { source: 'a', target: 'b', linkType: 'arc:upper' }, //上弧线\n        { source: 'b', target: 'a', linkType: 'arc:upper' }, //上弧线\n        { source: 'e', target: 'f', linkType: 'arc:lower' }, //下弧线\n        { source: 'f', target: 'e', linkType: 'arc:lower' }, //下弧线\n        { source: 'd', target: 'g', linkType: 'bezier' }, //贝塞尔曲线边\n        { source: 'g', target: 'g', angle: 180 }, //  自环边角度调整\n        { source: 'h', target: 'h' }, //  自环边\n      ],\n    };\n\n    const graph = new ForceGraphVis({\n      dom: this.$refs.graph,\n      data: graphData,\n      showLinkArrow: true,\n      d3,\n      layout: {\n        type: 'rect',\n        options: {\n          columnN: 4,\n          rowN: 2,\n          xCenter: 0.5,\n          yCenter: 0.5,\n        },\n      },\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/styles/demo/StyleNodeConfig.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/styles/demo/StyleNodeConfig.vue","order":1,"filename":"StyleNodeConfig.vue","title":"节点配置","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/nodeConfig.png","source":"<template>\n  <div class=\"style-node-config-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n\n    <ControlPanel class=\"control-panel\" title=\"节点设置\">\n      <ControlPanelItem title=\"节点类型\">\n        <mtd-radio-group class=\"\" v-model=\"nodeType\" size=\"small\" @change=\"handleChange\">\n          <mtd-radio value=\"\">普通节点</mtd-radio>\n          <mtd-radio value=\"center\">中心节点</mtd-radio>\n          <mtd-radio value=\"ghost\">虚拟节点</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"节点文字\">\n        <div slot=\"title\">\n          <span>节点文字</span>\n          <mtd-switch\n            v-model=\"nodeText.show\"\n            size=\"small\"\n            @change=\"handleChange\"\n            style=\"margin-left: 10px; vertical-align: middle\"\n          ></mtd-switch>\n        </div>\n\n        <mtd-radio-group\n          class=\"\"\n          v-model=\"nodeText.placement\"\n          size=\"small\"\n          :disabled=\"!nodeText.show\"\n          @change=\"handleChange\"\n        >\n          <mtd-radio value=\"center\" :disabled=\"textCenterDisabled\">内部</mtd-radio>\n          <mtd-radio value=\"bottom\">外部-上下</mtd-radio>\n          <mtd-radio value=\"bottom-right\">外部-左右</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"节点样式\">\n        <mtd-checkbox v-model=\"nodeIcon\" size=\"small\" :disabled=\"iconDisabled\" @input=\"handleChange\">图标</mtd-checkbox>\n        <mtd-checkbox v-model=\"nodeTag\" size=\"small\" @input=\"handleChange\">状态</mtd-checkbox>\n        <div class=\"slider-wrapper\">\n          <span class=\"slider-label\">节点大小</span>\n          <mtd-slider :max=\"100\" :min=\"5\" v-model=\"nodeSize\" size=\"small\" @input=\"handleChange\" />\n        </div>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"节点颜色\">\n        <ColorPalette v-model=\"color\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleNodeConfig',\n  data() {\n    return {\n      nodeType: '',\n      nodeText: {\n        show: true,\n        placement: 'bottom-right',\n      },\n      nodeTag: false,\n      nodeIcon: false,\n      nodeSize: 28,\n\n      color: '#347BED',\n    };\n  },\n  computed: {\n    nodes() {\n      const { nodeType, nodeText, nodeTag, nodeIcon, nodeSize } = this;\n      return [\n        {\n          id: 'a',\n          name: nodeText.show ? 'Label_node' : '',\n          radius: nodeSize / 2,\n          icon: nodeIcon ? 'mtdicon-lock-o' : '',\n          nodeTag: nodeTag\n            ? {\n                icon: 'mtdicon-ellipsis',\n                type: 'primary',\n                placement: 'bottom-right',\n                isFill: true, // 实心图标\n              }\n            : null,\n          textPlacement: nodeText.placement,\n          centerNode: nodeType === 'center',\n          ghostNode: nodeType === 'ghost',\n          color: this.color,\n        },\n      ];\n    },\n\n    iconDisabled() {\n      return this.nodeText.placement === 'center';\n    },\n    textCenterDisabled() {\n      return this.nodeIcon;\n    },\n  },\n  methods: {\n    handleChange() {\n      this.$graph.clear();\n      this.$graph.setData({ nodes: this.nodes, links: this.links });\n    },\n    draw() {\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes: this.nodes, links: [] },\n        d3,\n      });\n    },\n  },\n  watch: {\n    color() {\n      this.handleChange();\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.draw();\n    });\n  },\n};\n</script>\n\n<style>\n.style-node-config-container {\n  position: relative;\n  height: 100%;\n}\n\n.style-node-config-container .slider-wrapper {\n  margin-top: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.style-node-config-container .slider-label {\n  font-size: 12px;\n  width: max-content;\n  flex: 0 0 auto;\n  margin-right: 12px;\n}\n\n.style-node-config-container .mtd-radio-text {\n  padding-right: 14px;\n}\n.style-node-config-container .mtd-slider {\n  width: 100%;\n  margin: 0;\n}\n.style-node-config-container .mtd-slider .mtd-slider-mark-text {\n  display: none;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"style-node-config-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n\n    <ControlPanel class=\"control-panel\" title=\"节点设置\">\n      <ControlPanelItem title=\"节点类型\">\n        <mtd-radio-group class=\"\" v-model=\"nodeType\" size=\"small\" @change=\"handleChange\">\n          <mtd-radio value=\"\">普通节点</mtd-radio>\n          <mtd-radio value=\"center\">中心节点</mtd-radio>\n          <mtd-radio value=\"ghost\">虚拟节点</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"节点文字\">\n        <div slot=\"title\">\n          <span>节点文字</span>\n          <mtd-switch\n            v-model=\"nodeText.show\"\n            size=\"small\"\n            @change=\"handleChange\"\n            style=\"margin-left: 10px; vertical-align: middle\"\n          ></mtd-switch>\n        </div>\n\n        <mtd-radio-group\n          class=\"\"\n          v-model=\"nodeText.placement\"\n          size=\"small\"\n          :disabled=\"!nodeText.show\"\n          @change=\"handleChange\"\n        >\n          <mtd-radio value=\"center\" :disabled=\"textCenterDisabled\">内部</mtd-radio>\n          <mtd-radio value=\"bottom\">外部-上下</mtd-radio>\n          <mtd-radio value=\"bottom-right\">外部-左右</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"节点样式\">\n        <mtd-checkbox v-model=\"nodeIcon\" size=\"small\" :disabled=\"iconDisabled\" @input=\"handleChange\">图标</mtd-checkbox>\n        <mtd-checkbox v-model=\"nodeTag\" size=\"small\" @input=\"handleChange\">状态</mtd-checkbox>\n        <div class=\"slider-wrapper\">\n          <span class=\"slider-label\">节点大小</span>\n          <mtd-slider :max=\"100\" :min=\"5\" v-model=\"nodeSize\" size=\"small\" @input=\"handleChange\" />\n        </div>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"节点颜色\">\n        <ColorPalette v-model=\"color\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleNodeConfig',\n  data() {\n    return {\n      nodeType: '',\n      nodeText: {\n        show: true,\n        placement: 'bottom-right',\n      },\n      nodeTag: false,\n      nodeIcon: false,\n      nodeSize: 28,\n\n      color: '#347BED',\n    };\n  },\n  computed: {\n    nodes() {\n      const { nodeType, nodeText, nodeTag, nodeIcon, nodeSize } = this;\n      return [\n        {\n          id: 'a',\n          name: nodeText.show ? 'Label_node' : '',\n          radius: nodeSize / 2,\n          icon: nodeIcon ? 'mtdicon-lock-o' : '',\n          nodeTag: nodeTag\n            ? {\n                icon: 'mtdicon-ellipsis',\n                type: 'primary',\n                placement: 'bottom-right',\n                isFill: true, // 实心图标\n              }\n            : null,\n          textPlacement: nodeText.placement,\n          centerNode: nodeType === 'center',\n          ghostNode: nodeType === 'ghost',\n          color: this.color,\n        },\n      ];\n    },\n\n    iconDisabled() {\n      return this.nodeText.placement === 'center';\n    },\n    textCenterDisabled() {\n      return this.nodeIcon;\n    },\n  },\n  methods: {\n    handleChange() {\n      this.$graph.clear();\n      this.$graph.setData({ nodes: this.nodes, links: this.links });\n    },\n    draw() {\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes: this.nodes, links: [] },\n        d3,\n      });\n    },\n  },\n  watch: {\n    color() {\n      this.handleChange();\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.draw();\n    });\n  },\n};\n</script>\n\n<style>\n.style-node-config-container {\n  position: relative;\n  height: 100%;\n}\n\n.style-node-config-container .slider-wrapper {\n  margin-top: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.style-node-config-container .slider-label {\n  font-size: 12px;\n  width: max-content;\n  flex: 0 0 auto;\n  margin-right: 12px;\n}\n\n.style-node-config-container .mtd-radio-text {\n  padding-right: 14px;\n}\n.style-node-config-container .mtd-slider {\n  width: 100%;\n  margin: 0;\n}\n.style-node-config-container .mtd-slider .mtd-slider-mark-text {\n  display: none;\n}\n</style>\n"},{"relativePath":"force-graph-vis/styles/demo/StyleLinkConfig.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/styles/demo/StyleLinkConfig.vue","order":2,"filename":"StyleLinkConfig.vue","title":"边配置","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/linkConfig.png","source":"<template>\n  <div class=\"style-node-config-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n\n    <div class=\"graph-tooltip-wrapper-hidden\">\n      <div class=\"graph-tooltip-wrapper\" ref=\"tooltip\">\n        <div v-if=\"currLink\">\n          <div v-for=\"name in linkTag === 'single' ? [currLink.name] : currLink.name.split(' | ')\" :key=\"name\">\n            <div class=\"header\" style=\"display: flex; justify-content: space-between; align-items: center\">\n              <span style=\"width: 60px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0\">{{\n                currLink.source.id\n              }}</span>\n              <span style=\"font-size: 0\">\n                <svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"60\" height=\"32\">\n                  <path d=\"M555.853 62l406.147 450-406.147 450z\" p-id=\"9727\" fill=\"#DEE8FA\"></path>\n                  <path d=\"M62 292.625h624.015v438.75h-624.015v-438.75z\" p-id=\"9728\" fill=\"#DEE8FA\"></path>\n                </svg>\n              </span>\n              <span style=\"width: 60px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0\">{{\n                currLink.target.id\n              }}</span>\n            </div>\n            <div class=\"content\" style=\"color: rgba(0, 0, 0, 0.6); margin-top: 12px; font-size: 12px\">\n              这是一段关系说明描述，用于详细解释双方如何发生关联\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <ControlPanel class=\"control-panel\" title=\"边设置\">\n      <ControlPanelItem title=\"\">\n        <div slot=\"title\">\n          <span>边标签</span>\n          <mtd-switch\n            v-model=\"showLinkText\"\n            size=\"small\"\n            @change=\"handleChange(true)\"\n            style=\"margin-left: 10px; vertical-align: middle\"\n          ></mtd-switch>\n        </div>\n\n        <mtd-radio-group class=\"\" v-model=\"linkTag\" size=\"small\" :disabled=\"!showLinkText\" @change=\"handleChange\">\n          <mtd-radio value=\"single\">单类型</mtd-radio>\n          <mtd-radio value=\"multiple\">多类型</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"\">\n        <div slot=\"title\">\n          <span>边方向</span>\n          <mtd-switch\n            v-model=\"showLinkArrow\"\n            size=\"small\"\n            @change=\"handleChange(true)\"\n            style=\"margin-left: 10px; vertical-align: middle\"\n          ></mtd-switch>\n        </div>\n\n        <mtd-radio-group class=\"\" v-model=\"linkArrow\" size=\"small\" :disabled=\"!showLinkArrow\" @change=\"handleChange\">\n          <mtd-radio value=\"one\">单向</mtd-radio>\n          <mtd-radio value=\"two\">双向</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"边颜色\">\n        <ColorPalette v-model=\"color\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkConfig',\n  data() {\n    return {\n      showLinkText: true,\n      linkTag: 'single',\n\n      showLinkArrow: true,\n      linkArrow: 'one',\n\n      color: '#347BED',\n\n      currLink: null,\n    };\n  },\n  computed: {\n    nodes() {\n      return [\n        { id: 'Node_a', color: '#347BED', radius: 12, group: 1, x: 190, y: 430 },\n        { id: 'Node_b', color: '#347BED', radius: 12, group: 1, x: 480, y: 380 },\n      ];\n    },\n    links() {\n      return [\n        {\n          source: 'Node_a',\n          target: 'Node_b',\n          doubleArrow: this.linkArrow === 'two',\n          color: this.color,\n          name: this.linkTag === 'single' ? '同类店铺' : '同类店铺 | 附近商家 | 竞争对手',\n        },\n      ];\n    },\n  },\n  methods: {\n    handleChange(isFlush = false) {\n      //todo 优化setData方法,此处不应该clear\n      this.$graph.clear();\n      if (isFlush) {\n        this.draw();\n      } else {\n        this.$graph.setData({ nodes: this.nodes, links: this.links });\n      }\n    },\n    draw() {\n      const { showLinkText, showLinkArrow } = this;\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes: this.nodes, links: this.links },\n        d3,\n        showLinkPopup: true,\n        showLinkArrow,\n        showLinkText,\n        linkLabelWidth: this.linkTag === 'single' ? 64 : 140,\n        generateLinkPopupTemplate: (link) => {\n          this.currLink = link;\n          return this.$refs.tooltip;\n        },\n      });\n    },\n  },\n  watch: {\n    color() {\n      this.handleChange();\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.draw();\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.style-node-config-container {\n  position: relative;\n  height: 100%;\n}\n.graph-tooltip-wrapper {\n  &-hidden {\n    display: none;\n  }\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"style-node-config-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n\n    <div class=\"graph-tooltip-wrapper-hidden\">\n      <div class=\"graph-tooltip-wrapper\" ref=\"tooltip\">\n        <div v-if=\"currLink\">\n          <div v-for=\"name in linkTag === 'single' ? [currLink.name] : currLink.name.split(' | ')\" :key=\"name\">\n            <div class=\"header\" style=\"display: flex; justify-content: space-between; align-items: center\">\n              <span style=\"width: 60px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0\">{{\n                currLink.source.id\n              }}</span>\n              <span style=\"font-size: 0\">\n                <svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"60\" height=\"32\">\n                  <path d=\"M555.853 62l406.147 450-406.147 450z\" p-id=\"9727\" fill=\"#DEE8FA\"></path>\n                  <path d=\"M62 292.625h624.015v438.75h-624.015v-438.75z\" p-id=\"9728\" fill=\"#DEE8FA\"></path>\n                </svg>\n              </span>\n              <span style=\"width: 60px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0\">{{\n                currLink.target.id\n              }}</span>\n            </div>\n            <div class=\"content\" style=\"color: rgba(0, 0, 0, 0.6); margin-top: 12px; font-size: 12px\">\n              这是一段关系说明描述，用于详细解释双方如何发生关联\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <ControlPanel class=\"control-panel\" title=\"边设置\">\n      <ControlPanelItem title=\"\">\n        <div slot=\"title\">\n          <span>边标签</span>\n          <mtd-switch\n            v-model=\"showLinkText\"\n            size=\"small\"\n            @change=\"handleChange(true)\"\n            style=\"margin-left: 10px; vertical-align: middle\"\n          ></mtd-switch>\n        </div>\n\n        <mtd-radio-group class=\"\" v-model=\"linkTag\" size=\"small\" :disabled=\"!showLinkText\" @change=\"handleChange\">\n          <mtd-radio value=\"single\">单类型</mtd-radio>\n          <mtd-radio value=\"multiple\">多类型</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"\">\n        <div slot=\"title\">\n          <span>边方向</span>\n          <mtd-switch\n            v-model=\"showLinkArrow\"\n            size=\"small\"\n            @change=\"handleChange(true)\"\n            style=\"margin-left: 10px; vertical-align: middle\"\n          ></mtd-switch>\n        </div>\n\n        <mtd-radio-group class=\"\" v-model=\"linkArrow\" size=\"small\" :disabled=\"!showLinkArrow\" @change=\"handleChange\">\n          <mtd-radio value=\"one\">单向</mtd-radio>\n          <mtd-radio value=\"two\">双向</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"边颜色\">\n        <ColorPalette v-model=\"color\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'StyleLinkConfig',\n  data() {\n    return {\n      showLinkText: true,\n      linkTag: 'single',\n\n      showLinkArrow: true,\n      linkArrow: 'one',\n\n      color: '#347BED',\n\n      currLink: null,\n    };\n  },\n  computed: {\n    nodes() {\n      return [\n        { id: 'Node_a', color: '#347BED', radius: 12, group: 1, x: 190, y: 430 },\n        { id: 'Node_b', color: '#347BED', radius: 12, group: 1, x: 480, y: 380 },\n      ];\n    },\n    links() {\n      return [\n        {\n          source: 'Node_a',\n          target: 'Node_b',\n          doubleArrow: this.linkArrow === 'two',\n          color: this.color,\n          name: this.linkTag === 'single' ? '同类店铺' : '同类店铺 | 附近商家 | 竞争对手',\n        },\n      ];\n    },\n  },\n  methods: {\n    handleChange(isFlush = false) {\n      //todo 优化setData方法,此处不应该clear\n      this.$graph.clear();\n      if (isFlush) {\n        this.draw();\n      } else {\n        this.$graph.setData({ nodes: this.nodes, links: this.links });\n      }\n    },\n    draw() {\n      const { showLinkText, showLinkArrow } = this;\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes: this.nodes, links: this.links },\n        d3,\n        showLinkPopup: true,\n        showLinkArrow,\n        showLinkText,\n        linkLabelWidth: this.linkTag === 'single' ? 64 : 140,\n        generateLinkPopupTemplate: (link) => {\n          this.currLink = link;\n          return this.$refs.tooltip;\n        },\n      });\n    },\n  },\n  watch: {\n    color() {\n      this.handleChange();\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.draw();\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.style-node-config-container {\n  position: relative;\n  height: 100%;\n}\n.graph-tooltip-wrapper {\n  &-hidden {\n    display: none;\n  }\n}\n</style>\n"},{"relativePath":"force-graph-vis/layout/demo/LayoutRadial.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/layout/demo/LayoutRadial.vue","order":3,"filename":"LayoutRadial.vue","title":"环形布局","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/layoutRadial.png","source":"<template>\n  <div class=\"layout-radial\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel class=\"control-panel\" title=\"布局设置\">\n      <ControlPanelItem title=\"环样式\">\n        <mtd-radio-group v-model=\"radio\" @change=\"handleChange\">\n          <mtd-radio :value=\"0\">单环</mtd-radio>\n          <mtd-radio :value=\"1\">散环</mtd-radio>\n          <mtd-radio :value=\"2\">多环</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutRadial',\n  data() {\n    return {\n      $graph: null,\n      radio: 0,\n    };\n  },\n  methods: {\n    initGraph() {\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.noEdges,\n        d3: d3,\n        layout: {\n          type: 'radial',\n          options: {\n            force(forceObj) {\n              forceObj.forceCollide.radius(12);\n              forceObj.forceRadial.radius(360).strength(1);\n            },\n          },\n        },\n      });\n    },\n    handleChange(value) {\n      if (value === 0) {\n        this.$graph.changeLayout('radial', {\n          force(forceObj) {\n            forceObj.forceCollide.radius(12);\n            forceObj.forceRadial.radius(360).strength(1);\n          },\n        });\n      }\n      if (value === 1) {\n        this.$graph.changeLayout('radial', {\n          force(forceObj) {\n            forceObj.forceCollide.radius(32);\n            forceObj.forceRadial.strength(0.1);\n          },\n        });\n      }\n      if (value === 2) {\n        this.$graph.changeLayout('radial', {\n          force(forceObj) {\n            forceObj.forceCollide.radius(12);\n            forceObj.forceRadial\n              .radius((d) => {\n                const ring = d.group % 3;\n                if (ring === 0) {\n                  return 100;\n                }\n                if (ring === 1) {\n                  return 220;\n                }\n                return 340;\n              })\n              .strength(1);\n          },\n        });\n      }\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style>\n.layout-radial {\n  width: 100%;\n  height: 100%;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"layout-radial\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel class=\"control-panel\" title=\"布局设置\">\n      <ControlPanelItem title=\"环样式\">\n        <mtd-radio-group v-model=\"radio\" @change=\"handleChange\">\n          <mtd-radio :value=\"0\">单环</mtd-radio>\n          <mtd-radio :value=\"1\">散环</mtd-radio>\n          <mtd-radio :value=\"2\">多环</mtd-radio>\n        </mtd-radio-group>\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutRadial',\n  data() {\n    return {\n      $graph: null,\n      radio: 0,\n    };\n  },\n  methods: {\n    initGraph() {\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.noEdges,\n        d3: d3,\n        layout: {\n          type: 'radial',\n          options: {\n            force(forceObj) {\n              forceObj.forceCollide.radius(12);\n              forceObj.forceRadial.radius(360).strength(1);\n            },\n          },\n        },\n      });\n    },\n    handleChange(value) {\n      if (value === 0) {\n        this.$graph.changeLayout('radial', {\n          force(forceObj) {\n            forceObj.forceCollide.radius(12);\n            forceObj.forceRadial.radius(360).strength(1);\n          },\n        });\n      }\n      if (value === 1) {\n        this.$graph.changeLayout('radial', {\n          force(forceObj) {\n            forceObj.forceCollide.radius(32);\n            forceObj.forceRadial.strength(0.1);\n          },\n        });\n      }\n      if (value === 2) {\n        this.$graph.changeLayout('radial', {\n          force(forceObj) {\n            forceObj.forceCollide.radius(12);\n            forceObj.forceRadial\n              .radius((d) => {\n                const ring = d.group % 3;\n                if (ring === 0) {\n                  return 100;\n                }\n                if (ring === 1) {\n                  return 220;\n                }\n                return 340;\n              })\n              .strength(1);\n          },\n        });\n      }\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style>\n.layout-radial {\n  width: 100%;\n  height: 100%;\n}\n</style>\n"},{"relativePath":"force-graph-vis/layout/demo/LayoutRing.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/layout/demo/LayoutRing.vue","order":5,"filename":"LayoutRing.vue","title":"中心层次布局","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/layoutRing.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutRing',\n  methods: {\n    initGraph() {\n      const root = d3.hierarchy(ForceGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      const graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes, links },\n        d3: d3,\n        cloneData: false,\n        layout: {\n          type: 'ring',\n          options: { root: ['flare'], radius: 360 },\n        },\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutRing',\n  methods: {\n    initGraph() {\n      const root = d3.hierarchy(ForceGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      const graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: { nodes, links },\n        d3: d3,\n        cloneData: false,\n        layout: {\n          type: 'ring',\n          options: { root: ['flare'], radius: 360 },\n        },\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"force-graph-vis/layout/demo/LayoutRect.vue","absolutePath":"/opt/meituan/tmp/21274111_60216501/examples/force-graph-vis/layout/demo/LayoutRect.vue","order":1,"filename":"LayoutRect.vue","title":"网格布局","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/layoutRect.png","source":"<template>\n  <div class=\"layout-rect-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"布局配置\">\n      <ControlPanelItem title=\"布局宽度\">\n        <mtd-slider :min=\"500\" :max=\"2000\" v-model=\"width\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局高度\">\n        <mtd-slider :min=\"400\" :max=\"1500\" v-model=\"height\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局列数\">\n        <mtd-slider :min=\"4\" :max=\"8\" v-model=\"columnN\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局行数\">\n        <mtd-slider :min=\"4\" :max=\"8\" v-model=\"rowN\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局水平中心\">\n        <mtd-slider :min=\"0\" :max=\"1\" :steps=\"steps\" v-model=\"xCenter\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局垂直中心\">\n        <mtd-slider :min=\"0\" :max=\"1\" :steps=\"steps\" v-model=\"yCenter\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutRect',\n  data() {\n    return {\n      $graph: null,\n      width: 0,\n      height: 0,\n      columnN: 5,\n      rowN: 4,\n      xCenter: 0.1,\n      yCenter: 0.5,\n      steps: Array.from({ length: 5 }).map((_, i) => (i * 2) / 10),\n    };\n  },\n  methods: {\n    initGraph() {\n      const { width, height } = this.$refs.graph.getBoundingClientRect();\n      this.width = width;\n      this.height = height;\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.base,\n        d3: d3,\n        layout: {\n          type: 'rect',\n          options: {\n            width: this.width,\n            height: this.height,\n            columnN: this.columnN,\n            rowN: this.rowN,\n            xCenter: this.xCenter,\n            yCenter: this.yCenter,\n          },\n        },\n      });\n    },\n    handleChange() {\n      this.$graph.changeLayout('rect', {\n        width: this.width,\n        height: this.height,\n        columnN: this.columnN,\n        rowN: this.rowN,\n        xCenter: this.xCenter,\n        yCenter: this.yCenter,\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style>\n.layout-rect-container {\n  position: relative;\n  height: 100%;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"layout-rect-container\">\n    <div class=\"graph-container\" ref=\"graph\"></div>\n    <ControlPanel title=\"布局配置\">\n      <ControlPanelItem title=\"布局宽度\">\n        <mtd-slider :min=\"500\" :max=\"2000\" v-model=\"width\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局高度\">\n        <mtd-slider :min=\"400\" :max=\"1500\" v-model=\"height\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局列数\">\n        <mtd-slider :min=\"4\" :max=\"8\" v-model=\"columnN\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局行数\">\n        <mtd-slider :min=\"4\" :max=\"8\" v-model=\"rowN\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局水平中心\">\n        <mtd-slider :min=\"0\" :max=\"1\" :steps=\"steps\" v-model=\"xCenter\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局垂直中心\">\n        <mtd-slider :min=\"0\" :max=\"1\" :steps=\"steps\" v-model=\"yCenter\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n    </ControlPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'LayoutRect',\n  data() {\n    return {\n      $graph: null,\n      width: 0,\n      height: 0,\n      columnN: 5,\n      rowN: 4,\n      xCenter: 0.1,\n      yCenter: 0.5,\n      steps: Array.from({ length: 5 }).map((_, i) => (i * 2) / 10),\n    };\n  },\n  methods: {\n    initGraph() {\n      const { width, height } = this.$refs.graph.getBoundingClientRect();\n      this.width = width;\n      this.height = height;\n      this.$graph = new ForceGraphVis({\n        dom: this.$refs.graph,\n        data: ForceGraphData.base,\n        d3: d3,\n        layout: {\n          type: 'rect',\n          options: {\n            width: this.width,\n            height: this.height,\n            columnN: this.columnN,\n            rowN: this.rowN,\n            xCenter: this.xCenter,\n            yCenter: this.yCenter,\n          },\n        },\n      });\n    },\n    handleChange() {\n      this.$graph.changeLayout('rect', {\n        width: this.width,\n        height: this.height,\n        columnN: this.columnN,\n        rowN: this.rowN,\n        xCenter: this.xCenter,\n        yCenter: this.yCenter,\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style>\n.layout-rect-container {\n  position: relative;\n  height: 100%;\n}\n</style>\n"}],"components":[{"code":"(function (global, factory) {\n  if (typeof define === \"function\" && define.amd) {\n    define([\"exports\", \"react\"], factory);\n  } else if (typeof exports !== \"undefined\") {\n    factory(exports, require(\"react\"));\n  } else {\n    var mod = {\n      exports: {}\n    };\n    factory(mod.exports, global.react);\n    global.baseforcegraph = mod.exports;\n  }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_exports, _react) {\n  \"use strict\";\n\n  Object.defineProperty(_exports, \"__esModule\", {\n    value: true\n  });\n  _exports.default = void 0;\n  _react = _interopRequireDefault(_react);\n\n  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n  function _instanceof(left, right) { if (right != null && typeof Symbol !== \"undefined\" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\n\n  function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n  function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\n  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n  function _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\n  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\n  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\n  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\n  function _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\n  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n  var BaseForceGraph = /*#__PURE__*/function (_React$Component) {\n    _inherits(BaseForceGraph, _React$Component);\n\n    var _super = _createSuper(BaseForceGraph);\n\n    function BaseForceGraph() {\n      var _this;\n\n      _classCallCheck(this, BaseForceGraph);\n\n      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n        args[_key] = arguments[_key];\n      }\n\n      _this = _super.call.apply(_super, [this].concat(args));\n\n      _defineProperty(_assertThisInitialized(_this), \"dom\", null);\n\n      return _this;\n    }\n\n    _createClass(BaseForceGraph, [{\n      key: \"componentDidMount\",\n      value: function componentDidMount() {\n        var graphData = {\n          nodes: [{\n            id: 'Myriel'\n          }, {\n            id: 'Napoleon'\n          }],\n          links: [{\n            source: 'Myriel',\n            target: 'Napoleon'\n          }]\n        };\n        new ForceGraphVis({\n          dom: this.dom,\n          data: graphData,\n          auto: true,\n          d3: d3\n        });\n      }\n    }, {\n      key: \"render\",\n      value: function render() {\n        var _this2 = this;\n\n        return /*#__PURE__*/_react.default.createElement(\"div\", {\n          style: {\n            height: '150px'\n          },\n          ref: function ref(node) {\n            return _this2.dom = node;\n          }\n        });\n      }\n    }]);\n\n    return BaseForceGraph;\n  }(_react.default.Component);\n\n  _exports.default = BaseForceGraph;\n});","filename":"baseforcegraph"}]}},"staticQueryHashes":["1976131296","3000541721","3000541721","340017852"]}