@pooder/kit 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "paper": "^0.12.18",
-    "@pooder/core": "0.1.0"
+    "fabric": "^7.0.0",
+    "@pooder/core": "1.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",

package/src/CanvasService.ts

@@ -0,0 +1,65 @@
+import { Canvas, Group, FabricObject } from "fabric";
+import { Service } from "@pooder/core";
+
+export default class CanvasService implements Service {
+  public canvas: Canvas;
+
+  constructor(el: HTMLCanvasElement | string | Canvas, options?: any) {
+    if (el instanceof Canvas) {
+      this.canvas = el;
+    } else {
+      this.canvas = new Canvas(el, {
+        preserveObjectStacking: true,
+        ...options,
+      });
+    }
+  }
+
+  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/background.ts

@@ -1,83 +1,174 @@
 import {
-  Command,
-  Editor,
-  EditorState,
   Extension,
-  Image,
-  OptionSchema,
-  PooderLayer,
-  Rect,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
 } from "@pooder/core";
+import { Rect, FabricImage as Image } from "fabric";
+import CanvasService from "./CanvasService";
 
-interface BackgroundToolOptions {
-  color: string;
-  url: string;
-}
-export class BackgroundTool implements Extension<BackgroundToolOptions> {
-  public name = "BackgroundTool";
-  public options: BackgroundToolOptions = {
-    color: "",
-    url: "",
-  };
-  public schema: Record<keyof BackgroundToolOptions, OptionSchema> = {
-    color: {
-      type: "color",
-      label: "Background Color",
-    },
-    url: {
-      type: "string",
-      label: "Image URL",
-    },
+export class BackgroundTool implements Extension {
+  id = "pooder.kit.background";
+  public metadata = {
+    name: "BackgroundTool",
   };
 
-  private initLayer(editor: Editor) {
-    let backgroundLayer = editor.getLayer("background");
-    if (!backgroundLayer) {
-      backgroundLayer = new PooderLayer([], {
-        width: editor.canvas.width,
-        height: editor.canvas.height,
-        selectable: false,
-        evented: false,
-        data: {
-          id: "background",
-        },
-      });
+  private color: string = "";
+  private url: string = "";
+
+  private canvasService?: CanvasService;
 
-      editor.canvas.add(backgroundLayer);
-      editor.canvas.sendObjectToBack(backgroundLayer);
+  constructor(
+    options?: Partial<{
+      color: string;
+      url: string;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
     }
   }
-  onMount(editor: Editor) {
-    this.initLayer(editor);
-    this.updateBackground(editor, this.options);
+
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for BackgroundTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.color = configService.get("background.color", this.color);
+      this.url = configService.get("background.url", this.url);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("background.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[BackgroundTool] Config change detected: ${e.key} -> ${e.value}, prop: ${prop}`,
+          );
+          if (prop && prop in this) {
+            console.log(
+              `[BackgroundTool] Updating option ${prop} to ${e.value}`,
+            );
+            (this as any)[prop] = e.value;
+            this.updateBackground();
+          } else {
+            console.warn(
+              `[BackgroundTool] Property ${prop} not found in options`,
+            );
+          }
+        }
+      });
+    }
+
+    this.initLayer();
+    this.updateBackground();
   }
 
-  onUnmount(editor: Editor) {
-    const layer = editor.getLayer("background");
-    if (layer) {
-      editor.canvas.remove(layer);
+  deactivate(context: ExtensionContext) {
+    if (this.canvasService) {
+      const layer = this.canvasService.getLayer("background");
+      if (layer) {
+        this.canvasService.canvas.remove(layer);
+      }
+      this.canvasService = undefined;
     }
   }
 
-  onUpdate(editor: Editor, state: EditorState) {
-    this.updateBackground(editor, this.options);
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "background.color",
+          type: "color",
+          label: "Background Color",
+          default: "",
+        },
+        {
+          id: "background.url",
+          type: "string",
+          label: "Image URL",
+          default: "",
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "reset",
+          title: "Reset Background",
+          handler: () => {
+            this.updateBackground();
+            return true;
+          },
+        },
+        {
+          command: "clear",
+          title: "Clear Background",
+          handler: () => {
+            this.color = "transparent";
+            this.url = "";
+            this.updateBackground();
+            return true;
+          },
+        },
+        {
+          command: "setBackgroundColor",
+          title: "Set Background Color",
+          handler: (color: string) => {
+            if (this.color === color) return true;
+            this.color = color;
+            this.updateBackground();
+            return true;
+          },
+        },
+        {
+          command: "setBackgroundImage",
+          title: "Set Background Image",
+          handler: (url: string) => {
+            if (this.url === url) return true;
+            this.url = url;
+            this.updateBackground();
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
   }
 
-  private async updateBackground(
-    editor: Editor,
-    options: BackgroundToolOptions,
-  ) {
-    const layer = editor.getLayer("background");
+  private initLayer() {
+    if (!this.canvasService) return;
+    let backgroundLayer = this.canvasService.getLayer("background");
+    if (!backgroundLayer) {
+      backgroundLayer = this.canvasService.createLayer("background", {
+        width: this.canvasService.canvas.width,
+        height: this.canvasService.canvas.height,
+        selectable: false,
+        evented: false,
+      });
+      this.canvasService.canvas.sendObjectToBack(backgroundLayer);
+    }
+  }
+
+  private async updateBackground() {
+    if (!this.canvasService) return;
+    const layer = this.canvasService.getLayer("background");
     if (!layer) {
       console.warn("[BackgroundTool] Background layer not found");
       return;
     }
 
-    const { color, url } = options;
-    const width = editor.state.width;
-    const height = editor.state.height;
+    const { color, url } = this;
 
-    let rect = editor.getObject("background-color-rect", "background");
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+
+    let rect = this.canvasService.getObject(
+      "background-color-rect",
+      "background",
+    ) as Rect;
     if (rect) {
       rect.set({
         fill: color,
@@ -97,7 +188,10 @@ export class BackgroundTool implements Extension<BackgroundToolOptions> {
       layer.sendObjectToBack(rect);
     }
 
-    let img = editor.getObject("background-image", "background") as Image;
+    let img = this.canvasService.getObject(
+      "background-image",
+      "background",
+    ) as Image;
     try {
       if (img) {
         if (img.getSrc() !== url) {
@@ -126,58 +220,11 @@ export class BackgroundTool implements Extension<BackgroundToolOptions> {
           layer.add(img);
         }
       }
-      editor.canvas.requestRenderAll();
+      this.canvasService.requestRenderAll();
     } catch (e) {
       console.error("[BackgroundTool] Failed to load image", e);
     }
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
   }
-
-  commands: Record<string, Command> = {
-    reset: {
-      execute: (editor: Editor) => {
-        this.updateBackground(editor, this.options);
-        return true;
-      },
-    },
-    clear: {
-      execute: (editor: Editor) => {
-        this.options = {
-          color: "transparent",
-          url: "",
-        };
-        this.updateBackground(editor, this.options);
-        return true;
-      },
-    },
-    setBackgroundColor: {
-      execute: (editor: Editor, color: string) => {
-        if (this.options.color === color) return true;
-        this.options.color = color;
-        this.updateBackground(editor, this.options);
-        return true;
-      },
-      schema: {
-        color: {
-          type: "string", // Should be 'color' if supported by CommandArgSchema, but using 'string' for now as per previous plan
-          label: "Background Color",
-          required: true,
-        },
-      },
-    },
-    setBackgroundImage: {
-      execute: (editor: Editor, url: string) => {
-        if (this.options.url === url) return true;
-        this.options.url = url;
-        this.updateBackground(editor, this.options);
-        return true;
-      },
-      schema: {
-        url: {
-          type: "string",
-          label: "Image URL",
-          required: true,
-        },
-      },
-    },
-  };
 }

package/src/coordinate.ts

@@ -0,0 +1,49 @@
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export class Coordinate {
+  /**
+   * Convert an absolute value to a normalized value (0-1).
+   * @param value Absolute value (e.g., pixels)
+   * @param total Total dimension size (e.g., canvas width)
+   */
+  static toNormalized(value: number, total: number): number {
+    return total === 0 ? 0 : value / total;
+  }
+
+  /**
+   * Convert a normalized value (0-1) to an absolute value.
+   * @param normalized Normalized value (0-1)
+   * @param total Total dimension size (e.g., canvas width)
+   */
+  static toAbsolute(normalized: number, total: number): number {
+    return normalized * total;
+  }
+
+  /**
+   * Normalize a point's coordinates.
+   */
+  static normalizePoint(point: Point, size: Size): Point {
+    return {
+      x: this.toNormalized(point.x, size.width),
+      y: this.toNormalized(point.y, size.height),
+    };
+  }
+
+  /**
+   * Denormalize a point's coordinates to absolute pixels.
+   */
+  static denormalizePoint(point: Point, size: Size): Point {
+    return {
+      x: this.toAbsolute(point.x, size.width),
+      y: this.toAbsolute(point.y, size.height),
+    };
+  }
+}