吸附效果

src/components/yvan-editor/ComponentAdjuster.vue

@@ -399,7 +399,6 @@ export default {
             Math.max(0, (curX - startX) / this.scale + startLeft),
             editorRectInfo.offsetWidth - adjuster.offsetWidth
         )
-
         // 修改当前组件样式
         globalStore().setShapeStyle(pos)
         // 等更新完当前组件的样式并绘制到屏幕后再判断是否需要吸附
@@ -409,7 +408,13 @@ export default {
           // 后面两个参数代表鼠标移动方向
           // curY - startY > 0 true 表示向下移动 false 表示向上移动
           // curX - startX > 0 true 表示向右移动 false 表示向左移动
-          eventBus.emit('move', curY - startY > 0, curX - startX > 0, curX, curY)
+          console.log('curX, curY', curX, curY)
+          eventBus.emit('move', {
+            isDownward: curY - startY > 0,
+            isRightward: curX - startX > 0,
+            curX,
+            curY
+          })
         })
       }
 

src/components/yvan-editor/EditorCoordinate.vue

@@ -1,19 +1,17 @@
 <template>
-  <div v-show="showCoordinate" :style="coordinateStyle" class="roy-editor-coordinate">
+  <div v-show="showCoordinate" :style="coordinateStyle" class="yvan-editor-coordinate">
     {{ left }},{{ top }}
   </div>
 </template>
 
 <script>
+import Big from 'big.js'
 import {mapState} from 'pinia'
-import {globalStore} from "@/store";
+import {globalStore} from "@/store"
 import eventBus from '@/utils/eventBus'
 import commonMixin from '@/mixin/commonMixin'
-import Big from 'big.js'
 
