feat: 升级vue3-sketch-ruler到2X

2026-05-14 04:12:08 +08:00 · 2026-05-12 14:43:14 +08:00
parent 09b60abb66
commit 48bf4aa989
9 changed files with 115 additions and 243 deletions
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
    "vue-i18n": "9.2.2",
    "vue-router": "4.0.12",
    "vue3-lazyload": "^0.2.5-beta",
-    "vue3-sketch-ruler": "^1.3.3",
+    "vue3-sketch-ruler": "^2.4.1",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,8 +111,8 @@ importers:
        specifier: ^0.2.5-beta
        version: 0.2.5-beta(@vue/compiler-sfc@3.5.16)(vue@3.5.16(typescript@4.6.3))
      vue3-sketch-ruler:
-        specifier: ^1.3.3
-        version: 1.3.16(vue@3.5.16(typescript@4.6.3))
+        specifier: ^2.4.1
+        version: 2.4.1
      vuedraggable:
        specifier: ^4.1.0
        version: 4.1.0(vue@3.5.16(typescript@4.6.3))
@@ -3946,18 +3946,8 @@ packages:
      '@vue/compiler-sfc': '>=3.0.0'
      vue: '>=3.0.0'

-  vue3-sketch-ruler@1.3.16:
-    resolution: {integrity: sha512-k/TBOwbueU9eWOF7k/emsZMwtEqFk/FxG+h//TlaZ2B8RWbxhIe6hPFgggO4Jng10ARsuH4cMGAR+ZOuN4ozgg==}
-    deprecated: This version is deprecated. Please upgrade to version 2X for better features and performance.See https://github.com/kakajun/vue3-sketch-ruler
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.1.0
-      vue: ^2.6.0 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      vue:
-        optional: true
+  vue3-sketch-ruler@2.4.1:
+    resolution: {integrity: sha512-TMMJ5v3cqDA94DPUa1iFHBx4D+FqEqpNXwzGU310aaMDllqyvyFfZigBFryeCRO7Q7EuOD5J5Zwc++LOCHB7Jw==}

  vue@3.5.16:
    resolution: {integrity: sha512-rjOV2ecxMd5SiAmof2xzh2WxntRcigkX/He4YFJ6WdRvVUrbt6DxC1Iujh10XLl8xCDRDtGKMeO3D+pRQ1PP9w==}
@@ -4323,7 +4313,7 @@ snapshots:
      '@types/node': 20.5.1
      chalk: 4.1.2
      cosmiconfig: 8.3.6(typescript@5.8.3)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3)
      lodash.isplainobject: 4.0.6
      lodash.merge: 4.6.2
      lodash.uniq: 4.5.0
@@ -5556,7 +5546,7 @@ snapshots:

  core-util-is@1.0.3: {}

-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3):
    dependencies:
      '@types/node': 20.5.1
      cosmiconfig: 8.3.6(typescript@5.8.3)
@@ -8186,9 +8176,7 @@ snapshots:
      '@vue/compiler-sfc': 3.5.16
      vue: 3.5.16(typescript@4.6.3)

-  vue3-sketch-ruler@1.3.16(vue@3.5.16(typescript@4.6.3)):
-    optionalDependencies:
-      vue: 3.5.16(typescript@4.6.3)
+  vue3-sketch-ruler@2.4.1: {}

  vue@3.5.16(typescript@4.6.3):
    dependencies:
--- a/src/plugins/customComponents.ts
+++ b/src/plugins/customComponents.ts
@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { GoSkeleton } from '@/components/GoSkeleton'
 import { GoLoading } from '@/components/GoLoading'
