@pooder/kit 0.0.2

package/src/ruler.ts

@@ -0,0 +1,238 @@
+import { Command, Editor, EditorState, Extension, OptionSchema, PooderLayer, Rect, Line, Text } from '@pooder/core';
+
+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
+    };
+
+    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' }
+    };
+
+    onMount(editor: Editor) {
+        this.createLayer(editor);
+    }
+
+    onUnmount(editor: Editor) {
+        this.destroyLayer(editor);
+    }
+
+    onUpdate(editor: Editor, state: EditorState) {
+    }
+
+    onDestroy(editor: Editor) {
+        this.destroyLayer(editor);
+    }
+
+    private getLayer(editor: Editor) {
+        return editor.canvas.getObjects().find((obj: any) => obj.data?.id === 'ruler-overlay') as PooderLayer | undefined;
+    }
+
+    private createLayer(editor: Editor) {
+        let layer = this.getLayer(editor);
+
+        if (!layer) {
+            const width = editor.canvas.width || 800;
+            const height = editor.canvas.height || 600;
+
+            layer = new PooderLayer([], {
+                width,
+                height,
+                selectable: false,
+                evented: false,
+                data: { id: 'ruler-overlay' }
+            } as any);
+
+            editor.canvas.add(layer);
+        }
+
+        editor.canvas.bringObjectToFront(layer);
+        this.updateRuler(editor);
+    }
+
+    private destroyLayer(editor: Editor) {
+        const layer = this.getLayer(editor);
+        if (layer) {
+            editor.canvas.remove(layer);
+        }
+    }
+
+    private updateRuler(editor: Editor) {
+        const layer = this.getLayer(editor);
+        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;
+
+        // Backgrounds
+        const topBg = new Rect({
+            left: 0,
+            top: 0,
+            width: width,
+            height: thickness,
+            fill: backgroundColor,
+            selectable: false,
+            evented: false
+        });
+
+        const leftBg = new Rect({
+            left: 0,
+            top: 0,
+            width: thickness,
+            height: height,
+            fill: backgroundColor,
+            selectable: false,
+            evented: false
+        });
+
+        const cornerBg = new Rect({
+            left: 0,
+            top: 0,
+            width: thickness,
+            height: thickness,
+            fill: backgroundColor,
+            stroke: lineColor,
+            strokeWidth: 1,
+            selectable: false,
+            evented: false
+        });
+
+        layer.add(topBg, leftBg, cornerBg);
+
+        // Drawing Constants (Pixel based for now)
+        const step = 100; // Major tick
+        const subStep = 10; // Minor tick
+        const midStep = 50; // Medium tick
+
+        // Top Ruler
+        for (let x = 0; x <= width; x += subStep) {
+            if (x < thickness) continue; // Skip corner
+
+            let len = thickness * 0.25;
+            if (x % step === 0) len = thickness * 0.8;
+            else if (x % midStep === 0) len = thickness * 0.5;
+
+            const line = new Line([x, thickness - len, x, thickness], {
+                stroke: lineColor,
+                strokeWidth: 1,
+                selectable: false,
+                evented: false
+            });
+            layer.add(line);
+
+            if (x % step === 0) {
+                const text = new Text(x.toString(), {
+                    left: x + 2,
+                    top: 2,
+                    fontSize: fontSize,
+                    fill: textColor,
+                    fontFamily: 'Arial',
+                    selectable: false,
+                    evented: false
+                });
+                layer.add(text);
+            }
+        }
+
+        // Left Ruler
+        for (let y = 0; y <= height; y += subStep) {
+            if (y < thickness) continue; // Skip corner
+
+            let len = thickness * 0.25;
+            if (y % step === 0) len = thickness * 0.8;
+            else if (y % midStep === 0) len = thickness * 0.5;
+
+            const line = new Line([thickness - len, y, thickness, y], {
+                stroke: lineColor,
+                strokeWidth: 1,
+                selectable: false,
+                evented: false
+            });
+            layer.add(line);
+
+            if (y % step === 0) {
+                const text = new Text(y.toString(), {
+                    angle: -90,
+                    left: thickness / 2 - fontSize / 3, // approximate centering
+                    top: y + fontSize, 
+                    fontSize: fontSize,
+                    fill: textColor,
+                    fontFamily: 'Arial',
+                    originX: 'center',
+                    originY: 'center',
+                    selectable: false,
+                    evented: false
+                });
+                
+                layer.add(text);
+            }
+        }
+
+        // Always bring ruler to front
+        editor.canvas.bringObjectToFront(layer);
+        editor.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
+                 }
+             }
+        }
+    };
+}

package/src/white-ink.ts

@@ -0,0 +1,302 @@
+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);
+    }
+
+    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);
+        }
+
+        this.updateWhiteInk(editor, this.options);
+    }
+
+    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
+            });
+        }
+    }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": ["esnext", "dom"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "include": ["src"]
+}