-/**
- * 坐标
- */
+/** 坐标 */
 export default {
   name: 'EditorCoordinate',
   mixins: [commonMixin],
@@ -23,9 +21,6 @@ export default {
     ...mapState(globalStore, {
       curComponent: (state) => state.curComponent
     }),
-    coordinateStyle() {
-      return `left: ${this.x + 10}px; top: ${this.y + 10}px`
-    }
   },
   data() {
     return {
@@ -33,26 +28,33 @@ export default {
       y: 0,
       left: 0,
       top: 0,
+      coordinateStyle: '',
       showCoordinate: false
     }
   },
   methods: {
     initMounted() {
+      this.coordinateStyle = this.getCoordinateStyle()
       // 监听元素移动和不移动的事件
-      eventBus.on('move', (isDownward, isRightward, curX, curY) => {
+      eventBus.on('move', (args) => {
+        const {isDownward, isRightward, curX, curY} = args
         this.showCoordinate = true
         this.x = curX
         this.y = curY
+        this.coordinateStyle = this.getCoordinateStyle()
         this.left = new Big(this.curComponent.style.left).div(new Big(5)).toNumber()
         this.top = new Big(this.curComponent.style.top).div(new Big(5)).toNumber()
       })
-
       eventBus.on('unmove', () => {
         this.showCoordinate = false
       })
+    },
+    getCoordinateStyle() {
+      return `left: ${this.x + 10}px; top: ${this.y + 10}px`;
     }
   },
-  created() {},
+  created() {
+  },
   mounted() {
     this.initMounted()
   },
@@ -60,14 +62,14 @@ export default {
 }
 </script>
 
-<style lang="less">
-.roy-editor-coordinate {
+<style lang="less" scoped>
+.yvan-editor-coordinate {
   height: 14px;
   font-size: 10px;
   line-height: 14px;
   text-align: center;
   padding: 3px 6px;
-  background: var(--roy-color-primary);
+  background: var(--yvan-color-primary);
   color: #ffffff;
   position: fixed;
   border-radius: 2px;

src/components/yvan-editor/EditorLine.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="roy-mark-line">
+  <div class="yvan-mark-line">
     <div
         v-for="line in lines"
         v-show="lineStatus[line] || false"
-        :id="`rot-editor-line-${line}`"
+        :id="`yvan-editor-line-${line}`"
         :key="line"
-        :class="line.includes('x') ? 'roy-mark-line--xline' : 'roy-mark-line--yline'"
-        class="roy-mark-line__line"
+        :class="line.includes('x') ? 'yvan-mark-line--xline' : 'yvan-mark-line--yline'"
+        class="yvan-mark-line__line"
     ></div>
   </div>
 </template>
@@ -44,7 +44,6 @@ export default {
     eventBus.on('move', (isDownward, isRightward) => {
       this.showLineMove(isDownward, isRightward)
     })
-
     eventBus.on('unmove', () => {
       this.hideLine()
     })
@@ -55,7 +54,6 @@ export default {
         this.lineStatus[line] = false
       })
     },
-
     showLineMove(isDownward, isRightward) {
       const components = this.componentData || []
       const curComponentStyle = getComponentRotatedStyle(this.curComponent?.style || {})
@@ -76,14 +74,14 @@ export default {
           top: [
             {
               isNearly: this.isNearly(curComponentStyle.top, top),
-              lineNode: this.$el.querySelector('#rot-editor-line-xt'), // xt
+              lineNode: this.$el.querySelector('#yvan-editor-line-xt'), // xt
               line: 'xt',
               dragShift: top,
               lineShift: top
             },
             {
               isNearly: this.isNearly(curComponentStyle.bottom, top),
-              lineNode: this.$el.querySelector('#rot-editor-line-xt'), // xt
+              lineNode: this.$el.querySelector('#yvan-editor-line-xt'), // xt
               line: 'xt',
               dragShift: top - curComponentStyle.height,
               lineShift: top
@@ -94,21 +92,21 @@ export default {
                   curComponentStyle.top + curComponentHalfHeight,
                   top + componentHalfHeight
               ),
-              lineNode: this.$el.querySelector('#rot-editor-line-xc'), // xc
+              lineNode: this.$el.querySelector('#yvan-editor-line-xc'), // xc
               line: 'xc',
               dragShift: top + componentHalfHeight - curComponentHalfHeight,
               lineShift: top + componentHalfHeight
             },
             {
               isNearly: this.isNearly(curComponentStyle.top, bottom),
-              lineNode: this.$el.querySelector('#rot-editor-line-xb'), // xb
+              lineNode: this.$el.querySelector('#yvan-editor-line-xb'), // xb
               line: 'xb',
               dragShift: bottom,
               lineShift: bottom
             },
             {
               isNearly: this.isNearly(curComponentStyle.bottom, bottom),
-              lineNode: this.$el.querySelector('#rot-editor-line-xb'), // xb
+              lineNode: this.$el.querySelector('#yvan-editor-line-xb'), // xb
               line: 'xb',
               dragShift: bottom - curComponentStyle.height,
               lineShift: bottom
@@ -117,14 +115,14 @@ export default {
           left: [
             {
               isNearly: this.isNearly(curComponentStyle.left, left),
-              lineNode: this.$el.querySelector('#rot-editor-line-yl'), // yl
+              lineNode: this.$el.querySelector('#yvan-editor-line-yl'), // yl
               line: 'yl',
               dragShift: left,
               lineShift: left
             },
             {
               isNearly: this.isNearly(curComponentStyle.right, left),
-              lineNode: this.$el.querySelector('#rot-editor-line-yl'), // yl
+              lineNode: this.$el.querySelector('#yvan-editor-line-yl'), // yl
               line: 'yl',
               dragShift: left - curComponentStyle.width,
               lineShift: left
@@ -135,21 +133,21 @@ export default {
                   curComponentStyle.left + curComponentHalfWidth,
                   left + componentHalfWidth
               ),
-              lineNode: this.$el.querySelector('#rot-editor-line-yc'), // yc
+              lineNode: this.$el.querySelector('#yvan-editor-line-yc'), // yc
               line: 'yc',
               dragShift: left + componentHalfWidth - curComponentHalfWidth,
               lineShift: left + componentHalfWidth
             },
             {
               isNearly: this.isNearly(curComponentStyle.left, right),
-              lineNode: this.$el.querySelector('#rot-editor-line-yr'), // yr
+              lineNode: this.$el.querySelector('#yvan-editor-line-yr'), // yr
               line: 'yr',
               dragShift: right,
               lineShift: right
             },
             {
               isNearly: this.isNearly(curComponentStyle.right, right),
-              lineNode: this.$el.querySelector('#rot-editor-line-yr'), // yr
+              lineNode: this.$el.querySelector('#yvan-editor-line-yr'), // yr
               line: 'yr',
               dragShift: right - curComponentStyle.width,
               lineShift: right
@@ -185,16 +183,13 @@ export default {
         }
       })
     },
-
     translatecurComponentShift(key, condition, curComponentStyle) {
       const {width, height} = this.curComponent.style
       if (key === 'top') {
         return Math.round(condition.dragShift - (height - curComponentStyle.height) / 2)
       }
-
       return Math.round(condition.dragShift - (width - curComponentStyle.width) / 2)
     },
-
     chooseTheTureLine(needToShow, isDownward, isRightward) {
       // 如果鼠标向右移动 则按从右到左的顺序显示竖线 否则按相反顺序显示
       // 如果鼠标向下移动 则按从下到上的顺序显示横线 否则按相反顺序显示
@@ -216,7 +211,6 @@ export default {
           this.lineStatus.yr = true
         }
       }
-
       if (isDownward) {
         if (needToShow.includes('xb')) {
           this.lineStatus.xb = true
@@ -236,7 +230,6 @@ export default {
         }
       }
     },
-
     isNearly(dragValue, targetValue) {
       return Math.abs(dragValue - targetValue) <= this.diff
     }
@@ -245,22 +238,22 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.roy-mark-line {
+.yvan-mark-line {
   height: 100%;
 }
 
-.roy-mark-line__line {
-  background: var(--roy-color-primary);
+.yvan-mark-line__line {
+  background: var(--yvan-color-primary);
   position: absolute;
   z-index: 1000;
 }
 
-.roy-mark-line--xline {
+.yvan-mark-line--xline {
   width: 100%;
   height: 0.5px;
 }
 
-.roy-mark-line--yline {
+.yvan-mark-line--yline {
   width: 0.5px;
   height: 100%;
 }