@pooder/kit 6.0.0 → 6.1.0

package/.test-dist/src/extensions/ruler/RulerTool.js

@@ -0,0 +1,442 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RulerTool = void 0;
+const core_1 = require("@pooder/core");
+const sceneLayoutModel_1 = require("../../shared/scene/sceneLayoutModel");
+const layers_1 = require("../../shared/constants/layers");
+const EXTENSION_LINE_LENGTH = 5;
+const MIN_ARROW_SIZE = 4;
+const THICKNESS_TO_STROKE_WIDTH_RATIO = 20;
+const DEFAULT_THICKNESS = 20;
+const DEFAULT_GAP = 45;
+const DEFAULT_FONT_SIZE = 10;
+const DEFAULT_BACKGROUND_COLOR = "#f0f0f0";
+const DEFAULT_TEXT_COLOR = "#333333";
+const DEFAULT_LINE_COLOR = "#999999";
+const RULER_THICKNESS_MIN = 10;
+const RULER_THICKNESS_MAX = 100;
+const RULER_GAP_MIN = 0;
+const RULER_GAP_MAX = 100;
+const RULER_FONT_SIZE_MIN = 8;
+const RULER_FONT_SIZE_MAX = 24;
+class RulerTool {
+    constructor(options) {
+        this.id = "pooder.kit.ruler";
+        this.metadata = {
+            name: "RulerTool",
+        };
+        this.thickness = DEFAULT_THICKNESS;
+        this.gap = DEFAULT_GAP;
+        this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
+        this.textColor = DEFAULT_TEXT_COLOR;
+        this.lineColor = DEFAULT_LINE_COLOR;
+        this.fontSize = DEFAULT_FONT_SIZE;
+        this.renderSeq = 0;
+        this.numericProps = new Set(["thickness", "gap", "fontSize"]);
+        this.specs = [];
+        this.onCanvasResized = () => {
+            this.updateRuler();
+        };
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+    activate(context) {
+        this.context = context;
+        this.canvasService = context.services.get("CanvasService");
+        if (!this.canvasService) {
+            console.warn("[RulerTool] CanvasService not found.");
+            return;
+        }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: layers_1.RULER_LAYER_ID,
+                    stack: 950,
+                    order: 0,
+                    replace: true,
+                    visibility: {
+                        op: "not",
+                        expr: {
+                            op: "activeToolIn",
+                            ids: ["pooder.kit.white-ink"],
+                        },
+                    },
+                    objects: this.specs,
+                },
+            ],
+        }), { priority: 400 });
+        const configService = context.services.get("ConfigurationService");
+        if (configService) {
+            this.syncConfig(configService);
+            configService.onAnyChange((e) => {
+                let shouldUpdate = false;
+                if (e.key.startsWith("ruler.")) {
+                    const prop = e.key.split(".")[1];
+                    if (prop && prop in this) {
+                        if (this.numericProps.has(prop)) {
+                            this[prop] = this.toFiniteNumber(e.value, this[prop]);
+                        }
+                        else {
+                            this[prop] = e.value;
+                        }
+                        shouldUpdate = true;
+                        this.log("config:update", {
+                            key: e.key,
+                            raw: e.value,
+                            normalized: this[prop],
+                        });
+                    }
+                }
+                else if (e.key.startsWith("size.")) {
+                    shouldUpdate = true;
+                    this.log("size:update", { key: e.key, value: e.value });
+                }
+                if (shouldUpdate) {
+                    this.updateRuler();
+                }
+            });
+        }
+        context.eventBus.on("canvas:resized", this.onCanvasResized);
+        this.updateRuler();
+    }
+    deactivate(context) {
+        context.eventBus.off("canvas:resized", this.onCanvasResized);
+        this.specs = [];
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
+        if (this.canvasService) {
+            void this.canvasService.flushRenderFromProducers();
+        }
+        this.canvasService = undefined;
+        this.context = undefined;
+        this.renderSeq = 0;
+    }
+    contribute() {
+        return {
+            [core_1.ContributionPointIds.CONFIGURATIONS]: [
+                {
+                    id: "ruler.thickness",
+                    type: "number",
+                    label: "Thickness",
+                    min: RULER_THICKNESS_MIN,
+                    max: RULER_THICKNESS_MAX,
+                    default: DEFAULT_THICKNESS,
+                },
+                {
+                    id: "ruler.gap",
+                    type: "number",
+                    label: "Gap",
+                    min: RULER_GAP_MIN,
+                    max: RULER_GAP_MAX,
+                    default: DEFAULT_GAP,
+                },
+                {
+                    id: "ruler.backgroundColor",
+                    type: "color",
+                    label: "Background Color",
+                    default: DEFAULT_BACKGROUND_COLOR,
+                },
+                {
+                    id: "ruler.textColor",
+                    type: "color",
+                    label: "Text Color",
+                    default: DEFAULT_TEXT_COLOR,
+                },
+                {
+                    id: "ruler.lineColor",
+                    type: "color",
+                    label: "Line Color",
+                    default: DEFAULT_LINE_COLOR,
+                },
+                {
+                    id: "ruler.fontSize",
+                    type: "number",
+                    label: "Font Size",
+                    min: RULER_FONT_SIZE_MIN,
+                    max: RULER_FONT_SIZE_MAX,
+                    default: DEFAULT_FONT_SIZE,
+                },
+            ],
+            [core_1.ContributionPointIds.COMMANDS]: [
+                {
+                    command: "setTheme",
+                    title: "Set Ruler Theme",
+                    handler: (theme) => {
+                        const oldState = {
+                            backgroundColor: this.backgroundColor,
+                            textColor: this.textColor,
+                            lineColor: this.lineColor,
+                            fontSize: this.fontSize,
+                            thickness: this.thickness,
+                            gap: this.gap,
+                        };
+                        const newState = { ...oldState, ...theme };
+                        if (JSON.stringify(newState) === JSON.stringify(oldState)) {
+                            return true;
+                        }
+                        Object.assign(this, newState);
+                        this.thickness = this.toFiniteNumber(this.thickness, DEFAULT_THICKNESS);
+                        this.gap = this.toFiniteNumber(this.gap, DEFAULT_GAP);
+                        this.fontSize = this.toFiniteNumber(this.fontSize, DEFAULT_FONT_SIZE);
+                        this.updateRuler();
+                        return true;
+                    },
+                },
+            ],
+        };
+    }
+    log(step, payload) {
+        if (payload) {
+            console.debug(`[RulerTool] ${step}`, payload);
+            return;
+        }
+        console.debug(`[RulerTool] ${step}`);
+    }
+    syncConfig(configService) {
+        this.thickness = this.toFiniteNumber(configService.get("ruler.thickness", this.thickness), DEFAULT_THICKNESS);
+        this.gap = Math.max(0, this.toFiniteNumber(configService.get("ruler.gap", this.gap), DEFAULT_GAP));
+        this.backgroundColor = configService.get("ruler.backgroundColor", this.backgroundColor);
+        this.textColor = configService.get("ruler.textColor", this.textColor);
+        this.lineColor = configService.get("ruler.lineColor", this.lineColor);
+        this.fontSize = this.toFiniteNumber(configService.get("ruler.fontSize", this.fontSize), DEFAULT_FONT_SIZE);
+        this.log("config:loaded", {
+            thickness: this.thickness,
+            gap: this.gap,
+            fontSize: this.fontSize,
+            backgroundColor: this.backgroundColor,
+            textColor: this.textColor,
+            lineColor: this.lineColor,
+        });
+    }
+    toFiniteNumber(value, fallback) {
+        const numeric = Number(value);
+        return Number.isFinite(numeric) ? numeric : fallback;
+    }
+    toSceneDisplayLength(value) {
+        if (!this.canvasService)
+            return value;
+        return this.canvasService.toSceneLength(value);
+    }
+    formatLengthMm(valueMm, unit) {
+        const converted = (0, sceneLayoutModel_1.fromMm)(valueMm, unit);
+        const fractionDigits = unit === "in" ? 3 : 2;
+        return Number(converted.toFixed(fractionDigits)).toString();
+    }
+    buildLinePath(start, end) {
+        const dx = end.x - start.x;
+        const dy = end.y - start.y;
+        return `M 0 0 L ${dx} ${dy}`;
+    }
+    buildStartArrowPath(size) {
+        return `M 0 0 L ${size} ${-size / 2} L ${size} ${size / 2} Z`;
+    }
+    buildEndArrowPath(size) {
+        return `M 0 0 L ${-size} ${-size / 2} L ${-size} ${size / 2} Z`;
+    }
+    createPathSpec(id, pathData, position, options) {
+        return {
+            id,
+            type: "path",
+            data: {
+                id,
+                type: "ruler",
+            },
+            props: {
+                pathData,
+                left: position.x,
+                top: position.y,
+                originX: options.originX ?? "left",
+                originY: options.originY ?? "top",
+                angle: options.angle ?? 0,
+                stroke: options.stroke ?? null,
+                fill: options.fill ?? null,
+                strokeWidth: options.strokeWidth ?? 1,
+                strokeLineCap: options.strokeLineCap ?? "butt",
+                selectable: false,
+                evented: false,
+                excludeFromExport: true,
+            },
+        };
+    }
+    createTextSpec(id, text, position, angle = 0) {
+        return {
+            id,
+            type: "text",
+            data: {
+                id,
+                type: "ruler",
+            },
+            props: {
+                text,
+                left: position.x,
+                top: position.y,
+                angle,
+                fontSize: this.toSceneDisplayLength(this.fontSize),
+                fill: this.textColor,
+                fontFamily: "Arial",
+                originX: "center",
+                originY: "center",
+                backgroundColor: this.backgroundColor,
+                selectable: false,
+                evented: false,
+                excludeFromExport: true,
+            },
+        };
+    }
+    buildRulerSpecs(input) {
+        const { left, top, right, bottom, widthLabel, heightLabel } = input;
+        const gap = Math.max(0, this.toSceneDisplayLength(this.toFiniteNumber(this.gap, DEFAULT_GAP)));
+        const topY = top - gap;
+        const leftX = left - gap;
+        const arrowSize = Math.max(this.toSceneDisplayLength(MIN_ARROW_SIZE), this.toSceneDisplayLength(this.thickness * 0.3));
+        const strokeWidth = Math.max(this.toSceneDisplayLength(1), this.toSceneDisplayLength(this.thickness / THICKNESS_TO_STROKE_WIDTH_RATIO));
+        const extensionLength = this.toSceneDisplayLength(EXTENSION_LINE_LENGTH);
+        const topLineAngleDeg = 0;
+        const leftLineAngleDeg = 90;
+        // Keep dimension line inside the arrow heads so it doesn't visually overflow.
+        const topMidX = left + (right - left) / 2;
+        const leftMidY = top + (bottom - top) / 2;
+        const topLineStartX = Math.min(left + arrowSize, topMidX);
+        const topLineEndX = Math.max(right - arrowSize, topMidX);
+        const leftLineStartY = Math.min(top + arrowSize, leftMidY);
+        const leftLineEndY = Math.max(bottom - arrowSize, leftMidY);
+        const specs = [];
+        specs.push(this.createPathSpec("ruler.top.line", this.buildLinePath({ x: topLineStartX, y: topY }, { x: topLineEndX, y: topY }), { x: topLineStartX, y: topY }, {
+            stroke: this.lineColor,
+            strokeWidth,
+            strokeLineCap: "butt",
+        }), this.createPathSpec("ruler.top.arrow.start", this.buildStartArrowPath(arrowSize), { x: left, y: topY }, {
+            fill: this.lineColor,
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+            originX: "left",
+            originY: "center",
+            angle: topLineAngleDeg,
+        }), this.createPathSpec("ruler.top.arrow.end", this.buildEndArrowPath(arrowSize), { x: right, y: topY }, {
+            fill: this.lineColor,
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+            originX: "right",
+            originY: "center",
+            angle: topLineAngleDeg,
+        }), this.createPathSpec("ruler.top.ext.start", this.buildLinePath({ x: left, y: topY - extensionLength }, { x: left, y: topY + extensionLength }), { x: left, y: topY - extensionLength }, {
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+        }), this.createPathSpec("ruler.top.ext.end", this.buildLinePath({ x: right, y: topY - extensionLength }, { x: right, y: topY + extensionLength }), { x: right, y: topY - extensionLength }, {
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+        }), this.createTextSpec("ruler.top.label", widthLabel, {
+            x: left + (right - left) / 2,
+            y: topY,
+        }));
+        specs.push(this.createPathSpec("ruler.left.line", this.buildLinePath({ x: leftX, y: leftLineStartY }, { x: leftX, y: leftLineEndY }), { x: leftX, y: leftLineStartY }, {
+            stroke: this.lineColor,
+            strokeWidth,
+            strokeLineCap: "butt",
+        }), this.createPathSpec("ruler.left.arrow.start", this.buildStartArrowPath(arrowSize), { x: leftX, y: top }, {
+            fill: this.lineColor,
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+            originX: "left",
+            originY: "center",
+            angle: leftLineAngleDeg,
+        }), this.createPathSpec("ruler.left.arrow.end", this.buildEndArrowPath(arrowSize), { x: leftX, y: bottom }, {
+            fill: this.lineColor,
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+            originX: "right",
+            originY: "center",
+            angle: leftLineAngleDeg,
+        }), this.createPathSpec("ruler.left.ext.start", this.buildLinePath({ x: leftX - extensionLength, y: top }, { x: leftX + extensionLength, y: top }), { x: leftX - extensionLength, y: top }, {
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+        }), this.createPathSpec("ruler.left.ext.end", this.buildLinePath({ x: leftX - extensionLength, y: bottom }, { x: leftX + extensionLength, y: bottom }), { x: leftX - extensionLength, y: bottom }, {
+            stroke: this.lineColor,
+            strokeWidth: this.toSceneDisplayLength(1),
+        }), this.createTextSpec("ruler.left.label", heightLabel, {
+            x: leftX,
+            y: top + (bottom - top) / 2,
+        }, -90));
+        return specs;
+    }
+    updateRuler() {
+        void this.updateRulerAsync();
+    }
+    async updateRulerAsync() {
+        if (!this.canvasService)
+            return;
+        const configService = this.context?.services.get("ConfigurationService");
+        if (!configService)
+            return;
+        const seq = ++this.renderSeq;
+        const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
+        const layout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, sizeState);
+        this.log("render:start", {
+            seq,
+            unit: sizeState.unit,
+            gap: this.gap,
+            thickness: this.thickness,
+            fontSize: this.fontSize,
+            hasLayout: !!layout,
+            scale: layout?.scale ?? null,
+        });
+        if (!layout || layout.scale <= 0) {
+            if (seq !== this.renderSeq)
+                return;
+            this.log("render:skip", { seq, reason: "invalid-layout" });
+            this.specs = [];
+            await this.canvasService.flushRenderFromProducers();
+            return;
+        }
+        const geometry = (0, sceneLayoutModel_1.buildSceneGeometry)(configService, layout);
+        if (geometry.unit !== "px") {
+            console.warn("[RulerTool] Unexpected geometry unit.", geometry.unit);
+        }
+        const centerScene = this.canvasService.toScenePoint({
+            x: geometry.x,
+            y: geometry.y,
+        });
+        const widthScene = this.canvasService.toSceneLength(geometry.width);
+        const heightScene = this.canvasService.toSceneLength(geometry.height);
+        const rulerLeft = centerScene.x - widthScene / 2;
+        const rulerTop = centerScene.y - heightScene / 2;
+        const rulerRight = rulerLeft + widthScene;
+        const rulerBottom = rulerTop + heightScene;
+        const widthMm = widthScene;
+        const heightMm = heightScene;
+        const unit = sizeState.unit;
+        const widthLabel = `${this.formatLengthMm(widthMm, unit)} ${unit}`;
+        const heightLabel = `${this.formatLengthMm(heightMm, unit)} ${unit}`;
+        const specs = this.buildRulerSpecs({
+            left: rulerLeft,
+            top: rulerTop,
+            right: rulerRight,
+            bottom: rulerBottom,
+            widthLabel,
+            heightLabel,
+        });
+        this.log("render:geometry", {
+            seq,
+            left: rulerLeft,
+            top: rulerTop,
+            right: rulerRight,
+            bottom: rulerBottom,
+            widthScene,
+            heightScene,
+            widthMm,
+            heightMm,
+            specCount: specs.length,
+        });
+        if (seq !== this.renderSeq)
+            return;
+        this.specs = specs;
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
+        this.canvasService.requestRenderAll();
+        this.log("render:done", { seq });
+    }
+}
+exports.RulerTool = RulerTool;

