@pooder/kit 4.0.0 → 4.2.0

package/.test-dist/src/CanvasService.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const ViewportSystem_1 = require("./ViewportSystem");
+class CanvasService {
+    constructor(el, options) {
+        if (el instanceof fabric_1.Canvas) {
+            this.canvas = el;
+        }
+        else {
+            this.canvas = new fabric_1.Canvas(el, {
+                preserveObjectStacking: true,
+                ...options,
+            });
+        }
+        this.viewport = new ViewportSystem_1.ViewportSystem();
+        if (this.canvas.width !== undefined && this.canvas.height !== undefined) {
+            this.viewport.updateContainer(this.canvas.width, this.canvas.height);
+        }
+        if (options?.eventBus) {
+            this.setEventBus(options.eventBus);
+        }
+    }
+    setEventBus(eventBus) {
+        this.eventBus = eventBus;
+        this.setupEvents();
+    }
+    setupEvents() {
+        if (!this.eventBus)
+            return;
+        const bus = this.eventBus;
+        const forward = (name) => (e) => bus.emit(name, e);
+        this.canvas.on("selection:created", forward("selection:created"));
+        this.canvas.on("selection:updated", forward("selection:updated"));
+        this.canvas.on("selection:cleared", forward("selection:cleared"));
+        this.canvas.on("object:modified", forward("object:modified"));
+        this.canvas.on("object:added", forward("object:added"));
+        this.canvas.on("object:removed", forward("object:removed"));
+    }
+    dispose() {
+        this.canvas.dispose();
+    }
+    /**
+     * Get a layer (Group) by its ID.
+     * We assume layers are Groups directly on the canvas with a data.id property.
+     */
+    getLayer(id) {
+        return this.canvas.getObjects().find((obj) => obj.data?.id === id);
+    }
+    /**
+     * Create a layer (Group) with the given ID if it doesn't exist.
+     */
+    createLayer(id, options = {}) {
+        let layer = this.getLayer(id);
+        if (!layer) {
+            const defaultOptions = {
+                selectable: false,
+                evented: false,
+                ...options,
+                data: { ...options.data, id },
+            };
+            layer = new fabric_1.Group([], defaultOptions);
+            this.canvas.add(layer);
+        }
+        return layer;
+    }
+    /**
+     * Find an object by ID, optionally within a specific layer.
+     */
+    getObject(id, layerId) {
+        if (layerId) {
+            const layer = this.getLayer(layerId);
+            if (!layer)
+                return undefined;
+            return layer.getObjects().find((obj) => obj.data?.id === id);
+        }
+        return this.canvas.getObjects().find((obj) => obj.data?.id === id);
+    }
+    requestRenderAll() {
+        this.canvas.requestRenderAll();
+    }
+}
+exports.default = CanvasService;

package/.test-dist/src/ViewportSystem.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportSystem = void 0;
+const coordinate_1 = require("./coordinate");
+class ViewportSystem {
+    constructor(containerSize = { width: 0, height: 0 }, physicalSize = { width: 0, height: 0 }, padding = 40) {
+        this._containerSize = { width: 0, height: 0 };
+        this._physicalSize = { width: 0, height: 0 };
+        this._padding = 0;
+        this._layout = {
+            scale: 1,
+            offsetX: 0,
+            offsetY: 0,
+            width: 0,
+            height: 0,
+        };
+        this._containerSize = containerSize;
+        this._physicalSize = physicalSize;
+        this._padding = padding;
+        this.updateLayout();
+    }
+    get layout() {
+        return this._layout;
+    }
+    get scale() {
+        return this._layout.scale;
+    }
+    get offset() {
+        return { x: this._layout.offsetX, y: this._layout.offsetY };
+    }
+    updateContainer(width, height) {
+        if (this._containerSize.width === width &&
+            this._containerSize.height === height)
+            return;
+        this._containerSize = { width, height };
+        this.updateLayout();
+    }
+    updatePhysical(width, height) {
+        if (this._physicalSize.width === width && this._physicalSize.height === height)
+            return;
+        this._physicalSize = { width, height };
+        this.updateLayout();
+    }
+    setPadding(padding) {
+        if (this._padding === padding)
+            return;
+        this._padding = padding;
+        this.updateLayout();
+    }
+    updateLayout() {
+        this._layout = coordinate_1.Coordinate.calculateLayout(this._containerSize, this._physicalSize, this._padding);
+    }
+    toPixel(value) {
+        return value * this._layout.scale;
+    }
+    toPhysical(value) {
+        return this._layout.scale === 0 ? 0 : value / this._layout.scale;
+    }
+    toPixelPoint(point) {
+        return {
+            x: point.x * this._layout.scale + this._layout.offsetX,
+            y: point.y * this._layout.scale + this._layout.offsetY,
+        };
+    }
+    // Convert screen coordinate (e.g. mouse event) to physical coordinate (relative to content origin)
+    toPhysicalPoint(point) {
+        if (this._layout.scale === 0)
+            return { x: 0, y: 0 };
+        return {
+            x: (point.x - this._layout.offsetX) / this._layout.scale,
+            y: (point.y - this._layout.offsetY) / this._layout.scale,
+        };
+    }
+}
+exports.ViewportSystem = ViewportSystem;

