js-draw 0.1.11 → 0.2.0

package/dist/src/rendering/Display.js

@@ -1,7 +1,21 @@
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ *
+ * @packageDocumentation
+ */
 import CanvasRenderer from './renderers/CanvasRenderer';
 import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
-import { Vec2 } from '../geometry/Vec2';
+import { Vec2 } from '../math/Vec2';
 import RenderingCache from './caching/RenderingCache';
 import TextOnlyRenderer from './renderers/TextOnlyRenderer';
 import Color4 from '../Color4';
@@ -12,9 +26,15 @@ export var RenderingMode;
     // SVGRenderer is not supported by the main display
 })(RenderingMode || (RenderingMode = {}));
 export default class Display {
+    /** @internal */
     constructor(editor, mode, parent) {
         this.editor = editor;
         this.parent = parent;
+        this.textRerenderOutput = null;
+        /**
+         * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
+         * 	is not on the display.
+         */
         this.getColorAt = (_screenPos) => {
             return null;
         };
@@ -51,10 +71,10 @@ export default class Display {
                 return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
             },
             blockResolution: cacheBlockResolution,
-            cacheSize: 500 * 500 * 4 * 200,
+            cacheSize: 500 * 500 * 4 * 150,
             maxScale: 1.5,
-            minComponentsPerCache: 50,
-            minComponentsToUseCache: 120,
+            minComponentsPerCache: 45,
+            minComponentsToUseCache: 105,
         });
         this.editor.notifier.on(EditorEventType.DisplayResized, event => {
             var _a;
@@ -64,15 +84,18 @@ export default class Display {
             (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
         });
     }
-    // Returns the visible width of the display (e.g. how much
-    // space the display's element takes up in the x direction
-    // in the DOM).
+    /**
+     * @returns the visible width of the display (e.g. how much
+     * space the display's element takes up in the x direction
+     * in the DOM).
+     */
     get width() {
         return this.dryInkRenderer.displaySize().x;
     }
     get height() {
         return this.dryInkRenderer.displaySize().y;
     }
+    /** @internal */
     getCache() {
         return this.cache;
     }
@@ -126,17 +149,30 @@ export default class Display {
         const rerenderButton = document.createElement('button');
         rerenderButton.classList.add('rerenderButton');
         rerenderButton.innerText = this.editor.localization.rerenderAsText;
-        const rerenderOutput = document.createElement('div');
-        rerenderOutput.ariaLive = 'polite';
+        this.textRerenderOutput = document.createElement('div');
+        this.textRerenderOutput.setAttribute('aria-live', 'polite');
         rerenderButton.onclick = () => {
-            this.textRenderer.clear();
-            this.editor.image.render(this.textRenderer, this.editor.viewport);
-            rerenderOutput.innerText = this.textRenderer.getDescription();
+            this.rerenderAsText();
         };
-        textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+        textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
         this.editor.createHTMLOverlay(textRendererOutputContainer);
     }
-    // Clears the drawing surfaces and otherwise prepares for a rerender.
+    /**
+     * Rerenders the text-based display.
+     * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.
+     */
+    rerenderAsText() {
+        this.textRenderer.clear();
+        this.editor.image.render(this.textRenderer, this.editor.viewport);
+        if (this.textRerenderOutput) {
+            this.textRerenderOutput.innerText = this.textRenderer.getDescription();
+        }
+    }
+    /**
+     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     *
+     * @returns the dry ink renderer.
+     */
     startRerender() {
         var _a;
         (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
@@ -144,16 +180,25 @@ export default class Display {
         this.dryInkRenderer.clear();
         return this.dryInkRenderer;
     }
+    /**
+     * If `draftMode`, the dry ink renderer is configured to render
+     * low-quality output.
+     */
     setDraftMode(draftMode) {
         this.dryInkRenderer.setDraftMode(draftMode);
     }
+    /** @internal */
     getDryInkRenderer() {
         return this.dryInkRenderer;
     }
+    /**
+     * @returns The renderer used for showing action previews (e.g. an unfinished stroke).
+     * The `wetInkRenderer`'s surface is stacked above the `dryInkRenderer`'s.
+     */
     getWetInkRenderer() {
         return this.wetInkRenderer;
     }
-    // Re-renders the contents of the wetInkRenderer onto the dryInkRenderer
+    /** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
     flatten() {
         var _a;
         (_a = this.flattenCallback) === null || _a === void 0 ? void 0 : _a.call(this);

package/dist/src/rendering/caching/CacheRecord.d.ts

@@ -1,5 +1,5 @@
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { BeforeDeallocCallback, CacheState } from './types';
 export default class CacheRecord {
@@ -8,6 +8,7 @@ export default class CacheRecord {
     private renderer;
     private lastUsedCycle;
     private allocd;
+    allocCount: number;
     constructor(onBeforeDeallocCallback: BeforeDeallocCallback | null, cacheState: CacheState);
     startRender(): AbstractRenderer;
     dealloc(): void;

package/dist/src/rendering/caching/CacheRecord.js

@@ -1,4 +1,4 @@
-import Mat33 from '../../geometry/Mat33';
+import Mat33 from '../../math/Mat33';
 // Represents a cached renderer/canvas
 // This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
 export default class CacheRecord {
@@ -6,6 +6,8 @@ export default class CacheRecord {
         this.onBeforeDeallocCallback = onBeforeDeallocCallback;
         this.cacheState = cacheState;
         this.allocd = false;
+        // For debugging
+        this.allocCount = 0;
         this.renderer = cacheState.props.createRenderer();
         this.lastUsedCycle = -1;
         this.allocd = true;
@@ -34,6 +36,7 @@ export default class CacheRecord {
         this.allocd = true;
         this.onBeforeDeallocCallback = newDeallocCallback;
         this.lastUsedCycle = this.cacheState.currentRenderingCycle;
+        this.allocCount++;
     }
     getLastUsedCycle() {
         return this.lastUsedCycle;

package/dist/src/rendering/caching/CacheRecordManager.d.ts

@@ -1,11 +1,12 @@
-import { BeforeDeallocCallback, PartialCacheState } from './types';
+import { BeforeDeallocCallback, CacheProps, CacheState } from './types';
 import CacheRecord from './CacheRecord';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 export declare class CacheRecordManager {
-    private readonly cacheState;
     private cacheRecords;
     private maxCanvases;
-    constructor(cacheState: PartialCacheState);
+    private cacheState;
+    constructor(cacheProps: CacheProps);
+    setSharedState(state: CacheState): void;
     allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord;
     private getLeastRecentlyUsedRecord;
 }

package/dist/src/rendering/caching/CacheRecordManager.js

@@ -1,25 +1,37 @@
 import CacheRecord from './CacheRecord';
+const debugMode = false;
 export class CacheRecordManager {
-    constructor(cacheState) {
-        this.cacheState = cacheState;
+    constructor(cacheProps) {
         // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
         this.cacheRecords = [];
-        const cacheProps = cacheState.props;
         this.maxCanvases = Math.ceil(
         // Assuming four components per pixel:
         cacheProps.cacheSize / 4 / cacheProps.blockResolution.x / cacheProps.blockResolution.y);
     }
+    setSharedState(state) {
+        this.cacheState = state;
+    }
     allocCanvas(drawTo, onDealloc) {
         if (this.cacheRecords.length < this.maxCanvases) {
-            const record = new CacheRecord(onDealloc, Object.assign(Object.assign({}, this.cacheState), { recordManager: this }));
+            const record = new CacheRecord(onDealloc, this.cacheState);
             record.setRenderingRegion(drawTo);
             this.cacheRecords.push(record);
+            if (debugMode) {
+                console.log('[Cache] Cache spaces used: ', this.cacheRecords.length, ' of ', this.maxCanvases);
+            }
             return record;
         }
         else {
             const lru = this.getLeastRecentlyUsedRecord();
+            if (debugMode) {
+                console.log('[Cache] Re-alloc. Times allocated: ', lru.allocCount, '\nLast used cycle: ', lru.getLastUsedCycle(), '\nCurrent cycle: ', this.cacheState.currentRenderingCycle);
+            }
             lru.realloc(onDealloc);
             lru.setRenderingRegion(drawTo);
+            if (debugMode) {
+                console.log('[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle());
+                console.assert(lru['cacheState'] === this.cacheState, '[Cache] Unequal cache states! cacheState should be a shared object!');
+            }
             return lru;
         }
     }

package/dist/src/rendering/caching/RenderingCache.d.ts

@@ -1,12 +1,11 @@
 import { ImageNode } from '../../EditorImage';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
-import { CacheProps, CacheState } from './types';
+import { CacheProps } from './types';
 export default class RenderingCache {
-    private partialSharedState;
+    private sharedState;
     private recordManager;
     private rootNode;
     constructor(cacheProps: CacheProps);
-    getSharedState(): CacheState;
     render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport): void;
 }

package/dist/src/rendering/caching/RenderingCache.js

@@ -1,38 +1,37 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import RenderingCacheNode from './RenderingCacheNode';
 import { CacheRecordManager } from './CacheRecordManager';
 export default class RenderingCache {
     constructor(cacheProps) {
-        this.partialSharedState = {
+        this.recordManager = new CacheRecordManager(cacheProps);
+        this.sharedState = {
             props: cacheProps,
             currentRenderingCycle: 0,
+            recordManager: this.recordManager,
         };
-        this.recordManager = new CacheRecordManager(this.partialSharedState);
-    }
-    getSharedState() {
-        return Object.assign(Object.assign({}, this.partialSharedState), { recordManager: this.recordManager });
+        this.recordManager.setSharedState(this.sharedState);
     }
     render(screenRenderer, image, viewport) {
         var _a;
         const visibleRect = viewport.visibleRect;
-        this.partialSharedState.currentRenderingCycle++;
+        this.sharedState.currentRenderingCycle++;
         // If we can't use the cache,
-        if (!this.partialSharedState.props.isOfCorrectType(screenRenderer)) {
+        if (!this.sharedState.props.isOfCorrectType(screenRenderer)) {
             image.render(screenRenderer, visibleRect);
             return;
         }
         if (!this.rootNode) {
             // Adjust the node so that it has the correct aspect ratio
-            const res = this.partialSharedState.props.blockResolution;
+            const res = this.sharedState.props.blockResolution;
             const topLeft = visibleRect.topLeft;
-            this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, res.x, res.y), this.getSharedState());
+            this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, res.x, res.y), this.sharedState);
         }
         while (!this.rootNode.region.containsRect(visibleRect)) {
             this.rootNode = this.rootNode.generateParent();
         }
         this.rootNode = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : this.rootNode;
         const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
-        if (visibleLeaves.length > this.partialSharedState.props.minComponentsToUseCache) {
+        if (visibleLeaves.length > this.sharedState.props.minComponentsToUseCache) {
             this.rootNode.renderItems(screenRenderer, [image], viewport);
         }
         else {

package/dist/src/rendering/caching/RenderingCacheNode.d.ts

@@ -1,5 +1,5 @@
 import { ImageNode } from '../../EditorImage';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheState } from './types';
@@ -20,6 +20,7 @@ export default class RenderingCacheNode {
     private allChildrenCanRender;
     private computeSortedByLeafIds;
     private idsOfIntersecting;
+    private allRenderedIdsIn;
     private renderingIsUpToDate;
     renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport): void;
     private isEmpty;

package/dist/src/rendering/caching/RenderingCacheNode.js

@@ -1,7 +1,7 @@
 // A cache record with sub-nodes.
 import Color4 from '../../Color4';
 import { sortLeavesByZIndex } from '../../EditorImage';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 // 3x3 divisions for each node.
 const cacheDivisionSize = 3;
 // True: Show rendering updates.
@@ -116,17 +116,26 @@ export default class RenderingCacheNode {
         }
         return result;
     }
-    renderingIsUpToDate(sortedIds) {
-        if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+    // Returns true iff all elems of this.renderedIds are in sortedIds.
+    // sortedIds should be sorted by z-index (or some other order, so long as they are
+    // sorted by the same thing as this.renderedIds.)
+    allRenderedIdsIn(sortedIds) {
+        if (this.renderedIds.length > sortedIds.length) {
             return false;
         }
-        for (let i = 0; i < sortedIds.length; i++) {
+        for (let i = 0; i < this.renderedIds.length; i++) {
             if (sortedIds[i] !== this.renderedIds[i]) {
                 return false;
             }
         }
         return true;
     }
+    renderingIsUpToDate(sortedIds) {
+        if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+            return false;
+        }
+        return this.allRenderedIdsIn(sortedIds);
+    }
     // Render all [items] within [viewport]
     renderItems(screenRenderer, items, viewport) {
         var _a, _b;
@@ -188,14 +197,13 @@ export default class RenderingCacheNode {
                     return;
                 }
                 // Is it worth it to render the items?
-                // TODO: Replace this with something performace based.
-                // TODO: Determine whether it is 'worth it' to cache this depending on rendering time.
+                // TODO: Consider replacing this with something performace based.
                 if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
                     let fullRerenderNeeded = true;
                     if (!this.cachedRenderer) {
                         this.cachedRenderer = this.cacheState.recordManager.allocCanvas(this.region, () => this.onRegionDealloc());
                     }
-                    else if (leavesByIds.length > this.renderedIds.length && this.renderedMaxZIndex !== null) {
+                    else if (leavesByIds.length > this.renderedIds.length && this.allRenderedIdsIn(leafIds) && this.renderedMaxZIndex !== null) {
                         // We often don't need to do a full re-render even if something's changed.
                         // Check whether we can just draw on top of the existing cache.
                         const newLeaves = [];
@@ -228,6 +236,9 @@ export default class RenderingCacheNode {
                             }
                         }
                     }
+                    else if (debugMode) {
+                        console.log('Decided on a full re-render. Reason: At least one of the following is false:', '\n leafIds.length > this.renderedIds.length: ', leafIds.length > this.renderedIds.length, '\n this.allRenderedIdsIn(leafIds): ', this.allRenderedIdsIn(leafIds), '\n this.renderedMaxZIndex !== null: ', this.renderedMaxZIndex !== null, '\n\nthis.rerenderedIds: ', this.renderedIds, ', leafIds: ', leafIds);
+                    }
                     if (fullRerenderNeeded) {
                         thisRenderer = this.cachedRenderer.startRender();
                         thisRenderer.clear();

package/dist/src/rendering/caching/testUtils.js

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import DummyRenderer from '../renderers/DummyRenderer';
 import createEditor from '../../testing/createEditor';
 import RenderingCache from './RenderingCache';

package/dist/src/rendering/caching/types.d.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheRecordManager } from './CacheRecordManager';
 export declare type CacheAddress = number;
@@ -12,10 +12,8 @@ export interface CacheProps {
     minComponentsPerCache: number;
     minComponentsToUseCache: number;
 }
-export interface PartialCacheState {
+export interface CacheState {
     currentRenderingCycle: number;
     props: CacheProps;
-}
-export interface CacheState extends PartialCacheState {
     recordManager: CacheRecordManager;
 }

package/dist/src/rendering/localization.d.ts

@@ -1,4 +1,6 @@
 export interface TextRendererLocalization {
+    pathNodeCount(pathCount: number): string;
+    textNodeCount(nodeCount: number): string;
     textNode(content: string): string;
     rerenderAsText: string;
 }

package/dist/src/rendering/localization.js

@@ -1,4 +1,6 @@
 export const defaultTextRendererLocalization = {
+    pathNodeCount: (count) => `There are ${count} visible path objects.`,
+    textNodeCount: (count) => `There are ${count} visible text nodes.`,
     textNode: (content) => `Text: ${content}`,
     rerenderAsText: 'Re-render as text',
 };

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,9 +1,9 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import { PathCommand } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import { PathCommand } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 export interface RenderablePathSpec {

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -1,5 +1,5 @@
-import Path, { PathCommandType } from '../../geometry/Path';
-import { Vec2 } from '../../geometry/Vec2';
+import Path, { PathCommandType } from '../../math/Path';
+import { Vec2 } from '../../math/Vec2';
 import { stylesEqual } from '../RenderingStyle';
 export default class AbstractRenderer {
     constructor(viewport) {

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -1,8 +1,8 @@
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';

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

@@ -1,6 +1,6 @@
 import Color4 from '../../Color4';
 import Text from '../../components/Text';
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     constructor(ctx, viewport) {
@@ -43,7 +43,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         else {
             this.minSquareCurveApproxDist = 1;
-            this.minRenderSizeBothDimens = 1;
+            this.minRenderSizeBothDimens = 0.5;
             this.minRenderSizeAnyDimen = 0;
         }
     }

package/dist/src/rendering/renderers/DummyRenderer.d.ts

@@ -1,8 +1,8 @@
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer from './AbstractRenderer';

package/dist/src/rendering/renderers/DummyRenderer.js

@@ -1,5 +1,5 @@
 // Renderer that outputs nothing. Useful for automated tests.
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,8 +1,8 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer from './AbstractRenderer';

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -1,5 +1,7 @@
-import Path, { PathCommandType } from '../../geometry/Path';
-import { Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommandType } from '../../math/Path';
+import { toRoundedString } from '../../math/rounding';
+import { Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -89,6 +91,8 @@ export default class SVGRenderer extends AbstractRenderer {
     drawText(text, transform, style) {
         var _a, _b, _c;
         transform = this.getCanvasToScreenTransform().rightMul(transform);
+        const translation = transform.transformVec2(Vec2.zero);
+        transform = transform.rightMul(Mat33.translation(translation.times(-1)));
         const textElem = document.createElementNS(svgNameSpace, 'text');
         textElem.appendChild(document.createTextNode(text));
         textElem.style.transform = `matrix(
@@ -101,6 +105,8 @@ export default class SVGRenderer extends AbstractRenderer {
         textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
         textElem.style.fontSize = style.size + 'px';
         textElem.style.fill = style.renderingStyle.fill.toHexString();
+        textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
+        textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
         if (style.renderingStyle.stroke) {
             const strokeStyle = style.renderingStyle.stroke;
             textElem.style.stroke = strokeStyle.color.toHexString();

package/dist/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -1,7 +1,7 @@
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
@@ -9,6 +9,8 @@ import AbstractRenderer from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
     private descriptionBuilder;
+    private pathCount;
+    private textNodeCount;
     constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
     displaySize(): Vec3;
     clear(): void;

package/dist/src/rendering/renderers/TextOnlyRenderer.js

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 // Outputs a description of what was rendered.
 export default class TextOnlyRenderer extends AbstractRenderer {
@@ -6,6 +6,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         super(viewport);
         this.localizationTable = localizationTable;
         this.descriptionBuilder = [];
+        this.pathCount = 0;
+        this.textNodeCount = 0;
     }
     displaySize() {
         // We don't have a graphical display, export a reasonable size.
@@ -13,13 +15,20 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     }
     clear() {
         this.descriptionBuilder = [];
+        this.pathCount = 0;
+        this.textNodeCount = 0;
     }
     getDescription() {
-        return this.descriptionBuilder.join('\n');
+        return [
+            this.localizationTable.pathNodeCount(this.pathCount),
+            this.localizationTable.textNodeCount(this.textNodeCount),
+            ...this.descriptionBuilder
+        ].join('\n');
     }
     beginPath(_startPoint) {
     }
     endPath(_style) {
+        this.pathCount++;
     }
     lineTo(_point) {
     }
@@ -31,9 +40,10 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     }
     drawText(text, _transform, _style) {
         this.descriptionBuilder.push(this.localizationTable.textNode(text));
+        this.textNodeCount++;
     }
     isTooSmallToRender(rect) {
-        return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+        return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
     }
     drawPoints(..._points) {
     }

package/dist/src/toolbar/HTMLToolbar.js

@@ -29,6 +29,7 @@ export default class HTMLToolbar {
         }
         this.setupColorPickers();
     }
+    // @internal
     setupColorPickers() {
         const closePickerOverlay = document.createElement('div');
         closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;

package/dist/src/toolbar/icons.d.ts

@@ -15,3 +15,6 @@ export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
 export declare const makePenIcon: (tipThickness: number, color: string) => SVGSVGElement;
 export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;
 export declare const makePipetteIcon: (color?: Color4) => SVGSVGElement;
+export declare const makeResizeViewportIcon: () => SVGSVGElement;
+export declare const makeDuplicateSelectionIcon: () => SVGSVGElement;
+export declare const makeDeleteSelectionIcon: () => SVGSVGElement;