@altnovatrail/canvas 0.0.0-stage → 0.1.0

package/lib/core/widths.js

@@ -0,0 +1,218 @@
+// The width table of the workbook's layout (R35): how wide each character of a line is, in whole
+// hundredths of the type size, so that the layout puts the boxes where it puts them on any device,
+// whatever its fonts, and the text is fitted to its width by SVG (R34). The numbers are the
+// canvas's own: each the mean of Liberation Sans and Liberation Serif, the fonts of the image the
+// tests run in, rounded to a hundredth — no font's table. Which character is which comes from
+// explicit ranges of code points alone, never from the engine's Unicode tables — no `\p{…}`, no
+// `\s`, no `Intl.Segmenter` — for those follow each engine's version of Unicode, and the layout
+// must be the same in every engine and in Node, as the crop is (R25).
+/** A digit: they are all as wide, and the page asks for figures of one width (R35). */
+export const DIGIT = 53;
+/** A sign of an operation or a comparison: one width for all of them, the mean of theirs. */
+export const SIGN = 56;
+/** The signs of operations and comparisons, one width for all (R35). */
+export const SIGNS = "+−×÷=<>≤≥≠±≈";
+/** The space between two words, which the layout sets itself. */
+export const SPACE = 26;
+/** A wide character — a Chinese, Japanese or Korean one, an emoji: a square. */
+export const WIDE = 100;
+/** A character the table does not know, a Greek or a Hebrew letter among them. */
+export const UNKNOWN = 60;
+/**
+ * The characters of their own width: printable ASCII, the Russian alphabet and the marks a school
+ * page has, by width. ⋅ and ∶ the fonts lack: they take the width of · and of :. The space is
+ * SPACE, set by the layout.
+ */
+export const BY_WIDTH = [
+    [19, "'"],
+    [23, "|"],
+    [25, "ijl"],
+    [26, ",."],
+    [28, "/:;t\\‘’∶"],
+    [31, "!I[]f"],
+    [32, "²³"],
+    [33, "()-`r·⋅"],
+    [38, '"'],
+    [39, "г„“”"],
+    [40, "°"],
+    [41, "{}"],
+    [43, "з"],
+    [44, "*Js"],
+    [45, "т"],
+    [46, "к"],
+    [47, "^czсэ"],
+    [49, "ь"],
+    [50, "?aekvxyавеухяё"],
+    [51, "ч"],
+    [53, "#$_bdghnopquор«»–"],
+    [54, "блнп"],
+    [55, "Здийц"],
+    [56, "~Г"],
+    [57, "ъ"],
+    [58, "FL"],
+    [61, "PSTZРТ"],
+    [62, "БКЬ"],
+    [64, "EЕЁ"],
+    [66, "Чм"],
+    [67, "BВЛУ"],
+    [68, "Дж"],
+    [69, "ACKRVXYАСХЭЯ"],
+    [70, "ы"],
+    [72, "&DHNUwИЙНП"],
+    [73, "Ц"],
+    [74, "ф"],
+    [75, "GOQОЪю"],
+    [78, "Ф"],
+    [79, "ш½¼¾⅓⅔⅛"],
+    [80, "щ"],
+    [81, "m"],
+    [86, "%MМ"],
+    [88, "Ы"],
+    [91, "Ж"],
+    [94, "W"],
+    [96, "Ш"],
+    [97, "@Щ"],
+    [100, "—…"],
+    [101, "№"],
+    [102, "Ю"],
+];
+/**
+ * Code points of no width, each joining the character before it: controls, the soft hyphen,
+ * combining marks, the zero-width space and joiners, the marks of direction, variation selectors,
+ * the skin tones of emoji and tags.
+ */
+export const ZERO = [
+    [0x0000, 0x0008],
+    [0x000e, 0x001f],
+    [0x007f, 0x009f],
+    [0x00ad, 0x00ad],
+    [0x0300, 0x036f],
+    [0x0483, 0x0489],
+    [0x1ab0, 0x1aff],
+    [0x1dc0, 0x1dff],
+    [0x200b, 0x200f],
+    [0x202a, 0x202e],
+    [0x2060, 0x206f],
+    [0x20d0, 0x20ff],
+    [0xfe00, 0xfe0f],
+    [0xfe20, 0xfe2f],
+    [0xfeff, 0xfeff],
+    [0x1f3fb, 0x1f3ff],
+    [0xe0000, 0xe007f],
+    [0xe0100, 0xe01ef],
+];
+/** Code points of a square's width: Hangul, CJK, the full-width forms and emoji. */
+export const WIDE_RANGES = [
+    [0x1100, 0x115f],
+    [0x2e80, 0x303e],
+    [0x3041, 0x33ff],
+    [0x3400, 0x4dbf],
+    [0x4e00, 0x9fff],
+    [0xa000, 0xa4cf],
+    [0xac00, 0xd7a3],
+    [0xf900, 0xfaff],
+    [0xfe30, 0xfe4f],
+    [0xff00, 0xff60],
+    [0xffe0, 0xffe6],
+    [0x1f000, 0x1faff],
+    [0x20000, 0x3fffd],
+];
+/**
+ * The white space a line breaks at: tab, the line and paragraph ends and the space. A run of it is
+ * one space between two words, and none at the ends of a piece. Any other space — a no-break one
+ * among them — is a character of its word.
+ */
+export const BREAKS = [0x09, 0x0a, 0x0b, 0x0c, 0x0d, 0x20, 0x85, 0x2028, 0x2029];
+/** The joiner of an emoji's sequence: the next code point goes with the one before it. */
+const ZWJ = 0x200d;
+/** The regional indicators, two of which make a flag. */
+const REGIONAL = [0x1f1e6, 0x1f1ff];
+/**
+ * The spaces that do not break, by code point, for they do not show: the no-break space, the figure
+ * space, a digit wide, and the narrow no-break space.
+ */
+export const SPACES = [
+    [0x00a0, 26],
+    [0x2007, 53],
+    [0x202f, 20],
+];
+const OWN = new Map([
+    ...BY_WIDTH.flatMap(([width, characters]) => Array.from(characters, (character) => [character.codePointAt(0) ?? 0, width])),
+    ...SPACES,
+]);
+function within(code, ranges) {
+    return ranges.some(([from, to]) => code >= from && code <= to);
+}
+/** The width of a code point, in hundredths of the type size. */
+export function widthOf(code) {
+    if (within(code, ZERO))
+        return 0;
+    if (code >= 0x30 && code <= 0x39)
+        return DIGIT;
+    const character = String.fromCodePoint(code);
+    if (SIGNS.includes(character))
+        return SIGN;
+    const own = OWN.get(code);
+    if (own !== undefined)
+        return own;
+    return within(code, WIDE_RANGES) ? WIDE : UNKNOWN;
+}
+/** Whether a line may break at this code point, white space that collapses. */
+export function breaks(code) {
+    return BREAKS.includes(code);
+}
+/**
+ * The words of a piece of text: what lies between its runs of white space. A piece of white space
+ * alone has none.
+ */
+export function wordsOf(text) {
+    const words = [];
+    let word = "";
+    for (const character of text) {
+        if (breaks(character.codePointAt(0) ?? 0)) {
+            if (word !== "")
+                words.push(word);
+            word = "";
+        }
+        else {
+            word += character;
+        }
+    }
+    if (word !== "")
+        words.push(word);
+    return words;
+}
+/**
+ * The clusters of a word, which a word too long for a line is broken between: a code point of no
+ * width, and whatever follows a joiner, go with the one before them, and so does the second
+ * regional indicator of a flag. The code points come by `for…of`, which pairs surrogates by the
+ * language's own rule, not by Unicode's tables.
+ */
+export function clustersOf(word) {
+    const clusters = [];
+    let joined = false;
+    let regional = 0;
+    for (const character of word) {
+        const code = character.codePointAt(0) ?? 0;
+        const flag = code >= REGIONAL[0] && code <= REGIONAL[1];
+        const last = clusters.length - 1;
+        if (last >= 0 && (joined || widthOf(code) === 0 || (flag && regional === 1))) {
+            clusters[last] += character;
+            regional = flag && regional === 1 ? 2 : regional;
+        }
+        else {
+            clusters.push(character);
+            regional = flag ? 1 : 0;
+        }
+        joined = code === ZWJ;
+    }
+    return clusters;
+}
+/** The width of a cluster: that of its first code point. */
+export function clusterWidth(cluster) {
+    return widthOf(cluster.codePointAt(0) ?? 0);
+}
+/** The width of a word, in hundredths of the type size: the sum of its clusters'. */
+export function wordWidth(word) {
+    return clustersOf(word).reduce((sum, cluster) => sum + clusterWidth(cluster), 0);
+}

