暂存

src/views/sandbox_manage/common/events.js

@@ -84,28 +84,18 @@ export const myEvents = (graph,mindmapDataUse) => {
 
 				if(node.shape.indexOf('mindmap')!==-1){
 
-          // console.log(args.node.size());
-					// 转化成需要修改的索引队列
-					let indexSequence = node.id.split('-').map(idn => +idn-1)
-
-					let index = indexSequence[0] || 0
-					let mindMapDataCurrent = mindmapDataUse[index]?mindmapDataUse[index].mindmapData:{}
-
-					let changeData=[mindMapDataCurrent]
-
-					// console.log(indexSequence,'indexSequence');
-					let selectMindmap = changeData[0]
-					for (let i = 1; i < indexSequence.length; i++) {
-						let element = indexSequence[i]
-						selectMindmap= selectMindmap.children[element]
+					let ids = node.id.split('-')
+					let mindmapDataIndex = mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
+					let mindMapDataCurrent = mindmapDataUse[mindmapDataIndex]?mindmapDataUse[mindmapDataIndex].mindmapData:{}
+
+					let findId = ids[0]
+					for (let i = 1; i < ids.length; i++) {
+						const element = ids[i];
+						findId = findId+'-'+element
+						mindMapDataCurrent=mindMapDataCurrent.children.find(it => it.id==findId)
 					}
-					// console.log(selectMindmap);
-					selectMindmap.label = newval
+					mindMapDataCurrent.label = newval
 				}
-				// else{
-				// 	node.attr('text/textWrap/text', newval);
-				// 	node.attr('text/text', newval);
-				// }
 				if(node.shape.indexOf('mindmap')==-1){
 					const domH = (edit_area.getBoundingClientRect().height) /zoom;
 					// node.size(width,domH > 50 ? domH : 50);
@@ -118,18 +108,6 @@ export const myEvents = (graph,mindmapDataUse) => {
 
 				$('#sand-chart-container')[0].removeChild(edit_area);
 			}
-
-			// node.addTools({
-			// 	name: 'node-editor',
-			// 	args: {
-			// 		event: e,
-			// 		attrs: {
-			// 			fontSize: text.fontSize,
-			// 			color: text.fill,
-			// 			backgroundColor: rect.fill === 'transparent' ? '#fff' : rect.fill,
-			// 		},
-			// 	},
-			// })
 		})
 		/* 鼠标移入移出控制连接桩 */
 		graph.on('node:mouseenter', ({ node, e }) => {
@@ -259,13 +237,12 @@ export const myEvents = (graph,mindmapDataUse) => {
 }
 
 /* 绑定键盘事件 */
-export const bindKey = (graph,mindmapDataUse) => {
+export const bindKey = (graph,mindmapDataUse,mindmapAssistData) => {
 	 // 删除
 	graph.bindKey(['delete', 'backspace'], () => {
 		const select_cell = graph.getSelectedCells();
 		let delete_cells=[]
 		let mindmapCell=[]
-		console.log(graph.getSuccessors(select_cell[0]),'getSuccessors');
 		// return 
 		console.log(select_cell.length,'select_cell.length');
 		for (let i = 0; i < select_cell.length; i++) {
@@ -283,35 +260,41 @@ export const bindKey = (graph,mindmapDataUse) => {
 		}
 		// 去重
 		const uniqueArr = mindmapCell.filter((item, index) => mindmapCell.findIndex(i => i.id === item.id) === index);
+		console.log(uniqueArr,'uniqueArr');
 
-
+		delete_cells = [...delete_cells,...uniqueArr]
+		// return 
+		if (delete_cells.length) {
+			// 移除工具
+			delete_cells.forEach(item => item.removeTools());
+			graph.removeCells(delete_cells)
+		}
+		let shouldOperations=[]
 		mindmapDataUse.map((item,index)=>{
-			let levelIds = uniqueArr.filter(mindMap => mindMap.id.startsWith(index+1+'')).map(mindMap => mindMap.id)
-			if(!(levelIds && levelIds.length>0)) return 
+			let levelIds = uniqueArr.filter(mindMap => mindMap.id.startsWith(item.mindmapData.id)).map(mindMap => mindMap.id)
 			console.log(levelIds,'levelIds');
-			let mindMapIds=[]
-			let mindMapIdPtr=0
-			// for (let i = 0; i < levelData.length; i++) {
-			// 	const element = levelData[i];
-			// 	console.log(element.id,'element.id');
-			// }
-			
-			// console.log(levelData,'levelData',index+1);
+			if(!(levelIds && levelIds.length>0)) return 
+			// console.log(levelIds,'levelIds');
+			let mindMapIds=[...levelIds]
+			for (let i = 0; i < levelIds.length; i++) {
+				const element = levelIds[i]
+				mindMapIds=mindMapIds.filter( id => id.indexOf(element) !=0 || id==element)
+			}
+			// console.log(mindMapIds,'mindMapIds');
+			shouldOperations.push(mindMapIds)
+		})
+		// 删除前备份
+		mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(mindmapDataUse))
+		mindmapAssistData.mindmapDataRecoverPtr++
+		console.log(shouldOperations,'shouldOperations');
+		shouldOperations.map(it =>{
+			it.map(it1 =>{
+				deleteMindmapData(it1,mindmapDataUse)
+			})
 		})
-
-		console.log(uniqueArr,'uniqueArr');
 		console.log(mindmapDataUse,'mindmapDataUse');
-		delete_cells = [...delete_cells,...uniqueArr]
-		return 
-			if (delete_cells.length) {
-				// 移除工具
-				delete_cells.forEach(item => item.removeTools());
-				graph.removeCells(delete_cells)
-				//重置工具栏
-				// store.commit('sand/SET_SELECT_STATUS',{key:'default'});
-				// store.commit('sand/SET_SELECT_CELL',null);
-			}
-			return false
+
+		return false
 	}, 'keydown');
 
 	/* cv */
@@ -410,4 +393,28 @@ const setSelectedOptions = ({ rect, text }, key) => {
 			color: text.fill
 		},
 	}: {}
+}
+
+const deleteMindmapData=(id,data)=>{
+	// console.log(id,data,'id,data');
+	// return 
+	let ids = id.split('-')
+	let mindmapDataIndex = data.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
+	if(ids.length==1){
+		data.splice(mindmapDataIndex,1)
+		return 
+	}
+
+	let mindmapData = data[mindmapDataIndex].mindmapData
+	let findId = ids[0]
+	for (let i = 1; i < ids.length-1; i++) {
+		const element = ids[i];
+		findId = findId+'-'+element
+		mindmapData=mindmapData.children.find(it => it.id==findId)
+	}
+	let endId = ids[ids.length-1]
+
+	let endIndex = mindmapData.children.findIndex(it => it.id == findId+'-'+endId)
+	mindmapData.children.splice(endIndex,1)
+	// console.log(data);
 }

src/views/sandbox_manage/common/gragh.js

@@ -4,7 +4,7 @@ import { configOpt } from './toolConfig';
 
 const { line } = configOpt;
 // wrapper DOM的Id mindmapDataUse 思维导图数组，传递给事件 type 模式，编辑和查看
-export function myGraph (wrapper,mindmapDataUse,type='edit') {
+export function myGraph (wrapper,mindmapDataUse,mindmapAssistData,type='edit') {
 	console.log(wrapper,'wrapperwrapper');
 	const graph = new Graph({
 		container: document.getElementById(wrapper),
@@ -150,7 +150,7 @@ export function myGraph (wrapper,mindmapDataUse,type='edit') {
 	
 
 	/* 键盘事件 */
-	if(type!='view') bindKey(graph,mindmapDataUse);
+	if(type!='view') bindKey(graph,mindmapDataUse,mindmapAssistData);
 
 	return graph;
 }

src/views/sandbox_manage/common/mindmap.js

@@ -278,7 +278,6 @@ export default {
     setGraph(){
       this.graph.on('add:topic:left', ({ node }) => {
         if(this.operationType=='view') return 
-        // console.log(this.mindMapDataCurrent,'this.mindMapDataCurrent');
         const { id } = node
         this.setCurrent(id)
         const type = node.prop('type')
@@ -289,7 +288,6 @@ export default {
 
       this.graph.on('add:topic:right', ({ node }) => {
         if(this.operationType=='view') return 
-        // console.log(this.mindMapDataCurrent,'this.mindMapDataCurrent');
         const { id } = node
         this.setCurrent(id)
         const type = node.prop('type')
@@ -300,34 +298,33 @@ export default {
       this.graph.on('node:change:size', (args) => { 
         if(this.operationType=='view') return 
         if(args.node.shape.indexOf('mindmap')!==-1){
+          let ids = args.node.id.split('-')
+					let mindmapDataIndex = this.mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
+          console.log(mindmapDataIndex,'mindmapDataIndex',ids,'ids');
+					let mindMapDataCurrent = this.mindmapDataUse[mindmapDataIndex]?this.mindmapDataUse[mindmapDataIndex].mindmapData:{}
 
-          let indexSequence = args.node.id.split('-').map(idn => +idn-1)
+					let findId = ids[0]
 
-					let index = indexSequence[0] || 0
-					let mindMapDataCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].mindmapData:{}
-
-					let changeData=[mindMapDataCurrent]
-					// console.log(indexSequence,'indexSequence');
-					// console.log(changeData,'changeData');
-					let selectMindmap = changeData[0]
-					for (let i = 1; i < indexSequence.length; i++) {
-						let element = indexSequence[i]
-            selectMindmap= selectMindmap.children[element]
+					for (let i = 1; i < ids.length; i++) {
+						const element = ids[i];
+						findId = findId+'-'+element
+						mindMapDataCurrent=mindMapDataCurrent.children.find(it => it.id==findId)
 					}
-					// console.log(selectMindmap);
-					selectMindmap.width = args.node.size().width
-					selectMindmap.height = args.node.size().height
+
+					mindMapDataCurrent.width = args.node.size().width
+					mindMapDataCurrent.height = args.node.size().height
         }
       })
       this.graph.on('node:change:position', (args) => { 
+        console.log(this.mindmapDataUse,'mindmapDataUsemindmapDataUsemindmapDataUse');
         if(this.operationType=='view') return 
-        if(args.node.shape.indexOf('mindmap')!==-1){
-          // console.log(Number(args.node.id));
-          let index = Number(args.node.id)
-          if(index){
-            let indexReal=index-1
-            this.mindmapDataUse[indexReal].position = args.current
-            this.setCurrent(args.node.id)
+        if(args.node.shape.indexOf('mindmap')!==-1 && Number(args.node.id)){
+
+          let index = this.mindmapDataUse.findIndex(it =>it.mindmapData.id == args.node.id)
+          // let index = Number(args.node.id)
+          if(index!=-1){
+            this.mindmapDataUse[index].position = args.current
+          // this.setCurrent(args.node.id)
           }
         }
       })
@@ -370,19 +367,18 @@ export default {
     },
     // 通过id设置当前操作的思维导图
     setCurrent(id){
-      // console.log(id);
-      let index = parseInt(id.split('-')[0])-1 || 0
+      let rootId = id.split('-')[0]
+      let index = this.mindmapDataUse.findIndex(it =>it.mindmapData.id == rootId)
       this.mindMapDataCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].mindmapData:{}
       this.positionCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].position:{x:0,y:0}
       this.addTypeCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].addType:'singleMindmap'
     },
     mindMapRender(i){
       this.graph.startBatch('renderMindmap')
-      // console.log(this.mindMapDataCurrent);
       let mindMapType = i || i==0?this.mindmapDataUse[i].addType:this.addTypeCurrent
       this.mindMapDataCurrent = i || i==0?this.mindmapDataUse[i].mindmapData:this.mindMapDataCurrent
       this.positionCurrent = i || i==0?this.mindmapDataUse[i].position:this.positionCurrent
-      console.log(this.mindMapDataCurrent,this.positionCurrent,this.addTypeCurrent);
+      console.log(this.mindMapDataCurrent,this.positionCurrent,this.addTypeCurrent,'mindMapRendermindMapRendermindMapRendermindMapRender');
       const result = Hierarchy.mindmap(this.mindMapDataCurrent, {
         direction: 'H',
         getHeight(d) {
@@ -427,7 +423,6 @@ export default {
                 height: data.height,
                 label: data.label,
                 type: data.type,
-                // data:data,
                 attrs:{
                   body: {
                     stroke: this.$store.state.sand.styleConfig.borderColor,
@@ -520,21 +515,26 @@ export default {
       const dataItem = res && res.node
       if (dataItem) {
         let item = null
-        const length = dataItem.children ? dataItem.children.length : 0
+        // console.log(dataItem.children);
+        let addId ='1'
+        if(dataItem.children && dataItem.children.length>0){
+          let ids = dataItem.children[dataItem.children.length-1].id.split('-')
+          addId = parseInt(ids[ids.length-1])+1+''
+        }
         if (type === 'topic') {
           item = {
-            id: `${id}-${length + 1}`,
+            id: `${id}-${addId}`,
             type: 'topic-branch',
-            label: `分支主题${length + 1}`,
+            label: `分支主题${addId}`,
             width: 100,
             height: 40,
             direction
           }
         } else if (type === 'topic-branch' || type=='topic-child') {
           item = {
-            id: `${id}-${length + 1}`,
+            id: `${id}-${addId}`,
             type: 'topic-child',
-            label: `子主题${length + 1}`,
+            label: `子主题${addId}`,
             width: 60,
             height: 30,
             direction

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -643,6 +643,10 @@ const { line} = configOpt;
         canUndo:false,
         canRedo:false,
         mindmapDataUse:[],
+        mindmapAssistData:{
+          mindmapDataRecoverUse:[],//用于恢复撤销和重做时被删除的思维导图数据
+          mindmapDataRecoverPtr:-1, //当前索引
+        },
         sandSaveParams:{
           Name:'',
           SandboxClassifyId:'',
@@ -878,43 +882,41 @@ const { line} = configOpt;
       },
       // 初始化画布
       init() {
-        const graph = new myGraph('sand-chart-container',this.mindmapDataUse);
+        const graph = new myGraph('sand-chart-container',this.mindmapDataUse,this.mindmapAssistData);
         graph.history.on('change', (args) => { 
           // console.log(args,'change-history');
           this.canUndo = graph.canUndo()
           this.canRedo = graph.canRedo()
           // console.log(this.canUndo,this.canRedo);
         })
-        // graph.history.on('undo', (args) => { 
-        //   // console.log(args,'undo-history');
-        //   for (let i = 0; i < args.cmds.length; i++) {
-        //     const element = args.cmds[i];
-        //     if(element.data.props.shape.indexOf('mindmap')!=-1 && element.data.node){
-        //       console.log(element,'element.data.props');
-        //       if(element.event== 'cell:added'){
-                
-        //         //撤销是添加，意味着要从数据源删除
-        //         let ids = element.data.props.id.split('-').map(id => +id)
-        //         let start=ids[0]-1,end=ids[ids.length-1]-1;
-        //         let operationMindmap = this.mindmapDataUse[start].mindmapData
-        //         ids.map((item,index)=>{
-        //           if(index==0 || index==(ids.length-1)) return 
-        //           console.log(operationMindmap,index,'operationMindmap');
-        //           operationMindmap=operationMindmap.children[(item-1)]
-        //         })
-        //         operationMindmap.children.splice(end,1)
-        //         console.log(operationMindmap,ids);
-        //       }
-        //       console.log(element,i);
-        //     }
-        //   }
-        //   console.log(this.mindmapDataUse);
-        // })
-        // graph.history.on('redo', (args) => { 
-        //   console.log(args,'redo-history');
-
-        //   // console.log(this.canUndo,this.canRedo);
-        // })
+        graph.history.on('undo', (args) => { 
+          console.log(args,'undo-history');
+          // let ids=[]
+          let mindmapNodes=args.cmds.filter(it => it.data.props && it.data.props.shape.indexOf('mindmap')!=-1 && it.data.node)
+          if(!(mindmapNodes && mindmapNodes.length>0)) return 
+          // console.log(mindmapNodes,'mindmapNodes');
+          let mindmapUndoType=mindmapNodes[0].event
+          if(mindmapUndoType=="cell:added"){
+            this.mindmapRecoverRemove(mindmapNodes)
+          }else if(mindmapUndoType=="cell:removed"){
+            this.mindmapRecoverAdd()
+          }
+          console.log(this.mindmapDataUse);
+        })
+        graph.history.on('redo', (args) => { 
+          console.log(args,'redo-history');
+          // let ids=[]
+          let mindmapNodes=args.cmds.filter(it => it.data.props && it.data.props.shape.indexOf('mindmap')!=-1 && it.data.node)
+          if(!(mindmapNodes && mindmapNodes.length>0)) return 
+          // console.log(mindmapNodes,'mindmapNodes');
+          let mindmapUndoType=mindmapNodes[0].event
+          if(mindmapUndoType=="cell:added"){
+            this.mindmapRecoverAdd()
+          }else if(mindmapUndoType=="cell:removed"){
+            this.mindmapRecoverRemove(mindmapNodes)
+          }
+          console.log(this.mindmapDataUse,'mindmapDataUse');
+        })
         graph.on('node:mouseenter', ({ node, e }) => {
           console.log(node);
           let data = node.data
@@ -1044,7 +1046,8 @@ const { line} = configOpt;
         }
       },
       generateMindmapData(position,addType){
-        let beId=this.mindmapDataUse.length+1+''
+        let beId=this.mindmapDataUse.length>0?
+        parseInt(this.mindmapDataUse[this.mindmapDataUse.length-1].mindmapData.id)+1+'':'1'
         let mindmapData={
           id: beId,
           type: 'topic',
@@ -1821,7 +1824,71 @@ const { line} = configOpt;
         this.$nextTick(()=>{
           this.popoverVisible=true
         })
-      },200) 
+      },200) ,
+      mindmapRecoverRemove(mindmapNodes){
+        let shouldOperations=[]
+        this.mindmapDataUse.map((item,index)=>{
+          let levelIds = mindmapNodes.filter(mindMap => mindMap.data.id.startsWith(item.mindmapData.id)).map(mindMap => mindMap.data.id)
+          console.log(levelIds,'levelIds');
+          if(!(levelIds && levelIds.length>0)) return 
+          // console.log(levelIds,'levelIds');
+          let mindMapIds=[...levelIds]
+          for (let i = 0; i < levelIds.length; i++) {
+            const element = levelIds[i]
+            mindMapIds=mindMapIds.filter( id => id.indexOf(element) !=0 || id==element)
+          }
+          console.log(mindMapIds,'mindMapIds');
+          shouldOperations.push(mindMapIds)
+        })
+        // 重做删除时 恢复数据指针回退
+        // if(
+        //   this.mindmapAssistData.mindmapDataRecoverPtr==(this.mindmapAssistData.mindmapDataRecoverUse.length-1)){
+        //   // this.mindmapAssistData.mindmapDataRecoverPtr--
+        this.mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(this.mindmapDataUse))
+        // }
+        this.mindmapAssistData.mindmapDataRecoverPtr++
+        console.log(this.mindmapAssistData.mindmapDataRecoverUse[this.mindmapAssistData.mindmapDataRecoverPtr],
+        this.mindmapDataUse,this.mindmapAssistData.mindmapDataRecoverPtr,this.mindmapAssistData.mindmapDataRecoverUse.length,
+        'this.mindmapAssistData.mindmapDataRecoverPtr');
+        console.log(shouldOperations,'shouldOperations');
+        shouldOperations.map(it =>{
+          it.map(it1 =>{
+            this.deleteMindmapData(it1,this.mindmapDataUse)
+          })
+        })
+      },
+      mindmapRecoverAdd(){
+        // 重做添加时 恢复数据指针前进
+        this.mindmapDataUse=JSON.parse(this.mindmapAssistData.mindmapDataRecoverUse[this.mindmapAssistData.mindmapDataRecoverPtr]) 
+        this.mindmapAssistData.mindmapDataRecoverUse.pop()
+        this.mindmapAssistData.mindmapDataRecoverPtr--
+        console.log(this.mindmapAssistData.mindmapDataRecoverUse[this.mindmapAssistData.mindmapDataRecoverPtr],
+        this.mindmapDataUse,this.mindmapAssistData.mindmapDataRecoverPtr,this.mindmapAssistData.mindmapDataRecoverUse.length,
+        'this.mindmapAssistData.mindmapDataRecoverPtr');
+      },
+      deleteMindmapData(id,data){
+        console.log(id,data,'id,data');
+        // return 
+        let ids = id.split('-')
+        let mindmapDataIndex = data.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
+        if(ids.length==1){
+          data.splice(mindmapDataIndex,1)
+          return 
+        }
+
+        let mindmapData = data[mindmapDataIndex].mindmapData
+        let findId = ids[0]
+        for (let i = 1; i < ids.length-1; i++) {
+          const element = ids[i];
+          findId = findId+'-'+element
+          mindmapData=mindmapData.children.find(it => it.id==findId)
+        }
+        let endId = ids[ids.length-1]
+        console.log(mindmapData.children,'mindmapData.children');
+        let endIndex = mindmapData.children.findIndex(it => it.id == findId+'-'+endId)
+        mindmapData.children.splice(endIndex,1)
+        // console.log(data);
+      }
     },
   }
 </script>