--

src/components/customElement/node/index.vue

 <template>
-  <div :style="customStyle" @click.self.stop="clickViewHandle(view)"  class="zero-custom-cmp zero-custom-node">
+  <div :style="customStyle"  class="zero-custom-cmp zero-custom-node">
     <p class="custom-node-html" v-if="selfText">{{selfText}}</p>
     <slot></slot>
   </div>
@@ -20,6 +20,8 @@
 </style>
 
 <script>
+	import events from "@/global-events.js"
+
 export default {
   name: 'customNode',
   props: {
@@ -38,12 +40,15 @@ export default {
   },
   computed: {
     selfText() {
-      return this.properties ? this.properties.text || '' : '';
+      return this.properties ? '' || '' : '';
+      //return this.properties ? this.properties.text || '' : '';
     }
   },
   methods: {
-    clickViewHandle(data) {
-			this.$store.dispatch('activeComponent', {data, fromPlayground: true});
+    clickViewHandle(e) {
+      console.log("click",e.offsetX)
+      // events.$emit("onClickTouchLayer",e);
+		//	this.$store.dispatch('activeComponent', {data, fromPlayground: true});
     }
   }
 };

src/config.js

@@ -8,7 +8,7 @@ if (process.env.NODE_ENV === 'development') {
 	//API_HOST = '//192.168.1.16:7777';
 	API_HOST = '//10.10.35.210:3000';
 	//API_HOST = '//192.168.0.105:7777';
-	//API_HOST = '//localhost:3002';
+	//API_HOST = '//localhost:8080';
 	//API_HOST = window.__data.apiHost;
 	//API_HOST = 'http://beacon.duiba.com.cn';
 	//API_HOST = 'http://beacon.duibadev.com.cn';

src/store/modules/project.js

@@ -26,6 +26,8 @@ import {packageStore} from "./package"
 import {toZeroing} from "psd-parse-web"
 import {arrayFind} from "element-ui/src/utils/util";
 import {uploadFiles} from "./editor";
+import events from "@/global-events.js"
+
 
 const storeName = 'project';
 const psStoreName = 'pack-history';
@@ -811,6 +813,9 @@ export const projectStore = {
 				_props[key] = value;
 			});
 
+			console.log("props",props,state.activeComponent)
+			events.$emit('canvasKeyVupdate', {props,activeComponent:state.activeComponent});
+
 			/*if (hasAssetsDep) {
 				commit('updateAssetDep');
 			}*/

src/utils/common.js

@@ -33,10 +33,10 @@ const attrShortMapper = {
 	size: 'font-size',
 	font: 'font-family',
 	alpha: 'opacity',
-	strokeColor: 'border-color',
-	strokeWidth: 'border-width',
-	fillColor: 'background-color',
-	source: 'background-image',
+//	strokeColor: 'border-color',
+//	strokeWidth: 'border-width',
+//	fillColor: 'background-color',
+//	source: 'background-image',
 	anchorX:'-webkit-transform-origin-x',
 	anchorY:'-webkit-transform-origin-y',
 };
@@ -195,6 +195,7 @@ export const styles = {
 				return ['transform', [`scaleY(${value})`]]; //`transform: scaleY(${value});`;
 			case 'visible':
 				return ['display', [value ? 'block' : 'none']]; // `display: ${value ? 'block' : 'none'};`;
+				//return ['display', ['none']]; // `display: ${value ? 'block' : 'none'};`;
 			case '-webkit-transform-origin-x':
 				return ['-webkit-transform-origin-x', [`${value}px`]]; // `display: ${value ? 'block' : 'none'};`;
 			case '-webkit-transform-origin-y':

src/views/Editor/Playground.vue

@@ -21,7 +21,7 @@
 				</el-form>
 			</div>
 
-			<div class="zero-playground-body-center" :style="playgroundStyle" >
+			<div class="zero-playground-body-center" :style="playgroundStyle"  ref="zeroPlayground"  @mousedown="clickViewHandle" >
 			<!-- <div class="zero-playground-draw-panel"> -->
 				<draw-canvas-panel></draw-canvas-panel>
 			<!-- </div> -->
@@ -51,6 +51,15 @@ export default {
     }
 	},
   methods: {
+    clickViewHandle(e) {
+	  console.log(e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2)
+	  events.$emit("onClickTouchLayer",{
+		  x:e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2,
+		  y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2
+		  });
+	  
+		//	this.$store.dispatch('activeComponent', {data, fromPlayground: true});
+    },
     mouseWheel(e){
 		if(!this.hasCtrlState){
 			return;

src/views/Editor/Views.vue

@@ -38,7 +38,7 @@
 					:allow-drag="allowDrag"
 					:allow-drop="allowDrop"
 					:filter-node-method="filterNodeMethod"
-					@node-click="handleNodeClick"
+					@current-change="handleNodeClick"
 					@node-drop="onNodeDrop"
 				>
 					<div slot-scope="{ node, data }" class="tree-node">
@@ -98,6 +98,7 @@
 		},
 		mounted() {
 			events.$on('locate-view-node', this.locateViewNode);
+			events.$on('locate-view-node-active', this.locateViewNodeActive);
 		},
 		destroyed() {
 			events.$off('locate-view-node', this.locateViewNode);
@@ -123,6 +124,13 @@
 				this.$refs.tree.setCurrentKey(node.uuid);
 				this.expandedKeys = [node.uuid];
 			},
+			locateViewNodeActive(node) {
+				this.$refs.tree.setCurrentKey(node.uuid);
+				this.expandedKeys = [node.uuid];
+				let data=this.$refs.tree.getCurrentNode()
+				let nodeDom=this.$refs.tree.getNode(data)
+				this.$store.dispatch('activeComponent', {data, node:nodeDom});
+			},
 			updateFilter() {
 				if (this.$refs.tree) {
 					this.$refs.tree.filter(this.filterText);
@@ -219,7 +227,7 @@
 			 * 点击左侧视图列表
 			 */
 			handleNodeClick(data, node) {
-        console.log('handleNodeClick');
+        console.log('handleNodeClick',data,node);
         
 				this.$store.dispatch('activeComponent', {data, node});
 			},

src/views/Editor/components/drawCanvasPanel.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="zero-draw-panel-container" >
     <div class="zero-components-container"  >
-      <views-canvas-tree :views="views"></views-canvas-tree>
+      <views-canvas-tree :views="views" ></views-canvas-tree>
       <div class="playground-wrapper">
         <runtime-layer ref="runtimeLayer"
                       :design-width="parseInt(options.designWidth)"
@@ -11,7 +11,7 @@
                       @launched="onRuntimeLayerLaunched"
                       @select-node="onSelectNode"
         />
-        <div class="touch-layer" @click="onClickTouchLayer"></div>
+        <!-- <div class="touch-layer" @click="onClickTouchLayer"></div> -->
       </div>
     </div>
   </div>
@@ -76,21 +76,33 @@
         },
         getNode() {
           this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
+          console.log(this.targetNode.name,this.targetNode)
+          events.$emit('locate-view-node-active', this.targetNode);
         },
-        onModifyProp(key, value) {
+        onModifyProp(key,value,data) {
+          console.log(data.activeComponent.name,this.targetNode.name,this.nodePath)
+          if(data.activeComponent.uuid==this.targetNode.uuid){
+            console.log()
                 this.$refs.runtimeLayer.modifyProps(this.nodePath, {
                   [key]: value,
                 }, () => {
                   this.getNode();
                 })              
+          }
         },
         onClickTouchLayer(e){
-         
-          const {offsetX: x, offsetY: y} = e;
+          const {x,y} = e;
            console.log("sdsd",x/this.zoom,y/this.zoom)
           this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom});
           console.log(this.nodePath)
-          console.log(this.targetNode)
+        },
+        canvasKeyVupdate(data){
+            console.log(10,data)
+            
+            for(let item in data.props){
+              console.log(item)
+              this.onModifyProp(item, data.props[item],data)
+            }
         }
     },
     computed: {
@@ -103,6 +115,9 @@
       events.$on("setPlaygroundZoom", data => {
         this.zoom=data.zoom;
       });
+      events.$on("onClickTouchLayer",this.onClickTouchLayer);
+
+      events.$on('canvasKeyVupdate', this.canvasKeyVupdate);
     },
     watch: {
         nodePath() {
@@ -177,48 +192,9 @@
 </style>
 
 <style lang="scss">
-	* {
-		padding: 0;
-		margin: 0;
-	}
-
-	html, body, #app {
-		width: 100%;
-		height: 100%;
-	}
-
-	input {
-		width: 100px;
-	}
-
-	.operate-bar {
-		padding: 5px;
-		margin-bottom: 5px;
-
-		.line {
-			padding: 3px;
-			display: flex;
-			flex-wrap: wrap;
-		}
-
-		.line + .line {
-			border-top: 1px solid lightgray;
-		}
-	}
-
 	.playground-wrapper {
 		position: relative;
 		display: inline-block;
-		margin-left: 10px;
-	}
-
-	.touch-layer {
-		background-color: rgba(0, 0, 0, 0);
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
 	}
 
 </style>

src/views/Editor/components/editControlView.vue

@@ -235,6 +235,7 @@ export default {
       }
     },
     modifyPropertiesCon() {
+    //  events.$emit('canvasKeyVupdate', {properties:this.activeComponent.properties});
       if (this.editEvent == "bottomright") {
         this.$store.dispatch("modifyProperties", {
           width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
@@ -322,9 +323,6 @@ export default {
       if (!this.activeComponent) {
         return {};
       }
-      console.log( this.styleCatch);
-      
-
       let result={
         width: `${ this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0)}px`,
         height: `${ this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0)}px`,

src/views/Editor/components/viewsCanvasTree.vue

 <template>
   <div class="views-tree">
-    
     <custom-node v-for="view in views" :key="view.uuid" :view="view" :custom-style="styleObject(view)" :properties="view.properties">
       <template v-if="view.children">
         <views-tree :views="view.children"></views-tree>
@@ -33,6 +32,7 @@
 </template>
 
 <script>
+import events from "@/global-events.js"
 import { mapState, mapGetters } from 'vuex';
 import { styles } from '../../../utils/common';
 import customNode from '../../../components/customElement/node/index.vue';
@@ -161,4 +161,8 @@ export default {
 </script>
 
 <style>
+.views-tree{
+  position: absolute;
+  z-index: 99;
+}
 </style>