@pooder/kit 4.1.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -23,6 +23,7 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "test": "tsc -p tsconfig.test.json && node .test-dist/tests/run.js"
   }
 }

package/src/CanvasService.ts

@@ -1,89 +1,96 @@
-import { Canvas, Group, FabricObject } from "fabric";
-import { Service, EventBus } from "@pooder/core";
-
-export default class CanvasService implements Service {
-  public canvas: Canvas;
-  private eventBus?: EventBus;
-
-  constructor(el: HTMLCanvasElement | string | Canvas, options?: any) {
-    if (el instanceof Canvas) {
-      this.canvas = el;
-    } else {
-      this.canvas = new Canvas(el, {
-        preserveObjectStacking: true,
-        ...options,
-      });
-    }
-    
-    if (options?.eventBus) {
-      this.setEventBus(options.eventBus);
-    }
-  }
-
-  setEventBus(eventBus: EventBus) {
-    this.eventBus = eventBus;
-    this.setupEvents();
-  }
-
-  private setupEvents() {
-    if (!this.eventBus) return;
-    const bus = this.eventBus;
-
-    const forward = (name: string) => (e: any) => bus.emit(name, e);
-
-    this.canvas.on("selection:created", forward("selection:created"));
-    this.canvas.on("selection:updated", forward("selection:updated"));
-    this.canvas.on("selection:cleared", forward("selection:cleared"));
-    this.canvas.on("object:modified", forward("object:modified"));
-    this.canvas.on("object:added", forward("object:added"));
-    this.canvas.on("object:removed", forward("object:removed"));
-  }
-
-  dispose() {
-    this.canvas.dispose();
-  }
-
-  /**
-   * Get a layer (Group) by its ID.
-   * We assume layers are Groups directly on the canvas with a data.id property.
-   */
-  getLayer(id: string): Group | undefined {
-    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id) as
-      | Group
-      | undefined;
-  }
-
-  /**
-   * Create a layer (Group) with the given ID if it doesn't exist.
-   */
-  createLayer(id: string, options: any = {}): Group {
-    let layer = this.getLayer(id);
-    if (!layer) {
-      const defaultOptions = {
-        selectable: false,
-        evented: false,
-        ...options,
-        data: { ...options.data, id },
-      };
-      layer = new Group([], defaultOptions);
-      this.canvas.add(layer);
-    }
-    return layer;
-  }
-
-  /**
-   * Find an object by ID, optionally within a specific layer.
-   */
-  getObject(id: string, layerId?: string): FabricObject | undefined {
-    if (layerId) {
-      const layer = this.getLayer(layerId);
-      if (!layer) return undefined;
-      return layer.getObjects().find((obj: any) => obj.data?.id === id);
-    }
-    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id);
-  }
-
-  requestRenderAll() {
-    this.canvas.requestRenderAll();
-  }
-}
+import { Canvas, Group, FabricObject } from "fabric";
+import { Service, EventBus } from "@pooder/core";
+import { ViewportSystem } from "./ViewportSystem";
+
+export default class CanvasService implements Service {
+  public canvas: Canvas;
+  public viewport: ViewportSystem;
+  private eventBus?: EventBus;
+
+  constructor(el: HTMLCanvasElement | string | Canvas, options?: any) {
+    if (el instanceof Canvas) {
+      this.canvas = el;
+    } else {
+      this.canvas = new Canvas(el, {
+        preserveObjectStacking: true,
+        ...options,
+      });
+    }
+
+    this.viewport = new ViewportSystem();
+    if (this.canvas.width !== undefined && this.canvas.height !== undefined) {
+      this.viewport.updateContainer(this.canvas.width, this.canvas.height);
+    }
+    
+    if (options?.eventBus) {
+      this.setEventBus(options.eventBus);
+    }
+  }
+
+  setEventBus(eventBus: EventBus) {
+    this.eventBus = eventBus;
+    this.setupEvents();
+  }
+
+  private setupEvents() {
+    if (!this.eventBus) return;
+    const bus = this.eventBus;
+
+    const forward = (name: string) => (e: any) => bus.emit(name, e);
+
+    this.canvas.on("selection:created", forward("selection:created"));
+    this.canvas.on("selection:updated", forward("selection:updated"));
+    this.canvas.on("selection:cleared", forward("selection:cleared"));
+    this.canvas.on("object:modified", forward("object:modified"));
+    this.canvas.on("object:added", forward("object:added"));
+    this.canvas.on("object:removed", forward("object:removed"));
+  }
+
+  dispose() {
+    this.canvas.dispose();
+  }
+
+  /**
+   * Get a layer (Group) by its ID.
+   * We assume layers are Groups directly on the canvas with a data.id property.
+   */
+  getLayer(id: string): Group | undefined {
+    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id) as
+      | Group
+      | undefined;
+  }
+
+  /**
+   * Create a layer (Group) with the given ID if it doesn't exist.
+   */
+  createLayer(id: string, options: any = {}): Group {
+    let layer = this.getLayer(id);
+    if (!layer) {
+      const defaultOptions = {
+        selectable: false,
+        evented: false,
+        ...options,
+        data: { ...options.data, id },
+      };
+      layer = new Group([], defaultOptions);
+      this.canvas.add(layer);
+    }
+    return layer;
+  }
+
+  /**
+   * Find an object by ID, optionally within a specific layer.
+   */
+  getObject(id: string, layerId?: string): FabricObject | undefined {
+    if (layerId) {
+      const layer = this.getLayer(layerId);
+      if (!layer) return undefined;
+      return layer.getObjects().find((obj: any) => obj.data?.id === id);
+    }
+    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id);
+  }
+
+  requestRenderAll() {
+    this.canvas.requestRenderAll();
+  }
+}

