From 267deefc10728201166c382a31e46168e231820c Mon Sep 17 00:00:00 2001
From: Hiren Kangad <hir.012612@gmail.com>
Date: Fri, 13 Mar 2026 12:39:24 +0530
Subject: [PATCH] refboard: preserve image position when applying crop

---
 frontend/src/hooks/useCanvasSetup.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/hooks/useCanvasSetup.ts b/frontend/src/hooks/useCanvasSetup.ts
index 29104c6..8b98630 100644
--- a/frontend/src/hooks/useCanvasSetup.ts
+++ b/frontend/src/hooks/useCanvasSetup.ts
@@ -17,6 +17,7 @@ import { MarkdownOverlay } from '../canvas/MarkdownOverlay';
 import { TextSprite } from '../canvas/sprites/TextSprite';
 import { TextSharpnessManager } from '../canvas/textSharpness';
 import { getItemWorldBounds } from '../canvas/SceneManager';
+import { applyImageDisplayTransform } from '../canvas/imageTransforms';
 // PresenceOverlay removed — remote selection highlighting was too heavy for minimal benefit
 import { connectSocket, disconnectSocket } from '../socket';
 import api from '../api';
@@ -478,11 +479,18 @@ export function useCanvasSetup(deps: CanvasSetupDeps) {
 
       cropOverlay.onConfirm = (item, crop) => {
         const imgData = item.data as any;
+        const before = getItemWorldBounds(item);
         const isFullImage = crop.x < 0.001 && crop.y < 0.001 && crop.w > 0.999 && crop.h > 0.999;
         imgData.crop = isFullImage ? undefined : crop;
         if (item.displayObject instanceof ImageSprite) {
           item.displayObject.applyCrop(imgData.crop);
         }
+        const after = getItemWorldBounds(item);
+        imgData.x += before.x - after.x;
+        imgData.y += before.y - after.y;
+        if (item.type === 'image') {
+          applyImageDisplayTransform(item.displayObject, imgData);
+        }
         scene.updateSpatialEntry(item);
         selection.setEnabled(true);
         selection.transformBox.update([item]);