增加env编辑

src/config.js

@@ -11,6 +11,10 @@ if (process.env.NODE_ENV === 'development') {
 	API_HOST = window.__data.apiHost;
 }
 
+if (API_HOST[API_HOST.length - 1] === '/') {
+	API_HOST = API_HOST.substr(0, API_HOST.length - 1);
+}
+
 export const UPLOAD_FILE_URL = API_HOST + '/api/uploadFile';
 export const PARSE_BUNDLE_URL = API_HOST + '/api/parsePSD';
 

src/locales/en.json

@@ -15,6 +15,7 @@
 	"Export": "Export",
 	"Upload": "Upload",
 	"Edit": "Edit",
+	"Env": "Env",
 	"ID": "ID",
 	"Name": "Name",
 	"Alias": "Alias",
@@ -67,6 +68,7 @@
 	"Props Editor": "Props Editor",
 	"Trigger once": "Trigger once",
 	"Meta Editor": "Meta Editor",
+	"Env editor": "Env editor",
 	"As inline": "As inline",
 	"Link to parent": "Link to parent",
 	"Input project name": "Input project name",
@@ -96,7 +98,7 @@
 	"Confirm to exit the editor": "Confirm to exit the editor?",
 	"Confirm to publish": "Confirm to publish?",
 	"Are you sure to delete this asset": "Are you sure to delete this asset",
-	"Are you sure to delete this link": "Are you sure to delete this link",
+	"Are you sure to delete this item": "Are you sure to delete this item",
 	"Rename asset": "Rename asset",
 	"Input asset name": "Input asset name",
 	"Invalid asset name": "Invalid asset name",

src/locales/zh-CN.json

@@ -15,6 +15,7 @@
 	"Export": "导出",
 	"Upload": "上传",
 	"Edit": "编辑",
+	"Env": "环境",
 	"ID": "ID",
 	"Name": "名字",
 	"Alias": "别名",
@@ -67,6 +68,7 @@
 	"Props Editor": "属性编辑器",
 	"Trigger once": "触发一次",
 	"Meta Editor": "过程元配置",
+	"Env editor": "环境编辑器",
 	"As inline": "作为内联",
 	"Link to parent": "连接到父节点",
 	"Input project name": "输入项目名",
@@ -96,7 +98,7 @@
 	"Confirm to exit the editor": "确定退出编辑器吗?",
 	"Confirm to publish": "确定发布吗?",
 	"Are you sure to delete this asset": "确定删除素材吗",
-	"Are you sure to delete this link": "确定删除映射吗",
+	"Are you sure to delete this item": "确定删除这一项吗",
 	"Rename asset": "重命名素材",
 	"Input asset name": "输入素材名",
 	"Invalid asset name": "无效的素材名",

src/store/modules/project.js

@@ -3,12 +3,12 @@
  */
 import Vue from "vue";
 import JSZip from "jszip";
-import { projectApi } from "../../api";
+import {projectApi} from "../../api";
 import path from "path";
 import generateUUID from "uuid/v4";
-import { getCmpProps, flattenViews, getCmpByUUID } from '../../utils/common';
+import {getCmpProps, flattenViews, getCmpByUUID} from '../../utils/common';
 import {clonePureObj, saveAs} from "../../utils";
