@pooder/kit 5.3.1 → 6.0.0

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

@@ -2,21 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RulerTool = void 0;
 const core_1 = require("@pooder/core");
-const fabric_1 = require("fabric");
-const units_1 = require("../units");
 const sceneLayoutModel_1 = require("./sceneLayoutModel");
+const RULER_LAYER_ID = "ruler-overlay";
+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 = 20;
-        this.gap = 15;
-        this.backgroundColor = "#f0f0f0";
-        this.textColor = "#333333";
-        this.lineColor = "#999999";
-        this.fontSize = 10;
+        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();
         };
@@ -28,45 +45,73 @@ class RulerTool {
         this.context = context;
         this.canvasService = context.services.get("CanvasService");
         if (!this.canvasService) {
-            console.warn("CanvasService not found for RulerTool");
+            console.warn("[RulerTool] CanvasService not found.");
             return;
         }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: 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) {
-            // Load initial config
-            this.thickness = configService.get("ruler.thickness", this.thickness);
-            this.gap = configService.get("ruler.gap", this.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 = configService.get("ruler.fontSize", this.fontSize);
-            // Listen for changes
+            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) {
-                        this[prop] = e.value;
+                        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();
                 }
             });
         }
-        this.createLayer();
         context.eventBus.on("canvas:resized", this.onCanvasResized);
         this.updateRuler();
     }
     deactivate(context) {
         context.eventBus.off("canvas:resized", this.onCanvasResized);
-        this.destroyLayer();
+        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 {
@@ -75,43 +120,43 @@ class RulerTool {
                     id: "ruler.thickness",
                     type: "number",
                     label: "Thickness",
-                    min: 10,
-                    max: 100,
-                    default: 20,
+                    min: RULER_THICKNESS_MIN,
+                    max: RULER_THICKNESS_MAX,
+                    default: DEFAULT_THICKNESS,
                 },
                 {
                     id: "ruler.gap",
                     type: "number",
                     label: "Gap",
-                    min: 0,
-                    max: 100,
-                    default: 15,
+                    min: RULER_GAP_MIN,
+                    max: RULER_GAP_MAX,
+                    default: DEFAULT_GAP,
                 },
                 {
                     id: "ruler.backgroundColor",
                     type: "color",
                     label: "Background Color",
-                    default: "#f0f0f0",
+                    default: DEFAULT_BACKGROUND_COLOR,
                 },
                 {
                     id: "ruler.textColor",
                     type: "color",
                     label: "Text Color",
-                    default: "#333333",
+                    default: DEFAULT_TEXT_COLOR,
                 },
                 {
                     id: "ruler.lineColor",
                     type: "color",
                     label: "Line Color",
-                    default: "#999999",
+                    default: DEFAULT_LINE_COLOR,
                 },
                 {
                     id: "ruler.fontSize",
                     type: "number",
                     label: "Font Size",
-                    min: 8,
-                    max: 24,
-                    default: 10,
+                    min: RULER_FONT_SIZE_MIN,
+                    max: RULER_FONT_SIZE_MAX,
+                    default: DEFAULT_FONT_SIZE,
                 },
             ],
             [core_1.ContributionPointIds.COMMANDS]: [
@@ -125,11 +170,16 @@ class RulerTool {
                             lineColor: this.lineColor,
                             fontSize: this.fontSize,
                             thickness: this.thickness,
+                            gap: this.gap,
                         };
                         const newState = { ...oldState, ...theme };
-                        if (JSON.stringify(newState) === JSON.stringify(oldState))
+                        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;
                     },
@@ -137,209 +187,256 @@ class RulerTool {
             ],
         };
     }
