@pooder/kit 1.0.0 → 3.0.0

package/src/white-ink.ts

@@ -1,301 +1,373 @@
-import {
-    Command,
-    Editor,
-    EditorState,
-    EventHandler,
-    Extension,
-    OptionSchema,
-    Image,
-    filters,
-    PooderObject,
-    PooderLayer
-} from '@pooder/core';
-
-interface WhiteInkToolOptions {
-    customMask: string;
-    opacity: number;
-    enableClip: boolean;
-}
-export class WhiteInkTool implements Extension<WhiteInkToolOptions> {
-    public name = 'WhiteInkTool';
-    public options: WhiteInkToolOptions = {
-        customMask: '',
-        opacity: 1,
-        enableClip: false
-    };
-
-    public schema: Record<keyof WhiteInkToolOptions, OptionSchema> = {
-        customMask: { type: 'string', label: 'Custom Mask URL' },
-        opacity: { type: 'number', min: 0, max: 1, step: 0.01, label: 'Opacity' },
-        enableClip: { type: 'boolean', label: 'Enable Clip' }
-    };
-
-    private syncHandler: EventHandler | undefined;
-
-    onMount(editor: Editor) {
-        this.setup(editor);
-        this.updateWhiteInk(editor, this.options);
-    }
-
-    onUnmount(editor: Editor) {
-        this.teardown(editor);
-    }
-
-    onDestroy(editor: Editor) {
-        this.teardown(editor);
-    }
-
-    private setup(editor: Editor) {
-        let userLayer = editor.getLayer("user");
-        if (!userLayer) {
-            userLayer = new PooderLayer([], {
-                width: editor.state.width,
-                height: editor.state.height,
-                left: 0,
-                top: 0,
-                originX: 'left',
-                originY: 'top',
-                selectable: false,
-                evented: true,
-                subTargetCheck: true,
-                interactive: true,
-                data: {
-                    id: 'user'
-                }
-            });
-            editor.canvas.add(userLayer);
-        }
-
-        if (!this.syncHandler) {
-            this.syncHandler = (e: any) => {
-                const target = e.target;
-                if (target && target.data?.id === 'user-image') {
-                    this.syncWithUserImage(editor);
-                }
-            };
-
-            editor.canvas.on('object:moving', this.syncHandler);
-            editor.canvas.on('object:scaling', this.syncHandler);
-            editor.canvas.on('object:rotating', this.syncHandler);
-            editor.canvas.on('object:modified', this.syncHandler);
-        }
-    }
-
-    private teardown(editor: Editor) {
-        if (this.syncHandler) {
-            editor.canvas.off('object:moving', this.syncHandler);
-            editor.canvas.off('object:scaling', this.syncHandler);
-            editor.canvas.off('object:rotating', this.syncHandler);
-            editor.canvas.off('object:modified', this.syncHandler);
-            this.syncHandler = undefined;
-        }
-
-        const layer = editor.getLayer("user");
-        if (layer) {
-            const whiteInk = editor.getObject("white-ink", "user");
-            if (whiteInk) {
-                layer.remove(whiteInk);
-            }
-        }
-
-        const userImage = editor.getObject("user-image", "user") as any;
-        if (userImage && userImage.clipPath) {
-            userImage.set({ clipPath: undefined });
-        }
-        
-        editor.canvas.requestRenderAll();
-    }
-
-    onUpdate(editor: Editor, state: EditorState) {
-        this.updateWhiteInk(editor, this.options);
-    }
-
-    commands: Record<string, Command> = {
-        setWhiteInkImage: {
-            execute: (editor: Editor, customMask: string, opacity: number, enableClip: boolean = true) => {
-                if (this.options.customMask === customMask && 
-                    this.options.opacity === opacity && 
-                    this.options.enableClip === enableClip) return true;
-
-                this.options.customMask = customMask;
-                this.options.opacity = opacity;
-                this.options.enableClip = enableClip;
-
-                this.updateWhiteInk(editor, this.options);
-
-                return true;
-            },
-            schema: {
-                customMask: {
-                    type: 'string',
-                    label: 'Custom Mask URL',
-                    required: true
-                },
-                opacity: {
-                    type: 'number',
-                    label: 'Opacity',
-                    min: 0,
-                    max: 1,
-                    required: true
-                },
-                enableClip: {
-                    type: 'boolean',
-                    label: 'Enable Clip',
-                    default: true,
-                    required: false
-                }
-            }
-        }
-    };
-
-    private updateWhiteInk(editor: Editor, opts: WhiteInkToolOptions) {
-        const { customMask, opacity, enableClip } = opts;
-
-        const layer = editor.getLayer("user");
-        if (!layer) {
-            console.warn('[WhiteInkTool] User layer not found');
-            return;
-        }
-
-        const whiteInk = editor.getObject("white-ink", "user") as any;
-        const userImage = editor.getObject("user-image", "user") as any;
-
-        if (!customMask) {
-            if (whiteInk) {
-                layer.remove(whiteInk);
-            }
-            if (userImage && userImage.clipPath) {
-                userImage.set({ clipPath: undefined });
-            }
-            editor.canvas.requestRenderAll();
-            return;
-        }
-
-        // Check if we need to load/reload white ink backing
-        if (whiteInk) {
-            const currentSrc = whiteInk.getSrc?.() || whiteInk._element?.src;
-            if (currentSrc !== customMask) {
-                this.loadWhiteInk(editor, layer, customMask, opacity, enableClip, whiteInk);
-            } else {
-                if (whiteInk.opacity !== opacity) {
-                    whiteInk.set({ opacity });
-                    editor.canvas.requestRenderAll();
-                }
-            }
-        } else {
-            this.loadWhiteInk(editor, layer, customMask, opacity, enableClip);
-        }
-
-        // Handle Clip Path Toggle
-        if (userImage) {
-            if (enableClip) {
-                // If enabled but missing, or mask changed (handled by re-load above, but good to ensure), apply it
-                // We check if clipPath is present. Ideally we should check if it matches current mask, 
-                // but re-applying is safe.
-                if (!userImage.clipPath) {
-                    this.applyClipPath(editor, customMask);
-                }
-            } else {
-                // If disabled but present, remove it
-                if (userImage.clipPath) {
-                    userImage.set({ clipPath: undefined });
-                    editor.canvas.requestRenderAll();
-                }
-            }
-        }
-    }
-
-    private loadWhiteInk(editor: Editor, layer: PooderLayer, url: string, opacity: number, enableClip: boolean, oldImage?: any) {
-        Image.fromURL(url, { crossOrigin: 'anonymous' }).then(image => {
-            if (oldImage) {
-                // Remove old image but don't copy properties yet, we'll sync with user-image
-                layer.remove(oldImage);
-            }
-
-            image.filters?.push(new filters.BlendColor({
-                color: '#FFFFFF',
-                mode: 'add'
-            }));
-            image.applyFilters();
-
-            image.set({
-                opacity,
-                selectable: false,
-                evented: false,
-                data: {
-                    id: 'white-ink'
-                }
-            });
-            
-            // Add to layer
-            layer.add(image);
-            
-            // Ensure white-ink is behind user-image
-            const userImage = editor.getObject("user-image", "user");
-            if (userImage) {
-                 // Re-adding moves it to the top of the stack
-                 layer.remove(userImage);
-                 layer.add(userImage);
-            }
-
-            // Apply clip path to user-image if enabled
-            if (enableClip) {
-                this.applyClipPath(editor, url);
-            } else if (userImage) {
-                 userImage.set({ clipPath: undefined });
-            }
-
-            // Sync position immediately
-            this.syncWithUserImage(editor);
-            
-            editor.canvas.requestRenderAll();
-        }).catch(err => {
-            console.error("Failed to load white ink mask", url, err);
-        });
-    }
-
-    private applyClipPath(editor: Editor, url: string) {
-        const userImage = editor.getObject("user-image", "user") as any;
-        if (!userImage) return;
-
-        Image.fromURL(url, { crossOrigin: 'anonymous' }).then(maskImage => {
-            // Configure clipPath
-            // It needs to be relative to the object center
-            maskImage.set({
-                originX: 'center',
-                originY: 'center',
-                left: 0,
-                top: 0,
-                // Scale to fit userImage if dimensions differ
-                scaleX: userImage.width / maskImage.width,
-                scaleY: userImage.height / maskImage.height
-            });
-
-            userImage.set({ clipPath: maskImage });
-            editor.canvas.requestRenderAll();
-        }).catch(err => {
-            console.error("Failed to load clip path", url, err);
-        });
-    }
-
-    private syncWithUserImage(editor: Editor) {
-        const userImage = editor.getObject("user-image", "user");
-        const whiteInk = editor.getObject("white-ink", "user");
-
-        if (userImage && whiteInk) {
-            whiteInk.set({
-                left: userImage.left,
-                top: userImage.top,
-                scaleX: userImage.scaleX,
-                scaleY: userImage.scaleY,
-                angle: userImage.angle,
-                skewX: userImage.skewX,
-                skewY: userImage.skewY,
-                flipX: userImage.flipX,
-                flipY: userImage.flipY,
-                originX: userImage.originX,
-                originY: userImage.originY
-            });
-        }
-    }
-}
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
+} from "@pooder/core";
+import { FabricImage as Image, filters } from "fabric";
+import CanvasService from "./CanvasService";
+
+export class WhiteInkTool implements Extension {
+  id = "pooder.kit.white-ink";
+
+  public metadata = {
+    name: "WhiteInkTool",
+  };
+
+  private customMask: string = "";
+  private opacity: number = 1;
+  private enableClip: boolean = false;
+
+  private canvasService?: CanvasService;
+  private syncHandler: ((e: any) => void) | undefined;
+  private _loadingUrl: string | null = null;
+
+  constructor(
+    options?: Partial<{
+      customMask: string;
+      opacity: number;
+      enableClip: boolean;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for WhiteInkTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.customMask = configService.get(
+        "whiteInk.customMask",
+        this.customMask,
+      );
+      this.opacity = configService.get("whiteInk.opacity", this.opacity);
+      this.enableClip = configService.get(
+        "whiteInk.enableClip",
+        this.enableClip,
+      );
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("whiteInk.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[WhiteInkTool] Config change detected: ${e.key} -> ${e.value}`,
+          );
+          if (prop && prop in this) {
+            (this as any)[prop] = e.value;
+            this.updateWhiteInk();
+          }
+        }
+      });
+    }
+
+    this.setup();
+    this.updateWhiteInk();
+  }
+
+  deactivate(context: ExtensionContext) {
+    this.teardown();
+    this.canvasService = undefined;
+  }
+
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "whiteInk.customMask",
+          type: "string",
+          label: "Custom Mask URL",
+          default: "",
+        },
+        {
+          id: "whiteInk.opacity",
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          step: 0.01,
+          default: 1,
+        },
+        {
+          id: "whiteInk.enableClip",
+          type: "boolean",
+          label: "Enable Clip",
+          default: false,
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "setWhiteInkImage",
+          title: "Set White Ink Image",
+          handler: (
+            customMask: string,
+            opacity: number,
+            enableClip: boolean = true,
+          ) => {
+            if (
+              this.customMask === customMask &&
+              this.opacity === opacity &&
+              this.enableClip === enableClip
+            )
+              return true;
+
+            this.customMask = customMask;
+            this.opacity = opacity;
+            this.enableClip = enableClip;
+
+            this.updateWhiteInk();
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private setup() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+
+    let userLayer = this.canvasService.getLayer("user");
+    if (!userLayer) {
+      userLayer = this.canvasService.createLayer("user", {
+        width: canvas.width,
+        height: canvas.height,
+        left: 0,
+        top: 0,
+        originX: "left",
+        originY: "top",
+        selectable: false,
+        evented: true,
+        subTargetCheck: true,
+        interactive: true,
+      });
+      canvas.add(userLayer);
+    }
+
+    if (!this.syncHandler) {
+      this.syncHandler = (e: any) => {
+        const target = e.target;
+        if (target && target.data?.id === "user-image") {
+          this.syncWithUserImage();
+        }
+      };
+
+      canvas.on("object:moving", this.syncHandler);
+      canvas.on("object:scaling", this.syncHandler);
+      canvas.on("object:rotating", this.syncHandler);
+      canvas.on("object:modified", this.syncHandler);
+    }
+  }
+
+  private teardown() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+
+    if (this.syncHandler) {
+      canvas.off("object:moving", this.syncHandler);
+      canvas.off("object:scaling", this.syncHandler);
+      canvas.off("object:rotating", this.syncHandler);
+      canvas.off("object:modified", this.syncHandler);
+      this.syncHandler = undefined;
+    }
+
+    const layer = this.canvasService.getLayer("user");
+    if (layer) {
+      const whiteInk = this.canvasService.getObject("white-ink", "user");
+      if (whiteInk) {
+        layer.remove(whiteInk);
+      }
+    }
+
+    const userImage = this.canvasService.getObject("user-image", "user") as any;
+    if (userImage && userImage.clipPath) {
+      userImage.set({ clipPath: undefined });
+    }
+
+    this.canvasService.requestRenderAll();
+  }
+
+  private updateWhiteInk() {
+    if (!this.canvasService) return;
+    const { customMask, opacity, enableClip } = this;
+
+    const layer = this.canvasService.getLayer("user");
+    if (!layer) {
+      console.warn("[WhiteInkTool] User layer not found");
+      return;
+    }
+
+    const whiteInk = this.canvasService.getObject("white-ink", "user") as any;
+    const userImage = this.canvasService.getObject("user-image", "user") as any;
+
+    if (!customMask) {
+      if (whiteInk) {
+        layer.remove(whiteInk);
+      }
+      if (userImage && userImage.clipPath) {
+        userImage.set({ clipPath: undefined });
+      }
+      layer.dirty = true;
+      this.canvasService.requestRenderAll();
+      return;
+    }
+
+    // Check if we need to load/reload white ink backing
+    if (whiteInk) {
+      const currentSrc = whiteInk.getSrc?.() || whiteInk._element?.src;
+      if (currentSrc !== customMask) {
+        this.loadWhiteInk(layer, customMask, opacity, enableClip, whiteInk);
+      } else {
+        if (whiteInk.opacity !== opacity) {
+          whiteInk.set({ opacity });
+          layer.dirty = true;
+          this.canvasService.requestRenderAll();
+        }
+      }
+    } else {
+      this.loadWhiteInk(layer, customMask, opacity, enableClip);
+    }
+
+    // Handle Clip Path Toggle
+    if (userImage) {
+      if (enableClip) {
+        if (!userImage.clipPath) {
+          this.applyClipPath(customMask);
+        }
+      } else {
+        if (userImage.clipPath) {
+          userImage.set({ clipPath: undefined });
+          layer.dirty = true;
+          this.canvasService.requestRenderAll();
+        }
+      }
+    }
+  }
+
+  private loadWhiteInk(
+    layer: any,
+    url: string,
+    opacity: number,
+    enableClip: boolean,
+    oldImage?: any,
+  ) {
+    if (!this.canvasService) return;
+
+    if (this._loadingUrl === url) return;
+    this._loadingUrl = url;
+
+    Image.fromURL(url, { crossOrigin: "anonymous" })
+      .then((image) => {
+        if (this._loadingUrl !== url) return;
+        this._loadingUrl = null;
+
+        if (oldImage) {
+          layer.remove(oldImage);
+        }
+
+        image.filters?.push(
+          new filters.BlendColor({
+            color: "#FFFFFF",
+            mode: "add",
+          }),
+        );
+        image.applyFilters();
+
+        image.set({
+          opacity,
+          selectable: false,
+          evented: false,
+          data: {
+            id: "white-ink",
+          },
+        });
+
+        // Add to layer
+        layer.add(image);
+
+        // Ensure white-ink is behind user-image
+        const userImage = this.canvasService!.getObject("user-image", "user");
+        if (userImage) {
+          // Re-adding moves it to the top of the stack
+          layer.remove(userImage);
+          layer.add(userImage);
+        }
+
+        // Apply clip path to user-image if enabled
+        if (enableClip) {
+          this.applyClipPath(url);
+        } else if (userImage) {
+          userImage.set({ clipPath: undefined });
+        }
+
+        // Sync position immediately
+        this.syncWithUserImage();
+
+        layer.dirty = true;
+        this.canvasService!.requestRenderAll();
+      })
+      .catch((err) => {
+        console.error("Failed to load white ink mask", url, err);
+        this._loadingUrl = null;
+      });
+  }
+
+  private applyClipPath(url: string) {
+    if (!this.canvasService) return;
+    const userImage = this.canvasService.getObject("user-image", "user") as any;
+    if (!userImage) return;
+
+    Image.fromURL(url, { crossOrigin: "anonymous" })
+      .then((maskImage) => {
+        // Configure clipPath
+        maskImage.set({
+          originX: "center",
+          originY: "center",
+          left: 0,
+          top: 0,
+          // Scale to fit userImage if dimensions differ
+          scaleX: userImage.width / maskImage.width,
+          scaleY: userImage.height / maskImage.height,
+        });
+
+        userImage.set({ clipPath: maskImage });
+        const layer = this.canvasService!.getLayer("user");
+        if (layer) layer.dirty = true;
+        this.canvasService!.requestRenderAll();
+      })
+      .catch((err) => {
+        console.error("Failed to load clip path", url, err);
+      });
+  }
+
+  private syncWithUserImage() {
+    if (!this.canvasService) return;
+    const userImage = this.canvasService.getObject("user-image", "user");
+    const whiteInk = this.canvasService.getObject("white-ink", "user");
+
+    if (userImage && whiteInk) {
+      whiteInk.set({
+        left: userImage.left,
+        top: userImage.top,
+        scaleX: userImage.scaleX,
+        scaleY: userImage.scaleY,
+        angle: userImage.angle,
+        skewX: userImage.skewX,
+        skewY: userImage.skewY,
+        flipX: userImage.flipX,
+        flipY: userImage.flipY,
+        originX: userImage.originX,
+        originY: userImage.originY,
+      });
+    }
+  }
+}