@zebrash/core 0.1.3 → 0.1.4

package/dist/svg-drawers/text_field.js

@@ -0,0 +1,264 @@
+// SVG analogue of `drawers/text_field.ts`. This is the most complex drawer
+// — orientation, font scaling, word-wrap, anchor positioning all matter.
+//
+// Approach: measure on an offscreen canvas (so we get the same widths as the
+// PNG path, and word-wrap lands on identical line breaks), but emit `<text>`
+// elements for the actual rendering. Pre-anchor the x/y so we always emit
+// with `text-anchor="start"` — that sidesteps any rasteriser-specific
+// interpretation of SVG's anchor / dominant-baseline interactions.
+import { FONT_FAMILY_DEJAVU_MONO, FONT_FAMILY_DEJAVU_MONO_BOLD, FONT_FAMILY_HELVETICA_BOLD, FONT_FAMILY_ZPL_GS, registerEmbeddedFonts, } from "../assets/index.js";
+import { FieldAlignmentRight, FieldOrientation90, FieldOrientation180, FieldOrientation270, TextAlignmentCenter, TextAlignmentJustified, TextAlignmentRight, } from "../elements/index.js";
+import { platform } from "../platform.js";
+import { rotateAbout, scaleAbout } from "./transform.js";
+const FONT_KEY_BY_FAMILY = {
+    [FONT_FAMILY_HELVETICA_BOLD]: "HelveticaBold",
+    [FONT_FAMILY_DEJAVU_MONO]: "DejavuSansMono",
+    [FONT_FAMILY_DEJAVU_MONO_BOLD]: "DejavuSansMonoBold",
+    [FONT_FAMILY_ZPL_GS]: "ZplGS",
+};
+function isTextField(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        value._kind === "TextField");
+}
+let measureCtx = null;
+function getMeasureCtx() {
+    if (measureCtx === null) {
+        const canvas = platform.createCanvas(1, 1);
+        const ctx = canvas.getContext("2d");
+        if (ctx === null) {
+            throw new Error("zebrash: failed to acquire 2D context for SVG text measurement");
+        }
+        measureCtx = ctx;
+    }
+    return measureCtx;
+}
+export function newTextFieldSvgDrawer() {
+    return {
+        async draw(emitter, element, _options, state) {
+            if (!isTextField(element))
+                return;
+            // Same lazy font setup as the canvas drawer — needed because the
+            // measurement canvas (offscreen, but real) still uses the platform's
+            // font registry.
+            await registerEmbeddedFonts();
+            if (element.font.customFont && !element.font.customFontFamily) {
+                await platform.registerFont(element.font.customFont.data, element.font.customFont.name);
+                element.font.customFontFamily = element.font.customFont.name;
+            }
+            const text = adjustTextField(element);
+            const scaleX = getFontScaleX(text.font);
+            const family = getFontFamily(text.font);
+            const fontKey = FONT_KEY_BY_FAMILY[family];
+            const ctx = getMeasureCtx();
+            ctx.font = `${text.font.height}px "${family}"`;
+            ctx.textBaseline = "alphabetic";
+            ctx.textAlign = "left";
+            const { width: rawW, fontHeight } = measure(ctx, text.text);
+            const w = rawW * scaleX;
+            const h = fontHeight;
+            const [x, y] = getTextTopLeftPos(text, w, h, state);
+            state.updateAutomaticTextPosition(text, w);
+            const [ax, ay] = getTextAxAy(text);
+            emitter.save();
+            try {
+                rotateAbout(emitter, text.font.orientation, x, y);
+                if (scaleX !== 1.0) {
+                    scaleAbout(emitter, scaleX, 1, x, y);
+                }
+                if (text.block) {
+                    const maxWidth = text.block.maxWidth / scaleX;
+                    const lineSpacing = h === 0 ? 1 : 1 + text.block.lineSpacing / h;
+                    drawStringWrapped(emitter, ctx, text.text, x, y - h, ax, ay, maxWidth, lineSpacing, text.block.alignment, h, family, fontKey, text.font.height);
+                }
+                else {
+                    drawStringAnchored(emitter, ctx, text.text, x, y, ax, ay, family, fontKey, text.font.height);
+                }
+            }
+            finally {
+                emitter.restore();
+            }
+        },
+    };
+}
+// ---------------------------------------------------------------------------
+// Helpers — same shape as the canvas drawer, but rendering through the emitter.
+// ---------------------------------------------------------------------------
+function adjustTextField(text) {
+    if (text.font.name === "B") {
+        return { ...text, text: text.text.toUpperCase() };
+    }
+    return text;
+}
+function getFontFamily(font) {
+    if (font.customFontFamily)
+        return font.customFontFamily;
+    switch (font.name) {
+        case "0":
+            return FONT_FAMILY_HELVETICA_BOLD;
+        case "B":
+            return FONT_FAMILY_DEJAVU_MONO_BOLD;
+        case "GS":
+            return FONT_FAMILY_ZPL_GS;
+        default:
+            return FONT_FAMILY_DEJAVU_MONO;
+    }
+}
+function getFontScaleX(font) {
+    if (font.height !== 0) {
+        return (widthToHeightRatio(font) * font.width) / font.height;
+    }
+    return 1.0;
+}
+function widthToHeightRatio(font) {
+    if (font.name === "0" || font.name === "GS" || font.customFontFamily) {
+        return 1.0;
+    }
+    return 2.0;
+}
+function getTextTopLeftPos(text, w, h, state) {
+    const [x, y] = state.getTextPosition(text);
+    let lines = 1;
+    let spacing = 0;
+    let blockW = w;
+    if (text.block) {
+        lines = Math.max(text.block.maxLines, 1);
+        spacing = text.block.lineSpacing;
+        blockW = text.block.maxWidth;
+    }
+    if (!text.position.calculateFromBottom) {
+        switch (text.font.orientation) {
+            case FieldOrientation90:
+                return [x + h / 4, y];
+            case FieldOrientation180:
+                return [x + blockW, y + h / 4];
+            case FieldOrientation270:
+                return [x + (3 * h) / 4, y + blockW];
+            default:
+                return [x, y + (3 * h) / 4];
+        }
+    }
+    const offset = (lines - 1) * (h + spacing);
+    switch (text.font.orientation) {
+        case FieldOrientation90:
+            return [x + offset, y];
+        case FieldOrientation180:
+            return [x, y + offset];
+        case FieldOrientation270:
+            return [x - offset, y];
+        default:
+            return [x, y - offset];
+    }
+}
+function getTextAxAy(text) {
+    return [text.alignment === FieldAlignmentRight ? 1 : 0, 0];
+}
+function measure(ctx, s) {
+    const m = ctx.measureText(s);
+    return {
+        width: m.width,
+        fontHeight: m.fontBoundingBoxAscent + m.fontBoundingBoxDescent,
+    };
+}
+/**
+ * Mirrors the canvas drawer's `drawStringAnchored`. We pre-compute the
+ * effective x/y (same arithmetic the canvas applies via fillText offsets)
+ * and emit a single `<text>` with `text-anchor="start"`.
+ */
+function drawStringAnchored(emitter, ctx, s, x, y, ax, ay, family, fontKey, fontSize) {
+    const { width, fontHeight } = measure(ctx, s);
+    emitter.text(x - ax * width, y + ay * fontHeight, s, {
+        fontFamily: family,
+        fontKey,
+        fontSize,
+        anchor: "start",
+    });
+}
+/**
+ * Mirrors the canvas drawer's `drawStringWrapped` + `drawStringJustified`.
+ */
+function drawStringWrapped(emitter, ctx, s, x, y, ax, ay, width, lineSpacing, align, fontHeight, family, fontKey, fontSize) {
+    const lines = wordWrap(ctx, s, width);
+    let totalH = lines.length * fontHeight * lineSpacing;
+    totalH -= (lineSpacing - 1) * fontHeight;
+    let cx = x - ax * width;
+    let cy = y - ay * totalH;
+    let lineAx = ax;
+    switch (align) {
+        case TextAlignmentCenter:
+            lineAx = 0.5;
+            cx += width / 2;
+            break;
+        case TextAlignmentRight:
+            lineAx = 1;
+            cx += width;
+            break;
+        default:
+            lineAx = 0;
+            break;
+    }
+    const lineAy = 1;
+    const lastLine = lines.length - 1;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i] ?? "";
+        if (align === TextAlignmentJustified && i < lastLine) {
+            drawStringJustified(emitter, ctx, line, cx, cy, lineAx, lineAy, width, fontHeight, family, fontKey, fontSize);
+        }
+        else {
+            drawStringAnchored(emitter, ctx, line, cx, cy, lineAx, lineAy, family, fontKey, fontSize);
+        }
+        cy += fontHeight * lineSpacing;
+    }
+}
+function drawStringJustified(emitter, ctx, line, x, y, ax, ay, maxWidth, fontHeight, family, fontKey, fontSize) {
+    const words = splitFields(line);
+    if (words.length === 0)
+        return;
+    const wordsWidth = Array.from({ length: words.length }, () => 0);
+    let totalWordWidth = 0;
+    for (let i = 0; i < words.length; i++) {
+        const w = ctx.measureText(words[i] ?? "").width;
+        wordsWidth[i] = w;
+        totalWordWidth += w;
+    }
+    const spaceCount = words.length - 1;
+    let spaceWidth = 0;
+    if (spaceCount > 0) {
+        spaceWidth = (maxWidth - totalWordWidth) / spaceCount;
+        if (spaceWidth < 0)
+            spaceWidth = fontHeight * 0.3;
+    }
+    let cx = x;
+    for (let i = 0; i < words.length; i++) {
+        drawStringAnchored(emitter, ctx, words[i] ?? "", cx, y, ax, ay, family, fontKey, fontSize);
+        cx += (wordsWidth[i] ?? 0) + spaceWidth;
+    }
+}
+function splitFields(s) {
+    return s.split(/\s+/u).filter((w) => w.length > 0);
+}
+function wordWrap(ctx, s, width) {
+    const result = [];
+    for (const paragraph of s.split("\n")) {
+        const words = splitFields(paragraph);
+        if (words.length === 0) {
+            result.push("");
+            continue;
+        }
+        let current = words[0] ?? "";
+        for (let i = 1; i < words.length; i++) {
+            const word = words[i] ?? "";
+            const candidate = `${current} ${word}`;
+            if (ctx.measureText(candidate).width > width) {
+                result.push(current);
+                current = word;
+            }
+            else {
+                current = candidate;
+            }
+        }
+        result.push(current);
+    }
+    return result;
+}
+//# sourceMappingURL=text_field.js.map

