--

package.json

@@ -17,6 +17,7 @@
 		"element-ui": "^2.13.1",
 		"indexdbwrapper": "^1.0.4",
 		"jszip": "^3.2.2",
+		"markdown-it": "^10.0.0",
 		"moment": "^2.24.0",
 		"monaco-editor": "^0.20.0",
 		"monaco-editor-webpack-plugin": "^1.9.0",

src/api/project.js

@@ -147,3 +147,17 @@ export async function updateOperators(id, operators) {
 		errMessage: 'Failed to update operator',
 	})
 }
+
+/**
+ * 修改备注
+ * @param id
+ * @param remark
+ * @return {Promise<*|any|>}
+ */
+export async function updateRemark(id, remark) {
+	return await fetchApi('/api/project/updateRemark', {
+		params: { id, remark },
+		method: 'post',
+		errMessage: 'Failed to update remark',
+	})
+}

src/components/PropsEditor.vue

@@ -113,7 +113,7 @@
 		},
 		watch: {
 			data(v){
-
+				console.log("data变更",v)
 			}
 		},
 		methods: {

src/components/inputs/CmdInputWrapper.vue

 <template>
 	<el-form-item class="input-wrapper" :label="propertyName" content-float="right"
-	              :content-width="contentWidth" :labelOffsetTop="labelOffsetTop">
+	              :content-width="contentWidth" :labelOffsetTop="labelOffsetTop"
+				  v-if="(propertyName!='_width'&&propertyName!='_height')" >
+				  
 		<el-tooltip placement="left" class="label" slot="label" trigger="hover" :open-delay="500" :enterable="false">
 			<div slot="content" class="property-name-popover">
 				<p>{{$t('Alias')}}：{{property.alias}}</p>
@@ -27,7 +29,7 @@
 <script>
 	import ElFormItem from "./form-item";
 	import {cmdOldPrefix, cmdPrefix} from "../../utils";
-
+	//v-if="(propertyName!='_width'&&propertyName!='_height')" >
 	export default {
 		name: "CmdInputWrapper",
 		components: {ElFormItem},

src/components/inputs/NumberInput.vue

-<template>
-	<el-input-number :disabled="!editable" :value="editValue" @change="onInput" controls-position="right"
+<template >
+	<el-input-number :disabled="!editable" :value="editValue" 
+	@change="onInput" controls-position="right"
 	                 :placeholder="defaultValue"></el-input-number>
 </template>
 
@@ -12,16 +13,41 @@
 		name: "NumberInput",
 		components: {LinkableInputWrapper, CmdInputWrapper},
 		props: ['value', 'container', 'property', 'propertyName', 'editable'],
-		computed: {
-			editValue() {
-				return this.value === undefined ? this.property.default : this.value;
-			},
-			defaultValue(){
-				return getInputDefaultValue(this.property);
+		data(){
+			return {
+				defaultValue:this.hasPrefixedPropertyName ? this.value+"" : getInputDefaultValue(this.property),
+				editValue:null
+			}
+		},
+		
+		mounted(){
+			this.updateValue()
+		},
+		watch: {
+			value:function(v) {
+				this.updateValue()
 			},
 		},
 		methods: {
+			updateValue() {
+				if(this.container.hasOwnProperty('_' + this.propertyName)){
+					if(this.container['_' + this.propertyName]){
+						this.editValue = this.container['_' + this.propertyName];
+					}else{
+						this.editValue = undefined;
+					}
+				}else if(this.propertyName.indexOf("_")!=-1){
+					if(this.container[this.propertyName]){
+						this.editValue = this.container[this.propertyName]
+					}else{
+						this.editValue = undefined;
+					}
+				}else{
+					this.editValue = this.value === undefined ? this.property.default : this.value;
+				}
+			},
 			onInput(v) {
+				console.log("v set",v)
 				if(v !== this.value){
 					this.$emit('input', v, this.container, this.propertyName, this.value);
 				}

src/locales/zh-CN.json

@@ -74,6 +74,7 @@
 	"No projects": "无项目",
 	"Create": "创建",
 	"Project details": "项目详情",
+	"Project remark": "项目备注",
 	"Project does not exist": "项目不存在",
 	"Project name": "项目名",
 	"Data mapping": "数据映射",
@@ -165,10 +166,12 @@
 	"Are you sure to discard the local modification": "确定丢弃本地修改吗？",
 	"Input view name": "输入视图名",
 	"Invalid view name": "无效的视图名",
-	"Unsaved version found locally": "本地发现了未保存保本，请选择版本打开",
+	"Unsaved version found locally, can not open from history": "本地发现了未保存版本，不能从历史打开",
+	"Unsaved version found locally, choose one": "本地发现了未保存版本，请选择版本打开",
 	"Local Version": "本地版本",
 	"Remote Version": "远程版本",
 	"Confirm to exit the editor": "确定退出编辑器吗?",
+	"Modified, save before exit": "内容已修改，要保存后关闭吗?",
 	"Confirm to publish": "确定发布吗?",
 	"Are you sure to delete this behavior?": "确定删除这个的行为吗",
 	"Are you sure to delete this process?": "确定删除这个的过程吗",
@@ -251,6 +254,9 @@
 	"Next Conflict": "下一个冲突",
 	"To Verify": "去验证",
 	"Transform options": "转换参数",
+	"Save behavior successfully": "保存行为成功",
+	"The main editor is closed and cannot be saved": "主编辑器已关闭，无法保存",
+	"A behavior is being edited. Please save it first": "有行为正在编辑，请先保存",
 	"eventGroup": {
 		"in": "接收",
 		"out": "派发"
@@ -359,6 +365,10 @@
 		"webgl": "WEBGL",
 		"canvas": "CANVAS"
 	},
+	"behaviorEditors": {
+		"builtin": "内建",
+		"standalone": "独立"
+	},
 	"pxEnvs": {
 		"dev": "开发环境",
 		"test": "测试环境",

src/router.js

@@ -24,9 +24,9 @@ export default new Router({
 			component: () => import('./views/Preview.vue')
 		},
 		{
-			path: '/diff',
-			name: 'diff',
-			component: () => import('./views/ProjectDiff.vue')
+			path: '/process-editor',
+			name: 'process-editor',
+			component: () => import('./views/ProcessEditor.vue')
 		},
 	]
 })

src/store/modules/behavior.js

@@ -7,8 +7,7 @@
 import Vue from "vue";
 import i18n from "../../i18n";
 import generateUUID from "uuid/v4";
-import {clonePureObj, getViewNodePath, findMetaDepById, searchViewNode, updateProcesses} from "../../utils";
-import {arrayFind} from "element-ui/src/utils/util";
+import {clonePureObj, findMetaDepById, searchViewNode, updateProcesses} from "../../utils";
 
 export const behaviorStore = {
 	state: {
@@ -35,13 +34,16 @@ export const behaviorStore = {
 		makeBehaviorDirty(state) {
 			state.dirty = true;
 		},
-		behavior_startEdit(state, {originData, behavior}) {
+		clearBehavior(state) {
 			state.dirty = false;
+		},
+		behavior_startEdit(state, {originData, behavior}) {
 			state.projectData = originData;
 			state.originProcesses = originData.processes;
 			state.processes = clonePureObj(originData.processes);
 			state.currentBehavior = clonePureObj(behavior);
 
+			this.commit('clearBehavior');
 			this.commit('updateCustomProcesses', state.processes);
 		},
 		behavior_save(state) {
@@ -117,7 +119,9 @@ export const behaviorStore = {
 
 				newMeta.id = newUUID;
 				newMeta.isInline = true;
-				Vue.set(parentMeta, 'metas', []);
+				if(!parentMeta.metas){
+					Vue.set(parentMeta, 'metas', []);
+				}
 				parentMeta.metas.push(newMeta);
 				process.metaID = newUUID;
 			}
@@ -162,13 +166,12 @@ export const behaviorStore = {
 			if (uuid) {
 				return searchViewNode(state.projectData.views, uuid);
 			}
-		}
+		},
+		processesInEditor(state) {
+			return state.processes;
+		},
 	},
 	actions: {
-		behavior_save({commit, state}) {
-			commit('behavior_save');
-			return state.currentBehavior;
-		},
 		addCustomProcessMeta({commit, state}, {masterProcess, isInline, processId, name}) {
 			let meta = {
 				id: generateUUID(),

src/store/modules/editor.js

@@ -17,7 +17,7 @@ export const editorStore = {
 	state: {
 		initialized: false,
 		name: 'Zeroing Editor',
-		version: '0.2.0',
+		version: '0.2.1',
 		templates: {
 			builtin: ['blank'],
 			custom: [],
@@ -30,6 +30,7 @@ export const editorStore = {
 		svgaCache: {},
 		svgaLoadingQueue: {},
 		assetSizeCache: {},
+		processEditorWin: null,
 	},
 	mutations: {
 		updateEnv(state, env) {
@@ -46,15 +47,22 @@ export const editorStore = {
 			state.codeSyncServeConfig = config;
 			localStorage.setItem(storeKey, JSON.stringify(state.codeSyncServeConfig));
 		},
+		updateProcessEditorWin(state, win) {
+			state.processEditorWin = win;
+		}
 	},
 	getters: {
 		assetSize: state => url => {
 			let size = state.assetSizeCache[url];
-			if(size){
+			if (size) {
 				return `${size.width}x${size.height}`
 			}
 			return '0x0';
-		}
+		},
+		behaviorEditable: state => () => {
+			let win = state.processEditorWin;
+			return !win || win.closed || !win.editable;
+		},
 	},
 	actions: {
 		async updateEnv({state, commit}) {

src/store/modules/package.js

@@ -4,10 +4,11 @@
 
 import db from "../../utils/db-storage";
 import {packageApi} from "../../api";
-import maxSatisfying from "semver/ranges/max-satisfying";
+import semverMaxSatisfying from "semver/ranges/max-satisfying";
+import semverRSort from "semver/functions/rsort";
 import i18n from "../../i18n";
 import events from "@/global-events.js"
-import {timeFormat, typeMapping} from "../../utils";
+import {clonePureObj, timeFormat, typeMapping} from "../../utils";
 
 const storeName = 'packages';
 
@@ -30,15 +31,39 @@ export const packageStore = {
 		customProcesses: [],
 	},
 	mutations: {
+		resetPackageStore(state, sourceState) {
+			state.packageInfos = sourceState.packageInfos;
+			state.packages = sourceState.packages;
+			let builtins = state.processTree.find(item=>item.name === 'normal').children.find(item=>item.name === 'builtin');
+			builtins.children = sourceState.processTree.find(item=>item.name === 'normal').children.find(item=>item.name === 'builtin').children;
+		},
 		updatePackageInfos(state, packageInfos) {
 			for (let i = 0, li = typeMapping.length; i < li; i++) {
 				state.packageInfos[typeMapping[i]].splice(0);
 			}
 			for (let packageInfo of packageInfos) {
-				packageInfo.versions = packageInfo.versions.split(',').reverse();
-				packageInfo.remarks = packageInfo.remarks.split(',').reverse();
-				packageInfo.update_times = packageInfo.update_times.split(',').map(time => timeFormat(time)).reverse();
-				packageInfo.update_time = timeFormat(packageInfo.update_time);
+				let {versions, remarks, update_times, update_time} = packageInfo;
+
+				versions = versions.split(',');
+				remarks = remarks.split(',');
+				update_times = update_times.split(',').map(time => timeFormat(time));
+
+				let sortedVersions = semverRSort(versions.concat());
+				let sortedRemarks = [];
+				let sortedUpdate_times = [];
+				for (let i = 0, li = sortedVersions.length; i < li; i++) {
+					const version = sortedVersions[i];
+
+					let index = versions.indexOf(version);
+					sortedRemarks[i] = remarks[index];
+					sortedUpdate_times[i] = update_times[index];
+				}
+
+				packageInfo.versions = sortedVersions;
+				packageInfo.remarks = sortedRemarks;
+				packageInfo.update_times = sortedUpdate_times;
+
+				packageInfo.update_time = timeFormat(update_time);
 				state.packageInfos[typeMapping[packageInfo.type]].push(packageInfo);
 			}
 		},
@@ -185,7 +210,7 @@ export const packageStore = {
 				for (let packageInfo of state.packageInfos[group]) {
 					const {package_id, versions} = packageInfo;
 					if (!dependencies[package_id]) {
-						dependencies[package_id] = maxSatisfying(versions, '*');
+						dependencies[package_id] = semverMaxSatisfying(versions, '*');
 					}
 				}
 			}

src/store/modules/project.js

@@ -33,6 +33,7 @@ const storeName = 'project';
 const psStoreName = 'pack-history';
 
 const defaultOptions = {
+	behaviorEditor: 'builtin',
 	pageTitle: 'no title',
 	entrySceneView: '',
 	loadingView: '',
@@ -71,6 +72,7 @@ export const projectStore = {
 		operator: '',
 		operators: '',
 		update_time: '',
+		remark: '',
 		data: {
 			options: {},
 			views: [],
@@ -96,23 +98,26 @@ export const projectStore = {
 			state.dirty = dirty;
 		},
 		makeProjectDirty() {
-
+		},
+		resetProjectData(state, data) {
+			state.data = data;
 		},
 		updateProjectUpdateTime(state, {time, dirty = true}) {
 			state.update_time = time;
 
-			if(dirty){
+			if (dirty) {
 				this.commit('makeProjectDirty');
 			}
 		},
 		updateProject(state, project) {
-			const {id, name, creator, data, operators, operator, update_time} = project;
+			const {id, name, creator, data, operators, operator, update_time, remark} = project;
 			state.id = id;
 			state.name = name;
 			state.creator = creator;
 			state.operator = operator;
 			state.operators = operators || creator; //兼容未保存的本地存储
 			state.update_time = update_time;
+			state.remark = remark;
 
 			const localData = state.data;
 			if (data) {
@@ -141,6 +146,10 @@ export const projectStore = {
 				localData.options.pxEnv = getDefaultOptions().pxEnv;
 			}
 
+			if (!localData.options.behaviorEditor) {
+				localData.options.behaviorEditor = 'builtin';
+			}
+
 			this.dispatch('fillLastVersion');
 			this.commit('updateAssetDep');
 
@@ -148,6 +157,9 @@ export const projectStore = {
 			state.mockServeEnabled = getMockServeEnabled(id);
 			updateMock(localData.mock);
 		},
+		updateRemark(state, remark) {
+			state.remark = remark;
+		},
 		updateAssetDep(state) {
 			let assets = state.data.assets;
 			let explicitDepAssets;
@@ -559,7 +571,13 @@ export const projectStore = {
 			view.depCustoms = depCustoms;
 
 			this.commit('makeProjectDirty');
-		}
+		},
+		overwriteProcesses(state, {processes}) {
+			state.data.processes.splice(0);
+			state.data.processes.push(...processes);
+
+			this.commit('makeProjectDirty');
+		},
 	},
 	getters: {
 		project(state) {
@@ -573,6 +591,12 @@ export const projectStore = {
 				data: JSON.stringify(newData),
 			};
 		},
+		projectRemark(state) {
+			return state.remark;
+		},
+		behaviorEditor(state) {
+			return state.data.options.behaviorEditor;
+		},
 		menuBadge: (state) => (key) => {
 			let result = false;
 			switch (key) {
@@ -715,6 +739,7 @@ export const projectStore = {
 				const remoteProject = await projectApi.fetchOne(projectID, false);
 				const project = JSON.parse(json.data);
 				project.operators = remoteProject.operators;
+				project.remark = remoteProject.remark;
 				commit('updateProject', project);
 				commit('setDirty', true);
 			}
@@ -829,7 +854,7 @@ export const projectStore = {
 
 			console.log("props",commit,state,props,state.activeComponent)
 			if(nodeUUidCatch==state.activeComponent.uuid){
-				events.$emit('canvasKeyVupdate', {props},"update");
+			//	events.$emit('canvasKeyVupdate', {props},"update");
 			}
 			nodeUUidCatch=state.activeComponent.uuid
 			console.log("nodeUUidCatch",nodeUUidCatch)
@@ -1006,7 +1031,11 @@ export const projectStore = {
 			localStorage.setItem('mock-enabled-' + state.id, JSON.stringify(enabled));
 			commit('setMockServeEnabled', enabled);
 			return enabled;
-		}
+		},
+		async saveRemark({state, commit}, {remark}) {
+			await projectApi.updateRemark(state.id, remark);
+			commit('updateRemark', remark);
+		},
 	},
 };
 

src/themes/light/base.scss

@@ -13,6 +13,12 @@ html, body, #app {
 	font-family: Arial, sans-serif;
 }
 
+.gap-5{
+	*:not(:first-child){
+		margin-left: 5px;
+	}
+}
+
 .modal-layer{
 	position: absolute;
 	top: 0;

src/themes/light/editor.scss

@@ -31,10 +31,6 @@
 		.right-part {
 			color: $--color-text-regular;
 			line-height: 15px;
-
-			.el-button {
-				padding: 2px;
-			}
 		}
 	}
 
@@ -542,3 +538,21 @@
 .local-change-marker-class {
 	background-color: rgba(64, 166, 255, 0.5);
 }
+
+.project-remark-dialog{
+	.wrapper{
+		height: 100%;
+
+		.editor{
+			height: 100%;
+		}
+
+		.project-scrollbar{
+			height: 100%;
+
+			.project-remark{
+				padding: 5px;
+			}
+		}
+	}
+}

src/utils/properties.js

@@ -27,6 +27,14 @@ export default {
 				alias: '高度',
 				type: 'number',
 			},
+			_width: {
+				alias: '[宽度]',
+				type: 'number',
+			},
+			_height: {
+				alias: '[高度]',
+				type: 'number',
+			},
 			left: {
 				alias: '左边距',
 				type: 'number',

src/utils/sheet-pack.js

@@ -10,6 +10,10 @@ import generateUUID from "uuid/v4";
 const packExts = ['.png']; //, '.jpg', '.jpeg', '.bmp'
 
 let canvas = document.createElement('canvas');
+let canvasFinal = document.createElement('canvas');
+
+let context = canvas.getContext('2d');
+let contextFinal = canvasFinal.getContext('2d');
 
 export async function packImages(assets, options = {}) {
 	const padding = options.padding || 1;
@@ -60,16 +64,24 @@ export async function packImages(assets, options = {}) {
 		let pack = new MaxRectsBinPack(maxSize, maxSize, false);
 		let packedRects = pack.insertRects(remainRects, mode);
 
-		//document.body.append(canvas);
 		canvas.width = canvas.height = maxSize;
-		let context = canvas.getContext('2d');
-		//context.fillStyle = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
-		//context.strokeRect(0, 0, maxSize, maxSize);
+		let maxWidth = 0, maxHeight = 0;
 		for (let rect of packedRects) {
+			if (rect.x + rect.width > maxWidth) {
+				maxWidth = rect.x + rect.width;
+			}
+			if (rect.y + rect.height > maxHeight) {
+				maxHeight = rect.y + rect.height;
+			}
 			context.drawImage(rect.image, rect.x + padding, rect.y + padding);
 		}
+
+		canvasFinal.width = maxWidth;
+		canvasFinal.height = maxHeight;
+		contextFinal.drawImage(canvas, 0, 0);
+
 		let blob = await new Promise(resolve => {
-			canvas.toBlob(function (blob) {
+			canvasFinal.toBlob(function (blob) {
 				resolve(blob);
 			}, 'image/png');
 		});

src/views/Editor.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-	import {mapState, mapActions, mapMutations} from 'vuex'
+	import {mapState, mapActions, mapMutations, mapGetters} from 'vuex'
 	import SplitPanes from 'splitpanes'
 	import ToolBar from "./Editor/ToolBar";
 	import Inspector from "./Editor/Inspector";
@@ -33,7 +33,7 @@
 	import Playground from "./Editor/Playground";
 	import Assets from "./Editor/Assets";
 	import DetailsDialog from "./Editor/dialogs/DetailsDialog";
-	import {openPreview, playWaiting} from "../utils";
+	import {clonePureObj, openPreview, playWaiting} from "../utils";
 	import i18n from "../i18n";
 	import events from "@/global-events.js"
 	import db from "../utils/db-storage";
@@ -92,8 +92,16 @@
 				operators: (state) => state.project.operators,
 				currentOperator: (state) => state.editor.operator,
 			}),
+			...mapGetters(['behaviorEditor'])
 		},
 		async mounted() {
+			if (!window.saveProcesses) {
+				window.saveProcesses = (processes) => {
+					this.$nextTick(()=>{
+						this.saveProcesses(processes);
+					});
+				}
+			}
 			document.addEventListener('keydown', this.onKeyPress);
 			events.$on('save-and-preview', () => {
 				this.clickMenu("preview");
@@ -143,7 +151,7 @@
 			async loadProject(forceRemote) {
 				const {projectID, project, dataUrl} = this.$route.params;
 				if (!forceRemote && await this.localVersionExist(projectID)) {
-					/*this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
+					/*this.$confirm(this.$t('Unsaved version found locally, choose one'), this.$t('Alert'), {
 						showClose: false,
 						closeOnClickModal: false,
 						closeOnPressEscape: false,
@@ -238,7 +246,7 @@
 			async onConflictResolved(data) {
 				const {projectID, project} = this.$route.params;
 				let cancel = await this.saveProject(true, data);
-				if(!cancel){
+				if (!cancel) {
 					this.loadRemoteVersion(projectID, project, undefined, data);
 				}
 			},
@@ -385,12 +393,55 @@
 				this.$refs.missingPackagesDialog.show(missingPackages);
 			},
 			editBehavior(path, index) {
-				this.$refs.behaviorEditorDialog.show(path, index);
+				switch (this.behaviorEditor) {
+					case 'builtin':
+						this.$refs.behaviorEditorDialog.show(path, index);
+						break;
+					case 'standalone':
+						this.onOpenStandalone(path, index);
+						break;
+				}
+			},
+			onOpenStandalone(path, index) {
+				let processEditorUrl = location.href.substr(0, location.href.indexOf('#')) + '#/process-editor';
+				let processEditorWin = this.processEditorWin = open(processEditorUrl, 'Process Editor', 'width=800, height=600');
+
+				this.updateProcessEditorWin(processEditorWin);
+
+				if (processEditorWin.editable) {
+					if (processEditorWin.editable()) {
+						this.showStandaloneEditor(path, index);
+					} else {
+						this.$message({
+							message: this.$t('A behavior is being edited. Please save it first'),
+							type: 'warning'
+						});
+					}
+				} else {
+					processEditorWin.onload = () => {
+						this.showStandaloneEditor(path, index);
+					}
+				}
+			},
+			showStandaloneEditor(path, index) {
+				let processEditorWin = this.processEditorWin;
+
+				let projectData = clonePureObj(this.$store.state.project.data);
+				let packageState = clonePureObj(this.$store.state.project.package);
+				processEditorWin.reset({projectData, packageState});
+				processEditorWin.edit(path, index);
+			},
+			saveProcesses(processes){
+				this.overwriteProcesses({processes});
+				this.$message({
+					message: this.$t('Save behavior successfully'),
+					type: 'success'
+				});
 			},
 			handleBehaviorsChange() {
 				this.makeProjectDirty();
 			},
-			...mapMutations(['makeProjectDirty']),
+			...mapMutations(['makeProjectDirty', 'overwriteProcesses', 'updateProcessEditorWin']),
 			...mapActions([
 				'loadPackages',
 				'localVersionExist',

src/views/Editor/Inspector/BehaviorTab.vue

@@ -73,7 +73,7 @@
 			}
 		},
 		computed: {
-			...mapGetters(['activeComponent', 'componentList'])
+			...mapGetters(['activeComponent', 'componentList', 'behaviorEditable'])
 		},
 		methods: {
 			getBehavior(behavior) {
@@ -89,20 +89,24 @@
 				}
 			},
 			addTrigger(command) {
-				let trigger = {behaviors: []};
-				switch (command) {
-					case 'custom-global':
-					case 'custom-private':
-						trigger.custom = true;
-						break;
-				}
+				if(this.behaviorEditable()){
+					let trigger = {behaviors: []};
+					switch (command) {
+						case 'custom-global':
+						case 'custom-private':
+							trigger.custom = true;
+							break;
+					}
 
-				if (command === 'custom-private') {
-					trigger.private = true;
-				}
+					if (command === 'custom-private') {
+						trigger.private = true;
+					}
 
-				this.addBehavior(command, trigger.behaviors);
-				this.$set(this.activeComponent.events, command, trigger);
+					this.addBehavior(command, trigger.behaviors);
+					this.$set(this.activeComponent.events, command, trigger);
+				}else{
+					this.$message('独立过程编辑器正在使用中，不可编辑')
+				}
 			},
 			toggleCollapse(trigger) {
 				this.$set(trigger, 'collapse', !trigger.collapse);
@@ -122,13 +126,17 @@
 				}
 			},
 			addBehavior(eventName, behaviors) {
-				const alias = `${this.activeComponent.name}_${eventName}` + (behaviors.length > 0 ? '_' + (behaviors.length + 1) : '');
+				if(this.behaviorEditable()){
+					const alias = `${this.activeComponent.name}_${eventName}` + (behaviors.length > 0 ? '_' + (behaviors.length + 1) : '');
 
-				this.addBehaviorDirect({
-					alias, behaviors,
-				});
+					this.addBehaviorDirect({
+						alias, behaviors,
+					});
 
-				this.makeProjectDirty();
+					this.makeProjectDirty();
+				}else{
+					this.$message('独立过程编辑器正在使用中，不可编辑')
+				}
 			},
 			editTriggerName(name) {
 				this.$prompt(this.$t('Input event name'), this.$t('Rename event'), {
@@ -167,24 +175,29 @@
 				this.makeProjectDirty();
 			},
 			async deleteBehavior(index, behaviors) {
-				let deleteMeta = false;
-				await this.$confirm(this.$t('Are you sure to delete it\'s process?'), this.$t('Alert'), {
-					confirmButtonText: this.$t('Delete'),
-					cancelButtonText: this.$t('Not delete'),
-					distinguishCancelAndClose: true,
-					type: 'warning'
-				}).then(() => {
-					deleteMeta = true;
-					this.makeProjectDirty();
-				}).catch(action => {
+				if(this.behaviorEditable()){
+					let deleteMeta = false;
+					await this.$confirm(this.$t('Are you sure to delete it\'s process?'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Delete'),
+						cancelButtonText: this.$t('Not delete'),
+						distinguishCancelAndClose: true,
+						type: 'warning'
+					}).then(() => {
+						deleteMeta = true;
+						this.makeProjectDirty();
+					}).catch(action => {
 
-				});
+					});
+
+					this.deleteBehaviorDirect({
+						behaviors,
+						index,
+						deleteMeta,
+					})
+				}else{
+					this.$message('独立过程编辑器正在使用中，不可编辑')
+				}
 
-				this.deleteBehaviorDirect({
-					behaviors,
-					index,
-					deleteMeta,
-				})
 			},
 			...mapActions([
 				'modifyActiveView',

src/views/Editor/Inspector/PropsTab.vue

@@ -29,7 +29,6 @@
 					</el-collapse-item>
 					<el-collapse-item :title="$t('Function cmd') + `(${customCmdKeys.length})`" name="cmd">
 						<el-form-item v-for="key in customCmdKeys" :label="customCmdNames[key]" :key="key" label-width="50px">
-							<el-input class="cmd-input" v-model="activeComponent.properties[key]" @change="makeProjectDirty"/>
 							<el-popconfirm :title="$t('Are you sure to delete this cmd?')" @onConfirm="deleteCmd(key)">
 								<el-button slot="reference" plain icon="el-icon-delete"/>
 							</el-popconfirm>
@@ -63,6 +62,7 @@
 	import StoreEditorDialog from "./PropsTab/StoreEditorDialog";
 	import ElFormItem from "../../../components/inputs/form-item";
 	import AssetDependenceDialog from "./PropsTab/AssetDependenceDialog";
+	import events from "@/global-events.js"
 
 	export default {
 		name: 'PropsTab',
@@ -109,6 +109,10 @@
 			}
 		},
 		methods: {
+			propsUpdate(val){
+				// console.log("propsUpdate",val)
+				 this.makeProjectDirty()
+			},
 			handleChange(label, v) {
 				let _view = {};
 				_view[label] = v;
@@ -116,10 +120,17 @@
 			},
 			onInput(value, container, propName, oldValue) {
 				console.log('propsChange', propName, value);
-
 				let _prop = {};
 				_prop[propName] = value;
 				this.$store.dispatch('modifyProperties', _prop);
+				
+				let _keyv=JSON.parse(`{"${propName}":null}`)
+				_keyv[propName]=value
+				console.log({props:_keyv})
+				//setTimeout(()=>{
+					events.$emit('canvasKeyVupdate', {props:_keyv},"end");
+				//},1000)
+
 			},
 			clickEditStoreExp() {
 				this.$refs.storeEditorDialog.edit('exp', this.activeComponent);

src/views/Editor/Playground.vue

@@ -6,24 +6,32 @@
 				<!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> -->
 				
 				
-				<el-form :inline="true" class="filter-bar" size="mini" @submit.native.prevent>
-					<el-form-item>
-						<el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button>
-						<el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/>
-						<el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button>
-					</el-form-item>
-					<el-form-item>
+				<el-form :inline="true" class="filter-bar" style="padding:10px 10px;" size="mini" @submit.native.prevent>
+					
+					<!-- <el-form-item>
 						<el-checkbox
 							v-model="overFlowState"
 							size="mini">舞台边缘裁剪
 						</el-checkbox>
-					</el-form-item>
+					</el-form-item> -->
 					<el-form-item>
 						<el-checkbox
 							v-model="autoSelectState"
 							size="mini">自动框选
 						</el-checkbox>
 					</el-form-item>
+					<el-form-item>
+						<span class="stage-set-label">舞台宽度(只读):</span>
+						<el-input class="el-input el-input--mini" v-model="designWidth" style="width:60px" readonly=""/>
+						<span class="stage-set-label">舞台高度:</span>
+						<el-input class="el-input el-input--mini" v-model="designHeight" style="width:60px"/>
+					</el-form-item>
+					<el-form-item>
+						<span class="stage-set-label">舞台缩放:</span>
+						<el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button>
+						<el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/>
+						<el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button>
+					</el-form-item>
 				</el-form>
 			</div>
 
@@ -54,7 +62,9 @@ export default {
 	   zoom:0.5,
 	   hasCtrlState:false,
 	   overFlowState:false,
-	   autoSelectState:true
+	   autoSelectState:true,
+	   designWidth:750,
+	   designHeight:1624
     }
 	},
   methods: {
@@ -68,7 +78,7 @@ export default {
 		}else if(e.deltaY<0){
 			this.setZoom(true)
 		}
-		console.log(this.zoom)
+		//console.log(this.zoom)
 	},
 	setZoom(state){
 		if(state){
@@ -89,7 +99,7 @@ export default {
 
 	},
 	keyDo(state){
-		console.log(state)
+		//console.log(state)
 		this.hasCtrlState=state;
 	},
 	overFlowCon(){}
@@ -98,14 +108,17 @@ export default {
 	playgroundStyle(){
 		//this.zoom=0.5;
 		let style={
-			zoom:`${this.zoom}`
+			zoom:`${this.zoom}`,
+			width:`${this.designWidth}px`,
+			height:`${this.designHeight}px`
 		}
 		if(this.overFlowState){
 			style.overflow="hidden"
 		}else{
 			style.overflow="initial"
 		}
-		console.log(1213,style)
+
+	//	console.log(1213,style)
 		return style
 	},
   },
@@ -114,7 +127,18 @@ export default {
 	  this.zoom=0.5;
 
 	  events.$emit('autoSelectState', this.autoSelectState)
-	  
+
+	   if(localStorage.designHeight){
+		   this.designHeight=parseInt(localStorage.designHeight)
+	   }
+
+	   if(localStorage.designWidth){
+		   this.designWidth=parseInt(localStorage.designWidth)
+	   }
+
+	  events.$emit('designWidth', this.designWidth);
+	  events.$emit('designHeight', this.designHeight);
+
 	   document.body.addEventListener('mousewheel',(e)=>{
 		   this.mouseWheel(e)
 	   },false)
@@ -136,11 +160,19 @@ export default {
   },
   mounted(){
 	events.$emit('setPlaygroundZoom', {zoom:this.zoom});
-	console.log(123)
+	//console.log(123)
   }, 
   watch: {
 	autoSelectState() {
 		events.$emit('autoSelectState', this.autoSelectState);
+	},
+	designWidth(){ 
+		localStorage.designWidth=this.designWidth
+		events.$emit('designWidth', this.designWidth);
+	},
+	designHeight(){
+		localStorage.designHeight= this.designHeight
+		events.$emit('designHeight', this.designHeight);
 	}
   },
 };
@@ -161,4 +193,10 @@ export default {
 	width: 100%;
 	height: 50px;
 }
+.stage-set-label{
+	color: #606266;
+	white-space: nowrap;
+	font-weight: 500;
+	padding-left:10px ;
+}
 </style>
\ No newline at end of file

src/views/Editor/ToolBar.vue

@@ -4,19 +4,22 @@
 		<div class="right-part">
 			<span>
 				[{{project.name}}]
-				<el-button size="mini" circle icon="el-icon-edit" @click="editProjectName"/>
+				<el-button size="mini" class="micro" circle icon="el-icon-edit" @click="editProjectName"/>
+				<el-button size="mini" class="micro" circle icon="el-icon-notebook-2" @click="editRemark"/>
 			</span>
 		</div>
+		<project-remark-dialog ref="projectRemarkDialog"/>
 	</div>
 </template>
 
 <script>
 	import {mapState, mapActions, mapMutations} from 'vuex'
 	import SampleMenu from "../../components/SampleMenu";
+	import ProjectRemarkDialog from "./dialogs/ProjectRemarkDialog";
 
 	export default {
 		name: "ToolBar",
-		components: {SampleMenu},
+		components: {ProjectRemarkDialog, SampleMenu},
 		data() {
 			return {}
 		},
@@ -40,7 +43,7 @@
 				return menu;
 			}
 		},
-		
+
 		async mounted() {
 			//监听键盘事件
 			//document.addEventListener('keydown', this.onKeyPress);
@@ -63,20 +66,23 @@
 				}).catch(() => {
 				});
 			},
+			editRemark() {
+				this.$refs.projectRemarkDialog.show();
+			},
 			onKeyPress(e) {
-			    if (e.key === 'z' && (e.ctrlKey || e.metaKey) && (!e.shiftKey)) {
+				if (e.key === 'z' && (e.ctrlKey || e.metaKey) && (!e.shiftKey)) {
 					//快捷键ctrl+z执行撤销
 					e.preventDefault();
 					//是否可执行撤销
-					if(!(!this.project.operateStack.length || this.project.operateStack.length === this.project.stackIndex + 1)){
+					if (!(!this.project.operateStack.length || this.project.operateStack.length === this.project.stackIndex + 1)) {
 						this.clickMenu("undo");
 					}
 					return false;
-				}else if (e.key === 'z' && (e.ctrlKey || e.metaKey) && (e.shiftKey)) {
+				} else if (e.key === 'z' && (e.ctrlKey || e.metaKey) && (e.shiftKey)) {
 					//快捷键ctrl+shift+z执行重做
 					e.preventDefault();
 					//是否可以执行重做
-					if(!(this.project.stackIndex === 0)){
+					if (!(this.project.stackIndex === 0)) {
 						this.clickMenu("redo");
 					}
 					return false;

src/views/Editor/Views.vue

@@ -125,7 +125,9 @@
 				this.expandedKeys = [node.uuid];
 			},
 			locateViewNodeActive(node) {
+				
 				if(this.$refs.tree){
+					console.log("选中")
 					this.$refs.tree.setCurrentKey(node.uuid);
 					this.expandedKeys = [node.uuid];
 					let data=this.$refs.tree.getCurrentNode()
@@ -137,10 +139,12 @@
 						y:parseInt(node.y),
 						anchorX:parseInt(node.anchorX),
 						anchorY:parseInt(node.anchorY),
-						imageWidth:parseInt(node.imageWidth),
-						imageHeight:parseInt(node.imageHeight),
-						width:parseInt(node.width),
-						height:parseInt(node.height),
+						// imageWidth:parseInt(node.imageWidth),
+						// imageHeight:parseInt(node.imageHeight),
+						width:parseInt(node._width),
+						_width:parseInt(node._width),
+						_height:parseInt(node._height),
+						height:parseInt(node._height),
 					}
 					 this.$store.dispatch("modifyProperties", styleCatch);
 				}

src/views/Editor/components/RuntimeLayer.vue

@@ -73,6 +73,9 @@
 				});
 			},
 			showView(viewConfig) {
+				if(!engine.editorStage){
+					return false;
+				}
 				engine.editorStage.showView(viewConfig);
 			},
 			getNode(nodePath, origin = false) {

src/views/Editor/components/drawCanvasPanel.vue

@@ -48,6 +48,7 @@
             right: {},
             bottom: {},
             horizonCenter: {},
+            mouseChildren: {},
             verticalCenter: {},
             source: {type: 'string'},
           },
@@ -69,17 +70,18 @@
         this.nodePath = nodePath;
       },
       assetResolver(uuid) {
-        console.log(uuid)
         let asset = this.project.data.assets.find(a => a.uuid === uuid);
         let url = asset ? asset.url : '';
-        console.log(url)
         return url
       },
       getNode(type) {
         if(type=="end"){
           this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
           console.log("this.targetNode",this.targetNode)
+         setTimeout(()=>{
+          this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
           events.$emit('locate-view-node-active', this.targetNode);
+          },0)
         }else if(type=="update"){
             this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
         }
@@ -89,6 +91,9 @@
             if(key=="source"||key=="autoPlay"){
                events.$emit("viewReset")
             }
+            if(key=="width"||key=="height"){
+              console.error("修改长宽")
+            }
             if(this.$refs.runtimeLayer){
               this.$refs.runtimeLayer.modifyProps(this.nodePath, {
                 [key]: value,
@@ -102,8 +107,7 @@
         if(!this.autoSelectState){
           return false;
         }
-          console.log("sdsd",{x:x/this.zoom, y:y/this.zoom})
-          console.log("sdsd",x,y)
+  
         //  setTimeout(()=>{
             if(this.$refs.runtimeLayer){
               this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom});
@@ -112,18 +116,14 @@
         console.log(this.nodePath)
       },
       canvasKeyVupdate(data,type){
-          console.log(10,data)
           let _data=data;
           for(let item in _data.props){
-            console.log(item)
             if(_data.props.hasOwnProperty(item)){
-                  console.log(_data.props[item])
                 this.onModifyProp(item, _data.props[item],type)
             }
           }
       },
       canvasViewUpdate(){
-        console.log("视图更新")
           this.$refs.runtimeLayer.showView(this.views[0]);
       }
       ,canvasActiveNodeByTree(nodePath){
@@ -154,16 +154,28 @@
         this.autoSelectState=data
       });
 
+      events.$on('designHeight', (data)=>{
+         this.options.designHeight=data
+      });
+
+       //是否自动点选
+      events.$on('designWidth', (data)=>{
+         this.options.designWidth=data
+      });
 
-      events.$on("viewReset",()=>{this.$refs.runtimeLayer.showView(this.views[0]);})
+
+
+      events.$on("viewReset",()=>{
+        this.$refs.runtimeLayer.showView(this.views[0]);
+        })
     },
     watch: {
         nodePath() {
           this.getNode("end");
         },
         views() {
-         this.$refs.runtimeLayer.showView(this.views[0]);
-        }
+            events.$emit("viewReset")        
+            }
       },
   };
 </script>

src/views/Editor/components/editControlView.vue

@@ -240,7 +240,7 @@ export default {
          events.$emit('canvasKeyVupdate', {props:{
             offset_width:this.changeMoveOffsetX * this.zoom,
             offset_height:-this.changeMoveOffsetY * this.zoom,
-             offset_y:this.changeMoveOffsetY * this.zoom,
+            offset_y:this.changeMoveOffsetY * this.zoom,
         }},"auto");
       } else if (this.editEvent == "topleft") {
         events.$emit('canvasKeyVupdate', {props:{
@@ -253,7 +253,7 @@ export default {
          events.$emit('canvasKeyVupdate', {props:{
             offset_width:-this.changeMoveOffsetX * this.zoom,
             offset_height:+this.changeMoveOffsetY * this.zoom,
-             offset_x:this.changeMoveOffsetX * this.zoom,
+            offset_x:this.changeMoveOffsetX * this.zoom,
          }},"auto");
       } else if (this.editEvent == "center") {
           events.$emit('canvasKeyVupdate', {props:{
@@ -269,8 +269,8 @@ export default {
     },
     modifyPropertiesCon() {
       events.$emit('canvasKeyVupdate', {props:{
-            offset_width:0,
-            offset_height:0,
+            // offset_width:0,
+            // offset_height:0,
             offset_y:0,
             offset_x:0,
       }},"end");
@@ -303,25 +303,31 @@ export default {
      
 
     //this.styleCatch=JSON.parse(JSON.stringify(this.targetNode));
+    if(this.targetNode){
+        this.styleCatch={ 
+            x:this.targetNode.x,
+            y:this.targetNode.y,
+            anchorX:this.targetNode.anchorX,
+            anchorY:this.targetNode.anchorY,
+            imageWidth:this.targetNode.imageWidth,
+            imageHeight:this.targetNode.imageHeight,
+            worldMatrix:this.targetNode.worldMatrix,
+            width:this.targetNode.width,
+            height:this.targetNode.height,
+            left:this.targetNode.left,
+            top:this.targetNode.top,
+            right:this.targetNode.right,
+            bottom:this.targetNode.bottom,
+            bottom:this.targetNode.bottom,
+            horizonCenter:this.targetNode.horizonCenter,
+            mouseChildren:this.targetNode.mouseChildren,
+            verticalCenter:this.targetNode.verticalCenter,
+            source:this.targetNode.source,
+            _width:this.targetNode._width,
+            _height:this.targetNode._height,
+        }
+    }
     
-     this.styleCatch={ 
-          x:this.targetNode.x,
-          y:this.targetNode.y,
-          anchorX:this.targetNode.anchorX,
-          anchorY:this.targetNode.anchorY,
-          imageWidth:this.targetNode.imageWidth,
-          imageHeight:this.targetNode.imageHeight,
-          worldMatrix:this.targetNode.worldMatrix,
-          width:this.targetNode.width,
-          height:this.targetNode.height,
-          left:this.targetNode.left,
-          top:this.targetNode.top,
-          right:this.targetNode.right,
-          bottom:this.targetNode.bottom,
-          horizonCenter:this.targetNode.horizonCenter,
-          verticalCenter:this.targetNode.verticalCenter,
-          source:this.targetNode.source,
-      }
   },
   computed: {
     position() {
@@ -393,7 +399,7 @@ export default {
 	      deep: true
     },
     targetNode:function(){
-      console.log("targetNode变化")
+      console.log("targetNode变化",this.targetNode)
        let { 
         x,
         y,
@@ -410,9 +416,14 @@ export default {
         bottom,
         horizonCenter,
         verticalCenter,
+        mouseChildren,
         source,
+        _width,
+        _height,
       }=this.targetNode
 
+        // width=_width;
+        // height=_height;
 
             //  let x=this.targetNode.worldMatrix.tx;
             //  let y=this.targetNode.worldMatrix.ty;
@@ -432,8 +443,11 @@ export default {
                 worldMatrix,
                 bottom,
                 horizonCenter,
+                mouseChildren,
                 verticalCenter,
                 source,
+                _width,
+                _height,
             }
       // this.styleCatch=JSON.parse(JSON.stringify(this.targetNode));
     }

src/views/Editor/dialogs/BehaviorEditorDialog.vue

@@ -4,7 +4,9 @@
 	           :append-to-body="true" custom-class="flex-dialog behavior-editor-dialog">
 		<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
 		<div slot="footer" class="dialog-footer">
-			<div></div>
+			<div>
+
+			</div>
 			<div>
 				<!--<el-button size="mini" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
 				<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save And Close')}}</el-button>-->
@@ -20,6 +22,7 @@
 	import {mapState, mapMutations, mapActions} from 'vuex'
 	import BehaviorEditor from "../behavior-editor/BehaviorEditor";
 	import events from "@/global-events.js"
+	import {clonePureObj} from "../../../utils";
 
 	export default {
 		name: "BehaviorEditorDialog",
@@ -49,7 +52,7 @@
 				this.visible = true;
 			},
 			async onSave() {
-				const behavior = await this.behavior_save();
+				this.behavior_save();
 				/*for (let i = 0, li = this.behaviors.length; i < li; i++) {
 					const b = this.behaviors[i];
 					if (b.uuid === behavior.uuid) {
@@ -95,8 +98,6 @@
 			},
 			...mapMutations([
 				'behavior_cancel',
-			]),
-			...mapActions([
 				'behavior_save',
 			])
 		}

src/views/Editor/dialogs/ProjectRemarkDialog.vue

+<template>
+	<el-dialog :title="$t('Project remark')" width="70%" :visible.sync="visible" @opened="onOpen"
+	           :append-to-body="true"
+	           :show-close="false"
+	           fullscreen
+	           custom-class="flex-dialog project-remark-dialog"
+	>
+		<div class="wrapper">
+			<monaco-editor
+				class="editor"
+				v-model="content"
+				language="markdown"
+				:options="monacoEditorOptions"
+				v-if="editMode"
+			/>
+			<el-scrollbar v-else class="project-scrollbar" wrap-class="wrap-x-hidden" view-class="project-remark">
+				<div v-html="html"></div>
+			</el-scrollbar>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<div>
+				<el-button v-if="!editMode" size="mini" @click="onEdit" type="primary">{{$t('Edit')}}</el-button>
+				<el-button v-if="editMode" size="mini" @click="onApply" type="success">{{$t('Apply')}}</el-button>
+			</div>
+			<div class="gap-5">
+				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+				<el-badge is-dot :hidden="!showBadge">
+					<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+				</el-badge>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import {mapActions, mapGetters} from 'vuex';
+	import MarkdownIt from 'markdown-it';
+	import MonacoEditor from "vue-monaco";
+	import {monacoEditorOptions, playWaiting} from "../../../utils";
+
+	let md = new MarkdownIt();
+
+	export default {
+		name: "ProjectRemarkDialog",
+		components: {MonacoEditor},
+		data() {
+			return {
+				visible: false,
+				editMode: false,
+				content: '',
+				monacoEditorOptions,
+			}
+		},
+		computed: {
+			showBadge(){
+				return this.projectRemark !== this.content;
+			},
+			html(){
+				return this.content ? md.render(this.content) : '';
+			},
+			...mapGetters(['projectRemark'])
+		},
+		methods: {
+			show() {
+				this.editMode = false;
+				this.content = this.projectRemark || '';
+				this.visible = true;
+			},
+			async onSave() {
+				await playWaiting(this.saveRemark({remark: this.content}), this.$t('Saving'));
+				this.visible = false;
+			},
+			async onClose() {
+				if(this.showBadge){
+					await this.$confirm(this.$t('Modified, save before exit'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Save'),
+						cancelButtonText: this.$t('Still Close'),
+						distinguishCancelAndClose: true,
+						type: 'warning'
+					}).then(() => {
+						return this.onSave();
+					}).catch((action) => {
+						if(action === 'cancel'){
+							this.visible = false;
+						}
+					});
+				}else{
+					this.visible = false;
+				}
+			},
+			onOpen() {
+
+			},
+			onEdit() {
+				this.editMode = true;
+			},
+			onApply() {
+				this.editMode = false;
+			},
+			...mapActions([
+				'saveRemark',
+			]),
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/dialogs/editors/ProjectEditor.vue

@@ -2,6 +2,15 @@
 	<el-scrollbar v-if="editData" class="project-scrollbar" wrap-class="wrap-x-hidden" view-class="project-editor">
 		<el-form @submit.native.prevent ref="form" :model="editData" size="mini" label-position="right"
 		         label-width="150px">
+			<el-form-item prop="behaviorEditor" :label="$t('Behavior Editor')">
+				<el-select v-model="editData.behaviorEditor">
+					<el-option v-for="(label, key) in behaviorEditors"
+					           :key="key"
+					           :value="key"
+					           :label="label"
+					></el-option>
+				</el-select>
+			</el-form-item>
 			<el-form-item prop="pageTitle" :label="$t('Page title')">
 				<el-input v-model="editData.pageTitle"/>
 			</el-form-item>
@@ -83,12 +92,14 @@
 		data() {
 			const scaleMode = this.$t('scaleMode');
 			const rendererType = this.$t('rendererType');
+			const behaviorEditors = this.$t('behaviorEditors');
 			return {
 				visible: false,
 				editData: null,
 				scaleMode,
 				rendererType,
 				monacoEditorOptions,
+				behaviorEditors,
 			}
 		},
 		computed: {

src/views/Home.vue

@@ -86,6 +86,7 @@
 	import {PROJECT_PAGE_SIZE} from "../config";
 	import ProjectHistoryDialog from "./Home/ProjectHistoryDialog";
 	import ElFormItem from "../components/inputs/form-item";
+	import db from "../utils/db-storage";
 
 	export default {
 		name: "Home",
@@ -118,6 +119,7 @@
 		methods: {
 			prepare() {
 				return Promise.all([
+					db.open('store'),
 					this.updateEnv(),
 					this.handleCurrentChange(1),
 				])
@@ -188,8 +190,15 @@
 			onDuplicateProject(projectID) {
 				this.editProject(projectID);
 			},
-			onSelectProject(project, dataUrl) {
-				this.$router.push({name: 'editor', params: {projectID: project.id, project, dataUrl}});
+			async onSelectProject(project, dataUrl) {
+				if(await this.localVersionExist(project.id)){
+					this.$message({
+						message: this.$t('Unsaved version found locally, can not open from history'),
+						type: 'warning'
+					});
+				}else{
+					this.$router.push({name: 'editor', params: {projectID: project.id, project, dataUrl}});
+				}
 			},
 			editProject(projectID) {
 				this.$router.push({name: 'editor', params: {projectID}});
@@ -214,6 +223,7 @@
 				'createProject',
 				'deleteProject',
 				'updateEnv',
+				'localVersionExist',
 			]),
 		},
 	}

src/views/ProcessEditor.vue

+<template>
+	<div class="process-editor-dialog">
+		<div class="editor-wrapper">
+			<behavior-editor v-if="editorReady" ref="behaviorEditor" class="behavior-editor"></behavior-editor>
+		</div>
+		<div class="bottom-bar">
+			<div>
+
+			</div>
+			<div class="gap-5">
+				<el-button size="mini" type="danger" @click="onClose()">{{$t('Close')}}</el-button>
+				<el-badge :hidden="!showBadge" is-dot>
+					<el-button size="mini" type="primary" @click="onSave()">{{$t('Save')}}</el-button>
+				</el-badge>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {mapMutations, mapState, mapGetters} from 'vuex'
+	import BehaviorEditor from "./Editor/behavior-editor/BehaviorEditor";
+	import {clonePureObj} from "../utils";
+
+	export default {
+		name: "ProcessEditor",
+		components: {BehaviorEditor},
+		data() {
+			return {
+				editorReady: false,
+			}
+		},
+		mounted() {
+			window.reset = ({projectData, packageState}) => {
+				console.log('reset');
+				this.resetProjectData(projectData);
+				this.resetPackageStore(packageState);
+			};
+			window.editable = () => {
+				return !this.showBadge;
+			};
+			window.edit = (path, index) => {
+				this.edit(path, index);
+			};
+			window.onbeforeunload = (e) => {
+				return this.showBadge ? true : null;
+			};
+			this.updateProcessTree();
+		},
+		computed: {
+			...mapState({
+				showBadge: state => state.behavior.dirty,
+			}),
+			...mapGetters(['processesInEditor'])
+		},
+		methods: {
+			edit(path, index) {
+				this.path = path;
+				this.index = index;
+				this.editorReady = true;
+
+				this.$nextTick(this.startEdit);
+			},
+			startEdit() {
+				this.$refs.behaviorEditor.edit(this.path, this.index);
+			},
+			async onSave() {
+				let opener;
+				try {
+					if (window.opener && window.opener.saveProcesses) {
+						opener = window.opener;
+					}
+				} catch (e) {
+				}
+				if (opener) {
+					let processes = clonePureObj(this.processesInEditor);
+					window.opener.saveProcesses(processes);
+					this.clearBehavior();
+					/*this.$message({
+						message: this.$t('Save behavior successfully'),
+						type: 'success'
+					});*/
+				} else {
+					this.$alert(this.$t('The main editor is closed and cannot be saved'));
+				}
+			},
+			onClose() {
+				if (this.showBadge) {
+					this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
+						closeOnClickModal: false,
+						closeOnPressEscape: false,
+						confirmButtonText: this.$t('Save And Close'),
+						cancelButtonText: this.$t('Still Close'),
+						distinguishCancelAndClose: true,
+						type: 'warning'
+					}).then(() => {
+						this.onSave();
+						this.close();
+					}).catch((action) => {
+						switch (action) {
+							case 'close':
+								break;
+							case 'cancel':
+								this.close();
+								break;
+						}
+					});
+				} else {
+					this.close();
+				}
+			},
+			close() {
+				window.close();
+			},
+			...mapMutations(['clearBehavior',
+				'resetProjectData', 'resetPackageStore', 'behavior_save', 'updateProcessTree'])
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/ProjectDiff.vue

-<template>
-	<monaco-editor
-		class="script-editor"
-		ref="editor"
-		v-model="code"
-		language="json"
-		:options="monacoEditorOptions"
-		diff-editor
-		:original="originalCode"
-	/>
-</template>
-
-<script>
-	import MonacoEditor from "vue-monaco";
-	import {monacoEditorOptions} from "../utils";
-	//import old from './old.json'
-	//let originalCode = JSON.stringify(old, null, '\t');
-
-	let originalCode = `hello`;
-	console.log(originalCode);
-
-	export default {
-		name: "ProjectDiff",
-		components: {MonacoEditor},
-		data() {
-			return {
-				monacoEditorOptions,
-				code: '',
-				originalCode,
-			}
-		},
-		mounted() {
-			let editor = this.$refs.editor.getEditor();
-			editor.onDidUpdateDiff(()=>{
-				let m = editor.getLineChanges();
-				console.log(m);
-			})
-		}
-	}
-</script>
-
-<style scoped>
-.script-editor{
-	width: 100%;
-}
-</style>
\ No newline at end of file

vue.config.js

@@ -30,7 +30,7 @@ module.exports = {
   configureWebpack: {
     plugins: [
       new MonacoWebpackPlugin({
-        languages: ['javascript', 'typescript', 'json', 'html'],
+        languages: ['javascript', 'typescript', 'json', 'html', 'markdown'],
         publicPath: process.env.NODE_ENV === 'production' ? "/monaco" : "",
       })
     ]

yarn.lock

@@ -3127,7 +3127,7 @@ electron-to-chromium@^1.3.322:
 
 element-ui@^2.13.1:
   version "2.13.1"
-  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.13.1.tgz#0cb1a45cf27aa61c601defbe192740ac5cb9df7c"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz?cache=0&sync_timestamp=1586760879922&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.13.1.tgz#0cb1a45cf27aa61c601defbe192740ac5cb9df7c"
   integrity sha1-DLGkXPJ6phxgHe++GSdArFy533w=
   dependencies:
     async-validator "~1.8.1"
@@ -3229,6 +3229,11 @@ entities@^2.0.0:
   resolved "https://registry.npm.taobao.org/entities/download/entities-2.0.0.tgz?cache=0&sync_timestamp=1563403318326&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fentities%2Fdownload%2Fentities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
   integrity sha1-aNYITKsbB5dnVA2A5Wo5tCPkq/Q=
 
+entities@~2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/entities/download/entities-2.0.2.tgz?cache=0&sync_timestamp=1589062013210&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fentities%2Fdownload%2Fentities-2.0.2.tgz#ac74db0bba8d33808bbf36809c3a5c3683531436"
+  integrity sha1-rHTbC7qNM4CLvzaAnDpcNoNTFDY=
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.npm.taobao.org/errno/download/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -5048,6 +5053,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-it@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npm.taobao.org/linkify-it/download/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha1-47VGl+eL+RXHCjis14/QngBYsc8=
+  dependencies:
+    uc.micro "^1.0.1"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -5232,6 +5244,17 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.npm.taobao.org/markdown-it/download/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
+  integrity sha1-q/xk8UGxci1mNAIETkOSfx9QqNw=
+  dependencies:
+    argparse "^1.0.7"
+    entities "~2.0.0"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -5246,6 +5269,11 @@ mdn-data@2.0.4:
   resolved "https://registry.npm.taobao.org/mdn-data/download/mdn-data-2.0.4.tgz?cache=0&sync_timestamp=1573816265745&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmdn-data%2Fdownload%2Fmdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs=
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -8369,6 +8397,11 @@ typedarray@^0.0.6:
   resolved "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw=
+
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz?cache=0&sync_timestamp=1577407920190&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuglify-js%2Fdownload%2Fuglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"