@pooder/kit 0.0.2

package/src/hole.ts

@@ -0,0 +1,413 @@
+import { Command, Editor, EditorState, Extension, OptionSchema, Circle, Group, Point } from '@pooder/core';
+import { DielineTool, DielineGeometry } from './dieline';
+import { getNearestPointOnDieline } from './geometry';
+import paper from 'paper';
+
+export interface HoleToolOptions {
+    innerRadius: number;
+    outerRadius: number;
+    style: 'solid' | 'dashed';
+    holes?: Array<{ x: number, y: number }>;
+}
+
+export class HoleTool implements Extension<HoleToolOptions> {
+    public name = 'HoleTool';
+    public options: HoleToolOptions = {
+        innerRadius: 15,
+        outerRadius: 25,
+        style: 'solid',
+        holes: []
+    };
+
+    public schema: Record<keyof HoleToolOptions, OptionSchema> = {
+        innerRadius: {
+            type: 'number',
+            min: 1,
+            max: 100,
+            label: 'Inner Radius'
+        },
+        outerRadius: {
+            type: 'number',
+            min: 1,
+            max: 100,
+            label: 'Outer Radius'
+        },
+        style: {
+            type: 'select',
+            options: ['solid', 'dashed'],
+            label: 'Line Style'
+        },
+        holes: {
+            type: 'json',
+            label: 'Holes'
+        } as any
+    };
+
+    private handleMoving: ((e: any) => void) | null = null;
+    private handleModified: ((e: any) => void) | null = null;
+
+    onMount(editor: Editor) {
+        this.setup(editor);
+    }
+
+    onUnmount(editor: Editor) {
+        this.teardown(editor);
+    }
+
+    onDestroy(editor: Editor) {
+        this.teardown(editor);
+    }
+
+    private getDielineGeometry(editor: Editor): DielineGeometry | null {
+        const dielineTool = editor.getExtension('DielineTool') as DielineTool;
+        if (!dielineTool) return null;
+
+        const geometry = dielineTool.getGeometry(editor);
+        if (!geometry) return null;
+
+        const offset = dielineTool.options.offset || 0;
+
+        // Apply offset to geometry
+        return {
+            ...geometry,
+            width: Math.max(0, geometry.width + offset * 2),
+            height: Math.max(0, geometry.height + offset * 2),
+            radius: Math.max(0, geometry.radius + offset)
+        };
+    }
+
+    private setup(editor: Editor) {
+        if (!this.handleMoving) {
+            this.handleMoving = (e: any) => {
+                const target = e.target;
+                if (!target || target.data?.type !== 'hole-marker') return;
+
+                const geometry = this.getDielineGeometry(editor);
+                if (!geometry) return;
+
+                const p = new Point(target.left, target.top);
+                const newPos = this.calculateConstrainedPosition(p, geometry);
+
+                target.set({
+                    left: newPos.x,
+                    top: newPos.y
+                });
+            };
+            editor.canvas.on('object:moving', this.handleMoving);
+        }
+        
+        if (!this.handleModified) {
+            this.handleModified = (e: any) => {
+                 const target = e.target;
+                 if (!target || target.data?.type !== 'hole-marker') return;
+                 
+                 // Update state when hole is moved
+                 this.syncHolesFromCanvas(editor);
+            };
+            editor.canvas.on('object:modified', this.handleModified);
+        }
+
+        const opts = this.options;
+        // Default hole if none exist
+        if (!opts.holes || opts.holes.length === 0) {
+             let defaultPos = { x: editor.canvas.width! / 2, y: 50 };
+             
+             const g = this.getDielineGeometry(editor);
+             if (g) {
+                 // Default to Top-Center of Dieline shape
+                 const topCenter = { x: g.x, y: g.y - g.height / 2 };
+                 // Snap to exact shape edge
+                 const snapped = getNearestPointOnDieline(topCenter, { ...g, holes: [] } as any);
+                 defaultPos = snapped;
+             }
+             
+             opts.holes = [defaultPos];
+        }
+        
+        this.options = { ...opts };
+        this.redraw(editor);
+
+        // Ensure Dieline updates to reflect current holes (fusion effect)
+        const dielineTool = editor.getExtension('DielineTool') as DielineTool;
+        if (dielineTool && dielineTool.updateDieline) {
+            dielineTool.updateDieline(editor);
+        }
+    }
+
+    private teardown(editor: Editor) {
+        if (this.handleMoving) {
+            editor.canvas.off('object:moving', this.handleMoving);
+            this.handleMoving = null;
+        }
+        if (this.handleModified) {
+            editor.canvas.off('object:modified', this.handleModified);
+            this.handleModified = null;
+        }
+        
+        const objects = editor.canvas.getObjects().filter((obj: any) => obj.data?.type === 'hole-marker');
+        objects.forEach(obj => editor.canvas.remove(obj));
+        
+        editor.canvas.requestRenderAll();
+    }
+
+    onUpdate(editor: Editor, state: EditorState) {
+    }
+
+    commands: Record<string, Command> = {
+        reset: {
+            execute: (editor: Editor) => {
+                let defaultPos = { x: editor.canvas.width! / 2, y: 50 };
+                
+                const g = this.getDielineGeometry(editor);
+                if (g) {
+                    const topCenter = { x: g.x, y: g.y - g.height / 2 };
+                    defaultPos = getNearestPointOnDieline(topCenter, { ...g, holes: [] } as any);
+                }
+
+                this.options = {
+                    innerRadius: 15,
+                    outerRadius: 25,
+                    style: 'solid',
+                    holes: [defaultPos]
+                };
+                this.redraw(editor);
+                
+                // Trigger Dieline update
+                const dielineTool = editor.getExtension('DielineTool') as DielineTool;
+                if (dielineTool && dielineTool.updateDieline) {
+                    dielineTool.updateDieline(editor);
+                }
+                
+                return true;
+            }
+        },
+        addHole: {
+            execute: (editor: Editor, x: number, y: number) => {
+                if (!this.options.holes) this.options.holes = [];
+                this.options.holes.push({ x, y });
+                this.redraw(editor);
+                
+                // Trigger Dieline update
+                const dielineTool = editor.getExtension('DielineTool') as any;
+                if (dielineTool && dielineTool.updateDieline) {
+                    dielineTool.updateDieline(editor);
+                }
+                
+                return true;
+            },
+            schema: {
+                x: {
+                    type: 'number',
+                    label: 'X Position',
+                    required: true
+                },
+                y: {
+                    type: 'number',
+                    label: 'Y Position',
+                    required: true
+                }
+            }
+        },
+        clearHoles: {
+            execute: (editor: Editor) => {
+                this.options.holes = [];
+                this.redraw(editor);
+                
+                // Trigger Dieline update
+                const dielineTool = editor.getExtension('DielineTool') as any;
+                if (dielineTool && dielineTool.updateDieline) {
+                    dielineTool.updateDieline(editor);
+                }
+                
+                return true;
+            }
+        }
+    };
+    
+    private syncHolesFromCanvas(editor: Editor) {
+        const objects = editor.canvas.getObjects().filter((obj: any) => obj.data?.type === 'hole-marker');
+        const holes = objects.map(obj => ({ x: obj.left!, y: obj.top! }));
+        this.options.holes = holes;
+        
+        // Trigger Dieline update for real-time fusion effect
+        const dielineTool = editor.getExtension('DielineTool') as any;
+        if (dielineTool && dielineTool.updateDieline) {
+            dielineTool.updateDieline(editor);
+        }
+    }
+
+    private redraw(editor: Editor) {
+        const canvas = editor.canvas;
+        
+        // Remove existing holes
+        const existing = canvas.getObjects().filter((obj: any) => obj.data?.type === 'hole-marker');
+        existing.forEach(obj => canvas.remove(obj));
+
+        const { innerRadius, outerRadius, style, holes } = this.options;
+        
+        if (!holes || holes.length === 0) {
+            canvas.requestRenderAll();
+            return;
+        }
+
+        holes.forEach((hole, index) => {
+            const innerCircle = new Circle({
+                radius: innerRadius,
+                fill: 'transparent',
+                stroke: 'red',
+                strokeWidth: 2,
+                originX: 'center',
+                originY: 'center'
+            });
+
+            const outerCircle = new Circle({
+                radius: outerRadius,
+                fill: 'transparent',
+                stroke: '#666',
+                strokeWidth: 1,
+                strokeDashArray: style === 'dashed' ? [5, 5] : undefined,
+                originX: 'center',
+                originY: 'center'
+            });
+
+            const holeGroup = new Group([outerCircle, innerCircle], {
+                left: hole.x,
+                top: hole.y,
+                originX: 'center',
+                originY: 'center',
+                selectable: true,
+                hasControls: false, // Don't allow resizing/rotating
+                hasBorders: false,
+                subTargetCheck: false,
+                opacity: 0, // Default hidden
+                hoverCursor: 'move',
+                data: { type: 'hole-marker', index } 
+            }as any);
+            (holeGroup as any).name = 'hole-marker';
+
+            // Auto-show/hide logic
+            holeGroup.on('mouseover', () => {
+                holeGroup.set('opacity', 1);
+                canvas.requestRenderAll();
+            });
+            holeGroup.on('mouseout', () => {
+                if (canvas.getActiveObject() !== holeGroup) {
+                    holeGroup.set('opacity', 0);
+                    canvas.requestRenderAll();
+                }
+            });
+            holeGroup.on('selected', () => {
+                holeGroup.set('opacity', 1);
+                canvas.requestRenderAll();
+            });
+            holeGroup.on('deselected', () => {
+                holeGroup.set('opacity', 0);
+                canvas.requestRenderAll();
+            });
+
+            canvas.add(holeGroup);
+            canvas.bringObjectToFront(holeGroup);
+        });
+        
+        canvas.requestRenderAll();
+    }
+
+    private calculateConstrainedPosition(p: Point, g: DielineGeometry): Point {
+        // Use Paper.js to get accurate nearest point
+        // This handles ellipses, rects, and rounded rects correctly
+        
+        // Convert to holes format for geometry options
+        const options = {
+            ...g,
+            holes: [] // We don't need holes for boundary calculation
+        };
+        
+        const nearest = getNearestPointOnDieline({x: p.x, y: p.y}, options as any);
+        
+        // Now constrain distance
+        const nearestP = new Point(nearest.x, nearest.y);
+        const dist = p.distanceFrom(nearestP);
+        
+        // Determine if point is inside or outside
+        // Simple heuristic: distance from center
+        // Or using paper.js contains() if we had the full path object
+        // For convex shapes, center distance works mostly, but let's use the vector direction
+        
+        // Vector from nearest to current point
+        const v = p.subtract(nearestP);
+        
+        // Vector from center to nearest point (approximate normal for convex shapes)
+        const center = new Point(g.x, g.y);
+        const centerToNearest = nearestP.subtract(center);
+        
+        // Dot product to see if they align (outside) or oppose (inside)
+        // If point is exactly on line, dist is 0.
+        
+        // However, we want to constrain the point to be within [innerRadius, -outerRadius] distance from the edge.
+        // Actually, usually users want to snap to the edge or stay within a reasonable margin.
+        // The previous logic clamped the distance.
+        
+        // Let's implement a simple snap-to-edge if close, otherwise allow free movement but clamp max distance?
+        // Or reproduce the previous "slide along edge" behavior.
+        // Previous behavior: "clampedDist = Math.min(dist, innerRadius); ... Math.max(dist, -outerRadius)"
+        // This implies the hole center can be slightly inside or outside the main shape edge.
+        
+        // Let's determine sign of distance
+        // We can use paper.js Shape.contains(point) to check if inside.
+        // But getNearestPointOnDieline returns just coordinates.
+        
+        // Optimization: Let's assume for Dieline shapes (convex-ish), 
+        // if distance from center > distance of nearest from center, it's outside.
+        const distToCenter = p.distanceFrom(center);
+        const nearestDistToCenter = nearestP.distanceFrom(center);
+        
+        let signedDist = dist;
+        if (distToCenter < nearestDistToCenter) {
+            signedDist = -dist; // Inside
+        }
+        
+        // Clamp distance
+        let clampedDist = signedDist;
+        if (signedDist > 0) {
+            clampedDist = Math.min(signedDist, this.options.innerRadius);
+        } else {
+            clampedDist = Math.max(signedDist, -this.options.outerRadius);
+        }
+        
+        // Reconstruct point
+        // If dist is very small, just use nearestP
+        if (dist < 0.001) return nearestP;
+        
+        // Direction vector normalized
+        const dir = v.scalarDivide(dist);
+        
+        // New point = nearest + dir * clampedDist
+        // Note: if inside (signedDist < 0), v points towards center (roughly), dist is positive magnitude.
+        // Wait, v = p - nearest.
+        // If p is inside, p is closer to center. v points Inwards.
+        // If we want clampedDist to be negative, we should probably stick to normal vectors.
+        
+        // Let's simplify:
+        // Just place it at nearest point + offset vector.
+        // Offset vector is 'v' scaled to clampedDist.
+        
+        // If p is inside, v points in. length is 'dist'.
+        // We want length to be 'clampedDist' (magnitude).
+        // Since clampedDist is negative for inside, we need to be careful with signs.
+        
+        // Actually simpler:
+        // We want the result to lie on the line connecting Center -> P -> Nearest? No.
+        // We want it on the line Nearest -> P.
+        
+        // Current distance is 'dist'.
+        // Desired distance is abs(clampedDist).
+        // If clampedDist sign matches signedDist sign, we just scale v.
+        
+        const scale = Math.abs(clampedDist) / (dist || 1);
+        
+        // If we are clamping, we just scale the vector from nearest.
+        const offset = v.scalarMultiply(scale);
+        
+        return nearestP.add(offset);
+    }
+}

