@pooder/kit 0.0.2

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@pooder/kit",
+  "version": "0.0.2",
+  "description": "Standard plugins for Pooder editor",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/paper": "^0.12.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "paper": "^0.12.18",
+    "@pooder/core": "0.0.2"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+  }
+}

package/src/background.ts

@@ -0,0 +1,173 @@
+import {Command, Editor, EditorState, Extension, Image, OptionSchema, PooderLayer, Rect} from '@pooder/core';
+
+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'
+        }
+    };
+
+    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'
+                },
+            })
+
+            editor.canvas.add(backgroundLayer)
+            editor.canvas.sendObjectToBack(backgroundLayer)
+        }
+
+        this.updateBackground(editor, this.options);
+    }
+    onMount(editor: Editor) {
+        this.initLayer(editor);
+    }
+
+    onUnmount(editor: Editor) {
+        const layer = editor.getLayer('background');
+        if (layer) {
+            editor.canvas.remove(layer);
+        }
+    }
+
+    onUpdate(editor: Editor, state: EditorState) {
+        this.updateBackground(editor, this.options);
+    }
+
+    private async updateBackground(editor: Editor,options: BackgroundToolOptions) {
+        const layer = editor.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;
+
+        let rect=editor.getObject('background-color-rect',"background")
+        if (rect) {
+            rect.set({
+                fill: color
+            })
+        } else {
+            rect = new Rect({
+                width,
+                height,
+                fill: color,
+                selectable: false,
+                evented: false,
+                data: {
+                    id: 'background-color-rect'
+                }
+            });
+            layer.add(rect);
+            layer.sendObjectToBack(rect);
+        }
+
+        let img=editor.getObject('background-image',"background") as Image;
+        try {
+            if(img){
+                if(img.getSrc() !== url){
+                    if(url){
+                        await img.setSrc(url);
+                    }else {
+                        layer.remove(img)
+                    }
+                }
+            }else {
+                if (url) {
+                    img = await Image.fromURL(url, { crossOrigin: 'anonymous' });
+                    img.set({
+                        originX: 'left',
+                        originY: 'top',
+                        left: 0,
+                        top: 0,
+                        selectable: false,
+                        evented: false,
+                        data:{
+                            id: 'background-image'
+                        }
+                    })
+                    img.scaleToWidth(width)
+                    if (img.getScaledHeight() < height)
+                        img.scaleToHeight(height);
+                    layer.add(img);
+                }
+            }
+            editor.canvas.requestRenderAll();
+        } catch (e) {
+            console.error('[BackgroundTool] Failed to load image', e);
+        }
+    }
+
+    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/dieline.ts

