部分bug修改

src/views/sandbox_manage/common/edge.js

@@ -31,10 +31,11 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
     },
     attrs:{
       line:{
+        strokeDasharray:null,
         stroke: styleConfig.lineColor,
         strokeWidth: line.width,
-        sourceMarker: false,//起始箭头 
-        targetMarker: false,//终止箭头
+        sourceMarker: {},//起始箭头 
+        targetMarker: {},//终止箭头
       }
     }
   }
@@ -45,10 +46,11 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
     vertices:[{x:xP,y:yP-40},{x:xP,y:yP+40}],
     attrs:{
       line:{
+        strokeDasharray:null,
         stroke: styleConfig.lineColor,
         strokeWidth: line.width,
-        sourceMarker: false,//起始箭头 
-        targetMarker: false,//终止箭头
+        sourceMarker: {},//起始箭头 
+        targetMarker: {},//终止箭头
       }
     }
   }
@@ -60,9 +62,10 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
 				...skewLine,
         attrs:{
           line:{
+            strokeDasharray:null,
             stroke: styleConfig.lineColor,
             strokeWidth: line.width,
-            sourceMarker: false,//起始箭头 
+            sourceMarker: {},//起始箭头 
             targetMarker: "classic",//终止箭头
           }
         },
@@ -72,6 +75,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
 				...skewLine,
         attrs:{
           line:{
+            strokeDasharray:null,
             stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: "classic",//起始箭头 
@@ -86,9 +90,10 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         ...bendLine,
         attrs:{
           line:{
+            strokeDasharray:null,
             stroke: styleConfig.lineColor,
             strokeWidth: line.width,
-            sourceMarker: false,//起始箭头 
+            sourceMarker: {},//起始箭头 
             targetMarker: "classic",//终止箭头
           }
         },
@@ -98,6 +103,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         ...bendLine,
         attrs:{
           line:{
+            strokeDasharray:null,
             stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: "classic",//起始箭头 
@@ -122,9 +128,10 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         },
         attrs:{
           line:{
+            strokeDasharray:null,
             stroke: styleConfig.lineColor,
             strokeWidth: line.width,
-            sourceMarker: false,//起始箭头 
+            sourceMarker: {},//起始箭头 
             targetMarker: "classic",//终止箭头
           }
         },
@@ -138,6 +145,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         },
         attrs:{
           line:{
+            strokeDasharray:null,
             stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: 'classic',//起始箭头 

src/views/sandbox_manage/common/events.js

@@ -35,7 +35,10 @@ export const myEvents = (graph,mindmapDataUse) => {
 			// 	node.attr('text/text', '');
 			// }else{
 				edit_area.innerText = text.text || text.textWrap.text || ' ';
+				// 开启editText的事务 
+				graph.startBatch('editText')
 				node.attr('text/textWrap/text', '');
+				
 			// }
 
 
@@ -76,6 +79,8 @@ export const myEvents = (graph,mindmapDataUse) => {
 
 				node.attr('text/textWrap/text', newval);
 				node.attr('text/text', newval);
+				// 关闭editText的事务
+				graph.stopBatch('editText')
 
 				if(node.shape.indexOf('mindmap')!==-1){
 
@@ -148,14 +153,6 @@ export const myEvents = (graph,mindmapDataUse) => {
 			dom.style.top = e.clientY-3 + 'px';
 		})
 
-		/* 节点右键 */
-		graph.on('blank:contextmenu',({node,e}) => {
-			console.log(node,e);
-			graph.select(node);
-			const dom = $('#contextMenu-wrapper')[0];
-			dom.style.left = e.clientX-3 + 'px';
-			dom.style.top = e.clientY-3 + 'px';
-		})
 		/* 选中事件 */
 		// graph.on('cell:selected',({cell,options}) => {
 		// 	// console.log(cell)
@@ -197,12 +194,13 @@ export const myEvents = (graph,mindmapDataUse) => {
 		// })
 
 		const changeSelection=_.debounce((selected)=> {
+			console.log(selected,'selected');
 			store.commit('sand/SET_SELECT_CELLS',selected)
 		},50)
 
 		/* 监听选中事件 */
 		graph.on('selection:changed',({selected}) => {
-			// console.log(selected,'选中修改');
+			console.log(selected,'选中修改');
 			// selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
 			changeSelection(selected)
 		})
@@ -259,7 +257,9 @@ export const myEvents = (graph,mindmapDataUse) => {
 				cell.removeTools()
 			}
 		})
-
+		graph.history.on('batch', ({ cell }) => {
+			console.log(arguments,'arguments--batch');
+		})
 }
 
 /* 绑定键盘事件 */

src/views/sandbox_manage/common/gragh.js

@@ -10,7 +10,18 @@ export function myGraph (wrapper,mindmapDataUse,type='edit') {
 		container: document.getElementById(wrapper),
 		// width: $(window).width(),
 		// height: $(window).height(),
-		history:true,
+		history:{
+			enabled:true,
+			// applyOptionsList:['options1','options2'],
+			// revertOptionsList:['options3','options4'],
+			beforeAddCommand(event, args){
+				console.log(event, args,'event, args');
+				if(args.key=='tools'){
+					// 工具的改变不加入撤销和重做的队列
+					return false
+				}
+			}
+		},
 		autoResize: true, 
 		background: {
 			color: '#fff',

src/views/sandbox_manage/common/mindmap.js

@@ -331,7 +331,16 @@ export default {
           }
         }
       })
-
+      // this.graph.on('node:added', ({node}) => { 
+      //   if(node.shape.indexOf('mindmap')!=-1){
+      //     // 思维导图需要处理相对应的数据
+      //     console.log('mindmap',node.id);
+      //   }
+      //   console.log(node,'node:added');
+      // })
+      // this.graph.on('node:removed', (args) => { 
+      //   console.log(args,'node:removed');
+      // })
       // this.graph.bindKey(['backspace', 'delete'], () => {
       //   const selectedNodes = this.graph.getSelectedCells().filter((item) => item.isNode())
       //   if (selectedNodes.length) {
@@ -368,6 +377,7 @@ export default {
       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
@@ -394,72 +404,93 @@ export default {
       const cells = []
       let xGap = this.positionCurrent?this.positionCurrent.x-result.x:0
       let yGap = this.positionCurrent?this.positionCurrent.y-result.y:0
-    
+      console.log(result,'result');
+      // return 
       const traverse = (hierarchyItem) => {
         if (hierarchyItem) {
           const { data, children } = hierarchyItem
-          // console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
+          console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
           let mindmapDirection = mindMapType.indexOf('double') != -1?data.direction:'right'
           // console.log(mindmapDirection,data.label,data.direction);
-          cells.push(
-            this.graph.createNode({
-              id: data.id,
-              shape:mindmapDirection=='right'?'mindmap-topic-right':mindmapDirection=='left'?'mindmap-topic-left':'mindmap-topic',
-              x: xGap+hierarchyItem.x,
-              y: yGap+hierarchyItem.y,
-              width: data.width,
-              height: data.height,
-              label: data.label,
-              type: data.type,
-              attrs:{
-                body: {
-                  stroke: this.$store.state.sand.styleConfig.borderColor,
-                  fill: this.$store.state.sand.styleConfig.backgroundColor
+          let currentCell=this.graph.getCellById(data.id)
+          console.log(currentCell,'this.graph.getCellById(data.id)');
+
+          if(!currentCell){
+            // 没有 新增
+            cells.push(
+              this.graph.createNode({
+                id: data.id,
+                shape:mindmapDirection=='right'?'mindmap-topic-right':mindmapDirection=='left'?'mindmap-topic-left':'mindmap-topic',
+                x: xGap+hierarchyItem.x,
+                y: yGap+hierarchyItem.y,
+                width: data.width,
+                height: data.height,
+                label: data.label,
+                type: data.type,
+                // data:data,
+                attrs:{
+                  body: {
+                    stroke: this.$store.state.sand.styleConfig.borderColor,
+                    fill: this.$store.state.sand.styleConfig.backgroundColor
+                  },
+                  label:{
+                    fill:this.$store.state.sand.styleConfig.color
+                  }
                 },
-                label:{
-                  fill:this.$store.state.sand.styleConfig.color
-                }
-              },
-            }),
-          )
+              }),
+            )
+          }else{
+            // 有，更新下位置信息
+            currentCell.position(xGap+hierarchyItem.x,yGap+hierarchyItem.y)
+          }
+          // return 
+   
           if (children) {
             children.forEach((item) => {
               const { id, data } = item
               let mindmapChildDirection = mindMapType.indexOf('double') != -1?data.direction:'right'
-              cells.push(
-                this.graph.createEdge({
-                  shape: 'mindmap-edge',
-                  attrs:{
-                    line:{
-                      stroke:this.$store.state.sand.styleConfig.lineColor
-                    }
-                  },
-                  source: {
-                    cell: hierarchyItem.id,
-                    anchor: {
-                      name: 'center',
-                      args: {
-                        dx: mindmapChildDirection=='right'?'25%':mindmapChildDirection=='left'?'-25%':0,
+              let currentEdge=this.graph.getCellById(data.id)
+              if(!currentEdge){
+                cells.push(
+                  this.graph.createEdge({
+                    shape: 'mindmap-edge',
+                    attrs:{
+                      line:{
+                        stroke:this.$store.state.sand.styleConfig.lineColor
+                      }
+                    },
+                    source: {
+                      cell: hierarchyItem.id,
+                      anchor: {
+                        name: 'center',
+                        args: {
+                          dx: mindmapChildDirection=='right'?'25%':mindmapChildDirection=='left'?'-25%':0,
+                        },
                       },
                     },
-                  },
-                  target: {
-                    cell: id,
-                    anchor: {
-                      name: mindmapChildDirection =='left'?'right':'left',
+                    target: {
+                      cell: id,
+                      anchor: {
+                        name: mindmapChildDirection =='left'?'right':'left',
+                      },
                     },
-                  },
-                }),
-              )
+                  }),
+                )
+              }
+
               traverse(item)
             })
           }
         }
       }
       traverse(result)
-      // console.log(cells,'result');
-      this.graph.removeCells(cells)
-      this.graph.addCell(cells)
+      // 排下序，把边放最后面 不然 边 会找不到 节点
+      let sortCells = cells.sort(cell => cell.shape.indexOf('edge'))
+      console.log(sortCells,'result');
+      // return 
+      // this.graph.removeCells(sortCells)
+      this.graph.addCell(sortCells)
+      this.graph.stopBatch('renderMindmap')
       // this.graph.resetCells(cells)
       // this.graph.centerContent()
     },

src/views/sandbox_manage/common/node.js

@@ -126,6 +126,9 @@ export const myNodeOption = (key) => {
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
+						fontStyle:"normal",
+						textDecoration:'none',
+						relativeLineHeight:1.3,
 						textWrap: {
 							width: -10,
 						},
@@ -187,6 +190,9 @@ export const myNodeOption = (key) => {
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
+						fontStyle:"normal",
+						textDecoration:'none',
+						relativeLineHeight:1.3,
 						textWrap: {
 							width: -10,
 						},
@@ -194,10 +200,14 @@ export const myNodeOption = (key) => {
 				},
 				ports: {
 					items: [
-							{ group: 'port-top', id: 'p_top' },
-							{ group: 'port-bottom', id: 'p_bottom' },
-							{ group: 'port-left', id: 'p_left' },
-							{ group: 'port-right', id: 'p_right' },
+						{ group: 'port-top', id: 'p_top' },
+						{ group: 'port-top', id: 'p_top-1' },
+						{ group: 'port-bottom', id: 'p_bottom' },
+						{ group: 'port-bottom', id: 'p_bottom-1' },
+						{ group: 'port-left', id: 'p_left' },
+						{ group: 'port-left', id: 'p_left-1' },
+						{ group: 'port-right', id: 'p_right' },
+						{ group: 'port-right', id: 'p_right-1' },
 					],
 					groups: {
 							"port-top": {
@@ -242,6 +252,9 @@ export const myNodeOption = (key) => {
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
+						fontStyle:"normal",
+						textDecoration:'none',
+						relativeLineHeight:1.3,
 						textWrap: {
 							width: -10,
 						},
@@ -303,6 +316,9 @@ export const myNodeOption = (key) => {
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
+						fontStyle:"normal",
+						textDecoration:'none',
+						relativeLineHeight:1.3,
 						textWrap: {
 							width: -10,
 						},
@@ -357,6 +373,9 @@ export const myNodeOption = (key) => {
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
+						fontStyle:"normal",
+						textDecoration:'none',
+						relativeLineHeight:1.3,
 						fill: styleConfig.textColor,
 						textWrap: {
 							width: -10,

src/views/sandbox_manage/common/toolConfig.js

@@ -34,10 +34,10 @@ export const fontSizeOptions = [
 	{name:'18px',value:18}
 ]
 export const lineHeightOptions = [
-	{name:'1',value:1},
-	{name:'1.15',value:1.15},
-	{name:'1.5',value:1.5},
-	{name:'2',value:2}
+	1,
+	1.15,
+	1.5,
+	2
 ]
 export const sizeOptions = [
 	30,

src/views/sandbox_manage/index_new_version.vue

@@ -873,7 +873,7 @@ import { myGraph } from './common/gragh';
         })
       },
       copyHandle:_.debounce(function ({ PicUrl }){
-        if(!PicUrl) this.$message('暂无内容可复制')
+        if(!PicUrl) return this.$message('暂无内容可复制')
         console.log("复制");
         this.lockLoding = this.$loading({
           lock: true,
@@ -902,7 +902,7 @@ import { myGraph } from './common/gragh';
                 this.$message.success('复制成功！')
                 },
                 () => {
-                  this.$message.warning('复制失败,稍后再试')
+                  this.$message.warning('浏览器不支持')
                 }
               ).finally(()=>{
                 this.lockLoding && this.lockLoding.close();
@@ -910,7 +910,7 @@ import { myGraph } from './common/gragh';
             });
           }else {
             this.lockLoding && this.lockLoding.close();
-            this.$message.warning('浏览器暂不支持')
+            this.$message.warning('当前协议暂不支持，仅支持https协议')
           }
         }
       },500),
@@ -952,7 +952,7 @@ import { myGraph } from './common/gragh';
         if(treeNode.isCatalogue){
           //目录添加自定义按钮
           let dom = $('#custom-button-zone')[0].cloneNode(true)
-          if(treeNode.Level>5){
+          if(treeNode.Level>4){
             $(dom).find('.add-classify-img')[0].style.display='none'
           }else{
             $(dom).find('.add-classify-img')[0].addEventListener("click",(e)=>this.addClassify(e,treeNode))
@@ -1100,7 +1100,7 @@ import { myGraph } from './common/gragh';
                     this.$message.success('复制成功！')
                 },
                 () => {
-                    this.$message.warning('复制失败,稍后再试')
+                    this.$message.warning('浏览器不支持')
                 }
                 ).finally(()=>{
                     this.lockLoding && this.lockLoding.close();
@@ -1108,7 +1108,7 @@ import { myGraph } from './common/gragh';
             });
           }else {
             this.lockLoding && this.lockLoding.close();
-            this.$message.warning('浏览器暂不支持')
+            this.$message.warning('当前协议暂不支持，仅支持https协议')
           }	
         }
       },{

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -99,11 +99,11 @@
         <div class="sand-mainBody-tool" id="sand-mainBody-tool">
           <el-tooltip content="撤销（Ctrl+Z）" placement="top" :open-delay="250">
             <img :src="canUndo?require('@/assets/img/sand_new/tools/undo.png'):require('@/assets/img/sand_new/tools/undo-disabled.png')" 
-            class="sand-tool-item"  @click="toolClickOptions('undo',!canUndo)" :class="nodeTextDisable?'tool-disabled':''"/>
+            class="sand-tool-item"  @click="toolClickOptions('undo',!canUndo)" :class="canUndo?'':'tool-disabled'"/>
           </el-tooltip>
           <el-tooltip content="恢复（Ctrl+Y）" placement="top" :open-delay="250">
             <img :src="canRedo?require('@/assets/img/sand_new/tools/redo.png'):require('@/assets/img/sand_new/tools/redo-disabled.png')" 
-            class="sand-tool-item"  @click="toolClickOptions('redo',!canRedo)" :class="nodeTextDisable?'tool-disabled':''"/>
+            class="sand-tool-item"  @click="toolClickOptions('redo',!canRedo)" :class="canRedo?'':'tool-disabled'"/>
           </el-tooltip>
           <div class="sand-tool-item">
               <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeFamily',nodeTextDisable,e)"
@@ -133,7 +133,7 @@
               <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
                 <el-tooltip content="字号" placement="top" :open-delay="250">
                   <div class="dropdown-content"  >
-                    <div class="dropdown-content-text" >{{ styleOptions.fontS }}</div>
+                    <div class="dropdown-content-text" >{{ styleOptions.fontS }}px</div>
                     <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
                   </div>
                 </el-tooltip>
@@ -142,30 +142,34 @@
                 </el-tooltip>
               </div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item v-for="s in fontSizeOptions" :command="s.name" :key="s.name"
-                :class="styleOptions.fontS==s.name?'style-acitve':''">
+								<el-dropdown-item v-for="s in fontSizeOptions" :command="s.value" :key="s.value"
+                :class="styleOptions.fontS==s.value?'style-acitve':''">
                     {{ s.name }}
 								</el-dropdown-item>
 							</el-dropdown-menu>
 						</el-dropdown>
           </div>
           <el-tooltip content="加粗（Ctrl+B）" placement="top" :open-delay="250">
-            <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
-                  require('@/assets/img/sand_new/tools/bold-disabled.png'):
-                  require('@/assets/img/sand_new/tools/bold.png')" 
-            class="sand-tool-item"  @click="toolClickOptions('changeWeight',nodeTextDisable)"/>
+            <div class="sand-tool-item img-box" :class="styleOptions.fontW=='bold'?'style-acitve-back':''">
+              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
+                require('@/assets/img/sand_new/tools/bold-disabled.png'):
+                require('@/assets/img/sand_new/tools/bold.png')"  @click="toolClickOptions('changeWeight',nodeTextDisable)"/>
+            </div>
+
           </el-tooltip>      
           <el-tooltip content="斜体" placement="top" :open-delay="250">
-            <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
-                  require('@/assets/img/sand_new/tools/italic-disabled.png'):
-                  require('@/assets/img/sand_new/tools/italic.png')" 
-            class="sand-tool-item"  @click="toolClickOptions('changeFontStyle',nodeTextDisable)"/>
+            <div class="sand-tool-item img-box" :class="styleOptions.fontStyle=='italic'?'style-acitve-back':''">
+              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
+                require('@/assets/img/sand_new/tools/italic-disabled.png'):
+                require('@/assets/img/sand_new/tools/italic.png')"  @click="toolClickOptions('changeFontStyle',nodeTextDisable)"/>
+            </div>
           </el-tooltip>      
           <el-tooltip content="下划线" placement="top" :open-delay="250">
-            <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
-                  require('@/assets/img/sand_new/tools/underline-disabled.png'):
-                  require('@/assets/img/sand_new/tools/underline.png')" 
-            class="sand-tool-item"  @click="toolClickOptions('changeDecoration',nodeTextDisable)"/>
+            <div class="sand-tool-item img-box" :class="styleOptions.textDecoration=='underline'?'style-acitve-back':''">
+              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
+                require('@/assets/img/sand_new/tools/underline-disabled.png'):
+                require('@/assets/img/sand_new/tools/underline.png')" @click="toolClickOptions('changeDecoration',nodeTextDisable)"/>
+            </div>
           </el-tooltip>      
           <div class="sand-tool-item sand-tool-img">
               <img :src="nodeTextDisable?
@@ -177,7 +181,7 @@
                 v-model="styleOptions.color"
                 size="mini"
                 :predefine="colorsOptions"
-                @change="(e)=>toolClickOptions('changeColor',e)"
+                @change="(e)=>toolClickOptions('changeColor',nodeTextDisable,e)"
                 style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
                 :disabled="nodeTextDisable"
               />
@@ -200,9 +204,9 @@
                 </el-tooltip>
               </div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item v-for="s in fontSizeOptions" :command="s.name" :key="s.name"
-                :class="styleOptions.fontS==s.name?'style-acitve':''">
-                    {{ s.name }}
+								<el-dropdown-item v-for="s in lineHeightOptions" :command="s" :key="s"
+                :class="styleOptions.lineHeight==s?'style-acitve':''">
+                    {{ s }}
 								</el-dropdown-item>
 							</el-dropdown-menu>
 						</el-dropdown>
@@ -237,7 +241,7 @@
 						</el-dropdown>
           </div>
           <div class="sand-tool-item sand-tool-img">
-            <img :src="nodeTextDisable?
+            <img :src="toolStatus.nodeDisabled?
                   require('@/assets/img/sand_new/tools/background-color-disabled.png'):
                   require('@/assets/img/sand_new/tools/background-color.png')" />
             <el-tooltip content="颜色填充" placement="top" :open-delay="250">
@@ -248,7 +252,7 @@
                 :predefine="colorsOptions"
                 @change="(e)=>toolClickOptions('changeBackgroundColor',toolStatus.nodeDisabled,e)"
                 style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
-                :disabled="nodeTextDisable"
+                :disabled="toolStatus.nodeDisabled"
               />
             </el-tooltip>
           </div>
@@ -264,7 +268,7 @@
                 :predefine="colorsOptions"
                 @change="(e)=>toolClickOptions('changeLineColor',nodeEdgeDisable,e)"
                 style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
-                :disabled="nodeTextDisable"
+                :disabled="nodeEdgeDisable"
               />
             </el-tooltip>
           </div>
@@ -275,8 +279,8 @@
                 <el-tooltip content="线条宽度" placement="top" :open-delay="250">
                   <div class="dropdown-content"  >
                     <img :src="nodeEdgeDisable? 
-                      require('@/assets/img/sand_new/tools/line-style-disabled.png'):
-                      require('@/assets/img/sand_new/tools/line-style.png')" 
+                      require('@/assets/img/sand_new/tools/line-width.png'):
+                      require('@/assets/img/sand_new/tools/line-width.png')" 
                       style="vertical-align: middle;"/>
                   </div>
                 </el-tooltip>
@@ -314,91 +318,91 @@
                 </el-tooltip>
               </div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='xu'?'style-acitve':''">
+								<el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='4 4'?'style-acitve':''">
                   虚线
 								</el-dropdown-item>
-								<el-dropdown-item :command="null" :class="styleOptions.lineStyle=='shi'?'style-acitve':''">
+								<el-dropdown-item :command="null" :class="styleOptions.lineStyle==null?'style-acitve':''">
                   实线
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',nodeEdgeDisable,e)"
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',toolStatus.edgeDisabled,e)"
               placement="bottom">
-              <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
+              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
                 <el-tooltip content="连线类型" placement="top" :open-delay="250">
                   <div class="dropdown-content"  >
-                    <img :src="nodeEdgeDisable? 
+                    <img :src="toolStatus.edgeDisabled? 
                       require('@/assets/img/sand_new/tools/line-type-disabled.png'):
                       require('@/assets/img/sand_new/tools/line-type.png')" 
                       style="vertical-align: middle;"/>
                   </div>
                 </el-tooltip>
                 <el-tooltip content="连线类型" placement="top" :open-delay="250">
-                  <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
                 </el-tooltip>
               </div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve':''">
-                  直线
+								<el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve-back':''">
+                  <img src="~@/assets/img/sand_new/tools/line-style-straight.png" style="width: 17px;height: 16px;"/>
 								</el-dropdown-item>
-								<el-dropdown-item :command="2" :class="styleOptions.connectStyle==2?'style-acitve':''">
-                  弯折线
+								<el-dropdown-item :command="2" :class="styleOptions.connectStyle==2?'style-acitve-back':''">
+                  <img src="~@/assets/img/sand_new/tools/line-style-bend.png" style="width: 17px;height: 16px;"/>
 								</el-dropdown-item>
-                <el-dropdown-item :command="3" :class="styleOptions.connectStyle==3?'style-acitve':''">
-                  圆角弯折线
+                <el-dropdown-item :command="3" :class="styleOptions.connectStyle==3?'style-acitve-back':''">
+                  <img src="~@/assets/img/sand_new/tools/line-style-bend-round.png" style="width: 17px;height: 16px;"/>
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',nodeEdgeDisable,e)"
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',toolStatus.edgeDisabled,e)"
               placement="bottom">
-              <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
+              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
                 <el-tooltip content="开始箭头" placement="top" :open-delay="250">
                   <div class="dropdown-content"  >
-                    <img :src="nodeEdgeDisable? 
+                    <img :src="toolStatus.edgeDisabled? 
                       require('@/assets/img/sand_new/tools/arrow-start-disabled.png'):
                       require('@/assets/img/sand_new/tools/arrow-start.png')" 
                       style="vertical-align: middle;"/>
                   </div>
                 </el-tooltip>
                 <el-tooltip content="开始箭头" placement="top" :open-delay="250">
-                  <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
                 </el-tooltip>
               </div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item command="classic" :class="styleOptions.startArrow=='1'?'style-acitve':''">
+								<el-dropdown-item command="classic" :class="styleOptions.startArrow=='classic'?'style-acitve':''">
                   有
 								</el-dropdown-item>
-								<el-dropdown-item :command="null" :class="styleOptions.startArrow==null?'style-acitve':''">
+								<el-dropdown-item :command="{}" :class="typeof(styleOptions.startArrow)=='string' || styleOptions.startArrow.name?'':'style-acitve'">
                   无
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',nodeEdgeDisable,e)"
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',toolStatus.edgeDisabled,e)"
               placement="bottom">
-              <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
+              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
                 <el-tooltip content="结束箭头" placement="top" :open-delay="250">
                   <div class="dropdown-content"  >
-                    <img :src="nodeEdgeDisable? 
+                    <img :src="toolStatus.edgeDisabled? 
                       require('@/assets/img/sand_new/tools/arrow-end-disabled.png'):
                       require('@/assets/img/sand_new/tools/arrow-end.png')" 
                       style="vertical-align: middle;"/>
                   </div>
                 </el-tooltip>
                 <el-tooltip content="结束箭头" placement="top" :open-delay="250">
-                  <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
                 </el-tooltip>
               </div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item command="classic" :class="styleOptions.endArrow=='1'?'style-acitve':''">
+								<el-dropdown-item command="classic" :class="styleOptions.endArrow=='classic'?'style-acitve':''">
                   有
 								</el-dropdown-item>
-								<el-dropdown-item :command="null" :class="styleOptions.endArrow==null?'style-acitve':''">
+								<el-dropdown-item :command="{}" :class="typeof(styleOptions.endArrow)=='string' || styleOptions.endArrow.name?'':'style-acitve'">
                   无
 								</el-dropdown-item>
 							</el-dropdown-menu>
@@ -877,11 +881,41 @@ const { line} = configOpt;
       init() {
         const graph = new myGraph('sand-chart-container',this.mindmapDataUse);
         graph.history.on('change', (args) => { 
-          console.log(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.on('node:mouseenter', ({ node, e }) => {
           console.log(node);
           let data = node.data
@@ -938,7 +972,7 @@ const { line} = configOpt;
                 item.show=false
               }
             })
-            console.log(this.contextMenuOption,'contextMenuOption');
+            // console.log(this.contextMenuOption,'contextMenuOption');
           }
         })
       
@@ -1116,7 +1150,7 @@ const { line} = configOpt;
         const select_cell = this.graph.getSelectedCells()[0]
         console.log(select_cell);
         if(select_cell){
-          this.checkedLinkList = select_cell.data.linkData ||[]
+          this.checkedLinkList = select_cell.data ? select_cell.data.linkData ||[]:[]
         }else{
           this.checkedLinkList=[]
         }
@@ -1191,7 +1225,7 @@ const { line} = configOpt;
                       this.$message.success('复制成功！')
                   },
                   () => {
-                      this.$message.warning('复制失败,稍后再试')
+                      this.$message.warning('浏览器不支持')
                   }
                   ).finally(()=>{
                       this.lockLoding && this.lockLoding.close();
@@ -1199,7 +1233,7 @@ const { line} = configOpt;
               });
             }else {
               this.lockLoding && this.lockLoding.close();
-              this.$message.warning('浏览器暂不支持')
+              this.$message.warning('当前协议暂不支持，仅支持https协议')
             }	
           }
         },{
@@ -1245,10 +1279,11 @@ const { line} = configOpt;
         this.lockLoding = this.$loading({
           lock: true,
           text: '保存中...',
-          target: '.sand-main',
+          target: '.sand-edit-container',
           spinner: 'el-icon-loading',
           background: 'rgba(255, 255, 255, 0.8)'
         });
+        return
         const { cells } = this.graph.toJSON();
         this.graph.toSVG(async (dataUri) => {
           const params = new FormData();
@@ -1331,6 +1366,7 @@ const { line} = configOpt;
           
       },500),
       toolClickOptions(type,disabled){
+        // 设置元素属性的时候请一起设置，分几步设置，撤销的时候就要分几步。或者使用事务来设置
         if(disabled) return
         let value = arguments[2]
         switch (type) {
@@ -1341,27 +1377,34 @@ const { line} = configOpt;
             this.graph.redo()
             break;
           case 'changeFamily':
+            this.styleOptions.fontF = value
             this.setGraphStyle('text/fontFamily',value)
             break;
           case 'changeSize':
+            this.styleOptions.fontS = value
             this.setGraphStyle('text/fontSize',value)
             break;
           case 'changeWeight':
+            this.styleOptions.fontW = this.styleOptions.fontW=='normal'?'bold':'normal'
             this.setGraphStyle('text/fontWeight')
             break;
           case 'changeFontStyle':
+            this.styleOptions.fontStyle = this.styleOptions.fontStyle=='normal'?'italic':'normal'
             this.setGraphStyle('text/fontStyle')
             break;
           case 'changeDecoration':
+            this.styleOptions.textDecoration = this.styleOptions.textDecoration=='none'?'underline':'none'
             this.setGraphStyle('text/textDecoration')
             break;
           case 'changeColor':
             this.setGraphStyle('text/fill',value)
             break;
           case 'changeLineHeight':
+            this.styleOptions.lineHeight = value
             this.setGraphStyle('text/lineHeight',value)
             break;
           case 'changeTextAlign':
+            this.styleOptions.textAlign = value
             this.setGraphStyle('text/textAnchor',value)
             break;
           case 'changeBackgroundColor':
@@ -1371,18 +1414,23 @@ const { line} = configOpt;
             this.setGraphStyle('body/stroke',value)
             break;
           case 'changeLineWidth':
+            this.styleOptions.lineWidth = value
             this.setGraphStyle('body/strokeWidth',value)
             break;
           case 'changeStrokeDasharray':
+            this.styleOptions.lineStyle = value
             this.setGraphStyle('body/strokeDasharray',value)
             break;
           case 'changeRouter':
+            this.styleOptions.connectStyle = value
             this.setGraphStyle('router/name',value)
             break;
           case 'changeSourceMarker':
+            this.styleOptions.startArrow = value
             this.setGraphStyle('line/sourceMarker',value)
             break;
           case 'changeTargetMarker':
+            this.styleOptions.endArrow = value
             this.setGraphStyle('line/targetMarker',value)
             break;
           default:
@@ -1392,18 +1440,15 @@ const { line} = configOpt;
       setGraphStyle(attr,value){
         // console.log(attr,value);
         let styleValue = value
+        let attrReal = attr
         let refXValue;
         let currentAttr= this.selectCells[0].getAttrs()
         if(attr.indexOf('fontWeight')!=-1){
           styleValue = currentAttr.text.fontWeight == "normal"?'bold':'normal'
         }else if(attr.indexOf('fontStyle')!=-1){
-          styleValue = currentAttr.text.fontStyle ?
-                      currentAttr.text.fontStyle == "normal"?'italic':'normal'
-                      :'italic'
+          styleValue = currentAttr.text.fontStyle == "italic"?'normal':'italic'
         }else if(attr.indexOf('textDecoration')!=-1){
-          styleValue = currentAttr.text.textDecoration ?
-                      currentAttr.text.textDecoration == "none"?'underline':'none'
-                      :'underline'
+          styleValue = currentAttr.text.textDecoration == "underline"?'none':'underline'
         }else if(attr.indexOf('textAnchor')!=-1){
           //需要特殊设置
           if(styleValue=='start'){
@@ -1414,38 +1459,48 @@ const { line} = configOpt;
             refXValue='100%'
           }
         }
-        
+        console.log(this.selectCells[0].attr(attr),styleValue,'styleValue');
+
+        if(this.selectCells[0].shape.indexOf('edge')!=-1){
+          // 边的情况
+          attrReal=attrReal.replace('body','line')
+        }
+        console.log(attrReal,'attrReal');
+        if(this.selectCells[0].attr(attrReal) === styleValue){
+          return 
+        }
         this.selectCells.map(cell=>{
           // lineHeight和fontsize 是一个倍数关系，每一个都可能不一样。
           if(attr.indexOf('lineHeight')!=-1){
             let fontSizeCurrent = cell.getAttrs().text.fontSize
             cell.setAttrs({
               text:{
-                relativeLineHeight:styleValue
+                relativeLineHeight:styleValue, //设置相对行高
+                lineHeight:styleValue*fontSizeCurrent //设置行高
               }
             })
-            cell.attr(attr,styleValue*fontSizeCurrent)
           }else if(attr.indexOf('fontSize')!=-1){
             let relativeLineHeightCurrent = cell.getAttrs().text.relativeLineHeight || 1.3
-            cell.attr(attr,styleValue)
-            // 设置对应行高
-            cell.attr('text/lineHeight',styleValue*relativeLineHeightCurrent)
+            cell.setAttrs({
+              text:{
+                fontSize:styleValue,//设置字号
+                lineHeight:styleValue*relativeLineHeightCurrent //设置行高
+              }
+            })
           }else if(attr=='body/stroke'){
             // 线条颜色和边框颜色
-            let attrReal = cell.shape.indexOf('edge')!=-1?"line/stroke":attr
             cell.attr(attrReal,styleValue)
           }else if(attr=='body/strokeWidth'){
             // 线条粗细和边框粗细
-            let attrReal = cell.shape.indexOf('edge')!=-1?"line/strokeWidth":attr
             cell.attr(attrReal,styleValue)
           }else if(attr=='body/strokeDasharray'){
             // 线条样式和边框样式
-            let attrReal = cell.shape.indexOf('edge')!=-1?"line/strokeDasharray":attr
             cell.attr(attrReal,styleValue)
           }else if(attr=='router/name'){
             // 1-直线  2-弯折线 3-圆角弯折线
             let routerName=styleValue==1?'normal':'manhattan'
             let connectorName=styleValue==3?'rounded':'normal'
+            this.graph.startBatch('setConnetorStyle')
             if(routerName=='normal'){
               // 变成直线，清除路径点
               cell.setVertices([])
@@ -1459,14 +1514,20 @@ const { line} = configOpt;
             }
             cell.setRouter({name:routerName,args: {padding: {left: 10}}})
             cell.setConnector({name:connectorName,args: { radius: 8 }})
+            this.graph.stopBatch('setConnetorStyle')
+          }else if(attr.indexOf('textAnchor')!=-1){
+            // 居左居中居右设置
+            // cell.attr('text/refX',refXValue)
+            cell.setAttrs({
+              text:{
+                refX:refXValue,//设置相对位置
+                textAnchor:styleValue //设置对齐方式
+              }
+            })
           }else{
             cell.attr(attr,styleValue)
           }
-          /*额外设置的属性*/
-          // 居左居中居右额外设置
-          if(attr.indexOf('textAnchor')!=-1){
-            cell.attr('text/refX',refXValue)
-          }
+
         })
       },
       // -------------------------------添加链接
@@ -1938,6 +1999,14 @@ const { line} = configOpt;
               }
             }
           }
+          .img-box{
+            height: 16px;
+            width: 17px;
+            img{
+              height: 16px;
+              width: 17px;
+            }
+          }
           .sand-tool-img{
             height: 16px;
             min-width: 16px;
@@ -2213,6 +2282,9 @@ const { line} = configOpt;
   .style-acitve{
     color: #0052D9;
   }
+  .style-acitve-back{
+    background-color: #C5CBDA;
+  }
 
 .vue-giant-tree{
   li{
@@ -2283,17 +2355,6 @@ const { line} = configOpt;
   }
 
 }
-// .ztree.zTreeDragUL{
-//   width: 300px;
-// 	z-index: 10000!important;
-// }
-// .tmpzTreeMove_arrow{
-//   position: absolute;
-// 	z-index: 10000!important;
-//   &::after{
-//     content: url('../../../assets/img/document_m/arrow-fold.png');
-//   }
-// }
   .classify-popper{
     height: 400px;
     overflow: auto;

src/vuex/modules/sand.js

@@ -2,7 +2,7 @@
 import { configOpt,styleSettings } from '@/views/sandbox_manage/common/toolConfig';
 
 const setSandboxToolStatus=(state,payload)=>{
-	console.log(payload);
+	console.log(payload,'payload');
 	if(!(payload&&payload.length>0)){
 		state.toolStatus.textDisabled=true
 		state.toolStatus.edgeDisabled=true
@@ -21,8 +21,8 @@ const setSandboxToolStatus=(state,payload)=>{
 			lineStyle:null,
 			lineWidth:2,
 			connectStyle:1,
-			startArrow:null,
-			endArrow:null
+			startArrow:{},
+			endArrow:{}
 		}
 		return 
 	}else{
@@ -43,7 +43,7 @@ const setSandboxToolStatus=(state,payload)=>{
 				fontSizeSet.add(attrs.text.fontSize)
 				fontWeightSet.add(attrs.text.fontWeight)
 				fontStyleSet.add(attrs.text.fontStyle)
-				textDecorationSet.add(attrs.text.fontStyle)
+				textDecorationSet.add(attrs.text.textDecoration)
 				colorSet.add(attrs.text.fill)
 				lineHeightSet.add(Math.round((attrs.text.lineHeight/attrs.text.fontSize)*10)/10)
 				textAlignSet.add(attrs.text.textAnchor)
@@ -68,8 +68,8 @@ const setSandboxToolStatus=(state,payload)=>{
 				endArrowSet.add(attrs.line.targetMarker)
 				const router = element.getRouter()
 				const connector = element.getConnector()
-				console.log(router,connector);
-				if((!router) || router.name=="normal"){
+				console.log(router,connector,'router,connector');
+				if(router && router.name=="normal"){
 					connectStyleSet.add(1)
 				}else{
 					if((!connector) || connector.name == 'normal'){
@@ -105,12 +105,11 @@ const setSandboxToolStatus=(state,payload)=>{
 		// 设置lineWidth回显
 		state.styleOptions.lineWidth=lineWidthSet.size==1?Array.from(lineWidthSet)[0]:2
 		// 设置connectStyle回显
-		console.log(connectStyleSet,'connectStyleSet');
 		state.styleOptions.connectStyle=connectStyleSet.size==1?Array.from(connectStyleSet)[0]:1
 		// 设置sourceMarker回显
-		state.styleOptions.startArrow=startArrowSet.size==1?Array.from(startArrowSet)[0]||null:null
+		state.styleOptions.startArrow=startArrowSet.size==1?Array.from(startArrowSet)[0]||{}:{}
 		// 设置targetMarker回显
-		state.styleOptions.endArrow=endArrowSet.size==1?Array.from(endArrowSet)[0]||null:null
+		state.styleOptions.endArrow=endArrowSet.size==1?Array.from(endArrowSet)[0]||{}:{}
 	}
 }
 
@@ -154,8 +153,8 @@ const sand = {
 			lineStyle:null,
 			lineWidth:2,
 			connectStyle:1,
-			startArrow:null,
-			endArrow:null
+			startArrow:{},
+			endArrow:{}
 		},
 		selectCells:[]
 	}),