package/src/image.ts

@@ -0,0 +1,146 @@
+import {Command, Editor, EditorState, Extension, Image, OptionSchema, PooderLayer} from '@pooder/core';
+
+interface ImageToolOptions {
+    url: string;
+    opacity: number;
+}
+export class ImageTool implements Extension<ImageToolOptions> {
+    name = 'ImageTool';
+    options: ImageToolOptions = {
+        url: '',
+        opacity: 1
+    };
+
+    public schema: Record<keyof ImageToolOptions, OptionSchema> = {
+        url: {
+            type: 'string',
+            label: 'Image URL'
+        },
+        opacity: {
+            type: 'number',
+            min: 0,
+            max: 1,
+            step: 0.1,
+            label: 'Opacity'
+        }
+    };
+
+    onMount(editor: Editor) {
+        this.ensureLayer(editor);
+    }
+
+    onUnmount(editor: Editor) {
+        const layer = editor.getLayer("user");
+        if (layer) {
+            const userImage = editor.getObject("user-image", "user");
+            if (userImage) {
+                layer.remove(userImage);
+                editor.canvas.requestRenderAll();
+            }
+        }
+    }
+
+    onUpdate(editor: Editor, state: EditorState) {
+        this.updateImage(editor, this.options);
+    }
+
+    private ensureLayer(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)
+        }
+    }
+
+    private updateImage(editor: Editor, opts: ImageToolOptions) {
+        let { url, opacity } = opts;
+
+        const layer = editor.getLayer("user");
+        if (!layer) {
+            console.warn('[ImageTool] User layer not found');
+            return;
+        }
+
+        const userImage = editor.getObject("user-image","user") as any;
+
+        if (userImage) {
+            const currentSrc = userImage.getSrc?.() || userImage._element?.src;
+
+            if (currentSrc !== url) {
+                 this.loadImage(editor, layer, url, opacity, userImage);
+            } else {
+                if (userImage.opacity !== opacity) {
+                    userImage.set({ opacity });
+                    editor.canvas.requestRenderAll();
+                }
+            }
+        } else {
+            this.loadImage(editor, layer, url, opacity);
+        }
+    }
+
+    private loadImage(editor: Editor, layer: PooderLayer, url: string, opacity: number, oldImage?: any) {
+        Image.fromURL(url).then(image => {
+            if (oldImage) {
+                 const { left, top, scaleX, scaleY, angle } = oldImage;
+                 image.set({ left, top, scaleX, scaleY, angle });
+                 layer.remove(oldImage);
+            }
+
+            image.set({
+                opacity,
+                data: {
+                    id: 'user-image'
+                }
+            });
+            layer.add(image);
+            editor.canvas.requestRenderAll();
+        }).catch(err => {
+            console.error("Failed to load image", url, err);
+        });
+    }
+
+    commands:Record<string, Command>={
+        setUserImage:{
+            execute:(editor: Editor, url: string, opacity: number)=>{
+                if (this.options.url === url && this.options.opacity === opacity) return true;
+                
+                this.options.url = url;
+                this.options.opacity = opacity;
+                
+                // Direct update
+                this.updateImage(editor, this.options);
+                
+                return true
+            },
+            schema: {
+                url: {
+                    type: 'string',
+                    label: 'Image URL',
+                    required: true
+                },
+                opacity: {
+                    type: 'number',
+                    label: 'Opacity',
+                    min: 0,
+                    max: 1,
+                    required: true
+                }
+            }
+        }
+    }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './background';
+export * from './dieline';
+export * from './film';
+export * from './hole';
+export * from './image';
+export * from './white-ink';
+export * from './ruler';