-import { template } from "../../template";
+import {template} from "../../template";
 
 const defaultOptions = {
 	pageTitle: 'no title',
@@ -20,6 +20,10 @@ const defaultOptions = {
 	scaleMode: 'fixedWidth',
 	rendererType: 'webgl',
 	tpl: template,
+	env: {
+		appID: '',
+		projectID: '',
+	},
 };
 
 const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值
@@ -54,14 +58,14 @@ export const projectStore = {
 			state.dirty = dirty;
 		},
 		updateProject(state, project) {
-			const { id, name, creator, data } = project;
+			const {id, name, creator, data} = project;
 			state.id = id;
 			state.name = name;
 			state.creator = creator;
 
 			const localData = state.data;
 			if (data) {
-				const { views, assets, dataMapping, processes, options, } = JSON.parse(data);
+				const {views, assets, dataMapping, processes, options, } = JSON.parse(data);
 
 				Vue.set(localData, 'options', options || getDefaultOptions());
 				Vue.set(localData, 'views', views || []);
@@ -249,7 +253,7 @@ export const projectStore = {
 		modifyProject(state) {
 
 		},
-		addNode(state, { node, name, type }) {
+		addNode(state, {node, name, type}) {
 			const child = {
 				name,
 				type,
@@ -269,7 +273,7 @@ export const projectStore = {
 		importView(state, view) {
 			state.data.views.push(view);
 		},
-		deleteNode(state, { node, parentNode }) {
+		deleteNode(state, {node, parentNode}) {
 			const parentChildren = parentNode.children || parentNode;
 			const index = parentChildren.indexOf(node);
 			parentChildren.splice(index, 1);
@@ -277,7 +281,7 @@ export const projectStore = {
 		importAssets(state, assets) {
 			state.data.assets.push(...assets);
 		},
-		addAsset(state, { url, file }) {
+		addAsset(state, {url, file}) {
 			const ext = path.extname(file.name);
 			state.data.assets.push({
 				name: path.basename(file.name, ext),
@@ -287,7 +291,7 @@ export const projectStore = {
 			})
 		},
 		deleteAsset(state, uuid) {
-			const { assets } = state.data;
+			const {assets} = state.data;
 			for (let i = 0, li = assets.length; i < li; i++) {
 				const asset = state.data.assets[i];
 				if (asset.uuid === uuid) {
@@ -318,10 +322,32 @@ export const projectStore = {
 		modifyDataMapping(state) {
 
 		},
+
+		addEnvMapping(state, link) {
+			if(!state.data.options.env){
+				Vue.set(state.data.options, 'env', []);
+			}
+			if (link) {
+				state.data.options.env.push(link);
+			} else {
+				state.data.options.env.push({
+					name: '',
+					value: '',
+				});
+			}
+		},
+
+		deleteEnvMapping(state, index) {
+			state.data.options.env.splice(index, 1);
+		},
+
+		modifyEnvMapping(state) {
+
+		},
 	},
 	getters: {
 		project(state) {
-			const { id, name, creator, data } = state;
+			const {id, name, creator, data} = state;
 			return {
 				id, name, creator,
 				data: JSON.stringify(data),
@@ -386,17 +412,17 @@ export const projectStore = {
 		}
 	},
 	actions: {
-		saveToLocal({ getters, commit }) {
-			const { project } = getters;
+		saveToLocal({getters, commit}) {
+			const {project} = getters;
 
 			localStorage.setItem('project-' + project.id, JSON.stringify(project));
 			commit('setDirty', true);
 		},
-		localVersionExist({ commit }, projectID) {
+		localVersionExist({commit}, projectID) {
 			let json = localStorage.getItem('project-' + projectID);
 			return !!json;
 		},
-		loadFromLocal({ commit }, projectID) {
+		loadFromLocal({commit}, projectID) {
 			let json = localStorage.getItem('project-' + projectID);
 			if (json) {
 				const project = JSON.parse(json);
@@ -404,11 +430,11 @@ export const projectStore = {
 				commit('setDirty', true);
 			}
 		},
-		deleteLocalVersion({ state, commit }, projectID) {
+		deleteLocalVersion({state, commit}, projectID) {
 			localStorage.removeItem('project-' + projectID);
 			commit('setDirty', false);
 		},
-		async loadFromRemote({ commit, dispatch }, projectID) {
+		async loadFromRemote({commit, dispatch}, projectID) {
 			const project = await projectApi.fetchOne(projectID);
 			if (project) {
 				dispatch('deleteLocalVersion', projectID);
@@ -417,11 +443,11 @@ export const projectStore = {
 				throw new Error('Project does not exist')
 			}
 		},
-		async saveToRemote({ state, dispatch, getters }) {
+		async saveToRemote({state, dispatch, getters}) {
 			await projectApi.saveOne(getters.project);
 			dispatch('deleteLocalVersion', state.id);
 		},
-		async updateProject({ commit }, projectID) {
+		async updateProject({commit}, projectID) {
 			const project = await projectApi.getData(projectID);
 			commit('updateProject', project);
 		},
@@ -450,7 +476,7 @@ export const projectStore = {
 		/**
 		 * 修改属性
 		 */
-		modifyProperties({ commit, state, getters }, props) {
+		modifyProperties({commit, state, getters}, props) {
 			// debugger;
 			// 如果当前修改的是“来源”属性，节点又没有高度宽度，则取图片的高度宽度
 			let _props = _.cloneDeep(state.activeComponent.properties);
@@ -487,13 +513,13 @@ export const projectStore = {
 		 * @param {*} param0
 		 * @param {*} props
 		 */
-		modifyCopyProperties({ commit }, props) {
+		modifyCopyProperties({commit}, props) {
 			commit('modifyCopyProperties', props)
 		},
 		/**
 		 * 修改当前选中的节点
 		 */
-		modifyActiveView({ commit }, view) {
+		modifyActiveView({commit}, view) {
 			commit('modifyActiveView', view)
 		},
 
@@ -502,7 +528,7 @@ export const projectStore = {
 		 * @param {*} param0
 		 * @param {*} data
 		 */
-		addNodeScript({ commit, state }, script) {
+		addNodeScript({commit, state}, script) {
 			let _scripts = _.cloneDeep(state.activeComponent.scripts || []);
 			_scripts.push({
 				script: script,
@@ -513,15 +539,15 @@ export const projectStore = {
 			})
 		},
 
-		exportView({ state }, view) {
+		exportView({state}, view) {
 			let zip = new JSZip();
 			zip.file('view.json', JSON.stringify(view));
-			zip.generateAsync({ type: "blob" }).then(function (content) {
+			zip.generateAsync({type: "blob"}).then(function (content) {
 				saveAs(content, `view-${view.name}.zrv`);
 			});
 		},
 
-		async packProject({ state }) {
+		async packProject({state}) {
 			const result = await projectApi.pack(state.id);
 			console.log(result)
 			return result;

src/utils/index.js

@@ -90,6 +90,21 @@ export function metaInUse(process, targetMetaID) {
 	return result;
 }
 
-export function clonePureObj(obj){
+export function clonePureObj(obj) {
 	return JSON.parse(JSON.stringify(obj));
 }
+
+export function readTextFile(file) {
+	return new Promise((resolve, reject) => {
+		const fileReader = new FileReader();
+		fileReader.readAsText(file);
+
+		fileReader.addEventListener('load', function (e) {
+			resolve(this.result);
+		}, false);
+
+		fileReader.addEventListener('error', function (e) {
+			reject(e);
+		}, false);
+	})
+}

src/utils/properties.js

@@ -191,7 +191,7 @@ export default {
     strokeWidth: {
       title: '边框宽度',
       type: 'inputNumber',
-      value: 1,
+      value: 0,
       props: {
         min: 0
       }

src/views/Editor/Inspector/PropsTab.vue

@@ -70,8 +70,6 @@ const componentMapper = {
   switch: {
     component: 'el-switch',
     props: {
-      activeColor: '#13ce66',
-      inactiveColor: '#eee',
       width: 100
     }
   },
@@ -121,8 +119,6 @@ const scriptTypeMap = {
   boolean: {
     component: 'el-switch',
     props: {
-      activeColor: '#13ce66',
-      inactiveColor: '#eee',
       width: 40
     }
   },

src/views/Editor/dialogs/DataMappingDialog.vue

@@ -44,7 +44,7 @@
 				this.modifyDataMapping();
 			},
 			toDeleteItem(link, index){
-				this.$confirm(this.$t('Are you sure to delete this link'), this.$t('Alert'), {
+				this.$confirm(this.$t('Are you sure to delete this item'), this.$t('Alert'), {
 					confirmButtonText: this.$t('Confirm'),
 					cancelButtonText: this.$t('Cancel'),
 					type: 'warning'

src/views/Editor/dialogs/EnvEditorDialog.vue

+<template>
+	<el-dialog :title="$t('Env editor')" width="70%" :visible.sync="visible" @open="onOpen"
+	           :append-to-body="true" :close-on-click-modal="false">
+		<div class="data-mapping-dialog">
+			<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
+				<div class="item" v-for="(link, index) in env">
+					<el-input size="mini" style="width: 30%" v-model="link.name" @change="onChange"/>
+					<el-icon class="el-icon-connection"/>
+					<el-input size="mini" v-model="link.value" @change="onChange"/>
+					<el-button icon="el-icon-minus" circle size="mini" @click="toDeleteItem(link, index)"/>
+				</div>
+			</el-scrollbar>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button size="mini" type="primary" @click="onAdd">{{$t('Add')}}</el-button>
+			<el-button size="mini" type="primary" @click="onConfirm">{{$t('Confirm')}}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import {mapState, mapMutations} from 'vuex'
+
+	export default {
+		name: "EnvEditorDialog",
+		data() {
+			return {
+				visible: false,
+			}
+		},
+		computed: {
+			...mapState({
+				env: state=> state.project.data.options.env,
+			}),
+		},
+		methods: {
+			show() {
+				this.visible = true;
+			},
+			onAdd() {
+				this.addEnvMapping();
+			},
+			onChange(){
+				this.modifyEnvMapping();
+			},
+			toDeleteItem(link, index){
+				this.$confirm(this.$t('Are you sure to delete this item'), this.$t('Alert'), {
+					confirmButtonText: this.$t('Confirm'),
+					cancelButtonText: this.$t('Cancel'),
+					type: 'warning'
+				}).then(() => {
+					this.deleteEnvMapping(index);
+				}).catch((e) => {
+				});
+			},
+			onConfirm() {
+				this.visible = false;
+			},
+			onOpen() {
+
+			},
+			...mapMutations([
+				'addDataMapping',
+				'deleteDataMapping',
+				'modifyDataMapping',
+				'addEnvMapping',
+				'deleteEnvMapping',
+				'modifyEnvMapping',
+			]),
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/dialogs/ProjectDetailsDialog.vue

@@ -55,19 +55,21 @@
 			</el-form>
 		</div>
 		<div slot="footer" class="dialog-footer">
+			<el-button size="mini" @click="onEditEnv">{{$t('Env')}}</el-button>
 			<el-button size="mini" @click="onCancel">{{$t('Cancel')}}</el-button>
 			<el-button size="mini" type="primary" @click="onConfirm">{{$t('Save')}}</el-button>
 		</div>
+		<env-editor-dialog ref="envEditorDialog"/>
 	</el-dialog>
 </template>
 
 <script>
 	import {mapState, mapGetters, mapMutations} from 'vuex';
-	import {RENDERER_TYPES, SCALE_MODES} from "../../../utils";
-
+	import EnvEditorDialog from "./EnvEditorDialog";
 
 	export default {
 		name: "ProjectDetailsDialog",
+		components: {EnvEditorDialog},
 		data() {
 			const scaleMode = this.$t('scaleMode');
 			const rendererType = this.$t('rendererType');
@@ -89,6 +91,9 @@
 			show() {
 				this.visible = true;
 			},
+			onEditEnv() {
+				this.$refs.envEditorDialog.show();
+			},
 			onCancel() {
 				this.$refs.form.resetFields();
 				this.visible = false;

src/views/Home/CreateProjectDialog.vue

@@ -5,7 +5,7 @@
 			<el-form-item :label="$t('Project name')" prop="name">
 				<el-input v-model="project.name" :maxlength="64"></el-input>
 			</el-form-item>
-			<el-form-item :label="$t('Template')">
+			<!--<el-form-item :label="$t('Template')">
 				<el-select v-model="template" placeholder="Select a template" no-data-text="No templates">
 					<el-option-group
 						v-for="(group, groupName) in env.templates" v-if="Object.keys(group).length > 0"
@@ -19,7 +19,7 @@
 						</el-option>
 					</el-option-group>
 				</el-select>
-			</el-form-item>
+			</el-form-item>-->
 		</el-form>
 		<div slot="footer" class="dialog-footer">
 			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>