行为编辑区缩放功能

src/store/modules/behavior.js

@@ -25,6 +25,7 @@ export const behaviorStore = {
 			targetUUID: '',
 			lineID: 0,
 			boardOffset: {x: 0, y: 0},
+			boardScale: 1,
 		},
 	},
 	mutations: {
@@ -78,12 +79,12 @@ export const behaviorStore = {
 		},
 		deleteProcessMeta(state, {meta, process}) {
 			let container;
-			if(meta.isInline){
+			if (meta.isInline) {
 				container = process.meta.metas;
-			}else{
+			} else {
 				container = state.data.processes;
 			}
-			if(container){
+			if (container) {
 				for (let i = 0, li = container.length; i < li; i++) {
 					const process = container[i];
 
@@ -106,6 +107,15 @@ export const behaviorStore = {
 			state.processStack.splice(index);
 			updatePropsEditable(state);
 		},
+		setScale(state, value) {
+			let scale = state.drawState.boardScale;
+			if (value === 0) {
+				scale = 1;
+			} else {
+				scale += value;
+			}
+			state.drawState.boardScale = Math.max(Math.min(4, scale), 0.1);
+		}
 	},
 	getters: {
 		customProcessMap: state => {

src/themes/light/behavior.scss

@@ -62,6 +62,12 @@ $dock-pin-width: 9px;
 
 				border-bottom: 1px solid $--border-color-light;
 			}
+
+			.operate-bar{
+				padding: 3px;
+
+				border-bottom: 1px solid $--border-color-light;
+			}
 		}
 
 		.board {

src/views/Editor/behavior-editor/BehaviorEditor.vue

@@ -11,6 +11,13 @@
 			</split-panes>
 			<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
 				<edit-path :processStack="processStack" @pop="onPop"/>
+				<div class="operate-bar">
+					<el-button-group>
+						<el-button size="mini" icon="el-icon-zoom-out" @click="setScale(-0.1)"/>
+						<el-button size="mini" @click="setScale(0)">1:1</el-button>
+						<el-button size="mini" icon="el-icon-zoom-in" @click="setScale(0.1)"/>
+					</el-button-group>
+				</div>
 				<board ref="board" @select-process-node="onSelectProcessNode" @edit-process="editProcess" @edit-meta="onEditMeta"/>
 			</div>
 			<div class="properties background full-size" splitpanes-min="20" :splitpanes-size="20">
@@ -106,7 +113,7 @@
 						cancelButtonText: this.$t('Cancel'),
 						type: 'warning'
 					}).then(() => {
-						this.deleteProcessMeta(meta.id);
+						this.deleteProcessMeta({meta});
 					}).catch((e) => {
 					});
 				}
@@ -132,6 +139,7 @@
 				'clearProcessStack',
 				'pushProcessStack',
 				'popProcessStack',
+				'setScale',
 			]),
 			...mapGetters([
 				'metaInUse',

src/views/Editor/behavior-editor/Board.vue

 <template>
 	<div class="board" @dragover="onDragOver" @drop="onDrop" v-resize="onResize">
-		<svg class="svg-board full-size" version="1.1" xmlns="http://www.w3.org/2000/svg"
-		     xmlns:xlink="http://www.w3.org/1999/xlink">
+		<!--<el-scrollbar class="full-size">-->
+		<svg ref="board" class="svg-board full-size" version="1.1" xmlns="http://www.w3.org/2000/svg"
+		     xmlns:xlink="http://www.w3.org/1999/xlink" @mousedown="onBoardMouseDown">
+			<g ref="borderWrapper" :style="boardStyle">
 				<g id="layer" stroke-width="2" fill="none" fill-rule="evenodd">
 					<link-line v-for="(line, key, index) in lines" :data="line" :key="index" @dblclick="onDeleteLine"></link-line>
 					<path v-show="lineDrawing.visible" class="line hover" :d="lineDrawing.path"></path>
 				</g>
 				<g id="nodes">
-				<process-node v-for="(process, key, index) of subProcessMap" :ref="'pn_' + key" :process="process" :key="index"
+					<process-node v-for="(process, key, index) of subProcessMap" :ref="'pn_' + key" :process="process"
+					              :key="index"
 					              @click="onClickProcessNode(process, key)"
 					              @hover-pin="onPinHover"
 					              @leave-pin="onPinLeave"
@@ -18,13 +21,16 @@
 					              @meta-modified="onProcessMetaModified"
 					/>
 				</g>
+			</g>
 		</svg>
+		<!--</el-scrollbar>-->
 		<tool-tip ref="toolTip"/>
 		<inline-choose-dialog ref="inlineChooseDialog"/>
 	</div>
 </template>
 
 <script>
+	//:style="boardStyle"
 	import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
 	import ProcessNode from "./Board/ProcessNode";
 	import Process from "./Board/Process";
@@ -36,7 +42,7 @@
 	import InlineChooseDialog from "./InlineChooseDialog";
 
 	const customs = ['custom', 'divider'];
-	//todo 缩放功能
+
 	export default {
 		name: "Board",
 		components: {InlineChooseDialog, ToolTip, LinkLine, ProcessNode,},
@@ -52,6 +58,10 @@
 					path: '',
 					process: null,
 				},
+				boardOffset: {
+					x: 0,
+					y: 0,
+				}
 			}
 		},
 		mounted() {
@@ -61,7 +71,13 @@
 			...mapState({
 				drawState: state => state.behavior.drawState,
 				editable: state => state.behavior.editable,
-			})
+				scale: state => state.behavior.drawState.boardScale,
+			}),
+			boardStyle() {
+				return {
+					transform: `scale(${this.scale}) translate(${this.boardOffset.x}px, ${this.boardOffset.y}px)`
+				}
+			},
 		},
 		methods: {
 			...mapActions([
@@ -72,6 +88,8 @@
 				'deleteProcessMeta',
 			]),
 			async edit(process, resolveProcess) {
+				this.boardOffset.x = 0;
+				this.boardOffset.y = 0;
 				this.selectedProcessNode = null;
 				this.process = process;
 				this.resolveProcess = resolveProcess;
@@ -143,7 +161,7 @@
 					x: e.offsetX - 9,
 					y: e.offsetY,
 				});
