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'"
/>
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)
[
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%'