package/.test-dist/src/background.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundTool = void 0;
+const core_1 = require("@pooder/core");
+const fabric_1 = require("fabric");
+class BackgroundTool {
+    constructor(options) {
+        this.id = "pooder.kit.background";
+        this.metadata = {
+            name: "BackgroundTool",
+        };
+        this.color = "";
+        this.url = "";
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+    activate(context) {
+        this.canvasService = context.services.get("CanvasService");
+        if (!this.canvasService) {
+            console.warn("CanvasService not found for BackgroundTool");
+            return;
+        }
+        const configService = context.services.get("ConfigurationService");
+        if (configService) {
+            // Load initial config
+            this.color = configService.get("background.color", this.color);
+            this.url = configService.get("background.url", this.url);
+            // Listen for changes
+            configService.onAnyChange((e) => {
+                if (e.key.startsWith("background.")) {
+                    const prop = e.key.split(".")[1];
+                    console.log(`[BackgroundTool] Config change detected: ${e.key} -> ${e.value}, prop: ${prop}`);
+                    if (prop && prop in this) {
+                        console.log(`[BackgroundTool] Updating option ${prop} to ${e.value}`);
+                        this[prop] = e.value;
+                        this.updateBackground();
+                    }
+                    else {
+                        console.warn(`[BackgroundTool] Property ${prop} not found in options`);
+                    }
+                }
+            });
+        }
+        this.initLayer();
+        this.updateBackground();
+    }
+    deactivate(context) {
+        if (this.canvasService) {
+            const layer = this.canvasService.getLayer("background");
+            if (layer) {
+                this.canvasService.canvas.remove(layer);
+            }
+            this.canvasService = undefined;
+        }
+    }
+    contribute() {
+        return {
+            [core_1.ContributionPointIds.CONFIGURATIONS]: [
+                {
+                    id: "background.color",
+                    type: "color",
+                    label: "Background Color",
+                    default: "",
+                },
+                {
+                    id: "background.url",
+                    type: "string",
+                    label: "Image URL",
+                    default: "",
+                },
+            ],
+            [core_1.ContributionPointIds.COMMANDS]: [
+                {
+                    command: "reset",
+                    title: "Reset Background",
+                    handler: () => {
+                        this.updateBackground();
+                        return true;
+                    },
+                },
+                {
+                    command: "clear",
+                    title: "Clear Background",
+                    handler: () => {
+                        this.color = "transparent";
+                        this.url = "";
+                        this.updateBackground();
+                        return true;
+                    },
+                },
+                {
+                    command: "setBackgroundColor",
+                    title: "Set Background Color",
+                    handler: (color) => {
+                        if (this.color === color)
+                            return true;
+                        this.color = color;
+                        this.updateBackground();
+                        return true;
+                    },
+                },
+                {
+                    command: "setBackgroundImage",
+                    title: "Set Background Image",
+                    handler: (url) => {
+                        if (this.url === url)
+                            return true;
+                        this.url = url;
+                        this.updateBackground();
+                        return true;
+                    },
+                },
+            ],
+        };
+    }
+    initLayer() {
+        if (!this.canvasService)
+            return;
+        let backgroundLayer = this.canvasService.getLayer("background");
+        if (!backgroundLayer) {
+            backgroundLayer = this.canvasService.createLayer("background", {
+                width: this.canvasService.canvas.width,
+                height: this.canvasService.canvas.height,
+                selectable: false,
+                evented: false,
+            });
+            this.canvasService.canvas.sendObjectToBack(backgroundLayer);
+        }
+    }
+    async updateBackground() {
+        if (!this.canvasService)
+            return;
+        const layer = this.canvasService.getLayer("background");
+        if (!layer) {
+            console.warn("[BackgroundTool] Background layer not found");
+            return;
+        }
+        const { color, url } = this;
+        const width = this.canvasService.canvas.width || 800;
+        const height = this.canvasService.canvas.height || 600;
+        let rect = this.canvasService.getObject("background-color-rect", "background");
+        if (rect) {
+            rect.set({
+                fill: color,
+            });
+        }
+        else {
+            rect = new fabric_1.Rect({
+                width,
+                height,
+                fill: color,
+                selectable: false,
+                evented: false,
+                data: {
+                    id: "background-color-rect",
+                },
+            });
+            layer.add(rect);
+            layer.sendObjectToBack(rect);
+        }
+        let img = this.canvasService.getObject("background-image", "background");
+        try {
+            if (img) {
+                if (img.getSrc() !== url) {
+                    if (url) {
+                        await img.setSrc(url);
+                    }
+                    else {
+                        layer.remove(img);
+                    }
+                }
+            }
+            else {
+                if (url) {
+                    img = await fabric_1.FabricImage.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);
+                }
+            }
+            this.canvasService.requestRenderAll();
+        }
+        catch (e) {
+            console.error("[BackgroundTool] Failed to load image", e);
+        }
+        layer.dirty = true;
+        this.canvasService.requestRenderAll();
+    }
+}
+exports.BackgroundTool = BackgroundTool;

