From ded04bf83737ba8dd939fe338f71e799af204cfe Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Fri, 25 Dec 2020 13:02:44 +0800
Subject: [PATCH] update

---
 src/views/Editor/Canvas/AlignmentLine.vue | 47 ++++++++++++++++-------
 src/views/Editor/Canvas/index.vue         | 14 ++++---
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/views/Editor/Canvas/AlignmentLine.vue b/src/views/Editor/Canvas/AlignmentLine.vue
index 06582b29..deee9ec8 100644
--- a/src/views/Editor/Canvas/AlignmentLine.vue
+++ b/src/views/Editor/Canvas/AlignmentLine.vue
@@ -1,23 +1,16 @@
 <template>
-  <div 
-    class="alignment-line"
-    :style="{
-      left: axis.x + 'px',
-      top: axis.y + 'px',
-    }"
-  >
-    <div 
-      :class="['line', type]" 
-      :style="type === 'vertical' ? { height: length + 'px' } : { width: length + 'px' }"
-    ></div>
+  <div class="alignment-line" :style="{ left, top }">
+    <div :class="['line', type]" :style="sizeStyle"></div>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { computed, PropType, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+import { State } from '@/store'
 import { AlignmentLineAxis } from '@/types/edit'
 
-export default {
+export default defineComponent({
   name: 'alignment-line',
   props: {
     type: {
@@ -32,8 +25,34 @@ export default {
       type: Number,
       required: true,
     },
+    offsetX: {
+      type: Number,
+      required: true,
+    },
+    offsetY: {
+      type: Number,
+      required: true,
+    },
   },
-}
+  setup(props) {
+    const store = useStore<State>()
+    const canvasScale = computed(() => store.state.canvasScale)
+
+    const left = computed(() => props.axis.x * canvasScale.value + props.offsetX + 'px')
+    const top = computed(() => props.axis.y * canvasScale.value + props.offsetY + 'px')
+
+    const sizeStyle = computed(() => {
+      if(props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
+      return { width: props.length * canvasScale.value + 'px' }
+    })
+
+    return {
+      left,
+      top,
+      sizeStyle,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index d5c8f8f9..1cad7d10 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -7,6 +7,15 @@
     v-contextmenu="contextmenus"
     v-click-outside="removeEditorAreaFocus"
   >
+    <AlignmentLine 
+      v-for="(line, index) in alignmentLines" 
+      :key="index" 
+      :type="line.type" 
+      :axis="line.axis" 
+      :length="line.length"
+      :offsetX="viewportStyles.left"
+      :offsetY="viewportStyles.top"
+    />
     <div 
       class="viewport" 
       ref="viewportRef"
@@ -27,11 +36,6 @@
         :quadrant="mouseSelectionState.quadrant"
       />
 
-      <AlignmentLine 
-        v-for="(line, index) in alignmentLines" :key="index" 
-        :type="line.type" :axis="line.axis" :length="line.length"
-      />
-
       <MultiSelectOperate 
         v-if="activeElementIdList.length > 1"
         :elementList="elementList"