@svjeez/math 0.0.0-stage → 0.6.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sai Ashirwad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,67 @@
-# Temporary Holding Version
+# @svjeez/math
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+TeX equations for [svjeez](https://www.npmjs.com/package/svjeez) scenes. `tex()` typesets a formula with MathJax while the scene compiles and gives back one `<path>` per glyph, placed in scene pixels. Because every glyph is its own piece, `morph()` can carry an equation from one form to the next the way Manim does, and the SVG it ends up in is still one file with no JavaScript and no font to load.
+
+## Install
+
+```sh
+npm i -D @svjeez/math svjeez
+```
+
+## Use
+
+```tsx
+import { tex } from "@svjeez/math";
+import { render } from "svjeez";
+import { Brace, morph } from "svjeez/extras";
+
+const at = { x: 40, y: 80, fontSize: 40 };
+const square = tex(String.raw`(a+b)^2`, at);
+const expanded = tex(String.raw`a^2 + \cssId{mid}{2ab} + b^2`, at);
+const m = morph([square, expanded, square], { at: [1.5, 4], over: 1 });
+
+export default () =>
+  render(
+    { width: 480, height: 200, duration: 6, title: "Binomial square" },
+    <>
+      {m.node}
+      <Brace
+        target={expanded.get("mid")}
+        side="below"
+        label="cross term"
+        during={{ at: 2.5, over: 1.5 }}
+      />
+    </>,
+  );
+```
+
+`tex(source, options)` takes:
+
+- `x` and `y`, the top-left of the formula's box in px. They default to 0.
+- `fontSize`, the pixels in one em. It defaults to 32.
+- `theme`, a `Base16` palette whose `plain` color paints the formula. It defaults to `defaultDark`.
+- `color`, which replaces the theme's plain color.
+- `display`, which sets display style. It defaults to `true`.
+
+The formula it returns has:
+
+- `node`, the formula as one group of glyphs.
+- `bounds`, `width` and `height`, the formula's box.
+- `words`, every glyph and bar in reading order. Each has `char`, `size`, `d`, `matrix`, `fill`, `bounds` and the `text`, `x`, `y` and `id` that `morph()` pairs by.
+- `get(id)`, the box of everything under `\cssId{id}{…}`.
+- `find(text, nth)`, the box of the `nth` run of consecutive glyphs that spell `text`, such as `find("2ab")`.
+- `draw(glyph, animation)`, one glyph in a group that carries the animation.
+
+## How glyphs pair
+
+`morph()` pairs a glyph in one version with the same character at the same size in the next, and moves it. It cannot scale, so a superscript `2` never pairs with a full-size `2`: it fades out while the other fades in. A fraction bar pairs only with a bar of the same length. Glyphs the next version lacks fade out, and new ones fade in. Wrap a part in `\cssId{name}{…}` in both versions to pair it by name whatever it holds.
+
+`\color{red}{x}` paints a part, and the theme paints the rest.
+
+## Errors
+
+A formula MathJax cannot read throws `tex() could not parse "…": <MathJax's message>`, so a typo fails the build instead of drawing red text. A character the MathJax font lacks, such as `é` or an emoji, throws `tex() cannot draw "…"`. Write accents with TeX, as in `\'e`.
+
+## Notes
+
+MathJax runs once per formula on the build machine. `mathjax-full` is its only dependency, and it loads on Node 20 and later.

package/index.d.ts

@@ -0,0 +1,49 @@
+import { type Color, type Rect, type SvgNode } from "svjeez";
+import { type Base16, type Morphable, type MorphPiece } from "svjeez/extras";
+import { type Matrix } from "./matrix.ts";
+export interface TexOptions {
+    /** Left of the formula's box. Default 0. */
+    readonly x?: number;
+    /** Top of the formula's box. Default 0. */
+    readonly y?: number;
+    /** Pixels per em. Default 32. */
+    readonly fontSize?: number;
+    /** Colors the formula with its `plain` slot. Default `defaultDark`. */
+    readonly theme?: Base16;
+    /** Overrides the theme's plain color. `\color{…}` in the source still wins for the part it wraps. */
+    readonly color?: Color;
+    /** Display style: big operators stack their limits and fractions are full size. Default true. */
+    readonly display?: boolean;
+}
+/** One glyph or bar of a formula, placed in the scene. morph() pairs glyphs by `text`. */
+export interface Glyph extends MorphPiece {
+    /** The character, NFKC-normalized (`𝑎` is `a`), or `rect` or `line` for a bar. */
+    readonly char: string;
+    /** Scale relative to `fontSize`: about 0.707 for a superscript. */
+    readonly size: number;
+    /** Path data in glyph units, 1000 to the em. */
+    readonly d: string;
+    /** Glyph units to scene pixels, absolute. `x` and `y` are its translation. */
+    readonly matrix: Matrix;
+    /** Set by `\color`. */
+    readonly fill?: string;
+    /** In scene pixels. */
+    readonly bounds: Rect;
+}
+/** A typeset formula. Lines up with code(): `get` and `find` return rects for annotations. */
+export interface Tex extends Morphable<Glyph> {
+    readonly node: SvgNode;
+    readonly bounds: Rect;
+    readonly width: number;
+    readonly height: number;
+    /** Bounds of every glyph under `\cssId{id}{…}`. */
+    get(id: string): Rect;
+    /** Bounds of the `nth` run of consecutive glyphs spelling `text`, such as `2ab`. */
+    find(text: string, nth?: number): Rect;
+}
+export type { Matrix };
+/**
+ * Typesets TeX into glyph paths while the scene compiles. Nothing reaches the viewer's browser but `<path>`s.
+ * `x` and `y` place the top-left of the formula's box; one em is `fontSize` pixels.
+ */
+export declare function tex(source: string, options?: TexOptions): Tex;

package/index.js

@@ -0,0 +1,83 @@
+import { el, rect } from "svjeez";
+import { defaultDark, tint } from "svjeez/extras";
+import { compile } from "./mathjax.js";
+import { apply, multiply, round, roundMatrix, scale, translate } from "./matrix.js";
+import { pathPoints } from "./path.js";
+const glyphBounds = (d, matrix) => {
+    const points = pathPoints(d).map(([x, y]) => apply(matrix, x, y));
+    const [xs, ys] = [points.map(([x]) => x), points.map(([, y]) => y)];
+    const [left, top] = [Math.min(...xs), Math.min(...ys)];
+    return rect(round(left), round(top), round(Math.max(...xs) - left), round(Math.max(...ys) - top));
+};
+/**
+ * Typesets TeX into glyph paths while the scene compiles. Nothing reaches the viewer's browser but `<path>`s.
+ * `x` and `y` place the top-left of the formula's box; one em is `fontSize` pixels.
+ */
+export function tex(source, options = {}) {
+    const { x = 0, y = 0, fontSize = 32, theme = defaultDark, display = true } = options;
+    if (!(fontSize > 0) || !Number.isFinite(x + y))
+        throw new Error(`tex() needs finite coordinates and a positive fontSize, got x ${x}, y ${y} and fontSize ${fontSize}.`);
+    const compiled = compile(source, display);
+    const [minX, minY, boxW, boxH] = compiled.box;
+    const k = fontSize / 1000;
+    const place = multiply(translate(x, y), multiply(scale(k), translate(-minX, -minY)));
+    const glyphs = compiled.marks.map((mark) => {
+        const placed = multiply(place, mark.matrix);
+        const size = round(mark.size);
+        const matrix = roundMatrix(placed);
+        return {
+            // A bar's size is in its key, because morph only translates and cannot stretch one.
+            text: `${mark.key}@${size}`,
+            char: mark.char,
+            size,
+            d: mark.d,
+            matrix,
+            x: matrix[4],
+            y: matrix[5],
+            fill: mark.fill,
+            id: mark.id,
+            bounds: glyphBounds(mark.d, matrix),
+        };
+    });
+    const ink = options.color ?? tint(theme, "plain");
+    const draw = (glyph, animation) => el.g({ animation }, el.path({
+        d: glyph.d,
+        transform: `matrix(${glyph.matrix.join(" ")})`,
+        // SAFETY: the fill is a CSS color that the author wrote in `\color{…}`, which MathJax passes through unchecked.
+        fill: glyph.fill ?? ink,
+    }));
+    const bounds = rect(x, y, round(boxW * k), round(boxH * k));
+    const get = (id) => {
+        const named = glyphs.filter((g) => g.id === id);
+        if (named.length === 0)
+            throw new Error(`tex.get() found no part named ${JSON.stringify(id)}.`);
+        return named.map((g) => g.bounds).reduce((a, b) => a.union(b));
+    };
+    const spelled = glyphs.map((g) => g.char).join("");
+    const starts = [0];
+    for (const g of glyphs)
+        starts.push(starts.at(-1) + g.char.length);
+    const find = (needle, nth = 1) => {
+        let seen = 0;
+        for (let pos = needle ? spelled.indexOf(needle) : -1; pos >= 0; pos = spelled.indexOf(needle, pos + 1)) {
+            const [first, last] = [starts.indexOf(pos), starts.indexOf(pos + needle.length)];
+            if (first < 0 || last < 0 || ++seen !== nth)
+                continue;
+            return glyphs
+                .slice(first, last)
+                .map((g) => g.bounds)
+                .reduce((a, b) => a.union(b));
+        }
+        throw new Error(`tex.find() found ${seen} of ${JSON.stringify(needle)}, not ${nth}.`);
+    };
+    return {
+        node: el.g({}, glyphs.map((g) => draw(g))),
+        words: glyphs,
+        bounds,
+        width: bounds.w,
+        height: bounds.h,
+        get,
+        find,
+        draw,
+    };
+}

package/mathjax.d.ts

@@ -0,0 +1,25 @@
+import { type Matrix } from "./matrix.ts";
+/** One filled mark of a formula, in MathJax's units: 1000 to the em, y up before `matrix` flips it. */
+export interface Mark {
+    /** The character of a glyph, NFKC-normalized; `rect` or `line` for a drawn bar. */
+    readonly char: string;
+    /** What decides whether two marks are the same drawing: the character, or a bar's size. */
+    readonly key: string;
+    readonly d: string;
+    /** Glyph units to the SVG user space of the formula, including MathJax's flip. */
+    readonly matrix: Matrix;
+    /** Product of the nested `scale()`s: 0.707 for a superscript. */
+    readonly size: number;
+    readonly fill?: string;
+    readonly id?: string;
+}
+export interface Compiled {
+    /** The SVG viewBox: the formula's box in user space. */
+    readonly box: readonly [x: number, y: number, w: number, h: number];
+    readonly marks: readonly Mark[];
+}
+/**
+ * Typesets `source` with MathJax and reads the SVG back as marks. Throws when MathJax reports a TeX error
+ * or draws something this package cannot place, such as a `<text>` fallback for a character the font lacks.
+ */
+export declare function compile(source: string, display: boolean): Compiled;

package/mathjax.js

@@ -0,0 +1,125 @@
+import { mathjax } from "mathjax-full/js/mathjax.js";
+import { TeX } from "mathjax-full/js/input/tex.js";
+import { SVG } from "mathjax-full/js/output/svg.js";
+import { liteAdaptor } from "mathjax-full/js/adaptors/liteAdaptor.js";
+import { RegisterHTMLHandler } from "mathjax-full/js/handlers/html.js";
+import { AllPackages } from "mathjax-full/js/input/tex/AllPackages.js";
+import { identity, multiply, parseTransform, round } from "./matrix.js";
+import { boxPath, holePath } from "./path.js";
+/** `noundefined` paints an unknown macro red and `noerrors` hides errors, and both turn a typo into a silent picture. */
+const PACKAGES = AllPackages.filter((name) => name !== "noundefined" && name !== "noerrors");
+const adaptor = liteAdaptor();
+let document;
+const convert = (source, display) => {
+    if (!document) {
+        RegisterHTMLHandler(adaptor);
+        document = mathjax.document("", {
+            InputJax: new TeX({ packages: PACKAGES }),
+            OutputJax: new SVG({ fontCache: "none" }),
+        });
+    }
+    return document.convert(source, { display });
+};
+const num = (node, name) => Number(adaptor.getAttribute(node, name) ?? 0);
+/** A stroked rectangle or line has no outline in the SVG, so it becomes the outline's own mark. */
+function stroked(kind, node) {
+    const width = num(node, "stroke-width");
+    if (kind === "line") {
+        const [x1, y1, x2, y2] = [num(node, "x1"), num(node, "y1"), num(node, "x2"), num(node, "y2")];
+        const length = Math.hypot(x2 - x1, y2 - y1) || 1;
+        const [nx, ny] = [((y2 - y1) / length) * (width / 2), ((x1 - x2) / length) * (width / 2)];
+        return {
+            key: `line:${round(x2 - x1)}x${round(y2 - y1)}`,
+            d: `M${round(x1 + nx)} ${round(y1 + ny)}L${round(x2 + nx)} ${round(y2 + ny)}L${round(x2 - nx)} ${round(y2 - ny)}L${round(x1 - nx)} ${round(y1 - ny)}Z`,
+        };
+    }
+    const [x, y, w, h] = [num(node, "x"), num(node, "y"), num(node, "width"), num(node, "height")];
+    const half = width / 2;
+    return {
+        key: `rect:${round(w)}x${round(h)}`,
+        d: boxPath(x - half, y - half, w + width, h + width) +
+            holePath(x + half, y + half, w - width, h - width),
+    };
+}
+/**
+ * Typesets `source` with MathJax and reads the SVG back as marks. Throws when MathJax reports a TeX error
+ * or draws something this package cannot place, such as a `<text>` fallback for a character the font lacks.
+ */
+export function compile(source, display) {
+    const container = convert(source, display);
+    // SAFETY: MathJax's container holds elements only, and the walk below skips text by its kind.
+    const svg = adaptor.childNodes(container).find((n) => adaptor.kind(n) === "svg");
+    if (!svg)
+        throw new Error(`tex() got no drawing back from MathJax for ${JSON.stringify(source)}.`);
+    const view = (adaptor.getAttribute(svg, "viewBox") ?? "").split(/\s+/).map(Number);
+    const [minX, minY, boxW, boxH] = view;
+    if (view.length !== 4 || view.some(Number.isNaN))
+        throw new Error(`tex() could not read the box MathJax drew for ${JSON.stringify(source)}. A \\tag draws a full-width table that has none.`);
+    const marks = [];
+    const walk = (parent, inherited) => {
+        // SAFETY: a LiteNode is a LiteElement or a LiteText, and the loop skips text by its kind.
+        for (const node of adaptor.childNodes(parent)) {
+            const kind = adaptor.kind(node);
+            if (kind === "#text" || kind === "title")
+                continue;
+            const message = adaptor.getAttribute(node, "data-mjx-error");
+            if (message !== undefined)
+                throw new Error(`tex() could not parse ${JSON.stringify(source)}: ${message}`);
+            const own = adaptor.getAttribute(node, "fill");
+            const here = {
+                matrix: multiply(inherited.matrix, parseTransform(adaptor.getAttribute(node, "transform"))),
+                fill: own && own !== "none" && own !== "currentColor" ? own : inherited.fill,
+                id: adaptor.getAttribute(node, "id") ?? inherited.id,
+            };
+            if (kind === "g" || kind === "a")
+                walk(node, here);
+            else if (kind === "text") {
+                const drawn = adaptor.textContent(node).trim();
+                if (drawn)
+                    throw new Error(`tex() cannot draw ${JSON.stringify(drawn)} in ${JSON.stringify(source)}: the MathJax font has no glyph for it.`);
+            }
+            else if (kind === "path") {
+                const d = adaptor.getAttribute(node, "d");
+                if (!d)
+                    continue;
+                const code = parseInt(adaptor.getAttribute(node, "data-c") ?? "", 16);
+                const char = Number.isNaN(code) ? "path" : String.fromCodePoint(code).normalize("NFKC");
+                marks.push({
+                    char,
+                    key: char,
+                    d,
+                    matrix: here.matrix,
+                    size: here.matrix[0],
+                    fill: here.fill,
+                    id: here.id,
+                });
+            }
+            else if (kind === "rect" || kind === "line") {
+                if (adaptor.getAttribute(node, "data-hitbox") !== undefined)
+                    continue;
+                const outlined = own === "none" || kind === "line";
+                const [w, h] = [num(node, "width"), num(node, "height")];
+                const { d, key } = outlined
+                    ? stroked(kind, node)
+                    : {
+                        d: boxPath(num(node, "x"), num(node, "y"), w, h),
+                        key: `rect:${round(w)}x${round(h)}`,
+                    };
+                marks.push({
+                    char: kind,
+                    key,
+                    d,
+                    matrix: here.matrix,
+                    size: here.matrix[0],
+                    fill: here.fill,
+                    id: here.id,
+                });
+            }
+            else {
+                throw new Error(`tex() cannot draw a <${kind}> element in ${JSON.stringify(source)}. MathJax builds stretchy parts such as \\overbrace from clipped pieces.`);
+            }
+        }
+    };
+    walk(svg, { matrix: identity });
+    return { box: [minX, minY, boxW, boxH], marks };
+}

package/matrix.d.ts

@@ -0,0 +1,16 @@
+/** An SVG `matrix(a b c d e f)`: x' = a·x + c·y + e, y' = b·x + d·y + f. */
+export type Matrix = readonly [a: number, b: number, c: number, d: number, e: number, f: number];
+export declare const identity: Matrix;
+/** `m` applied after `n`. */
+export declare const multiply: (m: Matrix, n: Matrix) => Matrix;
+export declare const translate: (x: number, y: number) => Matrix;
+export declare const scale: (x: number, y?: number) => Matrix;
+export declare const roundMatrix: (m: Matrix) => Matrix;
+export declare const apply: (m: Matrix, x: number, y: number) => [number, number];
+/** Rounds to three decimals, which is a thousandth of a pixel at the sizes scenes use. */
+export declare const round: (n: number) => number;
+/**
+ * The matrix of an SVG `transform` list made of `translate()` and `scale()`, the only two MathJax writes.
+ * MathJax separates arguments with a comma, a space or both.
+ */
+export declare function parseTransform(list: string | null | undefined): Matrix;

package/matrix.js

@@ -0,0 +1,48 @@
+export const identity = [1, 0, 0, 1, 0, 0];
+/** `m` applied after `n`. */
+export const multiply = (m, n) => [
+    m[0] * n[0] + m[2] * n[1],
+    m[1] * n[0] + m[3] * n[1],
+    m[0] * n[2] + m[2] * n[3],
+    m[1] * n[2] + m[3] * n[3],
+    m[0] * n[4] + m[2] * n[5] + m[4],
+    m[1] * n[4] + m[3] * n[5] + m[5],
+];
+export const translate = (x, y) => [1, 0, 0, 1, x, y];
+export const scale = (x, y = x) => [x, 0, 0, y, 0, 0];
+export const roundMatrix = (m) => [
+    round(m[0]),
+    round(m[1]),
+    round(m[2]),
+    round(m[3]),
+    round(m[4]),
+    round(m[5]),
+];
+export const apply = (m, x, y) => [
+    m[0] * x + m[2] * y + m[4],
+    m[1] * x + m[3] * y + m[5],
+];
+/** Rounds to three decimals, which is a thousandth of a pixel at the sizes scenes use. */
+export const round = (n) => Math.round(n * 1000) / 1000 + 0;
+/**
+ * The matrix of an SVG `transform` list made of `translate()` and `scale()`, the only two MathJax writes.
+ * MathJax separates arguments with a comma, a space or both.
+ */
+export function parseTransform(list) {
+    let m = identity;
+    for (const [, name, args] of (list ?? "").matchAll(/(\w+)\(([^)]*)\)/g)) {
+        const n = args
+            .trim()
+            .split(/[\s,]+/)
+            .map(Number);
+        if (n.some(Number.isNaN))
+            throw new Error(`tex() met a transform it cannot read: ${list}`);
+        if (name === "translate")
+            m = multiply(m, translate(n[0], n[1] ?? 0));
+        else if (name === "scale")
+            m = multiply(m, scale(n[0], n[1] ?? n[0]));
+        else
+            throw new Error(`tex() met a ${name}() transform it cannot place: ${list}`);
+    }
+    return m;
+}

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "@svjeez/math",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.6.1",
+  "description": "TeX equations for svjeez: formulas compiled to glyph paths while the scene builds, ready for morph() and annotations.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saiashirwad/svjeez.git",
+    "directory": "packages/math"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "dependencies": {
+    "mathjax-full": "3.2.2"
+  },
+  "peerDependencies": {
+    "svjeez": ">=0.6.0 <1"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/path.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Every endpoint and control point of an absolute path, in order. A Bezier curve stays inside the hull of
+ * these points, so their box is a safe stand-in for the glyph's box.
+ */
+export declare function pathPoints(d: string): [number, number][];
+/** A closed box as path data. */
+export declare const boxPath: (x: number, y: number, w: number, h: number) => string;
+/** The same box wound the other way, so that two of them make a hole under the nonzero rule. */
+export declare const holePath: (x: number, y: number, w: number, h: number) => string;

package/path.js

@@ -0,0 +1,45 @@
+import { round } from "./matrix.js";
+/** The number of coordinates each absolute command takes. MathJax's font only uses the first six. */
+const ARITY = new Map([
+    ["M", 2],
+    ["L", 2],
+    ["H", 1],
+    ["V", 1],
+    ["Q", 4],
+    ["T", 2],
+    ["C", 6],
+    ["S", 4],
+    ["Z", 0],
+]);
+/**
+ * Every endpoint and control point of an absolute path, in order. A Bezier curve stays inside the hull of
+ * these points, so their box is a safe stand-in for the glyph's box.
+ */
+export function pathPoints(d) {
+    const points = [];
+    let [x, y] = [0, 0];
+    for (const [, command, body] of d.matchAll(/([A-Za-z])([^A-Za-z]*)/g)) {
+        const arity = ARITY.get(command);
+        if (arity === undefined)
+            throw new Error(`tex() met a "${command}" path command, and only absolute commands are drawn.`);
+        const n = (body.match(/-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi) ?? []).map(Number);
+        for (let i = 0; i < n.length; i += arity) {
+            if (command === "H")
+                x = n[i];
+            else if (command === "V")
+                y = n[i];
+            else {
+                for (let k = 0; k < arity; k += 2)
+                    points.push([n[i + k], n[i + k + 1]]);
+                [x, y] = [n[i + arity - 2], n[i + arity - 1]];
+                continue;
+            }
+            points.push([x, y]);
+        }
+    }
+    return points;
+}
+/** A closed box as path data. */
+export const boxPath = (x, y, w, h) => `M${round(x)} ${round(y)}H${round(x + w)}V${round(y + h)}H${round(x)}Z`;
+/** The same box wound the other way, so that two of them make a hole under the nonzero rule. */
+export const holePath = (x, y, w, h) => `M${round(x)} ${round(y)}V${round(y + h)}H${round(x + w)}V${round(y)}Z`;