-import { SketchRule } from 'vue3-sketch-ruler'
+import  SketchRule  from 'vue3-sketch-ruler'

 /**
 * 全局注册自定义组件
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
@@ -31,6 +31,4 @@ export interface ChartLayoutType {
  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
  // 当前正在加载的数量
  [ChartLayoutStoreEnum.PERCENTAGE]: number
-  // 是否重置当前画布位置
-  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -49,9 +49,6 @@ export const useChartLayoutStore = defineStore({
    },
    getPercentage(): number {
      return this.percentage
-    },
-    getRePositionCanvas(): boolean {
-      return this.rePositionCanvas
    }
  },
  actions: {
@@ -65,8 +62,6 @@ export const useChartLayoutStore = defineStore({
      })
      // 存储本地
      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
-      // 这里需要标记重置画布位置
-      this.rePositionCanvas = true;
      // 重新计算拖拽区域缩放比例
      if (computedScale) {
        setTimeout(() => {
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@@ -62,10 +62,15 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'

 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5

+const props = defineProps<{
+  reset?: () => void
+  zoomIn?: () => void
+  zoomOut?: () => void
+}>()
+
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
@@ -105,8 +110,7 @@ const filterValue = ref('')
 const selectHandle = (v: number) => {
  selectInstRef.value?.blur()
  if (v === 0) {
-    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, true)
-    chartEditStore.computedScale()
+    props.reset?.()
    return
  }
  chartEditStore.setScale(v / 100)
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="go-edit-range go-transition" :style="rangeStyle" @mousedown="mousedownBoxSelect($event, undefined)">
+  <div class="go-edit-range go-transition" @mousedown="mousedownBoxSelect($event, undefined)">
    <slot></slot>
    <!-- 水印 -->
    <edit-watermark></edit-watermark>
@@ -33,15 +33,6 @@ const size = computed(() => {
  }
 })

-const rangeStyle = computed(() => {
-  // 缩放
-  const scale = {
-    transform: `scale(${getEditCanvas.value.scale})`
-  }
-  // @ts-ignore
-  return { ...useSizeStyle(size.value), ...scale }
-})
-
 // 模态层
 const rangeModelStyle = computed(() => {
  const dragStyle = getEditCanvas.value.isCreate && { 'z-index': 99999 }
@@ -52,6 +43,7 @@ const rangeModelStyle = computed(() => {

 <style lang="scss" scoped>
@include go(edit-range) {
+  height: 100%;
  position: relative;
  transform-origin: left top;
  background-size: cover;
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -2,82 +2,72 @@
  <div class="go-sketch-rule">
    <sketch-rule
      v-if="sketchRuleReDraw"
+      ref="sketchRuleRef"
      :thick="thick"
      :scale="scale"
      :width="canvasBox().width"
      :height="canvasBox().height"
-      :startX="startX"
-      :startY="startY"
+      :canvasWidth="width"
+      :canvasHeight="height"
      :lines="lines"
      :palette="paletteStyle"
+      :isShowReferLine="true"
+      :shadow="shadow"
+      @zoomchange="handleZoomChange"
    >
-    </sketch-rule>
-    <div ref="$app" class="edit-screens" @scroll="handleScroll">
-      <div ref="$container" class="edit-screen-container" :style="{ width: containerWidth }">
-        <div
-          ref="refSketchRuleBox"
-          class="canvas"
-          @mousedown="dragCanvas"
-          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
-        >
-          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
-            <slot></slot>
-          </div>
+      <template #default>
+        <div ref="refSketchRuleBox" class="abc" :style="canvasStyle" @mousedown="dragCanvas">
+          <slot></slot>
        </div>
-      </div>
-    </div>
-    <!-- 修复右下角白点用的 -->
-    <!-- <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div> -->
+      </template>
+    </sketch-rule>
  </div>
 </template>
+
 <script setup lang="ts">
 import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import type { CSSProperties } from 'vue'
 import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import throttle from 'lodash/throttle'

 const chartEditStore = useChartEditStore()
-const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()

 const thick = 20
-let prevMoveXValue = [0, 0]
-let prevMoveYValue = [0, 0]

-const $app = ref()
-const sketchRuleReDraw = ref(true)
-const refSketchRuleBox = ref()
-const $container = ref()
+const sketchRuleRef = ref()
+const sketchRuleReDraw = ref(false)
 const isPressSpace = ref(false)
 const cursorStyle = ref('auto')
 const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-const startX = ref(0)
-const startY = ref(0)
 const lines = reactive({ h: [], v: [] })

-const scale = computed(() => {
-  return chartEditStore.getEditCanvas.scale
-})
+const scale = computed(() => chartEditStore.getEditCanvas.scale)

-// 滚动条拖动的宽度
-const containerWidth = computed(() => {
-  return `${window.innerWidth * 2}px`
-})
-
-// 滚动条拖动的高度
-const containerHeight = computed(() => {
-  return `${height.value * 2}px`
-})
+// 防止 panzoom 与 store 互相触发造成循环
+let isUpdatingFromPanzoom = false
+watch(
+  () => chartEditStore.getEditCanvas.scale,
+  newScale => {
+    if (isUpdatingFromPanzoom) {
+      isUpdatingFromPanzoom = false
+      return
+    }
+    const panzoom = sketchRuleRef.value?.panzoomInstance
+    if (panzoom && Math.abs(panzoom.getScale() - newScale) > 0.001) {
+      panzoom.zoom(newScale)
+    }
+  }
+)

 // 主题
 const paletteStyle = computed(() => {
  const isDarkTheme = designStore.getDarkTheme
  return isDarkTheme
    ? {
-        bgColor: '#18181c',
+        bgColor: 'transparent',
        longfgColor: '#4d4d4d',
        shortfgColor: '#4d4d4d',
        fontColor: '#4d4d4d',
@@ -85,42 +75,29 @@ const paletteStyle = computed(() => {
        borderColor: '#18181c',
        cornerActiveColor: '#18181c'
      }
-    : {}
+    : { bgColor: 'transparent' }
 })

 // 颜色
 const themeColor = computed(() => {
  return designStore.getAppTheme
 })
-
-// 处理鼠标拖动
-const handleWheel = (e: any) => {
-  if (e.ctrlKey || e.metaKey) {
-    e.preventDefault()
-    let resScale = scale.value
-    // 放大(200%)
-    if (e.wheelDelta >= 0 && scale.value < 2) {
-      resScale = scale.value + 0.05
-      chartEditStore.setScale(resScale)
-      return
-    }
-    // 缩小(10%)
-    if (e.wheelDelta < 0 && scale.value > 0.1) {
-      resScale = scale.value - 0.05
-      chartEditStore.setScale(resScale)
-    }
+const canvasStyle = computed((): CSSProperties => {
+  return {
+    pointerEvents: isPressSpace.value ? ('none' as const) : ('auto' as const),
+    width: `${width.value}px`,
+    height: `${height.value}px`
  }
-}
-
-// 滚动条处理
-const handleScroll = () => {
-  if (!$app.value) return
-  const screensRect = $app.value.getBoundingClientRect()
-  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
-  // 标尺开始的刻度
-  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
-  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
-}
+})
+// 阴影（画布在标尺坐标系中的位置，从 thick 偏移开始）
+const shadow = computed(() => {
+  return {
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 200
+  }
+})

 // 拖拽处理
 const dragCanvas = (e: any) => {
@@ -132,30 +109,8 @@ const dragCanvas = (e: any) => {
  // @ts-ignore
  document.activeElement?.blur()

-  const startX = e.pageX
-  const startY = e.pageY
-
-  const listenMousemove = listen(window, 'mousemove', (e: any) => {
-    const nx = e.pageX - startX
-    const ny = e.pageY - startY
-
-    const [prevMoveX1, prevMoveX2] = prevMoveXValue
-    const [prevMoveY1, prevMoveY2] = prevMoveYValue
-
-    prevMoveXValue = [prevMoveX2, nx]
-    prevMoveYValue = [prevMoveY2, ny]
-
-    $app.value.scrollLeft -=
-      prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
-    $app.value.scrollTop -=
-      prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
-  })
-
  const listenMouseup = listen(window, 'mouseup', () => {
-    listenMousemove()
    listenMouseup()
-    prevMoveXValue = [0, 0]
-    prevMoveYValue = [0, 0]
    isPressSpace.value = false
  })
 }
@@ -164,7 +119,7 @@ const dragCanvas = (e: any) => {
 const canvasBox = () => {
  const layoutDom = document.getElementById('go-chart-edit-layout')
  if (layoutDom) {
-    // 此处减去滚动条的宽度和高度 
+    // 此处减去滚动条的宽度和高度
    const scrollW = 20
    return {
      height: layoutDom.clientHeight - scrollW,
@@ -183,16 +138,7 @@ const reDraw = throttle(() => {
  setTimeout(() => {
    sketchRuleReDraw.value = true
  }, 10)
-},20)
-
-// 滚动居中
-const canvasPosCenter = () => {
-  const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
-  const { width, height } = canvasBox()
-
-  $app.value.scrollLeft = containerWidth / 2 - width / 2
-  $app.value.scrollTop = containerHeight / 2 - height / 2
-}
+}, 20)

 // 处理主题变化
 watch(
@@ -202,21 +148,6 @@ watch(
  }
 )

-// // 处理标尺重制大小
-watch(
-  () => scale.value,
-  (newValue, oldValue) => {
-    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
-      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
-    }
-    handleScroll()
-    setTimeout(() => {
-        canvasPosCenter()
-        reDraw()
-    }, 400)
-  }
-)
-
 // 处理鼠标样式
 watch(
  () => isPressSpace.value,
@@ -225,68 +156,71 @@ watch(
  }
 )

+const handleZoomChange = (detail: any) => {
+  isUpdatingFromPanzoom = true
+  chartEditStore.setScale(detail.scale)
+}
+
 onMounted(() => {
-  if ($app.value) {
-    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    canvasPosCenter()
+  // 防止 canvasBox() 拿不准尺寸
+  sketchRuleReDraw.value = true
+  window.onKeySpacePressHold = (isHold: boolean) => {
+    isPressSpace.value = isHold
  }
 })

 onUnmounted(() => {
-  if ($app.value) {
-    $app.value.removeEventListener('wheel', handleWheel)
-  }
+  window.onKeySpacePressHold = undefined
 })

-window.onKeySpacePressHold = (isHold: boolean) => {
-  isPressSpace.value = isHold
-}
+const reset = () => sketchRuleRef.value?.reset?.()
+const zoomIn = () => sketchRuleRef.value?.zoomIn?.()
+const zoomOut = () => sketchRuleRef.value?.zoomOut?.()
+
+defineExpose({
+  reset,
+  zoomIn,
+  zoomOut
+})
 </script>

 <style>
-/* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
-此库有计划 Vue3 版本，但是开发的时候还没发布 */
-#mb-ruler {
-  top: 0;
-  left: 0;
-}
-
 /* 横线 */
