暂存，ETA_1.1.7内容修改

src/views/sandbox_manage/common/events.js

@@ -7,7 +7,6 @@ export const myEvents = (graph) => {
 
 		/* 节点双击编辑 */
 		graph.on('node:dblclick', ({ node, e }) => {
-
 			// 节点当前设置的样式同步到编辑区
 			const { text, rect} = node.attrs;
 
@@ -67,7 +66,7 @@ export const myEvents = (graph) => {
 				let newval = edit_area.innerText.replace(/(\n[\s\t]*\r*\n)/g,'\n');
 				node.attr('text/textWrap/text', newval);
 				node.attr('text/text', newval);
-				
+				console.log(node);
 				const domH = (edit_area.getBoundingClientRect().height) /zoom;
 				// node.size(width,domH > 50 ? domH : 50);
 				node.size(width,domH);
@@ -161,7 +160,7 @@ export const myEvents = (graph) => {
 		// 	selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
 		// })
 		graph.on('edge:mouseenter', ({ cell }) => {
-			console.log(cell.store.data);
+			// console.log(cell.store.data);
 			if(cell.store.data.shape=="mindmap-edge"){
 				// 思维导图的边
 			}else{

src/views/sandbox_manage/common/mindmap.js

@@ -1,367 +1,331 @@
 import { Graph, Cell, Node, Path } from '@antv/x6'
 import Hierarchy from '@antv/hierarchy'
-
-// 中心主题
-Graph.registerNode(
-  'topic',          
-  {
-    inherit: 'rect',
-    markup: [
-      {
-        tagName: 'rect',
-        selector: 'body',
-      },
-      {
-        tagName: 'image',
-        selector: 'img',
-      },
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    
+  },
+  created() {
+    // 中心主题
+    Graph.registerNode(
+      'topic',          
       {
-        tagName: 'text',
-        selector: 'label',
-      },
-    ],
-    attrs: {
-      body: {
-        rx: 6,
-        ry: 6,
-        stroke: '#5F95FF',
-        fill: '#EFF4FF',
-        strokeWidth: 1,
-      },
-      img: {
-        ref: 'body',
-        refX: '100%',
-        refY: '50%',
-        refY2: -8,
-        width: 16,
-        height: 16,
-        'xlink:href':
-          'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',
-        event: 'add:topic',
-        class: 'topic-image',
-      },
-      label: {
-        fontSize: 14,
-        fill: '#262626',
+        inherit: 'rect',
+        markup: [
+          {
+            tagName: 'rect',
+            selector: 'body',
+          },
+          {
+            tagName: 'image',
+            selector: 'img',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
+          },
+        ],
+        attrs: {
+          body: {
+            rx: 6,
+            ry: 6,
+            stroke: '#5F95FF',
+            fill: '#EFF4FF',
+            strokeWidth: 1,
+          },
+          img: {
+            ref: 'body',
+            refX: '100%',
+            refY: '50%',
+            refY2: -8,
+            width: 16,
+            height: 16,
+            'xlink:href':
+              'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',
+            event: 'add:topic',
+            class: 'topic-image',
+          },
+          label: {
+            fontSize: 14,
+            fill: '#262626',
+          },
+        },
       },
-    },
-  },
-  true,
-)
+      true,
+    )
 
-// 分支主题
-Graph.registerNode(
-  'topic-child',
-  {
-    inherit: 'rect',
-    markup: [
+    // 分支主题
+    Graph.registerNode(
+      'topic-child',
       {
-        tagName: 'rect',
-        selector: 'body',
+        inherit: 'rect',
+        markup: [
+          {
+            tagName: 'rect',
+            selector: 'body',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
+          },
+          {
+            tagName: 'path',
+            selector: 'line',
+          },
+        ],
+        attrs: {
+          body: {
+            fill: '#ffffff',
+            strokeWidth: 0,
+            stroke: '#5F95FF',
+          },
+          label: {
+            fontSize: 14,
+            fill: '#262626',
+            textVerticalAnchor: 'bottom',
+          },
+          line: {
+            stroke: '#5F95FF',
+            strokeWidth: 2,
+            d: 'M 0 15 L 60 15',
+          },
+        },
       },
-      {
-        tagName: 'text',
-        selector: 'label',
+      true,
+    )
+
+    // 连接器
+    Graph.registerConnector(
+      'mindmap',
+      (sourcePoint, targetPoint, routerPoints, options) => {
+        const midX = sourcePoint.x + 10
+        const midY = sourcePoint.y
+        const ctrX = (targetPoint.x - midX) / 5 + midX
+        const ctrY = targetPoint.y
+        const pathData = `
+        M ${sourcePoint.x} ${sourcePoint.y}
+        L ${midX} ${midY}
+        Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
+        `
+        return options.raw ? Path.parse(pathData) : pathData
       },
+      true,
+    )
+
+    // 边
+    Graph.registerEdge(
+      'mindmap-edge',
       {
-        tagName: 'path',
-        selector: 'line',
-      },
-    ],
-    attrs: {
-      body: {
-        fill: '#ffffff',
-        strokeWidth: 0,
-        stroke: '#5F95FF',
-      },
-      label: {
-        fontSize: 14,
-        fill: '#262626',
-        textVerticalAnchor: 'bottom',
-      },
-      line: {
-        stroke: '#5F95FF',
-        strokeWidth: 2,
-        d: 'M 0 15 L 60 15',
+        inherit: 'edge',
+        connector: {
+          name: 'mindmap',
+        },
+        attrs: {
+          line: {
+            targetMarker: '',
+            stroke: '#A2B1C3',
+            strokeWidth: 2,
+          },
+        },
+        zIndex: 0,
       },
-    },
+      true,
+    )
   },
-  true,
-)
-
-// 连接器
-Graph.registerConnector(
-  'mindmap',
-  (sourcePoint, targetPoint, routerPoints, options) => {
-    const midX = sourcePoint.x + 10
-    const midY = sourcePoint.y
-    const ctrX = (targetPoint.x - midX) / 5 + midX
-    const ctrY = targetPoint.y
-    const pathData = `
-     M ${sourcePoint.x} ${sourcePoint.y}
-     L ${midX} ${midY}
-     Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
-    `
-    return options.raw ? Path.parse(pathData) : pathData
-  },
-  true,
-)
-
-// 边
-Graph.registerEdge(
-  'mindmap-edge',
-  {
-    inherit: 'edge',
-    connector: {
-      name: 'mindmap',
-    },
-    attrs: {
-      line: {
-        targetMarker: '',
-        stroke: '#A2B1C3',
-        strokeWidth: 2,
-      },
+  methods: {
+    setGraph(){
+      this.graph.on('add:topic', ({ node }) => {
+        console.log(this.mindMapData,'this.mindMapData');
+        const { id } = node
+        const type = node.prop('type')
+        if (this.addChildNode(id, type)) {
+          this.mindMapRender(this.mindmapPosition)      
+        }
+      })
+    
+      this.graph.on('node:change:position', (args) => { 
+        if(args.node.id==='1'){
+          this.mindmapPosition = args.current
+        }
+      })
+      this.graph.on('cell:change:label:', (args) => { 
+        console.log(args);
+      })
+      // this.graph.bindKey(['backspace', 'delete'], () => {
+      //   const selectedNodes = this.graph.getSelectedCells().filter((item) => item.isNode())
+      //   if (selectedNodes.length) {
+      //     const { id } = selectedNodes[0]
+      //     if (this.removeNode(id)) {
+      //       this.mindMapRender()
+      //     }
+      //   }
+      // })
+      
+      this.graph.bindKey('tab', (e) => {
+        e.preventDefault()
+        const selectedNodes = this.graph.getSelectedCells().filter((item) => item.isNode())
+        if (selectedNodes.length) {
+          const node = selectedNodes[0]
+          const type = node.prop('type')
+          if (this.addChildNode(node.id, type)) {
+            // this.mindMapRender()
+          }
+        }
+      })
     },
-    zIndex: 0,
-  },
-  true,
-)
+    mindMapRender(){
 
-const data = {
-  id: Math.random()+"",
-  type: 'topic',
-  label: '中心主题',
-  width: 160,
-  height: 50,
-  children: [
-    {
-      id: Math.random()+'-1',
-      type: 'topic-branch',
-      label: '分支主题1',
-      width: 100,
-      height: 40,
-      children: [
-        {
-          id: Math.random()+'-1-1',
-          type: 'topic-child',
-          label: '子主题1',
-          width: 60,
-          height: 30,
+      console.log(this.mindMapData);
+      const result = Hierarchy.mindmap(this.mindMapData, {
+        direction: 'H',
+        getHeight(d) {
+          return d.height
         },
-        {
-          id: Math.random()+'-1-2',
-          type: 'topic-child',
-          label: '子主题2',
-          width: 60,
-          height: 30,
+        getWidth(d) {
+          return d.width
         },
-      ],
-    },
-    {
-      id: Math.random()+'-2',
-      type: 'topic-branch',
-      label: '分支主题2',
-      width: 100,
-      height: 40,
-    },
-  ],
-}
-
-let graphIn;
-
-export const setGraph=(graph)=>{
-  graphIn = graph
-
-  graphIn.on('add:topic', ({ node }) => {
-    const { id } = node
-    const type = node.prop('type')
-    if (addChildNode(id, type)) {
-      render()
-    }
-  })
-  // graphIn.bindKey(['backspace', 'delete'], () => {
-  //   const selectedNodes = graphIn.getSelectedCells().filter((item) => item.isNode())
-  //   if (selectedNodes.length) {
-  //     const { id } = selectedNodes[0]
-  //     if (removeNode(id)) {
-  //       render()
-  //     }
-  //   }
-  // })
-  
-  graphIn.bindKey('tab', (e) => {
-    e.preventDefault()
-    const selectedNodes = graphIn.getSelectedCells().filter((item) => item.isNode())
-    if (selectedNodes.length) {
-      const node = selectedNodes[0]
-      const type = node.prop('type')
-      if (addChildNode(node.id, type)) {
-        render()
-      }
-    }
-  })
-}
-
-export const render = (position) => {
-  console.log("addaddaddaddaddadd");
-  // data.x = position.x
-  // data.y = position.y
-  const result = Hierarchy.mindmap(data, {
-    direction: 'H',
-    getHeight(d) {
-      console.log(d,'getHeight');
-      return d.height
-    },
-    getWidth(d) {
-      return d.width
-    },
-    getHGap() {
-      return 40
-    },
-    getVGap() {
-      return 20
-    },
-    getSide: () => {
-      return 'right'
-    },
-    center:[0,0]
-  })
-  const cells = []
-  let xGap = position?position.x-result.x:0
-  let yGap = position?position.y-result.y:0
-
-  console.log(yGap,xGap,'datadatadata');
-
-  // console.log(position.x-result.x,position.y-result.y);
-
-  // result.x = position.x
-  // result.y = position.y
-  const traverse = (hierarchyItem) => {
-    if (hierarchyItem) {
-      const { data, children } = hierarchyItem
-      console.log(data.id,'hierarchyItemhierarchyItemhierarchyItem');
-      cells.push(
-        graphIn.createNode({
-          id: data.id,
-          shape: data.type === 'topic-child' ? 'topic-child' : 'topic',
-          x: xGap+hierarchyItem.x,
-          y: yGap+hierarchyItem.y,
-          width: data.width,
-          height: data.height,
-          label: data.label,
-          type: data.type,
-        }),
-      )
-      if (children) {
-        children.forEach((item) => {
-          const { id, data } = item
+        getHGap() {
+          return 40
+        },
+        getVGap() {
+          return 20
+        },
+        getSide: () => {
+          return 'right'
+        }
+      })
+      const cells = []
+      let xGap = this.mindmapPosition?this.mindmapPosition.x-result.x:0
+      let yGap = this.mindmapPosition?this.mindmapPosition.y-result.y:0
+    
+      const traverse = (hierarchyItem) => {
+        if (hierarchyItem) {
+          const { data, children } = hierarchyItem
+          console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
           cells.push(
-            graphIn.createEdge({
-              shape: 'mindmap-edge',
-              source: {
-                cell: hierarchyItem.id,
-                anchor:
-                  data.type === 'topic-child'
-                    ? {
-                        name: 'right',
-                        args: {
-                          dx: -16,
-                        },
-                      }
-                    : {
-                        name: 'center',
-                        args: {
-                          dx: '25%',
-                        },
-                      },
-              },
-              target: {
-                cell: id,
-                anchor: {
-                  name: 'left',
-                },
-              },
+            this.graph.createNode({
+              id: data.id,
+              shape: data.type === 'topic-child' ? 'topic-child' : 'topic',
+              x: xGap+hierarchyItem.x,
+              y: yGap+hierarchyItem.y,
+              width: data.width,
+              height: data.height,
+              label: data.label,
+              type: data.type,
             }),
           )
-          traverse(item)
-        })
+          if (children) {
+            children.forEach((item) => {
+              const { id, data } = item
+              cells.push(
+                this.graph.createEdge({
+                  shape: 'mindmap-edge',
+                  source: {
+                    cell: hierarchyItem.id,
+                    anchor:
+                      data.type === 'topic-child'
+                        ? {
+                            name: 'right',
+                            args: {
+                              dx: -16,
+                            },
+                          }
+                        : {
+                            name: 'center',
+                            args: {
+                              dx: '25%',
+                            },
+                          },
+                  },
+                  target: {
+                    cell: id,
+                    anchor: {
+                      name: 'left',
+                    },
+                  },
+                }),
+              )
+              traverse(item)
+            })
+          }
+        }
       }
-    }
-  }
-  traverse(result)
-  console.log(graphIn);
-  console.log(cells);
-  graphIn.addCell(cells)
-  // graphIn.resetCells(cells)
-  // graphIn.centerContent()
-}
-
-const findItem = (obj,id) => {
-  if (obj.id === id) {
-    return {
-      parent: null,
-      node: obj,
-    }
-  }
-  const { children } = obj
-  if (children) {
-    for (let i = 0, len = children.length; i < len; i++) {
-      const res = findItem(children[i], id)
-      if (res) {
+      traverse(result)
+      console.log(cells,'result');
+      this.graph.removeCells(cells)
+      this.graph.addCell(cells)
+      // this.graph.resetCells(cells)
+      // this.graph.centerContent()
+    },
+    findItem(obj,id){
+      if (obj.id === id) {
         return {
-          parent: res.parent || obj,
-          node: res.node,
+          parent: null,
+          node: obj,
         }
       }
-    }
-  }
-  return null
-}
-
-const addChildNode = (id, type) => {
-  const res = findItem(data, id)
-  const dataItem = res && res.node
-  if (dataItem) {
-    let item = null
-    const length = dataItem.children ? dataItem.children.length : 0
-    if (type === 'topic') {
-      item = {
-        id: `${id}-${length + 1}`,
-        type: 'topic-branch',
-        label: `分支主题${length + 1}`,
-        width: 100,
-        height: 40,
+      const { children } = obj
+      if (children) {
+        for (let i = 0, len = children.length; i < len; i++) {
+          const res = this.findItem(children[i], id)
+          if (res) {
+            return {
+              parent: res.parent || obj,
+              node: res.node,
+            }
+          }
+        }
       }
-    } else if (type === 'topic-branch') {
-      item = {
-        id: `${id}-${length + 1}`,
-        type: 'topic-child',
-        label: `子主题${length + 1}`,
-        width: 60,
-        height: 30,
+      return null
+    },
+    addChildNode (id, type){
+      const res = this.findItem(this.mindMapData, id)
+    
+      const dataItem = res && res.node
+      if (dataItem) {
+        let item = null
+        const length = dataItem.children ? dataItem.children.length : 0
+        if (type === 'topic') {
+          item = {
+            id: `${id}-${length + 1}`,
+            type: 'topic-branch',
+            label: `分支主题${length + 1}`,
+            width: 100,
+            height: 40,
+          }
+        } else if (type === 'topic-branch') {
+          item = {
+            id: `${id}-${length + 1}`,
+            type: 'topic-child',
+            label: `子主题${length + 1}`,
+            width: 60,
+            height: 30,
+          }
+        }
+        if (item) {
+          if (dataItem.children) {
+            dataItem.children.push(item)
+          } else {
+            dataItem.children = [item]
+          }
+          return item
+        }
       }
-    }
-    if (item) {
-      if (dataItem.children) {
-        dataItem.children.push(item)
-      } else {
-        dataItem.children = [item]
+      return null
+    },
+    removeNode (id) {
+      const res = this.findItem(this.mindMapData, id)
+      const dataItem = res && res.parent
+      if (dataItem && dataItem.children) {
+        const { children } = dataItem
+        const index = children.findIndex((item) => item.id === id)
+        return children.splice(index, 1)
       }
-      return item
+      return null
     }
-  }
-  return null
-}
-
-const removeNode = (id) => {
-  const res = findItem(data, id)
-  const dataItem = res && res.parent
-  if (dataItem && dataItem.children) {
-    const { children } = dataItem
-    const index = children.findIndex((item) => item.id === id)
-    return children.splice(index, 1)
-  }
-  return null
+  },
 }
-
-// render()

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -100,7 +100,8 @@ import { myNodes,myNodeOption } from '../common/node';
 import { myEdgeOption } from '../common/edge';
 import { Addon } from '@antv/x6'
 import { configOpt } from '../common/toolConfig';
-import {setGraph,render} from "../common/mindmap"
+// import {setGraph,render} from "../common/mindmap"
+import mindmap from "../common/mindmap"
 import {styleSettings} from "../common/toolConfig"
 
 const { line} = configOpt;
@@ -111,11 +112,52 @@ const { line} = configOpt;
         graph: null,
         dnd:null,
         initData: {},
-        activeToolTabName:"风格",
+        activeToolTabName:"元素库",
         addEdgeType:"",
-        styleActive:1
+        styleActive:1,
+        mindMapData:{
+          id: "1",
+          type: 'topic',
+          label: '中心主题',
+          width: 160,
+          height: 50,
+          children: [
+            {
+              id: '1-1',
+              type: 'topic-branch',
+              label: '分支主题1',
+              width: 100,
+              height: 40,
+              children: [
+                {
+                  id: '1-1-1',
+                  type: 'topic-child',
+                  label: '子主题1',
+                  width: 60,
+                  height: 30,
+                },
+                {
+                  id: '1-1-2',
+                  type: 'topic-child',
+                  label: '子主题2',
+                  width: 60,
+                  height: 30,
+                },
+              ],
+            },
+            {
+              id: '1-2',
+              type: 'topic-branch',
+              label: '分支主题2',
+              width: 100,
+              height: 40,
+            },
+          ],
+        },
+        mindmapPosition:{},
       }
     },
+    mixins:[mindmap],
     watch: {
       initData(newval) {
         console.log(newval)
@@ -155,7 +197,7 @@ const { line} = configOpt;
             return true;
           },
         });
-        setGraph(graph)
+        this.setGraph()
 		  },
       dragStart(data,e) {
         // console.log(data,e,"触发了")
@@ -182,11 +224,11 @@ const { line} = configOpt;
         console.log(this.addEdgeType,e);
         console.log(this.graph);
         let position = this.graph.clientToLocal({x:e.clientX,y:e.clientY})
-
         if(this.addEdgeType.indexOf("Mindmap")!==-1){
           //插入思维导图
           console.log("插入思维导图");
-          render(position)
+          this.mindmapPosition=position
+          this.mindMapRender()
         }else{
           this.graph.addEdge({
             shape:'edge',
@@ -228,7 +270,7 @@ const { line} = configOpt;
 
       },
       saveChart(){
-        console.log(this.myEdgeOption);
+        console.log(this.mindMapData,'this.mindMapData');
       }
     },
   }