Add camera zoom

src/application.ts

@@ -138,6 +138,24 @@ export class Application {
         return true;
     }
 
+    zoomIn() {
+        this._scene.camera.zoomIn();
+        this.refresh();
+        return true;
+    }
+
+    zoomOut() {
+        this._scene.camera.zoomOut();
+        this.refresh();
+        return true;
+    }
+
+    resetZoom() {
+        this._scene.camera.resetZoom();
+        this.refresh();
+        return true;
+    }
+
     static registerInstance(element: HTMLCanvasElement, app: Application) {
         element.setAttribute("data-klee-instance", Application.instances.length.toString());
         Application.instances.push(app);
@@ -168,3 +186,9 @@ export class Application {
         return app;
     }
 }
+
+// Export Application to global scope for external controls
+if (window) {
+    window.KleeApplication = Application;
+}
+

src/camera.ts

@@ -5,6 +5,9 @@ export class Camera {
 
     private _canvas: Canvas2D;
     private _position: Vector2;
+    private _zoom: number = 1.0;
+    private _minZoom: number = 0.5;
+    private _maxZoom: number = 2.0;
 
     constructor(canvas: Canvas2D) {
         this._canvas = canvas;
@@ -15,18 +18,62 @@ export class Camera {
         return this._position;
     }
 
+    public get zoom(): number {
+        return this._zoom;
+    }
+
+    public set zoom(value: number) {
+        this._zoom = Math.max(this._minZoom, Math.min(this._maxZoom, value));
+    }
+
+    public get isAtMinZoom(): boolean {
+        return this._zoom <= this._minZoom;
+    }
+
+    public get isAtMaxZoom(): boolean {
+        return this._zoom >= this._maxZoom;
+    }
+
     prepareViewport() {
         this._canvas.translate(Math.round(this._position.x), Math.round(this._position.y));
+        this._canvas.scale(this._zoom, this._zoom);
     }
 
     moveRelative(value: Vector2) {
         this._position = this._position.add(value);
     }
 
     centerAbsolutePosition(value: Vector2) {
-
         this._position = new Vector2(
             Math.round(value.x + this._canvas.width / 2),
             Math.round(value.y + this._canvas.height / 2));
     }
+
+    zoomIn(factor: number = 1.2) {
+        const centerX = this._canvas.width / 2;
+        const centerY = this._canvas.height / 2;
+        this.zoomAtPoint(factor, centerX, centerY);
+    }
+
+    zoomOut(factor: number = 0.8) {
+        const centerX = this._canvas.width / 2;
+        const centerY = this._canvas.height / 2;
+        this.zoomAtPoint(factor, centerX, centerY);
+    }
+
+    private zoomAtPoint(factor: number, centerX: number, centerY: number) {
+        const oldZoom = this._zoom;
+        this.zoom = this._zoom * factor;
+        const actualFactor = this._zoom / oldZoom;
+
+        // Adjust position so zoom appears centered at the specified point
+        const offsetX = (centerX - this._position.x) * (1 - actualFactor);
+        const offsetY = (centerY - this._position.y) * (1 - actualFactor);
+
+        this._position = this._position.add(new Vector2(offsetX, offsetY));
+    }
+
+    resetZoom() {
+        this._zoom = 1.0;
+    }
 }

src/canvas.ts

@@ -126,6 +126,11 @@ export class Canvas2D {
         return this;
     }
 
+    scale(x: number, y: number) {
+        this._context.scale(x, y);
+        return this;
+    }
+
     fillRect(x: number, y: number, width: number, height: number) {
         this._context.fillRect(x, y, width, height);
         return this;

src/types/window.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Type definitions for window globals
+ */
+
+import { Application } from '../application';
+
+declare global {
+    interface Window {
+        KleeApplication: typeof Application;
+    }
+}
+
+export {};
+