package/lib/core/work.d.ts

@@ -0,0 +1,77 @@
+import { Clock } from "./clock.js";
+import { type HistoryEvent } from "./history.js";
+import type { Stroke } from "./ink.js";
+import type { Point } from "./screen.js";
+/**
+ * The work on the sheet: the strokes in sight, the stack of the actions that undo takes back, the
+ * last first (R19), and the history of writing, every action as an event at the sheet's time
+ * (R22). Clearing and erasing are actions too, so undo brings their strokes back. Nothing is
+ * redone. The times its methods take are the page's, and the sheet's clock turns one into the
+ * sheet's time only when the action lands: an undo that has nothing to take back is no event. A
+ * history given to the sheet is replayed by the same rules, each action at its own time (R27).
+ */
+export declare class Work {
+    #private;
+    constructor(clock?: Clock);
+    /**
+     * The work a history of writing given to the sheet leaves (R27): its strokes, its stack of
+     * actions for undo and the history itself, in frozen objects of the work's own. The events are
+     * checked as `historyOf` checks them, then replayed by the work's own rules, each at its own time,
+     * and each must be what the work records for it: an erasing takes off strokes on the sheet, in
+     * the sheet's order; a clearing clears a sheet with strokes, all of them; an undo takes back the
+     * last action still in force and says what the stack says. A history the sheet could not have
+     * written is a TypeError that names the event. The clock is not asked: it goes on as the sheet
+     * that takes the work tells it (`Clock.resume`).
+     */
+    static restore(value: unknown, clock: Clock): Work;
+    /**
+     * The strokes on the sheet, in the order they were written. Every action gives a new array, and
+     * undoing a clearing gives back the very one it cleared.
+     */
+    get strokes(): readonly Stroke[];
+    /**
+     * Whether undo has an action to take back (R19): the stack is not empty. The element's Undo
+     * button stands unavailable while it is (R28).
+     */
+    get undoable(): boolean;
+    /**
+     * The history of writing: every action, in the order it landed, frozen through. An array once
+     * handed out never changes: after an action the history is a new one, made when it is next asked
+     * for.
+     */
+    get history(): readonly HistoryEvent[];
+    /**
+     * A stroke is written: it goes on the sheet and on the stack. The sheet gets a new array rather
+     * than a longer one, for an array once handed out never changes: a clearing keeps the one it
+     * cleared, and whoever read `strokes` keeps what they read. It lands at the sheet's latest time:
+     * its last point's, unless an action landed while it was under way and it ended without its
+     * pointerup, its last point earlier.
+     */
+    write(stroke: Stroke): void;
+    /**
+     * Takes the strokes of these IDs off the sheet, whole, in one action — one press of the eraser.
+     * IDs no longer on the sheet are left out; if none is on it, nothing is done.
+     */
+    erase(ids: Iterable<number>, time: number): boolean;
+    /**
+     * Takes back the last action: a written stroke goes, erased strokes come back to their places, a
+     * clearing brings its strokes back. On a sheet without actions nothing changes.
+     */
+    undo(time: number): boolean;
+    /** Takes every stroke off the sheet, in one action. Clearing an empty sheet is no action. */
+    clear(time: number): boolean;
+    /**
+     * The strokes on the sheet whose line comes within `reach` of the segment from `from` to `to`, in
+     * sheet units: the index finds those whose box is near enough, and the distance to each segment
+     * of their points decides (R05). A segment whose ends are one point is that point.
+     */
+    near(from: Point, to: Point, reach: number): Stroke[];
+}
+/** The ID the next stroke takes after a history (R27): one past the highest written, or 1. */
+export declare function nextIdOf(history: readonly HistoryEvent[]): number;
+/**
+ * Where the sheet's clock goes on after a history given to it (R27): past its last event by more
+ * than the pause of the groups (R24), so that the first stroke after it is no neighbour of its
+ * strokes; at 0 after an empty history, which is a new sheet's.
+ */
+export declare function resumeOf(history: readonly HistoryEvent[]): number;

