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:
2026-06-28 23:54:07 +02:00
parent 88ddebcd86
commit db2b70f15b
+5 -3
View File
@@ -58,6 +58,7 @@ export class InteractionEngine {
private boundKeyDown: EventListener;
private boundMouseMove: EventListener;
private boundMouseUp: EventListener;
private boundPointerCancel: EventListener;
constructor(
canvas: HTMLCanvasElement,
@@ -95,6 +96,7 @@ export class InteractionEngine {
this.boundKeyDown = this.onKeyDown.bind(this) as EventListener;
this.boundMouseMove = this.onMouseMove.bind(this) as EventListener;
this.boundMouseUp = this.onMouseUp.bind(this) as EventListener;
this.boundPointerCancel = this.onMouseUp.bind(this) as EventListener;
}
setElements(elements: CADElement[]): void {
@@ -165,6 +167,7 @@ export class InteractionEngine {
this.addListener('pointerdown', this.onMouseDown.bind(this) as EventListener);
document.addEventListener('pointermove', this.boundMouseMove);
document.addEventListener('pointerup', this.boundMouseUp);
document.addEventListener('pointercancel', this.boundPointerCancel);
this.addListener('dblclick', this.onDoubleClick.bind(this) as EventListener);
this.addListener('wheel', this.onWheel.bind(this) as EventListener, { passive: false } as AddEventListenerOptions);
this.addListener('contextmenu', this.onContextMenu.bind(this) as EventListener);
@@ -178,6 +181,7 @@ export class InteractionEngine {
this.eventListeners = [];
document.removeEventListener('pointermove', this.boundMouseMove);
document.removeEventListener('pointerup', this.boundMouseUp);
document.removeEventListener('pointercancel', this.boundPointerCancel);
document.removeEventListener('keydown', this.boundKeyDown);
if (this.animationFrame !== null) {
cancelAnimationFrame(this.animationFrame);
@@ -222,7 +226,6 @@ export class InteractionEngine {
}
private onMouseDown(e: MouseEvent): void {
e.preventDefault();
try { this.canvas.setPointerCapture((e as any).pointerId); } catch {}
this.isMouseDown = true;
this.lastMouseScreen = { x: e.clientX, y: e.clientY };
@@ -342,7 +345,6 @@ export class InteractionEngine {
}
private onMouseUp(e: MouseEvent): void {
e.preventDefault();
try { this.canvas.releasePointerCapture((e as any).pointerId); } catch {}
this.isMouseDown = false;
@@ -373,7 +375,7 @@ export class InteractionEngine {
const final = this.applyOrtho(snapped.x, snapped.y);
const tool = this.state.activeTool;
// 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.confirmDraw();
return;