From 7058c97b9814ebbb0076259cfd51619fb1b10b93 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 23 Jun 2024 23:41:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BD=93=E5=89=8D=E7=82=B9=E5=87=BB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=88=BB=E5=BA=A6=E5=B0=BA=E5=AE=9A=E4=BD=8D=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/custom-component/common/DeRuler.vue   | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/core/core-frontend/src/custom-component/common/DeRuler.vue b/core/core-frontend/src/custom-component/common/DeRuler.vue
index 0624526f2f..a12441b9ae 100644
--- a/core/core-frontend/src/custom-component/common/DeRuler.vue
+++ b/core/core-frontend/src/custom-component/common/DeRuler.vue
@@ -21,12 +21,43 @@ const props = defineProps({
 
 const labelInterval = 5
 
-const { canvasStyleData } = storeToRefs(dvMainStore)
+const { canvasStyleData, curComponent } = storeToRefs(dvMainStore)
 
 const rulerSize = computed(() =>
   props.direction === 'horizontal' ? canvasStyleData.value.width : canvasStyleData.value.height
 )
 
+const curComponentSize = computed(() => {
+  if (curComponent.value) {
+    return (
+      ((props.direction === 'horizontal'
+        ? curComponent.value.style.width
+        : curComponent.value.style.height) *
+        canvasStyleData.value.scale) /
+      100
+    )
+  } else {
+    return 0
+  }
+})
+
+const curComponentShadow = computed(() => {
+  if (curComponent.value) {
+    return {
+      left:
+        (props.direction === 'horizontal'
+          ? curComponent.value.style.left
+          : curComponent.value.style.top) + 'px',
+      width:
+        (props.direction === 'horizontal'
+          ? curComponent.value.style.width
+          : curComponent.value.style.height) + 'px'
+    }
+  } else {
+    return {}
+  }
+})
+
 const ticks = computed(() => {
   const result = []
   let currentValue = 0
@@ -84,6 +115,7 @@ defineExpose({
     <div class="ruler-shadow" :style="outerStyle"></div>
     <div :style="wStyle" class="ruler-outer-scroll">
       <div class="ruler" :style="{ width: `${scaleWidth}px` }">
+        <div v-if="curComponent" :style="curComponentShadow" class="cur-shadow"></div>
         <div class="ruler-line" :style="{ width: `${scaleWidth}px` }"></div>
         <div
           v-for="(tick, index) in ticks"
@@ -178,4 +210,10 @@ defineExpose({
   transform: translateX(2%);
   white-space: nowrap;
 }
+
+.cur-shadow {
+  background: rgba(10, 123, 224, 0.3);
+  height: 30px;
+  position: absolute;
+}
 </style>