From 4d3ae2a0a5894b554848735051ebacd299f41a35 Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Sun, 30 Jun 2024 16:10:08 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=A0=87=E5=B0=BA=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=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 | 49 ++++++++++++++++++++++++++++---
 src/views/Editor/Canvas/index.vue |  2 +-
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/views/Editor/Canvas/Ruler.vue b/src/views/Editor/Canvas/Ruler.vue
index 3d7b636c..33b9848a 100644
--- a/src/views/Editor/Canvas/Ruler.vue
+++ b/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;
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 5a760e0f..08906c85 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/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"