eta_front/src/vuex/modules/sand.js

// 沙盘
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;