--

src/components/PropsEditor.vue

@@ -21,6 +21,7 @@
 				:propertyName="key"
 				:property="property"
 				:editable="editable"
+				:config ="property.input"
 				@input="onInput"
 			/>
 		</component>
@@ -83,9 +84,7 @@
 			SampleInputWrapper,
 		},
 		data() {
-			return {
-
-			}
+			return {}
 		},
 		props: {
 			labelWidth: {
@@ -112,8 +111,8 @@
 			},
 		},
 		watch: {
-			data(v){
-				console.log("data变更",v)
+			data(v) {
+
 			}
 		},
 		methods: {
@@ -129,7 +128,7 @@
 				}
 				this.$emit('input', value, container, propName, oldValue);
 			},
-			onCmdPropChanged(value, container, propName, oldValue){
+			onCmdPropChanged(value, container, propName, oldValue) {
 				this.$emit('input', value, container, propName, oldValue);
 			},
 		}

src/components/inputs/NumberInput.vue

-<template >
-	<el-input-number :disabled="!editable" :value="editValue" 
-	@change="onInput" controls-position="right"
-	                 :placeholder="defaultValue"></el-input-number>
+<template>
+	<div style="flex: 1; display: flex;">
+		<el-input-number :disabled="!editable" :value="editValue" @change="onInput" controls-position="right"
+		                 :placeholder="defaultValue">
+		</el-input-number>
+		<span @click="onClickPercent" v-if="config && config.percent" style="position: absolute; right: 42px; cursor: pointer"
+		      :class="{'percent-on': isPercent, 'percent-off': !isPercent}">%</span>
+	</div>
 </template>
 
 <script>
@@ -12,27 +16,40 @@
 	export default {
 		name: "NumberInput",
 		components: {LinkableInputWrapper, CmdInputWrapper},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
-		data(){
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'config'],
+		data() {
 			return {
-				defaultValue:this.hasPrefixedPropertyName ? this.value+"" : getInputDefaultValue(this.property),
+				isPercent: false,
 				editValue:null
 			}
 		},
-		
-		mounted(){
-			this.updateValue()
+		computed: {
+			/*editValue() {
+				let v = this.value;
+				if (v === undefined) {
+					this.isPercent = false;
+					return this.property.default?this.property.default:undefined;
+				} else {
+					this.isPercent = typeof v === 'string';
+					if(typeof v === 'string'){
+						v = parseInt(v);
+					}
+					return v;
+				}
+			},*/
+			defaultValue() {
+				return getInputDefaultValue(this.property);
 			},
-		watch: {
-			value:function(v) {
-				this.updateValue()
 		},
+		mounted(){
+			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;
 					}
@@ -43,16 +60,42 @@
 						this.editValue = undefined;
 					}
 				}else{
-					this.editValue = this.value === undefined ? this.property.default : this.value;
+					let v = this.value;
+					if (v === undefined) {
+						this.isPercent = false;
+						this.editValue = this.property.default?this.property.default:undefined;
+					} else {
+						this.isPercent = typeof v === 'string';
+						if(typeof v === 'string'){
+							v = parseInt(v);
+						}
+						this.editValue = v;
+					}
+					//this.editValue = this.value === undefined ? this.property.default : this.value;
 				}
 			},
 			onInput(v) {
-				console.log("v set",v)
-				if(v !== this.value){
+				if (v !== this.value) {
 					this.$emit('input', v, this.container, this.propertyName, this.value);
 				}
+			},
+			onClickPercent() {
+				if(this.isPercent){ //设置非百分比
+					this.onInput(parseInt(this.value))
+				}else{  //设置成百分比
+					if(!this.value && this.value !== 0){
+						this.onInput(undefined)
+					}else{
+						this.onInput(this.value + '%')
+					}
 				}
 			},
+		},
+		watch:{
+			value(v){
+				this.updateValue()
+			}
+		}
 	}
 </script>
 

src/locales/zh-CN.json

@@ -2,8 +2,8 @@
 	"Alert": "提示",
 	"Confirm": "确认",
 	"Cancel": "取消",
-	"Yes":"是",
-	"No":"否",
+	"Yes": "是",
+	"No": "否",
 	"Close": "关闭",
 	"Refresh": "刷新",
 	"Still Close": "直接关闭",
@@ -18,8 +18,8 @@
 	"Remark": "备注",
 	"Assets": "素材",
 	"Version": "版本",
-	"Paste same level":"粘贴(同级)",
-	"Paste child":"粘贴(子级)",
+	"Paste same level": "粘贴(同级)",
+	"Paste child": "粘贴(子级)",
 	"Exit": "退出",
 	"Apply": "应用",
 	"Props": "属性",
@@ -257,6 +257,7 @@
 	"Save behavior successfully": "保存行为成功",
 	"The main editor is closed and cannot be saved": "主编辑器已关闭，无法保存",
 	"A behavior is being edited. Please save it first": "有行为正在编辑，请先保存",
