task(A2): tool dispatcher behind flag

2026-08-26 21:14:46 +02:00
parent 5d7fa23825
commit 4a7a8f912f
5 changed files with 396 additions and 0 deletions
@@ -0,0 +1,151 @@
+/**
+ * dispatcher.ts – InteractionDispatcher (Task A2).
+ *
+ * Ersetzt langfristig den 1157-Zeilen-Switch der InteractionEngine:
+ * - Routet DOM-Pointer-/Key-Events an das AKTIVE V2-Werkzeug (ToolExtensionV2)
+ * - Normalisiert Events (pointer.ts) zu Weltkoordinaten
+ * - Führt eine ToolSession als Down/Up-Guard
+ * - Kein Werkzeugwissen! Alle Logik liegt in den Plugins.
+ *
+ * Aktivierung per Feature-Flag VITE_TOOL_DISPATCHER=v2 (CanvasArea, A2 Schritt 4).
+ */
+import type { ToolExtensionV2, ToolContext } from '../plugins/types';
+import { pluginRegistry } from '../plugins/PluginRegistry';
+import { toToolPointerEvent } from './pointer';
+import { ToolSession } from './session';
+import type { ZoomPanController } from '../canvas/ZoomPanController';
+
+export interface DispatcherDeps {
+  zoomPan: ZoomPanController;
+  /** Liefert Optionsstände je ToolId (typisch: toolStore.optionValues). */
+  getOptions?(toolId: string): Record<string, unknown>;
+  /** Statuszeile (typisch: StatusBar-Bridge). */
+  setStatus?(msg: string): void;
+  /** Live-Vorschau-Ziel (typisch RenderEngine.setPreviewElement). */
+  setPreview?(el: unknown | null): void;
+  /** Tool-Nachschlag überschreibbar (Default: aktive Registry-Tools). */
+  toolLookup?(toolId: string): ToolExtensionV2 | undefined;
+}
+
+export class InteractionDispatcher {
+  private readonly canvas: HTMLCanvasElement;
+  private readonly deps: DispatcherDeps;
+  private readonly session = new ToolSession();
+  private active: ToolExtensionV2 | null = null;
+  private bound = false;
+
+  /** Zuletzt gesetzter Status-Text (für Tests/Debug). */
+  lastStatus = '';
+
+  constructor(canvas: HTMLCanvasElement, deps: DispatcherDeps) {
+    this.canvas = canvas;
+    this.deps = deps;
+    this.attach();
+  }
+
+  /** Setzt das aktive Werkzeug (null = deaktiviert Routing). */
+  setActive(toolId: string | null): void {
+    if (this.active && this.session.isActive) {
+      // Sitzung sauber abbrechen, bevor gewechselt wird
+      this.active.handlers.cancel?.(this.buildContext());
+      this.session.end();
+    }
+    if (!toolId) {
+      this.active = null;
+      return;
+    }
+    const lookup = this.deps.toolLookup ?? ((id: string) => pluginRegistry.getToolV2(id));
+    const tool = lookup(toolId);
+    if (!tool) {
+      console.warn(`[InteractionDispatcher] kein aktives V2-Tool '${toolId}'`);
+      this.active = null;
+      return;
+    }
+    this.active = tool;
+    this.setStatus(`${tool.manifest.label} aktiv`);
+  }
+
+  /** Aktives Werkzeug (oder null). */
+  getActive(): ToolExtensionV2 | null {
+    return this.active;
+  }
+
+  /** Entfernt alle Event-Listener (aufräumen beim Unmount). */
+  destroy(): void {
+    if (!this.bound) return;
+    this.canvas.removeEventListener('pointerdown', this.onDown);
+    window.removeEventListener('pointermove', this.onMove);
+    window.removeEventListener('pointerup', this.onUp);
+    window.removeEventListener('keydown', this.onKey);
+    this.bound = false;
+  }
+
+  // ── intern ───────────────────────────────────────────────
+
+  private attach(): void {
+    if (this.bound) return;
+    this.canvas.addEventListener('pointerdown', this.onDown);
+    window.addEventListener('pointermove', this.onMove);
+    window.addEventListener('pointerup', this.onUp);
+    window.addEventListener('keydown', this.onKey);
+    this.bound = true;
+  }
+
+  private buildContext(): ToolContext {
+    const toolId = this.active?.manifest.id ?? '';
+    return {
+      options: this.deps.getOptions?.(toolId) ?? {},
+      setStatus: (msg) => this.setStatus(msg),
+      setPreview: (el) => this.deps.setPreview?.(el),
+    };
+  }
+
+  private setStatus(msg: string): void {
+    this.lastStatus = msg;
+    this.deps.setStatus?.(msg);
+  }
+
+  private onDown = (e: PointerEvent): void => {
+    if (!this.active) return;
+    // Rechtsklick = Abbruch wie ESC
+    if (e.button === 2) {
+      this.cancelActive();
+      return;
+    }
+    const tpe = toToolPointerEvent(e, this.canvas, this.deps.zoomPan);
+    this.session.begin();
+    this.active.handlers.down?.(tpe, this.buildContext());
+  };
+
+  private onMove = (e: PointerEvent): void => {
+    if (!this.active || !this.session.isActive) return;
+    const tpe = toToolPointerEvent(e, this.canvas, this.deps.zoomPan);
+    this.active.handlers.move?.(tpe, this.buildContext());
+  };
+
+  private onUp = (e: PointerEvent): void => {
+    if (!this.active || !this.session.isActive) return;
+    const tpe = toToolPointerEvent(e, this.canvas, this.deps.zoomPan);
+    try {
+      this.active.handlers.up?.(tpe, this.buildContext());
+    } finally {
+      this.session.end();
+    }
+  };
+
+  private onKey = (e: KeyboardEvent): void => {
+    if (!this.active) return;
+    if (e.key === 'Escape') {
+      this.cancelActive();
+      return;
+    }
+    const consumed = this.active.handlers.key?.(e, this.buildContext()) === true;
+    if (consumed) e.preventDefault();
+  };
+
+  private cancelActive(): void {
+    if (!this.active) return;
+    this.active.handlers.cancel?.(this.buildContext());
+    this.session.end();
+  }
+}
@@ -0,0 +1,53 @@
+/**
+ * pointer.ts – DOM-PointerEvent → ToolPointerEvent Normalisierung (Task A2).
+ * Konvertiert Bildschirmkoordinaten in Weltkoordinaten über ZoomPanController.
+ */
+import type { ToolPointerEvent } from '../plugins/types';
+import type { ZoomPanController } from '../canvas/ZoomPanController';
+
+/**
+ * Normalisiert ein Pointer/Mouse-Event zu einem ToolPointerEvent.
+ * @param e DOM-Event (MouseEvent ist Obermenge von PointerEvent-Feldern)
+ * @param canvas Das Canvas-Element (für offset-Koordinaten)
+ * @param zoomPan aktiver Zoom/Pan-Controller
+ */
+export function toToolPointerEvent(
+  e: MouseEvent,
+  canvas: HTMLCanvasElement,
+  zoomPan: ZoomPanController,
+): ToolPointerEvent {
+  const rect = canvas.getBoundingClientRect();
+  const sx = e.clientX - rect.left;
+  const sy = e.clientY - rect.top;
+  const world = zoomPan.screenToWorld(sx, sy);
+  return {
+    world: { x: world.x, y: world.y },
+    screen: { x: sx, y: sy },
+    button: e.button,
+    shift: e.shiftKey,
+    alt: e.altKey,
+    ctrl: e.ctrlKey || e.metaKey,
+  };
+}
+
+/** Fangt weitere Pointer-Events auf dem Canvas bis zum release (Pen/Tablet- Komfort). */
+export function capturePointer(canvas: HTMLCanvasElement, e: PointerEvent): void {
+  if (typeof canvas.setPointerCapture === 'function') {
+    try {
+      canvas.setPointerCapture(e.pointerId);
+    } catch {
+      /* pointerId evtl. schon ungültig — unkritisch */
+    }
+  }
+}
+
+/** Gibt einen vorherigen Pointer-Capture frei. */
+export function releasePointer(canvas: HTMLCanvasElement, e: PointerEvent): void {
+  if (typeof canvas.releasePointerCapture === 'function') {
+    try {
+      canvas.releasePointerCapture(e.pointerId);
+    } catch {
+      /* ignorieren */
+    }
+  }
+}
@@ -0,0 +1,34 @@
+/**
+ * session.ts – Minimaler Werkzeug-Sitzungszustand (Task A2).
+ *
+ * phase 'idle'   : kein Ziehen aktiv, Tool wartet auf down
+ * phase 'active' : down ist erfolgt; Tool zieht/zeichnet bis up/cancel
+ *
+ * Der Dispatcher nutzt das, um move-Events nur während aktiver Sitzung an
+ * Handler durchzureichen (und als Guard gegen verlorene up-Events).
+ */
+export type ToolPhase = 'idle' | 'active';
+
+export class ToolSession {
+  private current: ToolPhase = 'idle';
+
+  /** Ist eine Zeichensitzung aktiv (zwischen down und up)? */
+  get isActive(): boolean {
+    return this.current === 'active';
+  }
+
+  /** Aktuelle Phase. */
+  get phase(): ToolPhase {
+    return this.current;
+  }
+
+  /** Startet eine Sitzung (nach einem gültigen down). */
+  begin(): void {
+    this.current = 'active';
+  }
+
+  /** Beendet die Sitzung regulär (up) oder abgebrochen (cancel/ESC). */
+  end(): void {
+    this.current = 'idle';
+  }
+}