-    getLayer() {
-        return this.canvasService?.getLayer("ruler-overlay");
-    }
-    createLayer() {
-        if (!this.canvasService)
+    log(step, payload) {
+        if (payload) {
+            console.debug(`[RulerTool] ${step}`, payload);
             return;
-        const canvas = this.canvasService.canvas;
-        const width = canvas.width || 800;
-        const height = canvas.height || 600;
-        const layer = this.canvasService.createLayer("ruler-overlay", {
-            width,
-            height,
-            selectable: false,
-            evented: false,
-            left: 0,
-            top: 0,
-            originX: "left",
-            originY: "top",
+        }
+        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,
         });
-        canvas.bringObjectToFront(layer);
     }
-    destroyLayer() {
+    toFiniteNumber(value, fallback) {
+        const numeric = Number(value);
+        return Number.isFinite(numeric) ? numeric : fallback;
+    }
+    toSceneDisplayLength(value) {
         if (!this.canvasService)
-            return;
-        const layer = this.getLayer();
-        if (layer) {
-            this.canvasService.canvas.remove(layer);
-        }
+            return value;
+        return this.canvasService.toSceneLength(value);
     }
-    createArrowLine(x1, y1, x2, y2, color) {
-        const line = new fabric_1.Line([x1, y1, x2, y2], {
-            stroke: color,
-            strokeWidth: this.thickness / 20, // Scale stroke width relative to thickness (default 1)
-            selectable: false,
-            evented: false,
-        });
-        // Arrow size proportional to thickness
-        const arrowSize = Math.max(4, this.thickness * 0.3);
-        const angle = Math.atan2(y2 - y1, x2 - x1);
-        // End Arrow (at x2, y2)
-        const endArrow = new fabric_1.Polygon([
-            { x: 0, y: 0 },
-            { x: -arrowSize, y: -arrowSize / 2 },
-            { x: -arrowSize, y: arrowSize / 2 },
-        ], {
-            fill: color,
-            left: x2,
-            top: y2,
+    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: (angle * 180) / Math.PI,
-            selectable: false,
-            evented: false,
-        });
-        // Start Arrow (at x1, y1)
-        const startArrow = new fabric_1.Polygon([
-            { x: 0, y: 0 },
-            { x: arrowSize, y: -arrowSize / 2 },
-            { x: arrowSize, y: arrowSize / 2 },
-        ], {
-            fill: color,
-            left: x1,
-            top: y1,
+            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: (angle * 180) / Math.PI,
-            selectable: false,
-            evented: false,
-        });
-        return new fabric_1.Group([line, startArrow, endArrow], {
-            selectable: false,
-            evented: false,
-        });
+            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 layer = this.getLayer();
-        if (!layer)
-            return;
-        layer.remove(...layer.getObjects());
-        const { backgroundColor, lineColor, textColor, fontSize } = this;
         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);
-        if (!layout)
+        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 trimRect = layout.trimRect;
-        const cutRect = layout.cutRect;
-        const useCutAsRuler = layout.cutMode === "outset";
-        const rulerRect = useCutAsRuler ? cutRect : trimRect;
-        // Use gap configuration
-        const gap = this.gap || 15;
-        // New Bounding Box for Ruler
-        const rulerLeft = rulerRect.left;
-        const rulerTop = rulerRect.top;
-        const rulerRight = rulerRect.left + rulerRect.width;
-        const rulerBottom = rulerRect.top + rulerRect.height;
-        // Display Dimensions (Physical)
-        const displayWidthMm = useCutAsRuler
-            ? layout.cutWidthMm
-            : layout.trimWidthMm;
-        const displayHeightMm = useCutAsRuler
-            ? layout.cutHeightMm
-            : layout.trimHeightMm;
-        const displayUnit = sizeState.unit;
-        // Ruler Placement Coordinates
-        // Top Ruler: Above the top boundary
-        const topRulerY = rulerTop - gap;
-        const topRulerXStart = rulerLeft;
-        const topRulerXEnd = rulerRight;
-        // Left Ruler: Left of the left boundary
-        const leftRulerX = rulerLeft - gap;
-        const leftRulerYStart = rulerTop;
-        const leftRulerYEnd = rulerBottom;
-        // 1. Top Dimension Line (X-Axis)
-        const topDimLine = this.createArrowLine(topRulerXStart, topRulerY, topRulerXEnd, topRulerY, lineColor);
-        layer.add(topDimLine);
-        // Top Extension Lines
-        const extLen = 5;
-        layer.add(new fabric_1.Line([
-            topRulerXStart,
-            topRulerY - extLen,
-            topRulerXStart,
-            topRulerY + extLen,
-        ], {
-            stroke: lineColor,
-            strokeWidth: 1,
-            selectable: false,
-            evented: false,
-        }));
-        layer.add(new fabric_1.Line([topRulerXEnd, topRulerY - extLen, topRulerXEnd, topRulerY + extLen], {
-            stroke: lineColor,
-            strokeWidth: 1,
-            selectable: false,
-            evented: false,
-        }));
-        // Top Text (Centered)
-        const widthStr = (0, units_1.formatMm)(displayWidthMm, displayUnit);
-        const topTextContent = `${widthStr} ${displayUnit}`;
-        const topText = new fabric_1.Text(topTextContent, {
-            left: topRulerXStart + (rulerRight - rulerLeft) / 2,
-            top: topRulerY,
-            fontSize: fontSize,
-            fill: textColor,
-            fontFamily: "Arial",
-            originX: "center",
-            originY: "center",
-            backgroundColor: backgroundColor, // Background mask for readability
-            selectable: false,
-            evented: false,
+        }
+        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,
         });
-        // Add small padding to text background if Fabric supports it directly or via separate rect
-        // Fabric Text backgroundColor is tight.
-        layer.add(topText);
-        // 2. Left Dimension Line (Y-Axis)
-        const leftDimLine = this.createArrowLine(leftRulerX, leftRulerYStart, leftRulerX, leftRulerYEnd, lineColor);
-        layer.add(leftDimLine);
-        // Left Extension Lines
-        layer.add(new fabric_1.Line([
-            leftRulerX - extLen,
-            leftRulerYStart,
-            leftRulerX + extLen,
-            leftRulerYStart,
-        ], {
-            stroke: lineColor,
-            strokeWidth: 1,
-            selectable: false,
-            evented: false,
-        }));
-        layer.add(new fabric_1.Line([
-            leftRulerX - extLen,
-            leftRulerYEnd,
-            leftRulerX + extLen,
-            leftRulerYEnd,
-        ], {
-            stroke: lineColor,
-            strokeWidth: 1,
-            selectable: false,
-            evented: false,
-        }));
-        // Left Text (Centered, Rotated)
-        const heightStr = (0, units_1.formatMm)(displayHeightMm, displayUnit);
-        const leftTextContent = `${heightStr} ${displayUnit}`;
-        const leftText = new fabric_1.Text(leftTextContent, {
-            left: leftRulerX,
-            top: leftRulerYStart + (rulerBottom - rulerTop) / 2,
-            angle: -90,
-            fontSize: fontSize,
-            fill: textColor,
-            fontFamily: "Arial",
-            originX: "center",
-            originY: "center",
-            backgroundColor: backgroundColor,
-            selectable: false,
-            evented: false,
+        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,
         });
-        layer.add(leftText);
-        // Always bring ruler to front
-        this.canvasService.canvas.bringObjectToFront(layer);
-        this.canvasService.canvas.requestRenderAll();
+        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;