-				if(!data){
+				if (!data) {
 					return;
 				}
 				this.addSubProcess(data.uuid, data);
@@ -213,9 +231,10 @@
 				this.onMouseMove(e);
 			},
 			onMouseMove(e) {
+				const scale = this.scale;
 				let x = e.x - this.drawState.boardOffset.x;
 				let y = e.y - this.drawState.boardOffset.y;
-				this.lineDrawing.path = this.drawingLineStart + `${x},${y} ${x},${y}`;
+				this.lineDrawing.path = this.drawingLineStart + `${x / scale},${y / scale} ${x / scale},${y / scale}`;
 			},
 			onMouseUp(e) {
 				document.removeEventListener("mousemove", this.onMouseMove);
@@ -256,11 +275,11 @@
 					});
 				}
 			},
-			onEditMeta(data, meta){
+			onEditMeta(data, meta) {
 				this.$emit('edit-meta', meta);
 			},
 			editSubProcess(process) {
-				if (!process.meta.isDivider && (this.editable || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
+				if (!process.meta.isDivider && (this.editable || process.meta.type !== 'builtin' || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
 					this.$emit('edit-process', process);
 				}
 			},
@@ -309,7 +328,43 @@
 						}
 					}
 				});
+			},
+			onBoardMouseDown(e) {
+				if (e.target !== this.$refs.board) {
+					return;
+				}
+				document.addEventListener("mousemove", this.onBoardMouseMove);
+				document.addEventListener("mouseup", this.onBoardMouseUp);
+
+				const {screenX, screenY} = e;
+				this.boardDragDownPos = {x: screenX, y: screenY};
+				this.boardDragStartPos = {
+					x: this.boardOffset.x,
+					y: this.boardOffset.y,
 				}
+			},
+			onBoardMouseMove(e) {
+				if (!this.boardDragDownPos) {
+					return;
+				}
+				const {x, y} = this.boardDragDownPos;
+				const {screenX, screenY} = e;
+				const offset = {
+					x: screenX - x,
+					y: screenY - y,
+				};
+
+				this.boardOffset.x = this.boardDragStartPos.x + offset.x / this.scale;
+				this.boardOffset.y = this.boardDragStartPos.y + offset.y / this.scale;
+				//console.log(this.boardOffset.x, this.boardOffset.y);
+			},
+			onBoardMouseUp(e) {
+				if (!this.boardDragDownPos) {
+					return;
+				}
+
+				this.boardDragDownPos = null;
+			},
 		}
 	}
 </script>

src/views/Editor/behavior-editor/Board/ProcessNode.vue

@@ -158,8 +158,8 @@
 				const {x, y, dx, dy} = this.mouseDownPos;
 				const offset = this.offset = {x: e.screenX - x, y: e.screenY - y};
 
-				const tx = offset.x + dx;
-				const ty = offset.y + dy;
+				const tx = offset.x / this.drawState.boardScale + dx;
+				const ty = offset.y / this.drawState.boardScale + dy;
 
 				this.data.design.x = tx;
 				this.data.design.y = ty;