// 沙盘 import { configOpt,styleSettings } from '@/views/sandbox_manage/common/toolConfig'; const setSandboxToolStatus=(state,payload)=>{ console.log(payload,'payload',state); 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:'', endArrow:'' } 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.textDecoration) 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,'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回显 state.styleOptions.connectStyle=connectStyleSet.size==1?Array.from(connectStyleSet)[0]:1 // 设置sourceMarker回显 state.styleOptions.startArrow=startArrowSet.size==1?Array.from(startArrowSet)[0]||'':'' // 设置targetMarker回显 state.styleOptions.endArrow=endArrowSet.size==1?Array.from(endArrowSet)[0]||'':'' } } const sand = { namespaced: true, state: () => ({ initConfig: { ...configOpt },//默认工具栏配置 DisableText: true,// 禁用文本设置 DisableLine: true, //禁用线条设置 DisableBorder: true, //禁用线框设置 selectCell: null, // 不同风格 style:1, styleConfig:{ backgroundColor:'#BBCEFF', color:'#1841AA', textColor:'#1841AA', borderColor:'#1841AA', lineColor:'#1841AA' }, 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:'', endArrow:'' }, selectCells:[] }), mutations: { /* 节点选中 toolbar设置状态 */ SET_SELECT_STATUS(state,payload) { switch(payload.key) { case 'rect': state.DisableText = false; state.DisableLine = true; state.DisableBorder = false; state.initConfig = { ...configOpt, ...payload.options } break; case 'date': state.DisableText = false; state.DisableLine = true; state.DisableBorder = false; state.initConfig = { ...configOpt, ...payload.options } break; case 'text': state.DisableText = false; state.DisableLine = true; state.DisableBorder = true; state.initConfig = { ...configOpt, ...payload.options } break; case'line': state.DisableText = true; state.DisableLine = false; state.DisableBorder = true; state.initConfig = { ...configOpt, ...payload.options } break; default: state.DisableText = true; state.DisableLine = true; state.DisableBorder = true; break; } }, /* 设置选中节点 */ 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; state.selectCell.attr(`${attr}`,val); }, // 设置节点风格 SET_CELL_STYLE(state,style){ if(!style) style=1 state.style = style let styleData = styleSettings[style-1] state.styleConfig.backgroundColor = styleData.backgroundColor state.styleConfig.color = styleData.color state.styleConfig.textColor = styleData.textColor state.styleConfig.borderColor = styleData.borderColor state.styleConfig.lineColor = styleData.lineColor } }, actions: { }, getters: { } } export default sand;