feat: asset拖拽

src/components/customElement/image/index.vue

 <template>
-  <div class="zero-custom-picture" :style="`background-image:url(${properties.source}); background-size: contain;`"></div>
+  <div class="zero-custom-picture"></div>
 </template>
 
 <style>
-.zero-custom-picture {
+/* .zero-custom-picture {
   height: 100%;
   background-position: center;
-}
+} */
 </style>
 
 <script>

src/components/customSettings/slider/index.vue

@@ -2,15 +2,7 @@
   <el-slider class="zero-slider" v-model="swvalue" :min="min" :max="max" :step="step" show-input :show-input-controls="false" input-size="mini"></el-slider>
 </template>
 <style>
-.el-slider.zero-slider {
-  width: 180px;
-}
-.zero-slider .el-slider__runway.show-input {
-  width: 100px;
-}
-.zero-slider > .el-slider__input {
-  width: 60px;
-}
+
 /* .zero-slider > .el-slider__input > span {
     display: none;
   }

src/components/customSettings/source/index.vue

 <template>
-  <el-input disabled v-model="swvalue" @drop.native="drop(event)"></el-input>
+  <el-input v-model="swvalue" @drop.native="drop" @dragover.native="dragOver"></el-input>
 </template>
 <style>
-
 </style>
 <script>
 export default {
@@ -11,7 +10,7 @@ export default {
   },
   data() {
     return {
-      swvalue: (this.value || '').split('/').pop()
+      swvalue: this.value || ''
     };
   },
   watch: {
@@ -21,8 +20,14 @@ export default {
   },
   methods: {
     drop(e) {
-      console.log('native drop', e);
-      
+      if (this.$store.state.project.dragUUID) {
+        // debugger;
+        console.log('native drop', this.$store.state);
+        this.swvalue = `asset://${this.$store.state.project.dragUUID}`
+      }
+    },
+    dragOver(e) {
+      e.preventDefault();
     }
   }
 };

src/config.js

@@ -2,8 +2,8 @@
  * Created by rockyl on 2019-09-19.
  */
 
-//export const API_HOST = 'http://10.10.93.73:7777';
-export const API_HOST = 'http://localhost:3002';
+export const API_HOST = 'http://10.10.95.74:7777';
+//export const API_HOST = 'http://localhost:3002';
 
 export const UPLOAD_FILE_URL = API_HOST + '/api/uploadFile';
 export const PARSE_BUNDLE_URL = API_HOST + '/api/parsePSD';

src/store/modules/project.js

@@ -23,6 +23,8 @@ export const projectStore = {
 		},
 		activeComponent: {},
 		activeIdList: [],
+		activeViews: '',
+		dragUUID: '',
 		dirty: false,
 	},
 	mutations: {
@@ -54,8 +56,8 @@ export const projectStore = {
 		 * @param {*} id
 		 */
 		activeComponent(state, item) {
+			// debugger;
 			if (item !== state.activeComponent) {
-				// debugger;
 				state.activeComponent = item || state.activeComponent;
 				state.activeComponent.properties = state.activeComponent.properties || {};
 				console.log('mutations activeComponent', state);
@@ -102,6 +104,14 @@ export const projectStore = {
 			}
 			console.log('modifyComponent', state.activeComponent);
 		},
+		/**
+		 * assets拖拽
+		 * @param {*} data 
+		 */
+		assetDragStart(state, data) {
+			console.log('assetDragStart', data);
+			state.dragUUID = data.uuid;
+		},
 		modifyProject(state, ) {
 
 		},
@@ -195,10 +205,14 @@ export const projectStore = {
 		 * 当前激活的组件
 		 */
 		activeComponent: state => {
-			let _cmp = state.activeComponent || {}
-			console.log('activeComponent', _cmp);
-
-			return { ..._cmp, uuid: _cmp.uuid || generateUUID() }
+			// if (state.activeComponent) {
+			// 	let _cmp = state.activeComponent || {}
+			// 	console.log('activeComponent', _cmp);
+			// 	return { ..._cmp, uuid: _cmp.uuid || generateUUID() }
+			// } else {
+			// 	return {};
+			// }
+			return state.activeComponent;
 		},
 		/**
 		 * 当前激活的组件ID
@@ -210,12 +224,18 @@ export const projectStore = {
 		 * 扁平化所有节点
 		 */
 		componentList: state => {
+			// debugger;
 			const flatten = arr => {
 				return arr.reduce((flat, toFlat) => {
 					return flat.concat(toFlat.children ? flatten(toFlat.children).concat([toFlat]) : [toFlat]);
 				}, []);
 			};
-			let result = flatten(state.data.views);
+			let _view = state.data.views.length ? [].concat(state.data.views[0]) : [];
+			if (state.activeViews) {
+				_view = state.data.views.filter(v => v.uuid === state.activeViews)
+			}
+			// debugger;
+			let result = flatten(_view);
 			// let result = state.data.views.flatMap(v => [v, v.children || []])
 			console.log('componentList', result);
 			return result;
@@ -263,13 +283,26 @@ export const projectStore = {
 		},
 		/**
 		 * 选中节点
-		 * @param {*} param0
+		 * @param {*} param
 		 * @param {*} data
 		 */
-		activeComponent({ commit }, data) {
+		activeComponent({ commit, state }, data) {
 			console.log('actions activeComponent', data);
 
-			commit('activeComponent', data);
+			let getTopView = node => {
+				if (node.parent && !node.parent.parent) {
+					return node;
+				} else {
+					return getTopView(node.parent);
+				}
+			}
+
+			let _view = getTopView(data.node);
+			if (_view && _view.data) {
+				state.activeViews = _view.data.uuid;
+			}
+
+			commit('activeComponent', data.data);
 		},
 		/**
 		 * 修改属性

src/themes/light/index.scss

@@ -7,6 +7,7 @@
 @import "./home.scss";
 @import "./editor.scss";
 @import "./playground.scss";
+@import "./inspector.scss";
 
 @import "~element-ui/packages/theme-chalk/src/index.scss";
 

src/themes/light/inspector.scss

+.zero-inspector-form{
+  .el-input-number.el-input-number--mini,.el-select.el-select--mini{
+    width: 100%;
+  }
+  .el-slider.zero-slider {
+    width: 180px;
+  }
+  .zero-slider .el-slider__runway.show-input {
+    width: 100px;
+  }
+  .zero-slider > .el-slider__input {
+    width: 60px;
+  }
+}
\ No newline at end of file

src/utils/common.js

@@ -49,6 +49,10 @@ const attrUnitMapper = {
   minHeight: 'px'
 };
 
+// function getAssetByUUID(asset, uuid){
+//   return 
+// }
+
 export const styles = {
   getStyles(value, key) {
     const attr = attrShortMapper[key] || changeCamle(key);
@@ -75,10 +79,15 @@ export const styles = {
    * 根据Object类型的属性对象，生成dom中style属性可用的数据格式
    * @param {*} obj 
    */
-  getStylesFromObj(obj) {
+  getStylesFromObj(obj, project) {
     let resultObj = {};
 
     _.forIn(obj, (value, key) => {
+      if (key === 'source' && value.indexOf('asset://') === 0) {
+        let uuid = value.split('//')[1];
+        let asset = project.data.assets.find(a => a.uuid === uuid);
+        value = asset ? asset.url : '';
+      }
       let _style = styles.getStyles(value, key);
       if (!_style) {
         return;
@@ -96,7 +105,7 @@ export const styles = {
    * 根据组件数据，生成完整的style
    * @param {*} component 
    */
-  getComponentStyle(component) {
+  getComponentStyle(component, project) {
     let result = '';
 
     // 根据组件类型，获取默认属性
@@ -104,8 +113,8 @@ export const styles = {
     defaultProps = _.omit(defaultProps, _.keys(component.properties));
     defaultProps = _.mapValues(defaultProps, o => (o.value));
 
-    let _cmpProps = styles.getStylesFromObj(component.properties);
-    let _defaultProps = styles.getStylesFromObj(defaultProps);
+    let _cmpProps = styles.getStylesFromObj(component.properties, project);
+    let _defaultProps = styles.getStylesFromObj(defaultProps, project);
 
     _.forIn({
       ..._defaultProps,

src/views/Editor/Assets/FileItem.vue

@@ -2,7 +2,7 @@
 	<div class="file-item">
 		<div class="icon">
 			<i v-if="!showThumbnail" draggable="true" class="file-icon" :class="fileIcon"></i>
-			<img v-if="showThumbnail" draggable="true" class="thumbnail" :src="thumbnailUrl" alt="thumb" @dblclick="onDbclick()">
+			<img @dragstart="assetDragStart(data)" v-if="showThumbnail" draggable="true" class="thumbnail" :src="thumbnailUrl" alt="thumb" @dblclick="onDbclick()">
 			<div class="operate-bar">
 				<el-button circle size="mini" type="success" icon="el-icon-edit" @dblclick.native.stop @click="onClickEdit"/>
 				<el-button circle size="mini" type="danger" icon="el-icon-delete" @dblclick.native.stop
@@ -80,6 +80,7 @@
 			...mapMutations([
 				'deleteAsset',
 				'modifyAsset',
+				'assetDragStart'
 			]),
 		}
 	}

src/views/Editor/Inspector.vue

 <template>
 	<pane icon="el-icon-s-operation" :title="$t('panes.Inspector')">
 		<div class="zero-inspector-form">
-			<el-form ref="form" size="mini" v-if="activeComponent.name" :model="form" label-width="80px">
+			<el-form ref="form" size="mini" v-if="activeComponent.uuid" :model="form" label-width="80px">
         <el-divider content-position="left">配置</el-divider>
 				<el-form-item label="名称">
 					<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>

src/views/Editor/Views.vue

@@ -54,100 +54,97 @@
 </template>
 
 <script>
-	import {mapState, mapMutations, mapActions} from 'vuex';
-	import Pane from '../../components/Pane';
-	import {PARSE_BUNDLE_URL} from "../../config";
+import { mapState, mapMutations, mapActions } from 'vuex';
+import Pane from '../../components/Pane';
+import { PARSE_BUNDLE_URL } from '../../config';
 
-	export default {
-		name: 'Views',
-		components: {Pane},
-		data() {
-			return {
-				defaultProps: {
-					children: 'children',
-					label: 'name'
-				}
-			};
-		},
-		computed: {
-			importFileUrl() {
-				return PARSE_BUNDLE_URL;
-			},
-			...mapState({
-				views: state => state.project.data.views
-			})
-		},
-		methods: {
-			allowDrag(draggingNode) {
-				return draggingNode.parent.parent;
-			},
-			/**
-			 * 点击左侧视图列表
-			 */
-			handleNodeClick(data) {
-				this.$store.commit('activeComponent', data);
-			},
-			toAddView() {
-				this.$prompt(this.$t('Input view name'), this.$t('Alert'), {
-					confirmButtonText: this.$t('Confirm'),
-					cancelButtonText: this.$t('Cancel'),
-					inputPattern: /^.{1,64}$/,
-					inputErrorMessage: this.$t('Invalid view name')
-				})
-					.then(({value}) => {
-						this.addNode({
-							name: value,
-							type: 'node'
-						});
-					})
-					.catch(() => {
-					});
-			},
-			toImportView() {
-			},
-			selectNode(data, node, target) {
-			},
-			onMoreMenu(command, data, node) {
-				switch (command) {
-					case 'delete':
-						this.deleteNode({
-							node: data,
-							parentNode: node.parent.data
-						});
-						break;
-					case 'export':
-						this.exportView(data);
-						break;
-					default:
-						if (command.startsWith('add_node_')) {
-							const type = command.substr('add_node_'.length);
-							this.addNode({
-								node: data,
-								type,
-								name: 'node'
-							});
-						}
-						break;
-				}
-			},
-			uploadFileSuccess(response, file) {
-				if (response.success) {
-					console.log('upload success', response);
-					const {view, assets} = response.data;
+export default {
+  name: 'Views',
+  components: { Pane },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    };
+  },
+  computed: {
+    importFileUrl() {
+      return PARSE_BUNDLE_URL;
+    },
+    ...mapState({
+      views: state => state.project.data.views
+    })
+  },
+  methods: {
+    allowDrag(draggingNode) {
+      return draggingNode.parent.parent;
+    },
+    /**
+     * 点击左侧视图列表
+     */
+    handleNodeClick(data, node) {
+      this.$store.dispatch('activeComponent', { data, node });
+    },
+    toAddView() {
+      this.$prompt(this.$t('Input view name'), this.$t('Alert'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
+        inputPattern: /^.{1,64}$/,
+        inputErrorMessage: this.$t('Invalid view name')
+      })
+        .then(({ value }) => {
+          this.addNode({
+            name: value,
+            type: 'node'
+          });
+        })
+        .catch(() => {});
+    },
+    toImportView() {},
+    selectNode(data, node, target) {},
+    onMoreMenu(command, data, node) {
+      switch (command) {
+        case 'delete':
+          this.deleteNode({
+            node: data,
+            parentNode: node.parent.data
+          });
+          break;
+        case 'export':
+          this.exportView(data);
+          break;
+        default:
+          if (command.startsWith('add_node_')) {
+            const type = command.substr('add_node_'.length);
+            this.addNode({
+              node: data,
+              type,
+              name: 'node'
+            });
+          }
+          break;
+      }
+    },
+    uploadFileSuccess(response, file) {
+      if (response.success) {
+        console.log('upload success', response);
+        const { view, assets } = response.data;
 
-					this.importView(view);
-					this.importAssets(assets);
-				} else {
-					this.uploadFileError();
-				}
-			},
-			uploadFileError() {
-				console.log('upload error')
-			},
-			...mapMutations(['importView', 'importAssets', 'deleteNode', 'addNode']),
-			...mapActions(['exportView']),
-		}
-	};
+        this.importView(view);
+        this.importAssets(assets);
+      } else {
+        this.uploadFileError();
+      }
+    },
+    uploadFileError() {
+      console.log('upload error');
+    },
+    ...mapMutations(['importView', 'importAssets', 'deleteNode', 'addNode']),
+    ...mapActions(['exportView'])
+  }
+};
 </script>
 
 <style scoped>

src/views/Editor/components/wrapper.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import { getComposedComponents } from '../../../utils/getComposedComponents';
 import { styles } from '../../../utils/common';
 import properties from '../../../utils/properties';
@@ -139,6 +139,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['project']),
     ...mapGetters(['activeComponentId']),
     active() {
       return this.activeComponentId === (this.componentData || {}).uuid;
@@ -153,7 +154,7 @@ export default {
     styleObject() {
       console.log('wrapper styleObject');
 
-      return styles.getComponentStyle(this.componentData);
+      return styles.getComponentStyle(this.componentData, this.project);
     },
     position() {
       const componentData = this.componentData;