--

.history/src/views/Editor/behavior-editor/BehaviorEditor_20191128104254.vue

+<template>
+	<div class="behavior">
+		<split-panes>
+			<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
+				<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
+				              class="background full-size" splitpanes-min="20"
+				              :splitpanes-size="30"/>
+				<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
+				              class="background full-size" splitpanes-min="20"
+				              :splitpanes-size="70"/>
+			</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">
+				<properties-editor ref="properties"/>
+			</div>
+		</split-panes>
+		<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
+	</div>
+</template>
+
+<script>
+	import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
+	import Board from "./Board";
+	import SplitPanes from 'splitpanes'
+	import ProcessList from "./ProcessList";
+	import PropertiesEditor from "./PropertiesEditor";
+	import EditPath from "./Board/EditPath";
+	import Process from "./Board/Process";
+	import MetaEditorDialog from "./MetaEditorDialog";
+
+	export default {
+		name: "BehaviorEditor",
+		components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
+		props: [],
+		data() {
+			return {
+				metaInEditing: null,
+			}
+		},
+		computed: {
+			processContext() {
+				const {builtinsProcessMap, customProcessMap} = this.$store.getters;
+				return [
+					builtinsProcessMap,
+					customProcessMap,
+				]
+			},
+			normalProcessTree() {
+				const tree = this.builtinProcessTree;
+				const group = tree.find(item => item.name === 'custom');
+				group.children = this.$store.state.behavior.data.processes;
+				return tree;
+			},
+			...mapState({
+				behavior: state => state.behavior.currentBehavior,
+				processStack: state=>state.behavior.processStack,
+			}),
+			...mapGetters([
+				'prefabProcessTree',
+				'builtinProcessTree'
+			]),
+		},
+		methods: {
+			resolveProcess(id) {
+				for (let context of this.processContext) {
+					if (context[id]) {
+						return context[id];
+					}
+				}
+			},
+			edit() {
+				this.clearProcessStack();
+				let process = new Process(null, this.behavior, this.resolveProcess);
+				this.editProcess(process);
+			},
+			onSelectProcessNode(process) {
+				this.$refs.properties.edit(process);
+			},
+			editProcess(process) {
+				this.pushProcessStack(process);
+				this.$refs.board.edit(process, this.resolveProcess);
+				this.$refs.properties.edit();
+			},
+			onPop(index) {
+				this.popProcessStack(index + 1);
+				let process = this.processStack[this.processStack.length - 1];
+				this.$refs.board.edit(process, this.resolveProcess);
+				this.$refs.properties.edit();
+			},
+			onEditMeta(meta) {
+				this.metaInEditing = meta;
+				this.$refs.metaEditorDialog.edit(meta);
+			},
+			onDeleteMeta(meta) {
+				const inUse = this.$store.getters.metaInUse(meta.id);
+				if (inUse) {
+					this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
+						.catch((e) => {
+						});
+				} else {
+					this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Delete'),
+						cancelButtonText: this.$t('Cancel'),
+						type: 'warning'
+					}).then(() => {
+						this.deleteProcessMeta({meta});
+					}).catch((e) => {
+					});
+				}
+			},
+			onSaveMeta(meta) {
+				let oldMetaID = this.metaInEditing.id;
+				for (let key in meta) {
+					this.metaInEditing[key] = meta[key];
+				}
+				this.metaInEditing = null;
+				if (oldMetaID !== meta.id) {
+					this.updateProcesses({
+						targetMetaID: oldMetaID,
+						replaceMetaID: meta.id,
+					});
+				}
+				this.$refs.board.updateProcessNode(meta.id);
+			},
+			...mapMutations([
+				'updateProcesses',
+				'deleteProcessMeta',
+				'updatePropsEditable',
+				'clearProcessStack',
+				'pushProcessStack',
+				'popProcessStack',
+				'setScale',
+			]),
+			...mapGetters([
+				'metaInUse',
+			]),
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

