From 23b039a6a5bb9a18eafe17f33e4538c2562cf77d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 16 Oct 2024 17:44:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E8=B7=91=E9=A9=AC=E7=81=AF=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=A6=96=E4=BD=8D=E8=A1=94=E6=8E=A5=E6=BB=9A=E5=8A=A8=20#10197?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  |  3 ++
 .../canvas/ComponentWrapper.vue               |  2 ++
 .../scroll-text/Component.vue                 | 28 +++++++++++--------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 277690323a..c79a90e21b 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -1586,6 +1586,7 @@ defineExpose({
         @input="handleInput"
         :dv-info="dvInfo"
         :canvas-active="canvasActive"
+        :show-position="'edit'"
       />
       <component
         v-else-if="item.component.includes('Svg')"
@@ -1603,6 +1604,7 @@ defineExpose({
         :dv-info="dvInfo"
         :active="item.id === curComponentId"
         :canvas-active="canvasActive"
+        :show-position="'edit'"
       />
       <component
         v-else
@@ -1620,6 +1622,7 @@ defineExpose({
         :dv-info="dvInfo"
         :active="item.id === curComponentId"
         :canvas-active="canvasActive"
+        :show-position="'edit'"
       />
     </Shape>
     <!-- 右击菜单 -->
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 99d09a8b5f..e99670b1ca 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -122,6 +122,7 @@ const {
 let currentInstance
 const component = ref(null)
 const emits = defineEmits(['userViewEnlargeOpen', 'datasetParamsInit', 'onPointClick'])
+const wrapperId = 'wrapper-outer-id-' + config.value.id
 
 const viewDemoInnerId = computed(() => 'enlarge-inner-content-' + config.value.id)
 const htmlToImage = () => {
@@ -343,6 +344,7 @@ const deepScale = computed(() => scale.value / 100)
   <div
     class="wrapper-outer"
     :class="showPosition + '-' + config.component"
+    :id="wrapperId"
     @mousedown="handleInnerMouseDown"
     @mouseenter="onMouseEnter"
     v-loading="downLoading"
diff --git a/core/core-frontend/src/custom-component/scroll-text/Component.vue b/core/core-frontend/src/custom-component/scroll-text/Component.vue
index 41f3db96f2..16071a6a55 100644
--- a/core/core-frontend/src/custom-component/scroll-text/Component.vue
+++ b/core/core-frontend/src/custom-component/scroll-text/Component.vue
@@ -31,10 +31,15 @@ const props = defineProps({
         propValue: ''
       }
     }
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
   }
 })
 
-const { element } = toRefs(props)
+const { element, showPosition } = toRefs(props)
 const dvMainStore = dvMainStoreWithOut()
 const { editMode, curComponent, canvasStyleData } = storeToRefs(dvMainStore)
 
@@ -140,17 +145,16 @@ const varStyle = computed(() => [
 
 const init = () => {
   timeId = setInterval(() => {
-    if (textOut.value && text.value) {
-      const textValue = text.value.clientWidth * 100
-      const fontLength = document.getElementsByClassName('marquee-txt')[0]?.innerText?.length
-      const fontSizeLength = fontLength * element.value.style.fontSize * canvasStyleData.value.scale
-      if (textValue < fontSizeLength) {
-        scrollScale0.value = (textValue * 100) / textValue + '%'
-        scrollScale100.value = '100%'
-      } else {
-        scrollScale0.value = '100%'
-        scrollScale100.value = (-(fontSizeLength + 5000) * 100) / textValue + '%'
-      }
+    const outerId =
+      showPosition.value === 'edit'
+        ? 'shape-id-' + element.value.id
+        : 'wrapper-outer-id-' + element.value.id
+    const componentOut = document.getElementById(outerId)
+    if (componentOut && text.value) {
+      const textValue = text.value.clientWidth
+      const textOutValue = componentOut.clientWidth
+      scrollScale0.value = (textOutValue * 100) / textValue + '%'
+      scrollScale100.value = '-100%'
     } else {
       scrollScale0.value = '100%'
       scrollScale100.value = '-100%'