暂存

src/views/sandbox_manage/common/events.js

@@ -1,6 +1,6 @@
 import { store } from "../../../main";
 import { configOpt } from './toolConfig';
-
+import _ from "lodash"
 const { line} = configOpt;
 /* 节点操作监听事件 */
 export const myEvents = (graph,mindmapData) => {
@@ -149,49 +149,54 @@ export const myEvents = (graph,mindmapData) => {
 		})
 
 		/* 选中事件 */
-		graph.on('cell:selected',({cell,options}) => {
-			// console.log(cell)
-			//节点
-			if(cell.shape === 'rect') {
-				const { key } = cell.data;
-
-				const options = setSelectedOptions(cell.attrs,key);
-				//设置toolbar状态
-				store.commit('sand/SET_SELECT_STATUS',{
-					key,
-					options
-				});
-			}else if(cell.isEdge()) {
-
-				const { line } = cell.attrs;
-				//高亮选中
-				// cell.attr('line', { stroke: '#f00', strokeWidth: 3 });
-				//设置toolbar状态
-				store.commit('sand/SET_SELECT_STATUS',{
-					key: 'line',
-					options: {
-						line: {
-							width: line.strokeWidth,
-							color: line.stroke,
-						}
-					}
-				});
-			}
-		})
+		// graph.on('cell:selected',({cell,options}) => {
+		// 	// console.log(cell)
+		// 	//节点
+		// 	if(cell.shape === 'rect') {
+		// 		const { key } = cell.data;
+
+		// 		const options = setSelectedOptions(cell.attrs,key);
+		// 		//设置toolbar状态
+		// 		store.commit('sand/SET_SELECT_STATUS',{
+		// 			key,
+		// 			options
+		// 		});
+		// 	}else if(cell.isEdge()) {
+
+		// 		const { line } = cell.attrs;
+		// 		//高亮选中
+		// 		// cell.attr('line', { stroke: '#f00', strokeWidth: 3 });
+		// 		//设置toolbar状态
+		// 		store.commit('sand/SET_SELECT_STATUS',{
+		// 			key: 'line',
+		// 			options: {
+		// 				line: {
+		// 					width: line.strokeWidth,
+		// 					color: line.stroke,
+		// 				}
+		// 			}
+		// 		});
+		// 	}
+		// })
 		
 		/* 点击空白区域清空选区 屏蔽工具栏 */
-		graph.on('blank:click',() => {
-			graph.cleanSelection();
-			store.commit('sand/SET_SELECT_STATUS',{key:'default'});
-			store.commit('sand/SET_SELECT_CELL',null);
+		// graph.on('blank:click',() => {
+		// 	graph.cleanSelection();
+		// 	// store.commit('sand/SET_SELECT_STATUS',{key:'default'});
+		// 	store.commit('sand/SET_SELECT_CELLS',[]);
 
-			if($('#editable-wrapper')[0]) $('#editable-wrapper')[0].blur();
-		})
+		// 	if($('#editable-wrapper')[0]) $('#editable-wrapper')[0].blur();
+		// })
+
+		const changeSelection=_.debounce((selected)=> {
+			store.commit('sand/SET_SELECT_CELLS',selected)
+		},50)
 
 		/* 监听选中事件 */
 		graph.on('selection:changed',({selected}) => {
-			
-			selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
+			console.log(selected,'选中修改');
+			// selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
+			changeSelection(selected)
 		})
 
 		/* 监听选中事件 */