.history/src/views/Editor/behavior-editor/BehaviorEditor_20191203134213.vue

+<template>
+	<div class="behavior">
+		<split-panes>
+			<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
+				<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
+				              class="background full-size" splitpanes-min="20"
+				              :splitpanes-size="30"/>
+				<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
+				              class="background full-size" splitpanes-min="20"
+				              :splitpanes-size="70"/>
+			</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>s
+				<board ref="board" @select-proces-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"/>
+			</div>
+		</split-panes>
+		<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
+	</div>
+</template>
+
+<script>
+	import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
+	import Board from "./Board";
+	import SplitPanes from 'splitpanes'
+	import ProcessList from "./ProcessList";
+	import PropertiesEditor from "./PropertiesEditor";
+	import EditPath from "./Board/EditPath";
+	import Process from "./Board/Process";
+	import MetaEditorDialog from "./MetaEditorDialog";
+
+	export default {
+		name: "BehaviorEditor",
+		components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
+		props: [],
+		data() {
+			return {
+				metaInEditing: null,
+			}
+		},
+		computed: {
+			processContext() {
+				const {builtinsProcessMap, customProcessMap} = this.$store.getters;
+				return [
+					builtinsProcessMap,
+					customProcessMap,
+				]
+			},
+			normalProcessTree() {
+				const tree = this.builtinProcessTree;
+				const group = tree.find(item => item.name === 'custom');
+				group.children = this.$store.state.behavior.data.processes;
+				return tree;
+			},
+			...mapState({
+				behavior: state => state.behavior.currentBehavior,
+				processStack: state=>state.behavior.processStack,
+			}),
+			...mapGetters([
+				'prefabProcessTree',
+				'builtinProcessTree'
+			]),
+		},
+		methods: {
+			resolveProcess(id) {
+				for (let context of this.processContext) {
+					if (context[id]) {
+						return context[id];
+					}
+				}
+			},
+			edit() {
+				this.clearProcessStack();
+				let process = new Process(null, this.behavior, this.resolveProcess);
+				this.editProcess(process);
+			},
+			onSelectProcessNode(process) {
+				this.$refs.properties.edit(process);
+			},
+			editProcess(process) {
+				this.pushProcessStack(process);
+				this.$refs.board.edit(process, this.resolveProcess);
+				this.$refs.properties.edit();
+			},
+			onPop(index) {
+				this.popProcessStack(index + 1);
+				let process = this.processStack[this.processStack.length - 1];
+				this.$refs.board.edit(process, this.resolveProcess);
+				this.$refs.properties.edit();
+			},
+			onEditMeta(meta) {
+				this.metaInEditing = meta;
+				this.$refs.metaEditorDialog.edit(meta);
+			},
+			onDeleteMeta(meta) {
+				const inUse = this.$store.getters.metaInUse(meta.id);
+				if (inUse) {
+					this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
+						.catch((e) => {
+						});
+				} else {
+					this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Delete'),
+						cancelButtonText: this.$t('Cancel'),
+						type: 'warning'
+					}).then(() => {
+						this.deleteProcessMeta({meta});
+					}).catch((e) => {
+					});
+				}
+			},
+			onSaveMeta(meta) {
+				let oldMetaID = this.metaInEditing.id;
+				for (let key in meta) {
+					this.metaInEditing[key] = meta[key];
+				}
+				this.metaInEditing = null;
+				if (oldMetaID !== meta.id) {
+					this.updateProcesses({
+						targetMetaID: oldMetaID,
+						replaceMetaID: meta.id,
+					});
+				}
+				this.$refs.board.updateProcessNode(meta.id);
+			},
+			...mapMutations([
+				'updateProcesses',
+				'deleteProcessMeta',
+				'updatePropsEditable',
+				'clearProcessStack',
+				'pushProcessStack',
+				'popProcessStack',
+				'setScale',
+			]),
+			...mapGetters([
+				'metaInUse',
+			]),
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