package/dist/svg-drawers/transform.d.ts

@@ -0,0 +1,20 @@
+import type { SvgEmitter } from "../svg/emitter.ts";
+import { type FieldOrientation, type LabelPosition } from "../elements/index.ts";
+interface RotatableImage {
+    width: number;
+    height: number;
+}
+/**
+ * Apply the same rotation transform `rotateImage` applies on a canvas, but
+ * via the emitter's group stack. The matching `restore()` closes every
+ * `<g>` opened here.
+ */
+export declare function rotateImage(emitter: SvgEmitter, img: RotatableImage, pos: LabelPosition, orientation: FieldOrientation): void;
+/** Width-and-height variant matching `rotateForOrientation` on the canvas side. */
+export declare function rotateForOrientation(emitter: SvgEmitter, width: number, height: number, pos: LabelPosition, orientation: FieldOrientation): void;
+/** SVG analogue of `rotateAbout` — pure rotation about (x, y). */
+export declare function rotateAbout(emitter: SvgEmitter, orientation: FieldOrientation, x: number, y: number): void;
+/** SVG analogue of `scaleAbout` — non-uniform scale about (x, y). */
+export declare function scaleAbout(emitter: SvgEmitter, sx: number, sy: number, x: number, y: number): void;
+export {};
+//# sourceMappingURL=transform.d.ts.map

