js-draw 0.22.1 → 0.23.0

package/dist/cjs/src/rendering/renderers/CanvasRenderer.js

@@ -180,14 +180,19 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         super.startObject(boundingBox);
         this.currentObjectBBox = boundingBox;
         if (!this.ignoringObject && clip) {
-            this.clipLevels.push(this.objectLevel);
-            this.ctx.save();
-            this.ctx.beginPath();
-            for (const corner of boundingBox.corners) {
-                const screenCorner = this.canvasToScreen(corner);
-                this.ctx.lineTo(screenCorner.x, screenCorner.y);
+            // Don't clip if it would only remove content already trimmed by
+            // the edge of the screen.
+            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
+            if (!clippedIsOutsideScreen) {
+                this.clipLevels.push(this.objectLevel);
+                this.ctx.save();
+                this.ctx.beginPath();
+                for (const corner of boundingBox.corners) {
+                    const screenCorner = this.canvasToScreen(corner);
+                    this.ctx.lineTo(screenCorner.x, screenCorner.y);
+                }
+                this.ctx.clip();
             }
-            this.ctx.clip();
         }
     }
     endObject() {

package/dist/cjs/src/toolbar/widgets/BaseWidget.d.ts

@@ -46,6 +46,7 @@ export default abstract class BaseWidget {
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;
     setSelected(selected: boolean): void;
+    private hideDropdownTimeout;
     protected setDropdownVisible(visible: boolean): void;
     canBeInOverflowMenu(): boolean;
     getButtonWidth(): number;

package/dist/cjs/src/toolbar/widgets/BaseWidget.js

@@ -28,6 +28,7 @@ class BaseWidget {
         this.subWidgets = {};
         this.toplevel = true;
         this.toolbarWidgetToggleListener = null;
+        this.hideDropdownTimeout = null;
         this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
         this.icon = null;
         this.container = document.createElement('div');
@@ -235,6 +236,13 @@ class BaseWidget {
         if (currentlyVisible === visible) {
             return;
         }
+        // If waiting to hide the dropdown, cancel it.
+        if (this.hideDropdownTimeout) {
+            clearTimeout(this.hideDropdownTimeout);
+            this.hideDropdownTimeout = null;
+            this.dropdownContainer.classList.remove('hiding');
+        }
+        const animationDuration = 150; // ms
         if (visible) {
             this.dropdownContainer.classList.remove('hidden');
             this.container.classList.add('dropdownVisible');
@@ -245,10 +253,20 @@ class BaseWidget {
             });
         }
         else {
-            this.dropdownContainer.classList.add('hidden');
             this.container.classList.remove('dropdownVisible');
             this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
+            this.dropdownContainer.classList.add('hiding');
+            // Hide the dropdown *slightly* before the animation finishes. This
+            // prevents flickering in some browsers.
+            const hideDelay = animationDuration * 0.95;
+            this.hideDropdownTimeout = setTimeout(() => {
+                this.dropdownContainer.classList.add('hidden');
+                this.dropdownContainer.classList.remove('hiding');
+            }, hideDelay);
         }
+        // Animate
+        const animationName = `var(--dropdown-${visible ? 'show' : 'hide'}-animation)`;
+        this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
         this.repositionDropdown();
     }
     canBeInOverflowMenu() {
@@ -267,11 +285,11 @@ class BaseWidget {
         const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
         const screenWidth = document.body.clientWidth;
         if (dropdownBBox.left > screenWidth / 2) {
-            this.dropdownContainer.style.marginLeft = this.button.clientWidth + 'px';
-            this.dropdownContainer.style.transform = 'translate(-100%, 0)';
+            // Use .translate so as not to conflict with CSS animating the
+            // transform property.
+            this.dropdownContainer.style.translate = `calc(${this.button.clientWidth + 'px'} - 100%) 0`;
         }
         else {
-            this.dropdownContainer.style.marginLeft = '';
             this.dropdownContainer.style.transform = '';
         }
     }

package/dist/cjs/src/tools/Pen.d.ts

@@ -14,9 +14,12 @@ export default class Pen extends BaseTool {
     private builderFactory;
     protected builder: ComponentBuilder | null;
     private lastPoint;
+    private startPoint;
     private ctrlKeyPressed;
+    private shiftKeyPressed;
     constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
+    private xyAxesSnap;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
     protected previewStroke(): void;
     protected addPointToStroke(point: StrokeDataPoint): void;
@@ -34,6 +37,7 @@ export default class Pen extends BaseTool {
     getStrokeFactory(): ComponentBuilderFactory;
     setEnabled(enabled: boolean): void;
     private isSnappingToGrid;
+    private isAngleLocked;
     onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
     onKeyUp({ key }: KeyUpEvent): boolean;
 }

package/dist/cjs/src/tools/Pen.js

@@ -16,14 +16,26 @@ class Pen extends BaseTool_1.default {
         this.builderFactory = builderFactory;
         this.builder = null;
         this.lastPoint = null;
+        this.startPoint = null;
         this.ctrlKeyPressed = false;
+        this.shiftKeyPressed = false;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
     }
+    // Snap the given pointer to the nearer of the x/y axes.
+    xyAxesSnap(pointer) {
+        if (!this.startPoint) {
+            return pointer;
+        }
+        return pointer.lockedToXYAxes(this.startPoint.pos, this.editor.viewport);
+    }
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
         var _a;
+        if (this.isAngleLocked() && this.lastPoint) {
+            pointer = this.xyAxesSnap(pointer);
+        }
         if (this.isSnappingToGrid()) {
             pointer = pointer.snappedToGrid(this.editor.viewport);
         }
@@ -69,7 +81,8 @@ class Pen extends BaseTool_1.default {
             }
         }
         if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
-            this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
+            this.startPoint = this.toStrokePoint(current);
+            this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
             return true;
         }
         return false;
@@ -109,6 +122,7 @@ class Pen extends BaseTool_1.default {
             }
         }
         this.builder = null;
+        this.lastPoint = null;
         this.editor.clearWetInk();
     }
     noteUpdated() {
@@ -143,6 +157,7 @@ class Pen extends BaseTool_1.default {
         this.ctrlKeyPressed = false;
     }
     isSnappingToGrid() { return this.ctrlKeyPressed; }
+    isAngleLocked() { return this.shiftKeyPressed; }
     onKeyPress({ key, ctrlKey }) {
         key = key.toLowerCase();
         let newThickness;
@@ -161,6 +176,10 @@ class Pen extends BaseTool_1.default {
             this.ctrlKeyPressed = true;
             return true;
         }
+        if (key === 'shift') {
+            this.shiftKeyPressed = true;
+            return true;
+        }
         // Ctrl+Z: End the stroke so that it can be undone/redone.
         if (key === 'z' && ctrlKey && this.builder) {
             this.finalizeStroke();
@@ -173,6 +192,10 @@ class Pen extends BaseTool_1.default {
             this.ctrlKeyPressed = false;
             return true;
         }
+        if (key === 'shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
         return false;
     }
 }

package/dist/cjs/src/tools/SelectionTool/SelectionTool.d.ts

@@ -10,6 +10,7 @@ export default class SelectionTool extends BaseTool {
     private prevSelectionBox;
     private selectionBox;
     private lastEvtTarget;
+    private startPoint;
     private expandingSelectionBox;
     private shiftKeyPressed;
     private ctrlKeyPressed;

package/dist/cjs/src/tools/SelectionTool/SelectionTool.js

@@ -20,6 +20,7 @@ class SelectionTool extends BaseTool_1.default {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastEvtTarget = null;
+        this.startPoint = null; // canvas position
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
         this.ctrlKeyPressed = false;
@@ -30,6 +31,9 @@ class SelectionTool extends BaseTool_1.default {
         this.handleOverlay.classList.add('handleOverlay');
         editor.notifier.on(types_1.EditorEventType.ViewportChanged, _data => {
             var _a;
+            // The selection box could be using the wet ink display if its transformation
+            // hasn't been finalized yet. Clear before updating the UI.
+            this.editor.clearWetInk();
             (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);
@@ -67,6 +71,7 @@ class SelectionTool extends BaseTool_1.default {
             current = current.snappedToGrid(this.editor.viewport);
         }
         if (allPointers.length === 1 && current.isPrimary) {
+            this.startPoint = current.canvasPos;
             let transforming = false;
             if (this.lastEvtTarget && this.selectionBox) {
                 if (snapToGrid) {
@@ -92,6 +97,9 @@ class SelectionTool extends BaseTool_1.default {
         if (!this.selectionBox)
             return;
         let currentPointer = event.current;
+        if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
+            currentPointer = currentPointer.lockedToXYAxes(this.startPoint, this.editor.viewport);
+        }
         if (this.ctrlKeyPressed) {
             currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
         }

package/dist/cjs/src/util/waitForAll.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves when all given promises have resolved. If no promises are given,
+ * does not return a Promise.
+ */
+declare const waitForAll: (results: (Promise<void> | void)[]) => Promise<void> | void;
+export default waitForAll;

package/dist/cjs/src/util/waitForAll.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Resolves when all given promises have resolved. If no promises are given,
+ * does not return a Promise.
+ */
+const waitForAll = (results) => {
+    // If any are Promises...
+    if (results.some(command => command && command['then'])) {
+        // Wait for all commands to finish.
+        return Promise.all(results)
+            // Ensure we return a Promise<void> and not a Promise<void[]>
+            .then(() => { });
+    }
+    return;
+};
+exports.default = waitForAll;

package/dist/mjs/src/Pointer.d.ts

@@ -1,4 +1,4 @@
-import { Point2 } from './math/Vec2';
+import { Point2, Vec2 } from './math/Vec2';
 import Viewport from './Viewport';
 export declare enum PointerDevice {
     Pen = 0,
@@ -19,6 +19,8 @@ export default class Pointer {
     readonly timeStamp: number;
     private constructor();
     snappedToGrid(viewport: Viewport): Pointer;
+    lockedToXYAxes(originPoint: Vec2, viewport: Viewport): Pointer;
+    withCanvasPosition(canvasPos: Point2, viewport: Viewport): Pointer;
     static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
     static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
 }

package/dist/mjs/src/Pointer.mjs

@@ -36,8 +36,33 @@ export default class Pointer {
     // this.
     snappedToGrid(viewport) {
         const snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
-        const snappedScreenPos = viewport.canvasToScreen(snappedCanvasPos);
-        return new Pointer(snappedScreenPos, snappedCanvasPos, this.pressure, this.isPrimary, this.down, this.device, this.id, this.timeStamp);
+        return this.withCanvasPosition(snappedCanvasPos, viewport);
+    }
+    // Snap this pointer to the X or Y axis (whichever is closer), where (0,0)
+    // is considered to be at `originPoint`.
+    // @internal
+    lockedToXYAxes(originPoint, viewport) {
+        const current = this.canvasPos;
+        const currentFromStart = current.minus(originPoint);
+        // Determine whether the last point was closer to being on the
+        // x- or y- axis.
+        const projOntoXAxis = Vec2.unitX.times(currentFromStart.x);
+        const projOntoYAxis = Vec2.unitY.times(currentFromStart.y);
+        let pos;
+        if (currentFromStart.dot(projOntoXAxis) > currentFromStart.dot(projOntoYAxis)) {
+            pos = projOntoXAxis;
+        }
+        else {
+            pos = projOntoYAxis;
+        }
+        pos = pos.plus(originPoint);
+        return this.withCanvasPosition(pos, viewport);
+    }
+    // Returns a copy of this pointer with a new position. The screen position is determined
+    // by the given `canvasPos`.
+    withCanvasPosition(canvasPos, viewport) {
+        const screenPos = viewport.canvasToScreen(canvasPos);
+        return new Pointer(screenPos, canvasPos, this.pressure, this.isPrimary, this.down, this.device, this.id, this.timeStamp);
     }
     // Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
     // considered the top left of `relativeTo`.

package/dist/mjs/src/commands/Duplicate.d.ts

@@ -2,6 +2,29 @@ import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 import SerializableCommand from './SerializableCommand';
+/**
+ * A command that duplicates the {@link AbstractComponent}s it's given. This command
+ * is the reverse of an {@link Erase} command.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (0,0) and
+ * // (width,height)=(100,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(0, 0, 100, 100)
+ * );
+ *
+ * // Create a command that, when applied, will duplicate the elements.
+ * const duplicateElems = new Duplicate(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(duplicateElems);
+ * ```
+ *
+ * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ */
 export default class Duplicate extends SerializableCommand {
     private toDuplicate;
     private duplicates;
@@ -9,6 +32,7 @@ export default class Duplicate extends SerializableCommand {
     constructor(toDuplicate: AbstractComponent[]);
     apply(editor: Editor): void;
     unapply(editor: Editor): void;
+    onDrop(editor: Editor): void;
     description(_editor: Editor, localizationTable: EditorLocalization): string;
     protected serializeToJSON(): string[];
 }

package/dist/mjs/src/commands/Duplicate.mjs

@@ -1,6 +1,29 @@
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
 import  Erase  from './Erase.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
+/**
+ * A command that duplicates the {@link AbstractComponent}s it's given. This command
+ * is the reverse of an {@link Erase} command.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (0,0) and
+ * // (width,height)=(100,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(0, 0, 100, 100)
+ * );
+ *
+ * // Create a command that, when applied, will duplicate the elements.
+ * const duplicateElems = new Duplicate(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(duplicateElems);
+ * ```
+ *
+ * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ */
 export default class Duplicate extends SerializableCommand {
     constructor(toDuplicate) {
         super('duplicate');
@@ -14,6 +37,9 @@ export default class Duplicate extends SerializableCommand {
     unapply(editor) {
         this.reverse.apply(editor);
     }
+    onDrop(editor) {
+        this.reverse.onDrop(editor);
+    }
     description(_editor, localizationTable) {
         var _a;
         if (this.duplicates.length === 0) {

package/dist/mjs/src/commands/Erase.d.ts

@@ -2,6 +2,26 @@ import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 import SerializableCommand from './SerializableCommand';
+/**
+ * Removes the given {@link AbstractComponent}s from the image.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (-10,-30) and
+ * // (width,height)=(50,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(-10, -30, 50, 100)
+ * );
+ *
+ * // Create a command that erases [elems] when applied
+ * const eraseElemsCmd = new Erase(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(eraseElemsCmd);
+ * ```
+ */
 export default class Erase extends SerializableCommand {
     private toRemove;
     private applied;

package/dist/mjs/src/commands/Erase.mjs

@@ -1,6 +1,26 @@
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
 import  EditorImage  from '../EditorImage.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
+/**
+ * Removes the given {@link AbstractComponent}s from the image.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (-10,-30) and
+ * // (width,height)=(50,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(-10, -30, 50, 100)
+ * );
+ *
+ * // Create a command that erases [elems] when applied
+ * const eraseElemsCmd = new Erase(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(eraseElemsCmd);
+ * ```
+ */
 export default class Erase extends SerializableCommand {
     constructor(toRemove) {
         super('erase');

package/dist/mjs/src/commands/invertCommand.mjs

@@ -15,6 +15,9 @@ const invertCommand = (command) => {
             unapply(editor) {
                 command.unapply(editor);
             }
+            onDrop(editor) {
+                command.onDrop(editor);
+            }
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }
@@ -29,6 +32,9 @@ const invertCommand = (command) => {
             unapply(editor) {
                 command.apply(editor);
             }
+            onDrop(editor) {
+                command.onDrop(editor);
+            }
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }

package/dist/mjs/src/commands/uniteCommands.mjs

@@ -1,3 +1,4 @@
+import  waitForAll  from '../util/waitForAll.mjs';
 import  Command  from './Command.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
 class NonSerializableUnion extends Command {
@@ -6,21 +7,10 @@ class NonSerializableUnion extends Command {
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
     }
-    static waitForAll(commands) {
-        // If any are Promises...
-        if (commands.some(command => command && command['then'])) {
-            console.log('waiting...');
-            // Wait for all commands to finish.
-            return Promise.all(commands)
-                // Ensure we return a Promise<void> and not a Promise<void[]>
-                .then(() => { });
-        }
-        return;
-    }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
             const results = this.commands.map(cmd => cmd.apply(editor));
-            return NonSerializableUnion.waitForAll(results);
+            return waitForAll(results);
         }
         else {
             return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
@@ -31,12 +21,15 @@ class NonSerializableUnion extends Command {
         commands.reverse();
         if (this.applyChunkSize === undefined) {
             const results = commands.map(cmd => cmd.unapply(editor));
-            return NonSerializableUnion.waitForAll(results);
+            return waitForAll(results);
         }
         else {
             return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
         }
     }
+    onDrop(editor) {
+        this.commands.forEach(command => command.onDrop(editor));
+    }
     description(editor, localizationTable) {
         const descriptions = [];
         let lastDescription = null;
@@ -84,6 +77,9 @@ class SerializableUnion extends SerializableCommand {
     unapply(editor) {
         return this.nonserializableCommand.unapply(editor);
     }
+    onDrop(editor) {
+        this.nonserializableCommand.onDrop(editor);
+    }
     description(editor, localizationTable) {
         return this.nonserializableCommand.description(editor, localizationTable);
     }

package/dist/mjs/src/components/BackgroundComponent.mjs

@@ -167,7 +167,7 @@ export default class BackgroundComponent extends AbstractComponent {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
-        const clip = true;
+        const clip = this.backgroundType === BackgroundType.Grid;
         canvas.startObject(this.contentBBox, clip);
         if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
             // If the rectangle for this region contains the visible rect,
@@ -235,9 +235,16 @@ export default class BackgroundComponent extends AbstractComponent {
         if (this.backgroundType === BackgroundType.SolidColor) {
             return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
         }
-        else {
+        else if (this.backgroundType === BackgroundType.None) {
             return localizationTable.emptyBackground;
         }
+        else if (this.backgroundType === BackgroundType.Grid) {
+            return localizationTable.gridBackground;
+        }
+        else {
+            const exhaustivenessCheck = this.backgroundType;
+            return exhaustivenessCheck;
+        }
     }
     createClone() {
         return new BackgroundComponent(this.backgroundType, this.mainColor);

package/dist/mjs/src/components/lib.d.ts

@@ -10,4 +10,4 @@ import ImageComponent from './ImageComponent';
 import RestyleableComponent from './RestylableComponent';
 import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
 import BackgroundComponent from './BackgroundComponent';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
+export { Stroke, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/src/components/lib.mjs

@@ -9,4 +9,6 @@ import  TextComponent  from './TextComponent.mjs';
 import  ImageComponent  from './ImageComponent.mjs';
 import  { createRestyleComponentCommand, isRestylableComponent }  from './RestylableComponent.mjs';
 import  BackgroundComponent  from './BackgroundComponent.mjs';
-export { Stroke, TextComponent as Text, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
+export { Stroke, createRestyleComponentCommand, isRestylableComponent, TextComponent, 
+// @deprecated
+TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/src/components/localization.d.ts

@@ -5,6 +5,7 @@ export interface ImageComponentLocalization {
     stroke: string;
     svgObject: string;
     emptyBackground: string;
+    gridBackground: string;
     filledBackgroundWithColor: (color: string) => string;
     restyledElement: (elementDescription: string) => string;
 }

package/dist/mjs/src/components/localization.mjs

@@ -3,6 +3,7 @@ export const defaultComponentLocalization = {
     stroke: 'Stroke',
     svgObject: 'SVG Object',
     emptyBackground: 'Empty background',
+    gridBackground: 'Grid background',
     filledBackgroundWithColor: (color) => `Filled background (${color})`,
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,

package/dist/mjs/src/math/Vec2.d.ts

@@ -1,12 +1,32 @@
 import Vec3 from './Vec3';
 export declare namespace Vec2 {
+    /**
+     * Creates a `Vec2` from an x and y coordinate.
+     *
+     * For example,
+     * ```ts
+     * const v = Vec2.of(3, 4); // x=3, y=4.
+     * ```
+     */
     const of: (x: number, y: number) => Vec2;
+    /**
+     * Creates a `Vec2` from an object containing x and y coordinates.
+     *
+     * For example,
+     * ```ts
+     * const v1 = Vec2.ofXY({ x: 3, y: 4.5 });
+     * const v2 = Vec2.ofXY({ x: -123.4, y: 1 });
+     * ```
+     */
     const ofXY: ({ x, y }: {
         x: number;
         y: number;
     }) => Vec2;
+    /** A vector of length 1 in the X direction (→). */
     const unitX: Vec3;
+    /** A vector of length 1 in the Y direction (↑). */
     const unitY: Vec3;
+    /** The zero vector: A vector with x=0, y=0. */
     const zero: Vec3;
 }
 export type Point2 = Vec3;

package/dist/mjs/src/math/Vec2.mjs

@@ -1,13 +1,33 @@
 import  Vec3  from './Vec3.mjs';
 export var Vec2;
 (function (Vec2) {
+    /**
+     * Creates a `Vec2` from an x and y coordinate.
+     *
+     * For example,
+     * ```ts
+     * const v = Vec2.of(3, 4); // x=3, y=4.
+     * ```
+     */
     Vec2.of = (x, y) => {
         return Vec3.of(x, y, 0);
     };
+    /**
+     * Creates a `Vec2` from an object containing x and y coordinates.
+     *
+     * For example,
+     * ```ts
+     * const v1 = Vec2.ofXY({ x: 3, y: 4.5 });
+     * const v2 = Vec2.ofXY({ x: -123.4, y: 1 });
+     * ```
+     */
     Vec2.ofXY = ({ x, y }) => {
         return Vec3.of(x, y, 0);
     };
+    /** A vector of length 1 in the X direction (→). */
     Vec2.unitX = Vec2.of(1, 0);
+    /** A vector of length 1 in the Y direction (↑). */
     Vec2.unitY = Vec2.of(0, 1);
+    /** The zero vector: A vector with x=0, y=0. */
     Vec2.zero = Vec2.of(0, 0);
 })(Vec2 || (Vec2 = {}));