From d7a9fc0e28f785a69d9d44f47b9cfdec678620e2 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 1 May 2022 14:33:29 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=94=BB=E5=B8=83=E6=A0=87=E5=B0=BA?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/Canvas/Ruler.vue | 44 ++++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/views/Editor/Canvas/Ruler.vue b/src/views/Editor/Canvas/Ruler.vue
index 9231ed7f..00f994ae 100644
--- a/src/views/Editor/Canvas/Ruler.vue
+++ b/src/views/Editor/Canvas/Ruler.vue
@@ -7,7 +7,14 @@
         left: viewportStyles.left + 'px',
       }"
     >
-      <div class="ruler-mark-100" v-for="mark in 10" :key="`mark-100-${mark}`">{{mark * 100}}</div>
+      <div 
+        class="ruler-marker-100" 
+        :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
+        v-for="marker in 10" 
+        :key="`marker-100-${marker}`"
+      >
+        <span>{{marker * 100}}</span>
+      </div>
     </div>
     <div 
       class="v"
@@ -17,11 +24,14 @@
       }"
     >
       <div 
-        class="ruler-mark-100" 
-        v-for="mark in 10" 
-        :key="mark" 
-        :style="{ height: markSize + 'px' }"
-      >{{mark * 100}}</div>
+        class="ruler-marker-100" 
+        :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
+        v-for="marker in 10" 
+        :key="marker" 
+        :style="{ height: markerSize + 'px' }"
+      >
+        <span>{{marker * 100}}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -48,13 +58,13 @@ export default defineComponent({
   setup(props) {
     const { canvasScale } = storeToRefs(useMainStore())
 
-    const markSize = computed(() => {
+    const markerSize = computed(() => {
       return props.viewportStyles.width * canvasScale.value / 10
     })
 
     return {
       canvasScale,
-      markSize,
+      markerSize,
     }
   },
 })
@@ -75,7 +85,7 @@ export default defineComponent({
   justify-content: space-between;
   align-items: center;
 
-  .ruler-mark-100 {
+  .ruler-marker-100 {
     height: 100%;
     line-height: 20px;
     text-align: right;
@@ -83,6 +93,13 @@ export default defineComponent({
     padding-right: 5px;
     position: relative;
 
+    &.hide span {
+      display: none;
+    }
+    &.omit::before {
+      display: none;
+    }
+
     &:not(:last-child)::after {
       content: '';
       width: .1px;
@@ -111,7 +128,7 @@ export default defineComponent({
   left: 5px;
   overflow: hidden;
 
-  .ruler-mark-100 {
+  .ruler-marker-100 {
     width: 100%;
     line-height: 20px;
     text-align: right;
@@ -119,6 +136,13 @@ export default defineComponent({
     position: relative;
     writing-mode: vertical-rl;
 
+    &.hide span {
+      display: none;
+    }
+    &.omit::before {
+      display: none;
+    }
+
     &:not(:last-child)::after {
       content: '';
       height: .1px;