js-draw 0.0.10 → 0.1.2

package/dist/src/toolbar/HTMLToolbar.js

@@ -6,22 +6,15 @@ 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/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 } from './icons';
+import PanZoom, { PanZoomMode } from '../tools/PanZoom';
+import Mat33 from '../geometry/Mat33';
+import Viewport from '../Viewport';
 const toolbarCSSPrefix = 'toolbar-';
-const svgNamespace = 'http://www.w3.org/2000/svg';
 class ToolbarWidget {
     constructor(editor, targetTool, localizationTable) {
         this.editor = editor;
@@ -39,9 +32,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 +50,11 @@ class ToolbarWidget {
             }
         });
     }
+    setupActionBtnClickListener(button) {
+        button.onclick = () => {
+            this.handleClick();
+        };
+    }
     handleClick() {
         if (this.hasDropdown) {
             if (!this.targetTool.isEnabled()) {
@@ -76,6 +71,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 +122,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 +150,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 +166,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,40 +202,118 @@ 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 PenWidget extends ToolbarWidget {
@@ -279,84 +336,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 +493,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 +515,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 +559,11 @@ 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.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,10 @@
+import { ComponentBuilderFactory } from '../components/builders/types';
+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 makePenIcon: (tipThickness: number, color: string) => SVGSVGElement;
+export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;

package/dist/src/toolbar/icons.js

@@ -0,0 +1,180 @@
+import EventDispatcher from '../EventDispatcher';
+import { Vec2 } from '../geometry/Vec2';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import Viewport from '../Viewport';
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const primaryForegroundFill = `
+	style='fill: var(--primary-foreground-color);'
+`;
+const primaryForegroundStrokeFill = `
+	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+`;
+export const makeUndoIcon = () => {
+    return makeRedoIcon(true);
+};
+export const makeRedoIcon = (mirror = false) => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.innerHTML = `
+		<style>
+			.toolbar-svg-undo-redo-icon {
+				stroke: var(--primary-foreground-color);
+				stroke-width: 12;
+				stroke-linejoin: round;
+				stroke-linecap: round;
+				fill: none;
+
+				transform-origin: center;
+			}
+		</style>
+		<path
+			d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
+			class='toolbar-svg-undo-redo-icon'
+			style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeDropdownIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.innerHTML = `
+	<g>
+		<path
+			d='M5,10 L50,90 L95,10 Z'
+			${primaryForegroundFill}
+		/>
+	</g>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeEraserIcon = () => {
+    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;
+};
+export const makeSelectionIcon = () => {
+    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;
+};
+export const makeHandToolIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    // Draw a cursor-like shape
+    icon.innerHTML = `
+	<g>
+		<path d='
+			m 10,60
+			  5,30
+			H 90
+			V 30
+			C 90,20 75,20 75,30
+			V 60
+			  20
+			C 75,10 60,10 60,20
+			V 60
+			  15
+			C 60,5 45,5 45,15
+			V 60
+			  25
+			C 45,15 30,15 30,25
+			V 60
+			  75
+			L 25,60
+			C 20,45 10,50 10,60 
+			Z'
+			
+			fill='none'
+			style='
+				stroke: var(--primary-foreground-color);
+				stroke-width: 2;
+			'
+		/>
+	</g>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makePenIcon = (tipThickness, color) => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.setAttribute('viewBox', '0 0 100 100');
+    const halfThickness = tipThickness / 2;
+    // Draw a pen-like shape
+    const primaryStrokeTipPath = `M14,63 L${50 - halfThickness},95 L${50 + halfThickness},90 L88,60 Z`;
+    const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
+    icon.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 + halfThickness},80 L${50 - halfThickness},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}'
+			stroke='${color}'
+		/>
+	</g>
+	`;
+    return icon;
+};
+export const makeIconFromFactory = (pen, factory) => {
+    const toolThickness = pen.getThickness();
+    const nowTime = (new Date()).getTime();
+    const startPoint = {
+        pos: Vec2.of(10, 10),
+        width: toolThickness / 5,
+        color: pen.getColor(),
+        time: nowTime - 100,
+    };
+    const endPoint = {
+        pos: Vec2.of(90, 90),
+        width: toolThickness / 5,
+        color: pen.getColor(),
+        time: nowTime,
+    };
+    const viewport = new Viewport(new EventDispatcher());
+    const builder = factory(startPoint, viewport);
+    builder.addPoint(endPoint);
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.setAttribute('viewBox', '0 0 100 100');
+    viewport.updateScreenSize(Vec2.of(100, 100));
+    const renderer = new SVGRenderer(icon, viewport);
+    builder.preview(renderer);
+    return icon;
+};

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

@@ -1,4 +1,6 @@
 export interface ToolbarLocalization {
+    anyDevicePanning: string;
+    touchPanning: string;
     outlinedRectanglePen: string;
     filledRectanglePen: string;
     linePen: string;
@@ -9,7 +11,7 @@ export interface ToolbarLocalization {
     pen: string;
     eraser: string;
     select: string;
-    touchDrawing: string;
+    handTool: string;
     thicknessLabel: string;
     resizeImageToSelection: string;
     deleteSelection: string;
@@ -17,5 +19,6 @@ export interface ToolbarLocalization {
     redo: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
+    zoomLevel: (zoomPercentage: number) => string;
 }
 export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/src/toolbar/localization.js

@@ -2,7 +2,7 @@ export const defaultToolbarLocalization = {
     pen: 'Pen',
     eraser: 'Eraser',
     select: 'Select',
-    touchDrawing: 'Touch Drawing',
+    handTool: 'Pan',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
     resizeImageToSelection: 'Resize image to selection',
@@ -10,6 +10,8 @@ export const defaultToolbarLocalization = {
     undo: 'Undo',
     redo: 'Redo',
     selectObjectType: 'Object type: ',
+    touchPanning: 'Touchscreen panning',
+    anyDevicePanning: 'Any device panning',
     freehandPen: 'Freehand',
     arrowPen: 'Arrow',
     linePen: 'Line',
@@ -17,4 +19,5 @@ export const defaultToolbarLocalization = {
     filledRectanglePen: 'Filled rectangle',
     dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+    zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
 };

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

@@ -2,3 +2,7 @@ export declare enum ToolbarButtonType {
     ToggleButton = 0,
     ActionButton = 1
 }
+export interface ActionButtonIcon {
+    icon: Element;
+    label: string;
+}