From 4f8e3984b2123526a013d1d1429196b4fdf54db2 Mon Sep 17 00:00:00 2001 From: Hiren Kangad Date: Fri, 13 Mar 2026 12:04:57 +0530 Subject: [PATCH] refboard: fix crop pointer coordinate mapping --- frontend/src/canvas/CropOverlay.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/canvas/CropOverlay.ts b/frontend/src/canvas/CropOverlay.ts index ac73f44..9fae4bd 100644 --- a/frontend/src/canvas/CropOverlay.ts +++ b/frontend/src/canvas/CropOverlay.ts @@ -6,13 +6,14 @@ * All crop values are normalized 0-1 relative to the image's natural dimensions. */ -import { Container, Graphics, FederatedPointerEvent } from 'pixi.js'; +import { Container, Graphics, FederatedPointerEvent, Polygon, Rectangle } from 'pixi.js'; import type { Viewport } from 'pixi-viewport'; import type { SceneItem } from './SceneManager'; import type { ImageObject, CropRect } from './scene-format'; import { getImageViewRectWorldCorners, imageViewPointToWorld, worldToImageViewPoint } from './imageTransforms'; const HANDLE_SIZE = 8; +const HANDLE_HIT_SIZE = 22; const HANDLE_FILL = 0xffffff; const HANDLE_STROKE = 0x4a90d9; const BORDER_COLOR = 0x4a90d9; @@ -171,6 +172,7 @@ export class CropOverlay extends Container { this._cropHitArea.clear(); this._drawPolygon(this._cropHitArea, cropCorners); this._cropHitArea.fill({ color: 0xffffff, alpha: 0.001 }); + this._cropHitArea.hitArea = new Polygon(cropCorners.flatMap((point) => [point.x, point.y])); this._border.clear(); this._drawPolygon(this._border, cropCorners); @@ -205,12 +207,15 @@ export class CropOverlay extends Container { const s = HANDLE_SIZE / zoom; const half = s / 2; + const hitSize = HANDLE_HIT_SIZE / zoom; + const hitHalf = hitSize / 2; for (const [id, handle] of this._handles) { const pos = positions[id]; handle.clear(); handle.rect(-half, -half, s, s); handle.fill(HANDLE_FILL); handle.stroke({ color: HANDLE_STROKE, width: 1 / zoom }); + handle.hitArea = new Rectangle(-hitHalf, -hitHalf, hitSize, hitSize); handle.position.set(pos.px, pos.py); } } @@ -367,8 +372,8 @@ export class CropOverlay extends Container { const rect = domElement.getBoundingClientRect(); if (!rect.width || !rect.height) return null; return { - x: (clientX - rect.left) * (domElement.width / rect.width), - y: (clientY - rect.top) * (domElement.height / rect.height), + x: clientX - rect.left, + y: clientY - rect.top, }; } }