Hermes/refboard-ayon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refboard: anchor crop apply to selected region

Browse Source
This commit is contained in:
Hiren Kangad
2026-03-13 12:42:16 +05:30
parent 267deefc10
commit 50dbb4e0cf
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/canvas/CropOverlay.ts
+6 -3
View File
@@ -38,7 +38,7 @@ export class CropOverlay extends Container {
private _crop: CropRect = { x: 0, y: 0, w: 1, h: 1 }; private _crop: CropRect = { x: 0, y: 0, w: 1, h: 1 };
private _originalCrop: CropRect | undefined; private _originalCrop: CropRect | undefined;
private _drag: { mode: DragMode; startCrop: CropRect; startPoint: { x: number; y: number } } | null = null; private _drag: { mode: DragMode; startCrop: CropRect; startPoint: { x: number; y: number } } | null = null;
private _onConfirm: ((item: SceneItem, crop: CropRect) => void) | null = null; private _onConfirm: ((item: SceneItem, crop: CropRect, anchorWorld: { x: number; y: number }) => void) | null = null;
private _onCancel: (() => void) | null = null; private _onCancel: (() => void) | null = null;
private _onStateChange: ((active: boolean) => void) | null = null; private _onStateChange: ((active: boolean) => void) | null = null;
private _keyHandler: ((e: KeyboardEvent) => void) | null = null; private _keyHandler: ((e: KeyboardEvent) => void) | null = null;
@@ -84,7 +84,7 @@ export class CropOverlay extends Container {
} }
} }
set onConfirm(fn: (item: SceneItem, crop: CropRect) => void) { this._onConfirm = fn; } set onConfirm(fn: (item: SceneItem, crop: CropRect, anchorWorld: { x: number; y: number }) => void) { this._onConfirm = fn; }
set onCancel(fn: () => void) { this._onCancel = fn; } set onCancel(fn: () => void) { this._onCancel = fn; }
set onStateChange(fn: (active: boolean) => void) { this._onStateChange = fn; } set onStateChange(fn: (active: boolean) => void) { this._onStateChange = fn; }
@@ -120,9 +120,12 @@ export class CropOverlay extends Container {
if (!this._item) return; if (!this._item) return;
const item = this._item; const item = this._item;
const crop = { ...this._crop }; const crop = { ...this._crop };
const data = item.data as ImageObject;
const viewCrop = this._getViewCrop();
const anchorWorld = imageViewPointToWorld(data, viewCrop.x, viewCrop.y);
const isFullImage = crop.x < 0.001 && crop.y < 0.001 && crop.w > 0.999 && crop.h > 0.999; const isFullImage = crop.x < 0.001 && crop.y < 0.001 && crop.w > 0.999 && crop.h > 0.999;
this._cleanup(); this._cleanup();
this._onConfirm?.(item, isFullImage ? { x: 0, y: 0, w: 1, h: 1 } : crop); this._onConfirm?.(item, isFullImage ? { x: 0, y: 0, w: 1, h: 1 } : crop, anchorWorld);
} }
/** Cancel cropping — restore original state. */ /** Cancel cropping — restore original state. */
frontend/src/hooks/useCanvasSetup.ts
+3 -4
View File
@@ -477,17 +477,16 @@ export function useCanvasSetup(deps: CanvasSetupDeps) {
onCropModeChange?.(active); onCropModeChange?.(active);
}; };
cropOverlay.onConfirm = (item, crop) => { cropOverlay.onConfirm = (item, crop, anchorWorld) => {
const imgData = item.data as any; 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; const isFullImage = crop.x < 0.001 && crop.y < 0.001 && crop.w > 0.999 && crop.h > 0.999;
imgData.crop = isFullImage ? undefined : crop; imgData.crop = isFullImage ? undefined : crop;
if (item.displayObject instanceof ImageSprite) { if (item.displayObject instanceof ImageSprite) {
item.displayObject.applyCrop(imgData.crop); item.displayObject.applyCrop(imgData.crop);
} }
const after = getItemWorldBounds(item); const after = getItemWorldBounds(item);
imgData.x += before.x - after.x; imgData.x += anchorWorld.x - after.x;
imgData.y += before.y - after.y; imgData.y += anchorWorld.y - after.y;
if (item.type === 'image') { if (item.type === 'image') {
applyImageDisplayTransform(item.displayObject, imgData); applyImageDisplayTransform(item.displayObject, imgData);
} }