修改dockpoint为dockpin

晚上分流器逻辑

src/main.js

@@ -4,7 +4,7 @@ import router from './router'
 import store from './store/index'
 import i18n from './i18n'
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 import './assets/style.css'
 import './plugins/element.js'
@@ -15,4 +15,6 @@ new Vue({
   store,
   i18n,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app');
+
+//todo 节点选择器
\ No newline at end of file

src/store/modules/behavior.js

@@ -47,7 +47,7 @@ export const behaviorStore = {
 				});
 			}
 		},
-		addCustomProcessMeta(state, meta) {
+		addProcessMeta(state, meta) {
 			state.data.processes.push(meta);
 			return process;
 		},
@@ -99,8 +99,8 @@ export const behaviorStore = {
 			}
 			return result;
 		},
-		behavior_getAssetByUUID: state=>uuid=>{
-			return state.data.assets.find(item=>item.uuid === uuid);
+		behavior_getAssetByUUID: state => uuid => {
+			return state.data.assets.find(item => item.uuid === uuid);
 		},
 	},
 	actions: {
@@ -112,7 +112,17 @@ export const behaviorStore = {
 				options: {},
 				output: ['success', 'failed'],
 			};
-			commit('addCustomProcessMeta', meta);
+			commit('addProcessMeta', meta);
+			return meta;
+		},
+		addDividerProcessMeta({commit, state}) {
+			let meta = {
+				id: generateUUID(),
+				isDivider: true,
+				name: 'Divider',
+				output: ['p0'],
+			};
+			commit('addProcessMeta', meta);
 			return meta;
 		},
 	}

src/store/modules/env.js

