--

src/store/modules/project.js

@@ -688,13 +688,16 @@ export const projectStore = {
 		 */
 		activeComponent(context, data) {
 			// debugger;
+			
 			let getTopView = node => {
+				console.log("node",node)
 				if (node.parent && !node.parent.parent) {
 					return node;
 				} else {
 					return getTopView(node.parent);
 				}
 			};
+			console.log("data.node",data.node)
 			let _view = getTopView(data.node);
 			if (!data.fromPlayground) {
 				// 点击视图区域选中节点

src/views/Editor/Playground.vue

@@ -2,7 +2,7 @@
 	<pane icon="el-icon-s-open" class="pane-playground" :title="$t('panes.Playground')">
 		<div class="zero-playground-body-center">
 			<!-- <div class="zero-playground-draw-panel"> -->
-				<draw-panel></draw-panel>
+				<draw-canvas-panel></draw-canvas-panel>
 			<!-- </div> -->
 		</div>
 	</pane>
@@ -11,9 +11,10 @@
 <script>
 import Pane from '../../components/Pane';
 import DrawPanel from './components/drawPanel';
+import DrawCanvasPanel from './components/drawCanvasPanel';
 export default {
   name: 'Playground',
-  components: { Pane, DrawPanel }
+  components: { Pane, DrawPanel,DrawCanvasPanel}
 };
 </script>
 

src/views/Editor/components/drawCanvasPanel.vue

+
+<template>
+  <div class="zero-draw-panel-container" >
+    <div class="zero-components-container" >
+      <views-canvas-tree :views="views"></views-canvas-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import viewsCanvasTree from './viewsCanvasTree';
+
+export default {
+  components: { viewsCanvasTree },
+  methods: {
+    
+  },
+  computed: {
+    ...mapGetters(['views']),
+  }
+};
+</script>
+
+<style lang="scss">
+.db-draggable {
+  position: absolute;
+  box-sizing: border-box;
+  &.active {
+    border: 1px dashed black;
+  }
+}
+.handle {
+  box-sizing: border-box;
+  display: none;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  font-size: 1px;
+  background: #eee;
+  border: 1px solid #333;
+}
+.handle-tl {
+  top: -10px;
+  left: -10px;
+  cursor: nw-resize;
+}
+.handle-tm {
+  top: -10px;
+  left: 50%;
+  margin-left: -5px;
+  cursor: n-resize;
+}
+.handle-tr {
+  top: -10px;
+  right: -10px;
+  cursor: ne-resize;
+}
+.handle-ml {
+  top: 50%;
+  margin-top: -5px;
+  left: -10px;
+  cursor: w-resize;
+}
+.handle-mr {
+  top: 50%;
+  margin-top: -5px;
+  right: -10px;
+  cursor: e-resize;
+}
+.handle-bl {
+  bottom: -10px;
+  left: -10px;
+  cursor: sw-resize;
+}
+.handle-bm {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -5px;
+  cursor: s-resize;
+}
+.handle-br {
+  bottom: -10px;
+  right: -10px;
+  cursor: se-resize;
+}
+</style>

src/views/Editor/components/editControlView.vue

+
+<template>
+  <div class="edit-control-view">
+    <div class="edit-con-body" :style="styleEdit"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  props: {
+    views: {
+      type: Array,
+      default: []
+    },
+    activeComponent: {}
+  },
+  components: {},
+  methods: {
+    test() {
+      console.log("打印一下");
+    }
+  },
+  computed: {
+    position() {
+      let result={}
+      result.x=this.activeComponent.properties.x;
+      result.y=this.activeComponent.properties.y;
+      return result;
+    },
+    styleEdit() {
+      if(!this.activeComponent){
+          return{}
+      }
+      return{ 
+        width: `${this.activeComponent.properties.width}px`,
+        height: `${this.activeComponent.properties.height}px`,
+        marginTop:`${this.activeComponent.properties.y}px`,
+        marginLeft:`${this.activeComponent.properties.x}px`,
+      }
+    }
+  },
+  watch: {
+    views: function(newVal) {
+      //console.log(newVal);
+    },
+    activeComponent: function(newVal) {
+      console.log(newVal.name);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.edit-control-view {
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;;
+  height: 100%;
+  background: rgba(255,0,0,0.01);
+}
+.edit-con-body {
+  // background: rgba(0,0,255,0.3);
+  border: 1px solid red;
+  //position: absolute;
+}
+</style>
\ No newline at end of file

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>
+      </template>
+    </custom-node>
+     <edit-control-view  
+    :views="views" 
+    :activeComponent="activeComponent"
+    v-if="hasDrag"
+
+    ></edit-control-view>
+    <!-- <vue-draggable-resizable
+      v-if="hasDrag"
+      :prevent-deactivation="true"
+      class-name="db-draggable"
+      :min-width="1"
+      :min-height="1"
+      :z="2"
+      :active="true"
+      :style="dragStyleObject"
+      v-bind="position"
+      @dragging="handleDragging"
+      @dragstop="handleDragStop"
+      @resizing="handleResize"
+      @resizestop="handleResizeStop"
+      @deactivated="handleDeactivated"
+      >
+    </vue-draggable-resizable> -->
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex';
+import { styles } from '../../../utils/common';
+import customNode from '../../../components/customElement/node/index.vue';
+import properties from '../../../utils/properties';
+import VueDraggableResizable from 'vue-draggable-resizable';
+import EditControlView from './editControlView';
+
+export default {
+  name: 'viewsTree',
+  props: {
+    views: {
+      type: Array,
+      default: []
+    }
+  },
+  components: {
+    VueDraggableResizable,
+    EditControlView,
+    'custom-node': customNode
+  },
+  computed: {
+    ...mapState(['project']),
+    ...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList', 'activeComponentId']),
+    active() {
+      
+      return !!this.activeComponentId;
+    },
+    dragStyleObject() {
+      return styles.getComponentStyle(this.activeComponentCopy, this.project, this.componentList, true);
+    },
+    position() {
+      let _props = 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,
+      };
+      
+       console.log('view.children', this.views);
+       console.log('####position', result);
+
+      return result;
+    },
+    hasDrag() {
+      let _ids = this.views.map(v => v.uuid);
+      // console.log('_ids', _ids);
+      // console.log('activeComponentId', this.activeComponentId, _ids.indexOf(this.activeComponentId));
+      return this.activeComponentId && _ids.indexOf(this.activeComponentId) > -1 ? true : false;
+    }
+  },
+  methods: {
+    styleObject(view) {
+      let result = '';
+      if (view.uuid === this.activeComponentCopy.uuid) {
+        result = styles.getComponentStyle(this.activeComponentCopy, this.project, this.componentList);
+      } else {
+        result = styles.getComponentStyle(view, this.project, this.componentList);
+      }
+      return result;
+    },
+    handleDeactivated() {
+      // this.$store.dispatch('changeEditaleStatus', false);
+    },
+    handleResize(x, y, w, h) {
+      if (!this.active || !this.activeComponentId) {
+        return false;
+      }
+      let _prop = this.activeComponentCopy.properties;
+
+      if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
+        this.$store.dispatch('modifyCopyProperties', {
+          x: x,
+          y: y,
+          width: w,
+          height: h
+        });
+      }
+    },
+
+    handleDragging(x, y) {
+      if (!this.active || !this.activeComponentId) {
+        return false;
+      }
+      let _prop = this.activeComponentCopy.properties;
+
+      if (_prop.x !== x || _prop.y !== y) {
+        this.$store.dispatch('modifyCopyProperties', {
+          x: x,
+          y: y
+        });
+      }
+    },
+    handleResizeStop(x, y, w, h) {
+      if (!this.active || !this.activeComponentId) {
+        return false;
+      }
+      let _prop = this.activeComponent.properties;
+
+      if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
+        this.$store.dispatch('modifyProperties', {
+          x: x,
+          y: y,
+          width: w,
+          height: h
+        });
+      }
+    },
+    handleDragStop(x, y) {
+      if (!this.active || !this.activeComponentId) {
+        return false;
+      }
+      let _prop = this.activeComponent.properties;
+
+      if (_prop.x !== x || _prop.y !== y) {
+        this.$store.dispatch('modifyProperties', {
+          x: x,
+          y: y
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style>
+</style>