refactor: 画布优化

frontend/src/components/DeDrag/drag.js

@@ -671,7 +671,7 @@ export default {
   methods: {
     removeItem: removeItem,
     startResize(e, item, index) {
-      console.log('startResize:' + index)
+      // console.log('startResize:' + index)
       if (!this.resizable) return
       this.resizeStart.call(null, e, item, index)
 
@@ -688,7 +688,7 @@ export default {
       this.infoBox.resizeItemIndex = index
     },
     containerMouseDown(e) {
-      console.log('containerMouseDown:')
+      // console.log('containerMouseDown:')
 
       // e.preventDefault();
       if (!this.infoBox) {
@@ -699,7 +699,7 @@ export default {
       this.infoBox.startY = e.pageY
     },
     startMove(e, item, index) {
-      console.log('startMove:' + index)
+      // console.log('startMove:' + index)
       const vm = this
       // e.preventDefault();
 
@@ -752,7 +752,7 @@ export default {
         const resizeItem = _.get(infoBox, 'resizeItem')
 
         if (resizeItem) { // 调整大小时
-          console.log('resizeItem')
+          // console.log('resizeItem')
           vm.resizing.call(null, e, resizeItem, resizeItem._dragId)
 
           vm.$set(resizeItem, 'isPlayer', true)
@@ -793,7 +793,7 @@ export default {
             height: nowHeight
           })
         } else if (moveItem) {
-          console.log('moveItem')
+          // console.log('moveItem')
 
           scrollScreen(e)
           if (!vm.draggable) return
@@ -886,7 +886,7 @@ export default {
       }
     },
     getList() {
-      console.log('getList:')
+      // console.log('getList:')
 
       const returnList = _.sortBy(_.cloneDeep(this.yourList), 'y')
       const finalList = []
@@ -904,7 +904,7 @@ export default {
          * @returns
          */
     getMaxCell() {
-      console.log('getMaxCell:')
+      // console.log('getMaxCell:')
 
       return this.maxCell
     },
@@ -914,7 +914,7 @@ export default {
          * @returns
          */
     getRenderState() {
-      console.log('getRenderState:')
+      // console.log('getRenderState:')
 
       return this.moveAnimate
     },

frontend/src/components/DeDrag/drag.vue

@@ -709,7 +709,7 @@ export default {
   methods: {
     removeItem: removeItem,
     startResize(e, item, index) {
-      console.log('startResize:' + index)
+      // console.log('startResize:' + index)
       if (!this.resizable) return
       this.resizeStart.call(null, e, item, index)
 
@@ -737,7 +737,7 @@ export default {
       this.infoBox.startY = e.pageY
     },
     startMove(e, item, index) {
-      console.log('startMove:' + index)
+      // console.log('startMove:' + index)
       const vm = this
       // e.preventDefault();
 
@@ -790,7 +790,7 @@ export default {
         const resizeItem = _.get(infoBox, 'resizeItem')
 
         if (resizeItem) { // 调整大小时
-          console.log('resizeItem')
+          // console.log('resizeItem')
           vm.resizing.call(null, e, resizeItem, resizeItem._dragId)
 
           vm.$set(resizeItem, 'isPlayer', true)
@@ -831,7 +831,7 @@ export default {
             height: nowHeight
           })
         } else if (moveItem) {
-          console.log('moveItem')
+          // console.log('moveItem')
 
           scrollScreen(e)
           if (!vm.draggable) return
@@ -922,11 +922,11 @@ export default {
         left: (this.cellWidth * (item.x - 1) + this.baseMarginLeft) + 'px',
         top: (this.cellHeight * (item.y - 1) + this.baseMarginTop) + 'px'
       }
-      console.log('nowItemStyle:' + JSON.stringify(style))
+      // console.log('nowItemStyle:' + JSON.stringify(style))
       return style
     },
     getList() {
-      console.log('getList:')
+      // console.log('getList:')
 
       const returnList = _.sortBy(_.cloneDeep(this.yourList), 'y')
       const finalList = []
@@ -944,7 +944,7 @@ export default {
        * @returns
        */
     getMaxCell() {
-      console.log('getMaxCell:')
+      // console.log('getMaxCell:')
 
       return this.maxCell
     },
@@ -954,7 +954,7 @@ export default {
        * @returns
        */
     getRenderState() {
-      console.log('getRenderState:')
+      // console.log('getRenderState:')
 
       return this.moveAnimate
     },

frontend/src/components/DeDrag/index.vue

@@ -21,7 +21,7 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
-    <edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem"  @amAddItem="amAddItem"/>
     <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
     <div
       v-for="(handlei, indexi) in actualHandles"
@@ -596,7 +596,7 @@ export default {
       this.maxH = val
     },
     w(val) {
-      console.log('changeWidthCK：' + this.resizing)
+      // console.log('changeWidthCK：' + this.resizing)
 
       if (this.resizing || this.dragging) {
         return
@@ -1229,7 +1229,7 @@ export default {
       this.lastMouseY = mouseY
       if (this.resizing) {
         this.resizing = false
-        console.log('resizing2:' + this.resizing)
+        // console.log('resizing2:' + this.resizing)
         this.conflictCheck()
         this.$emit('refLineParams', refLine)
         // this.$emit('resizestop', this.left, this.top, this.width, this.height)
@@ -1672,6 +1672,12 @@ export default {
     },
     showViewDetails() {
       this.$emit('showViewDetails')
+    },
+    amAddItem() {
+      this.$emit('amAddItem')
+    },
+    amRemoveItem() {
+      this.$emit('amRemoveItem')
     }
   }
 

frontend/src/components/DeDrag/shadow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="z-index:-1" :style="styleInfo">
+  <div class="main-shadow" style="z-index:-1" :style="styleInfo">
     <!--    {{ curComponent }}-->
   </div>
 </template>
@@ -20,7 +20,7 @@ export default {
       let height = 0
       // if (this.dragComponentInfo && !this.dragComponentInfo.auxiliaryMatrix) {
       if (this.dragComponentInfo) {
-        console.log('shadowDrag=')
+        // console.log('shadowDrag=')
         // 组件移入
         if (this.dragComponentInfo.auxiliaryMatrix) {
           left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth
@@ -109,5 +109,8 @@ export default {
 }
 </script>
 <style scoped>
+  .main-shadow{
+    /*transition: 0.2s;*/
+  }
 
 </style>

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -6,7 +6,7 @@
       <!--      <i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />-->
     </div>
     <div v-else-if="!linkageSettingStatus">
-      <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
+      <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem">
         <span slot="icon" :title="$t('panel.setting')">
           <i class="icon iconfont icon-shezhi" style="margin-top:2px" />
         </span>
@@ -26,9 +26,9 @@
       <span :title="$t('panel.cancel_linkage')">
         <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
       </span>
-<!--      <spa>-->
+      <!--      <spa>-->
-<!--        {{ curComponent.x }}-{{ curComponent.y }}&#45;&#45;{{ curComponent.sizex }}-{{ curComponent.sizey }}-->
+      <!--        {{ curComponent.x }}-{{ curComponent.y }}&#45;&#45;{{ curComponent.sizex }}-{{ curComponent.sizey }}-->
-<!--      </spa>-->
+      <!--      </spa>-->
     </div>
 
   </div>
@@ -131,12 +131,14 @@ export default {
         this.curComponent.style.width = this.curComponent.sizex * this.curCanvasScale.matrixStyleOriginWidth
         this.curComponent.style.height = this.curComponent.sizey * this.curCanvasScale.matrixStyleOriginHeight
         this.curComponent.auxiliaryMatrix = false
+        this.$emit('amRemoveItem')
       } else {
         this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1
         this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
         this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
         this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
         this.curComponent.auxiliaryMatrix = true
+        this.$emit('amAddItem')
       }
       this.$store.state.styleChangeTimes++
       bus.$emit('auxiliaryMatrixChange')
@@ -162,6 +164,9 @@ export default {
     },
     linkageEdit() {
 
+    },
+    amRemoveItem() {
+      this.$emit('amRemoveItem')
     },
     // 清除相同sourceViewId 的 联动条件
     clearLinkage() {

frontend/src/components/canvas/components/Editor/SettingMenu.vue

@@ -91,6 +91,7 @@ export default {
     },
 
     deleteComponent() {
+      this.$emit('amRemoveItem')
       this.deleteCurCondition()
       this.$store.commit('deleteComponent')
       this.$store.commit('recordSnapshot', 'deleteComponent')

frontend/src/components/canvas/components/Editor/index.vue

@@ -51,6 +51,8 @@
       @onDragging="onDragging"
       @onResizing="onResizing"
       @elementMouseDown="containerMouseDown"
+      @amRemoveItem="removeItem(item._dragId)"
+      @amAddItme="addItemBox(item)"
     >
       <!--      <span style="position:relative;left: 0px;top:0px">-->
       <!--        item:x-{{ item.x }}y-{{ item.y }}top-{{ item.style.top }}-->
@@ -221,11 +223,11 @@ function debounce(func, time) {
 
 function scrollScreen(e) {
   if (e.clientY + 50 >= window.innerHeight) {
-    console.log('scrollScreen+')
+    // console.log('scrollScreen+')
     const body = $(document.body)
     body.scrollTop(body.scrollTop() + 20)
   } else if (e.clientY <= 150) {
-    console.log('scrollScreen-')
+    // console.log('scrollScreen-')
     const body = $(document.body)
     body.scrollTop(body.scrollTop() - 20)
   }
@@ -288,7 +290,7 @@ function fillPositionBox(maxY) {
   }
 
   itemMaxY = maxY
-  console.log('height:' + ((itemMaxY) * this.cellHeight) + 'px')
+  // console.log('height:' + ((itemMaxY) * this.cellHeight) + 'px')
   // $(this.$el).css('height', ((itemMaxY) * this.cellHeight) + 'px')
 }
 
@@ -1005,7 +1007,7 @@ export default {
       handler(newVal, oldVla) {
         // console.log('newVal:' + JSON.stringify(newVal) + ';oldVla:' + JSON.stringify(oldVla))
         // 初始化时componentData 加载可能出现慢的情况 此时重新初始化一下matrix
-        if (newVal.length !== this.lastComponentDataLength) {
+        if (this.lastComponentDataLength === 0 && newVal.length > 0) {
           this.lastComponentDataLength = newVal.length
           this.initMatrix()
         }
@@ -1656,6 +1658,7 @@ export default {
       return this.moveAnimate
     },
     addItem: addItem,
+    removeItem: removeItem,
     initMatrix: init,
     afterInitOk(func) {
       const timeid = setInterval(() => {

frontend/src/store/index.js

@@ -115,7 +115,7 @@ const data = {
     // },
 
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
-      console.log('cw:' + curComponent.style.width + ';w:' + width + ';sp:' + curCanvasScale.scalePointWidth)
+      // console.log('cw:' + curComponent.style.width + ';w:' + width + ';sp:' + curCanvasScale.scalePointWidth)
       const ow = curComponent.style.width
       if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
       if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
@@ -123,7 +123,7 @@ const data = {
       if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
       if (rotate || rotate === 0) curComponent.style.rotate = rotate
       // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
-      console.log('setShapeStyle:curComponent' + 'w:' + curComponent.style.width + ';ow:' + ow)
+      // console.log('setShapeStyle:curComponent' + 'w:' + curComponent.style.width + ';ow:' + ow)
     },
 
     setShapeSingleStyle({ curComponent }, { key, value }) {