-#mb-ruler .v-container .lines .line {
+.sketch-ruler .v-container .lines .line {
  /* 最大缩放 200% */
  width: 200vw !important;
  border-top: 1px dashed v-bind('themeColor') !important;
 }

-#mb-ruler .v-container .indicator {
+.sketch-ruler .v-container .indicator {
  border-bottom: 1px dashed v-bind('themeColor') !important;
 }

 /* 竖线 */
-#mb-ruler .h-container .lines .line {
+.sketch-ruler .h-container .lines .line {
  /* 最大缩放 200% */
  height: 200vh !important;
  border-left: 1px dashed v-bind('themeColor') !important;
 }

-#mb-ruler .h-container .indicator {
+.sketch-ruler .h-container .indicator {
  border-left: 1px dashed v-bind('themeColor') !important;
 }

 /* 坐标数值背景颜色 */
-#mb-ruler .indicator .value {
+.sketch-ruler .indicator .value {
  background-color: rgba(0, 0, 0, 0);
 }

 /* 删除按钮 */
-#mb-ruler .line .del {
+.sketch-ruler .line .del {
  padding: 0;
  color: v-bind('themeColor');
  font-size: 26px;
  font-weight: bolder;
 }

-#mb-ruler .corner {
+.sketch-ruler .corner {
  border-width: 0 !important;
 }
 </style>