@@ -29,12 +29,19 @@ export const envStore = {
 			return groupProcesses(state.processes, process => process.isPrefab);
 		},
 		builtinProcessTree: state => {
+			const tree = groupProcesses(state.processes, process => !process.isPrefab);
+
+			const dividerProcess = {
+				id: 'divider',
+				name: 'Divider',
+			};
+			tree.unshift(dividerProcess);
 			const customProcess = {
 				id: 'custom',
 				name: 'Custom',
 			};
-			const tree = groupProcesses(state.processes, process => !process.isPrefab);
 			tree.unshift(customProcess);
+
 			tree.push({
 				name: 'custom',
 				children: [],

src/themes/light/behavior.scss

 @import "var";
 
-$dock-point-width: 9px;
+$dock-pin-width: 9px;
 
 
 .behavior-editor-dialog {
@@ -86,7 +86,7 @@ $dock-point-width: 9px;
 					border-radius: 5px;
 					outline: none;
 					user-select: none;
-					margin: 0 $dock-point-width;
+					margin: 0 $dock-pin-width;
 
 					/*&:hover {
 						border-color: $block-border-hover-background-color;
@@ -172,7 +172,7 @@ $dock-point-width: 9px;
 						display: flex;
 						flex-direction: column;
 
-						.point {
+						.pin {
 							border: 1px solid $block-border-blur-background-color;
 							padding: 1px;
 							margin-bottom: 5px;
@@ -201,12 +201,12 @@ $dock-point-width: 9px;
 
 					.input {
 						@extend .dock;
-						left: -$dock-point-width;
+						left: -$dock-pin-width;
 					}
 
 					.output {
 						@extend .dock;
-						right: -$dock-point-width;
+						right: -$dock-pin-width;
 					}
 				}
 

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

@@ -9,11 +9,11 @@
 				              class="background full-size" splitpanes-min="20"
 				              :splitpanes-size="70"/>
 			</split-panes>
-			<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
+			<div class="center full-size background" splitpanes-min="20" :splitpanes-size="60">
 				<edit-path :processStack="processStack" @pop="onPop"/>
 				<board ref="board" @select-process-node="onSelectProcessNode" @edit-process="editProcess"/>
 			</div>
-			<div class="properties background full-size" splitpanes-min="20" :splitpanes-size="30">
+			<div class="properties background full-size" splitpanes-min="20" :splitpanes-size="20">
 				<properties-editor ref="properties"/>
 			</div>
 		</split-panes>
@@ -126,7 +126,7 @@
 						replaceMetaID: meta.id,
 					});
 				}
-				this.$refs.board.updateProcessNode();
+				this.$refs.board.updateProcessNode(meta.id);
 			},
 			...mapMutations([
 				'updateProcesses',

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

@@ -9,11 +9,12 @@
 			<g id="nodes">
 				<process-node v-for="(process, key, index) of subProcessMap" :ref="'pn_' + key" :process="process" :key="index"
 				              @click="onClickProcessNode(process, key)"
-				              @hover-point="onPointHover"
-				              @leave-point="onPointLeave"
-				              @down-point="onPointDown"
-				              @delete="onPointDelete"
+				              @hover-pin="onPinHover"
+				              @leave-pin="onPinLeave"
+				              @down-pin="onPintDown"
+				              @delete="onProcessNodeDelete"
 				              @dblclick="editSubProcess(process)"
+				              @meta-modified="onProcessMetaModified"
 				/>
 			</g>
 		</svg>
@@ -56,6 +57,10 @@
 		methods: {
 			...mapActions([
 				'addCustomProcessMeta',
+				'addDividerProcessMeta',
+			]),
+			...mapMutations([
+				'deleteProcessMeta',
 			]),
 			async edit(process, resolveProcess) {
 				this.selectedProcessNode = null;
@@ -82,10 +87,17 @@
 				this.$set(this.subProcessMap, uuid, process);
 			},
 			async addSubProcessData(processId, pos) {
-				let process;
-				if (processId === 'custom') {
-					const processMeta = await this.addCustomProcessMeta();
+				let process, processMeta;
+
+				switch(processId){
+					case 'custom':
+						processMeta = await this.addCustomProcessMeta();
+						processId = processMeta.id;
+						break;
+					case 'divider':
+						processMeta = await this.addDividerProcessMeta();
 						processId = processMeta.id;
+						break;
 				}
 
 				process = this.resolveProcess(processId);
@@ -124,7 +136,7 @@
 				this.addSubProcess(data.uuid, data);
 
 				this.$nextTick(() => {
-					events.$emit('update-dock-point-pos');
+					events.$emit('update-dock-pin-pos');
 				});
 			},
 			measure() {
@@ -133,7 +145,7 @@
 				state.boardOffset.y = y;
 
 				this.$nextTick(() => {
-					events.$emit('update-dock-point-pos');
+					events.$emit('update-dock-pin-pos');
 					this.updateLines();
 				});
 			},
@@ -165,20 +177,20 @@
 					state.lineID++;
 				}
 			},
-			onPointHover(x, y, point) {
-				this.$refs.toolTip.show(x + 10, y - 8, point);
+			onPinHover(x, y, pin) {
+				this.$refs.toolTip.show(x + 10, y - 8, pin);
 			},
-			onPointLeave(x, y, point) {
+			onPinLeave(x, y, pin) {
 				this.$refs.toolTip.hide();
 			},
-			onPointDown(e, process, point) {
+			onPintDown(e, process, pin) {
 				document.addEventListener("mousemove", this.onMouseMove);
 				document.addEventListener("mouseup", this.onMouseUp);
 
 				this.processDrawing = process;
-				this.pointDrawing = point;
+				this.pointDrawing = pin;
 				const {x, y} = process.design;
-				const startPos = process.design.output[point][0];
+				const startPos = process.design.output[pin][0];
 				this.drawingLineStart = `M${startPos.x + x - DOCK_POINT_OFFSET},${startPos.y + y + DOCK_POINT_OFFSET} C${startPos.x + x + 100},${startPos.y + y} `;
 				this.lineDrawing.visible = true;
 				state.drawing = true;
@@ -208,7 +220,7 @@
 				prev.output[outputType].splice(outputIndex, 1);
 				this.$delete(this.lines, id);
 			},
-			onPointDelete(process) {
+			onProcessNodeDelete(process, meta) {
 				this.$delete(this.subProcessMap, process.uuid);
 				this.$delete(this.process.meta.sub, process.uuid);
 
@@ -220,12 +232,30 @@
 						this.onDeleteLine(line);
 					}
 				}
+
+				if(meta.isDivider){ //如果是分流器还要删除对应的meta
+					this.deleteProcessMeta(meta.id);
+				}
 			},
 			editSubProcess(process) {
-				if (process.meta.type !== 'builtin' || process.meta.sub && Object.keys(process.meta.sub).length > 0) {
+				if (!process.meta.isDivider && (process.meta.type !== 'builtin' || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
 					this.$emit('edit-process', process);
 				}
 			},
+			onProcessMetaModified(process, meta){
+				let ids = Object.keys(this.lines);
+				for (let id of ids) {
+					const line = this.lines[id];
+					const {prev,} = line;
+
+					if (prev === process) {
+						const {outputType} = line;
+						if(meta.output.indexOf(outputType) < 0){
+							this.onDeleteLine(line);
+						}
+					}
+				}
+			},
 			onClickProcessNode(process, uuid) {
 				for (let key in this.$refs) {
 					if (key.startsWith('pn_')) {
@@ -242,14 +272,22 @@
 					}
 				}
 			},
-			updateProcessNode() {
-				if (this.selectedProcessNode) {
+			updateProcessNode(metaID) {
 				this.$nextTick(()=>{
-						this.selectedProcessNode.updateSize();
-						this.selectedProcessNode.updateDockPointPos();
-					});
+
+					for (let key in this.$refs) {
+						if (key.startsWith('pn_')) {
+							const processNode = this.$refs[key][0];
+
+							if (processNode.meta.id === metaID) {
+								this.onProcessMetaModified(processNode.data, processNode.meta);
+								processNode.updateSize();
+								processNode.updateDockPointPos();
+							}
 						}
 					}
+				});
+			}
 		}
 	}
 </script>

src/views/Editor/behavior-editor/Board/DockPoint.vue → src/views/Editor/behavior-editor/Board/DockPin.vue

 <template>
-	<div class="point"
+	<div class="pin"
 	     @mousedown.stop="onMouseDown"
 	     @mouseenter.stop="onMouseEnter"
 	     @mouseleave.stop="onMouseLeave"
@@ -10,7 +10,7 @@
 
 <script>
 	export default {
-		name: "DockPoint",
+		name: "DockPin",
 		props: ['data'],
 		methods: {
 			onMouseDown(e) {

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

@@ -8,7 +8,11 @@
 				   @mousedown.stop.prevent></i>
 			</div>
 			<div class="body">
-				<div class="field-item" v-for="(param, key, index) in meta.options" :key="index">
+				<div v-if="meta.isDivider">
+					<el-button size="mini" icon="el-icon-plus" circle @click="outputPointModify('add')"></el-button>
+					<el-button size="mini" icon="el-icon-minus" circle @click="outputPointModify('remove')"></el-button>
+				</div>
+				<div v-else class="field-item" v-for="(param, key, index) in meta.options" :key="index">
 					<span class="key">{{param.alias || key}}</span>:
 					<div v-if="param.type === 'color'">
 						<div class="color-value" :style="{'background-color': valueToString(param, data, key)}"></div>
@@ -17,27 +21,27 @@
 				</div>
 			</div>
 			<div ref="inputDock" class="dock input">
-				<dock-point v-if="meta.id !== 'entry'" v-for="(point, key, index) in inputMeta" :key="index"></dock-point>
+				<dock-pin v-if="meta.id !== 'entry'" v-for="(pin, key, index) in inputMeta" :key="index"></dock-pin>
 			</div>
 			<div ref="outputDock" class="dock output">
-				<dock-point v-for="(point, key, index) in meta.output" :key="index" :data="point"
-				            @mouseenter="onPointHover"
-				            @mouseleave="onPointLeave"
-				            @mousedown="onPointDown"
-				></dock-point>
+				<dock-pin v-for="(pin, key, index) in meta.output" :key="index" :data="pin"
+				            @mouseenter="onPinHover"
+				            @mouseleave="onPinLeave"
+				            @mousedown="onPinDown"
+				></dock-pin>
 			</div>
 		</div>
 	</foreignObject>
 </template>
 
 <script>
-	import DockPoint from "./DockPoint";
+	import DockPin from "./DockPin";
 	import {state} from "./state";
 	import events from "../../../../global-events";
-	//todo 容器坐标改变影响节点坐标
+
 	export default {
 		name: "ProcessNode",
-		components: {DockPoint},
+		components: {DockPin},
 		props: ['process'],
 		data() {
 			this.prepare();
@@ -52,10 +56,10 @@
 		mounted() {
 			this.updateSize();
 
-			events.$on('update-dock-point-pos', this.updateDockPointPos);
+			events.$on('update-dock-pin-pos', this.updateDockPointPos);
 		},
 		destroyed() {
-			events.$off('update-dock-point-pos', this.updateDockPointPos);
+			events.$off('update-dock-pin-pos', this.updateDockPointPos);
 		},
 		computed: {
 			meta() {
@@ -75,7 +79,7 @@
 		methods: {
 			valueToString(param, data, key) {
 				if (param.type === 'asset') {
-					if(data.options.hasOwnProperty(key)){
+					if (data.options.hasOwnProperty(key)) {
 						let asset = this.$store.getters.behavior_getAssetByUUID(data.options[key]);
 						return asset.name;
 					}
@@ -172,8 +176,8 @@
 
 							let posArr = [];
 							dockPointPos[key] = posArr;
-							let dockPoint = container.children[i];
-							const {x, y} = dockPoint.getBoundingClientRect();
+							let dockPin = container.children[i];
+							const {x, y} = dockPin.getBoundingClientRect();
 							posArr.push({
 								x: x - dx - offX + 4.5,
 								y: y - dy - offY,
@@ -183,23 +187,47 @@
 					this.$set(this.process.data.design, side, dockPointPos);
 				}
 			},
-			onPointHover(e, point) {
+			onPinHover(e, pin) {
 				const {x, y} = e.target.getBoundingClientRect();
-				this.$emit('hover-point', x, y, point);
+				this.$emit('hover-pin', x, y, pin);
 			},
-			onPointLeave(e, point) {
+			onPinLeave(e, pin) {
 				const {x, y} = e.target.getBoundingClientRect();
-				this.$emit('leave-point', x, y, point);
+				this.$emit('leave-pin', x, y, pin);
 			},
-			onPointDown(e, point) {
-				let output = this.data.output[point];
+			onPinDown(e, pin) {
+				let output = this.data.output[pin];
 				if (!output || output.length === 0) {
-					this.$emit('down-point', e, this.data, point);
+					this.$emit('down-pin', e, this.data, pin);
 				}
 			},
 			onClickDelete() {
-				this.$emit('delete', this.data);
-			},
+				this.$emit('delete', this.data, this.meta);
+			},
+			outputPointModify(action) {
+				let output = this.meta.output;
+				let count = output.length;
+				switch (action) {
+					case 'add':
+						count++;
+						break;
+					case 'remove':
+						count--;
+						if (count < 0) {
+							count = 0;
+						}
+						break;
+				}
+				output.splice(0);
+				for (let i = 0; i < count; i++) {
+					output.push('p' + i);
+				}
+
+				this.$emit('meta-modified', this.data, this.meta);
+				this.$nextTick(()=>{
+					this.updateDockPointPos();
+				});
+			}
 		}
 	}
 </script>

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

@@ -70,12 +70,13 @@
 			edit(meta) {
 				this.visible = true;
 				this.meta = JSON.parse(JSON.stringify(meta));
+				this.oldMetaID = this.meta.id;
 			},
 			onClickEditOptions() {
 				this.$refs.optionsEditorDialog.edit(this.meta.options);
 			},
 			save() {
-				if (this.$store.getters.metaIDExists(this.meta.id)) {
+				if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
 					this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
 						.catch((e) => {
 						});

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

 <template>
 	<div class="process-tree">
+		<el-input v-model="filterText" size="mini"/>
 		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
 			<el-tree
+				ref="tree"
 				:data="data"
 				:props="defaultProps"
 				empty-text=""
+				:filter-node-method="filterNodeMethod"
 			>
 				<div slot-scope="{ node, data }" class="process-tree-node">
 					<div class="node-name">
 						<span :draggable="draggable(data)" @dragstart.stop="dragProcessStart(data, $event)">{{data.name}}</span>
 					</div>
 
-					<el-dropdown v-if="data.type !== 'builtin' && !data.hasOwnProperty('children') && data.id !== 'custom'" class="more-button" size="mini" trigger="click"
+					<el-dropdown v-if="metaEditable(data)" class="more-button" size="mini" trigger="click"
 					             @command="(command)=>{onMoreMenu(command, data, node)}">
 						<el-link icon="el-icon-more" :underline="false" @click.stop/>
 						<el-dropdown-menu slot="dropdown">
@@ -27,6 +30,8 @@
 </template>
 
 <script>
+	const editableIds = ['custom', 'divider'];
+
 	export default {
 		name: "ProcessList",
 		props: [
@@ -34,19 +39,40 @@
 		],
 		data() {
 			return {
+				filterText: '',
 				defaultProps: {
 					children: 'children',
 					label: 'name'
 				}
 			}
 		},
+		watch: {
+			filterText(val) {
+				this.updateFilter();
+			},
+			data: {
+				handler(v) {
+					this.updateFilter();
+				},
+				immediate: true,
+				deep: true
+			}
+		},
 		methods: {
+			updateFilter(){
+				if(this.$refs.tree){
+					this.$refs.tree.filter(this.filterText);
+				}
+			},
 			draggable(data) {
-				return !data.hasOwnProperty('children');
+				return !data.hasOwnProperty('children') && data.isDivider !== true ;
 			},
 			dragProcessStart(data, event) {
 				event.dataTransfer.setData('process', data.id);
 			},
+			metaEditable(data){
+				return data.type !== 'builtin' && !data.hasOwnProperty('children') && !editableIds.includes(data.id) && data.isDivider !== true
+			},
 			onMoreMenu(command, data, node) {
 				switch (command) {
 					case 'edit':
@@ -56,6 +82,11 @@
 						this.$emit('delete-meta', data);
 						break;
 				}
+			},
+			filterNodeMethod(value, data) {
+				let filterDivider = data.isDivider !== true;
+				if (!value) return filterDivider;
+				return filterDivider && !data.hasOwnProperty('children') && data.name.toUpperCase().indexOf(value.toUpperCase()) >= 0;
 			}
 		},