package/.test-dist/src/constraints.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConstraintRegistry = void 0;
+class ConstraintRegistry {
+    static register(type, handler) {
+        this.handlers.set(type, handler);
+    }
+    static apply(x, y, feature, context) {
+        if (!feature.constraints || !feature.constraints.type) {
+            return { x, y };
+        }
+        const handler = this.handlers.get(feature.constraints.type);
+        if (handler) {
+            return handler(x, y, feature, context);
+        }
+        return { x, y };
+    }
+}
+exports.ConstraintRegistry = ConstraintRegistry;
+ConstraintRegistry.handlers = new Map();
+// --- Built-in Strategies ---
+/**
+ * Edge Constraint Strategy
+ * Snaps the feature to the nearest allowed edge.
+ * Params:
+ * - allowedEdges: ('top' | 'bottom' | 'left' | 'right')[] (default: all)
+ * - confine: boolean (default: false) - if true, keeps feature within edge length
+ * - offset: number (default: 0) - physical offset from edge (positive = inwards usually, but here 0 is edge)
+ *   For simplicity, let's say offset is additive to the edge position.
+ *   Top: 0 + offset
+ *   Bottom: 1 - offset
+ *   Left: 0 + offset
+ *   Right: 1 - offset
+ */
+const edgeConstraint = (x, y, feature, context) => {
+    const { dielineWidth, dielineHeight } = context;
+    const params = feature.constraints?.params || {};
+    const allowedEdges = params.allowedEdges || [
+        "top",
+        "bottom",
+        "left",
+        "right",
+    ];
+    const confine = params.confine || false;
+    const offset = params.offset || 0;
+    // Calculate physical distances to allowed edges
+    const distances = [];
+    if (allowedEdges.includes("top"))
+        distances.push({ edge: "top", dist: y * dielineHeight });
+    if (allowedEdges.includes("bottom"))
+        distances.push({ edge: "bottom", dist: (1 - y) * dielineHeight });
+    if (allowedEdges.includes("left"))
+        distances.push({ edge: "left", dist: x * dielineWidth });
+    if (allowedEdges.includes("right"))
+        distances.push({ edge: "right", dist: (1 - x) * dielineWidth });
+    if (distances.length === 0)
+        return { x, y };
+    // Find nearest
+    distances.sort((a, b) => a.dist - b.dist);
+    const nearest = distances[0].edge;
+    let newX = x;
+    let newY = y;
+    const fw = feature.width || 0;
+    const fh = feature.height || 0;
+    // Snap to edge
+    switch (nearest) {
+        case "top":
+            newY = 0 + offset / dielineHeight;
+            if (confine) {
+                const minX = (fw / 2) / dielineWidth;
+                const maxX = 1 - minX;
+                newX = Math.max(minX, Math.min(newX, maxX));
+            }
+            break;
+        case "bottom":
+            newY = 1 - offset / dielineHeight;
+            if (confine) {
+                const minX = (fw / 2) / dielineWidth;
+                const maxX = 1 - minX;
+                newX = Math.max(minX, Math.min(newX, maxX));
+            }
+            break;
+        case "left":
+            newX = 0 + offset / dielineWidth;
+            if (confine) {
+                const minY = (fh / 2) / dielineHeight;
+                const maxY = 1 - minY;
+                newY = Math.max(minY, Math.min(newY, maxY));
+            }
+            break;
+        case "right":
+            newX = 1 - offset / dielineWidth;
+            if (confine) {
+                const minY = (fh / 2) / dielineHeight;
+                const maxY = 1 - minY;
+                newY = Math.max(minY, Math.min(newY, maxY));
+            }
+            break;
+    }
+    return { x: newX, y: newY };
+};
+/**
+ * Internal Constraint Strategy
+ * Keeps the feature strictly inside the dieline bounds with optional margin.
+ * Params:
+ * - margin: number (default: 0) - physical margin
+ */
+const internalConstraint = (x, y, feature, context) => {
+    const { dielineWidth, dielineHeight } = context;
+    const params = feature.constraints?.params || {};
+    const margin = params.margin || 0;
+    const fw = feature.width || 0;
+    const fh = feature.height || 0;
+    const minX = (margin + fw / 2) / dielineWidth;
+    const maxX = 1 - (margin + fw / 2) / dielineWidth;
+    const minY = (margin + fh / 2) / dielineHeight;
+    const maxY = 1 - (margin + fh / 2) / dielineHeight;
+    // Handle case where feature is larger than container
+    const clampedX = minX > maxX ? 0.5 : Math.max(minX, Math.min(x, maxX));
+    const clampedY = minY > maxY ? 0.5 : Math.max(minY, Math.min(y, maxY));
+    return { x: clampedX, y: clampedY };
+};
+/**
+ * Bottom Tangent Strategy (stand protrusion)
+ * Forces a feature to be tangent to the dieline bottom edge from outside (below).
+ * Params:
+ * - gap: number (mm, default 0) extra clearance between dieline and protrusion
+ * - confineX: boolean (default true) keep feature within left/right bounds
+ */
+const tangentBottomConstraint = (x, y, feature, context) => {
+    const { dielineWidth, dielineHeight } = context;
+    const params = feature.constraints?.params || {};
+    const gap = params.gap || 0;
+    const confineX = params.confineX !== false;
+    const extentY = feature.shape === "circle"
+        ? feature.radius || 0
+        : (feature.height || 0) / 2;
+    const newY = 1 + (extentY + gap) / dielineHeight;
+    let newX = x;
+    if (confineX) {
+        const extentX = feature.shape === "circle"
+            ? feature.radius || 0
+            : (feature.width || 0) / 2;
+        const minX = extentX / dielineWidth;
+        const maxX = 1 - extentX / dielineWidth;
+        newX = minX > maxX ? 0.5 : Math.max(minX, Math.min(newX, maxX));
+    }
+    return { x: newX, y: newY };
+};
+// Register built-ins
+ConstraintRegistry.register("edge", edgeConstraint);
+ConstraintRegistry.register("internal", internalConstraint);
+ConstraintRegistry.register("tangent-bottom", tangentBottomConstraint);

