Merge branch 'dev' into feature/20190923-feature

jsx/自动整理.jsx

@@ -54,9 +54,12 @@ function execute(document) {
 			var newName = layer.name.replace(mergeFlagReg, '');
 			layer.name = newName;
 
-			mergeLayers.push(newName);
+			try {
+				layer.merge();
+				mergeLayers.push(newName);
+			}catch (e) {
 
-			layer.merge();
+			}
 			return 1;
 		} else if (layer.name.match(excludeFlagReg)) {
 			layer.remove();

src/locales/en.json

@@ -6,6 +6,7 @@
 	"Still Close": "Still Close",
 	"Save": "Save",
 	"Save And Preview": "Save And Preview",
+	"Save And Close": "Save And Close",
 	"Reset": "Reset",
 	"Copy": "Copy",
 	"Exit": "Exit",

src/locales/zh-CN.json

@@ -6,6 +6,7 @@
 	"Still Close": "仍然关闭",
 	"Save": "保存",
 	"Save And Preview": "保存并预览",
+	"Save And Close": "保存并关闭",
 	"Reset": "重置",
 	"Copy": "复制",
 	"Exit": "退出",

src/store/index.js

@@ -32,6 +32,7 @@ export default new Vuex.Store({
 				'modifyProject',
 				'addNode',
 				'deleteNode',
+				'copyNode',
 				'addAsset',
 				'deleteAsset',
 				'deleteAllAssets',

src/store/modules/behavior.js

@@ -17,6 +17,7 @@ export const behaviorStore = {
 		originData: null,
 		originBehaviors: null,
 		behaviors: null,
+		currentProcess: null,
 
 		processStack: [],
 		editable: false,
@@ -96,14 +97,18 @@ export const behaviorStore = {
 		clearProcessStack(state) {
 			state.processStack.splice(0);
 			updatePropsEditable(state);
+			state.currentProcess = null;
 		},
 		pushProcessStack(state, process) {
 			state.processStack.push(process);
 			updatePropsEditable(state);
+			state.currentProcess = process;
+			console.log(state.currentProcess);
 		},
 		popProcessStack(state, index) {
 			state.processStack.splice(index);
 			updatePropsEditable(state);
+			state.currentProcess = state.processStack[state.processStack.length - 1];
 		},
 		setScale(state, value) {
 			let scale = state.drawState.boardScale;
@@ -173,7 +178,7 @@ export const behaviorStore = {
 			addProcessMeta(commit, isInline, masterProcess, meta);
 			return meta;
 		},
-		addProcessFromPrefab({commit, state}, {masterProcess, isInline, meta: pMeta}){
+		addProcessFromPrefab({commit, state}, {masterProcess, isInline, meta: pMeta}) {
 			let meta = clonePureObj(pMeta);
 			meta.id = generateUUID();
 			meta.isInline = isInline;
@@ -189,7 +194,7 @@ function updatePropsEditable(state) {
 	state.editable = state.processStack.filter(item => item.meta.type === 'builtin') <= 0;
 }
 
-function addProcessMeta(commit, isInline, masterProcess, meta){
+function addProcessMeta(commit, isInline, masterProcess, meta) {
 	if (isInline) {
 		if (!masterProcess.meta.metas) {
 			Vue.set(masterProcess.meta, 'metas', []);

src/store/modules/env.js

@@ -35,8 +35,14 @@ export const envStore = {
 			return groupProcesses(state.processes, process => process.isPrefab);
 		},
 		builtinProcessTree: state => {
-			const tree = groupProcesses(state.processes, process => !process.isPrefab);
+			const builtin = groupProcesses(state.processes, process => !process.isPrefab);
 
+			let tree = [
+				{
+					name: 'builtin',
+					children: builtin,
+				}
+			];
 			const dividerProcess = {
 				id: 'divider',
 				name: i18n.t('Divider'),

src/store/modules/project.js

@@ -280,6 +280,27 @@ export const projectStore = {
 			const index = parentChildren.indexOf(node);
 			parentChildren.splice(index, 1);
 		},
+		copyNode(state, {node, parentNode}) {
+		//	const parentChildren = parentNode.children || parentNode;
+		//	const index = parentChildren.indexOf(node);
+		// 	parentNode.children.push(node);
+		//	parentChildren.push(parentChildren[index]);
+			const child = {
+				name:node.name,
+				type:node.type,
+				properties: node.properties,
+				events: node.events,
+				uuid: generateUUID(),
+			};
+			if (parentNode) {
+				if (!parentNode.children) {
+					Vue.set(parentNode, 'children', []);
+				}
+				parentNode.children.push(child);
+			} else {
+				state.data.views.push(child);
+			}
+		},
 		importAssets(state, assets) {
 			state.data.assets.push(...assets);
 		},

src/themes/light/behavior.scss

@@ -36,6 +36,13 @@ $dock-pin-width: 9px;
 					text-overflow: ellipsis;
 					overflow: hidden;
 					font-size: 14px;
+
+					.current-node{
+						background-color: $--color-text-secondary;
+						color: $--color-white;
+						border-radius: 5px;
+						padding: 0 2px;
+					}
 				}
 
 				.edit-button {

src/themes/light/editor.scss

@@ -121,4 +121,7 @@
 			}
 		}
 	}
+	.full-scrollbar{
+		height: 68vh;
+	}
 }

src/utils/properties.js

@@ -47,13 +47,13 @@ export default {
       title: '水平偏移',
       type: 'inputNumber',
       value: undefined,
-      desc: '相对于父元素中心点的水平偏移，0为正中心'
+      //desc: '相对于父元素中心点的水平偏移，0为正中心'
     },
     verticalCenter: {
       title: '垂直偏移',
       type: 'inputNumber',
       value: undefined,
-      desc: '相对于父元素中心点的垂直偏移，0为正中心'
+      //desc: '相对于父元素中心点的垂直偏移，0为正中心'
     },
     rotation: {
       title: '旋转',
@@ -266,13 +266,14 @@ export default {
   },
   scrollView: {
     groupName: '滚动视图',
-    isVertical: {
-      title: '纵向锁定',
-      type: 'switch',
-      props: {
-        width: 40
-      },
-      value: true,
+    direction: {
+      title: '滚动方向',
+      type: 'select',
+      options: [
+        { label: '纵向', value: 'vertical' },
+        { label: '横向', value: 'horizontal' }
+      ],
+      value: 'vertical',
     },
     isSpringBack: {
       title: '回弹效果',

src/views/Editor/Views.vue

@@ -35,6 +35,7 @@
 							<el-link icon="el-icon-more" :underline="false" @click.stop/>
 							<el-dropdown-menu slot="dropdown">
 								<el-dropdown-item command="delete">{{$t('Delete')}}</el-dropdown-item>
+								<el-dropdown-item command="copy">{{$t('Copy')}}</el-dropdown-item>
 								<el-dropdown-item command="export" divided v-if="!node.parent.parent">{{$t('Export')}}
 								</el-dropdown-item>
 								<el-dropdown-item v-for="(type, key, index) in $t('view_node_menu')"
@@ -140,6 +141,12 @@
 							parentNode: node.parent.data
 						});
 						break;
+					case 'copy':
+						this.copyNode({
+							node: data,
+							parentNode: node.parent.data
+						});
+						break;
 					case 'export':
 						this.exportView(data);
 						break;
@@ -155,7 +162,7 @@
 						break;
 				}
 			},
-			...mapMutations(['deleteNode', 'addNode']),
+			...mapMutations(['copyNode','deleteNode', 'addNode']),
 			...mapActions(['exportView', 'importView'])
 		}
 	};

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

@@ -4,20 +4,20 @@
 			<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"/>
+				              :splitpanes-size="20"/>
 				<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
 				              class="background full-size" splitpanes-min="20"
-				              :splitpanes-size="70"/>
+				              :splitpanes-size="80"/>
 			</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>
+				<!--<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>
+					</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">

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

@@ -65,7 +65,7 @@
 				</el-button-group>
 				<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
 				<el-button size="mini" plain @click="save(true)">{{$t('Save And Preview')}}</el-button>
-				<el-button size="mini" plain @click="save(false)">{{$t('Save')}}</el-button>
+				<el-button size="mini" type="primary" plain @click="save(false)">{{$t('Save')}}</el-button>
 			</div>
 		</div>
 		<props-editor-dialog ref="propsEditorDialog"/>

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

@@ -11,7 +11,7 @@
 			>
 				<div slot-scope="{ node, data }" class="process-tree-node">
 					<div class="node-name">
-						<span :draggable="draggable(data)" @dragstart.stop="dragProcessStart(data, $event)">{{data.name}}</span>
+						<span :class="{'current-node': isCurrentProcess(data)}" :draggable="draggable(data)" @dragstart.stop="dragProcessStart(data, $event)">{{data.name}}</span>
 					</div>
 
 					<el-dropdown v-if="nodeMenu(data)" class="more-button" size="mini" trigger="click"
@@ -31,6 +31,8 @@
 </template>
 
 <script>
+	import {mapState} from 'vuex'
+
 	const editableIds = ['custom', 'divider'];
 
 	export default {
@@ -59,6 +61,13 @@
 				deep: true
 			}
 		},
+		computed: {
+			...mapState({
+				currentProcess(state){
+					return state.behavior.currentProcess;
+				}
+			}),
+		},
 		methods: {
 			updateFilter(){
 				if(this.$refs.tree){
@@ -99,6 +108,13 @@
 				let filterDivider = data.isDivider !== true;
 				if (!value) return filterDivider;
 				return filterDivider && !data.hasOwnProperty('children') && data.name.toUpperCase().indexOf(value.toUpperCase()) >= 0;
+			},
+			isCurrentProcess(data){
+				let yes= this.currentProcess && this.currentProcess.meta && data.id && data.id === this.currentProcess.meta.id;
+				if(yes){
+					console.log();
+				}
+				return yes;
 			}
 		},
 

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

@@ -5,7 +5,7 @@
 		</el-input>
 		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
 		              view-class="scrollbar-view">
-			<el-form v-model="process" size="mini" label-width="80px" label-position="left" @submit.native.prevent>
+			<el-form v-model="process" size="mini" label-width="150px" label-position="left" @submit.native.prevent>
 				<component v-for="(property, key) in process.meta.props"
 				           :is="getInput(property)"
 				           v-model="process.data.props[key]"

src/views/Editor/dialogs/BehaviorEditorDialog.vue

@@ -4,8 +4,8 @@
 	           :append-to-body="true" custom-class="behavior-editor-dialog">
 		<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
-			<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
+			<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>
 		</div>
 	</el-dialog>
 </template>
@@ -15,7 +15,6 @@
 	import BehaviorEditor from "../behavior-editor/BehaviorEditor";
 	import events from "@/global-events.js"
 
-
 	export default {
 		name: "BehaviorEditorDialog",
 		components: {BehaviorEditor},
@@ -31,8 +30,8 @@
 
 			}),
 		},
-		created(){
-        	events.$on('behaviorSave',(isPreview)=>{
+		created() {
+			events.$on('behaviorSave', (isPreview) => {
 				this.onSave(isPreview)
 			});
 		},
@@ -48,7 +47,10 @@
 			},
 			onSave(isPreview) {
 				this.behavior_save();
-				this.$emit('change',isPreview);
+				this.$emit('change', isPreview);
+				if(!isPreview){
+					this.visible = false;
+				}
 			},
 			beforeClose(done) {
 				this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {

src/views/Editor/dialogs/DetailsDialog.vue

@@ -3,6 +3,7 @@
 	           :close-on-click-modal="false"
 	           :append-to-body="true"
 	           :show-close="false"
+			   fullscreen
 	           custom-class="details-dialog"
 	>
 		<el-tabs v-model="activeName">

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

 <template>
 	<div>
-		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
+		<el-scrollbar class="scrollbar full-scrollbar" wrap-class="wrap-x-hidden" view-class="view">
 			<el-form @submit.native.prevent ref="form" :model="options" size="mini" label-position="right"
 			         label-width="150px">
 				<el-form-item prop="pageTitle" :label="$t('Page title')">
@@ -46,7 +46,13 @@
 					</el-select>
 				</el-form-item>
 				<el-form-item prop="tpl" :label="$t('Template')">
-					<el-input type="textarea" v-model="options.tpl" :rows="10"/>
+					<!-- <el-input type="textarea" v-model="options.tpl" :rows="10"/> -->
+					<codemirror ref="codeEditor"
+			            v-model="options.tpl"
+			            :options="cmOptions"
+						@cursorActivity="onCodeChange"
+					>
+					</codemirror>
 				</el-form-item>
 			</el-form>
 		</el-scrollbar>
@@ -59,10 +65,18 @@
 
 <script>
 	import {mapState, mapGetters, mapMutations} from 'vuex';
+	import {codemirror} from "vue-codemirror";
+	import 'codemirror/mode/javascript/javascript.js'
+	import 'codemirror/lib/codemirror.css'
+	import 'codemirror/theme/monokai.css'
+	import 'codemirror/addon/edit/closebrackets.js'
+	import 'codemirror/addon/hint/show-hint.js'
+	import 'codemirror/addon/hint/show-hint.css'
+	import 'codemirror/addon/hint/javascript-hint.js'
 
 	export default {
 		name: "ProjectEditor",
-		components: {},
+		components: {codemirror},
 		data() {
 			const scaleMode = this.$t('scaleMode');
 			const rendererType = this.$t('rendererType');
@@ -70,6 +84,16 @@
 				visible: false,
 				scaleMode,
 				rendererType,
+				cmOptions: {
+					tabSize: 2,
+					mode: 'text/javascript',
+					styleActiveLine: true,
+					theme: 'default',
+					lineNumbers: true,
+					line: true,
+					matchBrackets: true,
+					autoCloseBrackets: true,
+				}
 			}
 		},
 		computed: {
@@ -90,6 +114,10 @@
 			onSave() {
 				this.modifyProject();
 			},
+			onCodeChange(codemirror){
+				//codemirror.showHint();
+				//console.log(code);
+			}
 		}
 	}
 </script>