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

refboard: drive crop drag from DOM pointer events

Browse Source
This commit is contained in:
Hiren Kangad
2026-03-13 11:57:26 +05:30
parent 421ad176d4
commit c78325227f
1 changed files with 44 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/canvas/CropOverlay.ts
+44 -8
View File
@@ -39,6 +39,8 @@ export class CropOverlay extends Container {
private _onCancel: (() => void) | null = null;
private _onStateChange: ((active: boolean) => void) | null = null;
private _keyHandler: ((e: KeyboardEvent) => void) | null = null;
private _domMove: ((e: PointerEvent) => void) | null = null;
private _domUp: ((e: PointerEvent) => void) | null = null;
constructor(viewport: Viewport) {
super();
@@ -56,9 +58,6 @@ export class CropOverlay extends Container {
this._cropHitArea.eventMode = 'static';
this._cropHitArea.cursor = 'move';
this._cropHitArea.on('pointerdown', (e: FederatedPointerEvent) => this._onDown(e, 'move'));
this._cropHitArea.on('globalpointermove', (e: FederatedPointerEvent) => this._onMove(e));
this._cropHitArea.on('pointerup', () => this._onUp());
this._cropHitArea.on('pointerupoutside', () => this._onUp());
this.addChild(this._cropHitArea);
// Crop border
@@ -77,9 +76,6 @@ export class CropOverlay extends Container {
h.eventMode = 'static';
h.cursor = cursors[id];
h.on('pointerdown', (e: FederatedPointerEvent) => this._onDown(e, id));
h.on('globalpointermove', (e: FederatedPointerEvent) => this._onMove(e));
h.on('pointerup', () => this._onUp());
h.on('pointerupoutside', () => this._onUp());
this._handles.set(id, h);
this.addChild(h);
}
@@ -132,6 +128,7 @@ export class CropOverlay extends Container {
/** Clean up all state and listeners. Safe to call multiple times. */
private _cleanup(): void {
this._removeDomDragListeners();
this._viewport.plugins.resume('drag');
this._item = null;
this._drag = null;
@@ -223,6 +220,9 @@ export class CropOverlay extends Container {
private _onDown(e: FederatedPointerEvent, mode: DragMode): void {
if (!this._item) return;
e.stopPropagation();
if ('preventDefault' in e.nativeEvent && typeof e.nativeEvent.preventDefault === 'function') {
e.nativeEvent.preventDefault();
}
const data = this._item.data as ImageObject;
const world = this._viewport.toWorld(e.global.x, e.global.y);
const viewPoint = worldToImageViewPoint(data, world.x, world.y);
@@ -231,13 +231,19 @@ export class CropOverlay extends Container {
startCrop: this._getViewCrop(),
startPoint: { x: clamp01(viewPoint.x), y: clamp01(viewPoint.y) },
};
this._removeDomDragListeners();
this._domMove = (ev: PointerEvent) => this._onDomMove(ev);
this._domUp = () => this._onUp();
window.addEventListener('pointermove', this._domMove);
window.addEventListener('pointerup', this._domUp, { once: true });
window.addEventListener('pointercancel', this._domUp, { once: true });
}
private _onMove(e: FederatedPointerEvent): void {
private _onMoveScreen(screenX: number, screenY: number): void {
if (!this._drag || !this._item) return;
const data = this._item.data as ImageObject;
const world = this._viewport.toWorld(e.global.x, e.global.y);
const world = this._viewport.toWorld(screenX, screenY);
const viewPoint = worldToImageViewPoint(data, world.x, world.y);
const nx = clamp01(viewPoint.x);
const ny = clamp01(viewPoint.y);
@@ -294,8 +300,15 @@ export class CropOverlay extends Container {
this._draw();
}
private _onDomMove(e: PointerEvent): void {
const point = this._clientToCanvasPoint(e.clientX, e.clientY);
if (!point) return;
this._onMoveScreen(point.x, point.y);
}
private _onUp(): void {
this._drag = null;
this._removeDomDragListeners();
}
private _getViewCrop(): CropRect {
@@ -335,4 +348,27 @@ export class CropOverlay extends Container {
private _toHandlePosition(point: { x: number; y: number }): { px: number; py: number } {
return { px: point.x, py: point.y };
}
private _removeDomDragListeners(): void {
if (this._domMove) {
window.removeEventListener('pointermove', this._domMove);
this._domMove = null;
}
if (this._domUp) {
window.removeEventListener('pointerup', this._domUp);
window.removeEventListener('pointercancel', this._domUp);
this._domUp = null;
}
}
private _clientToCanvasPoint(clientX: number, clientY: number): { x: number; y: number } | null {
const domElement = (this._viewport as any)?.options?.events?.domElement as HTMLCanvasElement | undefined;
if (!domElement) return null;
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),
};
}
}