Merge branch 'percent-input' into dev

src/components/PropsEditor.vue

@@ -15,13 +15,14 @@
 		           @cmd-prop-change="onCmdPropChanged"
 		>
 			<component
-			           :is="getInput(property)"
-			           :container="data"
-			           :value="data[key]"
-			           :propertyName="key"
-			           :property="property"
-			           :editable="editable"
-			           @input="onInput"
+				:is="getInput(property)"
+				:container="data"
+				:value="data[key]"
+				:propertyName="key"
+				:property="property"
+				:editable="editable"
+				:config ="property.input"
+				@input="onInput"
 			/>
 		</component>
 	</el-form>
@@ -83,9 +84,7 @@
 			SampleInputWrapper,
 		},
 		data() {
-			return {
-
-			}
+			return {}
 		},
 		props: {
 			labelWidth: {
@@ -112,7 +111,7 @@
 			},
 		},
 		watch: {
-			data(v){
+			data(v) {
 
 			}
 		},
@@ -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>
+	<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>
@@ -11,21 +16,47 @@
 	export default {
 		name: "NumberInput",
 		components: {LinkableInputWrapper, CmdInputWrapper},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'config'],
+		data() {
+			return {
+				isPercent: false,
+			}
+		},
 		computed: {
 			editValue() {
-				return this.value === undefined ? this.property.default : this.value;
+				let v = this.value;
+				if (v === undefined) {
+					this.isPercent = false;
+					return this.property.default;
+				} else {
+					this.isPercent = typeof v === 'string';
+					if(typeof v === 'string'){
+						v = parseInt(v);
+					}
+					return v;
+				}
 			},
-			defaultValue(){
+			defaultValue() {
 				return getInputDefaultValue(this.property);
 			},
 		},
 		methods: {
 			onInput(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 + '%')
+					}
+				}
+			},
 		},
 	}
 </script>

src/store/modules/project.js

@@ -899,7 +899,7 @@ export const projectStore = {
 			})
 		},
 		async importPsd({commit}, {file, action}) {
-			const result = await toZeroing(file);
+			const result = await toZeroing(file, {offset: {y: 172}});
 			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/utils/properties.js

@@ -22,26 +22,44 @@ export default {
 			width: {
 				alias: '宽度',
 				type: 'number',
+				input: {
+					percent: true,
+				},
 			},
 			height: {
 				alias: '高度',
 				type: 'number',
+				input: {
+					percent: true,
+				},
 			},
 			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/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);