fix: touch release confirms drawing tool
- Add pointercancel listener (treated same as pointerup) - Remove e.preventDefault() from pointerdown/pointerup (was suppressing touch events) - Expand onMouseUp tool list: arc, polygon, revcloud now confirm on release Fixes: object disappears on touch release, tools work same on mobile as desktop
This commit is contained in:
@@ -58,6 +58,7 @@ export class InteractionEngine {
|
|||||||
private boundKeyDown: EventListener;
|
private boundKeyDown: EventListener;
|
||||||
private boundMouseMove: EventListener;
|
private boundMouseMove: EventListener;
|
||||||
private boundMouseUp: EventListener;
|
private boundMouseUp: EventListener;
|
||||||
|
private boundPointerCancel: EventListener;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
canvas: HTMLCanvasElement,
|
canvas: HTMLCanvasElement,
|
||||||
@@ -95,6 +96,7 @@ export class InteractionEngine {
|
|||||||
this.boundKeyDown = this.onKeyDown.bind(this) as EventListener;
|
this.boundKeyDown = this.onKeyDown.bind(this) as EventListener;
|
||||||
this.boundMouseMove = this.onMouseMove.bind(this) as EventListener;
|
this.boundMouseMove = this.onMouseMove.bind(this) as EventListener;
|
||||||
this.boundMouseUp = this.onMouseUp.bind(this) as EventListener;
|
this.boundMouseUp = this.onMouseUp.bind(this) as EventListener;
|
||||||
|
this.boundPointerCancel = this.onMouseUp.bind(this) as EventListener;
|
||||||
}
|
}
|
||||||
|
|
||||||
setElements(elements: CADElement[]): void {
|
setElements(elements: CADElement[]): void {
|
||||||
@@ -165,6 +167,7 @@ export class InteractionEngine {
|
|||||||
this.addListener('pointerdown', this.onMouseDown.bind(this) as EventListener);
|
this.addListener('pointerdown', this.onMouseDown.bind(this) as EventListener);
|
||||||
document.addEventListener('pointermove', this.boundMouseMove);
|
document.addEventListener('pointermove', this.boundMouseMove);
|
||||||
document.addEventListener('pointerup', this.boundMouseUp);
|
document.addEventListener('pointerup', this.boundMouseUp);
|
||||||
|
document.addEventListener('pointercancel', this.boundPointerCancel);
|
||||||
this.addListener('dblclick', this.onDoubleClick.bind(this) as EventListener);
|
this.addListener('dblclick', this.onDoubleClick.bind(this) as EventListener);
|
||||||
this.addListener('wheel', this.onWheel.bind(this) as EventListener, { passive: false } as AddEventListenerOptions);
|
this.addListener('wheel', this.onWheel.bind(this) as EventListener, { passive: false } as AddEventListenerOptions);
|
||||||
this.addListener('contextmenu', this.onContextMenu.bind(this) as EventListener);
|
this.addListener('contextmenu', this.onContextMenu.bind(this) as EventListener);
|
||||||
@@ -178,6 +181,7 @@ export class InteractionEngine {
|
|||||||
this.eventListeners = [];
|
this.eventListeners = [];
|
||||||
document.removeEventListener('pointermove', this.boundMouseMove);
|
document.removeEventListener('pointermove', this.boundMouseMove);
|
||||||
document.removeEventListener('pointerup', this.boundMouseUp);
|
document.removeEventListener('pointerup', this.boundMouseUp);
|
||||||
|
document.removeEventListener('pointercancel', this.boundPointerCancel);
|
||||||
document.removeEventListener('keydown', this.boundKeyDown);
|
document.removeEventListener('keydown', this.boundKeyDown);
|
||||||
if (this.animationFrame !== null) {
|
if (this.animationFrame !== null) {
|
||||||
cancelAnimationFrame(this.animationFrame);
|
cancelAnimationFrame(this.animationFrame);
|
||||||
@@ -222,7 +226,6 @@ export class InteractionEngine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private onMouseDown(e: MouseEvent): void {
|
private onMouseDown(e: MouseEvent): void {
|
||||||
e.preventDefault();
|
|
||||||
try { this.canvas.setPointerCapture((e as any).pointerId); } catch {}
|
try { this.canvas.setPointerCapture((e as any).pointerId); } catch {}
|
||||||
this.isMouseDown = true;
|
this.isMouseDown = true;
|
||||||
this.lastMouseScreen = { x: e.clientX, y: e.clientY };
|
this.lastMouseScreen = { x: e.clientX, y: e.clientY };
|
||||||
@@ -342,7 +345,6 @@ export class InteractionEngine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private onMouseUp(e: MouseEvent): void {
|
private onMouseUp(e: MouseEvent): void {
|
||||||
e.preventDefault();
|
|
||||||
try { this.canvas.releasePointerCapture((e as any).pointerId); } catch {}
|
try { this.canvas.releasePointerCapture((e as any).pointerId); } catch {}
|
||||||
this.isMouseDown = false;
|
this.isMouseDown = false;
|
||||||
|
|
||||||
@@ -373,7 +375,7 @@ export class InteractionEngine {
|
|||||||
const final = this.applyOrtho(snapped.x, snapped.y);
|
const final = this.applyOrtho(snapped.x, snapped.y);
|
||||||
const tool = this.state.activeTool;
|
const tool = this.state.activeTool;
|
||||||
// For 2-point tools: use mouseup position as second point
|
// For 2-point tools: use mouseup position as second point
|
||||||
if (tool === 'line' || tool === 'rect' || tool === 'circle' || tool === 'dimension' || tool === 'leader') {
|
if (tool === 'line' || tool === 'rect' || tool === 'circle' || tool === 'dimension' || tool === 'leader' || tool === 'arc' || tool === 'polygon' || tool === 'revcloud') {
|
||||||
this.state.points.push(final);
|
this.state.points.push(final);
|
||||||
this.confirmDraw();
|
this.confirmDraw();
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user