feat(canvas): Create ZoomPanController for mouse wheel zoom, drag pan, coordinate transforms, zoom limits

2026-06-22 07:18:55 +00:00
parent ed96766ea8
commit 6f0ec40998
1 changed files with 138 additions and 0 deletions
@@ -0,0 +1,138 @@
+type Viewport = {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+};
+
+type Transform = {
+  a: number; // scale X
+  b: number; // skew Y
+  c: number; // skew X
+  d: number; // scale Y
+  e: number; // translate X
+  f: number; // translate Y
+};
+
+export class ZoomPanController {
+  private canvas: HTMLCanvasElement;
+  private scale: number = 1;
+  private translateX: number = 0;
+  private translateY: number = 0;
+  private isDragging: boolean = false;
+  private dragStartX: number = 0;
+  private dragStartY: number = 0;
+  private dragStartTranslateX: number = 0;
+  private dragStartTranslateY: number = 0;
+  private minScale: number = 0.001;
+  private maxScale: number = 1000;
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.canvas = canvas;
+    this.setupEventListeners();
+  }
+
+  private setupEventListeners(): void {
+    this.canvas.addEventListener('wheel', this.handleWheel.bind(this));
+    this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
+    this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
+    this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
+    this.canvas.addEventListener('mouseleave', this.handleMouseUp.bind(this));
+  }
+
+  private handleWheel(event: WheelEvent): void {
+    event.preventDefault();
+    
+    const zoomIntensity = 0.1;
+    const delta = event.deltaY > 0 ? -1 : 1;
+    const zoomFactor = Math.exp(delta * zoomIntensity);
+    
+    // Calculate mouse position in world coordinates
+    const rect = this.canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    
+    const worldX = (mouseX - this.translateX) / this.scale;
+    const worldY = (mouseY - this.translateY) / this.scale;
+    
+    // Apply zoom
+    const newScale = this.scale * zoomFactor;
+    this.scale = Math.max(this.minScale, Math.min(newScale, this.maxScale));
+    
+    // Adjust translate to keep mouse position constant
+    this.translateX = mouseX - worldX * this.scale;
+    this.translateY = mouseY - worldY * this.scale;
+  }
+
+  private handleMouseDown(event: MouseEvent): void {
+    if (event.button === 0) { // Left mouse button
+      this.isDragging = true;
+      this.dragStartX = event.clientX;
+      this.dragStartY = event.clientY;
+      this.dragStartTranslateX = this.translateX;
+      this.dragStartTranslateY = this.translateY;
+      this.canvas.style.cursor = 'grabbing';
+    }
+  }
+
+  private handleMouseMove(event: MouseEvent): void {
+    if (this.isDragging) {
+      const deltaX = event.clientX - this.dragStartX;
+      const deltaY = event.clientY - this.dragStartY;
+      
+      this.translateX = this.dragStartTranslateX + deltaX;
+      this.translateY = this.dragStartTranslateY + deltaY;
+    }
+  }
+
+  private handleMouseUp(): void {
+    if (this.isDragging) {
+      this.isDragging = false;
+      this.canvas.style.cursor = 'default';
+    }
+  }
+
+  public getTransform(): Transform {
+    return {
+      a: this.scale,
+      b: 0,
+      c: 0,
+      d: this.scale,
+      e: this.translateX,
+      f: this.translateY
+    };
+  }
+
+  public getViewport(): Viewport {
+    const rect = this.canvas.getBoundingClientRect();
+    const minX = (0 - this.translateX) / this.scale;
+    const minY = (0 - this.translateY) / this.scale;
+    const maxX = (rect.width - this.translateX) / this.scale;
+    const maxY = (rect.height - this.translateY) / this.scale;
+    
+    return { minX, minY, maxX, maxY };
+  }
+
+  public setScale(scale: number): void {
+    this.scale = Math.max(this.minScale, Math.min(scale, this.maxScale));
+  }
+
+  public setTranslate(x: number, y: number): void {
+    this.translateX = x;
+    this.translateY = y;
+  }
+
+  public getScale(): number {
+    return this.scale;
+  }
+
+  public getTranslate(): { x: number; y: number } {
+    return { x: this.translateX, y: this.translateY };
+  }
+
+  public reset(): void {
+    this.scale = 1;
+    this.translateX = 0;
+    this.translateY = 0;
+  }
+}