内联过程实现

mock/api/project/query/data/index.js

@@ -228,7 +228,7 @@ const data = {
 					alias: 'test',
 					meta: 'test',
 					props: {
-						text: '$_linked_$',
+
 					},
 					output: {
 						success: [],

src/config.js

@@ -5,7 +5,8 @@
 export let API_HOST;
 if(process.env.NODE_ENV === 'development'){
 	//API_HOST = 'http://10.10.95.74:7777';
-	API_HOST = 'http://localhost:3002';
+	//API_HOST = 'http://localhost:3002';
+	API_HOST = 'http://beacon.duibadev.com.cn'
 }else{
 	API_HOST = 'http://beacon.duibadev.com.cn'
 }

src/locales/en.json

@@ -64,6 +64,7 @@
 	"Edit Behavior": "Edit Behavior",
 	"Trigger once": "Trigger once",
 	"Meta Editor": "Meta Editor",
+	"As inline": "As inline",
 	"Link to parent": "Link to parent",
 	"Input project name": "Input project name",
 	"Invalid project name": "Invalid project name",

src/store/modules/behavior.js

@@ -4,6 +4,7 @@
  * 行为编辑
  */
 
+import Vue from "vue";
 import i18n from "../../i18n";
 import generateUUID from "uuid/v4";
 import {metaInUse, updateProcesses} from "../../utils";
@@ -75,15 +76,23 @@ export const behaviorStore = {
 				updateProcesses(process, targetMetaID, replaceMetaID);
 			}
 		},
-		deleteProcessMeta(state, metaID) {
-			for (let i = 0, li = state.data.processes.length; i < li; i++) {
-				const process = state.data.processes[i];
+		deleteProcessMeta(state, {meta, process}) {
+			let container;
+			if(meta.isInline){
+				container = process.meta.metas;
+			}else{
+				container = state.data.processes;
+			}
+			if(container){
+				for (let i = 0, li = container.length; i < li; i++) {
+					const process = container[i];
 
-				if (process.id === metaID) {
-					state.data.processes.splice(i, 1);
+					if (process.id === meta.id) {
+						container.splice(i, 1);
 						break;
 					}
 				}
+			}
 		},
 		clearProcessStack(state) {
 			state.processStack.splice(0);
@@ -134,25 +143,32 @@ export const behaviorStore = {
 		}
 	},
 	actions: {
-		addCustomProcessMeta({commit, state}) {
+		addCustomProcessMeta({commit, state}, {process, isInline, processId}) {
 			let meta = {
 				id: generateUUID(),
-				name: i18n.t('Custom'),
 				script: '',
 				props: {},
-				output: ['success', 'failed'],
-			};
-			commit('addProcessMeta', meta);
-			return meta;
-		},
-		addDividerProcessMeta({commit, state}) {
-			let meta = {
-				id: generateUUID(),
-				name: i18n.t('Divider'),
-				isDivider: true,
-				output: ['p0'],
+				isInline,
 			};
+			switch (processId) {
+				case 'custom':
+					meta.name = i18n.t('Custom');
+					meta.output = ['success', 'failed'];
+					break;
+				case 'divider':
+					meta.name = i18n.t('Divider');
+					meta.output = ['p0'];
+					meta.isDivider = true;
+					break;
+			}
+			if (isInline) {
+				if (!process.meta.metas) {
+					Vue.set(process.meta, 'metas', []);
+				}
+				process.meta.metas.push(meta);
+			} else {
 				commit('addProcessMeta', meta);
+			}
 			return meta;
 		},
 	}

src/themes/light/behavior.scss

@@ -75,8 +75,6 @@ $dock-pin-width: 9px;
 						stroke: $--color-primary;
 						stroke-dasharray: 5, 1;
 					}
-
-
 				}
 
 				.node {
@@ -91,6 +89,11 @@ $dock-pin-width: 9px;
 					user-select: none;
 					margin: 0 $dock-pin-width;
 
+					&:hover {
+						& > .top-bar {
+							visibility: visible;
+						}
+					}
 					/*&:hover {
 						border-color: $block-border-hover-background-color;
 
@@ -107,6 +110,21 @@ $dock-pin-width: 9px;
 						}
 					}*/
 
+					.top-bar {
+						height: 19px;
+						padding: 0 3px;
+						margin: -20px 5px 0;
+						border-top-left-radius: 3px;
+						border-top-right-radius: 3px;
+						background-color: rgba(0, 0, 0, 0.1);
+						align-self: flex-end;
+						visibility: hidden;
+
+						.el-link + .el-link {
+							margin-left: 5px;
+						}
+					}
+
 					.header {
 						min-height: 12px;
 						background-color: $block-border-blur-background-color;
@@ -117,17 +135,14 @@ $dock-pin-width: 9px;
 						color: white;
 						display: flex;
 
-						.title {
-							flex: 1;
+						i{
+							display: block;
+							//color: $--color-warning;
+							margin-right: 3px;
 						}
 
-						.delete-button {
-							padding: 2px;
-							color: $--border-color-lighter;
-
-							&:hover {
-								color: white;
-							}
+						.title {
+							flex: 1;
 						}
 					}
 
@@ -162,7 +177,7 @@ $dock-pin-width: 9px;
 							.string-value {
 								text-align: right;
 
-								.tag{
+								.tag {
 									color: $--color-success;
 								}
 							}
@@ -229,6 +244,10 @@ $dock-pin-width: 9px;
 					& > .header {
 						background-color: $block-border-focus-background-color;
 					}
+
+					/*& > .top-bar {
+						visibility: visible;
+					}*/
 				}
 			}
 		}

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

@@ -11,7 +11,7 @@
 			</split-panes>
 			<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
 				<edit-path :processStack="processStack" @pop="onPop"/>
-				<board ref="board" @select-process-node="onSelectProcessNode" @edit-process="editProcess"/>
+				<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">
 				<properties-editor ref="properties"/>

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

@@ -13,12 +13,14 @@
 				              @leave-pin="onPinLeave"
 				              @down-pin="onPintDown"
 				              @delete="onProcessNodeDelete"
+				              @edit-meta="onEditMeta"
 				              @dblclick="editSubProcess(process)"
 				              @meta-modified="onProcessMetaModified"
 				/>
 			</g>
 		</svg>
 		<tool-tip ref="toolTip"/>
+		<inline-choose-dialog ref="inlineChooseDialog"/>
 	</div>
 </template>
 
@@ -31,10 +33,13 @@
 	import {DOCK_POINT_OFFSET} from "../../../config";
 	import events from "../../../global-events";
 	import generateUUID from "uuid/v4";
-//todo 缩放功能
+	import InlineChooseDialog from "./InlineChooseDialog";
+
+	const customs = ['custom', 'divider'];
+	//todo 缩放功能
 	export default {
 		name: "Board",
-		components: {ToolTip, LinkLine, ProcessNode,},
+		components: {InlineChooseDialog, ToolTip, LinkLine, ProcessNode,},
 		props: [],
 		data() {
 			return {
@@ -46,7 +51,7 @@
 					visible: false,
 					path: '',
 					process: null,
-				}
+				},
 			}
 		},
 		mounted() {
@@ -54,7 +59,8 @@
 		},
 		computed: {
 			...mapState({
-				drawState: state=>state.behavior.drawState
+				drawState: state => state.behavior.drawState,
+				editable: state => state.behavior.editable,
 			})
 		},
 		methods: {
@@ -90,20 +96,21 @@
 				this.$set(this.subProcessMap, uuid, process);
 			},
 			async addSubProcessData(processId, pos) {
-				let process, processMeta;
+				let process, processMeta, isInline;
 
-				switch(processId){
-					case 'custom':
-						processMeta = await this.addCustomProcessMeta();
-						processId = processMeta.id;
-						break;
-					case 'divider':
-						processMeta = await this.addDividerProcessMeta();
+				if (customs.includes(processId)) {
+					try {
+						const result = await this.$refs.inlineChooseDialog.show();
+						isInline = result.isInline;
+					} catch (e) {
+						return;
+					}
+
+					processMeta = await this.addCustomProcessMeta({process: this.process, isInline, processId});
 					processId = processMeta.id;
-						break;
 				}
 
-				process = this.resolveProcess(processId);
+				process = this.process.resolveMeta(processId);
 
 				let data = {
 					uuid: generateUUID(),
@@ -136,13 +143,16 @@
 					x: e.offsetX - 9,
 					y: e.offsetY,
 				});
+				if(!data){
+					return;
+				}
 				this.addSubProcess(data.uuid, data);
 
 				this.$nextTick(() => {
 					events.$emit('update-dock-pin-pos');
 				});
 			},
-			onResize(){
+			onResize() {
 				const {x, y} = this.$el.getBoundingClientRect();
 				this.drawState.boardOffset.x = x;
 				this.drawState.boardOffset.y = y;
@@ -239,16 +249,22 @@
 					}
 				}
 
-				if(meta.isDivider){ //如果是分流器还要删除对应的meta
-					this.deleteProcessMeta(meta.id);
+				if (meta.isDivider || meta.isInline) { //如果是分流节点或者内联节点还要删除对应的meta
+					this.deleteProcessMeta({
+						meta,
+						process: this.process,
+					});
 				}
 			},
+			onEditMeta(data, meta){
+				this.$emit('edit-meta', meta);
+			},
 			editSubProcess(process) {
-				if (!process.meta.isDivider && (process.meta.type !== 'builtin' || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
+				if (!process.meta.isDivider && (this.editable || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
 					this.$emit('edit-process', process);
 				}
 			},
-			onProcessMetaModified(process, meta){
+			onProcessMetaModified(process, meta) {
 				let ids = Object.keys(this.lines);
 				for (let id of ids) {
 					const line = this.lines[id];
@@ -256,7 +272,7 @@
 
 					if (prev === process) {
 						const {outputType} = line;
-						if(meta.output.indexOf(outputType) < 0){
+						if (meta.output.indexOf(outputType) < 0) {
 							this.onDeleteLine(line);
 						}
 					}
@@ -279,7 +295,7 @@
 				}
 			},
 			updateProcessNode(metaID) {
-				this.$nextTick(()=>{
+				this.$nextTick(() => {
 
 					for (let key in this.$refs) {
 						if (key.startsWith('pn_')) {

src/views/Editor/behavior-editor/Board/Process.js

@@ -15,7 +15,7 @@ export default class Process {
 	}
 
 	resolveMeta(id) {
-		let meta = this.meta && this.meta.metas ? this.meta.metas[id] : null;
+		let meta = this.meta && this.meta.metas ? this.meta.metas.find(meta=>meta.id === id) : null;
 		if (!meta && this._parent) {
 			meta = this._parent.resolveMeta(id);
 		}

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

 <template>
 	<foreignObject :x="data.design.x" :y="data.design.y" :width="width" :height="height">
-		<div ref="node" :class="{active: active}" class="node" @mousedown="onMouseDown" @mouseenter="onMouseEnter"
+		<div ref="node" :class="{active: active}" class="node" style="margin-top: 20px;" @mousedown="onMouseDown" @mouseenter="onMouseEnter"
 		     @mouseleave="onMouseLeave" @click="onClick" @dblclick="onDblclick">
+			<div class="top-bar" v-if="meta.id !== 'entry' && editable">
+				<el-link icon="el-icon-delete" :underline="false" @mousedown.stop.prevent @click.stop="onClickDelete"/>
+				<el-link icon="el-icon-edit" :underline="false" v-if="meta.type !== 'builtin'" @mousedown.stop.prevent @click.stop="onClickEdit"/>
+			</div>
 			<div class="header">
+				<i v-if="meta.isInline">i</i>
 				<span class="title">{{data.alias || meta.name}}</span>
-				<i v-if="meta.id !== 'entry'" class="delete-button el-icon-delete" @click.stop="onClickDelete"
-				   @mousedown.stop.prevent></i>
 			</div>
 			<div class="body">
 				<div v-if="meta.isDivider">
@@ -83,7 +86,8 @@
 				return this.process.data;
 			},
 			...mapState({
-				drawState: state => state.behavior.drawState
+				drawState: state => state.behavior.drawState,
+				editable: state => state.behavior.editable,
 			}),
 		},
 		watch: {
@@ -176,7 +180,7 @@
 				this.$nextTick(() => {
 					let bounds = this.$refs.node.getBoundingClientRect();
 					this.width = bounds.width + 18;
-					this.height = bounds.height;
+					this.height = bounds.height + 20;
 				});
 			},
 			updateDockPointPos() {
@@ -221,6 +225,9 @@
 			onClickDelete() {
 				this.$emit('delete', this.data, this.meta);
 			},
+			onClickEdit() {
+				this.$emit('edit-meta', this.data, this.meta);
+			},
 			outputPointModify(action) {
 				let output = this.meta.output;
 				let count = output.length;

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

+<template>
+	<el-dialog
+		:title="$t('Alert')"
+		:visible.sync="dialogVisible"
+		append-to-body
+		@close="onClose"
+	>
+		<el-checkbox v-model="asInline">{{$t('As inline')}}</el-checkbox>
+		<span slot="footer" class="dialog-footer">
+	    <el-button size="mini" @click="dialogVisible = false">{{$t('Cancel')}}</el-button>
+	    <el-button size="mini" type="primary" @click="onConfirm">{{$t('Confirm')}}</el-button>
+	  </span>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "InlineChooseDialog",
+		data() {
+			return {
+				dialogVisible: false,
+				asInline: false,
+			}
+		},
+		methods: {
+			show() {
+				this.dialogVisible = true;
+				return new Promise((resolve, reject) => {
+					this.p = {resolve, reject};
+				});
+			},
+			onClose() {
+				if (this.p) {
+					this.p.reject();
+					this.p = null;
+				}
+				this.dialogVisible = false;
+			},
+			onConfirm() {
+				if (this.p) {
+					this.p.resolve({
+						isInline: this.asInline,
+					});
+					this.p = null;
+				}
+				this.dialogVisible = false;
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

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

@@ -14,12 +14,12 @@
 					<el-form-item prop="desc" label="Desc">
 						<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
 					</el-form-item>
-					<el-form-item prop="type" label="Type">
+					<!--<el-form-item prop="type" label="Type">
 						<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
 					</el-form-item>
 					<el-form-item prop="group" label="Group">
 						<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
-					</el-form-item>
+					</el-form-item>-->
 					<el-form-item label="Props">
 						<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
 							<template v-if="Object.keys(meta.props).length">