From f8115dcbf5523991791843d8a2c74c1dfb1908a5 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 17 Oct 2024 12:07:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E8=B0=83=E6=95=B4=E8=B7=91=E9=A9=AC=E7=81=AF=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E9=80=9F=E5=BA=A6=E9=80=BB=E8=BE=91=EF=BC=8C=E9=98=B2?=
 =?UTF-8?q?=E6=AD=A2=E4=B8=8D=E5=90=8C=E5=AE=BD=E5=BA=A6=E9=80=9F=E5=BA=A6?=
 =?UTF-8?q?=E5=8F=AF=E8=83=BD=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E9=80=9F=E5=BA=A6=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/CommonStyleSet.vue                 |  4 ++-
 .../scroll-text/Component.vue                 | 28 +++++++------------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index 88c37325f5..0464c97bfc 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -353,7 +353,9 @@ const scrollSpeedList = [
   { name: '70', value: 70 },
   { name: '80', value: 80 },
   { name: '90', value: 90 },
-  { name: '100', value: 100 }
+  { name: '100', value: 100 },
+  { name: '150', value: 150 },
+  { name: '200', value: 200 }
 ]
 
 const opacitySizeList = [
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 16071a6a55..4fdad6b013 100644
--- a/core/core-frontend/src/custom-component/scroll-text/Component.vue
+++ b/core/core-frontend/src/custom-component/scroll-text/Component.vue
@@ -16,6 +16,7 @@ const textOut = ref(null)
 const scrollScale0 = ref('100%')
 const scrollScale100 = ref('100%')
 let timeId = null
+const textOutClientWidth = ref(200)
 
 const props = defineProps({
   propValue: {
@@ -134,9 +135,7 @@ const varStyle = computed(() => [
     '--scroll-speed': `${
       element.value.style.scrollSpeed === 0 || !textOut.value
         ? 0
-        : (textOut.value.clientWidth * 100) /
-          canvasStyleData.value.scale /
-          element.value.style.scrollSpeed
+        : (textOutClientWidth.value + text.value.clientWidth) / element.value.style.scrollSpeed
     }s`,
     '--scroll-scale0': `${scrollScale0.value}`,
     '--scroll-scale100': `${scrollScale100.value}`
@@ -152,8 +151,8 @@ const init = () => {
     const componentOut = document.getElementById(outerId)
     if (componentOut && text.value) {
       const textValue = text.value.clientWidth
-      const textOutValue = componentOut.clientWidth
-      scrollScale0.value = (textOutValue * 100) / textValue + '%'
+      textOutClientWidth.value = componentOut.clientWidth
+      scrollScale0.value = (textOutClientWidth.value * 100) / textValue + '%'
       scrollScale100.value = '-100%'
     } else {
       scrollScale0.value = '100%'
@@ -161,13 +160,6 @@ const init = () => {
     }
   }, 1000)
 }
-
-const textStyle = computed(() => {
-  return {
-    verticalAlign: element.value['style'].verticalAlign
-  }
-})
-
 onMounted(() => {
   init()
 })
@@ -188,7 +180,6 @@ onMounted(() => {
       :contenteditable="canEdit"
       :class="{ 'can-edit': canEdit, 'marquee-txt': marqueeTxt }"
       tabindex="0"
-      :style="textStyle"
       @paste="clearStyle"
       @mousedown="handleMousedown"
       @blur="handleBlur"
@@ -197,7 +188,7 @@ onMounted(() => {
     ></div>
   </div>
   <div v-else class="v-text preview" ref="textOut" :style="varStyle">
-    <div class="marquee-txt" :style="textStyle" ref="text" v-html="element['propValue']"></div>
+    <div class="marquee-txt" ref="text" v-html="element['propValue']"></div>
   </div>
 </template>
 
@@ -205,11 +196,9 @@ onMounted(() => {
 .v-text {
   width: 100%;
   height: 100%;
-  display: table;
+  display: flex;
+  align-items: center;
   div {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
     outline: none;
     word-break: break-all;
     padding: 4px;
@@ -218,6 +207,9 @@ onMounted(() => {
 
   .can-edit {
     cursor: text;
+    width: 100%;
+    display: grid;
+    align-items: center;
     height: 100%;
   }
 }