package/.test-dist/src/coordinate.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Coordinate = void 0;
+class Coordinate {
+    /**
+     * Calculate layout to fit content within container while preserving aspect ratio.
+     */
+    static calculateLayout(container, content, padding = 0) {
+        const availableWidth = Math.max(0, container.width - padding * 2);
+        const availableHeight = Math.max(0, container.height - padding * 2);
+        if (content.width === 0 || content.height === 0) {
+            return { scale: 1, offsetX: 0, offsetY: 0, width: 0, height: 0 };
+        }
+        const scaleX = availableWidth / content.width;
+        const scaleY = availableHeight / content.height;
+        const scale = Math.min(scaleX, scaleY);
+        const width = content.width * scale;
+        const height = content.height * scale;
+        const offsetX = (container.width - width) / 2;
+        const offsetY = (container.height - height) / 2;
+        return { scale, offsetX, offsetY, width, height };
+    }
+    /**
+     * Convert an absolute value to a normalized value (0-1).
+     * @param value Absolute value (e.g., pixels)
+     * @param total Total dimension size (e.g., canvas width)
+     */
+    static toNormalized(value, total) {
+        return total === 0 ? 0 : value / total;
+    }
+    /**
+     * Convert a normalized value (0-1) to an absolute value.
+     * @param normalized Normalized value (0-1)
+     * @param total Total dimension size (e.g., canvas width)
+     */
+    static toAbsolute(normalized, total) {
+        return normalized * total;
+    }
+    /**
+     * Normalize a point's coordinates.
+     */
+    static normalizePoint(point, size) {
+        return {
+            x: this.toNormalized(point.x, size.width),
+            y: this.toNormalized(point.y, size.height),
+        };
+    }
+    /**
+     * Denormalize a point's coordinates to absolute pixels.
+     */
+    static denormalizePoint(point, size) {
+        return {
+            x: this.toAbsolute(point.x, size.width),
+            y: this.toAbsolute(point.y, size.height),
+        };
+    }
+    static convertUnit(value, from, to) {
+        if (from === to)
+            return value;
+        // Base unit: mm
+        const toMM = {
+            px: 0.264583, // 1px = 0.264583mm (96 DPI)
+            mm: 1,
+            cm: 10,
+            in: 25.4
+        };
+        const mmValue = value * (from === 'px' ? toMM.px : toMM[from] || 1);
+        if (to === 'px') {
+            return mmValue / toMM.px;
+        }
+        return mmValue / (toMM[to] || 1);
+    }
+}
+exports.Coordinate = Coordinate;