package/src/ViewportSystem.ts

@@ -0,0 +1,92 @@
+import { Coordinate, Layout, Point, Size } from "./coordinate";
+
+export class ViewportSystem {
+  private _containerSize: Size = { width: 0, height: 0 };
+  private _physicalSize: Size = { width: 0, height: 0 };
+  private _padding: number = 0;
+  private _layout: Layout = {
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    width: 0,
+    height: 0,
+  };
+
+  constructor(
+    containerSize: Size = { width: 0, height: 0 },
+    physicalSize: Size = { width: 0, height: 0 },
+    padding: number = 40,
+  ) {
+    this._containerSize = containerSize;
+    this._physicalSize = physicalSize;
+    this._padding = padding;
+    this.updateLayout();
+  }
+
+  get layout(): Layout {
+    return this._layout;
+  }
+
+  get scale(): number {
+    return this._layout.scale;
+  }
+
+  get offset(): Point {
+    return { x: this._layout.offsetX, y: this._layout.offsetY };
+  }
+
+  updateContainer(width: number, height: number) {
+    if (
+      this._containerSize.width === width &&
+      this._containerSize.height === height
+    )
+      return;
+    this._containerSize = { width, height };
+    this.updateLayout();
+  }
+
+  updatePhysical(width: number, height: number) {
+    if (this._physicalSize.width === width && this._physicalSize.height === height)
+      return;
+    this._physicalSize = { width, height };
+    this.updateLayout();
+  }
+
+  setPadding(padding: number) {
+    if (this._padding === padding) return;
+    this._padding = padding;
+    this.updateLayout();
+  }
+
+  private updateLayout() {
+    this._layout = Coordinate.calculateLayout(
+      this._containerSize,
+      this._physicalSize,
+      this._padding,
+    );
+  }
+
+  toPixel(value: number): number {
+    return value * this._layout.scale;
+  }
+
+  toPhysical(value: number): number {
+    return this._layout.scale === 0 ? 0 : value / this._layout.scale;
+  }
+
+  toPixelPoint(point: Point): Point {
+    return {
+      x: point.x * this._layout.scale + this._layout.offsetX,
+      y: point.y * this._layout.scale + this._layout.offsetY,
+    };
+  }
+
+  // Convert screen coordinate (e.g. mouse event) to physical coordinate (relative to content origin)
+  toPhysicalPoint(point: Point): Point {
+    if (this._layout.scale === 0) return { x: 0, y: 0 };
+    return {
+      x: (point.x - this._layout.offsetX) / this._layout.scale,
+      y: (point.y - this._layout.offsetY) / this._layout.scale,
+    };
+  }
+}