Merge branch 'design-cut-mode' into dev

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": "属性",
@@ -133,8 +133,8 @@
 	"Env constant": "自定义常量",
 	"Custom module": "自定义模块",
 	"Package manager": "包管理",
-  "Projectx config": "星速台配置",
-  "Auth manager": "权限管理",
+	"Projectx config": "星速台配置",
+	"Auth manager": "权限管理",
 	"Custom module asset mapping": "自定义模块素材映射",
 	"Copy template to clipboard": "复制模板到粘贴板",
 	"Copied process to clipboard": "复制过程到粘贴板",
@@ -179,8 +179,8 @@
 	"Are you sure to delete this asset?": "确定删除这个素材吗",
 	"Are you sure to combine those assets?": "确定合并这些素材吗",
 	"Are you sure to delete all assets": "确定删除全部素材吗",
-  "Are you sure to delete this item": "确定删除这一项吗",
-  "Are you sure to delete this user auth": "确定删除这一用户权限",
+	"Are you sure to delete this item": "确定删除这一项吗",
+	"Are you sure to delete this user auth": "确定删除这一用户权限",
 	"Rename asset": "重命名素材",
 	"Input asset name": "输入素材名",
 	"Invalid asset name": "无效的素材名",
@@ -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": "派发"
@@ -269,35 +270,35 @@
 			}
 		},
 		"details": {
-			"label":  "详情"
+			"label": "详情"
 		},
 		"preview-fast": {
-			"label":  "预览"
+			"label": "预览"
 		},
 		"search": {
-			"label":  "搜索"
+			"label": "搜索"
 		},
 		"pack": {
-			"label":  "打包",
+			"label": "打包",
 			"sub": {
 				"pack-debug-mode": "调试打包",
 				"pack-manager": "打包管理"
 			}
 		},
 		"mock": {
-			"label":  "Mock"
+			"label": "Mock"
 		},
 		"px-skin-editor": {
-			"label":  "皮肤"
+			"label": "皮肤"
 		},
 		"exit": {
-			"label":  "退出"
+			"label": "退出"
 		},
 		"undo": {
-			"icon":  "icon-undo"
+			"icon": "icon-undo"
 		},
 		"redo": {
-			"icon":  "icon-redo"
+			"icon": "icon-redo"
 		}
 	},
 	"view_node_menu": {
@@ -423,38 +424,43 @@
 			"simple": true
 		},
 		"dependencies": {
-			"label":  "依赖",
-			"simple":  true
+			"label": "依赖",
+			"simple": true
 		},
 		"dataMapping": {
-			"label":  "数据映射",
-			"key":  "name",
-			"name":  "name"
+			"label": "数据映射",
+			"key": "name",
+			"name": "name"
 		},
 		"customs": {
-			"label":  "自定义模块",
-			"key":  "id",
-			"name":  "id"
+			"label": "自定义模块",
+			"key": "id",
+			"name": "id"
 		},
 		"mock": {
-			"label":  "Mock",
-			"key":  "path",
+			"label": "Mock",
+			"key": "path",
 			"name": "path"
 		},
 		"views": {
-			"label":  "视图",
-			"key":  "uuid",
-			"name":  "name"
+			"label": "视图",
+			"key": "uuid",
+			"name": "name"
 		},
 		"assets": {
-			"label":  "素材",
-			"key":  "uuid",
-			"name":  "name"
+			"label": "素材",
+			"key": "uuid",
+			"name": "name"
 		},
 		"processes": {
-			"label":  "过程",
-			"key":  "id",
-			"name":  "name"
+			"label": "过程",
+			"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

@@ -29,6 +29,7 @@ import {uploadFiles} from "./editor";
 
 const storeName = 'project';
 const psStoreName = 'pack-history';
+const offsetAll = 172;
 
 const defaultOptions = {
 	behaviorEditor: 'builtin',
@@ -898,8 +899,20 @@ export const projectStore = {
 				scripts: _scripts
 			})
 		},
-		async importPsd({commit}, {file, action}) {
-			const result = await toZeroing(file, {offset: {y: 172}});
+		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/themes/light/views.scss

@@ -55,4 +55,26 @@
 			}
 		}
 	}
+}
+
+.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/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: '',
@@ -239,22 +241,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;
@@ -262,7 +268,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