fix(scale): fix

components/label/LabelNossr.tsx

@@ -59,6 +59,7 @@ import { findGroupKey, isEditableKeyboardTarget } from "./util"
 import { safeClone } from "./utils/clone"
 import { labelTypeMap } from "./utils/constants"
 import { toggleObjectHideByShortcut } from "./utils/objectVisibility"
+import { getDisplayedImageScale } from "./utils/scale"
 
 // Splitter component - will need custom implementation or alternative
 
@@ -325,6 +326,13 @@ const LabelPage = ({
     setObjectOperations,
   } = useTopToolsStore()
   const { activeImage } = useBottomToolsStore()
+  const activeRasterScale = usePaperStore(
+    (state) => state.rasterScale[activeImage] ?? 1
+  )
+  const activeRasterSize = usePaperStore(
+    (state) => state.rasterSize[activeImage] ?? null
+  )
+  const currentGroup = usePaperStore((state) => state.group)
   const {
     setDescOperations,
     metaOperation,
@@ -333,6 +341,28 @@ const LabelPage = ({
     setQaData,
     resetData,
   } = useDescToolsStore()
+  const displayedImageScale = useMemo(() => {
+    return getDisplayedImageScale({
+      rasterScale: activeRasterScale,
+      viewScale: scale,
+    })
+  }, [activeRasterScale, scale])
+  const scaleOffsets = useMemo(() => {
+    if (!currentGroup || !activeRasterSize?.[0] || !activeRasterSize?.[1]) {
+      return {
+        offsetX: 0,
+        offsetY: 0,
+      }
+    }
+
+    const displayedWidth = activeRasterSize[0] * displayedImageScale
+    const displayedHeight = activeRasterSize[1] * displayedImageScale
+
+    return {
+      offsetX: displayedWidth / 2 - currentGroup.position.x,
+      offsetY: displayedHeight / 2 - currentGroup.position.y,
+    }
+  }, [activeRasterSize, currentGroup, displayedImageScale])
 
   const asyncGetProjectDetail = useCallback(async () => {
     if (projectId) {
@@ -2634,18 +2664,18 @@ const LabelPage = ({
                 style={{ overflow: "hidden" }}>
                 <ScaleComponent
                   options={{
-                    offsetX: 0,
-                    offsetY: 0,
-                    scale: scale,
+                    offsetX: scaleOffsets.offsetX,
+                    offsetY: scaleOffsets.offsetY,
+                    scale: displayedImageScale,
                   }}
                   mode="horizontal"
                 />
                 <Flex h="calc(100% - 32px)">
                   <ScaleComponent
                     options={{
-                      offsetX: 0,
-                      offsetY: 0,
-                      scale: scale,
+                      offsetX: scaleOffsets.offsetX,
+                      offsetY: scaleOffsets.offsetY,
+                      scale: displayedImageScale,
                     }}
                     mode="vertical"
                   />