package/.test-dist/src/extensions/ruler/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RulerTool"), exports);

package/.test-dist/src/extensions/sceneLayout.js

@@ -1,96 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SceneLayoutService = void 0;
-const core_1 = require("@pooder/core");
-const sceneLayoutModel_1 = require("./sceneLayoutModel");
-const CONFIG_WATCH_PREFIXES = ["size.", "dieline."];
-const CANVAS_SERVICE_ID = "CanvasService";
-const GET_SCENE_LAYOUT_COMMAND = "getSceneLayout";
-const GET_SCENE_GEOMETRY_COMMAND = "getSceneGeometry";
-class SceneLayoutService {
-    constructor() {
-        this.lastLayout = null;
-        this.lastGeometry = null;
-        this.commandDisposables = [];
-        this.onCanvasResized = () => {
-            this.refresh();
-        };
-        this.onConfigChanged = (e) => {
-            if (CONFIG_WATCH_PREFIXES.some((prefix) => e.key.startsWith(prefix))) {
-                this.refresh();
-            }
-        };
-    }
-    init(context) {
-        if (this.context) {
-            this.dispose(this.context);
-        }
-        const canvasService = context.get(CANVAS_SERVICE_ID);
-        const configService = context.get(core_1.CONFIGURATION_SERVICE);
-        const commandService = context.get(core_1.COMMAND_SERVICE);
-        if (!canvasService || !configService || !commandService) {
-            throw new Error("[SceneLayoutService] CanvasService, ConfigurationService and CommandService are required.");
-        }
-        this.context = context;
-        this.canvasService = canvasService;
-        this.configService = configService;
-        this.commandDisposables.push(commandService.registerCommand(GET_SCENE_LAYOUT_COMMAND, () => this.getLayout()), commandService.registerCommand(GET_SCENE_GEOMETRY_COMMAND, () => this.getGeometry()));
-        this.onConfigChange = configService.onAnyChange(this.onConfigChanged);
-        context.eventBus.on("canvas:resized", this.onCanvasResized);
-        this.refresh();
-    }
-    dispose(context) {
-        const activeContext = this.context ?? context;
-        activeContext.eventBus.off("canvas:resized", this.onCanvasResized);
-        this.onConfigChange?.dispose();
-        this.onConfigChange = undefined;
-        this.commandDisposables.forEach((item) => item.dispose());
-        this.commandDisposables = [];
-        this.context = undefined;
-        this.canvasService = undefined;
-        this.configService = undefined;
-        this.lastLayout = null;
-        this.lastGeometry = null;
-    }
-    refresh() {
-        const layout = this.getLayout(true);
-        if (!layout) {
-            this.lastGeometry = null;
-            return;
-        }
-        this.context?.eventBus.emit("scene:layout:change", layout);
-        const geometry = this.getGeometry(true);
-        if (geometry) {
-            this.context?.eventBus.emit("scene:geometry:change", geometry);
-        }
-    }
-    getLayout(forceRefresh = false) {
-        if (!this.canvasService || !this.configService)
-            return null;
-        if (!forceRefresh && this.lastLayout)
-            return this.lastLayout;
-        const state = (0, sceneLayoutModel_1.readSizeState)(this.configService);
-        const layout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, state);
-        if (!layout) {
-            this.lastLayout = null;
-            return null;
-        }
-        this.lastLayout = layout;
-        return layout;
-    }
-    getGeometry(forceRefresh = false) {
-        if (!this.configService)
-            return null;
-        const layout = this.getLayout(forceRefresh);
-        if (!layout) {
-            this.lastGeometry = null;
-            return null;
-        }
-        if (!forceRefresh && this.lastGeometry)
-            return this.lastGeometry;
-        const geometry = (0, sceneLayoutModel_1.buildSceneGeometry)(this.configService, layout);
-        this.lastGeometry = geometry;
-        return geometry;
-    }
-}
-exports.SceneLayoutService = SceneLayoutService;
+var SceneLayoutService_1 = require("../services/SceneLayoutService");
+Object.defineProperty(exports, "SceneLayoutService", { enumerable: true, get: function () { return SceneLayoutService_1.SceneLayoutService; } });