@@ -200,6 +205,7 @@ export const myEvents = (graph,mindmapData) => {
 		// 	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,'myEdgeOption');
 			// console.log(cell.store.data);
 			if(cell.store.data.shape=="mindmap-edge"){
 				// 思维导图的边
@@ -340,6 +346,7 @@ const nodeCopyAndPaste = (graph) => {
 
 /* 关联三种基础图形选中样式 */
 const setSelectedOptions = ({ rect, text }, key) => {
+	console.log({ rect, text },'{ rect, text }',key);
 	return ['rect','date'].includes(key) ? {
 		text: { //文本设置
 			size: text.fontSize,

src/views/sandbox_manage/common/gragh.js

@@ -24,7 +24,7 @@ export function myGraph (wrapper,mindmapData) {
 		selecting: {
 			enabled: true,
 			showNodeSelectionBox: false,
-			multiple: false
+			multiple: true
 		},
 		snapline: true, //对齐线
 		// panning: { //画布拖动

src/views/sandbox_manage/index_new_version.vue

@@ -225,6 +225,7 @@ import { myGraph } from './common/gragh';
           view:{
             showLine:false,
             showIcon:false,
+            selectedMulti:false,
             addDiyDom: this.addDiyDom,
             // addHoverDom: this.addHoverDom,
 		        // removeHoverDom: this.removeHoverDom
@@ -306,7 +307,7 @@ import { myGraph } from './common/gragh';
       //     // }
       //   })(),
       //   type:'get',
-      //   autoParam: ["SandboxClassifyId=ChartClassifyId"],
+      //   autoParam: ["SandboxClassifyId"],
       //   otherParam:{ "IsShowMe":this.isOnlyMe},
       //   dataFilter: (treeId,parentNode,responseData)=>{
       //     console.log(treeId,parentNode,responseData,'responseData');
@@ -336,7 +337,7 @@ import { myGraph } from './common/gragh';
       // 获取沙盘图分类
       getSandboxClassify(parentNode) {
         const sandboxClassifyId = parentNode ? parentNode.SandboxClassifyId:0
-        sandInterface.getSandboxClassify({ChartClassifyId:sandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
+        sandInterface.getSandboxClassify({SandboxClassifyId:sandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
           console.log(res);
           if (res.Ret === 200) {
             let nodesData=res.Data.AllNodes || []
@@ -387,8 +388,23 @@ import { myGraph } from './common/gragh';
       zTreeClick(event, treeId, treeNode,clickFlag){
         console.log(event, treeId, treeNode,clickFlag);
         if(clickFlag==1){
+          if(treeNode.isCatalogue){
+            // 目录
+            this.searchParams.CurrentIndex=1
+            this.searchParams.SandboxClassifyId = treeNode.SandboxClassifyId
+            this.rightType='list'
+            this.getSandboxList()
+          }else{
+            // 沙盘图
+            this.viewSandbox=item
+            this.initData = JSON.parse(item.Content)
+            this.rightType='chart'
+          }
+        }
+
+        if(clickFlag==0 && treeNode.isCatalogue){
           this.searchParams.CurrentIndex=1
-          this.searchParams.SandboxClassifyId = treeNode.SandboxClassifyId
+          this.searchParams.SandboxClassifyId = ''
           this.rightType='list'
           this.getSandboxList()
         }
@@ -644,14 +660,17 @@ import { myGraph } from './common/gragh';
         console.log(treeNode,'treeId, treeNode');
         var aObj = $("#" + treeNode.tId + "_a");
         if ($("#diyBtn_"+treeNode.SandboxClassifyId).length>0) return;
+        if(treeNode.isCatalogue){
+          //目录添加自定义按钮
+          let dom = $('#custom-button-zone')[0].cloneNode(true)
 
-        let dom = $('#custom-button-zone')[0].cloneNode(true)
+          $(dom).find('.add-classify-img')[0].addEventListener("click",(e)=>this.addClassify(e,treeNode))
+          $(dom).find('.edit-classify-img')[0].addEventListener("click",(e)=>this.editClassify(e,treeNode))
+          $(dom).find('.delete-classify-img')[0].addEventListener("click",(e)=>this.deleteClassify(e,treeNode))
 
-        $(dom).find('.add-classify-img')[0].addEventListener("click",(e)=>this.addClassify(e,treeNode))
-        $(dom).find('.edit-classify-img')[0].addEventListener("click",(e)=>this.editClassify(e,treeNode))
-        $(dom).find('.delete-classify-img')[0].addEventListener("click",(e)=>this.deleteClassify(e,treeNode))
+          aObj.append(dom);
+        }
 
-        aObj.append(dom);
       },
       // removeHoverDom(treeId, treeNode) {
       //   console.log(treeId, treeNode,'treeId, treeNode');

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -84,70 +84,89 @@
           <div class="sand-tool-item" :style="{'color':canUndo?'#000000':'#999999'}" @click="toolClickOptions('undo')">撤销</div>
           <div class="sand-tool-item" :style="{'color':canRedo?'#000000':'#999999'}" @click="toolClickOptions('redo')">恢复</div>
           <div class="sand-tool-item" id="sand-tool-fontSize">
-            <el-select v-model="styleOptions.fontF" placeholder="字体" @change="(e)=>toolClickOptions('changeFamily',e)">
+            <el-select v-model="styleOptions.fontF" placeholder="字体" @change="(e)=>toolClickOptions('changeFamily',e)"
+              :disabled="toolStatus.nodeDisabled && toolStatus.textDisabled">
               <el-option :label="f.name" :value="f.value" v-for="f in familyOptions" :key="f.name"></el-option>
             </el-select>
           </div>
           <div class="sand-tool-item">
-            <el-select v-model="styleOptions.fontS" placeholder="字号">
+            <el-select v-model="styleOptions.fontS" placeholder="字号" @change="(e)=>toolClickOptions('changeSize',e)">
               <el-option :label="s.name" :value="s.value" v-for="s in fontSizeOptions" :key="s.name"></el-option>
             </el-select>
           </div>
-          <div class="sand-tool-item">B</div>
-          <div class="sand-tool-item">I</div>
-          <div class="sand-tool-item">下划线</div>
+          <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeWeight')">B</div>
+          <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeFontStyle')">I</div>
+          <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeDecoration')">下划线</div>
           <div class="sand-tool-item">
             <el-color-picker
+              key="textColor"
               v-model="styleOptions.color"
               size="mini"
               :predefine="colorsOptions"
+              @change="(e)=>toolClickOptions('changeColor',e)"
             />
           </div>
           <div class="sand-tool-item">
-            <el-select v-model="styleOptions.lineHeight" placeholder="行高">
+            <el-select v-model="styleOptions.lineHeight" placeholder="行高" @change="(e)=>toolClickOptions('changeLineHeight',e)">
               <el-option :label="lh.name" :value="lh.value" v-for="lh in lineHeightOptions" :key="lh.name"></el-option>
             </el-select>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="setGraphStyle">
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',e)">
 							<div class="el-dropdown-link">
 								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
 								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
 							</div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.textAlign=='center'?'style-acitve':''">
+								<el-dropdown-item command="middle" :class="styleOptions.textAlign=='middle'?'style-acitve':''">
 									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   居中
 								</el-dropdown-item>
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+								<el-dropdown-item command="start">
                   居左
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
-                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                <el-dropdown-item command="end">
                   居右
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
 							</el-dropdown-menu>
 						</el-dropdown>
           </div>
-          <div class="sand-tool-item">填充色</div>
-          <div class="sand-tool-item">线条颜色</div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="setGraphStyle">
+            <el-color-picker
+              key="backgroundColor"
+              v-model="styleOptions.backgroundColor"
+              size="mini"
+              :predefine="colorsOptions"
+              @change="(e)=>toolClickOptions('changeBackgroundColor',e)"
+            />
+          </div>
+          <div class="sand-tool-item">
+            <el-color-picker
+              key="lineColor"
+              v-model="styleOptions.lineColor"
+              size="mini"
+              :predefine="colorsOptions"
+              @change="(e)=>toolClickOptions('changeLineColor',e)"
+            />
+          </div>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineWidth',e)">
 							<div class="el-dropdown-link">
 								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
 								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
 							</div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.lineWidth=='cu'?'style-acitve':''">
+								<el-dropdown-item :command="3" :class="styleOptions.lineWidth=='cu'?'style-acitve':''">
 									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   粗
 								</el-dropdown-item>
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+								<el-dropdown-item :command="2">
                   细
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
-                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                <el-dropdown-item :command="1">
                   很细
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
@@ -155,17 +174,17 @@
 						</el-dropdown>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="setGraphStyle">
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeStrokeDasharray',e)">
 							<div class="el-dropdown-link">
 								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
 								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
 							</div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.lineStyle=='xu'?'style-acitve':''">
+								<el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='xu'?'style-acitve':''">
 									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   虚线
 								</el-dropdown-item>
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+								<el-dropdown-item :command="null">
                   实线
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
@@ -173,39 +192,39 @@
             </el-dropdown>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="setGraphStyle">
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',e)">
 							<div class="el-dropdown-link">
 								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
 								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
 							</div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.connectStyle=='1'?'style-acitve':''">
+								<el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve':''">
 									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
-                  直线
+                  直线{{ styleOptions.connectStyle }}
 								</el-dropdown-item>
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
-                  弯折线
+								<el-dropdown-item :command="2" :class="styleOptions.connectStyle==2?'style-acitve':''">
+                  弯折线{{ styleOptions.connectStyle }}
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
-                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
-                  圆角弯折线
+                <el-dropdown-item :command="3" :class="styleOptions.connectStyle==3?'style-acitve':''">
+                  圆角弯折线{{ styleOptions.connectStyle }}
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="setGraphStyle">
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',e)">
 							<div class="el-dropdown-link">
 								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
 								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
 							</div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.startArrow=='1'?'style-acitve':''">
+								<el-dropdown-item command="classic" :class="styleOptions.startArrow=='1'?'style-acitve':''">
 									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   有
 								</el-dropdown-item>
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+								<el-dropdown-item :command="null">
                   无
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
@@ -213,17 +232,17 @@
             </el-dropdown>
           </div>
           <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="setGraphStyle">
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',e)">
 							<div class="el-dropdown-link">
 								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
 								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
 							</div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.endArrow=='1'?'style-acitve':''">
+								<el-dropdown-item command="classic" :class="styleOptions.endArrow=='1'?'style-acitve':''">
 									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   有
 								</el-dropdown-item>
-								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+								<el-dropdown-item :command="null">
                   无
 										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
@@ -272,6 +291,7 @@ import {styleSettings,familyOptions,fontSizeOptions,colorsOptions,lineHeightOpti
 import { ElDropdownMenu as DropdownMenu } from 'element-ui';
 import { contextMenuOption } from '../common/options';
 import { contextEvent } from '../common/events';
+import { mapState } from 'vuex'
 
 const { line} = configOpt;
   export default {
@@ -288,20 +308,24 @@ const { line} = configOpt;
         addEdgeType:"",
         styleActive:1,
         // 当前的样式配置
-        styleOptions:{
-          fontF:"微软雅黑",
-          fontS:14,
-          color:'#000000',
-          lineHeight:1,
-          textAlign:'center',
-          lineStyle:"xu",
-          lineWidth:'cu',
-          connectStyle:'1',
-          startArrow:'1',
-          endArrow:'1'
-        },
+        // styleOptions:{
+        //   fontF:"微软雅黑",
+        //   fontS:14,
+        //   color:'#000000',
+        //   lineHeight:1,
+        //   textAlign:'start',
+        //   backgroundColor:'#DAE8FF',
+        //   lineColor:'#0052D9',
+        //   lineStyle:"xu",
+        //   lineWidth:'cu',
+        //   connectStyle:'1',
+        //   startArrow:'1',
+        //   endArrow:'1'
+        // },
+        // toolStatus:{
         canUndo:false,
         canRedo:false,
+        // },
         mindMapData:{
           id: "1",
           type: 'topic',
@@ -374,7 +398,12 @@ const { line} = configOpt;
       },
       lineHeightOptions(){
         return lineHeightOptions
-      }
+      },
+      ...mapState({
+        selectCells: state => state.sand.selectCells,
+        styleOptions: state => state.sand.styleOptions,
+        toolStatus:state => state.sand.toolStatus,
+      })
     },
     mounted(){
       this.init()
@@ -394,7 +423,7 @@ const { line} = configOpt;
           console.log(args);
           this.canUndo = graph.canUndo()
           this.canRedo = graph.canRedo()
-          console.log(this.canUndo,this.canRedo);
+          // console.log(this.canUndo,this.canRedo);
         })
         this.graph = graph;
         this.dnd = new Addon.Dnd({
@@ -511,11 +540,8 @@ const { line} = configOpt;
       saveChart(){
         console.log(this.mindMapData,'this.mindMapData');
       },
-      setGraphStyle(){
-        console.log("修改样式")
-      },
       toolClickOptions(type){
-        console.log(arguments);
+        let value = arguments[1]
         switch (type) {
           case 'undo':
             this.graph.undo()
@@ -523,10 +549,135 @@ const { line} = configOpt;
           case 'redo':
             this.graph.redo()
             break;
+          case 'changeFamily':
+            this.setGraphStyle('text/fontFamily',value)
+            break;
+          case 'changeSize':
+            this.setGraphStyle('text/fontSize',value)
+            break;
+          case 'changeWeight':
+            this.setGraphStyle('text/fontWeight')
+            break;
+          case 'changeFontStyle':
+            this.setGraphStyle('text/fontStyle')
+            break;
+          case 'changeDecoration':
+            this.setGraphStyle('text/textDecoration')
+            break;
+          case 'changeColor':
+            this.setGraphStyle('text/fill',value)
+            break;
+          case 'changeLineHeight':
+            this.setGraphStyle('text/lineHeight',value)
+            break;
+          case 'changeTextAlign':
+            this.setGraphStyle('text/textAnchor',value)
+            break;
+          case 'changeBackgroundColor':
+            this.setGraphStyle('body/fill',value)
+            break;
+          case 'changeLineColor':
+            this.setGraphStyle('body/stroke',value)
+            break;
+          case 'changeLineWidth':
+            this.setGraphStyle('body/strokeWidth',value)
+            break;
+          case 'changeStrokeDasharray':
+            this.setGraphStyle('body/strokeDasharray',value)
+            break;
+          case 'changeRouter':
+            this.setGraphStyle('router/name',value)
+            break;
+          case 'changeSourceMarker':
+            this.setGraphStyle('line/sourceMarker',value)
+            break;
+          case 'changeTargetMarker':
+            this.setGraphStyle('line/targetMarker',value)
+            break;
           default:
             break;
         }
-      }
+      },
+      setGraphStyle(attr,value){
+        // console.log(attr,value);
+        let styleValue = value
+        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'
+        }else if(attr.indexOf('textDecoration')!=-1){
+          styleValue = currentAttr.text.textDecoration ?
+                      currentAttr.text.textDecoration == "none"?'underline':'none'
+                      :'underline'
+        }else if(attr.indexOf('textAnchor')!=-1){
+          //需要特殊设置
+          if(styleValue=='start'){
+            refXValue='0%'
+          }else if(styleValue=='middle'){
+            refXValue=0.5
+          }else{
+            refXValue='100%'
+          }
+        }
+        
+        this.selectCells.map(cell=>{
+          // lineHeight和fontsize 是一个倍数关系，每一个都可能不一样。
+          if(attr.indexOf('lineHeight')!=-1){
+            let fontSizeCurrent = cell.getAttrs().text.fontSize
+            cell.setAttrs({
+              text:{
+                relativeLineHeight:styleValue
+              }
+            })
+            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)
+          }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'
+            if(routerName=='normal'){
+              // 变成直线，清除路径点
+              cell.setVertices([])
+            }else{
+              // 变弯折线 添加路径点
+              let sourcePoint = cell.getSourcePoint() //起始点
+              let targetPoint = cell.getTargetPoint() //终止点
+              let fisrtPoint = {x:(sourcePoint.x+targetPoint.x)/2,y:sourcePoint.y}
+              let secondPoint = {x:(sourcePoint.x+targetPoint.x)/2,y:targetPoint.y}
+              cell.setVertices([fisrtPoint,secondPoint])
+            }
+            cell.setRouter({name:routerName,args: {padding: {left: 10}}})
+            cell.setConnector({name:connectorName,args: { radius: 8 }})
+          }else{
+            cell.attr(attr,styleValue)
+          }
+          /*额外设置的属性*/
+          // 居左居中居右额外设置
+          if(attr.indexOf('textAnchor')!=-1){
+            cell.attr('text/refX',refXValue)
+          }
+        })
+      },
     },
   }
 </script>

src/vuex/modules/sand.js

@@ -1,6 +1,121 @@
 // 沙盘
 import { configOpt,styleSettings } from '@/views/sandbox_manage/common/toolConfig';
 
+const setSandboxToolStatus=(state,payload)=>{
+	console.log(payload);
+	if(!(payload&&payload.length>0)){
+		state.toolStatus.textDisabled=true
+		state.toolStatus.edgeDisabled=true
+		state.toolStatus.nodeDisabled=true
+		state.styleOptions={
+			fontF:"微软雅黑",
+			fontS:18,
+			fontW:'normal',
+			fontStyle:'normal',
+			textDecoration:'none',
+			color:'#333333',
+			lineHeight:1.3,
+			textAlign:'none',
+			backgroundColor:'#DAE8FF',
+			lineColor:'#0052D9',
+			lineStyle:null,
+			lineWidth:2,
+			connectStyle:1,
+			startArrow:null,
+			endArrow:null
+		}
+		return 
+	}else{
+		const fontFamilySet=new Set(),fontSizeSet=new Set(),fontWeightSet=new Set(),fontStyleSet=new Set(),
+		textDecorationSet=new Set(),colorSet=new Set(),lineHeightSet=new Set(),
+		textAlignSet=new Set(),backgroundColorSet=new Set(),lineColorSet=new Set(),
+		lineStyleSet=new Set(),lineWidthSet=new Set(),connectStyleSet=new Set(),
+		startArrowSet=new Set(),endArrowSet=new Set()
+
+		for (let i = 0; i < payload.length; i++) {
+			const element = payload[i];
+			const attrs = element.getAttrs()
+			console.log(element.shape);
+			if(element.shape.indexOf('edge')==-1){
+				state.toolStatus.textDisabled=false
+				state.toolStatus.edgeDisabled=true
+				fontFamilySet.add(attrs.text.fontFamily)
+				fontSizeSet.add(attrs.text.fontSize)
+				fontWeightSet.add(attrs.text.fontWeight)
+				fontStyleSet.add(attrs.text.fontStyle)
+				textDecorationSet.add(attrs.text.fontStyle)
+				colorSet.add(attrs.text.fill)
+				lineHeightSet.add(Math.round((attrs.text.lineHeight/attrs.text.fontSize)*10)/10)
+				textAlignSet.add(attrs.text.textAnchor)
+				if(element.data && element.data.key!='text'){
+					// console.log('不是text');
+					backgroundColorSet.add(attrs.body.fill)
+					lineColorSet.add(attrs.body.stroke)
+					lineStyleSet.add(attrs.body.strokeDasharray)
+					lineWidthSet.add(attrs.body.strokeWidth)
+					state.toolStatus.nodeDisabled=false
+				}else{
+					state.toolStatus.nodeDisabled=true
+				}
+			}else{
+				state.toolStatus.edgeDisabled=false
+				state.toolStatus.textDisabled=true
+				state.toolStatus.nodeDisabled=true
+				lineColorSet.add(attrs.line.stroke)
+				lineStyleSet.add(attrs.line.strokeDasharray)
+				lineWidthSet.add(attrs.line.strokeWidth)
+				startArrowSet.add(attrs.line.sourceMarker)
+				endArrowSet.add(attrs.line.targetMarker)
+				const router = element.getRouter()
+				const connector = element.getConnector()
+				console.log(router,connector);
+				if((!router) || router.name=="normal"){
+					connectStyleSet.add(1)
+				}else{
+					if((!connector) || connector.name == 'normal'){
+						connectStyleSet.add(2)
+					}else{
+						connectStyleSet.add(3)
+					}
+				}
+			}
+		}
+		// 设置fontFamily回显
+		state.styleOptions.fontF=fontFamilySet.size==1?Array.from(fontFamilySet)[0]:"微软雅黑"
+		// 设置fontSize回显
+		state.styleOptions.fontS=fontSizeSet.size==1?Array.from(fontSizeSet)[0]:18
+		// 设置fontWeight回显
+		state.styleOptions.fontW=fontWeightSet.size==1?Array.from(fontWeightSet)[0] || 'normal':"normal"
+		// 设置fontStyle回显
+		state.styleOptions.fontStyle=fontStyleSet.size==1?Array.from(fontStyleSet)[0] || 'normal':"normal"
+		// 设置textDecoration回显
+		state.styleOptions.textDecoration=textDecorationSet.size==1?Array.from(textDecorationSet)[0] || 'none':"none"
+		// 设置color回显
+		state.styleOptions.color=colorSet.size==1?Array.from(colorSet)[0]:"#333333"
+		// 设置lineHeight回显
+		state.styleOptions.lineHeight=lineHeightSet.size==1?Array.from(lineHeightSet)[0]:1.3
+		// 设置textAlign回显
+		state.styleOptions.textAlign=textAlignSet.size==1?Array.from(textAlignSet)[0]:'none'
+		// 设置backgroundColor回显
+		state.styleOptions.backgroundColor=backgroundColorSet.size==1?Array.from(backgroundColorSet)[0]:'#DAE8FF'
+		// 设置lineColor回显
+		state.styleOptions.lineColor=lineColorSet.size==1?Array.from(lineColorSet)[0]:'#0052D9'
+		// 设置lineStyle回显
+		state.styleOptions.lineStyle=lineStyleSet.size==1?Array.from(lineStyleSet)[0]:null
+		// 设置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
+		// 设置targetMarker回显
+		state.styleOptions.endArrow=endArrowSet.size==1?Array.from(endArrowSet)[0]||null:null
+	}
+}
+
+
+
 const sand = {
 	namespaced: true,
 	state: () => ({
@@ -15,7 +130,30 @@ const sand = {
 		style:1,
 		styleConfig:{
 			backgroundColor:"#DAE8FF",
-		}
+		},
+		toolStatus:{
+			nodeDisabled:true,
+			edgeDisabled:true,
+			textDisabled:true,
+		},
+		styleOptions:{
+			fontF:"微软雅黑",
+			fontS:18,
+			fontW:'normal',
+			fontStyle:'normal',
+			textDecoration:'none',
+			color:'#333333',
+			lineHeight:1.3,
+			textAlign:'none',
+			backgroundColor:'#DAE8FF',
+			lineColor:'#0052D9',
+			lineStyle:null,
+			lineWidth:2,
+			connectStyle:1,
+			startArrow:null,
+			endArrow:null
+		},
+		selectCells:[]
 	}),
   mutations: {
 		/* 节点选中 toolbar设置状态 */
@@ -69,7 +207,12 @@ const sand = {
 		SET_SELECT_CELL(state,payload) {
 			state.selectCell = payload;
 		},
-
+		/* 设置选中节点 */
+		SET_SELECT_CELLS(state,payload) {
+			state.selectCells = payload;
+			// 设置工具状态栏的回显和禁用
+			setSandboxToolStatus(state,payload)
+		},
 		/* 设置加粗样式 */
 		SET_BOLD_STYLE(state,{attr,val}) {
 			state.initConfig.text.fontWeight = val;