@pooder/kit 2.0.0 → 3.0.0

package/src/mirror.ts

@@ -1,39 +1,99 @@
-import { Command, Editor, Extension, OptionSchema } from "@pooder/core";
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
+} from "@pooder/core";
+import CanvasService from "./CanvasService";
 
-export interface MirrorToolOptions {
-  enabled: boolean;
-}
+export class MirrorTool implements Extension {
+  id = "pooder.kit.mirror";
 
-export class MirrorTool implements Extension<MirrorToolOptions> {
-  public name = "MirrorTool";
-  public options: MirrorToolOptions = {
-    enabled: false,
+  public metadata = {
+    name: "MirrorTool",
   };
+  private enabled = false;
 
-  public schema: Record<keyof MirrorToolOptions, OptionSchema> = {
-    enabled: {
-      type: "boolean",
-      label: "Mirror View",
-    },
-  };
+  private canvasService?: CanvasService;
 
-  onMount(editor: Editor) {
-    if (this.options.enabled) {
-      this.applyMirror(editor, true);
+  constructor(
+    options?: Partial<{
+      enabled: boolean;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
     }
   }
 
-  onUpdate(editor: Editor) {
-    this.applyMirror(editor, this.options.enabled);
+  toJSON() {
+    return {
+      enabled: this.enabled,
+    };
   }
 
-  onUnmount(editor: Editor) {
-    // Force disable on unmount to restore view
-    this.applyMirror(editor, false);
+  loadFromJSON(json: any) {
+    this.enabled = json.enabled;
   }
 
-  private applyMirror(editor: Editor, enabled: boolean) {
-    const canvas = editor.canvas;
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for MirrorTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.enabled = configService.get("mirror.enabled", this.enabled);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key === "mirror.enabled") {
+          this.applyMirror(e.value);
+        }
+      });
+    }
+
+    // Initialize with current state (if enabled was persisted)
+    if (this.enabled) {
+      this.applyMirror(true);
+    }
+  }
+
+  deactivate(context: ExtensionContext) {
+    this.applyMirror(false);
+    this.canvasService = undefined;
+  }
+
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "mirror.enabled",
+          type: "boolean",
+          label: "Enable Mirror",
+          default: false,
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "setMirror",
+          title: "Set Mirror",
+          handler: (enabled: boolean) => {
+            this.applyMirror(enabled);
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private applyMirror(enabled: boolean) {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
     if (!canvas) return;
 
     const width = canvas.width || 800;
@@ -54,6 +114,7 @@ export class MirrorTool implements Extension<MirrorToolOptions> {
 
       canvas.setViewportTransform(vpt as any);
       canvas.requestRenderAll();
+      this.enabled = true;
     } else if (!enabled && isFlipped) {
       // Restore
       vpt[0] = -vpt[0]; // Unflip scale
@@ -61,31 +122,7 @@ export class MirrorTool implements Extension<MirrorToolOptions> {
 
       canvas.setViewportTransform(vpt as any);
       canvas.requestRenderAll();
+      this.enabled = false;
     }
   }
-
-  commands: Record<string, Command> = {
-    toggleMirror: {
-      execute: (editor: Editor) => {
-        this.options.enabled = !this.options.enabled;
-        this.applyMirror(editor, this.options.enabled);
-        return true;
-      },
-    },
-    setMirror: {
-      execute: (editor: Editor, enabled: boolean) => {
-        if (this.options.enabled === enabled) return true;
-        this.options.enabled = enabled;
-        this.applyMirror(editor, enabled);
-        return true;
-      },
-      schema: {
-        enabled: {
-          type: "boolean",
-          label: "Enabled",
-          required: true,
-        },
-      },
-    },
-  };
 }

package/src/ruler.ts

@@ -1,111 +1,216 @@
 import {
-  Command,
-  Editor,
-  EditorState,
   Extension,
-  OptionSchema,
-  PooderLayer,
-  Rect,
-  Line,
-  Text,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
 } from "@pooder/core";
+import { Rect, Line, Text } from "fabric";
+import CanvasService from "./CanvasService";
 
-export interface RulerToolOptions {
-  unit: "px" | "mm" | "cm" | "in";
-  thickness: number;
-  backgroundColor: string;
-  textColor: string;
-  lineColor: string;
-  fontSize: number;
-}
-
-export class RulerTool implements Extension<RulerToolOptions> {
-  public name = "RulerTool";
-  public options: RulerToolOptions = {
-    unit: "px",
-    thickness: 20,
-    backgroundColor: "#f0f0f0",
-    textColor: "#333333",
-    lineColor: "#999999",
-    fontSize: 10,
-  };
+export class RulerTool implements Extension {
+  id = "pooder.kit.ruler";
 
-  public schema: Record<keyof RulerToolOptions, OptionSchema> = {
-    unit: {
-      type: "select",
-      options: ["px", "mm", "cm", "in"],
-      label: "Unit",
-    },
-    thickness: { type: "number", min: 10, max: 100, label: "Thickness" },
-    backgroundColor: { type: "color", label: "Background Color" },
-    textColor: { type: "color", label: "Text Color" },
-    lineColor: { type: "color", label: "Line Color" },
-    fontSize: { type: "number", min: 8, max: 24, label: "Font Size" },
+  public metadata = {
+    name: "RulerTool",
   };
 
-  onMount(editor: Editor) {
-    this.createLayer(editor);
-    this.updateRuler(editor);
+  private unit: "px" | "mm" | "cm" | "in" = "px";
+  private thickness: number = 20;
+  private backgroundColor: string = "#f0f0f0";
+  private textColor: string = "#333333";
+  private lineColor: string = "#999999";
+  private fontSize: number = 10;
+
+  private canvasService?: CanvasService;
+
+  constructor(
+    options?: Partial<{
+      unit: "px" | "mm" | "cm" | "in";
+      thickness: number;
+      backgroundColor: string;
+      textColor: string;
+      lineColor: string;
+      fontSize: number;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
   }
 
-  onUnmount(editor: Editor) {
-    this.destroyLayer(editor);
-  }
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for RulerTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.unit = configService.get("ruler.unit", this.unit);
+      this.thickness = configService.get("ruler.thickness", this.thickness);
+      this.backgroundColor = configService.get(
+        "ruler.backgroundColor",
+        this.backgroundColor,
+      );
+      this.textColor = configService.get("ruler.textColor", this.textColor);
+      this.lineColor = configService.get("ruler.lineColor", this.lineColor);
+      this.fontSize = configService.get("ruler.fontSize", this.fontSize);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("ruler.")) {
+          const prop = e.key.split(".")[1];
+          if (prop && prop in this) {
+            (this as any)[prop] = e.value;
+            this.updateRuler();
+          }
+        }
+      });
+    }
 
-  onUpdate(editor: Editor, state: EditorState) {
-    this.updateRuler(editor);
+    this.createLayer();
+    this.updateRuler();
   }
 
-  onDestroy(editor: Editor) {
-    this.destroyLayer(editor);
+  deactivate(context: ExtensionContext) {
+    this.destroyLayer();
+    this.canvasService = undefined;
   }
 
-  private getLayer(editor: Editor) {
-    return editor.canvas
-      .getObjects()
-      .find((obj: any) => obj.data?.id === "ruler-overlay") as
-      | PooderLayer
-      | undefined;
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "ruler.unit",
+          type: "select",
+          label: "Unit",
+          options: ["px", "mm", "cm", "in"],
+          default: "px",
+        },
+        {
+          id: "ruler.thickness",
+          type: "number",
+          label: "Thickness",
+          min: 10,
+          max: 100,
+          default: 20,
+        },
+        {
+          id: "ruler.backgroundColor",
+          type: "color",
+          label: "Background Color",
+          default: "#f0f0f0",
+        },
+        {
+          id: "ruler.textColor",
+          type: "color",
+          label: "Text Color",
+          default: "#333333",
+        },
+        {
+          id: "ruler.lineColor",
+          type: "color",
+          label: "Line Color",
+          default: "#999999",
+        },
+        {
+          id: "ruler.fontSize",
+          type: "number",
+          label: "Font Size",
+          min: 8,
+          max: 24,
+          default: 10,
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "setUnit",
+          title: "Set Ruler Unit",
+          handler: (unit: "px" | "mm" | "cm" | "in") => {
+            if (this.unit === unit) return true;
+            this.unit = unit;
+            this.updateRuler();
+            return true;
+          },
+        },
+        {
+          command: "setTheme",
+          title: "Set Ruler Theme",
+          handler: (
+            theme: Partial<{
+              backgroundColor: string;
+              textColor: string;
+              lineColor: string;
+              fontSize: number;
+              thickness: number;
+            }>,
+          ) => {
+            const oldState = {
+              backgroundColor: this.backgroundColor,
+              textColor: this.textColor,
+              lineColor: this.lineColor,
+              fontSize: this.fontSize,
+              thickness: this.thickness,
+            };
+            const newState = { ...oldState, ...theme };
+            if (JSON.stringify(newState) === JSON.stringify(oldState))
+              return true;
+
+            Object.assign(this, newState);
+            this.updateRuler();
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
   }
 
-  private createLayer(editor: Editor) {
-    let layer = this.getLayer(editor);
+  private getLayer() {
+    return this.canvasService?.getLayer("ruler-overlay");
+  }
 
-    if (!layer) {
-      const width = editor.canvas.width || 800;
-      const height = editor.canvas.height || 600;
+  private createLayer() {
+    if (!this.canvasService) return;
 
-      layer = new PooderLayer([], {
-        width,
-        height,
-        selectable: false,
-        evented: false,
-        data: { id: "ruler-overlay" },
-      } as any);
+    const canvas = this.canvasService.canvas;
+    const width = canvas.width || 800;
+    const height = canvas.height || 600;
 
-      editor.canvas.add(layer);
-    }
+    const layer = this.canvasService.createLayer("ruler-overlay", {
+      width,
+      height,
+      selectable: false,
+      evented: false,
+      left: 0,
+      top: 0,
+      originX: "left",
+      originY: "top",
+    });
 
-    editor.canvas.bringObjectToFront(layer);
+    canvas.bringObjectToFront(layer);
   }
 
-  private destroyLayer(editor: Editor) {
-    const layer = this.getLayer(editor);
+  private destroyLayer() {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
     if (layer) {
-      editor.canvas.remove(layer);
+      this.canvasService.canvas.remove(layer);
     }
   }
 
-  private updateRuler(editor: Editor) {
-    const layer = this.getLayer(editor);
+  private updateRuler() {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
     if (!layer) return;
 
     layer.remove(...layer.getObjects());
 
-    const { thickness, backgroundColor, lineColor, textColor, fontSize } =
-      this.options;
-    const width = editor.canvas.width || 800;
-    const height = editor.canvas.height || 600;
+    const { thickness, backgroundColor, lineColor, textColor, fontSize } = this;
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
 
     // Backgrounds
     const topBg = new Rect({
@@ -140,7 +245,9 @@ export class RulerTool implements Extension<RulerToolOptions> {
       evented: false,
     });
 
-    layer.add(topBg, leftBg, cornerBg);
+    layer.add(topBg);
+    layer.add(leftBg);
+    layer.add(cornerBg);
 
     // Drawing Constants (Pixel based for now)
     const step = 100; // Major tick
@@ -212,44 +319,7 @@ export class RulerTool implements Extension<RulerToolOptions> {
     }
 
     // Always bring ruler to front
-    editor.canvas.bringObjectToFront(layer);
-    editor.canvas.requestRenderAll();
+    this.canvasService.canvas.bringObjectToFront(layer);
+    this.canvasService.canvas.requestRenderAll();
   }
-
-  commands: Record<string, Command> = {
-    setUnit: {
-      execute: (editor: Editor, unit: "px" | "mm" | "cm" | "in") => {
-        if (this.options.unit === unit) return true;
-        this.options.unit = unit;
-        this.updateRuler(editor);
-        return true;
-      },
-      schema: {
-        unit: {
-          type: "string",
-          label: "Unit",
-          options: ["px", "mm", "cm", "in"],
-          required: true,
-        },
-      },
-    },
-    setTheme: {
-      execute: (editor: Editor, theme: Partial<RulerToolOptions>) => {
-        const newOptions = { ...this.options, ...theme };
-        if (JSON.stringify(newOptions) === JSON.stringify(this.options))
-          return true;
-
-        this.options = newOptions;
-        this.updateRuler(editor);
-        return true;
-      },
-      schema: {
-        theme: {
-          type: "object",
-          label: "Theme",
-          required: true,
-        },
-      },
-    },
-  };
 }