package/dist/svg-drawers/transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../src/svg-drawers/transform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EACL,KAAK,gBAAgB,EAIrB,KAAK,aAAa,EAEnB,MAAM,sBAAsB,CAAC;AAE9B,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,aAAa,EAClB,WAAW,EAAE,gBAAgB,GAC5B,IAAI,CAwBN;AAED,mFAAmF;AACnF,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,aAAa,EAClB,WAAW,EAAE,gBAAgB,GAC5B,IAAI,CAEN;AAED,kEAAkE;AAClE,wBAAgB,WAAW,CACzB,OAAO,EAAE,UAAU,EACnB,WAAW,EAAE,gBAAgB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,GACR,IAAI,CAON;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CACxB,OAAO,EAAE,UAAU,EACnB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,GACR,IAAI,CAKN"}

package/dist/svg-drawers/transform.js

@@ -0,0 +1,52 @@
+import { FieldOrientation90, FieldOrientation180, FieldOrientation270, getFieldOrientationDegrees, } from "../elements/index.js";
+/**
+ * Apply the same rotation transform `rotateImage` applies on a canvas, but
+ * via the emitter's group stack. The matching `restore()` closes every
+ * `<g>` opened here.
+ */
+export function rotateImage(emitter, img, pos, orientation) {
+    const degrees = getFieldOrientationDegrees(orientation);
+    if (degrees === 0)
+        return;
+    const radians = (degrees * Math.PI) / 180;
+    const { width, height } = img;
+    emitter.translate(pos.x, pos.y);
+    emitter.rotate(radians);
+    emitter.translate(-pos.x, -pos.y);
+    switch (orientation) {
+        case FieldOrientation90:
+            emitter.translate(0, -height);
+            break;
+        case FieldOrientation180:
+            emitter.translate(-width, -height);
+            break;
+        case FieldOrientation270:
+            emitter.translate(-width, 0);
+            break;
+        default:
+            break;
+    }
+}
+/** Width-and-height variant matching `rotateForOrientation` on the canvas side. */
+export function rotateForOrientation(emitter, width, height, pos, orientation) {
+    rotateImage(emitter, { width, height }, pos, orientation);
+}
+/** SVG analogue of `rotateAbout` — pure rotation about (x, y). */
+export function rotateAbout(emitter, orientation, x, y) {
+    const degrees = getFieldOrientationDegrees(orientation);
+    if (degrees === 0)
+        return;
+    const radians = (degrees * Math.PI) / 180;
+    emitter.translate(x, y);
+    emitter.rotate(radians);
+    emitter.translate(-x, -y);
+}
+/** SVG analogue of `scaleAbout` — non-uniform scale about (x, y). */
+export function scaleAbout(emitter, sx, sy, x, y) {
+    if (sx === 1 && sy === 1)
+        return;
+    emitter.translate(x, y);
+    emitter.scale(sx, sy);
+    emitter.translate(-x, -y);
+}
+//# sourceMappingURL=transform.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zebrash/core",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Engine for the @zebrash family — pure-TS ZPL parser + renderer. Internal package; consume @zebrash/node or @zebrash/browser.",
   "homepage": "https://github.com/Fountain-Bio/zebrash-ts#readme",
   "bugs": "https://github.com/Fountain-Bio/zebrash-ts/issues",