.history/src/views/Editor/behavior-editor/BehaviorEditor_20191203134219.vue

+<template>
+	<div class="behavior">
+		<split-panes>
+			<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
+				<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
+				              class="background full-size" splitpanes-min="20"
+				              :splitpanes-size="30"/>
+				<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
+				              class="background full-size" splitpanes-min="20"
+				              :splitpanes-size="70"/>
+			</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">
+				<properties-editor ref="properties"/>
+			</div>
+		</split-panes>
+		<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
+	</div>
+</template>
+
+<script>
+	import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
+	import Board from "./Board";
+	import SplitPanes from 'splitpanes'
+	import ProcessList from "./ProcessList";
+	import PropertiesEditor from "./PropertiesEditor";
+	import EditPath from "./Board/EditPath";
+	import Process from "./Board/Process";
+	import MetaEditorDialog from "./MetaEditorDialog";
+
+	export default {
+		name: "BehaviorEditor",
+		components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
+		props: [],
+		data() {
+			return {
+				metaInEditing: null,
+			}
+		},
+		computed: {
+			processContext() {
+				const {builtinsProcessMap, customProcessMap} = this.$store.getters;
+				return [
+					builtinsProcessMap,
+					customProcessMap,
+				]
+			},
+			normalProcessTree() {
+				const tree = this.builtinProcessTree;
+				const group = tree.find(item => item.name === 'custom');
+				group.children = this.$store.state.behavior.data.processes;
+				return tree;
+			},
+			...mapState({
+				behavior: state => state.behavior.currentBehavior,
+				processStack: state=>state.behavior.processStack,
+			}),
+			...mapGetters([
+				'prefabProcessTree',
+				'builtinProcessTree'
+			]),
+		},
+		methods: {
+			resolveProcess(id) {
+				for (let context of this.processContext) {
+					if (context[id]) {
+						return context[id];
+					}
+				}
+			},
+			edit() {
+				this.clearProcessStack();
+				let process = new Process(null, this.behavior, this.resolveProcess);
+				this.editProcess(process);
+			},
+			onSelectProcessNode(process) {
+				this.$refs.properties.edit(process);
+			},
+			editProcess(process) {
+				this.pushProcessStack(process);
+				this.$refs.board.edit(process, this.resolveProcess);
+				this.$refs.properties.edit();
+			},
+			onPop(index) {
+				this.popProcessStack(index + 1);
+				let process = this.processStack[this.processStack.length - 1];
+				this.$refs.board.edit(process, this.resolveProcess);
+				this.$refs.properties.edit();
+			},
+			onEditMeta(meta) {
+				this.metaInEditing = meta;
+				this.$refs.metaEditorDialog.edit(meta);
+			},
+			onDeleteMeta(meta) {
+				const inUse = this.$store.getters.metaInUse(meta.id);
+				if (inUse) {
+					this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
+						.catch((e) => {
+						});
+				} else {
+					this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Delete'),
+						cancelButtonText: this.$t('Cancel'),
+						type: 'warning'
+					}).then(() => {
+						this.deleteProcessMeta({meta});
+					}).catch((e) => {
+					});
+				}
+			},
+			onSaveMeta(meta) {
+				let oldMetaID = this.metaInEditing.id;
+				for (let key in meta) {
+					this.metaInEditing[key] = meta[key];
+				}
+				this.metaInEditing = null;
+				if (oldMetaID !== meta.id) {
+					this.updateProcesses({
+						targetMetaID: oldMetaID,
+						replaceMetaID: meta.id,
+					});
+				}
+				this.$refs.board.updateProcessNode(meta.id);
+			},
+			...mapMutations([
+				'updateProcesses',
+				'deleteProcessMeta',
+				'updatePropsEditable',
+				'clearProcessStack',
+				'pushProcessStack',
+				'popProcessStack',
+				'setScale',
+			]),
+			...mapGetters([
+				'metaInUse',
+			]),
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file