内建过程不可编辑props

mock/api/editor/info/index.js

@@ -28,6 +28,31 @@ const data = {
 				},
 				output: ['complete'],
 			},
+			{
+				id: 'hehe',
+				name: 'Hehe',
+				desc: '呵呵',
+				type: 'builtin',
+				subEntry: '1',
+				sub: {
+					1: {
+						uuid: '1',
+						alias: '入口',
+						meta: 'entry',
+						output: {
+							success: ['2'],
+						},
+					},
+					2: {
+						uuid: '2',
+						meta: 'wait',
+						alias: '等待',
+						props: {
+							duration: 500,
+						},
+					},
+				}
+			},
 			{
 				id: 'prefab1',
 				name: 'Prefab1',
@@ -53,7 +78,7 @@ const data = {
 						},
 					},
 				}
-			}
+			},
 		],
 		scripts: [
 			{

src/locales/en.json

@@ -33,6 +33,9 @@
   "Preparing": "Preparing…",
   "Deleting": "Deleting…",
   "Saving": "Saving…",
+  "Divider": "Divider",
+  "Custom": "Custom",
+  "Entry": "Entry",
   "Create project": "Create project",
 	"Rename project": "Rename project",
 	"Props Editor": "Props Editor",

src/store/modules/behavior.js

@@ -4,7 +4,7 @@
  * 行为编辑
  */
 
-import Vue from 'vue';
+import i18n from "../../i18n";
 import generateUUID from "uuid/v4";
 import {metaInUse, updateProcesses} from "../../utils";
 
@@ -16,6 +16,15 @@ export const behaviorStore = {
 		originData: null,
 		originBehaviors: null,
 		behaviors: null,
+
+		processStack: [],
+		editable: false,
+		drawState: {
+			drawing: false,
+			targetUUID: '',
+			lineID: 0,
+			boardOffset: {x: 0, y: 0},
+		},
 	},
 	mutations: {
 		behavior_startEdit(state, {originData, behaviors, event}) {
@@ -42,7 +51,7 @@ export const behaviorStore = {
 					sub: {
 						[subEntryUUID]: {
 							uuid: subEntryUUID,
-							alias: 'Entry',
+							alias: i18n.t('Entry'),
 							meta: 'entry',
 							design: {
 								x: 10,
@@ -76,6 +85,18 @@ export const behaviorStore = {
 				}
 			}
 		},
+		clearProcessStack(state) {
+			state.processStack.splice(0);
+			updatePropsEditable(state);
+		},
+		pushProcessStack(state, process) {
+			state.processStack.push(process);
+			updatePropsEditable(state);
+		},
+		popProcessStack(state, index) {
+			state.processStack.splice(index);
+			updatePropsEditable(state);
+		},
 	},
 	getters: {
 		customProcessMap: state => {
@@ -108,7 +129,7 @@ export const behaviorStore = {
 		behavior_getAssetByUUID: state => uuid => {
 			return state.data.assets.find(item => item.uuid === uuid);
 		},
-		behavior_views: state=>{
+		behavior_views: state => {
 			return state.data.views;
 		}
 	},
@@ -116,7 +137,7 @@ export const behaviorStore = {
 		addCustomProcessMeta({commit, state}) {
 			let meta = {
 				id: generateUUID(),
-				name: 'Custom',
+				name: i18n.t('Custom'),
 				script: '',
 				props: {},
 				output: ['success', 'failed'],
@@ -127,7 +148,7 @@ export const behaviorStore = {
 		addDividerProcessMeta({commit, state}) {
 			let meta = {
 				id: generateUUID(),
-				name: 'Divider',
+				name: i18n.t('Divider'),
 				isDivider: true,
 				output: ['p0'],
 			};
@@ -136,3 +157,7 @@ export const behaviorStore = {
 		},
 	}
 };
+
+function updatePropsEditable(state) {
+	state.editable = state.processStack.filter(item => item.meta.type === 'builtin') <= 0;
+}

src/store/modules/env.js

@@ -34,13 +34,13 @@ export const envStore = {
 
 			const dividerProcess = {
 				id: 'divider',
-				name: 'Divider',
+				name: i18n.t('Divider'),
 				desc: i18n.t('Divider node desc'),//'分流节点，出口会按顺序一次执行',
 			};
 			tree.unshift(dividerProcess);
 			const customProcess = {
 				id: 'custom',
-				name: 'Custom',
+				name: i18n.t('Custom'),
 				desc: i18n.t('Custom node desc'),//'自定义节点',
 			};
 			tree.unshift(customProcess);

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

@@ -37,7 +37,6 @@
 		props: [],
 		data() {
 			return {
-				processStack: [],
 				metaInEditing: null,
 			}
 		},
@@ -57,14 +56,12 @@
 			},
 			...mapState({
 				behavior: state => state.behavior.currentBehavior,
+				processStack: state=>state.behavior.processStack,
 			}),
 			...mapGetters([
 				'prefabProcessTree',
 				'builtinProcessTree'
-			])
-		},
-		mounted() {
-
+			]),
 		},
 		methods: {
 			resolveProcess(id) {
@@ -75,7 +72,7 @@
 				}
 			},
 			edit() {
-				this.processStack.splice(0);
+				this.clearProcessStack();
 				let process = new Process(null, this.behavior, this.resolveProcess);
 				this.editProcess(process);
 			},
@@ -83,12 +80,12 @@
 				this.$refs.properties.edit(process);
 			},
 			editProcess(process) {
-				this.processStack.push(process);
+				this.pushProcessStack(process);
 				this.$refs.board.edit(process, this.resolveProcess);
 				this.$refs.properties.edit();
 			},
 			onPop(index) {
-				this.processStack.splice(index + 1);
+				this.popProcessStack(index + 1);
 				let process = this.processStack[this.processStack.length - 1];
 				this.$refs.board.edit(process, this.resolveProcess);
 				this.$refs.properties.edit();
@@ -131,6 +128,10 @@
 			...mapMutations([
 				'updateProcesses',
 				'deleteProcessMeta',
+				'updatePropsEditable',
+				'clearProcessStack',
+				'pushProcessStack',
+				'popProcessStack',
 			]),
 			...mapGetters([
 				'metaInUse',

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

@@ -29,7 +29,6 @@
 	import LinkLine from "./Board/LinkLine";
 	import ToolTip from "./Board/ToolTip";
 	import {DOCK_POINT_OFFSET} from "../../../config";
-	import {state} from "./Board/state";
 	import events from "../../../global-events";
 	import generateUUID from "uuid/v4";
 //todo 缩放功能
@@ -53,7 +52,11 @@
 		mounted() {
 
 		},
-		computed: {},
+		computed: {
+			...mapState({
+				drawState: state=>state.behavior.drawState
+			})
+		},
 		methods: {
 			...mapActions([
 				'addCustomProcessMeta',
@@ -141,8 +144,8 @@
 			},
 			onResize(){
 				const {x, y} = this.$el.getBoundingClientRect();
-				state.boardOffset.x = x;
-				state.boardOffset.y = y;
+				this.drawState.boardOffset.x = x;
+				this.drawState.boardOffset.y = y;
 			},
 			measure() {
 				this.onResize();
@@ -170,14 +173,14 @@
 			addLine(process, outputID, outputType, outputIndex) {
 				const nextProcess = this.subProcessMap[outputID];
 				if (nextProcess) {
-					this.$set(this.lines, state.lineID, {
-						id: state.lineID,
+					this.$set(this.lines, this.drawState.lineID, {
+						id: this.drawState.lineID,
 						prev: process,
 						next: nextProcess.data,
 						outputType,
 						outputIndex,
 					});
-					state.lineID++;
+					this.drawState.lineID++;
 				}
 			},
 			onPinHover(x, y, pin) {
@@ -196,12 +199,12 @@
 				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;
+				this.drawState.drawing = true;
 				this.onMouseMove(e);
 			},
 			onMouseMove(e) {
-				let x = e.x - state.boardOffset.x;
-				let y = e.y - state.boardOffset.y;
+				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}`;
 			},
 			onMouseUp(e) {
@@ -209,13 +212,13 @@
 				document.removeEventListener("mouseup", this.onMouseUp);
 
 				this.lineDrawing.visible = false;
-				state.drawing = false;
+				this.drawState.drawing = false;
 
-				if (state.targetUUID && state.targetUUID !== this.processDrawing.uuid) {
-					this.processDrawing.output[this.pointDrawing] = [state.targetUUID];
-					this.addLine(this.processDrawing, state.targetUUID, this.pointDrawing, 0);
+				if (this.drawState.targetUUID && this.drawState.targetUUID !== this.processDrawing.uuid) {
+					this.processDrawing.output[this.pointDrawing] = [this.drawState.targetUUID];
+					this.addLine(this.processDrawing, this.drawState.targetUUID, this.pointDrawing, 0);
 
-					state.targetUUID = null;
+					this.drawState.targetUUID = null;
 				}
 			},
 			onDeleteLine(line) {

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

@@ -40,8 +40,8 @@
 </template>
 
 <script>
+	import {mapState} from "vuex";
 	import DockPin from "./DockPin";
-	import {state} from "./state";
 	import events from "../../../../global-events";
 	import {linkedFlag} from "../../../../utils";
 
@@ -75,6 +75,9 @@
 			data() {
 				return this.process.data;
 			},
+			...mapState({
+				drawState: state=>state.behavior.drawState
+			}),
 		},
 		watch: {
 			process(v) {
@@ -125,13 +128,13 @@
 				this.active = active;
 			},
 			onMouseEnter(e) {
-				if (state.drawing && this.meta.id !== 'entry') {
-					state.targetUUID = this.data.uuid;
+				if (this.drawState.drawing && this.meta.id !== 'entry') {
+					this.drawState.targetUUID = this.data.uuid;
 				}
 			},
 			onMouseLeave(e) {
-				if (state.drawing) {
-					state.targetUUID = null;
+				if (this.drawState.drawing) {
+					this.drawState.targetUUID = null;
 				}
 			},
 			onMouseDown(e) {
@@ -171,7 +174,7 @@
 			},
 			updateDockPointPos() {
 				const {x: dx, y: dy} = this.process.data.design;
-				const {x: offX, y: offY} = state.boardOffset;
+				const {x: offX, y: offY} = this.drawState.boardOffset;
 				for (let side of ['input', 'output']) {
 					let container = this.$refs[side + 'Dock'];
 					let sideMeta = side === 'input' ? this.inputMeta : this.meta[side];

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

-/**
- * Created by rockyl on 2019-10-08.
- */
-
-export const state = {
-	drawing: false,
-	targetUUID: '',
-	lineID: 0,
-	boardOffset: {x: 0, y: 0},
-};

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

 <template>
 	<div class="wrapper" v-if="process">
-		<el-input class="name-input" v-model="process.data.alias" clearable :placeholder="process.meta.name" size="mini">
+		<el-input :readonly="!editable" class="name-input" v-model="process.data.alias" clearable :placeholder="process.meta.name" size="mini">
 			<template slot="prepend">{{$t('Name')}}</template>
 		</el-input>
 		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
@@ -13,6 +13,7 @@
 				           :property="property"
 				           :container="process"
 				           :key="key"
+				           :editable="editable"
 				/>
 			</el-form>
 		</el-scrollbar>
@@ -20,6 +21,7 @@
 </template>
 
 <script>
+	import {mapState} from "vuex";
 	import NumberEditor from "./editors/NumberEditor";
 	import StringEditor from "./editors/StringEditor";
 	import EnumEditor from "./editors/EnumEditor";
@@ -46,6 +48,11 @@
 				process: null,
 			}
 		},
+		computed: {
+			...mapState({
+				editable: state => state.behavior.editable,
+			}),
+		},
 		methods: {
 			edit(process) {
 				this.process = process;

src/views/Editor/behavior-editor/editors/AssetEditor.vue

 <template>
-	<editor-wrapper :value="value" :container="container" :property="property" :propertyName="propertyName">
-		<el-select :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
+	<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-select :disabled="!editable" :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
 			<el-option
 				v-for="(item, key) in assets"
 				:key="key"
@@ -19,7 +19,7 @@
 	export default {
 		name: "AssetEditor",
 		components: {EditorWrapper,},
-		props: ['value', 'container', 'property', 'propertyName'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		computed: {
 			editValue() {
 				return this.value === undefined ? this.property.default : this.value;

src/views/Editor/behavior-editor/editors/BooleanEditor.vue

 <template>
-	<editor-wrapper :value="value" :container="container" :property="property" :propertyName="propertyName">
-		<el-switch :value="editValue" @input="onInput"
+	<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-switch :disabled="!editable" :value="editValue" @input="onInput"
 		           class="picker"></el-switch>
 	</editor-wrapper>
 </template>
@@ -11,7 +11,7 @@
 	export default {
 		name: "BooleanEditor",
 		components: {EditorWrapper},
-		props: ['value', 'container', 'property', 'propertyName'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		data() {
 			return {}
 		},

src/views/Editor/behavior-editor/editors/ColorEditor.vue

 <template>
-	<editor-wrapper :value="value" :container="container" :property="property" :propertyName="propertyName" class="color-editor-container">
+	<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName" class="color-editor-container">
 		<el-color-picker
+			:disabled="!editable"
 			class="picker"
 			:value="editValue"
 			@input="onInput"
@@ -16,7 +17,7 @@
 	export default {
 		name: "ColorEditor",
 		components: {EditorWrapper,},
-		props: ['value', 'container', 'property', 'propertyName'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		data() {
 			return {
 				predefineColors: [

src/views/Editor/behavior-editor/editors/EditorWrapper.vue

@@ -9,13 +9,14 @@
 		</template>
 		<el-popover
 			trigger="click"
+			:disabled="!editable"
 		>
 			<div>
 				<span>{{$t('Link to parent')}}: </span>
 				<el-switch :value="linked" @input="onChange"/>
 			</div>
 			<el-link style="padding: 3px;" slot="reference" icon="el-icon-link" :underline="false"
-			         :type="linked ? 'success' : 'default'"/>
+			         :type="linked ? 'success' : 'default'" :disabled="!editable"/>
 		</el-popover>
 	</el-form-item>
 </template>
@@ -33,6 +34,7 @@
 			value: {},
 			container: {},
 			propertyName: String,
+			editable: Boolean,
 			contentWidth: {
 				type: String,
 				default: '65%',

src/views/Editor/behavior-editor/editors/EnumEditor.vue

 <template>
-	<editor-wrapper :value="value" :container="container" :property="property" :propertyName="propertyName">
-		<el-select :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
+	<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-select :disabled="!editable" :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
 			<el-option
 				v-for="(item, key) in property.enum"
 				:key="item"
@@ -19,7 +19,7 @@
 	export default {
 		name: "EnumEditor",
 		components: {EditorWrapper,},
-		props: ['value', 'container', 'property', 'propertyName'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		computed: {
 			editValue() {
 				return this.value === undefined ? this.property.default : this.value;

src/views/Editor/behavior-editor/editors/NodeSelectEditor.vue

 <template>
-	<editor-wrapper :value="value" :container="container" :property="property" :propertyName="propertyName">
+	<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
 		<div style="display: flex;flex: 1;">
 			<el-popover
 				placement="top"
@@ -34,13 +34,13 @@
 						</el-button-group>
 					</div>
 				</div>
-				<el-input clearable slot="reference" v-model="editValue" @change="onInput" placeholder="unset">
+				<el-input clearable slot="reference" v-model="editValue" @change="onInput" placeholder="unset" :readonly="!editable">
 					<template slot="prepend">node://</template>
 				</el-input>
 			</el-popover>
 			<el-button-group>
-				<el-button :icon="editButtonIcon" @click="onClickEdit"></el-button>
-				<el-button icon="el-icon-delete" @click="onClickClean"></el-button>
+				<el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button>
+				<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
 			</el-button-group>
 		</div>
 	</editor-wrapper>
@@ -55,7 +55,7 @@
 	export default {
 		name: "NodeSelectEditor",
 		components: {EditorWrapper,},
-		props: ['value', 'container', 'property', 'propertyName'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		data() {
 			return {
 				editValueOrigin: this.value,

src/views/Editor/behavior-editor/editors/NumberEditor.vue

 <template>
-	<editor-wrapper :value="value" :container="container" :property="property" :propertyName="propertyName">
-		<el-input-number :value="editValue" @input="onInput" controls-position="right"
+	<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-input-number :disabled="!editable" :value="editValue" @input="onInput" controls-position="right"
 		                 :placeholder="defaultValue"></el-input-number>
 	</editor-wrapper>
 </template>
@@ -12,7 +12,7 @@
 	export default {
 		name: "NumberEditor",
 		components: {EditorWrapper,},
-		props: ['value', 'container', 'property', 'propertyName'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		computed: {
 			editValue() {
 				return this.value === undefined ? this.property.default : this.value;

src/views/Editor/behavior-editor/editors/StringEditor.vue

 <template>
-	<editor-wrapper :value="value" :container="container" :property="property" :propertyName="propertyName">
+	<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
 		<div style="display: flex;flex: 1;">
 			<el-popover
 				placement="top"
@@ -8,6 +8,7 @@
 				trigger="manual"
 				width="400"
 				v-model="popoverVisible"
+				:disabled="!editable"
 			>
 				<div>
 					<el-input
@@ -25,12 +26,12 @@
 						</el-button-group>
 					</div>
 				</div>
-				<el-input clearable slot="reference" :value="editValue" @input="onInput" @change="onChange"
+				<el-input clearable slot="reference" :value="editValue" @input="onInput" @change="onChange" :readonly="!editable"
 				          :placeholder="defaultValue"/>
 			</el-popover>
 			<el-button-group>
-				<el-button :icon="editButtonIcon" @click="onClickEdit" ></el-button>
-				<el-button icon="el-icon-delete" @click="onClickClean" ></el-button>
+				<el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button>
+				<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
 			</el-button-group>
 		</div>
 	</editor-wrapper>
@@ -43,7 +44,7 @@
 	export default {
 		name: "StringEditor",
 		components: {EditorWrapper,},
-		props: ['value', 'container', 'property', 'propertyName'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		data() {
 			return {
 				editValueOrigin: this.value,

src/views/Editor/dialogs/BehaviorEditorDialog.vue

@@ -43,7 +43,7 @@
 				this.$emit('change');
 			},
 			beforeClose(done) {
-				this.$confirm(this.$t('Save this behavior before?'), this.$t('Alert'), {
+				this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
 					showClose: false,
 					closeOnClickModal: false,
 					closeOnPressEscape: false,