@@ -0,0 +1,424 @@
+import { Command, Editor, EditorState, Extension, OptionSchema, Rect, Circle, Ellipse, Path, PooderLayer, Pattern } from '@pooder/core';
+import { generateDielinePath, generateMaskPath, generateBleedZonePath, HoleData } from './geometry';
+
+export interface DielineToolOptions {
+    shape: 'rect' | 'circle' | 'ellipse';
+    width: number;
+    height: number;
+    radius: number; // corner radius for rect
+    position?: { x: number, y: number };
+    borderLength?: number;
+    offset: number;
+    style: 'solid' | 'dashed';
+    insideColor: string;
+    outsideColor: string;
+}
+
+// Alias for compatibility if needed, or just use DielineToolOptions
+export type DielineConfig = DielineToolOptions;
+
+export interface DielineGeometry {
+    shape: 'rect' | 'circle' | 'ellipse';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+}
+
+export class DielineTool implements Extension<DielineToolOptions> {
+    public name = 'DielineTool';
+    public options: DielineToolOptions = {
+        shape: 'rect',
+        width: 300,
+        height: 300,
+        radius: 0,
+        offset: 0,
+        style: 'solid',
+        insideColor: 'rgba(0,0,0,0)',
+        outsideColor: '#ffffff'
+    };
+
+    public schema: Record<keyof DielineToolOptions, OptionSchema> = {
+        shape: {
+            type: 'select',
+            options: ['rect', 'circle', 'ellipse'],
+            label: 'Shape'
+        },
+        width: { type: 'number', min: 10, max: 2000, label: 'Width' },
+        height: { type: 'number', min: 10, max: 2000, label: 'Height' },
+        radius: { type: 'number', min: 0, max: 500, label: 'Corner Radius' },
+        position: { type: 'string', label: 'Position' }, // Complex object, simplified for now or need custom handler
+        borderLength: { type: 'number', min: 0, max: 500, label: 'Margin' },
+        offset: { type: 'number', min: -100, max: 100, label: 'Bleed Offset' },
+        style: {
+            type: 'select',
+            options: ['solid', 'dashed'],
+            label: 'Line Style'
+        },
+        insideColor: { type: 'color', label: 'Inside Color' },
+        outsideColor: { type: 'color', label: 'Outside Color' }
+    };
+
+    onMount(editor: Editor) {
+        this.createLayer(editor);
+    }
+
+    onUnmount(editor: Editor) {
+        this.destroyLayer(editor);
+    }
+
+    onUpdate(editor: Editor, state: EditorState) {
+        this.updateDieline(editor);
+    }
+
+    onDestroy(editor: Editor) {
+        this.destroyLayer(editor);
+    }
+
+    private getLayer(editor: Editor, id: string) {
+        return editor.canvas.getObjects().find((obj: any) => obj.data?.id === id) as PooderLayer | undefined;
+    }
+
+    private createLayer(editor: Editor) {
+        let layer = this.getLayer(editor, 'dieline-overlay');
+
+        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: 'dieline-overlay' }
+            }as any);
+
+            editor.canvas.add(layer);
+        }
+
+        // Ensure it's on top
+        editor.canvas.bringObjectToFront(layer);
+
+        // Initial draw
+        this.updateDieline(editor);
+    }
+
+    private destroyLayer(editor: Editor) {
+        const layer = this.getLayer(editor, 'dieline-overlay');
+        if (layer) {
+            editor.canvas.remove(layer);
+        }
+    }
+
+    private createHatchPattern(color: string = 'rgba(0, 0, 0, 0.3)') {
+        if (typeof document === 'undefined') {
+            return undefined;
+        }
+        const size = 20; 
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+             // Transparent background
+             ctx.clearRect(0, 0, size, size);
+             
+             // Draw diagonal /
+             ctx.strokeStyle = color;
+             ctx.lineWidth = 1; 
+             ctx.beginPath();
+             ctx.moveTo(0, size);
+             ctx.lineTo(size, 0);
+             ctx.stroke();
+        }
+        // @ts-ignore
+        return new Pattern({ source: canvas, repetition: 'repeat' });
+    }
+
+    public updateDieline(editor: Editor) {
+        const { shape, radius, offset, style, insideColor, outsideColor, position, borderLength } = this.options;
+        let { width, height } = this.options;
+
+        const canvasW = editor.canvas.width || 800;
+        const canvasH = editor.canvas.height || 600;
+
+        // Handle borderLength (Margin)
+        if (borderLength && borderLength > 0) {
+            width = Math.max(0, canvasW - borderLength * 2);
+            height = Math.max(0, canvasH - borderLength * 2);
+        }
+
+        // Handle Position
+        const cx = position?.x ?? canvasW / 2;
+        const cy = position?.y ?? canvasH / 2;
+
+        const layer = this.getLayer(editor, 'dieline-overlay');
+        if (!layer) return;
+
+        // Clear existing objects
+        layer.remove(...layer.getObjects());
+
+        // Get Hole Data
+        const holeTool = editor.getExtension('HoleTool') as any;
+        const holes = holeTool ? (holeTool.options.holes || []) : [];
+        const innerRadius = holeTool ? (holeTool.options.innerRadius || 15) : 15;
+        const outerRadius = holeTool ? (holeTool.options.outerRadius || 25) : 25;
+        
+        const holeData: HoleData[] = holes.map((h: any) => ({
+            x: h.x,
+            y: h.y,
+            innerRadius,
+            outerRadius
+        }));
+
+        // 1. Draw Mask (Outside)
+        const cutW = Math.max(0, width + offset * 2);
+        const cutH = Math.max(0, height + offset * 2);
+        const cutR = radius === 0 ? 0 : Math.max(0, radius + offset);
+
+        // Use Paper.js to generate the complex mask path
+        const maskPathData = generateMaskPath({
+            canvasWidth: canvasW,
+            canvasHeight: canvasH,
+            shape,
+            width: cutW,
+            height: cutH,
+            radius: cutR,
+            x: cx,
+            y: cy,
+            holes: holeData
+        });
+
+        const mask = new Path(maskPathData, {
+            fill: outsideColor,
+            stroke: null,
+            selectable: false,
+            evented: false,
+            originX: 'left' as const,
+            originY: 'top' as const,
+            left: 0,
+            top: 0
+        });
+        layer.add(mask);
+
+        // 2. Draw Inside Fill (Dieline Shape itself, merged with holes if needed, or just the shape?)
+        // The user wants "fusion effect" so holes should be part of the dieline visually.
+        // If insideColor is transparent, it doesn't matter much.
+        // If insideColor is opaque, we need to punch holes in it too.
+        // Let's use Paper.js for this too if insideColor is not transparent.
+        
+        if (insideColor && insideColor !== 'transparent' && insideColor !== 'rgba(0,0,0,0)') {
+             // Generate path for the product shape (Paper) = Dieline - Holes
+             const productPathData = generateDielinePath({
+                 shape,
+                 width: cutW,
+                 height: cutH,
+                 radius: cutR,
+                 x: cx,
+                 y: cy,
+                 holes: holeData
+             });
+             
+             const insideObj = new Path(productPathData, {
+                 fill: insideColor,
+                 stroke: null,
+                 selectable: false,
+                 evented: false,
+                 originX: 'left', // paper.js paths are absolute
+                 originY: 'top'
+             });
+             layer.add(insideObj);
+        }
+
+        // 3. Draw Bleed Zone (Hatch Fill) and Offset Border
+        if (offset !== 0) {
+            const bleedPathData = generateBleedZonePath({
+                shape,
+                width,
+                height,
+                radius,
+                x: cx,
+                y: cy,
+                holes: holeData
+            }, offset);
+
+            // Use solid red for hatch lines to match dieline, background is transparent
+            const pattern = this.createHatchPattern('red');
+            if (pattern) {
+                const bleedObj = new Path(bleedPathData, {
+                    fill: pattern,
+                    stroke: null,
+                    selectable: false,
+                    evented: false,
+                    objectCaching: false,
+                    originX: 'left',
+                    originY: 'top'
+                });
+                layer.add(bleedObj);
+            }
+
+            // Offset Dieline Border
+            const offsetPathData = generateDielinePath({
+                shape,
+                width: cutW,
+                height: cutH,
+                radius: cutR,
+                x: cx,
+                y: cy,
+                holes: holeData
+            });
+
+            const offsetBorderObj = new Path(offsetPathData, {
+                fill: null,
+                stroke: '#666', // Grey
+                strokeWidth: 1,
+                strokeDashArray: [4, 4], // Dashed
+                selectable: false,
+                evented: false,
+                originX: 'left',
+                originY: 'top'
+            });
+            layer.add(offsetBorderObj);
+        }
+
+        // 4. Draw Dieline (Visual Border)
+        // This should outline the product shape AND the holes.
+        // Paper.js `generateDielinePath` returns exactly this (Dieline - Holes).
+        
+        const borderPathData = generateDielinePath({
+            shape,
+            width: width,
+            height: height,
+            radius: radius,
+            x: cx,
+            y: cy,
+            holes: holeData
+        });
+
+        const borderObj = new Path(borderPathData, {
+            fill: 'transparent',
+            stroke: 'red',
+            strokeWidth: 1,
+            strokeDashArray: style === 'dashed' ? [5, 5] : undefined,
+            selectable: false,
+            evented: false,
+            originX: 'left',
+            originY: 'top'
+        });
+
+        layer.add(borderObj);
+
+        editor.canvas.requestRenderAll();
+    }
+
+    commands: Record<string, Command> = {
+        reset: {
+            execute: (editor: Editor) => {
+                this.options = {
+                    shape: 'rect',
+                    width: 300,
+                    height: 300,
+                    radius: 0,
+                    offset: 0,
+                    style: 'solid',
+                    insideColor: 'rgba(0,0,0,0)',
+                    outsideColor: '#ffffff'
+                };
+                this.updateDieline(editor);
+                return true;
+            }
+        },
+        destroy: {
+            execute: (editor: Editor) => {
+                this.destroyLayer(editor);
+                return true;
+            }
+        },
+        setDimensions: {
+            execute: (editor: Editor, width: number, height: number) => {
+                if (this.options.width === width && this.options.height === height) return true;
+                this.options.width = width;
+                this.options.height = height;
+                this.updateDieline(editor);
+                return true;
+            },
+            schema: {
+                width: {
+                    type: 'number',
+                    label: 'Width',
+                    min: 10,
+                    max: 2000,
+                    required: true
+                },
+                height: {
+                    type: 'number',
+                    label: 'Height',
+                    min: 10,
+                    max: 2000,
+                    required: true
+                }
+            }
+        },
+        setShape: {
+             execute: (editor: Editor, shape: 'rect' | 'circle' | 'ellipse') => {
+                if (this.options.shape === shape) return true;
+                this.options.shape = shape;
+                this.updateDieline(editor);
+                return true;
+             },
+             schema: {
+                 shape: {
+                     type: 'string',
+                     label: 'Shape',
+                     options: ['rect', 'circle', 'ellipse'],
+                     required: true
+                 }
+             }
+        },
+        setBleed: {
+             execute: (editor: Editor, bleed: number) => {
+                if (this.options.offset === bleed) return true;
+                this.options.offset = bleed;
+                this.updateDieline(editor);
+                return true;
+             },
+             schema: {
+                 bleed: {
+                     type: 'number',
+                     label: 'Bleed',
+                     min: -100,
+                     max: 100,
+                     required: true
+                 }
+             }
+        }
+    };
+
+    public getGeometry(editor: Editor): DielineGeometry | null {
+        const { shape, width, height, radius, position, borderLength } = this.options;
+        const canvasW = editor.canvas.width || 800;
+        const canvasH = editor.canvas.height || 600;
+
+        let visualWidth = width;
+        let visualHeight = height;
+
+        if (borderLength && borderLength > 0) {
+            visualWidth = Math.max(0, canvasW - borderLength * 2);
+            visualHeight = Math.max(0, canvasH - borderLength * 2);
+        }
+
+        const cx = position?.x ?? canvasW / 2;
+        const cy = position?.y ?? canvasH / 2;
+
+        return {
+            shape,
+            x: cx,
+            y: cy,
+            width: visualWidth,
+            height: visualHeight,
+            radius
+        };
+    }
+}