package/lib/core/work.js

@@ -0,0 +1,293 @@
+import RBush from "rbush";
+import { Clock } from "./clock.js";
+import { shown } from "./fields.js";
+import { boxOf, segmentBox, segmentDistance } from "./geometry.js";
+import { GROUP_RULE } from "./groups.js";
+import { frozen, historyOf, sameEvent } from "./history.js";
+/**
+ * The work on the sheet: the strokes in sight, the stack of the actions that undo takes back, the
+ * last first (R19), and the history of writing, every action as an event at the sheet's time
+ * (R22). Clearing and erasing are actions too, so undo brings their strokes back. Nothing is
+ * redone. The times its methods take are the page's, and the sheet's clock turns one into the
+ * sheet's time only when the action lands: an undo that has nothing to take back is no event. A
+ * history given to the sheet is replayed by the same rules, each action at its own time (R27).
+ */
+export class Work {
+    #clock;
+    #strokes = [];
+    /**
+     * Whether a history is being replayed into the work (`restore`): a stroke written then goes onto
+     * the array of the sheet as it is, for no one has been handed that array yet.
+     */
+    #replaying = false;
+    #done = [];
+    /** The history's events, and the copy of them last handed out, until the next action. */
+    #events = [];
+    #history;
+    /** The index of the strokes on the sheet, built anew for each new array of them. */
+    #index = new RBush();
+    #indexed = this.#strokes;
+    #entries = new WeakMap();
+    constructor(clock = new Clock()) {
+        this.#clock = clock;
+    }
+    /**
+     * The work a history of writing given to the sheet leaves (R27): its strokes, its stack of
+     * actions for undo and the history itself, in frozen objects of the work's own. The events are
+     * checked as `historyOf` checks them, then replayed by the work's own rules, each at its own time,
+     * and each must be what the work records for it: an erasing takes off strokes on the sheet, in
+     * the sheet's order; a clearing clears a sheet with strokes, all of them; an undo takes back the
+     * last action still in force and says what the stack says. A history the sheet could not have
+     * written is a TypeError that names the event. The clock is not asked: it goes on as the sheet
+     * that takes the work tells it (`Clock.resume`).
+     */
+    static restore(value, clock) {
+        const work = new Work(clock);
+        work.#replaying = true;
+        for (const [n, event] of historyOf(value).entries())
+            work.#replay(event, `history[${n}]`);
+        work.#replaying = false;
+        // A new array for the sheet, which the index of the strokes is then built for.
+        work.#strokes = [...work.#strokes];
+        return work;
+    }
+    /**
+     * The strokes on the sheet, in the order they were written. Every action gives a new array, and
+     * undoing a clearing gives back the very one it cleared.
+     */
+    get strokes() {
+        return this.#strokes;
+    }
+    /**
+     * Whether undo has an action to take back (R19): the stack is not empty. The element's Undo
+     * button stands unavailable while it is (R28).
+     */
+    get undoable() {
+        return this.#done.length > 0;
+    }
+    /**
+     * The history of writing: every action, in the order it landed, frozen through. An array once
+     * handed out never changes: after an action the history is a new one, made when it is next asked
+     * for.
+     */
+    get history() {
+        this.#history ??= Object.freeze([...this.#events]);
+        return this.#history;
+    }
+    /**
+     * A stroke is written: it goes on the sheet and on the stack. The sheet gets a new array rather
+     * than a longer one, for an array once handed out never changes: a clearing keeps the one it
+     * cleared, and whoever read `strokes` keeps what they read. It lands at the sheet's latest time:
+     * its last point's, unless an action landed while it was under way and it ended without its
+     * pointerup, its last point earlier.
+     */
+    write(stroke) {
+        this.#write(stroke, Math.max(this.#clock.latest, stroke.points.at(-1)?.t ?? 0));
+    }
+    /**
+     * Takes the strokes of these IDs off the sheet, whole, in one action — one press of the eraser.
+     * IDs no longer on the sheet are left out; if none is on it, nothing is done.
+     */
+    erase(ids, time) {
+        return this.#erase(ids, () => this.#clock.at(time));
+    }
+    /**
+     * Takes back the last action: a written stroke goes, erased strokes come back to their places, a
+     * clearing brings its strokes back. On a sheet without actions nothing changes.
+     */
+    undo(time) {
+        return this.#undo(() => this.#clock.at(time));
+    }
+    /** Takes every stroke off the sheet, in one action. Clearing an empty sheet is no action. */
+    clear(time) {
+        return this.#clear(() => this.#clock.at(time));
+    }
+    /**
+     * The strokes on the sheet whose line comes within `reach` of the segment from `from` to `to`, in
+     * sheet units: the index finds those whose box is near enough, and the distance to each segment
+     * of their points decides (R05). A segment whose ends are one point is that point.
+     */
+    near(from, to, reach) {
+        const hits = [];
+        for (const { stroke } of this.#indexOf().search(segmentBox(from, to, reach))) {
+            if (lineDistance(stroke, from, to) <= reach)
+                hits.push(stroke);
+        }
+        return hits;
+    }
+    // The actions, each with the sheet's time it lands at, asked for only once it does.
+    #write(stroke, t) {
+        // A history replayed writes its strokes one after another, without a copy of the sheet for
+        // each: thousands of strokes would copy the sheet thousands of times. A clearing keeps the array
+        // it cleared and leaves the sheet a new one, so no array an action keeps grows by it.
+        if (this.#replaying)
+            this.#strokes.push(stroke);
+        else
+            this.#strokes = [...this.#strokes, stroke];
+        this.#done.push({ kind: "write", stroke });
+        this.#record({ kind: "write", t, stroke });
+    }
+    #erase(ids, at) {
+        const wanted = new Set(ids);
+        const erased = [];
+        const kept = [];
+        for (const [place, stroke] of this.#strokes.entries()) {
+            if (wanted.has(stroke.id))
+                erased.push({ at: place, stroke });
+            else
+                kept.push(stroke);
+        }
+        if (erased.length === 0)
+            return false;
+        this.#strokes = kept;
+        this.#done.push({ kind: "erase", erased });
+        this.#record({ kind: "erase", t: at(), ids: erased.map(({ stroke }) => stroke.id) });
+        return true;
+    }
+    #undo(at) {
+        const action = this.#done.pop();
+        if (action === undefined)
+            return false;
+        const t = at();
+        if (action.kind === "write") {
+            // Each undo gives back the sheet as it was after the action before, so a written stroke is
+            // the last on the sheet when its writing is undone.
+            this.#strokes = this.#strokes.slice(0, -1);
+            this.#record({ kind: "undo", t, removed: [action.stroke.id], restored: [] });
+        }
+        else if (action.kind === "erase") {
+            // The sheet is as the erasing left it: each stroke goes back to its place, the first first.
+            const strokes = [...this.#strokes];
+            for (const { at: place, stroke } of action.erased)
+                strokes.splice(place, 0, stroke);
+            this.#strokes = strokes;
+            const restored = action.erased.map(({ stroke }) => stroke.id);
+            this.#record({ kind: "undo", t, removed: [], restored });
+        }
+        else {
+            this.#strokes = action.strokes;
+            const restored = action.strokes.map((stroke) => stroke.id);
+            this.#record({ kind: "undo", t, removed: [], restored });
+        }
+        return true;
+    }
+    #clear(at) {
+        if (this.#strokes.length === 0)
+            return false;
+        const strokes = this.#strokes;
+        this.#done.push({ kind: "clear", strokes });
+        this.#strokes = [];
+        this.#record({ kind: "clear", t: at(), ids: strokes.map((stroke) => stroke.id) });
+        return true;
+    }
+    /**
+     * One event of a history given to the sheet, replayed at its own time: what the work records for
+     * it must be the event itself, or the history is not one the sheet could have written.
+     */
+    #replay(event, path) {
+        const at = () => event.t;
+        let done = true;
+        if (event.kind === "write")
+            this.#write(event.stroke, event.t);
+        else if (event.kind === "erase")
+            done = this.#erase(event.ids, at);
+        else if (event.kind === "clear")
+            done = this.#clear(at);
+        else
+            done = this.#undo(at);
+        const recorded = this.#events.at(-1);
+        if (done && recorded !== undefined && sameEvent(recorded, event))
+            return;
+        throw new TypeError(`${path}: ${what(event)}, ${done ? instead(recorded) : unable(event)}`);
+    }
+    #record(event) {
+        this.#events.push(frozen(event));
+        this.#history = undefined;
+    }
+    /** The index of the strokes on the sheet, built anew if they are a new array since it was built. */
+    #indexOf() {
+        if (this.#indexed !== this.#strokes) {
+            this.#index = new RBush().load(this.#strokes.map((stroke) => this.#entryOf(stroke)));
+            this.#indexed = this.#strokes;
+        }
+        return this.#index;
+    }
+    #entryOf(stroke) {
+        let entry = this.#entries.get(stroke);
+        if (entry === undefined) {
+            entry = { ...boxOf(stroke.points), stroke };
+            this.#entries.set(stroke, entry);
+        }
+        return entry;
+    }
+}
+/** The ID the next stroke takes after a history (R27): one past the highest written, or 1. */
+export function nextIdOf(history) {
+    let highest = 0;
+    for (const event of history) {
+        if (event.kind === "write")
+            highest = Math.max(highest, event.stroke.id);
+    }
+    return highest + 1;
+}
+/**
+ * Where the sheet's clock goes on after a history given to it (R27): past its last event by more
+ * than the pause of the groups (R24), so that the first stroke after it is no neighbour of its
+ * strokes; at 0 after an empty history, which is a new sheet's.
+ */
+export function resumeOf(history) {
+    const last = history.at(-1);
+    return last === undefined ? 0 : last.t + GROUP_RULE.pause + 1;
+}
+/** What an event of a history says it does, for a message. */
+function what(event) {
+    switch (event.kind) {
+        case "write":
+            return `stroke ${event.stroke.id} written`;
+        case "erase":
+            return `strokes ${shown(event.ids)} erased`;
+        case "clear":
+            return `strokes ${shown(event.ids)} cleared`;
+        case "undo":
+            return `an undo that takes off ${shown(event.removed)} and brings back ${shown(event.restored)}`;
+    }
+}
+/** What the sheet does instead, by the rules of its stack, for a message. */
+function instead(recorded) {
+    switch (recorded?.kind) {
+        case "erase":
+            return `where the sheet takes off ${shown(recorded.ids)}, in its order`;
+        case "clear":
+            return `where the sheet clears ${shown(recorded.ids)}`;
+        case "undo":
+            return `where the last action still in force takes off ${shown(recorded.removed)} and brings back ${shown(recorded.restored)}`;
+        default:
+            return "which the sheet does otherwise";
+    }
+}
+/** Why the sheet does nothing for an event, for a message. */
+function unable(event) {
+    switch (event.kind) {
+        case "erase":
+            return "but none of them is on the sheet";
+        case "clear":
+            return "but the sheet is empty";
+        default:
+            return "but there is nothing to take back";
+    }
+}
+/** How near a stroke's line — the segments between its points — comes to the segment ab. */
+function lineDistance(stroke, a, b) {
+    const [first, ...rest] = stroke.points;
+    if (first === undefined)
+        return Number.POSITIVE_INFINITY;
+    if (rest.length === 0)
+        return segmentDistance(a, b, first, first);
+    let nearest = Number.POSITIVE_INFINITY;
+    let previous = first;
+    for (const point of rest) {
+        nearest = Math.min(nearest, segmentDistance(a, b, previous, point));
+        previous = point;
+    }
+    return nearest;
+}