@@ -297,60 +231,10 @@ window.onKeySpacePressHold = (isHold: boolean) => {
  width: 100%;
  height: 100%;

-  .edit-screens {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    user-select: none;
-    padding-bottom: 0px;
-
-    /* firefox */
-    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
-    scrollbar-width: thin;
-
-    /* chrome */
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-track-piece {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar {
-      width: 7px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: 5px;
-      background-color: rgba(144, 146, 152, 0.3);
-    }
-    // 修复右下角白点用的
-    &::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-  }
-
-  .fix-edit-screens-block {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 10px;
-    height: 10px;
-    background-color: $--color-dark-bg-1;
-  }
-
-  .edit-screen-container {
-    position: absolute;
-    height: v-bind('containerHeight');
-    top: 0;
-    left: 0;
-  }
-
  .canvas {
    position: absolute;
-    top:50%;
-    left: 50%;
-    transform-origin: 50% 0;
-    transform: translateY(-50%);
+    top: 0;
+    left: 0;

    &:hover {
      cursor: v-bind('cursorStyle');
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- <edit-rule></edit-rule> -->
  <content-box
    id="go-chart-edit-layout"
    :flex="true"
@@ -13,7 +12,7 @@
    @dragover="dragoverHandle"
    @dragenter="dragoverHandle"
  >
-    <edit-rule>
+    <edit-rule ref="editRuleRef">
      <!-- 画布主体 -->
      <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
        <!-- 展示 -->
@@ -30,7 +29,7 @@
              <!-- 分组 -->
              <edit-group
                v-if="item.isGroup"
-                :groupData="(item as CreateComponentGroupType)"
+                :groupData="item as CreateComponentGroupType"
                :groupIndex="index"
              ></edit-group>

@@ -40,9 +39,9 @@
                :data-id="item.id"
                :index="index"
                :style="{
-                ...useComponentStyle(item.attr, index),
-                ...getBlendModeStyle(item.styles) as any
-              }"
+                  ...useComponentStyle(item.attr, index),
+                  ...(getBlendModeStyle(item.styles) as any),
+                }"
                :item="item"
                @click="mouseClickHandle($event, item)"
                @mousedown="mousedownHandle($event, item)"
@@ -77,13 +76,17 @@

    <!-- 底部控制 -->
    <template #bottom>
-      <EditBottom></EditBottom>
+      <EditBottom
+        :reset="editRuleMethods.reset"
+        :zoom-in="editRuleMethods.zoomIn"
+        :zoom-out="editRuleMethods.zoomOut"
+      ></EditBottom>
    </template>
  </content-box>
 </template>

 <script lang="ts" setup>
-import { onMounted, computed, provide, watch } from 'vue'
+import { onMounted, computed, provide, watch, ref } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
@@ -181,6 +184,13 @@ const rangeStyle = computed(() => {
 // 处理全局的 vChart 主题
 useInitVChartsTheme(chartEditStore)

+const editRuleRef = ref()
+const editRuleMethods = {
+  reset: () => editRuleRef.value?.reset?.(),
+  zoomIn: () => editRuleRef.value?.zoomIn?.(),
+  zoomOut: () => editRuleRef.value?.zoomOut?.()
+}
+
 // 键盘事件
 onMounted(() => {
  useAddKeyboard()
@@ -197,6 +207,7 @@ onMounted(() => {

  @include goId('chart-edit-content') {
    overflow: hidden;
+    height: 100%;
    @extend .go-transition;
    @include fetch-theme('box-shadow');