js-draw 0.1.0 → 0.1.3

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

@@ -1,3 +1,6 @@
+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 Viewport from '../../Viewport';
@@ -9,7 +12,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private lastPathStyle;
     private lastPath;
     private lastPathStart;
-    private mainGroup;
+    private objectElems;
     private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
     setRootSVGAttribute(name: string, value: string | null): void;
@@ -18,8 +21,9 @@ export default class SVGRenderer extends AbstractRenderer {
     protected beginPath(startPoint: Point2): void;
     protected endPath(style: RenderingStyle): void;
     private addPathToSVG;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     startObject(boundingBox: Rect2): void;
-    endObject(): void;
+    endObject(loaderData?: LoadSaveDataTable): void;
     protected lineTo(point: Point2): void;
     protected moveTo(point: Point2): void;
     protected traceCubicBezierCurve(controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2): void;

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

@@ -1,11 +1,13 @@
 import Path, { PathCommandType } from '../../geometry/Path';
 import { Vec2 } from '../../geometry/Vec2';
+import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
     constructor(elem, viewport) {
         super(viewport);
         this.elem = elem;
+        this.objectElems = null;
         this.overwrittenAttrs = {};
         this.clear();
     }
@@ -26,7 +28,6 @@ export default class SVGRenderer extends AbstractRenderer {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
-        this.mainGroup = document.createElementNS(svgNameSpace, 'g');
         // Restore all alltributes
         for (const attrName in this.overwrittenAttrs) {
             const value = this.overwrittenAttrs[attrName];
@@ -38,8 +39,6 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
         this.overwrittenAttrs = {};
-        // Remove all children
-        this.elem.replaceChildren(this.mainGroup);
     }
     beginPath(startPoint) {
         var _a;
@@ -72,6 +71,7 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Push [this.fullPath] to the SVG
     addPathToSVG() {
+        var _a;
         if (!this.lastPathStyle || !this.lastPath) {
             return;
         }
@@ -83,7 +83,31 @@ export default class SVGRenderer extends AbstractRenderer {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
             pathElem.setAttribute('stroke-width', style.stroke.width.toString());
         }
-        this.mainGroup.appendChild(pathElem);
+        this.elem.appendChild(pathElem);
+        (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
+    }
+    drawText(text, transform, style) {
+        var _a, _b, _c;
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        const textElem = document.createElementNS(svgNameSpace, 'text');
+        textElem.appendChild(document.createTextNode(text));
+        textElem.style.transform = `matrix(
+			${transform.a1}, ${transform.b1},
+			${transform.a2}, ${transform.b2},
+			${transform.a3}, ${transform.b3}
+		)`;
+        textElem.style.fontFamily = style.fontFamily;
+        textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
+        textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
+        textElem.style.fontSize = style.size + 'px';
+        textElem.style.fill = style.renderingStyle.fill.toHexString();
+        if (style.renderingStyle.stroke) {
+            const strokeStyle = style.renderingStyle.stroke;
+            textElem.style.stroke = strokeStyle.color.toHexString();
+            textElem.style.strokeWidth = strokeStyle.width + 'px';
+        }
+        this.elem.appendChild(textElem);
+        (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
     }
     startObject(boundingBox) {
         super.startObject(boundingBox);
@@ -91,11 +115,30 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPath = null;
         this.lastPathStart = null;
         this.lastPathStyle = null;
+        this.objectElems = [];
     }
-    endObject() {
-        super.endObject();
+    endObject(loaderData) {
+        var _a;
+        super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
+        if (loaderData) {
+            // Restore any attributes unsupported by the app.
+            for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
+                const attrs = loaderData[svgAttributesDataKey];
+                const styleAttrs = loaderData[svgStyleAttributesDataKey];
+                if (attrs) {
+                    for (const [attr, value] of attrs) {
+                        elem.setAttribute(attr, value);
+                    }
+                }
+                if (styleAttrs) {
+                    for (const attr of styleAttrs) {
+                        elem.style.setProperty(attr.key, attr.value, attr.priority);
+                    }
+                }
+            }
+        }
     }
     lineTo(point) {
         point = this.canvasToScreen(point);
@@ -137,7 +180,7 @@ export default class SVGRenderer extends AbstractRenderer {
             elem.setAttribute('cx', `${point.x}`);
             elem.setAttribute('cy', `${point.y}`);
             elem.setAttribute('r', '15');
-            this.mainGroup.appendChild(elem);
+            this.elem.appendChild(elem);
         });
     }
     // Renders a **copy** of the given element.

package/dist/src/testing/loadExpectExtensions.js

@@ -15,10 +15,7 @@ export const loadExpectExtensions = () => {
             return {
                 pass,
                 message: () => {
-                    if (pass) {
-                        return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
-                    }
-                    return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+                    return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
                 },
             };
         },

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

@@ -1,5 +1,6 @@
 import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
@@ -7,7 +8,7 @@ export default class HTMLToolbar {
     private penTypes;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
-    addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;
+    addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
     private addUndoRedoButtons;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;

package/dist/src/toolbar/HTMLToolbar.js

@@ -6,22 +6,16 @@ import Pen from '../tools/Pen';
 import Eraser from '../tools/Eraser';
 import SelectionTool from '../tools/SelectionTool';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { Vec2 } from '../geometry/Vec2';
-import SVGRenderer from '../rendering/renderers/SVGRenderer';
-import Viewport from '../Viewport';
-import EventDispatcher from '../EventDispatcher';
 import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
 import { makeLineBuilder } from '../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 import { defaultToolbarLocalization } from './localization';
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
-`;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
-`;
+import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon, makeTextIcon } from './icons';
+import PanZoom, { PanZoomMode } from '../tools/PanZoom';
+import Mat33 from '../geometry/Mat33';
+import Viewport from '../Viewport';
+import TextTool from '../tools/TextTool';
 const toolbarCSSPrefix = 'toolbar-';
-const svgNamespace = 'http://www.w3.org/2000/svg';
 class ToolbarWidget {
     constructor(editor, targetTool, localizationTable) {
         this.editor = editor;
@@ -39,9 +33,6 @@ class ToolbarWidget {
         this.label = document.createElement('label');
         this.button.setAttribute('role', 'button');
         this.button.tabIndex = 0;
-        this.button.onclick = () => {
-            this.handleClick();
-        };
         editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolEnabled) {
                 throw new Error('Incorrect event type! (Expected ToolEnabled)');
@@ -60,6 +51,11 @@ class ToolbarWidget {
             }
         });
     }
+    setupActionBtnClickListener(button) {
+        button.onclick = () => {
+            this.handleClick();
+        };
+    }
     handleClick() {
         if (this.hasDropdown) {
             if (!this.targetTool.isEnabled()) {
@@ -76,6 +72,7 @@ class ToolbarWidget {
     // Adds this to [parent]. This can only be called once for each ToolbarWidget.
     addTo(parent) {
         this.label.innerText = this.getTitle();
+        this.setupActionBtnClickListener(this.button);
         this.icon = null;
         this.updateIcon();
         this.updateSelected(this.targetTool.isEnabled());
@@ -126,22 +123,26 @@ class ToolbarWidget {
             this.container.classList.remove('dropdownVisible');
             this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.targetTool.description));
         }
+        this.repositionDropdown();
+    }
+    repositionDropdown() {
+        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)';
+        }
+        else {
+            this.dropdownContainer.style.marginLeft = '';
+            this.dropdownContainer.style.transform = '';
+        }
     }
     isDropdownVisible() {
         return !this.dropdownContainer.classList.contains('hidden');
     }
     createDropdownIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.innerHTML = `
-		<g>
-			<path
-				d='M5,10 L50,90 L95,10 Z'
-				${primaryForegroundFill}
-			/>
-		</g>
-		`;
+        const icon = makeDropdownIcon();
         icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
-        icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
 }
@@ -150,19 +151,7 @@ class EraserWidget extends ToolbarWidget {
         return this.localizationTable.eraser;
     }
     createIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw an eraser-like shape
-        icon.innerHTML = `
-		<g>
-			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
-			<rect
-				x=10 y=10 width=80 height=50
-				${primaryForegroundFill}
-			/>
-		</g>
-		`;
-        icon.setAttribute('viewBox', '0 0 100 100');
-        return icon;
+        return makeEraserIcon();
     }
     fillDropdown(_dropdown) {
         // No dropdown associated with the eraser
@@ -178,16 +167,7 @@ class SelectionWidget extends ToolbarWidget {
         return this.localizationTable.select;
     }
     createIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw a cursor-like shape
-        icon.innerHTML = `
-		<g>
-			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
-			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
-		</g>
-		`;
-        icon.setAttribute('viewBox', '0 0 100 100');
-        return icon;
+        return makeSelectionIcon();
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
@@ -223,42 +203,164 @@ class SelectionWidget extends ToolbarWidget {
         return true;
     }
 }
-class TouchDrawingWidget extends ToolbarWidget {
+const makeZoomControl = (localizationTable, editor) => {
+    const zoomLevelRow = document.createElement('div');
+    const increaseButton = document.createElement('button');
+    const decreaseButton = document.createElement('button');
+    const zoomLevelDisplay = document.createElement('span');
+    increaseButton.innerText = '+';
+    decreaseButton.innerText = '-';
+    zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton);
+    zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
+    zoomLevelDisplay.classList.add('zoomDisplay');
+    let lastZoom;
+    const updateZoomDisplay = () => {
+        let zoomLevel = editor.viewport.getScaleFactor() * 100;
+        if (zoomLevel > 0.1) {
+            zoomLevel = Math.round(zoomLevel * 10) / 10;
+        }
+        else {
+            zoomLevel = Math.round(zoomLevel * 1000) / 1000;
+        }
+        if (zoomLevel !== lastZoom) {
+            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            lastZoom = zoomLevel;
+        }
+    };
+    updateZoomDisplay();
+    editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
+        if (event.kind === EditorEventType.ViewportChanged) {
+            updateZoomDisplay();
+        }
+    });
+    const zoomBy = (factor) => {
+        const screenCenter = editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33.scaling2D(factor, screenCenter);
+        editor.dispatch(new Viewport.ViewportTransform(transformUpdate), false);
+    };
+    increaseButton.onclick = () => {
+        zoomBy(5.0 / 4);
+    };
+    decreaseButton.onclick = () => {
+        zoomBy(4.0 / 5);
+    };
+    return zoomLevelRow;
+};
+class HandToolWidget extends ToolbarWidget {
+    constructor(editor, tool, localizationTable) {
+        super(editor, tool, localizationTable);
+        this.tool = tool;
+        this.container.classList.add('dropdownShowable');
+    }
     getTitle() {
-        return this.localizationTable.touchDrawing;
+        return this.localizationTable.handTool;
     }
     createIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw a cursor-like shape
-        icon.innerHTML = `
-		<g>
-			<path d='M11,-30 Q0,10 20,20 Q40,20 40,-30 Z' fill='blue' stroke='black'/>
-			<path d='
-				M0,90 L0,50 Q5,40 10,50
-				L10,20 Q20,15 30,20
-				L30,50 Q50,40 80,50
-				L80,90 L10,90 Z'
-				
-				${primaryForegroundStrokeFill}
-			/>
-		</g>
-		`;
-        icon.setAttribute('viewBox', '-10 -30 100 100');
-        return icon;
+        return makeHandToolIcon();
     }