+	"Design cut mode": "设计稿裁剪模式",
 	"eventGroup": {
 		"in": "接收",
 		"out": "派发"
@@ -456,5 +457,10 @@
 			"key": "id",
 			"name": "name"
 		}
+	},
+	"designCutModes": {
+		"top": "顶部裁剪",
+		"center": "上下裁剪",
+		"bottom": "底部裁剪"
 	}
 }
\ No newline at end of file

src/store/modules/editor.js

@@ -17,7 +17,7 @@ export const editorStore = {
 	state: {
 		initialized: false,
 		name: 'Zeroing Editor',
-		version: '0.2.1',
+		version: '0.3.0',
 		templates: {
 			builtin: ['blank'],
 			custom: [],

src/store/modules/project.js

@@ -31,6 +31,7 @@ import events from "@/global-events.js"
 
 const storeName = 'project';
 const psStoreName = 'pack-history';
+const offsetAll = 172;
 
 const defaultOptions = {
 	behaviorEditor: 'builtin',
@@ -922,8 +923,20 @@ export const projectStore = {
 				scripts: _scripts
 			})
 		},
-		async importPsd({commit}, {file, action}) {
-			const result = await toZeroing(file);
+		async importPsd({commit}, {file, action, mode}) {
+			let offset = {};
+			switch(mode){
+				case 'top':
+					offset.y = offsetAll;
+					break;
+				case 'center':
+					offset.y = offsetAll / 2;
+					break;
+				case 'bottom':
+
+					break;
+			}
+			const result = await toZeroing(file, {offset});
 			let viewFile = new File([result], 'view.json');
 			const {view, assets} = await editorApi.uploadView(viewFile);
 			switch (action) {

src/template.js

@@ -27,6 +27,8 @@ export const template =
 		overflow: hidden;
 		position: absolute;
 		background-color: white;
+		
+		-webkit-touch-callout: none;
 	}
 	.game-container{
 		width: 100%;

src/themes/light/behavior.scss

@@ -501,6 +501,14 @@ $dock-pin-width: 9px;
 	.node-select-container {
 		flex: 1;
 	}
+
+	.percent-on{
+		color: $--color-primary;
+	}
+
+	.percent-off{
+		color: $--color-text-placeholder;
+	}
 }
 
 .source-input-popover {

src/themes/light/views.scss

@@ -56,3 +56,25 @@
 		}
 	}
 }
+
+.select-design-mode-dialog{
+	.wrapper {
+		display: flex;
+		justify-content: space-around;
+		padding: 10px;
+
+		.item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 10px;
+			border-radius: 10px;
+			border: 2px solid transparent;
+		}
+
+		.item.selected{
+			border-color: $--color-primary;
+		}
+	}
+
+}
\ No newline at end of file

src/utils/properties.js

@@ -22,10 +22,16 @@ export default {
 			width: {
 				alias: '宽度',
 				type: 'number',
+				input: {
+					percent: false,
+				},
 			},
 			height: {
 				alias: '高度',
 				type: 'number',
+				input: {
+					percent: false,
+				},
 			},
 			_width: {
 				alias: '[宽度]',
@@ -38,18 +44,30 @@ export default {
 			left: {
 				alias: '左边距',
 				type: 'number',
+				input: {
+					percent: true,
+				},
 			},
 			right: {
 				alias: '右边距',
 				type: 'number',
+				input: {
+					percent: true,
+				},
 			},
 			top: {
 				alias: '上边距',
 				type: 'number',
+				input: {
+					percent: true,
+				},
 			},
 			bottom: {
 				alias: '下边距',
 				type: 'number',
+				input: {
+					percent: true,
+				},
 			},
 			horizonCenter: {
 				alias: '水平居中偏移',

src/views/Editor/Views.vue

@@ -3,7 +3,7 @@
 		<div class="container">
 			<div class="header-bar">
 				<el-link class="menu-item" @click="toAddView">{{$t('Add')}}</el-link>
-				<el-link @click="toImport(0)">{{$t('Import')}}</el-link>
+				<el-link @click="onImportCommand('single')">{{$t('Import')}}</el-link>
 				<el-dropdown trigger="hover" placement="top" size="mini" @command="onImportCommand">
 					<el-link icon="el-icon-arrow-down" :underline="false"></el-link>
 					<el-dropdown-menu slot="dropdown">
@@ -69,6 +69,7 @@
 				</el-tree>
 			</el-scrollbar>
 		</div>
+		<select-design-mode-dialog ref="selectDesignModeDialog" @change="onSelectDesignMode"/>
 	</pane>
 </template>
 
@@ -77,10 +78,11 @@
 	import Pane from '../../components/Pane';
 	import {selectFile} from "../../utils";
 	import events from "../../global-events";
+	import SelectDesignModeDialog from "./Views/SelectDesignModeDialog";
 
 	export default {
 		name: 'Views',
-		components: {Pane},
+		components: {SelectDesignModeDialog, Pane},
 		data() {
 			return {
 				filterText: '',
@@ -298,22 +300,26 @@
 					.catch(() => {
 					});
 			},
-			toImport(action) {
+			toImport(action, mode) {
 				selectFile(async files => {
 					events.$emit('upload-indicator', true);
 					try {
 						await this.importPsd({
 							file: files[0],
 							action,
+							mode,
 						});
 					} catch (e) {
 					}
 					events.$emit('upload-indicator', false);
 				})
 			},
-			onImportCommand(command) {
+			onImportCommand(importType) {
+				this.$refs.selectDesignModeDialog.show(importType);
+			},
+			onSelectDesignMode(mode, importType){
 				let action;
-				switch (command) {
+				switch (importType) {
 					case 'single':
 						action = 0;
 						break;
@@ -321,7 +327,7 @@
 						action = 1;
 						break;
 				}
-				this.toImport(action);
+				this.toImport(action, mode);
 			},
 			onMoreMenu(command, data, node) {
 				switch (command) {

src/views/Editor/Views/SelectDesignModeDialog.vue

+<template>
+	<el-dialog :title="$t('Design cut mode')" :visible.sync="visible" @opened="onOpen"
+	           :append-to-body="true"
+	           custom-class="select-design-mode-dialog"
+	>
+		<div class="wrapper">
+			<div v-for="(modeName, mode, index) in designCutModes" :key="index" @click="selectCutMode(mode)" class="item" :class="{selected: designCutMode === mode}">
+				{{modeName}}
+				<img :src="images[index]">
+			</div>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<div></div>
+			<div>
+				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+				<el-button size="mini" @click="onConfirm" type="primary">{{$t('Confirm')}}</el-button>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "SelectDesignModeDialog",
+		components: {},
+		data() {
+			const designCutModes = this.$t('designCutModes');
+			let images = [];
+			let designCutModeKeys = Object.keys(designCutModes);
+			for (let designCutModeKey of designCutModeKeys) {
+				images.push(require(`@/assets/${designCutModeKey}.png`))
+			}
+
+			return {
+				visible: false,
+				designCutMode: 'top',
+				designCutModes,
+				images,
+			}
+		},
+		methods: {
+			show(importType) {
+				this.importType = importType;
+				this.visible = true;
+			},
+			onConfirm() {
+				this.$emit('change', this.designCutMode, this.importType);
+				this.visible = false;
+			},
+			onClose() {
+				this.visible = false;
+			},
+			onOpen() {
+
+			},
+			selectCutMode(mode){
+				this.designCutMode = mode;
+			}
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/components/editControlView.vue

@@ -322,6 +322,7 @@ export default {
             horizonCenter:this.targetNode.horizonCenter,
             mouseChildren:this.targetNode.mouseChildren,
             verticalCenter:this.targetNode.verticalCenter,
+            instanceType:this.targetNode.instanceType,
             source:this.targetNode.source,
             _width:this.targetNode._width,
             _height:this.targetNode._height,
@@ -345,6 +346,11 @@ export default {
       let {rotation,scaleX,scaleY,x,y}=this.matrixToGroup(this.styleCatch.worldMatrix)
       console.log("测试矩阵",this.matrixToGroup(this.styleCatch.worldMatrix))
 
+      if(this.styleCatch.instanceType=="Sprite"&&!this.styleCatch.source){
+          scaleX=1;
+          scaleY=1;
+      }
+
       let result={
         width: `${ (this.styleCatch.imageWidth?this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0))*scaleX}px`,
         height: `${ (this.styleCatch.imageHeight?this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0))*scaleY}px`,
@@ -417,6 +423,7 @@ export default {
         horizonCenter,
         verticalCenter,
         mouseChildren,
+        instanceType,
         source,
         _width,
         _height,
@@ -444,6 +451,7 @@ export default {
                 bottom,
                 horizonCenter,
                 mouseChildren,
+                instanceType,
                 verticalCenter,
                 source,
                 _width,

src/views/Editor/components/viewsTree.vue

@@ -54,14 +54,14 @@ export default {
       return styles.getComponentStyle(this.activeComponentCopy, this.project, this.componentList, true);
     },
     position() {
-      let _props = this.activeComponentCopy.properties || {};
+      let {x, y, width, height} = this.activeComponentCopy.properties || {};
       const props = properties.node.props;
       // console.log('********', _props);
       let result = {
-        x: _props.x || props.x.default,
-        y: _props.y || props.y.default,
-        w: _props.width || props.width.default,
-        h: _props.height || props.height.default,
+        x: x || props.x.default,
+        y: y || props.y.default,
+        w: width ? (typeof width === 'string' ? parseInt(width) : width) : props.width.default,
+        h: height ? (typeof height === 'string' ? parseInt(height) : height) : props.height.default,
       };
       // console.log('####position', result);
 

src/views/Editor/dialogs/ProjectConflictResolveDialog.vue

@@ -92,7 +92,7 @@
 				this.visible = false;
 			},
 			analyseCompare(remoteData, localData) {
-				let remoteJson = JSON.parse(remoteData);
+				let remoteJson = remoteData ? JSON.parse(remoteData) : {};
 				let localJson = JSON.parse(localData);
 
 				this.localObj = localJson;