{"componentChunkName":"component---node-modules-snfe-gatsby-theme-mtdv-graph-site-templates-document-tsx","path":"/docs/manual/mtdv-graph/plugins/globalGraphHelper","result":{"data":{"site":{"siteMetadata":{"isChartSite":false,"isGraphSite":true,"title":"MTDV","docs":[{"slug":"manual/mtdv-graph","title":"关联图","order":1},{"slug":"manual/mtdv-graph-flow","title":"编排图","order":99}]},"pathPrefix":""},"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h3","properties":{"id":"code-classlanguage-textgraphfixedgraphcode","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#code-classlanguage-textgraphfixedgraphcode","ariaLabel":"code classlanguage textgraphfixedgraphcode 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":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"graph.fixedGraph()"}]}]},{"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":"固定图谱所有节点"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"code-classlanguage-textgraphprintpointcode","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#code-classlanguage-textgraphprintpointcode","ariaLabel":"code classlanguage textgraphprintpointcode 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":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"graph.printPoint()"}]}]},{"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/mtdv-graph/plugins/globalGraphHelper/#code-classlanguage-textgraphfixedgraphcode\"><code class=\"language-text\">graph.fixedGraph()</code></a></li>\n<li><a href=\"/docs/manual/mtdv-graph/plugins/globalGraphHelper/#code-classlanguage-textgraphprintpointcode\"><code class=\"language-text\">graph.printPoint()</code></a></li>\n</ul>","fields":{"slug":"/docs/manual/mtdv-graph/plugins/globalGraphHelper","readingTime":{"text":"1 min read","time":7800}},"frontmatter":{"title":"工具函数"},"parent":{"__typename":"File","relativePath":"manual/mtdv-graph/plugins/globalGraphHelper.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/intro"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph-flow/intro"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api/graph"},"frontmatter":{"title":"图谱实例","order":0}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/bezierCurveController"},"frontmatter":{"title":"贝塞尔曲线控制点","order":0}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/begin"},"frontmatter":{"title":"入门教程","order":1}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph-flow/begin"},"frontmatter":{"title":"入门教程","order":1}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api/render"},"frontmatter":{"title":"渲染","order":1}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/colorPalette"},"frontmatter":{"title":"颜色板","order":1}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/main-concept"},"frontmatter":{"title":"核心概念","order":2}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph-flow/main-concept"},"frontmatter":{"title":"核心概念","order":2}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api/simulation"},"frontmatter":{"title":"力学模拟","order":2}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/dynamicLoadData"},"frontmatter":{"title":"动态加载","order":2}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/options"},"frontmatter":{"title":"图谱配置项","order":3}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph-flow/API"},"frontmatter":{"title":"API","order":3}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api/zoom"},"frontmatter":{"title":"平移缩放","order":3}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/highlight"},"frontmatter":{"title":"高亮","order":3}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph-flow/example"},"frontmatter":{"title":"示例","order":4}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api/eventEmitter"},"frontmatter":{"title":"事件","order":4}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/overall-demo"},"frontmatter":{"title":"整体 demo","order":5}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api/layout"},"frontmatter":{"title":"力与布局","order":5}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api/state"},"frontmatter":{"title":"状态","order":5}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/api"},"frontmatter":{"title":"API","order":6}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins"},"frontmatter":{"title":"拓展能力","order":7}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/occlusionDetection"},"frontmatter":{"title":"遮挡检测","order":7}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/RectSelection"},"frontmatter":{"title":"框选工具","order":8}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/selector"},"frontmatter":{"title":"快捷选择器","order":9}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/globalGraphHelper"},"frontmatter":{"title":"工具函数","order":10}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/minimap"},"frontmatter":{"title":"缩略图","order":11}}},{"node":{"fields":{"slug":"/docs/manual/mtdv-graph/plugins/customPlugin"},"frontmatter":{"title":"如何开发一个插件","order":12}}},{"node":{"fields":{"slug":"/docs/common/design-principle"},"frontmatter":{"title":"","order":null}}}]}},"pageContext":{"examples":[{"relativePath":"mtdv-graph/demo/VueGraphDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\n      dom: this.$refs.graph,\n      data: MtdvGraphData.base,\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 MtdvGraph({\n      dom: this.$refs.graph,\n      data: MtdvGraphData.base,\n      d3,\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"mtdv-graph/custom-styles/demo/ColorPaletteDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/custom-styles/demo/ColorPaletteDemo.vue","order":1,"filename":"ColorPaletteDemo.vue","title":"自定义颜色板颜色","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/customColorPalette.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 MtdvGraph({\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 MtdvGraph({\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":"mtdv-graph/custom-styles/demo/StyleLinkArrow.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/custom-styles/demo/StyleLinkArrow.vue","order":3,"filename":"StyleLinkArrow.vue","title":"自定义边箭头","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/customLinkArrow.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-radio-group v-model=\"marker\" @input=\"handleChange\">\n          <mtd-radio-button :value=\"key\" v-for=\"(value, key) in markers\" :key=\"key\">\n            <svg\n              :viewBox=\"value.viewBox\"\n              style=\"width: 14px; height: 14px; vertical-align: middle\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path :d=\"value.path\" :transform=\"value.transform\"></path>\n            </svg>\n          </mtd-radio-button>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头大小\">\n        <mtd-slider :max=\"100\" :min=\"5\" v-model=\"arrowSize\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头位置(基于箭头大小×倍数)\">\n        <mtd-slider\n          :step=\"0.5\"\n          :marks=\"{ 0: 0, 6: 6 }\"\n          :max=\"6\"\n          :min=\"0\"\n          v-model=\"arrowPosition\"\n          size=\"small\"\n          @input=\"handleChange\"\n        />\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: 30,\n      arrowPosition: 1,\n      marker: 'star',\n      markers: {\n        star: {\n          viewBox: '0 -14 28 28',\n          size: 28,\n          path: 'M0,0 L10,4 L14,14 L18,4 L28,0 L18,-4 L14,-14 L10,-4 Z',\n        },\n        arrow: {\n          viewBox: '0 -8 15 15',\n          size: 15,\n          path: 'M 0,6 L 15,0 L 0,-6 A 12,12,0,0,1,0,6 Z',\n        },\n        pixelArrow: {\n          viewBox: '-15 -15 60 30',\n          size: 60,\n          transform: 'rotate(-90 15,-0.25)',\n          path: 'm34.536866,-3.255976l0,5.93163l-7.800999,0l0,5.931522l-7.800999,0l0,5.931631l-7.800927,-0.000001l0,-5.93163l-7.800999,0l0,-5.931522l-7.800928,0l0,-5.931631l-7.800999,0l0,-11.863207l7.800999,0l0,5.931576l7.800928,0l0,5.931631l7.800999,0l0,5.931631l7.800927,0l0,-5.931631l7.800999,0l0,-5.931631l7.800999,0l0,-5.931576l7.800999,0l0,11.863207l-7.800999,0l-0.000001,-0.000001z',\n        },\n        diamond: {\n          viewBox: '0 -620 980 1260',\n          size: 1260,\n          transform: 'rotate(-90 340,300)',\n          path: 'M1260.277155 354.45295a39.383661 39.383661 0 0 1-10.830507 26.780889l-590.754916 630.138578a38.635372 38.635372 0 0 1-57.106309 0l-590.754916-630.138578A39.383661 39.383661 0 0 1 0 354.45295a37.138792 37.138792 0 0 1 6.577071-20.479504l-0.590755-0.393837 196.918306-315.069288 0.590755 0.393836A38.950441 38.950441 0 0 1 236.301967 0h787.673221a38.950441 38.950441 0 0 1 32.80659 18.904157l0.590755-0.393836 196.918305 315.069288-0.590755 0.393837A37.138792 37.138792 0 0 1 1260.277155 354.45295z m-366.543734 39.383661l-157.534644 419.829827 393.836611-419.829827h-236.301967zM630.138577 872.348093L809.609921 393.836611h-358.942687zM366.543734 393.836611h-236.301967l393.836611 419.829827zM258.120515 78.767322l-147.688729 236.301967h182.818954l147.68873-236.301967H258.120515z m275.685627 0l-147.688729 236.301967H874.317276l-147.688729-236.301967h-192.66487z m468.350498 0H819.180151l147.688729 236.301967h183.134024z',\n        },\n      },\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 MtdvGraph({\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 = MtdvGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n      createDefs: (defs) => {\n        const currentMarker = this.markers[this.marker];\n        const markers = defs\n          .selectAll('marker')\n          .attr('viewBox', currentMarker.viewBox)\n          .attr('markerWidth', this.arrowSize)\n          .attr('markerHeight', this.arrowSize)\n          .attr('refX', this.arrowPosition * currentMarker.size)\n          .attr('xoverflow', null)\n          .attr('overflow', 'visible');\n        markers.selectAll('path').attr('d', currentMarker.path).attr('transform', currentMarker.transform);\n      },\n    });\n  },\n  methods: {\n    handleChange() {\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-radio-group v-model=\"marker\" @input=\"handleChange\">\n          <mtd-radio-button :value=\"key\" v-for=\"(value, key) in markers\" :key=\"key\">\n            <svg\n              :viewBox=\"value.viewBox\"\n              style=\"width: 14px; height: 14px; vertical-align: middle\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path :d=\"value.path\" :transform=\"value.transform\"></path>\n            </svg>\n          </mtd-radio-button>\n        </mtd-radio-group>\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头大小\">\n        <mtd-slider :max=\"100\" :min=\"5\" v-model=\"arrowSize\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"箭头位置(基于箭头大小×倍数)\">\n        <mtd-slider\n          :step=\"0.5\"\n          :marks=\"{ 0: 0, 6: 6 }\"\n          :max=\"6\"\n          :min=\"0\"\n          v-model=\"arrowPosition\"\n          size=\"small\"\n          @input=\"handleChange\"\n        />\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: 30,\n      arrowPosition: 1,\n      marker: 'star',\n      markers: {\n        star: {\n          viewBox: '0 -14 28 28',\n          size: 28,\n          path: 'M0,0 L10,4 L14,14 L18,4 L28,0 L18,-4 L14,-14 L10,-4 Z',\n        },\n        arrow: {\n          viewBox: '0 -8 15 15',\n          size: 15,\n          path: 'M 0,6 L 15,0 L 0,-6 A 12,12,0,0,1,0,6 Z',\n        },\n        pixelArrow: {\n          viewBox: '-15 -15 60 30',\n          size: 60,\n          transform: 'rotate(-90 15,-0.25)',\n          path: 'm34.536866,-3.255976l0,5.93163l-7.800999,0l0,5.931522l-7.800999,0l0,5.931631l-7.800927,-0.000001l0,-5.93163l-7.800999,0l0,-5.931522l-7.800928,0l0,-5.931631l-7.800999,0l0,-11.863207l7.800999,0l0,5.931576l7.800928,0l0,5.931631l7.800999,0l0,5.931631l7.800927,0l0,-5.931631l7.800999,0l0,-5.931631l7.800999,0l0,-5.931576l7.800999,0l0,11.863207l-7.800999,0l-0.000001,-0.000001z',\n        },\n        diamond: {\n          viewBox: '0 -620 980 1260',\n          size: 1260,\n          transform: 'rotate(-90 340,300)',\n          path: 'M1260.277155 354.45295a39.383661 39.383661 0 0 1-10.830507 26.780889l-590.754916 630.138578a38.635372 38.635372 0 0 1-57.106309 0l-590.754916-630.138578A39.383661 39.383661 0 0 1 0 354.45295a37.138792 37.138792 0 0 1 6.577071-20.479504l-0.590755-0.393837 196.918306-315.069288 0.590755 0.393836A38.950441 38.950441 0 0 1 236.301967 0h787.673221a38.950441 38.950441 0 0 1 32.80659 18.904157l0.590755-0.393836 196.918305 315.069288-0.590755 0.393837A37.138792 37.138792 0 0 1 1260.277155 354.45295z m-366.543734 39.383661l-157.534644 419.829827 393.836611-419.829827h-236.301967zM630.138577 872.348093L809.609921 393.836611h-358.942687zM366.543734 393.836611h-236.301967l393.836611 419.829827zM258.120515 78.767322l-147.688729 236.301967h182.818954l147.68873-236.301967H258.120515z m275.685627 0l-147.688729 236.301967H874.317276l-147.688729-236.301967h-192.66487z m468.350498 0H819.180151l147.688729 236.301967h183.134024z',\n        },\n      },\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 MtdvGraph({\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 = MtdvGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n      createDefs: (defs) => {\n        const currentMarker = this.markers[this.marker];\n        const markers = defs\n          .selectAll('marker')\n          .attr('viewBox', currentMarker.viewBox)\n          .attr('markerWidth', this.arrowSize)\n          .attr('markerHeight', this.arrowSize)\n          .attr('refX', this.arrowPosition * currentMarker.size)\n          .attr('xoverflow', null)\n          .attr('overflow', 'visible');\n        markers.selectAll('path').attr('d', currentMarker.path).attr('transform', currentMarker.transform);\n      },\n    });\n  },\n  methods: {\n    handleChange() {\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":"mtdv-graph/custom-styles/demo/StyleLinkColor.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/custom-styles/demo/StyleLinkColor.vue","order":2,"filename":"StyleLinkColor.vue","title":"自定义边颜色","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/customLinkColor.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: '#5b8ff9' },\n        { id: 'c', color: '#9661bc' },\n        { id: 'd', color: '#2FDD92' },\n        { id: 'e', color: '#f6bd16' },\n        { id: 'f', color: '#0E9AA7' },\n        { id: 'g', color: '#FD8C04' },\n        { id: 'h', color: '#78d3f8' },\n        { id: 'i', color: '#93ABD3' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkWidth: '8px' },\n        { source: 'a', color: '#9661bc', target: 'c', linkWidth: '8px' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkWidth: '8px' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkWidth: '8px' },\n        { source: 'a', color: '#78d3f8', target: 'h', linkWidth: '8px' },\n        { source: 'a', color: '#FD8C04', target: 'g', linkWidth: '8px' },\n        { source: 'a', color: '#93ABD3', target: 'i', linkWidth: '8px' },\n        { source: 'a', color: '#0E9AA7', target: 'f', linkWidth: '8px' },\n      ],\n    };\n    let linearGradients = null;\n    const graph = new MtdvGraph({\n      dom: this.$refs.graph,\n      data: graphData,\n      dragFixed: true,\n      d3,\n      drawLinkExtend(linksGroup, pathsGroup) {\n        const id = (d) => `linear-${d.source || d.source.id}-${d.target || d.target.id}`;\n        linearGradients = linksGroup\n          .append('linearGradient')\n          .attr('gradientUnits', 'userSpaceOnUse')\n          .attr('id', id)\n          .attr('gradientTransform', 'translate(0, 0)')\n          .attr('spreadMethod', 'pad')\n          .attr('x1', 0)\n          .attr('y1', 0)\n          .attr('x2', 0)\n          .attr('y2', 0)\n          .html(\n            (d) =>\n              `<stop offset=\"0\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"0.1\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"0.5\" stop-opacity=\"1\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"0.9\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"1\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>`\n          );\n        pathsGroup.style('stroke', (d) => `url(#${id(d)})`);\n      },\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 = MtdvGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n    graph.on(MtdvGraphUtil.Events.simulation.tick, () => {\n      linearGradients.each(function (d) {\n        if (d.target.x && d.target.y && d.source.x && d.source.y) {\n          const { x: x1, y: y1 } = d.target;\n          const { x: x2, y: y2 } = d.source;\n          const item = d3.select(this);\n          item.attr('x1', x1).attr('y1', y1).attr('x2', x2).attr('y2', y2);\n        }\n      });\n    });\n    async function animation() {\n      try {\n        linearGradients.attr('gradientTransform', (d) => {\n          if (d.target.x && d.target.y && d.source.x && d.source.y) {\n            const { x: x1, y: y1 } = d.target;\n            const { x: x2, y: y2 } = d.source;\n            return `translate(${(x1 - x2) * 0.8},${(y1 - y2) * 0.8})`;\n          }\n          return 'translate(0,0)';\n        });\n        graph.nodesGroup.select('.kg-force-node-entity').transition().duration(400).style('fill-opacity', 0).end();\n        await linearGradients.transition().duration(800).attr('gradientTransform', 'translate(0,0)').end();\n        graph.nodesGroup\n          .select('.kg-force-node-entity')\n          .transition()\n          .delay(1000)\n          .duration(200)\n          .style('fill-opacity', 0.4)\n          .end();\n        await linearGradients\n          .transition()\n          .delay(400)\n          .duration(800)\n          .attr('gradientTransform', (d) => {\n            if (d.target.x && d.target.y && d.source.x && d.source.y) {\n              const { x: x1, y: y1 } = d.target;\n              const { x: x2, y: y2 } = d.source;\n              return `translate(${-(x1 - x2) * 0.8},${-(y1 - y2) * 0.8})`;\n            }\n            return 'translate(0,0)';\n          })\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: 'StyleLinkColor',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [\n        { id: 'a', color: '#999' },\n        { id: 'b', color: '#5b8ff9' },\n        { id: 'c', color: '#9661bc' },\n        { id: 'd', color: '#2FDD92' },\n        { id: 'e', color: '#f6bd16' },\n        { id: 'f', color: '#0E9AA7' },\n        { id: 'g', color: '#FD8C04' },\n        { id: 'h', color: '#78d3f8' },\n        { id: 'i', color: '#93ABD3' },\n      ],\n      links: [\n        { source: 'a', color: '#5b8ff9', target: 'b', linkWidth: '8px' },\n        { source: 'a', color: '#9661bc', target: 'c', linkWidth: '8px' },\n        { source: 'a', color: '#2FDD92', target: 'd', linkWidth: '8px' },\n        { source: 'a', color: '#f6bd16', target: 'e', linkWidth: '8px' },\n        { source: 'a', color: '#78d3f8', target: 'h', linkWidth: '8px' },\n        { source: 'a', color: '#FD8C04', target: 'g', linkWidth: '8px' },\n        { source: 'a', color: '#93ABD3', target: 'i', linkWidth: '8px' },\n        { source: 'a', color: '#0E9AA7', target: 'f', linkWidth: '8px' },\n      ],\n    };\n    let linearGradients = null;\n    const graph = new MtdvGraph({\n      dom: this.$refs.graph,\n      data: graphData,\n      dragFixed: true,\n      d3,\n      drawLinkExtend(linksGroup, pathsGroup) {\n        const id = (d) => `linear-${d.source || d.source.id}-${d.target || d.target.id}`;\n        linearGradients = linksGroup\n          .append('linearGradient')\n          .attr('gradientUnits', 'userSpaceOnUse')\n          .attr('id', id)\n          .attr('gradientTransform', 'translate(0, 0)')\n          .attr('spreadMethod', 'pad')\n          .attr('x1', 0)\n          .attr('y1', 0)\n          .attr('x2', 0)\n          .attr('y2', 0)\n          .html(\n            (d) =>\n              `<stop offset=\"0\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"0.1\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"0.5\" stop-opacity=\"1\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"0.9\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>\n               <stop offset=\"1\" stop-opacity=\"0\" stop-color=\"${d.color}\"></stop>`\n          );\n        pathsGroup.style('stroke', (d) => `url(#${id(d)})`);\n      },\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 = MtdvGraphUtil.Forces.forceManyBody().strength(-800);\n          },\n        },\n      },\n    });\n    graph.on(MtdvGraphUtil.Events.simulation.tick, () => {\n      linearGradients.each(function (d) {\n        if (d.target.x && d.target.y && d.source.x && d.source.y) {\n          const { x: x1, y: y1 } = d.target;\n          const { x: x2, y: y2 } = d.source;\n          const item = d3.select(this);\n          item.attr('x1', x1).attr('y1', y1).attr('x2', x2).attr('y2', y2);\n        }\n      });\n    });\n    async function animation() {\n      try {\n        linearGradients.attr('gradientTransform', (d) => {\n          if (d.target.x && d.target.y && d.source.x && d.source.y) {\n            const { x: x1, y: y1 } = d.target;\n            const { x: x2, y: y2 } = d.source;\n            return `translate(${(x1 - x2) * 0.8},${(y1 - y2) * 0.8})`;\n          }\n          return 'translate(0,0)';\n        });\n        graph.nodesGroup.select('.kg-force-node-entity').transition().duration(400).style('fill-opacity', 0).end();\n        await linearGradients.transition().duration(800).attr('gradientTransform', 'translate(0,0)').end();\n        graph.nodesGroup\n          .select('.kg-force-node-entity')\n          .transition()\n          .delay(1000)\n          .duration(200)\n          .style('fill-opacity', 0.4)\n          .end();\n        await linearGradients\n          .transition()\n          .delay(400)\n          .duration(800)\n          .attr('gradientTransform', (d) => {\n            if (d.target.x && d.target.y && d.source.x && d.source.y) {\n              const { x: x1, y: y1 } = d.target;\n              const { x: x2, y: y2 } = d.source;\n              return `translate(${-(x1 - x2) * 0.8},${-(y1 - y2) * 0.8})`;\n            }\n            return 'translate(0,0)';\n          })\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":"mtdv-graph/custom-styles/demo/StyleLinkType.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/custom-styles/demo/StyleLinkType.vue","order":4,"filename":"StyleLinkType.vue","title":"自定义边类型","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/customLinkType.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst maxAngle = 8;\nexport default {\n  name: 'StyleLinkType',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'e' }, { id: 'c' }, { id: 'd' }, { id: 'f' }],\n      links: [\n        ...Array.from({ length: 30 }).map((_, i) => ({ source: 'b', target: 'c', id: `b-c-${i}`, scale: i })),\n        ...Array.from({ length: 3 }).map((_, i) => ({\n          source: 'a',\n          target: 'd',\n          id: `a-d-${i}`,\n          scale: 4 + 6 * Math.pow(i + 1, 2),\n          reverse: false,\n        })),\n        ...Array.from({ length: 3 }).map((_, i) => ({\n          source: 'a',\n          target: 'd',\n          id: `a-d-r-${i}`,\n          scale: 4 + 6 * Math.pow(i + 1, 2),\n          reverse: true,\n        })),\n      ],\n    };\n    const multiPathLinks = [\n      ...Array.from({ length: 3 }).map((_, i) => ({ source: 'e', target: 'f', id: `e-f-${i}` })),\n      ...Array.from({ length: 2 }).map((_, i) => ({ source: 'f', target: 'e', id: `f-e-${i}`, __backward: true })),\n    ];\n    const multiPathLinksMap = new Map();\n    prepareLinksMap(multiPathLinks);\n    graphData.links.push(...multiPathLinks);\n\n    const graph = new MtdvGraph({\n      dom: this.$refs.graph,\n      data: graphData,\n      showLinkArrow: true,\n      d3,\n      layout: {\n        type: 'rect',\n        options: {\n          columnN: 3,\n          rowN: 2,\n          xCenter: 0.5,\n          yCenter: 0.5,\n        },\n      },\n      getLinkPath(d) {\n        if (d.id.startsWith('a-d')) {\n          return getCustomPolyline(d);\n        } else if (d.id.startsWith('b-c')) {\n          return getCustomBezierPath(d);\n        } else if (d.id.startsWith('f-e') || d.id.startsWith('e-f')) {\n          return getMultiPath(d);\n        }\n      },\n    });\n\n    function getCustomPolyline(d) {\n      const {\n        source: { x: sx, y: sy },\n        target: { x: tx, y: ty },\n      } = d;\n      const getNextPoint = (x, y, dx, dy, reverse) =>\n        reverse\n          ? [\n              [x, y + dy],\n              [x + dx, y + dy],\n            ]\n          : [\n              [x + dx, y],\n              [x + dx, y + dy],\n            ];\n\n      const k = 1 / d.scale;\n      const dx = (tx - sx) * k;\n      const dy = (ty - sy) * k;\n      const driftX = (d.reverse ? -1 : 1) * 100 * k;\n      const driftY = -driftX;\n      const pathL = [];\n      let count = 0;\n      while (count < d.scale) {\n        if (count === d.scale - 1) {\n          pathL.push(...getNextPoint(...pathL[pathL.length - 1], dx - driftX, dy - driftY, d.reverse));\n        } else if (count === 0) {\n          pathL.push(...getNextPoint(sx, sy, dx + driftX, dy + driftY, d.reverse));\n        } else {\n          pathL.push(...getNextPoint(...pathL[pathL.length - 1], dx, dy, d.reverse));\n        }\n        count++;\n      }\n      const path = pathL.map(([x, y]) => `L${x} ${y}`).join(' ');\n      return `M${sx} ${sy} ${path}`;\n    }\n\n    function getCustomBezierPath(d) {\n      const {\n        source: { x: sx, y: sy },\n        target: { x: tx, y: ty },\n      } = d;\n      const k = -0.5 + d.scale / 25;\n      return `M${sx} ${sy} C${sx + (sx - tx) * k} ${(sy + ty) / 2} ${tx + (tx - sx) * k} ${(sy + ty) / 2} ${tx} ${ty}`;\n    }\n\n    function getMultiPath(d) {\n      let [sourceX, sourceY, targetX, targetY, sourceR, targetR] = [\n        d.source.x,\n        d.source.y,\n        d.target.x,\n        d.target.y,\n        MtdvGraphUtil.Constants.NodeRadiusDefault(d),\n        MtdvGraphUtil.Constants.NodeRadiusDefault(d),\n      ];\n      const { sqrt, sin, cos, PI, acos } = Math;\n      const [dy, dx] = [targetY - sourceY, targetX - sourceX];\n      let distance = sqrt(dy ** 2 + dx ** 2);\n\n      let reverse = d.__reverse;\n      const angle = (reverse ? -PI / 2 / maxAngle : PI / 2 / maxAngle) * d.__angle;\n\n      const cosRad = dx / distance;\n\n      let sourceRad, targetRad;\n      sourceRad = targetRad = acos(cosRad);\n\n      if (dy > 0) {\n        sourceRad = 2 * PI - sourceRad;\n        targetRad = 2 * PI - targetRad;\n      }\n      sourceRad = sourceRad + angle;\n      targetRad = targetRad - angle;\n\n      sourceX = sourceX + sourceR * cos(sourceRad);\n      sourceY = sourceY - sourceR * sin(sourceRad);\n\n      targetX = targetX - targetR * cos(targetRad);\n      targetY = targetY + targetR * sin(targetRad);\n\n      if (!d.__curved) {\n        return `M${sourceX},${sourceY}  L ${targetX},${targetY}`;\n      }\n\n      const sinAngle = 1.5 * sin(angle);\n      return `M${sourceX},${sourceY}  A${distance / sinAngle},${distance / sinAngle} 0 0,${\n        reverse ? '0' : '1'\n      } ${targetX},${targetY}`;\n    }\n\n    function prepareLinksMap(links) {\n      links.forEach((item) => {\n        const key = [item.source, item.target].sort((a, b) => (a > b ? 1 : -1)).join('_');\n        let value = multiPathLinksMap.get(key);\n        if (!value) {\n          value = [];\n          multiPathLinksMap.set(key, value);\n        }\n        value.push(item);\n      });\n      multiPathLinksMap.forEach((links) => {\n        const length = links.length;\n        const isOdd = links.length % 2 !== 0;\n        if (length === 1) {\n          links[0].__curved = false;\n        } else if (isOdd) {\n          const middle = (length - 1) / 2;\n          links.forEach((link, index) => {\n            link.__curved = index !== middle;\n            link.__angle = Math.abs(middle - index);\n            link.__reverse = link.__backward;\n            if (index > middle) {\n              link.__reverse = !link.__backward;\n            }\n            if (link.__angle > maxAngle) {\n              link.__angle = maxAngle;\n            }\n          });\n        } else {\n          const middle = length / 2;\n          links.forEach((link, index) => {\n            link.__curved = true;\n            link.__angle = middle - index;\n            if (index + 1 > middle) {\n              link.__reverse = !link.__backward;\n              link.__angle = index - middle + 1;\n            } else {\n              link.__reverse = link.__backward;\n              link.__angle = middle - index;\n            }\n            if (link.__angle > maxAngle) {\n              link.__angle = maxAngle;\n            }\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>\nconst maxAngle = 8;\nexport default {\n  name: 'StyleLinkType',\n  async mounted() {\n    await new Promise(setTimeout);\n    const graphData = {\n      nodes: [{ id: 'a' }, { id: 'b' }, { id: 'e' }, { id: 'c' }, { id: 'd' }, { id: 'f' }],\n      links: [\n        ...Array.from({ length: 30 }).map((_, i) => ({ source: 'b', target: 'c', id: `b-c-${i}`, scale: i })),\n        ...Array.from({ length: 3 }).map((_, i) => ({\n          source: 'a',\n          target: 'd',\n          id: `a-d-${i}`,\n          scale: 4 + 6 * Math.pow(i + 1, 2),\n          reverse: false,\n        })),\n        ...Array.from({ length: 3 }).map((_, i) => ({\n          source: 'a',\n          target: 'd',\n          id: `a-d-r-${i}`,\n          scale: 4 + 6 * Math.pow(i + 1, 2),\n          reverse: true,\n        })),\n      ],\n    };\n    const multiPathLinks = [\n      ...Array.from({ length: 3 }).map((_, i) => ({ source: 'e', target: 'f', id: `e-f-${i}` })),\n      ...Array.from({ length: 2 }).map((_, i) => ({ source: 'f', target: 'e', id: `f-e-${i}`, __backward: true })),\n    ];\n    const multiPathLinksMap = new Map();\n    prepareLinksMap(multiPathLinks);\n    graphData.links.push(...multiPathLinks);\n\n    const graph = new MtdvGraph({\n      dom: this.$refs.graph,\n      data: graphData,\n      showLinkArrow: true,\n      d3,\n      layout: {\n        type: 'rect',\n        options: {\n          columnN: 3,\n          rowN: 2,\n          xCenter: 0.5,\n          yCenter: 0.5,\n        },\n      },\n      getLinkPath(d) {\n        if (d.id.startsWith('a-d')) {\n          return getCustomPolyline(d);\n        } else if (d.id.startsWith('b-c')) {\n          return getCustomBezierPath(d);\n        } else if (d.id.startsWith('f-e') || d.id.startsWith('e-f')) {\n          return getMultiPath(d);\n        }\n      },\n    });\n\n    function getCustomPolyline(d) {\n      const {\n        source: { x: sx, y: sy },\n        target: { x: tx, y: ty },\n      } = d;\n      const getNextPoint = (x, y, dx, dy, reverse) =>\n        reverse\n          ? [\n              [x, y + dy],\n              [x + dx, y + dy],\n            ]\n          : [\n              [x + dx, y],\n              [x + dx, y + dy],\n            ];\n\n      const k = 1 / d.scale;\n      const dx = (tx - sx) * k;\n      const dy = (ty - sy) * k;\n      const driftX = (d.reverse ? -1 : 1) * 100 * k;\n      const driftY = -driftX;\n      const pathL = [];\n      let count = 0;\n      while (count < d.scale) {\n        if (count === d.scale - 1) {\n          pathL.push(...getNextPoint(...pathL[pathL.length - 1], dx - driftX, dy - driftY, d.reverse));\n        } else if (count === 0) {\n          pathL.push(...getNextPoint(sx, sy, dx + driftX, dy + driftY, d.reverse));\n        } else {\n          pathL.push(...getNextPoint(...pathL[pathL.length - 1], dx, dy, d.reverse));\n        }\n        count++;\n      }\n      const path = pathL.map(([x, y]) => `L${x} ${y}`).join(' ');\n      return `M${sx} ${sy} ${path}`;\n    }\n\n    function getCustomBezierPath(d) {\n      const {\n        source: { x: sx, y: sy },\n        target: { x: tx, y: ty },\n      } = d;\n      const k = -0.5 + d.scale / 25;\n      return `M${sx} ${sy} C${sx + (sx - tx) * k} ${(sy + ty) / 2} ${tx + (tx - sx) * k} ${(sy + ty) / 2} ${tx} ${ty}`;\n    }\n\n    function getMultiPath(d) {\n      let [sourceX, sourceY, targetX, targetY, sourceR, targetR] = [\n        d.source.x,\n        d.source.y,\n        d.target.x,\n        d.target.y,\n        MtdvGraphUtil.Constants.NodeRadiusDefault(d),\n        MtdvGraphUtil.Constants.NodeRadiusDefault(d),\n      ];\n      const { sqrt, sin, cos, PI, acos } = Math;\n      const [dy, dx] = [targetY - sourceY, targetX - sourceX];\n      let distance = sqrt(dy ** 2 + dx ** 2);\n\n      let reverse = d.__reverse;\n      const angle = (reverse ? -PI / 2 / maxAngle : PI / 2 / maxAngle) * d.__angle;\n\n      const cosRad = dx / distance;\n\n      let sourceRad, targetRad;\n      sourceRad = targetRad = acos(cosRad);\n\n      if (dy > 0) {\n        sourceRad = 2 * PI - sourceRad;\n        targetRad = 2 * PI - targetRad;\n      }\n      sourceRad = sourceRad + angle;\n      targetRad = targetRad - angle;\n\n      sourceX = sourceX + sourceR * cos(sourceRad);\n      sourceY = sourceY - sourceR * sin(sourceRad);\n\n      targetX = targetX - targetR * cos(targetRad);\n      targetY = targetY + targetR * sin(targetRad);\n\n      if (!d.__curved) {\n        return `M${sourceX},${sourceY}  L ${targetX},${targetY}`;\n      }\n\n      const sinAngle = 1.5 * sin(angle);\n      return `M${sourceX},${sourceY}  A${distance / sinAngle},${distance / sinAngle} 0 0,${\n        reverse ? '0' : '1'\n      } ${targetX},${targetY}`;\n    }\n\n    function prepareLinksMap(links) {\n      links.forEach((item) => {\n        const key = [item.source, item.target].sort((a, b) => (a > b ? 1 : -1)).join('_');\n        let value = multiPathLinksMap.get(key);\n        if (!value) {\n          value = [];\n          multiPathLinksMap.set(key, value);\n        }\n        value.push(item);\n      });\n      multiPathLinksMap.forEach((links) => {\n        const length = links.length;\n        const isOdd = links.length % 2 !== 0;\n        if (length === 1) {\n          links[0].__curved = false;\n        } else if (isOdd) {\n          const middle = (length - 1) / 2;\n          links.forEach((link, index) => {\n            link.__curved = index !== middle;\n            link.__angle = Math.abs(middle - index);\n            link.__reverse = link.__backward;\n            if (index > middle) {\n              link.__reverse = !link.__backward;\n            }\n            if (link.__angle > maxAngle) {\n              link.__angle = maxAngle;\n            }\n          });\n        } else {\n          const middle = length / 2;\n          links.forEach((link, index) => {\n            link.__curved = true;\n            link.__angle = middle - index;\n            if (index + 1 > middle) {\n              link.__reverse = !link.__backward;\n              link.__angle = index - middle + 1;\n            } else {\n              link.__reverse = link.__backward;\n              link.__angle = middle - index;\n            }\n            if (link.__angle > maxAngle) {\n              link.__angle = maxAngle;\n            }\n          });\n        }\n      });\n    }\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"mtdv-graph/custom-styles/demo/StyleNodeText.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/custom-styles/demo/StyleNodeText.vue","order":0,"filename":"StyleNodeText.vue","title":"自定义节点文字","screenshot":"https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/picture/docs/customNodeText.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 MtdvGraph({\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 MtdvGraph({\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":"mtdv-graph/layout/demo/LayoutCluster.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.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 MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.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":"mtdv-graph/layout/demo/LayoutForce.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.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 MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.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":"mtdv-graph/layout/demo/LayoutLayer.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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(MtdvGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      const graph = new MtdvGraph({\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(MtdvGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      const graph = new MtdvGraph({\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":"mtdv-graph/layout/demo/LayoutRadial.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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      maxRadius: 360,\n    };\n  },\n  methods: {\n    initGraph() {\n      const { width, height } = this.$refs.graph.getBoundingClientRect();\n      this.maxRadius = Math.min(width / 2 - 40, height / 2 - 40, this.maxRadius);\n      this.$graph = new MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.noEdges,\n        d3: d3,\n        layout: {\n          type: 'radial',\n          options: {\n            force: (forceObj) => {\n              forceObj.forceCollide.radius(12);\n              forceObj.forceRadial.radius(this.maxRadius).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(this.maxRadius).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      maxRadius: 360,\n    };\n  },\n  methods: {\n    initGraph() {\n      const { width, height } = this.$refs.graph.getBoundingClientRect();\n      this.maxRadius = Math.min(width / 2 - 40, height / 2 - 40, this.maxRadius);\n      this.$graph = new MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.noEdges,\n        d3: d3,\n        layout: {\n          type: 'radial',\n          options: {\n            force: (forceObj) => {\n              forceObj.forceCollide.radius(12);\n              forceObj.forceRadial.radius(this.maxRadius).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(this.maxRadius).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":"mtdv-graph/layout/demo/LayoutRect.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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=\"100\" v-model=\"x\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局垂直偏移\">\n        <mtd-slider :min=\"0\" :max=\"100\" v-model=\"y\" 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      x: 0,\n      y: 0,\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 MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.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        x: this.x,\n        y: this.y,\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=\"100\" v-model=\"x\" size=\"small\" @input=\"handleChange\" />\n      </ControlPanelItem>\n      <ControlPanelItem title=\"布局垂直偏移\">\n        <mtd-slider :min=\"0\" :max=\"100\" v-model=\"y\" 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      x: 0,\n      y: 0,\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 MtdvGraph({\n        dom: this.$refs.graph,\n        data: MtdvGraphData.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        x: this.x,\n        y: this.y,\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"},{"relativePath":"mtdv-graph/layout/demo/LayoutRing.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 { width, height } = this.$refs.graph.getBoundingClientRect();\n      const maxRadius = Math.min(width / 2 - 30, height / 2 - 30, 360);\n      const root = d3.hierarchy(MtdvGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      root.centerNode = true;\n      root.radius = 30;\n      root.name = 'Node';\n      root.color = '#347BED';\n      root.textPlacement = 'center';\n      new MtdvGraph({\n        dom: this.$refs.graph,\n        data: { nodes, links },\n        d3,\n        cloneData: false,\n        layout: {\n          type: 'ring',\n          options: {\n            root: ['flare'],\n            radius: maxRadius,\n          },\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 { width, height } = this.$refs.graph.getBoundingClientRect();\n      const maxRadius = Math.min(width / 2 - 30, height / 2 - 30, 360);\n      const root = d3.hierarchy(MtdvGraphData.tree);\n      const links = root.links();\n      const nodes = root.descendants();\n      nodes.forEach((node) => (node.id = node.data.name));\n      root.centerNode = true;\n      root.radius = 30;\n      root.name = 'Node';\n      root.color = '#347BED';\n      root.textPlacement = 'center';\n      new MtdvGraph({\n        dom: this.$refs.graph,\n        data: { nodes, links },\n        d3,\n        cloneData: false,\n        layout: {\n          type: 'ring',\n          options: {\n            root: ['flare'],\n            radius: maxRadius,\n          },\n        },\n      });\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.initGraph();\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"mtdv-graph/plugins/demo/BezierCurveControllerDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\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 MtdvGraph({\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":"mtdv-graph/plugins/demo/ColorPaletteDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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=\"colorPalette\" @change=\"changeColorPalette\" style=\"width: 100%\">\n        <mtd-option v-for=\"(item, index) in options\" :key=\"index\" :label=\"item.label\" :value=\"item.value\">\n          <div>{{ item.label }}</div>\n          <div class=\"color-palette\">\n            <span\n              class=\"color-block\"\n              v-for=\"(item, index) in colors[item.value]\"\n              :key=\"index\"\n              :style=\"{ background: item }\"\n            ></span>\n          </div>\n        </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      colorPalette: 'colorMTDV',\n      colors: MtdvGraphUtil.Constants.colorPalette,\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 MtdvGraph({\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 = MtdvGraphUtil.Constants.colorPalette[this.colorPalette];\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\n.color-palette {\n  display: flex;\n}\n\n.color-palette .color-block {\n  margin-bottom: 10px;\n  width: 10px;\n  height: 20px;\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=\"colorPalette\" @change=\"changeColorPalette\" style=\"width: 100%\">\n        <mtd-option v-for=\"(item, index) in options\" :key=\"index\" :label=\"item.label\" :value=\"item.value\">\n          <div>{{ item.label }}</div>\n          <div class=\"color-palette\">\n            <span\n              class=\"color-block\"\n              v-for=\"(item, index) in colors[item.value]\"\n              :key=\"index\"\n              :style=\"{ background: item }\"\n            ></span>\n          </div>\n        </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      colorPalette: 'colorMTDV',\n      colors: MtdvGraphUtil.Constants.colorPalette,\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 MtdvGraph({\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 = MtdvGraphUtil.Constants.colorPalette[this.colorPalette];\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\n.color-palette {\n  display: flex;\n}\n\n.color-palette .color-block {\n  margin-bottom: 10px;\n  width: 10px;\n  height: 20px;\n}\n</style>\n"},{"relativePath":"mtdv-graph/plugins/demo/DynamicLoadDataDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\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 MtdvGraph({\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":"mtdv-graph/plugins/demo/HighlightDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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(MtdvGraphData.tree);\n    const links = root.links();\n    const nodes = root.descendants();\n    nodes.forEach((node) => (node.id = node.data.name));\n    const graph = new MtdvGraph({\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(MtdvGraphData.tree);\n    const links = root.links();\n    const nodes = root.descendants();\n    nodes.forEach((node) => (node.id = node.data.name));\n    const graph = new MtdvGraph({\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":"mtdv-graph/plugins/demo/OcclusionDetectionDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\n      dom: this.$refs.graph,\n      data: MtdvGraphData.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 MtdvGraph({\n      dom: this.$refs.graph,\n      data: MtdvGraphData.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":"mtdv-graph/plugins/demo/RectSelectionDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\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 MtdvGraphUtil.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 MtdvGraph({\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 MtdvGraphUtil.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":"mtdv-graph/styles/demo/EventDemo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n    });\n    graph.eventEmitter.on(MtdvGraphUtil.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 MtdvGraph({\n      dom: this.$refs.graph,\n      data: graphData,\n      d3,\n    });\n    graph.eventEmitter.on(MtdvGraphUtil.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":"mtdv-graph/styles/demo/StyleLinkArrow.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\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 = MtdvGraphUtil.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 MtdvGraph({\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 = MtdvGraphUtil.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":"mtdv-graph/styles/demo/StyleLinkConfig.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\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=\"less\" 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 MtdvGraph({\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=\"less\" 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":"mtdv-graph/styles/demo/StyleLinkType.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\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 MtdvGraph({\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":"mtdv-graph/styles/demo/StyleNodeConfig.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph/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 MtdvGraph({\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 MtdvGraph({\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":"mtdv-graph-flow/behavior/demo/contextMenuGraph.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/behavior/demo/contextMenuGraph.vue","order":1,"filename":"contextMenuGraph.vue","title":"节点右键菜单","screenshot":"https://s3plus.sankuai.com/picture-online/docs/context-menu-graph.png","source":"<template>\n  <div class=\"context-menu-graph\">\n    <div class=\"graph-container\" ref=\"graph\" @contextmenu.prevent></div>\n    <div class=\"contextMenu\" ref=\"contextMenuRef\" @contextmenu.prevent v-if=\"show\">\n      <div\n        v-for=\"menuItem in menuItems\"\n        :key=\"menuItem.name\"\n        class=\"menuItem\"\n        :class=\"{ disabled: menuItem.disabled }\"\n        @click=\"onItemClick(menuItem)\"\n      >\n        <i :class=\"'iconfont ' + menuItem.icon + ' icon'\"></i>\n        {{ menuItem.name }}\n      </div>\n    </div>\n    <mtd-modal v-model=\"visible\" title=\"节点配置\" width=\"20%\" :closable=\"false\">\n      <div class=\"modal-container\">\n        <mtd-form :model=\"newExpForm\" ref=\"newFormRef\" class=\"create-form\" label-position=\"top\">\n          <mtd-form-item\n            label=\"节点名称名称\"\n            prop=\"name\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.name\" class=\"create-input\" placeholder=\"请输入节点名称\"> </mtd-input>\n          </mtd-form-item>\n          <mtd-form-item\n            label=\"节点类型\"\n            prop=\"type\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.type\" class=\"create-input\" placeholder=\"请输入节点类型\"> </mtd-input>\n          </mtd-form-item>\n        </mtd-form>\n      </div>\n      <div slot=\"footer\" class=\"exp-create-foot\">\n        <mtd-button class=\"cancel-text\" @click=\"cancel\">取消</mtd-button>\n        <mtd-button type=\"primary\" @click=\"submit\">确定</mtd-button>\n      </div>\n    </mtd-modal>\n  </div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: 'node1',\n      inputs: [[0.5, 0]],\n      outputs: [\n        [0.5, 1],\n        [1, 0.5],\n      ],\n      title: '单元测试',\n      x: 100,\n      y: 100,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      title: '静态代码扫描',\n      x: 100,\n      y: 300,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      title: 'plus构建-线下',\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n      x: 100,\n      y: 500,\n    },\n    {\n      id: 'node4',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '骨干部署',\n      x: 400,\n      y: 100,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node5',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '接口测试',\n      x: 400,\n      y: 300,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '失败',\n        statusFillColor: '#FA4B48',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node6',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '骨干验收',\n      x: 400,\n      y: 500,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '未运行',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node7',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '代码审核',\n      x: 700,\n      y: 100,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node8',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: 'plus构建-线上',\n      x: 700,\n      y: 300,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node2',\n      target: 'node3',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node1',\n      target: 'node4',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node1',\n      target: 'node5',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node1',\n      target: 'node6',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node4',\n      target: 'node7',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node4',\n      target: 'node8',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n    },\n  ],\n};\n\nexport default {\n  name: 'contextMenuGraph',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n      show: false,\n      rightClickItem: {},\n      menuItems: [],\n      visible: false,\n      newExpForm: {\n        name: '',\n        type: '',\n        status: '',\n      },\n      currentNode: '',\n    };\n  },\n  computed: {\n    position() {\n      return {\n        x: this.rightClickItem ? this.rightClickItem.x : 0,\n        y: this.rightClickItem ? this.rightClickItem.y : 0,\n      };\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.handleGraphEvent();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\n          orientation: 'horizontal',\n          defaultEdge: {\n            style: { endArrow: true },\n          },\n          showTooltip: true,\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    onItemClick(menuItem) {\n      this.rightItemClicked({ name: menuItem.name, rightClickItem: this.rightClickItem });\n      this.closeContextMenu();\n    },\n    closeContextMenu() {\n      this.show = false;\n    },\n    rightItemClicked(e) {\n      const id = e.rightClickItem.id;\n      // 节点的右键操作\n      if (e.rightClickItem.type === 'node') {\n        if (e.name === '删除节点') {\n          this.deleteNode(id);\n        } else if (e.name === '添加节点') {\n          this.addNode(id);\n        }\n        // 边的右键操作\n      } else if (e.rightClickItem.type === 'edge') {\n        this.deleteEdge(e);\n      }\n    },\n    deleteEdge(e) {\n      const index = graphData.edges.findIndex((edge) => {\n        return edge.source === e.rightClickItem.source && edge.target === e.rightClickItem.target;\n      });\n      const edgeId = graphData.edges[index].edgeId;\n      graphData.edges.splice(index, 1);\n      this.changeData(graphData);\n    },\n    deleteNode(id) {\n      const index = this.graphData.nodes.findIndex((node) => node.id === id);\n      // 删除节点\n      this.graphData.nodes.splice(index, 1);\n\n      // 删除跟此节点有关的所有连线\n      this.graphData.edges = graphData.edges.filter((edge) => {\n        return edge.source !== id && edge.target !== id;\n      });\n      this.changeData(this.graphData);\n    },\n    changeData(data) {\n      this.graph.changeData(data);\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        this.closeContextMenu();\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        this.handleNodeRightClick(e);\n        this.openContextMenu('node', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        this.handleEdgeRightClick(e);\n        this.openContextMenu('edge', e);\n      });\n    },\n    openContextMenu(type, e) {\n      this.rightClickItem = {\n        x: e.event.canvasX,\n        y: e.event.canvasY,\n        id: e.model.id,\n        type,\n      };\n      if (type === 'edge') {\n        this.rightClickItem.source = e.model.source;\n        this.rightClickItem.target = e.model.target;\n      }\n      this.show = true;\n      this.updatePosition();\n    },\n    handleEdgeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '删除',\n          disabled: false,\n          icon: 'iconcontextmenu-node-delete',\n        },\n      ];\n    },\n    handleNodeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '添加节点',\n          disabled: false,\n          type: 'copyNode',\n          icon: 'iconcontextmenu-node-copy',\n        },\n        {\n          name: '删除节点',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconcontextmenu-node-delete',\n        },\n        {\n          name: '重新运行',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconedit1',\n        },\n      ];\n    },\n    updatePosition() {\n      this.$nextTick(() => {\n        const contextMenu = this.$refs.contextMenuRef;\n        if (contextMenu) {\n          let parent = contextMenu.parentElement.parentElement;\n          const parentHeight = parent.clientHeight;\n          const parentPaddingRight = parseInt(window.getComputedStyle(parent).paddingRight);\n          const parentWidth = parent.clientWidth - parentPaddingRight;\n\n          const x = this.rightClickItem.x;\n          const y = this.rightClickItem.y;\n\n          if (x + contextMenu.clientWidth > parentWidth) {\n            contextMenu.style.right = `${parentWidth - x + parentPaddingRight}px`;\n            contextMenu.style.left = 'auto';\n          } else {\n            contextMenu.style.left = `${x}px`;\n            contextMenu.style.right = 'auto';\n          }\n          if (y + contextMenu.clientHeight > parentHeight) {\n            contextMenu.style.bottom = `${parentHeight - y}px`;\n            contextMenu.style.top = 'auto';\n          } else {\n            contextMenu.style.top = `${y}px`;\n            contextMenu.style.bottom = 'auto';\n          }\n        }\n      });\n    },\n    addNode(id) {\n      this.currentNode = id;\n      this.visible = true;\n    },\n    submit() {\n      const currentNodeData = this.graphData.nodes.filter((node) => node.id === this.currentNode)[0];\n      const newNode = {\n        id: 'node' + this.graphData.nodes.length + 1,\n        title: this.newExpForm.name,\n        x: currentNodeData.x + 300,\n        y: currentNodeData.y,\n        baseNodeCfg: {\n          subTitle: '详情  制品',\n          status: 'special',\n          statusDesc: '失败',\n          statusFillColor: '#FA4B48',\n          panels: [\n            {\n              title: '用户数',\n              value: '234055',\n            },\n            {\n              title: '用户占比',\n              value: '34%',\n            },\n          ],\n        },\n      };\n      const newEdge = {\n        type: 'basePolyLine',\n        source: this.currentNode,\n        target: 'node' + this.graphData.nodes.length + 1,\n      };\n      this.graphData.nodes.push(newNode);\n      this.graphData.edges.push(newEdge);\n      this.changeData(this.graphData);\n      this.cancel();\n    },\n    cancel() {\n      this.visible = false;\n      this.newExpForm = {\n        name: '',\n        type: '',\n        status: '',\n      };\n    },\n  },\n};\n</script>\n\n<style>\n.context-menu-graph {\n  height: 100%;\n  width: 100%;\n}\n.context-menu-graph .g6-component-tooltip {\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #545454;\n  background-color: rgba(255, 255, 255, 0.9);\n  padding: 10px 8px;\n  box-shadow: #eeeeee 0 0 10px;\n}\n\n.context-menu-graph .contextMenu {\n  position: absolute;\n  padding: 4px 0;\n  background-color: white;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n\n.context-menu-graph .menuItem {\n  width: 160px;\n  height: 32px;\n  color: rgba(0, 0, 0, 0.7);\n  font-size: 16px;\n  line-height: 32px;\n  vertical-align: middle;\n  user-select: none;\n}\n\n.context-menu-graph .menuItem i {\n  width: 15px;\n  height: 15px;\n  padding: 0px 8px;\n}\n\n.context-menu-graph .menuItem:hover {\n  background-color: #f5f5f5;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"context-menu-graph\">\n    <div class=\"graph-container\" ref=\"graph\" @contextmenu.prevent></div>\n    <div class=\"contextMenu\" ref=\"contextMenuRef\" @contextmenu.prevent v-if=\"show\">\n      <div\n        v-for=\"menuItem in menuItems\"\n        :key=\"menuItem.name\"\n        class=\"menuItem\"\n        :class=\"{ disabled: menuItem.disabled }\"\n        @click=\"onItemClick(menuItem)\"\n      >\n        <i :class=\"'iconfont ' + menuItem.icon + ' icon'\"></i>\n        {{ menuItem.name }}\n      </div>\n    </div>\n    <mtd-modal v-model=\"visible\" title=\"节点配置\" width=\"20%\" :closable=\"false\">\n      <div class=\"modal-container\">\n        <mtd-form :model=\"newExpForm\" ref=\"newFormRef\" class=\"create-form\" label-position=\"top\">\n          <mtd-form-item\n            label=\"节点名称名称\"\n            prop=\"name\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.name\" class=\"create-input\" placeholder=\"请输入节点名称\"> </mtd-input>\n          </mtd-form-item>\n          <mtd-form-item\n            label=\"节点类型\"\n            prop=\"type\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.type\" class=\"create-input\" placeholder=\"请输入节点类型\"> </mtd-input>\n          </mtd-form-item>\n        </mtd-form>\n      </div>\n      <div slot=\"footer\" class=\"exp-create-foot\">\n        <mtd-button class=\"cancel-text\" @click=\"cancel\">取消</mtd-button>\n        <mtd-button type=\"primary\" @click=\"submit\">确定</mtd-button>\n      </div>\n    </mtd-modal>\n  </div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: 'node1',\n      inputs: [[0.5, 0]],\n      outputs: [\n        [0.5, 1],\n        [1, 0.5],\n      ],\n      title: '单元测试',\n      x: 100,\n      y: 100,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      title: '静态代码扫描',\n      x: 100,\n      y: 300,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      title: 'plus构建-线下',\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n      x: 100,\n      y: 500,\n    },\n    {\n      id: 'node4',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '骨干部署',\n      x: 400,\n      y: 100,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node5',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '接口测试',\n      x: 400,\n      y: 300,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '失败',\n        statusFillColor: '#FA4B48',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node6',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '骨干验收',\n      x: 400,\n      y: 500,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '未运行',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node7',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '代码审核',\n      x: 700,\n      y: 100,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      id: 'node8',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: 'plus构建-线上',\n      x: 700,\n      y: 300,\n      baseNodeCfg: {\n        subTitle: '详情  制品',\n        status: 'special',\n        statusDesc: '成功',\n        statusFillColor: '#00A85A',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node2',\n      target: 'node3',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node1',\n      target: 'node4',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node1',\n      target: 'node5',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node1',\n      target: 'node6',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node4',\n      target: 'node7',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n    },\n    {\n      source: 'node4',\n      target: 'node8',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n    },\n  ],\n};\n\nexport default {\n  name: 'contextMenuGraph',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n      graphData,\n      show: false,\n      rightClickItem: {},\n      menuItems: [],\n      visible: false,\n      newExpForm: {\n        name: '',\n        type: '',\n        status: '',\n      },\n      currentNode: '',\n    };\n  },\n  computed: {\n    position() {\n      return {\n        x: this.rightClickItem ? this.rightClickItem.x : 0,\n        y: this.rightClickItem ? this.rightClickItem.y : 0,\n      };\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.handleGraphEvent();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\n          orientation: 'horizontal',\n          defaultEdge: {\n            style: { endArrow: true },\n          },\n          showTooltip: true,\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    onItemClick(menuItem) {\n      this.rightItemClicked({ name: menuItem.name, rightClickItem: this.rightClickItem });\n      this.closeContextMenu();\n    },\n    closeContextMenu() {\n      this.show = false;\n    },\n    rightItemClicked(e) {\n      const id = e.rightClickItem.id;\n      // 节点的右键操作\n      if (e.rightClickItem.type === 'node') {\n        if (e.name === '删除节点') {\n          this.deleteNode(id);\n        } else if (e.name === '添加节点') {\n          this.addNode(id);\n        }\n        // 边的右键操作\n      } else if (e.rightClickItem.type === 'edge') {\n        this.deleteEdge(e);\n      }\n    },\n    deleteEdge(e) {\n      const index = graphData.edges.findIndex((edge) => {\n        return edge.source === e.rightClickItem.source && edge.target === e.rightClickItem.target;\n      });\n      const edgeId = graphData.edges[index].edgeId;\n      graphData.edges.splice(index, 1);\n      this.changeData(graphData);\n    },\n    deleteNode(id) {\n      const index = this.graphData.nodes.findIndex((node) => node.id === id);\n      // 删除节点\n      this.graphData.nodes.splice(index, 1);\n\n      // 删除跟此节点有关的所有连线\n      this.graphData.edges = graphData.edges.filter((edge) => {\n        return edge.source !== id && edge.target !== id;\n      });\n      this.changeData(this.graphData);\n    },\n    changeData(data) {\n      this.graph.changeData(data);\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        this.closeContextMenu();\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        this.handleNodeRightClick(e);\n        this.openContextMenu('node', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        this.handleEdgeRightClick(e);\n        this.openContextMenu('edge', e);\n      });\n    },\n    openContextMenu(type, e) {\n      this.rightClickItem = {\n        x: e.event.canvasX,\n        y: e.event.canvasY,\n        id: e.model.id,\n        type,\n      };\n      if (type === 'edge') {\n        this.rightClickItem.source = e.model.source;\n        this.rightClickItem.target = e.model.target;\n      }\n      this.show = true;\n      this.updatePosition();\n    },\n    handleEdgeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '删除',\n          disabled: false,\n          icon: 'iconcontextmenu-node-delete',\n        },\n      ];\n    },\n    handleNodeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '添加节点',\n          disabled: false,\n          type: 'copyNode',\n          icon: 'iconcontextmenu-node-copy',\n        },\n        {\n          name: '删除节点',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconcontextmenu-node-delete',\n        },\n        {\n          name: '重新运行',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconedit1',\n        },\n      ];\n    },\n    updatePosition() {\n      this.$nextTick(() => {\n        const contextMenu = this.$refs.contextMenuRef;\n        if (contextMenu) {\n          let parent = contextMenu.parentElement.parentElement;\n          const parentHeight = parent.clientHeight;\n          const parentPaddingRight = parseInt(window.getComputedStyle(parent).paddingRight);\n          const parentWidth = parent.clientWidth - parentPaddingRight;\n\n          const x = this.rightClickItem.x;\n          const y = this.rightClickItem.y;\n\n          if (x + contextMenu.clientWidth > parentWidth) {\n            contextMenu.style.right = `${parentWidth - x + parentPaddingRight}px`;\n            contextMenu.style.left = 'auto';\n          } else {\n            contextMenu.style.left = `${x}px`;\n            contextMenu.style.right = 'auto';\n          }\n          if (y + contextMenu.clientHeight > parentHeight) {\n            contextMenu.style.bottom = `${parentHeight - y}px`;\n            contextMenu.style.top = 'auto';\n          } else {\n            contextMenu.style.top = `${y}px`;\n            contextMenu.style.bottom = 'auto';\n          }\n        }\n      });\n    },\n    addNode(id) {\n      this.currentNode = id;\n      this.visible = true;\n    },\n    submit() {\n      const currentNodeData = this.graphData.nodes.filter((node) => node.id === this.currentNode)[0];\n      const newNode = {\n        id: 'node' + this.graphData.nodes.length + 1,\n        title: this.newExpForm.name,\n        x: currentNodeData.x + 300,\n        y: currentNodeData.y,\n        baseNodeCfg: {\n          subTitle: '详情  制品',\n          status: 'special',\n          statusDesc: '失败',\n          statusFillColor: '#FA4B48',\n          panels: [\n            {\n              title: '用户数',\n              value: '234055',\n            },\n            {\n              title: '用户占比',\n              value: '34%',\n            },\n          ],\n        },\n      };\n      const newEdge = {\n        type: 'basePolyLine',\n        source: this.currentNode,\n        target: 'node' + this.graphData.nodes.length + 1,\n      };\n      this.graphData.nodes.push(newNode);\n      this.graphData.edges.push(newEdge);\n      this.changeData(this.graphData);\n      this.cancel();\n    },\n    cancel() {\n      this.visible = false;\n      this.newExpForm = {\n        name: '',\n        type: '',\n        status: '',\n      };\n    },\n  },\n};\n</script>\n\n<style>\n.context-menu-graph {\n  height: 100%;\n  width: 100%;\n}\n.context-menu-graph .g6-component-tooltip {\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #545454;\n  background-color: rgba(255, 255, 255, 0.9);\n  padding: 10px 8px;\n  box-shadow: #eeeeee 0 0 10px;\n}\n\n.context-menu-graph .contextMenu {\n  position: absolute;\n  padding: 4px 0;\n  background-color: white;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n\n.context-menu-graph .menuItem {\n  width: 160px;\n  height: 32px;\n  color: rgba(0, 0, 0, 0.7);\n  font-size: 16px;\n  line-height: 32px;\n  vertical-align: middle;\n  user-select: none;\n}\n\n.context-menu-graph .menuItem i {\n  width: 15px;\n  height: 15px;\n  padding: 0px 8px;\n}\n\n.context-menu-graph .menuItem:hover {\n  background-color: #f5f5f5;\n}\n</style>\n"},{"relativePath":"mtdv-graph-flow/behavior/demo/customTree.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/behavior/demo/customTree.vue","order":3,"filename":"customTree.vue","title":"自定义树图节点折叠","screenshot":"https://s3plus.sankuai.com/picture-online/docs/customTreeNode.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graphDom\"></div>\n</template>\n\n<script>\n// 色值集合\nconst colors = {\n  B: '#3B8DF7',\n  R: '#F46649',\n  Y: '#EEBC20',\n  G: '#00B365',\n  DI: '#A7A7A7',\n  GY: '#CED4D9',\n};\nconst util = {\n  transformGraphData(data) {\n    const traverse = (item, isRoot = false) => {\n      const { expKey, expName, children } = item || {};\n      return {\n        ...item,\n        isRoot,\n        id: expKey,\n        label: expName,\n        collapsed: false,\n        children: children && children.length > 0 ? children.map((e) => traverse(e)) : [],\n      };\n    };\n\n    return traverse(data, true);\n  },\n  clipText(text, maxLen) {\n    if (typeof text !== 'string') {\n      return '-';\n    }\n\n    return text.length > maxLen ? `${text.substring(0, maxLen)}...` : text;\n  },\n};\n\n// 自定义节点配置\nconst nodeConfig = {\n  nodeType: 'flow-rect',\n  extendedNodeName: 'rect',\n  draw(cfg, group) {\n    const {\n      id,\n      expRatio,\n      expName,\n      expStatus,\n      expStatusCode,\n      parentStrategyName,\n      isRoot,\n      collapsed,\n      layerName,\n      children,\n      actualGlobalExpRatio,\n      expectedGlobalExpRatio,\n    } = cfg;\n    // 根节点没有分组信息\n    const ignoreLines = isRoot ? 1 : 0;\n    const safePadding = 4;\n    const textPadding = 25;\n    const titlePadding = 20;\n    const statusRectConfig = {\n      width: 40,\n      height: 20,\n    };\n    // 自定义卡片配置\n    const defaultCardNodeConfig = {\n      width: 210,\n      height: 180 - textPadding * ignoreLines,\n      lineWidth: 1,\n      fontSize: 12,\n      fill: '#FFFFFF',\n      radius: 4,\n      stroke: '#000000',\n      opacity: 1,\n    };\n    const nodeOrigin = {\n      x: -defaultCardNodeConfig.width / 2,\n      y: -defaultCardNodeConfig.height / 2,\n    };\n\n    const textConfig = {\n      textAlign: 'left',\n      textBaseline: 'bottom',\n    };\n\n    // 卡片\n    const rect = group.addShape('rect', {\n      attrs: {\n        x: nodeOrigin.x,\n        y: nodeOrigin.y,\n        ...defaultCardNodeConfig,\n      },\n    });\n\n    // 实验名\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + nodeOrigin.y,\n        text: util.clipText(expName, 12),\n        fontWeight: 600,\n        fontSize: 12,\n        fill: '#000000',\n        cursor: 'pointer',\n      },\n      name: 'exp-name',\n    });\n    // 实验状态框\n    group.addShape('rect', {\n      attrs: {\n        ...statusRectConfig,\n        x: defaultCardNodeConfig.width - statusRectConfig.width - safePadding + nodeOrigin.x,\n        y: safePadding + nodeOrigin.y,\n        radius: 2,\n        stroke: expStatusCode === 10004 ? colors.G : colors.GY,\n        fill: expStatusCode === 10004 ? colors.G : colors.GY,\n        opacity: 0.8,\n      },\n      name: 'exp-status-rect',\n    });\n    // 实验状态\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: defaultCardNodeConfig.width - safePadding - statusRectConfig.width / 2 + nodeOrigin.x - 5 * expStatus.length,\n        y: 19 + nodeOrigin.y,\n        text: expStatus,\n        fill: expStatusCode === 10004 ? '#fff' : '#000',\n        fontSize: 10,\n      },\n      name: 'exp-status',\n    });\n\n    if (!isRoot) {\n      // 上级分组\n      group.addShape('text', {\n        attrs: {\n          ...textConfig,\n          x: safePadding + nodeOrigin.x,\n          y: titlePadding + textPadding + nodeOrigin.y,\n          text: `上级分组：${util.clipText(parentStrategyName, 12)}`,\n          fontSize: 11,\n          fill: '#000',\n        },\n        name: 'parent-strategy',\n      });\n    }\n\n    // 所属层\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (2 - ignoreLines) + nodeOrigin.y,\n        text: `所属层：${util.clipText(layerName, 13)}`,\n        fontSize: 11,\n        fill: '#000',\n      },\n      name: 'layer-name',\n    });\n\n    // 层流量占比\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (3 - ignoreLines) + nodeOrigin.y,\n        text: `层流量占比：${util.clipText(String(expRatio), 10)}%`,\n        fontSize: 11,\n        fill: '#000',\n      },\n      name: 'exp-ratio',\n    });\n\n    // 全局预期流量占比\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (4 - ignoreLines) + nodeOrigin.y,\n        text: `全局预期流量占比：${util.clipText(String(expectedGlobalExpRatio), 10)}%`,\n        fontSize: 11,\n        fill: '#000000',\n      },\n      name: 'global-ratio',\n    });\n\n    // 全局实际流量占比\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (5 - ignoreLines) + nodeOrigin.y,\n        text: `全局实际流量占比：${util.clipText(String(actualGlobalExpRatio), 10)}%`,\n        fontSize: 11,\n        fill: '#000',\n      },\n      name: 'global-ratio',\n    });\n\n    // 查看按钮\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (6 - ignoreLines) + nodeOrigin.y,\n        text: '查看',\n        fontSize: 11,\n        fill: colors.B,\n        cursor: 'pointer',\n      },\n      name: 'detail-btn',\n      modelId: id,\n    });\n\n    // 编辑按钮\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x + 30,\n        y: titlePadding + textPadding * (6 - ignoreLines) + nodeOrigin.y,\n        text: '编辑',\n        fontSize: 11,\n        fill: colors.B,\n        cursor: 'pointer',\n      },\n      name: 'edit-btn',\n      modelId: id,\n    });\n\n    // 实验报告按钮\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x + 60,\n        y: titlePadding + textPadding * (6 - ignoreLines) + nodeOrigin.y,\n        text: '实验报告',\n        fontSize: 11,\n        fill: colors.B,\n        cursor: 'pointer',\n      },\n      name: 'report-btn',\n      modelId: id,\n    });\n\n    // collapse rect\n    if (children && children.length) {\n      group.addShape('rect', {\n        attrs: {\n          x: defaultCardNodeConfig.width / 2 - 8,\n          y: -8,\n          width: 16,\n          height: 16,\n          stroke: 'rgba(0, 0, 0, 0.25)',\n          cursor: 'pointer',\n          fill: '#fff',\n        },\n        name: 'collapse-back',\n        modelId: cfg.id,\n      });\n\n      // collpase text\n      group.addShape('text', {\n        attrs: {\n          x: defaultCardNodeConfig.width / 2,\n          y: -1,\n          textAlign: 'center',\n          textBaseline: 'middle',\n          text: collapsed ? '+' : '-',\n          fontSize: 16,\n          cursor: 'pointer',\n          fill: 'rgba(0, 0, 0, 0.25)',\n        },\n        name: 'collapse-text',\n        modelId: cfg.id,\n      });\n    }\n\n    return rect;\n  },\n  update(cfg, item) {\n    const group = item.getContainer();\n    const collapseText = group.find((e) => e.get('name') === 'collapse-text');\n    if (collapseText) {\n      if (!cfg.collapsed) {\n        collapseText.attr({ text: '-' });\n      } else {\n        collapseText.attr({ text: '+' });\n      }\n    }\n  },\n};\n\n// 自定义边配置\nconst edgeConfig = {\n  edgeType: 'flow-cubic',\n  extendedEdgeName: 'single-line',\n  getPath(points) {\n    const path = [];\n    path.push(['M', points[0].x, points[0].y]);\n    path.push(['C', points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y]);\n    return path;\n  },\n};\n\n// 默认树图配置\nconst defaultGraphConfig = {\n  width: 1000,\n  height: 800,\n  fitView: true,\n  fitViewPadding: 30,\n  animate: true,\n  minZoom: 0.2,\n  maxZoom: 2,\n  animateCfg: {\n    duration: 250,\n  },\n  defaultNode: {\n    type: 'flow-rect',\n  },\n  defaultEdge: {\n    type: 'cubic-horizontal',\n    style: {\n      stroke: colors.GY,\n      endArrow: true,\n    },\n  },\n  modes: {\n    default: ['drag-canvas', 'zoom-canvas'],\n  },\n  layout: {\n    type: 'indented',\n    direction: 'LR',\n    dropCap: false,\n    indent: 400,\n    getHeight: () => {\n      return 180;\n    },\n  },\n  registerNodeConfigs: [nodeConfig],\n  registerEdgeConfigs: [edgeConfig],\n};\n\nconst data = {\n  expId: 23017,\n  expKey: 'ab_arena_wb_wancuiping_1686622062637',\n  expName: '层域实验test1_1',\n  expStatusCode: 10004,\n  expStatus: '生效中',\n  layerId: 23489,\n  layerKey: 'MRnemefUjQfu',\n  layerName: '层域树test1_1',\n  expRatio: 80,\n  parentStrategyId: null,\n  parentStrategyKey: null,\n  parentStrategyName: null,\n  expectedGlobalExpRatio: 80,\n  actualGlobalExpRatio: 80,\n  children: [\n    {\n      expId: 22958,\n      expKey: 'ab_arena_hanshishuai_1686537200469',\n      expName: '层域树8level1_3',\n      expStatusCode: 10004,\n      expStatus: '生效中',\n      layerId: 23471,\n      layerKey: 'yUVNRjfqiYba',\n      layerName: '层域树level2_3',\n      expRatio: 80,\n      parentStrategyId: 288355,\n      parentStrategyKey: 'shiyanzu1',\n      parentStrategyName: '实验组1',\n      expectedGlobalExpRatio: 19.2,\n      actualGlobalExpRatio: 19.2,\n      children: [],\n    },\n    {\n      expId: 23069,\n      expKey: 'ab_arena_wb_wancuiping_1686654860647',\n      expName: '层域实验test2_2',\n      expStatusCode: 10004,\n      expStatus: '生效中',\n      layerId: 23490,\n      layerKey: 'VBFrEbMVbeiu',\n      layerName: '层域树test2_2',\n      expRatio: 12,\n      parentStrategyId: 288357,\n      parentStrategyKey: 'duizhaozu',\n      parentStrategyName: '对照组',\n      expectedGlobalExpRatio: 1.44,\n      actualGlobalExpRatio: 1.44,\n      children: [\n        {\n          expId: 23147,\n          expKey: 'ab_arena_wb_wancuiping_1686812092967',\n          expName: '层域实验test3_1',\n          expStatusCode: 10004,\n          expStatus: '生效中',\n          layerId: 23636,\n          layerKey: 'vANFnirEv2An',\n          layerName: '层域实验test3_1',\n          expRatio: 100,\n          parentStrategyId: 288482,\n          parentStrategyKey: 'shiyanzu1',\n          parentStrategyName: '实验组1',\n          expectedGlobalExpRatio: 0.072,\n          actualGlobalExpRatio: 0.072,\n          children: [],\n        },\n        {\n          expId: 23886,\n          expKey: 'ab_arena_wb_wancuiping_1689324066280',\n          expName: '层域实验test3_2',\n          expStatusCode: 10002,\n          expStatus: '已提交',\n          layerId: 23651,\n          layerKey: '73i2Ybe6FZFz',\n          layerName: '层域实验test3_2',\n          expRatio: 55,\n          parentStrategyId: 288691,\n          parentStrategyKey: 'duizhaozu',\n          parentStrategyName: '对照组',\n          expectedGlobalExpRatio: 0.002,\n          actualGlobalExpRatio: 0,\n          children: [],\n        },\n        {\n          expId: 23159,\n          expKey: 'ab_arena_wb_wancuiping_1686821675387',\n          expName: '层域实验test3_3',\n          expStatusCode: 10004,\n          expStatus: '生效中',\n          layerId: 23651,\n          layerKey: '73i2Ybe6FZFz',\n          layerName: '层域实验test3_3',\n          expRatio: 20,\n          parentStrategyId: 288691,\n          parentStrategyKey: 'duizhaozu',\n          parentStrategyName: '对照组',\n          expectedGlobalExpRatio: 0.0007,\n          actualGlobalExpRatio: 0.0007,\n          children: [],\n        },\n      ],\n    },\n    {\n      expId: 23118,\n      expKey: 'ab_arena_null',\n      expName: '层预实验test2_2.2',\n      expStatusCode: 10004,\n      expStatus: '生效中',\n      layerId: 23490,\n      layerKey: 'VBFrEbMVbeiu',\n      layerName: '层域树test2_2',\n      expRatio: 2,\n      parentStrategyId: 288357,\n      parentStrategyKey: 'duizhaozu',\n      parentStrategyName: '对照组',\n      expectedGlobalExpRatio: 0.24,\n      actualGlobalExpRatio: 0.24,\n      children: [\n        {\n          expId: 23837,\n          expKey: 'ab_arena_wb_wancuiping_1689232768629',\n          expName: '层预实验test3_3',\n          expStatusCode: 10004,\n          expStatus: '生效中',\n          layerId: 23682,\n          layerKey: 'mEJz2i7fqMRr',\n          layerName: '层域树test3_3',\n          expRatio: 25,\n          parentStrategyId: 288606,\n          parentStrategyKey: 'shiyanzu1',\n          parentStrategyName: '实验组1',\n          expectedGlobalExpRatio: 0.03,\n          actualGlobalExpRatio: 0.03,\n          children: [],\n        },\n      ],\n    },\n  ],\n};\n\nexport default {\n  mounted() {\n    const container = this.$refs.graphDom;\n    const flow = new Flow(\n      {\n        graphType: 'treeGraph',\n        container,\n        ...defaultGraphConfig,\n      },\n      util.transformGraphData(data)\n    );\n    const graph = flow.graph;\n\n    const handleCollapse = ({ item }) => {\n      const sourceData = graph.findById(item.get('id'));\n      const collapsed = !sourceData.collapsed;\n      sourceData.collapsed = collapsed;\n      item.getModel().collapsed = collapsed;\n      graph.updateItem(item, { collapsed });\n      graph.layout();\n    };\n\n    graph.on('collapse-text:click', handleCollapse);\n    graph.on('collapse-back:click', handleCollapse);\n    graph.on('detail-btn:click', (e) => {\n      console.log('详情按钮点击');\n    });\n    graph.on('edit-btn:click', (e) => {\n      console.log('编辑按钮点击');\n    });\n    graph.on('report-btn:click', (e) => {\n      console.log('报告按钮点击');\n    });\n  },\n};\n</script>\n\n<style></style>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graphDom\"></div>\n</template>\n\n<script>\n// 色值集合\nconst colors = {\n  B: '#3B8DF7',\n  R: '#F46649',\n  Y: '#EEBC20',\n  G: '#00B365',\n  DI: '#A7A7A7',\n  GY: '#CED4D9',\n};\nconst util = {\n  transformGraphData(data) {\n    const traverse = (item, isRoot = false) => {\n      const { expKey, expName, children } = item || {};\n      return {\n        ...item,\n        isRoot,\n        id: expKey,\n        label: expName,\n        collapsed: false,\n        children: children && children.length > 0 ? children.map((e) => traverse(e)) : [],\n      };\n    };\n\n    return traverse(data, true);\n  },\n  clipText(text, maxLen) {\n    if (typeof text !== 'string') {\n      return '-';\n    }\n\n    return text.length > maxLen ? `${text.substring(0, maxLen)}...` : text;\n  },\n};\n\n// 自定义节点配置\nconst nodeConfig = {\n  nodeType: 'flow-rect',\n  extendedNodeName: 'rect',\n  draw(cfg, group) {\n    const {\n      id,\n      expRatio,\n      expName,\n      expStatus,\n      expStatusCode,\n      parentStrategyName,\n      isRoot,\n      collapsed,\n      layerName,\n      children,\n      actualGlobalExpRatio,\n      expectedGlobalExpRatio,\n    } = cfg;\n    // 根节点没有分组信息\n    const ignoreLines = isRoot ? 1 : 0;\n    const safePadding = 4;\n    const textPadding = 25;\n    const titlePadding = 20;\n    const statusRectConfig = {\n      width: 40,\n      height: 20,\n    };\n    // 自定义卡片配置\n    const defaultCardNodeConfig = {\n      width: 210,\n      height: 180 - textPadding * ignoreLines,\n      lineWidth: 1,\n      fontSize: 12,\n      fill: '#FFFFFF',\n      radius: 4,\n      stroke: '#000000',\n      opacity: 1,\n    };\n    const nodeOrigin = {\n      x: -defaultCardNodeConfig.width / 2,\n      y: -defaultCardNodeConfig.height / 2,\n    };\n\n    const textConfig = {\n      textAlign: 'left',\n      textBaseline: 'bottom',\n    };\n\n    // 卡片\n    const rect = group.addShape('rect', {\n      attrs: {\n        x: nodeOrigin.x,\n        y: nodeOrigin.y,\n        ...defaultCardNodeConfig,\n      },\n    });\n\n    // 实验名\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + nodeOrigin.y,\n        text: util.clipText(expName, 12),\n        fontWeight: 600,\n        fontSize: 12,\n        fill: '#000000',\n        cursor: 'pointer',\n      },\n      name: 'exp-name',\n    });\n    // 实验状态框\n    group.addShape('rect', {\n      attrs: {\n        ...statusRectConfig,\n        x: defaultCardNodeConfig.width - statusRectConfig.width - safePadding + nodeOrigin.x,\n        y: safePadding + nodeOrigin.y,\n        radius: 2,\n        stroke: expStatusCode === 10004 ? colors.G : colors.GY,\n        fill: expStatusCode === 10004 ? colors.G : colors.GY,\n        opacity: 0.8,\n      },\n      name: 'exp-status-rect',\n    });\n    // 实验状态\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: defaultCardNodeConfig.width - safePadding - statusRectConfig.width / 2 + nodeOrigin.x - 5 * expStatus.length,\n        y: 19 + nodeOrigin.y,\n        text: expStatus,\n        fill: expStatusCode === 10004 ? '#fff' : '#000',\n        fontSize: 10,\n      },\n      name: 'exp-status',\n    });\n\n    if (!isRoot) {\n      // 上级分组\n      group.addShape('text', {\n        attrs: {\n          ...textConfig,\n          x: safePadding + nodeOrigin.x,\n          y: titlePadding + textPadding + nodeOrigin.y,\n          text: `上级分组：${util.clipText(parentStrategyName, 12)}`,\n          fontSize: 11,\n          fill: '#000',\n        },\n        name: 'parent-strategy',\n      });\n    }\n\n    // 所属层\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (2 - ignoreLines) + nodeOrigin.y,\n        text: `所属层：${util.clipText(layerName, 13)}`,\n        fontSize: 11,\n        fill: '#000',\n      },\n      name: 'layer-name',\n    });\n\n    // 层流量占比\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (3 - ignoreLines) + nodeOrigin.y,\n        text: `层流量占比：${util.clipText(String(expRatio), 10)}%`,\n        fontSize: 11,\n        fill: '#000',\n      },\n      name: 'exp-ratio',\n    });\n\n    // 全局预期流量占比\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (4 - ignoreLines) + nodeOrigin.y,\n        text: `全局预期流量占比：${util.clipText(String(expectedGlobalExpRatio), 10)}%`,\n        fontSize: 11,\n        fill: '#000000',\n      },\n      name: 'global-ratio',\n    });\n\n    // 全局实际流量占比\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (5 - ignoreLines) + nodeOrigin.y,\n        text: `全局实际流量占比：${util.clipText(String(actualGlobalExpRatio), 10)}%`,\n        fontSize: 11,\n        fill: '#000',\n      },\n      name: 'global-ratio',\n    });\n\n    // 查看按钮\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x,\n        y: titlePadding + textPadding * (6 - ignoreLines) + nodeOrigin.y,\n        text: '查看',\n        fontSize: 11,\n        fill: colors.B,\n        cursor: 'pointer',\n      },\n      name: 'detail-btn',\n      modelId: id,\n    });\n\n    // 编辑按钮\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x + 30,\n        y: titlePadding + textPadding * (6 - ignoreLines) + nodeOrigin.y,\n        text: '编辑',\n        fontSize: 11,\n        fill: colors.B,\n        cursor: 'pointer',\n      },\n      name: 'edit-btn',\n      modelId: id,\n    });\n\n    // 实验报告按钮\n    group.addShape('text', {\n      attrs: {\n        ...textConfig,\n        x: safePadding + nodeOrigin.x + 60,\n        y: titlePadding + textPadding * (6 - ignoreLines) + nodeOrigin.y,\n        text: '实验报告',\n        fontSize: 11,\n        fill: colors.B,\n        cursor: 'pointer',\n      },\n      name: 'report-btn',\n      modelId: id,\n    });\n\n    // collapse rect\n    if (children && children.length) {\n      group.addShape('rect', {\n        attrs: {\n          x: defaultCardNodeConfig.width / 2 - 8,\n          y: -8,\n          width: 16,\n          height: 16,\n          stroke: 'rgba(0, 0, 0, 0.25)',\n          cursor: 'pointer',\n          fill: '#fff',\n        },\n        name: 'collapse-back',\n        modelId: cfg.id,\n      });\n\n      // collpase text\n      group.addShape('text', {\n        attrs: {\n          x: defaultCardNodeConfig.width / 2,\n          y: -1,\n          textAlign: 'center',\n          textBaseline: 'middle',\n          text: collapsed ? '+' : '-',\n          fontSize: 16,\n          cursor: 'pointer',\n          fill: 'rgba(0, 0, 0, 0.25)',\n        },\n        name: 'collapse-text',\n        modelId: cfg.id,\n      });\n    }\n\n    return rect;\n  },\n  update(cfg, item) {\n    const group = item.getContainer();\n    const collapseText = group.find((e) => e.get('name') === 'collapse-text');\n    if (collapseText) {\n      if (!cfg.collapsed) {\n        collapseText.attr({ text: '-' });\n      } else {\n        collapseText.attr({ text: '+' });\n      }\n    }\n  },\n};\n\n// 自定义边配置\nconst edgeConfig = {\n  edgeType: 'flow-cubic',\n  extendedEdgeName: 'single-line',\n  getPath(points) {\n    const path = [];\n    path.push(['M', points[0].x, points[0].y]);\n    path.push(['C', points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y]);\n    return path;\n  },\n};\n\n// 默认树图配置\nconst defaultGraphConfig = {\n  width: 1000,\n  height: 800,\n  fitView: true,\n  fitViewPadding: 30,\n  animate: true,\n  minZoom: 0.2,\n  maxZoom: 2,\n  animateCfg: {\n    duration: 250,\n  },\n  defaultNode: {\n    type: 'flow-rect',\n  },\n  defaultEdge: {\n    type: 'cubic-horizontal',\n    style: {\n      stroke: colors.GY,\n      endArrow: true,\n    },\n  },\n  modes: {\n    default: ['drag-canvas', 'zoom-canvas'],\n  },\n  layout: {\n    type: 'indented',\n    direction: 'LR',\n    dropCap: false,\n    indent: 400,\n    getHeight: () => {\n      return 180;\n    },\n  },\n  registerNodeConfigs: [nodeConfig],\n  registerEdgeConfigs: [edgeConfig],\n};\n\nconst data = {\n  expId: 23017,\n  expKey: 'ab_arena_wb_wancuiping_1686622062637',\n  expName: '层域实验test1_1',\n  expStatusCode: 10004,\n  expStatus: '生效中',\n  layerId: 23489,\n  layerKey: 'MRnemefUjQfu',\n  layerName: '层域树test1_1',\n  expRatio: 80,\n  parentStrategyId: null,\n  parentStrategyKey: null,\n  parentStrategyName: null,\n  expectedGlobalExpRatio: 80,\n  actualGlobalExpRatio: 80,\n  children: [\n    {\n      expId: 22958,\n      expKey: 'ab_arena_hanshishuai_1686537200469',\n      expName: '层域树8level1_3',\n      expStatusCode: 10004,\n      expStatus: '生效中',\n      layerId: 23471,\n      layerKey: 'yUVNRjfqiYba',\n      layerName: '层域树level2_3',\n      expRatio: 80,\n      parentStrategyId: 288355,\n      parentStrategyKey: 'shiyanzu1',\n      parentStrategyName: '实验组1',\n      expectedGlobalExpRatio: 19.2,\n      actualGlobalExpRatio: 19.2,\n      children: [],\n    },\n    {\n      expId: 23069,\n      expKey: 'ab_arena_wb_wancuiping_1686654860647',\n      expName: '层域实验test2_2',\n      expStatusCode: 10004,\n      expStatus: '生效中',\n      layerId: 23490,\n      layerKey: 'VBFrEbMVbeiu',\n      layerName: '层域树test2_2',\n      expRatio: 12,\n      parentStrategyId: 288357,\n      parentStrategyKey: 'duizhaozu',\n      parentStrategyName: '对照组',\n      expectedGlobalExpRatio: 1.44,\n      actualGlobalExpRatio: 1.44,\n      children: [\n        {\n          expId: 23147,\n          expKey: 'ab_arena_wb_wancuiping_1686812092967',\n          expName: '层域实验test3_1',\n          expStatusCode: 10004,\n          expStatus: '生效中',\n          layerId: 23636,\n          layerKey: 'vANFnirEv2An',\n          layerName: '层域实验test3_1',\n          expRatio: 100,\n          parentStrategyId: 288482,\n          parentStrategyKey: 'shiyanzu1',\n          parentStrategyName: '实验组1',\n          expectedGlobalExpRatio: 0.072,\n          actualGlobalExpRatio: 0.072,\n          children: [],\n        },\n        {\n          expId: 23886,\n          expKey: 'ab_arena_wb_wancuiping_1689324066280',\n          expName: '层域实验test3_2',\n          expStatusCode: 10002,\n          expStatus: '已提交',\n          layerId: 23651,\n          layerKey: '73i2Ybe6FZFz',\n          layerName: '层域实验test3_2',\n          expRatio: 55,\n          parentStrategyId: 288691,\n          parentStrategyKey: 'duizhaozu',\n          parentStrategyName: '对照组',\n          expectedGlobalExpRatio: 0.002,\n          actualGlobalExpRatio: 0,\n          children: [],\n        },\n        {\n          expId: 23159,\n          expKey: 'ab_arena_wb_wancuiping_1686821675387',\n          expName: '层域实验test3_3',\n          expStatusCode: 10004,\n          expStatus: '生效中',\n          layerId: 23651,\n          layerKey: '73i2Ybe6FZFz',\n          layerName: '层域实验test3_3',\n          expRatio: 20,\n          parentStrategyId: 288691,\n          parentStrategyKey: 'duizhaozu',\n          parentStrategyName: '对照组',\n          expectedGlobalExpRatio: 0.0007,\n          actualGlobalExpRatio: 0.0007,\n          children: [],\n        },\n      ],\n    },\n    {\n      expId: 23118,\n      expKey: 'ab_arena_null',\n      expName: '层预实验test2_2.2',\n      expStatusCode: 10004,\n      expStatus: '生效中',\n      layerId: 23490,\n      layerKey: 'VBFrEbMVbeiu',\n      layerName: '层域树test2_2',\n      expRatio: 2,\n      parentStrategyId: 288357,\n      parentStrategyKey: 'duizhaozu',\n      parentStrategyName: '对照组',\n      expectedGlobalExpRatio: 0.24,\n      actualGlobalExpRatio: 0.24,\n      children: [\n        {\n          expId: 23837,\n          expKey: 'ab_arena_wb_wancuiping_1689232768629',\n          expName: '层预实验test3_3',\n          expStatusCode: 10004,\n          expStatus: '生效中',\n          layerId: 23682,\n          layerKey: 'mEJz2i7fqMRr',\n          layerName: '层域树test3_3',\n          expRatio: 25,\n          parentStrategyId: 288606,\n          parentStrategyKey: 'shiyanzu1',\n          parentStrategyName: '实验组1',\n          expectedGlobalExpRatio: 0.03,\n          actualGlobalExpRatio: 0.03,\n          children: [],\n        },\n      ],\n    },\n  ],\n};\n\nexport default {\n  mounted() {\n    const container = this.$refs.graphDom;\n    const flow = new Flow(\n      {\n        graphType: 'treeGraph',\n        container,\n        ...defaultGraphConfig,\n      },\n      util.transformGraphData(data)\n    );\n    const graph = flow.graph;\n\n    const handleCollapse = ({ item }) => {\n      const sourceData = graph.findById(item.get('id'));\n      const collapsed = !sourceData.collapsed;\n      sourceData.collapsed = collapsed;\n      item.getModel().collapsed = collapsed;\n      graph.updateItem(item, { collapsed });\n      graph.layout();\n    };\n\n    graph.on('collapse-text:click', handleCollapse);\n    graph.on('collapse-back:click', handleCollapse);\n    graph.on('detail-btn:click', (e) => {\n      console.log('详情按钮点击');\n    });\n    graph.on('edit-btn:click', (e) => {\n      console.log('编辑按钮点击');\n    });\n    graph.on('report-btn:click', (e) => {\n      console.log('报告按钮点击');\n    });\n  },\n};\n</script>\n\n<style></style>\n"},{"relativePath":"mtdv-graph-flow/behavior/demo/ones.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/behavior/demo/ones.vue","order":2,"filename":"ones.vue","title":"节点按钮点击-ones实现","screenshot":"https://s3plus.sankuai.com/picture-online/docs/ones.png","source":"<template>\n  <div class=\"ones-graph\">\n    <div class=\"graph-container\" ref=\"graph\" @contextmenu.prevent></div>\n    <div class=\"contextMenu\" ref=\"contextMenuRef\" @contextmenu.prevent v-if=\"show\">\n      <div\n        v-for=\"menuItem in menuItems\"\n        :key=\"menuItem.name\"\n        class=\"menuItem\"\n        :class=\"{ disabled: menuItem.disabled }\"\n        @click=\"onItemClick(menuItem)\"\n      >\n        <i :class=\"'iconfont ' + menuItem.icon + ' icon'\"></i>\n        {{ menuItem.name }}\n      </div>\n    </div>\n    <mtd-modal v-model=\"visible\" title=\"节点配置\" width=\"20%\" :closable=\"false\">\n      <div class=\"modal-container\">\n        <mtd-form :model=\"newExpForm\" ref=\"newFormRef\" class=\"create-form\" label-position=\"top\">\n          <mtd-form-item\n            label=\"节点名称名称\"\n            prop=\"name\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.name\" class=\"create-input\" placeholder=\"请输入节点名称\"> </mtd-input>\n          </mtd-form-item>\n          <mtd-form-item\n            label=\"节点类型\"\n            prop=\"type\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.type\" class=\"create-input\" placeholder=\"请输入节点类型\"> </mtd-input>\n          </mtd-form-item>\n        </mtd-form>\n      </div>\n      <div slot=\"footer\" class=\"exp-create-foot\">\n        <mtd-button class=\"cancel-text\" @click=\"cancel\">取消</mtd-button>\n        <mtd-button type=\"primary\" @click=\"submit\">确定</mtd-button>\n      </div>\n    </mtd-modal>\n  </div>\n</template>\n\n<script>\n// 本例子需要引入样式\n\nconst graphData = {\n  nodes: [\n    {\n      type: 'buttonNode',\n      id: 'node1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '自测流水线',\n      x: 50,\n      y: 308,\n      buttonNodeCfg: {\n        subTitle: '潇潇雨',\n        status: 'inProgress',\n        buttons: [\n          {\n            label: '确认完成',\n            key: 'enter',\n            type: 'primary',\n          },\n          {\n            label: '跳过',\n            key: 'skip',\n            type: 'normal',\n          },\n        ],\n        images: [\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n        ],\n      },\n    },\n    {\n      type: 'buttonNode',\n      id: 'node2',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '联调',\n      x: 350,\n      y: 292,\n      buttonNodeCfg: {\n        subTitle: '潇潇雨',\n        status: 'lock',\n        images: [\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n        ],\n        buttons: [\n          {\n            label: '完成',\n            key: 'enter',\n            type: 'success',\n          },\n          {\n            label: '跳过',\n            key: 'skip',\n            type: 'normal',\n          },\n          {\n            label: '拒绝',\n            key: 'refuse',\n            type: 'danger',\n          },\n        ],\n      },\n    },\n    {\n      type: 'buttonNode',\n      id: 'node3',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: 'CodeReview',\n      buttonNodeCfg: {\n        subTitle: '潇潇雨等3人',\n        status: 'lock',\n      },\n      x: 650,\n      y: 270,\n    },\n    {\n      type: 'buttonNode',\n      id: 'node4',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      x: 650,\n      y: 390,\n      title: '发起PR',\n      buttonNodeCfg: {\n        subTitle: '潇潇雨等3人',\n        status: 'lock',\n      },\n    },\n    {\n      type: 'buttonNode',\n      id: 'node5',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '提交测试',\n      x: 950,\n      y: 330,\n      buttonNodeCfg: {\n        subTitle: '潇潇雨',\n        status: 'lock',\n      },\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'baseLine',\n    },\n    {\n      source: 'node2',\n      target: 'node3',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node2',\n      target: 'node4',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node4',\n      target: 'node5',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n      menuItems: [],\n      graphData,\n      show: false,\n      rightClickItem: {},\n      visible: false,\n      newExpForm: {\n        name: '',\n        type: '',\n        status: '',\n      },\n      currentNode: '',\n    };\n  },\n  computed: {\n    position() {\n      return {\n        x: this.rightClickItem ? this.rightClickItem.x : 0,\n        y: this.rightClickItem ? this.rightClickItem.y : 0,\n      };\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.handleGraphEvent();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            style: { endArrow: true },\n          },\n          showTooltip: true,\n          orientation: 'horizontal',\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    onItemClick(menuItem) {\n      this.rightItemClicked({ name: menuItem.name, rightClickItem: this.rightClickItem });\n      this.closeContextMenu();\n    },\n    closeContextMenu() {\n      this.show = false;\n    },\n    rightItemClicked(e) {\n      const id = e.rightClickItem.id;\n      // 节点的右键操作\n      if (e.rightClickItem.type === 'node') {\n        if (e.name === '删除节点') {\n          this.deleteNode(id);\n        } else if (e.name === '添加节点') {\n          this.addNode(id);\n        }\n        // 边的右键操作\n      } else if (e.rightClickItem.type === 'edge') {\n        this.deleteEdge(e);\n      }\n    },\n    deleteEdge(e) {\n      const index = graphData.edges.findIndex((edge) => {\n        return edge.source === e.rightClickItem.source && edge.target === e.rightClickItem.target;\n      });\n      const edgeId = graphData.edges[index].edgeId;\n      graphData.edges.splice(index, 1);\n      this.changeData(graphData);\n    },\n    deleteNode(id) {\n      const index = this.graphData.nodes.findIndex((node) => node.id === id);\n      // 删除节点\n      this.graphData.nodes.splice(index, 1);\n\n      // 删除跟此节点有关的所有连线\n      this.graphData.edges = graphData.edges.filter((edge) => {\n        return edge.source !== id && edge.target !== id;\n      });\n      this.changeData(this.graphData);\n    },\n    changeData(data) {\n      this.graph.changeData(data);\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        this.closeContextMenu();\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        this.handleNodeRightClick(e);\n        this.openContextMenu('node', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        this.handleEdgeRightClick(e);\n        this.openContextMenu('edge', e);\n      });\n      this.flow.bus.on(events.buttonClick, (e) => {\n        this.$mtd.notify({ title: '触发事件：', message: `${e.key}`, type: 'info', duration: 2000 });\n      });\n    },\n    openContextMenu(type, e) {\n      this.rightClickItem = {\n        x: e.event.canvasX,\n        y: e.event.canvasY,\n        id: e.model.id,\n        type,\n      };\n      if (type === 'edge') {\n        this.rightClickItem.source = e.model.source;\n        this.rightClickItem.target = e.model.target;\n      }\n      this.show = true;\n      this.updatePosition();\n    },\n    handleEdgeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '删除',\n          disabled: false,\n          icon: 'iconcontextmenu-node-delete',\n        },\n      ];\n    },\n    handleNodeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '添加节点',\n          disabled: false,\n          type: 'copyNode',\n          icon: 'iconcontextmenu-node-copy',\n        },\n        {\n          name: '删除节点',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconcontextmenu-node-delete',\n        },\n        {\n          name: '重新运行',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconedit1',\n        },\n      ];\n    },\n    updatePosition() {\n      this.$nextTick(() => {\n        const contextMenu = this.$refs.contextMenuRef;\n        if (contextMenu) {\n          let parent = contextMenu.parentElement.parentElement;\n          const parentHeight = parent.clientHeight;\n          const parentPaddingRight = parseInt(window.getComputedStyle(parent).paddingRight);\n          const parentWidth = parent.clientWidth - parentPaddingRight;\n\n          const x = this.rightClickItem.x;\n          const y = this.rightClickItem.y;\n\n          if (x + contextMenu.clientWidth > parentWidth) {\n            contextMenu.style.right = `${parentWidth - x + parentPaddingRight}px`;\n            contextMenu.style.left = 'auto';\n          } else {\n            contextMenu.style.left = `${x}px`;\n            contextMenu.style.right = 'auto';\n          }\n          if (y + contextMenu.clientHeight > parentHeight) {\n            contextMenu.style.bottom = `${parentHeight - y}px`;\n            contextMenu.style.top = 'auto';\n          } else {\n            contextMenu.style.top = `${y}px`;\n            contextMenu.style.bottom = 'auto';\n          }\n        }\n      });\n    },\n    addNode(id) {\n      this.currentNode = id;\n      this.visible = true;\n    },\n    submit() {\n      const currentNodeData = this.graphData.nodes.filter((node) => node.id === this.currentNode)[0];\n      const newNode = {\n        type: 'buttonNode',\n        id: 'node' + this.graphData.nodes.length + 1,\n        title: this.newExpForm.name,\n        x: currentNodeData.x + 300,\n        y: currentNodeData.y,\n        buttonNodeCfg: {\n          subTitle: '潇潇雨等3人',\n          status: 'lock',\n        },\n      };\n      const newEdge = {\n        type: 'basePolyLine',\n        source: this.currentNode,\n        target: 'node' + this.graphData.nodes.length + 1,\n      };\n      this.graphData.nodes.push(newNode);\n      this.graphData.edges.push(newEdge);\n      this.changeData(this.graphData);\n      this.cancel();\n    },\n    cancel() {\n      this.visible = false;\n      this.newExpForm = {\n        name: '',\n        type: '',\n        status: '',\n      };\n    },\n  },\n};\n</script>\n\n<style>\n.ones-graph {\n  height: 100%;\n  width: 100%;\n}\n.ones-graph .g6-component-tooltip {\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #545454;\n  background-color: rgba(255, 255, 255, 0.9);\n  padding: 10px 8px;\n  box-shadow: #eeeeee 0 0 10px;\n}\n.ones-graph .contextMenu {\n  position: absolute;\n  padding: 4px 0;\n  background-color: white;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ones-graph .menuItem {\n  width: 160px;\n  height: 32px;\n  color: rgba(0, 0, 0, 0.7);\n  font-size: 16px;\n  line-height: 32px;\n  vertical-align: middle;\n  user-select: none;\n}\n.ones-graph .menuItem i {\n  width: 15px;\n  height: 15px;\n  padding: 0px 8px;\n}\n\n.ones-graph .menuItem:hover {\n  background-color: #f5f5f5;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"ones-graph\">\n    <div class=\"graph-container\" ref=\"graph\" @contextmenu.prevent></div>\n    <div class=\"contextMenu\" ref=\"contextMenuRef\" @contextmenu.prevent v-if=\"show\">\n      <div\n        v-for=\"menuItem in menuItems\"\n        :key=\"menuItem.name\"\n        class=\"menuItem\"\n        :class=\"{ disabled: menuItem.disabled }\"\n        @click=\"onItemClick(menuItem)\"\n      >\n        <i :class=\"'iconfont ' + menuItem.icon + ' icon'\"></i>\n        {{ menuItem.name }}\n      </div>\n    </div>\n    <mtd-modal v-model=\"visible\" title=\"节点配置\" width=\"20%\" :closable=\"false\">\n      <div class=\"modal-container\">\n        <mtd-form :model=\"newExpForm\" ref=\"newFormRef\" class=\"create-form\" label-position=\"top\">\n          <mtd-form-item\n            label=\"节点名称名称\"\n            prop=\"name\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.name\" class=\"create-input\" placeholder=\"请输入节点名称\"> </mtd-input>\n          </mtd-form-item>\n          <mtd-form-item\n            label=\"节点类型\"\n            prop=\"type\"\n            :rules=\"{\n              message: '必填项',\n              required: true,\n            }\"\n          >\n            <mtd-input v-model=\"newExpForm.type\" class=\"create-input\" placeholder=\"请输入节点类型\"> </mtd-input>\n          </mtd-form-item>\n        </mtd-form>\n      </div>\n      <div slot=\"footer\" class=\"exp-create-foot\">\n        <mtd-button class=\"cancel-text\" @click=\"cancel\">取消</mtd-button>\n        <mtd-button type=\"primary\" @click=\"submit\">确定</mtd-button>\n      </div>\n    </mtd-modal>\n  </div>\n</template>\n\n<script>\n// 本例子需要引入样式\n\nconst graphData = {\n  nodes: [\n    {\n      type: 'buttonNode',\n      id: 'node1',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '自测流水线',\n      x: 50,\n      y: 308,\n      buttonNodeCfg: {\n        subTitle: '潇潇雨',\n        status: 'inProgress',\n        buttons: [\n          {\n            label: '确认完成',\n            key: 'enter',\n            type: 'primary',\n          },\n          {\n            label: '跳过',\n            key: 'skip',\n            type: 'normal',\n          },\n        ],\n        images: [\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n        ],\n      },\n    },\n    {\n      type: 'buttonNode',\n      id: 'node2',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '联调',\n      x: 350,\n      y: 292,\n      buttonNodeCfg: {\n        subTitle: '潇潇雨',\n        status: 'lock',\n        images: [\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n          'https://s3plus-img.meituan.net/v1/mss_491cda809310478f898d7e10a9bb68ec/profile2/55c9c40f-6347-43ec-b921-bf919d2d4b47',\n        ],\n        buttons: [\n          {\n            label: '完成',\n            key: 'enter',\n            type: 'success',\n          },\n          {\n            label: '跳过',\n            key: 'skip',\n            type: 'normal',\n          },\n          {\n            label: '拒绝',\n            key: 'refuse',\n            type: 'danger',\n          },\n        ],\n      },\n    },\n    {\n      type: 'buttonNode',\n      id: 'node3',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: 'CodeReview',\n      buttonNodeCfg: {\n        subTitle: '潇潇雨等3人',\n        status: 'lock',\n      },\n      x: 650,\n      y: 270,\n    },\n    {\n      type: 'buttonNode',\n      id: 'node4',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      x: 650,\n      y: 390,\n      title: '发起PR',\n      buttonNodeCfg: {\n        subTitle: '潇潇雨等3人',\n        status: 'lock',\n      },\n    },\n    {\n      type: 'buttonNode',\n      id: 'node5',\n      inputs: [[0, 0.5]],\n      outputs: [[1, 0.5]],\n      title: '提交测试',\n      x: 950,\n      y: 330,\n      buttonNodeCfg: {\n        subTitle: '潇潇雨',\n        status: 'lock',\n      },\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'baseLine',\n    },\n    {\n      source: 'node2',\n      target: 'node3',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node2',\n      target: 'node4',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node4',\n      target: 'node5',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        lineWidth: 1,\n      },\n      type: 'basePolyLine',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n      menuItems: [],\n      graphData,\n      show: false,\n      rightClickItem: {},\n      visible: false,\n      newExpForm: {\n        name: '',\n        type: '',\n        status: '',\n      },\n      currentNode: '',\n    };\n  },\n  computed: {\n    position() {\n      return {\n        x: this.rightClickItem ? this.rightClickItem.x : 0,\n        y: this.rightClickItem ? this.rightClickItem.y : 0,\n      };\n    },\n  },\n  mounted() {\n    this.initGraph();\n    this.handleGraphEvent();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            style: { endArrow: true },\n          },\n          showTooltip: true,\n          orientation: 'horizontal',\n        },\n        this.graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    onItemClick(menuItem) {\n      this.rightItemClicked({ name: menuItem.name, rightClickItem: this.rightClickItem });\n      this.closeContextMenu();\n    },\n    closeContextMenu() {\n      this.show = false;\n    },\n    rightItemClicked(e) {\n      const id = e.rightClickItem.id;\n      // 节点的右键操作\n      if (e.rightClickItem.type === 'node') {\n        if (e.name === '删除节点') {\n          this.deleteNode(id);\n        } else if (e.name === '添加节点') {\n          this.addNode(id);\n        }\n        // 边的右键操作\n      } else if (e.rightClickItem.type === 'edge') {\n        this.deleteEdge(e);\n      }\n    },\n    deleteEdge(e) {\n      const index = graphData.edges.findIndex((edge) => {\n        return edge.source === e.rightClickItem.source && edge.target === e.rightClickItem.target;\n      });\n      const edgeId = graphData.edges[index].edgeId;\n      graphData.edges.splice(index, 1);\n      this.changeData(graphData);\n    },\n    deleteNode(id) {\n      const index = this.graphData.nodes.findIndex((node) => node.id === id);\n      // 删除节点\n      this.graphData.nodes.splice(index, 1);\n\n      // 删除跟此节点有关的所有连线\n      this.graphData.edges = graphData.edges.filter((edge) => {\n        return edge.source !== id && edge.target !== id;\n      });\n      this.changeData(this.graphData);\n    },\n    changeData(data) {\n      this.graph.changeData(data);\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        this.closeContextMenu();\n      });\n      this.flow.bus.on(events.edgeCreate, (e) => {\n        const { edgeData } = e;\n        this.graphData.edges.push(edgeData);\n      });\n      this.flow.bus.on(events.nodeRightClick, (e) => {\n        this.handleNodeRightClick(e);\n        this.openContextMenu('node', e);\n      });\n      this.flow.bus.on(events.edgeRightClick, (e) => {\n        this.handleEdgeRightClick(e);\n        this.openContextMenu('edge', e);\n      });\n      this.flow.bus.on(events.buttonClick, (e) => {\n        this.$mtd.notify({ title: '触发事件：', message: `${e.key}`, type: 'info', duration: 2000 });\n      });\n    },\n    openContextMenu(type, e) {\n      this.rightClickItem = {\n        x: e.event.canvasX,\n        y: e.event.canvasY,\n        id: e.model.id,\n        type,\n      };\n      if (type === 'edge') {\n        this.rightClickItem.source = e.model.source;\n        this.rightClickItem.target = e.model.target;\n      }\n      this.show = true;\n      this.updatePosition();\n    },\n    handleEdgeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '删除',\n          disabled: false,\n          icon: 'iconcontextmenu-node-delete',\n        },\n      ];\n    },\n    handleNodeRightClick(e) {\n      this.menuItems = [\n        {\n          name: '添加节点',\n          disabled: false,\n          type: 'copyNode',\n          icon: 'iconcontextmenu-node-copy',\n        },\n        {\n          name: '删除节点',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconcontextmenu-node-delete',\n        },\n        {\n          name: '重新运行',\n          disabled: false,\n          type: 'deleteNode',\n          icon: 'iconedit1',\n        },\n      ];\n    },\n    updatePosition() {\n      this.$nextTick(() => {\n        const contextMenu = this.$refs.contextMenuRef;\n        if (contextMenu) {\n          let parent = contextMenu.parentElement.parentElement;\n          const parentHeight = parent.clientHeight;\n          const parentPaddingRight = parseInt(window.getComputedStyle(parent).paddingRight);\n          const parentWidth = parent.clientWidth - parentPaddingRight;\n\n          const x = this.rightClickItem.x;\n          const y = this.rightClickItem.y;\n\n          if (x + contextMenu.clientWidth > parentWidth) {\n            contextMenu.style.right = `${parentWidth - x + parentPaddingRight}px`;\n            contextMenu.style.left = 'auto';\n          } else {\n            contextMenu.style.left = `${x}px`;\n            contextMenu.style.right = 'auto';\n          }\n          if (y + contextMenu.clientHeight > parentHeight) {\n            contextMenu.style.bottom = `${parentHeight - y}px`;\n            contextMenu.style.top = 'auto';\n          } else {\n            contextMenu.style.top = `${y}px`;\n            contextMenu.style.bottom = 'auto';\n          }\n        }\n      });\n    },\n    addNode(id) {\n      this.currentNode = id;\n      this.visible = true;\n    },\n    submit() {\n      const currentNodeData = this.graphData.nodes.filter((node) => node.id === this.currentNode)[0];\n      const newNode = {\n        type: 'buttonNode',\n        id: 'node' + this.graphData.nodes.length + 1,\n        title: this.newExpForm.name,\n        x: currentNodeData.x + 300,\n        y: currentNodeData.y,\n        buttonNodeCfg: {\n          subTitle: '潇潇雨等3人',\n          status: 'lock',\n        },\n      };\n      const newEdge = {\n        type: 'basePolyLine',\n        source: this.currentNode,\n        target: 'node' + this.graphData.nodes.length + 1,\n      };\n      this.graphData.nodes.push(newNode);\n      this.graphData.edges.push(newEdge);\n      this.changeData(this.graphData);\n      this.cancel();\n    },\n    cancel() {\n      this.visible = false;\n      this.newExpForm = {\n        name: '',\n        type: '',\n        status: '',\n      };\n    },\n  },\n};\n</script>\n\n<style>\n.ones-graph {\n  height: 100%;\n  width: 100%;\n}\n.ones-graph .g6-component-tooltip {\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #545454;\n  background-color: rgba(255, 255, 255, 0.9);\n  padding: 10px 8px;\n  box-shadow: #eeeeee 0 0 10px;\n}\n.ones-graph .contextMenu {\n  position: absolute;\n  padding: 4px 0;\n  background-color: white;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ones-graph .menuItem {\n  width: 160px;\n  height: 32px;\n  color: rgba(0, 0, 0, 0.7);\n  font-size: 16px;\n  line-height: 32px;\n  vertical-align: middle;\n  user-select: none;\n}\n.ones-graph .menuItem i {\n  width: 15px;\n  height: 15px;\n  padding: 0px 8px;\n}\n\n.ones-graph .menuItem:hover {\n  background-color: #f5f5f5;\n}\n</style>\n"},{"relativePath":"mtdv-graph-flow/behavior/demo/port.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/behavior/demo/port.vue","order":0,"filename":"port.vue","title":"节点连接","screenshot":"https://s3plus.sankuai.com/picture-online/docs/port.png","source":"<template>\n  <div class=\"graph-container port-graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: 'node1',\n      title: '节点1',\n      x: 200,\n      y: 100,\n    },\n    {\n      id: 'node2',\n      title: '节点2',\n      x: 400,\n      y: 100,\n    },\n    {\n      id: 'node3',\n      title: '节点3',\n      x: 200,\n      y: 200,\n    },\n    {\n      id: 'node4',\n      title: '节点4',\n      x: 400,\n      y: 200,\n    },\n    {\n      id: 'node5',\n      title: '节点5',\n      x: 300,\n      y: 300,\n    },\n    {\n      id: 'node6',\n      title: '节点6',\n      x: 300,\n      y: 400,\n    },\n    {\n      id: 'node7',\n      title: '节点7',\n      x: 300,\n      y: 500,\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node3',\n    },\n    {\n      source: 'node2',\n      target: 'node4',\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n    },\n    {\n      source: 'node5',\n      target: 'node6',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n    };\n  },\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            style: { endArrow: true },\n          },\n          showTooltip: true,\n          tooltipConfig: {\n            getContent: (e) => {\n              const outDiv = document.createElement('div');\n              outDiv.style.width = '180px';\n              outDiv.innerHTML = `\n                      <h4>自定义tooltip</h4>\n                      <ul>\n                        <li>Label: ${e.item.getModel().title}</li>\n                      </ul>`;\n              return outDiv;\n            },\n          },\n        },\n        graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n  },\n};\n</script>\n\n<style>\n.port-graph-container .g6-component-tooltip {\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #545454;\n  background-color: rgba(255, 255, 255, 0.9);\n  padding: 10px 8px;\n  box-shadow: #eeeeee 0 0 10px;\n}\n</style>\n","babeledSource":"<template>\n  <div class=\"graph-container port-graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: 'node1',\n      title: '节点1',\n      x: 200,\n      y: 100,\n    },\n    {\n      id: 'node2',\n      title: '节点2',\n      x: 400,\n      y: 100,\n    },\n    {\n      id: 'node3',\n      title: '节点3',\n      x: 200,\n      y: 200,\n    },\n    {\n      id: 'node4',\n      title: '节点4',\n      x: 400,\n      y: 200,\n    },\n    {\n      id: 'node5',\n      title: '节点5',\n      x: 300,\n      y: 300,\n    },\n    {\n      id: 'node6',\n      title: '节点6',\n      x: 300,\n      y: 400,\n    },\n    {\n      id: 'node7',\n      title: '节点7',\n      x: 300,\n      y: 500,\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node3',\n    },\n    {\n      source: 'node2',\n      target: 'node4',\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n    },\n    {\n      source: 'node5',\n      target: 'node6',\n    },\n  ],\n};\n\nexport default {\n  name: 'Graph',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n    };\n  },\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            style: { endArrow: true },\n          },\n          showTooltip: true,\n          tooltipConfig: {\n            getContent: (e) => {\n              const outDiv = document.createElement('div');\n              outDiv.style.width = '180px';\n              outDiv.innerHTML = `\n                      <h4>自定义tooltip</h4>\n                      <ul>\n                        <li>Label: ${e.item.getModel().title}</li>\n                      </ul>`;\n              return outDiv;\n            },\n          },\n        },\n        graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n  },\n};\n</script>\n\n<style>\n.port-graph-container .g6-component-tooltip {\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #545454;\n  background-color: rgba(255, 255, 255, 0.9);\n  padding: 10px 8px;\n  box-shadow: #eeeeee 0 0 10px;\n}\n</style>\n"},{"relativePath":"mtdv-graph-flow/element/demo/cardNode.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/element/demo/cardNode.vue","order":1,"filename":"cardNode.vue","title":"卡片节点","screenshot":"https://s3plus.sankuai.com/picture-online/docs/card-node.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      type: 'cardNode',\n      id: 'node0',\n      x: 100,\n      y: 50,\n      title: '新客曝光',\n      cardNodeCfg: {\n        iconColor: '#FFFFFF',\n        titleColor: '#FFFFFF',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node1',\n      x: 100,\n      y: 160,\n      title: '新客曝光',\n      fillColor: '#EBF8F5',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node2',\n      x: 100,\n      y: 270,\n      title: '新客曝光',\n      fillColor: '#FDF2E5',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node3',\n      x: 100,\n      y: 380,\n      title: '新客曝光',\n      fillColor: '#E2F5FD',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node4',\n      x: 100,\n      y: 490,\n      title: '新客曝光',\n      fillColor: '#F3ECFE',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node5',\n      x: 100,\n      y: 600,\n      title: '新客曝光',\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        subTitle: '文字溢出测试文字溢出测试文字溢出测试',\n        subTitleColor: '#F50000',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node6',\n      x: 400,\n      y: 50,\n      title: '定时器',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        iconColor: '#FFFFFF',\n        titleColor: '#FFFFFF',\n        panels: [\n          {\n            title: '开始计时',\n            value: '当到计时点时',\n          },\n          {\n            title: '停止计时',\n            value: '任务结束',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node7',\n      x: 400,\n      y: 160,\n      title: '广告投放',\n      fillColor: '#EBF8F5',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: [\n          {\n            title: '开始计时',\n            value: '当到计时点时',\n          },\n          {\n            title: '停止计时',\n            value: '任务结束',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node8',\n      x: 400,\n      y: 270,\n      title: '广告投放',\n      fillColor: '#FDF2E5',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: ['支付后弹窗（54）', '纯文案文本'],\n        subTitle: '子标题',\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node9',\n      x: 400,\n      y: 380,\n      title: '广告投放',\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: ['支付后弹窗（54）'],\n        subTitle: '同比↑20.12%',\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node10',\n      x: 400,\n      y: 490,\n      title: '广告投放',\n      width: 200,\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n        subTitle: '同比↓20.12%',\n        subTitleColor: '#00A85A',\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node11',\n      x: 400,\n      y: 600,\n      title: '文字溢出测试',\n      width: 180,\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: [\n          '文字溢出测试，文字溢出测试，文字溢出测试',\n          {\n            title: '开始计时',\n            value: '文字溢出测试，文字溢出测试',\n          },\n        ],\n        subTitle: '文字溢出测试',\n        subTitleColor: '#F50000',\n      },\n    },\n  ],\n  edges: [],\n};\n\nexport default {\n  name: 'CardNode',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      type: 'cardNode',\n      id: 'node0',\n      x: 100,\n      y: 50,\n      title: '新客曝光',\n      cardNodeCfg: {\n        iconColor: '#FFFFFF',\n        titleColor: '#FFFFFF',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node1',\n      x: 100,\n      y: 160,\n      title: '新客曝光',\n      fillColor: '#EBF8F5',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node2',\n      x: 100,\n      y: 270,\n      title: '新客曝光',\n      fillColor: '#FDF2E5',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node3',\n      x: 100,\n      y: 380,\n      title: '新客曝光',\n      fillColor: '#E2F5FD',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node4',\n      x: 100,\n      y: 490,\n      title: '新客曝光',\n      fillColor: '#F3ECFE',\n      cardNodeCfg: {\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node5',\n      x: 100,\n      y: 600,\n      title: '新客曝光',\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        subTitle: '文字溢出测试文字溢出测试文字溢出测试',\n        subTitleColor: '#F50000',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node6',\n      x: 400,\n      y: 50,\n      title: '定时器',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        iconColor: '#FFFFFF',\n        titleColor: '#FFFFFF',\n        panels: [\n          {\n            title: '开始计时',\n            value: '当到计时点时',\n          },\n          {\n            title: '停止计时',\n            value: '任务结束',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node7',\n      x: 400,\n      y: 160,\n      title: '广告投放',\n      fillColor: '#EBF8F5',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: [\n          {\n            title: '开始计时',\n            value: '当到计时点时',\n          },\n          {\n            title: '停止计时',\n            value: '任务结束',\n          },\n        ],\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node8',\n      x: 400,\n      y: 270,\n      title: '广告投放',\n      fillColor: '#FDF2E5',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: ['支付后弹窗（54）', '纯文案文本'],\n        subTitle: '子标题',\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node9',\n      x: 400,\n      y: 380,\n      title: '广告投放',\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: ['支付后弹窗（54）'],\n        subTitle: '同比↑20.12%',\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node10',\n      x: 400,\n      y: 490,\n      title: '广告投放',\n      width: 200,\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: [\n          {\n            title: '用户数',\n            value: '234055',\n          },\n          {\n            title: '用户占比',\n            value: '34%',\n          },\n        ],\n        subTitle: '同比↓20.12%',\n        subTitleColor: '#00A85A',\n      },\n    },\n    {\n      type: 'cardNode',\n      id: 'node11',\n      x: 400,\n      y: 600,\n      title: '文字溢出测试',\n      width: 180,\n      fillColor: '#EFF1F7',\n      cardNodeCfg: {\n        icon: 'MTD3-MEITUANUI-B-time-countdown-o',\n        panels: [\n          '文字溢出测试，文字溢出测试，文字溢出测试',\n          {\n            title: '开始计时',\n            value: '文字溢出测试，文字溢出测试',\n          },\n        ],\n        subTitle: '文字溢出测试',\n        subTitleColor: '#F50000',\n      },\n    },\n  ],\n  edges: [],\n};\n\nexport default {\n  name: 'CardNode',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/element/demo/combo.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/element/demo/combo.vue","order":3,"filename":"combo.vue","title":"自定义combo","screenshot":"https://s3plus.meituan.net/picture-online/docs/combo.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst nodes = [\n  {\n    type: 'simpleRectNode',\n    id: '1',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点1',\n    comboId: 'A',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '2',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点2',\n    comboId: 'A',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '3',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点3',\n    comboId: 'A',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '4',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点4',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '5',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点5',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '6',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点6',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '7',\n    color: '#1ea565',\n    fillColor: '#ffffff',\n    strokeColor: '#1ea565',\n    name: '节点7',\n    comboId: 'C',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '8',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点8',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名;这是一个文件名;',\n      admin: '小红',\n    },\n    comboId: 'B',\n  },\n  {\n    type: 'simpleRectNode',\n    id: '9',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点9',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '10',\n    color: '#1ea565',\n    fillColor: '#ffffff',\n    strokeColor: '#1ea565',\n    name: '节点10',\n    comboId: 'C',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '11',\n    color: '#1ea565',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点11',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n];\nconst edges = [\n  {\n    source: '1',\n    target: '2',\n  },\n  {\n    source: '2',\n    target: '3',\n  },\n  {\n    source: '3',\n    target: '4',\n  },\n  {\n    source: '4',\n    target: '5',\n  },\n  {\n    source: '5',\n    target: '6',\n  },\n  {\n    source: '6',\n    target: '11',\n  },\n  {\n    source: '4',\n    target: '8',\n  },\n  {\n    source: '8',\n    target: '9',\n  },\n  {\n    source: '3',\n    target: '10',\n  },\n  {\n    source: '3',\n    target: '7',\n  },\n  {\n    source: '10',\n    target: '11',\n  },\n  {\n    source: '9',\n    target: '11',\n  },\n];\n\nconst combos = [\n  {\n    id: 'A',\n    label: 'combo A',\n    style: {\n      fill: 'rgba(17,25,37,0.05)',\n      stroke: 'rgba(17,25,37,0.05)',\n    },\n  },\n  {\n    id: 'B',\n    label: 'combo B',\n    style: {\n      stroke: 'rgba(17,25,37,0.05)',\n      fill: 'rgba(17,25,37,0.05)',\n    },\n  },\n  {\n    id: 'C',\n    label: 'combo C',\n    style: {\n      stroke: 'rgba(17,25,37,0.05)',\n      fill: 'rgba(17,25,37,0.05)',\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/picture-online/docs/edit.png';\nconst rightImg = 'https://s3plus.sankuai.com/picture-online/docs/right.png';\nconst testImg = 'https://s3plus.sankuai.com/picture-online/docs/test.png';\nconst refreshImg = 'https://s3plus.sankuai.com/picture-online/docs/refresh-o.png';\n\nexport default {\n  name: 'Combo',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n    };\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\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            ranksep: 30,\n          },\n          groupByTypes: false,\n          defaultCombo: {\n            type: 'rect',\n            style: {\n              fillOpacity: 0.3,\n            },\n          },\n        },\n        graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#eff1f7');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n        {\n          name: 'default',\n          exec: (node, { shape, circles, data }) => {\n            shape.attr('fill', data.fillColor);\n            shape.attr('stroke', data.strokeColor);\n            shape.attr('lineWidth', 1);\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\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    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: '#111925',\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: '#111925',\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: '#111925',\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: '#111925',\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: '#111925',\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: '#111925',\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  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst nodes = [\n  {\n    type: 'simpleRectNode',\n    id: '1',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点1',\n    comboId: 'A',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '2',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点2',\n    comboId: 'A',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '3',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点3',\n    comboId: 'A',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '4',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点4',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '5',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点5',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '6',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点6',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '7',\n    color: '#1ea565',\n    fillColor: '#ffffff',\n    strokeColor: '#1ea565',\n    name: '节点7',\n    comboId: 'C',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '8',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点8',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务;一项任务;一项任务;',\n      file: '这是一个文件名;这是一个文件名;',\n      admin: '小红',\n    },\n    comboId: 'B',\n  },\n  {\n    type: 'simpleRectNode',\n    id: '9',\n    color: '#347BED',\n    fillColor: '#ffffff',\n    strokeColor: '#347BED',\n    name: '节点9',\n    comboId: 'B',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '10',\n    color: '#1ea565',\n    fillColor: '#ffffff',\n    strokeColor: '#1ea565',\n    name: '节点10',\n    comboId: 'C',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n  {\n    type: 'simpleRectNode',\n    id: '11',\n    color: '#1ea565',\n    fillColor: '#ffffffc0',\n    strokeColor: '#1ea565',\n    name: '节点11',\n    data: {\n      time: '2021.11.18',\n      task: '一项任务',\n      file: '这是一个文件名',\n      admin: '小红',\n    },\n  },\n];\nconst edges = [\n  {\n    source: '1',\n    target: '2',\n  },\n  {\n    source: '2',\n    target: '3',\n  },\n  {\n    source: '3',\n    target: '4',\n  },\n  {\n    source: '4',\n    target: '5',\n  },\n  {\n    source: '5',\n    target: '6',\n  },\n  {\n    source: '6',\n    target: '11',\n  },\n  {\n    source: '4',\n    target: '8',\n  },\n  {\n    source: '8',\n    target: '9',\n  },\n  {\n    source: '3',\n    target: '10',\n  },\n  {\n    source: '3',\n    target: '7',\n  },\n  {\n    source: '10',\n    target: '11',\n  },\n  {\n    source: '9',\n    target: '11',\n  },\n];\n\nconst combos = [\n  {\n    id: 'A',\n    label: 'combo A',\n    style: {\n      fill: 'rgba(17,25,37,0.05)',\n      stroke: 'rgba(17,25,37,0.05)',\n    },\n  },\n  {\n    id: 'B',\n    label: 'combo B',\n    style: {\n      stroke: 'rgba(17,25,37,0.05)',\n      fill: 'rgba(17,25,37,0.05)',\n    },\n  },\n  {\n    id: 'C',\n    label: 'combo C',\n    style: {\n      stroke: 'rgba(17,25,37,0.05)',\n      fill: 'rgba(17,25,37,0.05)',\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/picture-online/docs/edit.png';\nconst rightImg = 'https://s3plus.sankuai.com/picture-online/docs/right.png';\nconst testImg = 'https://s3plus.sankuai.com/picture-online/docs/test.png';\nconst refreshImg = 'https://s3plus.sankuai.com/picture-online/docs/refresh-o.png';\n\nexport default {\n  name: 'Combo',\n  data() {\n    return {\n      flow: null,\n      graph: null,\n    };\n  },\n  mounted() {\n    this.initGraph();\n    this.registerState();\n  },\n  methods: {\n    initGraph() {\n      const flow = new Flow(\n        {\n          container: this.$refs.graph,\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            ranksep: 30,\n          },\n          groupByTypes: false,\n          defaultCombo: {\n            type: 'rect',\n            style: {\n              fillOpacity: 0.3,\n            },\n          },\n        },\n        graphData\n      );\n      this.graph = flow.graph;\n      this.flow = flow;\n    },\n    registerState() {\n      const nodeStates = [\n        {\n          name: 'selected',\n          exec: (node, { shape, circles, outCircles, data }) => {\n            shape.attr('fill', '#eff1f7');\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n        {\n          name: 'default',\n          exec: (node, { shape, circles, data }) => {\n            shape.attr('fill', data.fillColor);\n            shape.attr('stroke', data.strokeColor);\n            shape.attr('lineWidth', 1);\n            shape.attr('cursor', 'move');\n            circles.forEach((circle) => {\n              circle.attr('opacity', 1);\n            });\n          },\n        },\n      ];\n      this.flow.registerState(nodeStates);\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    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: '#111925',\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: '#111925',\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: '#111925',\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: '#111925',\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: '#111925',\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: '#111925',\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  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/element/demo/edge.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/element/demo/edge.vue","order":2,"filename":"edge.vue","title":"自定义边","screenshot":"https://s3plus.sankuai.com/picture-online/docs/edge-demo.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 20,\n      y: 100,\n      title: '节点1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node2',\n      x: 20,\n      y: 250,\n      title: '节点2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node3',\n      x: 220,\n      y: 100,\n      title: '节点3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node4',\n      x: 220,\n      y: 250,\n      title: '节点4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node5',\n      x: 420,\n      y: 100,\n      title: '节点5',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node6',\n      x: 520,\n      y: 325,\n      title: '节点6',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node9',\n      x: 620,\n      y: 100,\n      title: '节点9',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node10',\n      x: 720,\n      y: 325,\n      title: '节点10',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node11',\n      x: 420,\n      y: 550,\n      title: '节点11',\n      inputs: [[0.5, 0]],\n      outputs: [\n        [0.5, 1],\n        [1, 0.5],\n      ],\n      width: 120,\n    },\n    {\n      id: 'node12',\n      x: 820,\n      y: 550,\n      title: '节点12',\n      inputs: [\n        [0.5, 0],\n        [0, 0.5],\n      ],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node7',\n      x: 120,\n      y: 400,\n      title: '节点7',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node8',\n      x: 220,\n      y: 550,\n      title: '节点8',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node13',\n      x: 120,\n      y: 675,\n      title: '节点13',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'baseLine',\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'baseLine',\n    },\n    {\n      source: 'node5',\n      target: 'node6',\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: 'basePolyLine',\n    },\n    {\n      source: 'node2',\n      target: 'node7',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        radius: 10,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node4',\n      target: 'node7',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node7',\n      target: 'node8',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'baseCubicLine',\n      baseLineCfg: {\n        type: 'rectText',\n        label: '依赖1232392392',\n        rectWidth: 56,\n      },\n    },\n    {\n      source: 'node9',\n      target: 'node10',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseCubicLine',\n      style: {\n        radius: 10,\n        endArrow: true,\n        stroke: '#fdae37',\n      },\n      baseLineCfg: {\n        type: 'dash',\n        showDashed: true,\n      },\n    },\n    {\n      source: 'node6',\n      target: 'node11',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n      baseLineCfg: {\n        label: '依赖',\n        type: 'rectText',\n        showDashed: true,\n      },\n    },\n    {\n      source: 'node11',\n      target: 'node12',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 1,\n      type: 'baseCubicLine',\n      baseLineCfg: {\n        type: 'icon',\n      },\n    },\n    {\n      source: 'node10',\n      target: 'node12',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n      baseLineCfg: {\n        label: '编辑',\n        type: 'statusText',\n      },\n    },\n    {\n      source: 'node7',\n      target: 'node13',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n      baseLineCfg: {\n        type: 'rectIcon',\n      },\n    },\n  ],\n};\n\nexport default {\n  name: 'Edge',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            type: 'basePolyline',\n            style: { radius: 10 },\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 20,\n      y: 100,\n      title: '节点1',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node2',\n      x: 20,\n      y: 250,\n      title: '节点2',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node3',\n      x: 220,\n      y: 100,\n      title: '节点3',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node4',\n      x: 220,\n      y: 250,\n      title: '节点4',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node5',\n      x: 420,\n      y: 100,\n      title: '节点5',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node6',\n      x: 520,\n      y: 325,\n      title: '节点6',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node9',\n      x: 620,\n      y: 100,\n      title: '节点9',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node10',\n      x: 720,\n      y: 325,\n      title: '节点10',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node11',\n      x: 420,\n      y: 550,\n      title: '节点11',\n      inputs: [[0.5, 0]],\n      outputs: [\n        [0.5, 1],\n        [1, 0.5],\n      ],\n      width: 120,\n    },\n    {\n      id: 'node12',\n      x: 820,\n      y: 550,\n      title: '节点12',\n      inputs: [\n        [0.5, 0],\n        [0, 0.5],\n      ],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node7',\n      x: 120,\n      y: 400,\n      title: '节点7',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node8',\n      x: 220,\n      y: 550,\n      title: '节点8',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n    {\n      id: 'node13',\n      x: 120,\n      y: 675,\n      title: '节点13',\n      inputs: [[0.5, 0]],\n      outputs: [[0.5, 1]],\n      width: 120,\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'baseLine',\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: false,\n      },\n      type: 'baseLine',\n    },\n    {\n      source: 'node5',\n      target: 'node6',\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: 'basePolyLine',\n    },\n    {\n      source: 'node2',\n      target: 'node7',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n        radius: 10,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node4',\n      target: 'node7',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'basePolyLine',\n    },\n    {\n      source: 'node7',\n      target: 'node8',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      style: {\n        endArrow: true,\n      },\n      type: 'baseCubicLine',\n      baseLineCfg: {\n        type: 'rectText',\n        label: '依赖1232392392',\n        rectWidth: 56,\n      },\n    },\n    {\n      source: 'node9',\n      target: 'node10',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseCubicLine',\n      style: {\n        radius: 10,\n        endArrow: true,\n        stroke: '#fdae37',\n      },\n      baseLineCfg: {\n        type: 'dash',\n        showDashed: true,\n      },\n    },\n    {\n      source: 'node6',\n      target: 'node11',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n      baseLineCfg: {\n        label: '依赖',\n        type: 'rectText',\n        showDashed: true,\n      },\n    },\n    {\n      source: 'node11',\n      target: 'node12',\n      sourceAnchorIndex: 1,\n      targetAnchorIndex: 1,\n      type: 'baseCubicLine',\n      baseLineCfg: {\n        type: 'icon',\n      },\n    },\n    {\n      source: 'node10',\n      target: 'node12',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'basePolyLine',\n      baseLineCfg: {\n        label: '编辑',\n        type: 'statusText',\n      },\n    },\n    {\n      source: 'node7',\n      target: 'node13',\n      sourceAnchorIndex: 0,\n      targetAnchorIndex: 0,\n      type: 'baseLine',\n      baseLineCfg: {\n        type: 'rectIcon',\n      },\n    },\n  ],\n};\n\nexport default {\n  name: 'Edge',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            type: 'basePolyline',\n            style: { radius: 10 },\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/element/demo/node.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/element/demo/node.vue","order":0,"filename":"node.vue","title":"基础节点","screenshot":"https://s3plus.sankuai.com/picture-online/docs/node-demo.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      id: 'node1',\n      x: 50,\n      y: 50,\n      title: '数据读写',\n    },\n    {\n      id: 'node2',\n      x: 50,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        leftFillWidth: 0,\n      },\n    },\n    {\n      id: 'node3',\n      x: 50,\n      y: 150,\n      title: '数据读写',\n      outPortFillColor: '#00A85A',\n      strokeColor: '#00A85A',\n      baseNodeCfg: {\n        blockFillColor: '#00A85A',\n      },\n    },\n    {\n      id: 'node4',\n      x: 350,\n      y: 50,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'icon',\n        icon: 'MTD3-MEITUANUI-B-check',\n      },\n    },\n    {\n      id: 'node5',\n      x: 350,\n      y: 150,\n      title: '数据读写',\n      color: '#00A85A',\n      baseNodeCfg: {\n        type: 'icon',\n        icon: 'MTD3-MEITUANUI-B-avatar-group',\n        blockFillColor: '#00A85A',\n      },\n    },\n    {\n      id: 'node6',\n      x: 350,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'icon',\n        icon: 'e69a',\n      },\n    },\n    {\n      id: 'node7',\n      x: 650,\n      y: 50,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n      },\n    },\n    {\n      id: 'node8',\n      x: 650,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n        blockTitle: '复合',\n      },\n    },\n    {\n      id: 'node9',\n      x: 650,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n        blockTitle: '复合',\n        blockFillColor: '#F08605',\n      },\n    },\n    {\n      id: 'node10',\n      x: 650,\n      y: 150,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n        blockTitle: '测试集',\n        blockFillColor: '#F08605',\n      },\n    },\n    {\n      id: 'node11',\n      x: 50,\n      y: 250,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n      },\n    },\n    {\n      id: 'node12',\n      x: 350,\n      y: 250,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        type: 'icon',\n        icon: 'e69a',\n      },\n    },\n    {\n      id: 'node13',\n      x: 650,\n      y: 250,\n      title: '用户数：234055',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '用户占比： 34%',\n        type: 'icon',\n        icon: 'e69a',\n      },\n    },\n    {\n      id: 'node14',\n      x: 50,\n      y: 350,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'notReady',\n      },\n    },\n    {\n      id: 'node15',\n      x: 50,\n      y: 400,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'inProgress',\n      },\n    },\n    {\n      id: 'node16',\n      x: 50,\n      y: 450,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n      },\n    },\n    {\n      id: 'node17',\n      x: 50,\n      y: 500,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'failure',\n      },\n    },\n    {\n      id: 'node18',\n      x: 50,\n      y: 550,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'stop',\n      },\n    },\n    {\n      id: 'node19',\n      x: 50,\n      y: 600,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'lock',\n      },\n    },\n    {\n      id: 'node20',\n      x: 350,\n      y: 350,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'special',\n        statusDesc: '异常',\n      },\n    },\n    {\n      id: 'node21',\n      x: 350,\n      y: 400,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        statusIcon: 'e67b',\n      },\n    },\n    {\n      id: 'node22',\n      x: 350,\n      y: 450,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        type: 'icon',\n        icon: 'e67b',\n      },\n    },\n    {\n      id: 'node23',\n      x: 350,\n      y: 500,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        type: 'icon',\n      },\n    },\n    {\n      id: 'node24',\n      x: 350,\n      y: 550,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        type: 'blockText',\n        blockTitle: '过滤',\n      },\n    },\n    {\n      id: 'node25',\n      x: 350,\n      y: 600,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'special',\n        type: 'blockText',\n        blockTitle: '过滤',\n        statusDesc: '异常',\n      },\n    },\n    {\n      id: 'node26',\n      x: 650,\n      y: 350,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        type: 'icon',\n        status: 'notReady',\n      },\n    },\n    {\n      id: 'node27',\n      x: 650,\n      y: 450,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        type: 'icon',\n        status: 'special',\n        statusDesc: '异常',\n      },\n    },\n    {\n      id: 'node28',\n      x: 650,\n      y: 550,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        status: 'special',\n        statusDesc: '异常集',\n      },\n    },\n  ],\n  // 边集\n  edges: [],\n};\n\nexport default {\n  name: 'baseNode',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      id: 'node1',\n      x: 50,\n      y: 50,\n      title: '数据读写',\n    },\n    {\n      id: 'node2',\n      x: 50,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        leftFillWidth: 0,\n      },\n    },\n    {\n      id: 'node3',\n      x: 50,\n      y: 150,\n      title: '数据读写',\n      outPortFillColor: '#00A85A',\n      strokeColor: '#00A85A',\n      baseNodeCfg: {\n        blockFillColor: '#00A85A',\n      },\n    },\n    {\n      id: 'node4',\n      x: 350,\n      y: 50,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'icon',\n        icon: 'MTD3-MEITUANUI-B-check',\n      },\n    },\n    {\n      id: 'node5',\n      x: 350,\n      y: 150,\n      title: '数据读写',\n      color: '#00A85A',\n      baseNodeCfg: {\n        type: 'icon',\n        icon: 'MTD3-MEITUANUI-B-avatar-group',\n        blockFillColor: '#00A85A',\n      },\n    },\n    {\n      id: 'node6',\n      x: 350,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'icon',\n        icon: 'e69a',\n      },\n    },\n    {\n      id: 'node7',\n      x: 650,\n      y: 50,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n      },\n    },\n    {\n      id: 'node8',\n      x: 650,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n        blockTitle: '复合',\n      },\n    },\n    {\n      id: 'node9',\n      x: 650,\n      y: 100,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n        blockTitle: '复合',\n        blockFillColor: '#F08605',\n      },\n    },\n    {\n      id: 'node10',\n      x: 650,\n      y: 150,\n      title: '数据读写',\n      baseNodeCfg: {\n        type: 'blockText',\n        blockTitle: '测试集',\n        blockFillColor: '#F08605',\n      },\n    },\n    {\n      id: 'node11',\n      x: 50,\n      y: 250,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n      },\n    },\n    {\n      id: 'node12',\n      x: 350,\n      y: 250,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        type: 'icon',\n        icon: 'e69a',\n      },\n    },\n    {\n      id: 'node13',\n      x: 650,\n      y: 250,\n      title: '用户数：234055',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '用户占比： 34%',\n        type: 'icon',\n        icon: 'e69a',\n      },\n    },\n    {\n      id: 'node14',\n      x: 50,\n      y: 350,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'notReady',\n      },\n    },\n    {\n      id: 'node15',\n      x: 50,\n      y: 400,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'inProgress',\n      },\n    },\n    {\n      id: 'node16',\n      x: 50,\n      y: 450,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n      },\n    },\n    {\n      id: 'node17',\n      x: 50,\n      y: 500,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'failure',\n      },\n    },\n    {\n      id: 'node18',\n      x: 50,\n      y: 550,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'stop',\n      },\n    },\n    {\n      id: 'node19',\n      x: 50,\n      y: 600,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'lock',\n      },\n    },\n    {\n      id: 'node20',\n      x: 350,\n      y: 350,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'special',\n        statusDesc: '异常',\n      },\n    },\n    {\n      id: 'node21',\n      x: 350,\n      y: 400,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        statusIcon: 'e67b',\n      },\n    },\n    {\n      id: 'node22',\n      x: 350,\n      y: 450,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        type: 'icon',\n        icon: 'e67b',\n      },\n    },\n    {\n      id: 'node23',\n      x: 350,\n      y: 500,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        type: 'icon',\n      },\n    },\n    {\n      id: 'node24',\n      x: 350,\n      y: 550,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'success',\n        type: 'blockText',\n        blockTitle: '过滤',\n      },\n    },\n    {\n      id: 'node25',\n      x: 350,\n      y: 600,\n      title: '数据读写',\n      baseNodeCfg: {\n        status: 'special',\n        type: 'blockText',\n        blockTitle: '过滤',\n        statusDesc: '异常',\n      },\n    },\n    {\n      id: 'node26',\n      x: 650,\n      y: 350,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        type: 'icon',\n        status: 'notReady',\n      },\n    },\n    {\n      id: 'node27',\n      x: 650,\n      y: 450,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        type: 'icon',\n        status: 'special',\n        statusDesc: '异常',\n      },\n    },\n    {\n      id: 'node28',\n      x: 650,\n      y: 550,\n      title: 'dim_sc_grid_ext',\n      width: 200,\n      baseNodeCfg: {\n        subTitle: '供应链-网格化-维度扩展表',\n        status: 'special',\n        statusDesc: '异常集',\n      },\n    },\n  ],\n  // 边集\n  edges: [],\n};\n\nexport default {\n  name: 'baseNode',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/orientation/demo/orientation-LR.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/orientation/demo/orientation-LR.vue","order":0,"filename":"orientation-LR.vue","title":"横向排列","screenshot":"https://s3plus.sankuai.com/picture-online/docs/orientation-LR.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      title: 'node 1',\n    },\n    {\n      id: '2',\n      title: 'node 2-1',\n    },\n    {\n      id: '3',\n      title: 'node 2-2',\n    },\n    {\n      id: '4',\n      title: 'node 3-1',\n    },\n    {\n      id: '5',\n      title: 'node 3-2',\n    },\n    {\n      id: '6',\n      title: 'node 3-3',\n    },\n    {\n      id: '7',\n      title: 'node 3-4',\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n    },\n    {\n      source: '1',\n      target: '3',\n    },\n    {\n      source: '2',\n      target: '4',\n    },\n    {\n      source: '2',\n      target: '5',\n    },\n    {\n      source: '3',\n      target: '6',\n    },\n    {\n      source: '3',\n      target: '7',\n    },\n  ],\n};\nexport default {\n  name: 'orientationLR',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesep: 45,\n            ranksep: 60,\n            rankdir: 'LR',\n          },\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      title: 'node 1',\n    },\n    {\n      id: '2',\n      title: 'node 2-1',\n    },\n    {\n      id: '3',\n      title: 'node 2-2',\n    },\n    {\n      id: '4',\n      title: 'node 3-1',\n    },\n    {\n      id: '5',\n      title: 'node 3-2',\n    },\n    {\n      id: '6',\n      title: 'node 3-3',\n    },\n    {\n      id: '7',\n      title: 'node 3-4',\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n    },\n    {\n      source: '1',\n      target: '3',\n    },\n    {\n      source: '2',\n      target: '4',\n    },\n    {\n      source: '2',\n      target: '5',\n    },\n    {\n      source: '3',\n      target: '6',\n    },\n    {\n      source: '3',\n      target: '7',\n    },\n  ],\n};\nexport default {\n  name: 'orientationLR',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesep: 45,\n            ranksep: 60,\n            rankdir: 'LR',\n          },\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/orientation/demo/orientation-TB.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/orientation/demo/orientation-TB.vue","order":1,"filename":"orientation-TB.vue","title":"竖向排列","screenshot":"https://s3plus.sankuai.com/picture-online/docs/orientation-TB.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      title: 'node 1',\n    },\n    {\n      id: '2',\n      title: 'node 2-1',\n    },\n    {\n      id: '3',\n      title: 'node 2-2',\n    },\n    {\n      id: '4',\n      title: 'node 3-1',\n    },\n    {\n      id: '5',\n      title: 'node 3-2',\n    },\n    {\n      id: '6',\n      title: 'node 3-3',\n    },\n    {\n      id: '7',\n      title: 'node 3-4',\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n    },\n    {\n      source: '1',\n      target: '3',\n    },\n    {\n      source: '2',\n      target: '4',\n    },\n    {\n      source: '2',\n      target: '5',\n    },\n    {\n      source: '3',\n      target: '6',\n    },\n    {\n      source: '3',\n      target: '7',\n    },\n  ],\n};\nexport default {\n  name: 'orientationTB',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesep: 50,\n            ranksep: 50,\n            rankdir: 'TB',\n          },\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  nodes: [\n    {\n      id: '1',\n      title: 'node 1',\n    },\n    {\n      id: '2',\n      title: 'node 2-1',\n    },\n    {\n      id: '3',\n      title: 'node 2-2',\n    },\n    {\n      id: '4',\n      title: 'node 3-1',\n    },\n    {\n      id: '5',\n      title: 'node 3-2',\n    },\n    {\n      id: '6',\n      title: 'node 3-3',\n    },\n    {\n      id: '7',\n      title: 'node 3-4',\n    },\n  ],\n  edges: [\n    {\n      source: '1',\n      target: '2',\n    },\n    {\n      source: '1',\n      target: '3',\n    },\n    {\n      source: '2',\n      target: '4',\n    },\n    {\n      source: '2',\n      target: '5',\n    },\n    {\n      source: '3',\n      target: '6',\n    },\n    {\n      source: '3',\n      target: '7',\n    },\n  ],\n};\nexport default {\n  name: 'orientationTB',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n          layout: {\n            type: 'dagre',\n            nodesep: 50,\n            ranksep: 50,\n            rankdir: 'TB',\n          },\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/vis/demo/dagre.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/vis/demo/dagre.vue","order":1,"filename":"dagre.vue","title":"流程图","screenshot":"https://s3plus.sankuai.com/picture-online/docs/drage.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      id: 'node1',\n      title: '节点1',\n    },\n    {\n      id: 'node2',\n      title: '节点2',\n    },\n    {\n      id: 'node3',\n      title: '节点3',\n    },\n    {\n      id: 'node4',\n      title: '节点4',\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n    {\n      source: 'node1',\n      target: 'node3',\n    },\n    {\n      source: 'node2',\n      target: 'node4',\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n    },\n  ],\n};\n\nexport default {\n  name: 'Dagre',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n          layout: {\n            type: 'dagre',\n            nodesep: 50,\n            ranksep: 30,\n            rankdir: 'TB',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      id: 'node1',\n      title: '节点1',\n    },\n    {\n      id: 'node2',\n      title: '节点2',\n    },\n    {\n      id: 'node3',\n      title: '节点3',\n    },\n    {\n      id: 'node4',\n      title: '节点4',\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n    {\n      source: 'node1',\n      target: 'node3',\n    },\n    {\n      source: 'node2',\n      target: 'node4',\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n    },\n  ],\n};\n\nexport default {\n  name: 'Dagre',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          showPort: false,\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n          layout: {\n            type: 'dagre',\n            nodesep: 50,\n            ranksep: 30,\n            rankdir: 'TB',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/vis/demo/flow.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/vis/demo/flow.vue","order":0,"filename":"flow.vue","title":"编排图","screenshot":"https://s3plus.sankuai.com/picture-online/docs/base-demo.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      id: 'node1',\n      title: '节点1',\n    },\n    {\n      id: 'node2',\n      title: '节点2',\n    },\n    {\n      id: 'node3',\n      title: '节点3',\n    },\n    {\n      id: 'node4',\n      title: '节点4',\n    },\n    {\n      id: 'node5',\n      title: '节点5',\n    },\n    {\n      id: 'node6',\n      title: '节点6',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n    {\n      source: 'node1',\n      target: 'node3',\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n    },\n    {\n      source: 'node4',\n      target: 'node6',\n    },\n  ],\n};\n\nexport default {\n  name: 'FlowGraph',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n          layout: {\n            type: 'dagre',\n            nodesep: 50,\n            ranksep: 60,\n            rankdir: 'LR',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  // 点集\n  nodes: [\n    {\n      id: 'node1',\n      title: '节点1',\n    },\n    {\n      id: 'node2',\n      title: '节点2',\n    },\n    {\n      id: 'node3',\n      title: '节点3',\n    },\n    {\n      id: 'node4',\n      title: '节点4',\n    },\n    {\n      id: 'node5',\n      title: '节点5',\n    },\n    {\n      id: 'node6',\n      title: '节点6',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n    {\n      source: 'node1',\n      target: 'node3',\n    },\n    {\n      source: 'node3',\n      target: 'node4',\n    },\n    {\n      source: 'node3',\n      target: 'node5',\n    },\n    {\n      source: 'node4',\n      target: 'node6',\n    },\n  ],\n};\n\nexport default {\n  name: 'FlowGraph',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          container: this.$refs.graph,\n          defaultEdge: {\n            type: 'basePolyLine',\n          },\n          layout: {\n            type: 'dagre',\n            nodesep: 50,\n            ranksep: 60,\n            rankdir: 'LR',\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"},{"relativePath":"mtdv-graph-flow/vis/demo/tree.vue","absolutePath":"/opt/meituan/tmp/59211138_156390481/examples/mtdv-graph-flow/vis/demo/tree.vue","order":2,"filename":"tree.vue","title":"树图","screenshot":"https://s3plus.sankuai.com/picture-online/docs/tree.png","source":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  id: '1',\n  label: '事物',\n  children: [\n    {\n      id: '1-1',\n      label: '自然人',\n      children: [\n        {\n          id: '1-1-1',\n          label: '电影人',\n          children: [\n            {\n              id: '1-1-1-1',\n              label: '电影导演',\n              children: [],\n            },\n            {\n              id: '1-1-1-2',\n              label: '电影编剧',\n              children: [],\n            },\n          ],\n        },\n      ],\n    },\n    {\n      id: '1-2',\n      label: '音乐',\n      children: [],\n    },\n    {\n      id: '1-3',\n      label: '电影',\n      children: [\n        {\n          id: '1-3-1',\n          label: '喜剧',\n          children: [],\n        },\n      ],\n    },\n    {\n      id: '1-4',\n      label: '电影类别',\n      children: [],\n    },\n    {\n      id: '1-5',\n      label: '机构',\n      children: [\n        {\n          id: '1-5-1',\n          label: '公司',\n          children: [\n            {\n              id: '1-5-1-1',\n              label: '电影公司',\n              children: [],\n            },\n            {\n              id: '1-5-1-2',\n              label: '音乐公司',\n              children: [],\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n\nexport default {\n  name: 'TreeGraph',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          graphType: 'treeGraph',\n          container: this.$refs.graph,\n          showPort: false,\n          layout: {\n            type: 'compactBox',\n            direction: 'LR',\n            dropCap: false,\n            indent: 300,\n            getHeight: () => 16,\n            getVGap: () => 15,\n            getHGap: () => 30,\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n","babeledSource":"<template>\n  <div class=\"graph-container\" ref=\"graph\"></div>\n</template>\n\n<script>\nconst graphData = {\n  id: '1',\n  label: '事物',\n  children: [\n    {\n      id: '1-1',\n      label: '自然人',\n      children: [\n        {\n          id: '1-1-1',\n          label: '电影人',\n          children: [\n            {\n              id: '1-1-1-1',\n              label: '电影导演',\n              children: [],\n            },\n            {\n              id: '1-1-1-2',\n              label: '电影编剧',\n              children: [],\n            },\n          ],\n        },\n      ],\n    },\n    {\n      id: '1-2',\n      label: '音乐',\n      children: [],\n    },\n    {\n      id: '1-3',\n      label: '电影',\n      children: [\n        {\n          id: '1-3-1',\n          label: '喜剧',\n          children: [],\n        },\n      ],\n    },\n    {\n      id: '1-4',\n      label: '电影类别',\n      children: [],\n    },\n    {\n      id: '1-5',\n      label: '机构',\n      children: [\n        {\n          id: '1-5-1',\n          label: '公司',\n          children: [\n            {\n              id: '1-5-1-1',\n              label: '电影公司',\n              children: [],\n            },\n            {\n              id: '1-5-1-2',\n              label: '音乐公司',\n              children: [],\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n\nexport default {\n  name: 'TreeGraph',\n  mounted() {\n    this.initGraph();\n  },\n  methods: {\n    initGraph() {\n      new Flow(\n        {\n          graphType: 'treeGraph',\n          container: this.$refs.graph,\n          showPort: false,\n          layout: {\n            type: 'compactBox',\n            direction: 'LR',\n            dropCap: false,\n            indent: 300,\n            getHeight: () => 16,\n            getVGap: () => 15,\n            getHGap: () => 30,\n          },\n        },\n        graphData\n      );\n    },\n  },\n};\n</script>\n"}],"components":[]}},"staticQueryHashes":["1976131296","3000541721","3000541721","340017852"]}