package/lib/element/attributes.d.ts

@@ -0,0 +1,11 @@
+/** The namespace of the SVG elements the element makes: its layers, and the row's triangle. */
+export declare const SVG = "http://www.w3.org/2000/svg";
+/** An SVG shape — a workbook's box, a demo's picture — set over a box in its layer's units. */
+export declare function placeOver(shape: SVGElement, { left, top, width, height }: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}): void;
+/** An attribute set to a value, or taken off for null, and written only if it changes. */
+export declare function write(element: Element, name: string, value: string | null): void;

package/lib/element/attributes.js

@@ -0,0 +1,22 @@
+// The attributes the element writes as its state changes — the row's and the template's — each
+// only when its value changes, so that what has not changed tells no observer of a change, the
+// namespace of the SVG it writes them on, and the place of an SVG shape of a box. This module is
+// no entry point of the package.
+/** The namespace of the SVG elements the element makes: its layers, and the row's triangle. */
+export const SVG = "http://www.w3.org/2000/svg";
+/** An SVG shape — a workbook's box, a demo's picture — set over a box in its layer's units. */
+export function placeOver(shape, { left, top, width, height }) {
+    shape.setAttribute("x", String(left));
+    shape.setAttribute("y", String(top));
+    shape.setAttribute("width", String(width));
+    shape.setAttribute("height", String(height));
+}
+/** An attribute set to a value, or taken off for null, and written only if it changes. */
+export function write(element, name, value) {
+    if (element.getAttribute(name) === value)
+        return;
+    if (value === null)
+        element.removeAttribute(name);
+    else
+        element.setAttribute(name, value);
+}