perf: 标尺功能优化

src/views/Editor/Canvas/Ruler.vue

@@ -13,8 +13,16 @@
         v-for="marker in 20" 
         :key="`marker-100-${marker}`"
       >
-        <span>{{marker}}</span>
+        <span>{{ marker * 100 }}</span>
       </div>
+
+      <div class="range" 
+        v-if="elementListRange"
+        :style="{
+          left: elementListRange.minX * canvasScale + 'px',
+          width: (elementListRange.maxX - elementListRange.minX) * canvasScale + 'px',
+        }"
+      ></div>
     </div>
     <div 
       class="v"
@@ -30,16 +38,26 @@
         :key="marker" 
         :style="{ height: markerSize + 'px' }"
       >
-        <span>{{marker}}</span>
+        <span>{{ marker * 100 }}</span>
       </div>
+
+      <div class="range" 
+        v-if="elementListRange"
+        :style="{
+          top: elementListRange.minY * canvasScale + 'px',
+          height: (elementListRange.maxY - elementListRange.minY) * canvasScale + 'px',
+        }"
+      ></div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { watchEffect, computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
+import { getElementListRange } from '@/utils/element'
+import type { PPTElement } from '@/types/slides'
 
 interface ViewportStyles {
   top: number
@@ -50,9 +68,18 @@ interface ViewportStyles {
 
 const props = defineProps<{
   viewportStyles: ViewportStyles
+  elementList: PPTElement[]
 }>()
 
-const { canvasScale } = storeToRefs(useMainStore())
+const { canvasScale, activeElementIdList } = storeToRefs(useMainStore())
+
+const elementListRange = ref<null | ReturnType<typeof getElementListRange>>(null)
+
+watchEffect(() => {
+  const els = props.elementList.filter(el => activeElementIdList.value.includes(el.id))
+  if (!els.length) return elementListRange.value = null
+  elementListRange.value = getElementListRange(els)
+})
 
 const markerSize = computed(() => {
   return props.viewportStyles.width * canvasScale.value / 10
@@ -75,6 +102,13 @@ const markerSize = computed(() => {
   align-items: center;
   overflow: hidden;
 
+  .range {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: rgba($color: $themeColor, $alpha: .1);
+  }
+
   .ruler-marker-100 {
     height: 100%;
     width: 10%;
@@ -119,6 +153,13 @@ const markerSize = computed(() => {
   left: 5px;
   overflow: hidden;
 
+  .range {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: rgba($color: $themeColor, $alpha: .1);
+  }
+
   .ruler-marker-100 {
     width: 100%;
     line-height: 20px;

src/views/Editor/Canvas/index.vue

@@ -85,7 +85,7 @@
 
     <div class="drag-mask" v-if="spaceKeyState"></div>
 
-    <Ruler :viewportStyles="viewportStyles" v-if="showRuler" />
+    <Ruler :viewportStyles="viewportStyles" :elementList="elementList" v-if="showRuler" />
 
     <Modal
       v-model:visible="linkDialogVisible"