-    fillDropdown(_dropdown) {
-        // No dropdown
-        return false;
+    fillDropdown(dropdown) {
+        let idCounter = 0;
+        const addCheckbox = (label, onToggle) => {
+            const rowContainer = document.createElement('div');
+            const labelElem = document.createElement('label');
+            const checkboxElem = document.createElement('input');
+            checkboxElem.type = 'checkbox';
+            checkboxElem.id = `${toolbarCSSPrefix}hand-tool-option-${idCounter++}`;
+            labelElem.setAttribute('for', checkboxElem.id);
+            checkboxElem.oninput = () => {
+                onToggle(checkboxElem.checked);
+            };
+            labelElem.innerText = label;
+            rowContainer.replaceChildren(checkboxElem, labelElem);
+            dropdown.appendChild(rowContainer);
+            return checkboxElem;
+        };
+        const setModeFlag = (enabled, flag) => {
+            const mode = this.tool.getMode();
+            if (enabled) {
+                this.tool.setMode(mode | flag);
+            }
+            else {
+                this.tool.setMode(mode & ~flag);
+            }
+        };
+        const touchPanningCheckbox = addCheckbox(this.localizationTable.touchPanning, checked => {
+            setModeFlag(checked, PanZoomMode.OneFingerTouchGestures);
+        });
+        const anyDevicePanningCheckbox = addCheckbox(this.localizationTable.anyDevicePanning, checked => {
+            setModeFlag(checked, PanZoomMode.SinglePointerGestures);
+        });
+        dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+        const updateInputs = () => {
+            const mode = this.tool.getMode();
+            anyDevicePanningCheckbox.checked = !!(mode & PanZoomMode.SinglePointerGestures);
+            if (anyDevicePanningCheckbox.checked) {
+                touchPanningCheckbox.checked = true;
+                touchPanningCheckbox.disabled = true;
+            }
+            else {
+                touchPanningCheckbox.checked = !!(mode & PanZoomMode.OneFingerTouchGestures);
+                touchPanningCheckbox.disabled = false;
+            }
+        };
+        updateInputs();
+        this.editor.notifier.on(EditorEventType.ToolUpdated, event => {
+            if (event.kind === EditorEventType.ToolUpdated && event.tool === this.tool) {
+                updateInputs();
+            }
+        });
+        return true;
     }
-    updateSelected(active) {
-        if (active) {
-            this.container.classList.remove('selected');
-        }
-        else {
-            this.container.classList.add('selected');
-        }
+    updateSelected(_active) {
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
     }
 }
+class TextToolWidget extends ToolbarWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+        this.updateDropdownInputs = null;
+        editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+            var _a;
+            if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+                this.updateIcon();
+                (_a = this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+        });
+    }
+    getTitle() {
+        return this.targetTool.description;
+    }
+    createIcon() {
+        const textStyle = this.tool.getTextStyle();
+        return makeTextIcon(textStyle);
+    }
+    fillDropdown(dropdown) {
+        const colorRow = document.createElement('div');
+        const colorInput = document.createElement('input');
+        const colorLabel = document.createElement('label');
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorInput.classList.add('coloris_input');
+        colorInput.type = 'button';
+        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+        colorLabel.setAttribute('for', colorInput.id);
+        colorInput.oninput = () => {
+            this.tool.setColor(Color4.fromString(colorInput.value));
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInput);
+        this.updateDropdownInputs = () => {
+            const style = this.tool.getTextStyle();
+            colorInput.value = style.renderingStyle.fill.toHexString();
+        };
+        this.updateDropdownInputs();
+        dropdown.appendChild(colorRow);
+        return true;
+    }
+}
+TextToolWidget.idCounter = 0;
 class PenWidget extends ToolbarWidget {
     constructor(editor, tool, localization, penTypes) {
         super(editor, tool, localization);
@@ -279,84 +381,18 @@ class PenWidget extends ToolbarWidget {
     getTitle() {
         return this.targetTool.description;
     }
-    makePenIcon(elem) {
-        // Use a square-root scale to prevent the pen's tip from overflowing.
-        const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 2);
-        const color = this.tool.getColor();
-        // Draw a pen-like shape
-        const primaryStrokeTipPath = `M14,63 L${50 - scale},95 L${50 + scale},90 L88,60 Z`;
-        const backgroundStrokeTipPath = `M14,63 L${50 - scale},85 L${50 + scale},83 L88,60 Z`;
-        elem.innerHTML = `
-		<defs>
-			<pattern
-				id='checkerboard'
-				viewBox='0,0,10,10'
-				width='20%'
-				height='20%'
-				patternUnits='userSpaceOnUse'
-			>
-				<rect x=0 y=0 width=10 height=10 fill='white'/>
-				<rect x=0 y=0 width=5 height=5 fill='gray'/>
-				<rect x=5 y=5 width=5 height=5 fill='gray'/>
-			</pattern>
-		</defs>
-		<g>
-			<!-- Pen grip -->
-			<path
-				d='M10,10 L90,10 L90,60 L${50 + scale},80 L${50 - scale},80 L10,60 Z'
-				${primaryForegroundStrokeFill}
-			/>
-		</g>
-		<g>
-			<!-- Checkerboard background for slightly transparent pens -->
-			<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
-
-			<!-- Actual pen tip -->
-			<path
-				d='${primaryStrokeTipPath}'
-				fill='${color.toHexString()}'
-				stroke='${color.toHexString()}'
-			/>
-		</g>
-		`;
-    }
-    // Draws an icon with the pen.
-    makeDrawnIcon(icon) {
-        const strokeFactory = this.tool.getStrokeFactory();
-        const toolThickness = this.tool.getThickness();
-        const nowTime = (new Date()).getTime();
-        const startPoint = {
-            pos: Vec2.of(10, 10),
-            width: toolThickness / 5,
-            color: this.tool.getColor(),
-            time: nowTime - 100,
-        };
-        const endPoint = {
-            pos: Vec2.of(90, 90),
-            width: toolThickness / 5,
-            color: this.tool.getColor(),
-            time: nowTime,
-        };
-        const builder = strokeFactory(startPoint, this.editor.viewport);
-        builder.addPoint(endPoint);
-        const viewport = new Viewport(new EventDispatcher());
-        viewport.updateScreenSize(Vec2.of(100, 100));
-        const renderer = new SVGRenderer(icon, viewport);
-        builder.preview(renderer);
-    }
     createIcon() {
-        // We need to use createElementNS to embed an SVG element in HTML.
-        // See http://zhangwenli.com/blog/2017/07/26/createelementns/
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.setAttribute('viewBox', '0 0 100 100');
         const strokeFactory = this.tool.getStrokeFactory();
         if (strokeFactory === makeFreehandLineBuilder) {
-            this.makePenIcon(icon);
+            // Use a square-root scale to prevent the pen's tip from overflowing.
+            const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
+            const color = this.tool.getColor();
+            return makePenIcon(scale, color.toHexString());
         }
         else {
-            this.makeDrawnIcon(icon);
+            const strokeFactory = this.tool.getStrokeFactory();
+            return makeIconFromFactory(this.tool, strokeFactory);
         }
-        return icon;
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
@@ -502,10 +538,21 @@ export default class HTMLToolbar {
             closePickerOverlay.style.display = event.open ? 'block' : 'none';
         });
     }
-    addActionButton(text, command, parent) {
+    addActionButton(title, command, parent) {
         const button = document.createElement('button');
-        button.innerText = text;
         button.classList.add(`${toolbarCSSPrefix}toolButton`);
+        if (typeof title === 'string') {
+            button.innerText = title;
+        }
+        else {
+            const iconElem = title.icon.cloneNode(true);
+            const labelElem = document.createElement('label');
+            // Use the label to describe the icon -- no additional description should be necessary.
+            iconElem.setAttribute('alt', '');
+            labelElem.innerText = title.label;
+            iconElem.classList.add('toolbar-icon');
+            button.replaceChildren(iconElem, labelElem);
+        }
         button.onclick = command;
         (parent !== null && parent !== void 0 ? parent : this.container).appendChild(button);
         return button;
@@ -513,10 +560,16 @@ export default class HTMLToolbar {
     addUndoRedoButtons() {
         const undoRedoGroup = document.createElement('div');
         undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
-        const undoButton = this.addActionButton('Undo', () => {
+        const undoButton = this.addActionButton({
+            label: 'Undo',
+            icon: makeUndoIcon()
+        }, () => {
             this.editor.history.undo();
         }, undoRedoGroup);
-        const redoButton = this.addActionButton('Redo', () => {
+        const redoButton = this.addActionButton({
+            label: 'Redo',
+            icon: makeRedoIcon(),
+        }, () => {
             this.editor.history.redo();
         }, undoRedoGroup);
         this.container.appendChild(undoRedoGroup);
@@ -551,8 +604,17 @@ export default class HTMLToolbar {
             }
             (new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
-        for (const tool of toolController.getMatchingTools(ToolType.TouchPanZoom)) {
-            (new TouchDrawingWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        for (const tool of toolController.getMatchingTools(ToolType.Text)) {
+            if (!(tool instanceof TextTool)) {
+                throw new Error('All text tools must have kind === ToolType.Text');
+            }
+            (new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        }
+        for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
+            if (!(tool instanceof PanZoom)) {
+                throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
+            }
+            (new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
         this.setupColorPickers();
     }

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

@@ -0,0 +1,12 @@
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
+import Pen from '../tools/Pen';
+export declare const makeUndoIcon: () => SVGSVGElement;
+export declare const makeRedoIcon: (mirror?: boolean) => SVGSVGElement;
+export declare const makeDropdownIcon: () => SVGSVGElement;
+export declare const makeEraserIcon: () => SVGSVGElement;
+export declare const makeSelectionIcon: () => SVGSVGElement;
+export declare const makeHandToolIcon: () => SVGSVGElement;
+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;