js-draw 0.1.6 → 0.1.9

package/dist/src/toolbar/icons.js

@@ -9,6 +9,20 @@ const primaryForegroundFill = `
 const primaryForegroundStrokeFill = `
 	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
 `;
+const checkerboardPatternDef = `
+	<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>
+`;
+const checkerboardPatternRef = 'url(#checkerboard)';
 export const makeUndoIcon = () => {
     return makeRedoIcon(true);
 };
@@ -76,7 +90,7 @@ export const makeSelectionIcon = () => {
 };
 export const makeHandToolIcon = () => {
     const icon = document.createElementNS(svgNamespace, 'svg');
-    // Draw a cursor-like shape
+    // Draw a cursor-like shape (like some of the other icons, made with Inkscape)
     icon.innerHTML = `
 	<g>
 		<path d='
@@ -111,6 +125,130 @@ export const makeHandToolIcon = () => {
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
+export const makeTouchPanningIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.innerHTML = `
+		<path
+			d='
+				M 5,5.5
+				V 17.2
+				L 16.25,5.46
+				Z
+
+				m 33.75,0
+				L 50,17
+				V 5.5
+				Z
+
+				M 5,40.7
+				v 11.7
+				h 11.25
+				z
+				
+				M 26,19
+				C 19.8,19.4 17.65,30.4 21.9,34.8
+				L 50,70
+				H 27.5
+				c -11.25,0 -11.25,17.6 0,17.6
+				H 61.25
+				C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
+				L 33.1,23
+				C 30.3125,20.128192 27.9,19 25.830078,19.119756
+				Z
+			'
+			fill='none'
+			style='
+				stroke: var(--primary-foreground-color);
+				stroke-width: 2;
+			'
+		/>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeAllDevicePanningIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.innerHTML = `
+		<path
+			d='
+				M 5 5
+				L 5 17.5
+				  17.5 5
+				  5 5
+				z
+				
+				M 42.5 5
+				L 55 17.5
+				  55 5
+				  42.5 5
+				z
+				
+				M 70 10
+				L 70 21
+				  61 15
+			      55.5 23
+			      66 30
+				  56 37
+				  61 45
+				  70 39
+				  70 50
+				  80 50
+				  80 39
+				  89 45
+				  95 36
+				  84 30
+				  95 23
+				  89 15
+				  80 21
+				  80 10
+				  70 10
+				z
+
+				M 27.5 26.25
+				L 27.5 91.25
+				L 43.75 83.125
+				L 52 99
+				L 68 91
+				L 60 75
+				L 76.25 66.875
+				L 27.5 26.25
+				z
+				
+				M 5 42.5
+				L 5 55
+				L 17.5 55
+				L 5 42.5
+				z 
+			'
+			fill='none'
+			style='
+				stroke: var(--primary-foreground-color);
+				stroke-width: 2;
+			'
+		/>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeZoomIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.setAttribute('viewBox', '0 0 100 100');
+    const addTextNode = (text, x, y) => {
+        const textNode = document.createElementNS(svgNamespace, 'text');
+        textNode.appendChild(document.createTextNode(text));
+        textNode.setAttribute('x', x.toString());
+        textNode.setAttribute('y', y.toString());
+        textNode.style.textAlign = 'center';
+        textNode.style.textAnchor = 'middle';
+        textNode.style.fontSize = '55px';
+        textNode.style.fill = 'var(--primary-foreground-color)';
+        textNode.style.fontFamily = 'monospace';
+        icon.appendChild(textNode);
+    };
+    addTextNode('+', 40, 45);
+    addTextNode('-', 70, 75);
+    return icon;
+};
 export const makeTextIcon = (textStyle) => {
     var _a, _b;
     const icon = document.createElementNS(svgNamespace, 'svg');
@@ -138,17 +276,7 @@ export const makePenIcon = (tipThickness, color) => {
     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>
+		${checkerboardPatternDef}
 	</defs>
 	<g>
 		<!-- Pen grip -->
@@ -159,7 +287,7 @@ export const makePenIcon = (tipThickness, color) => {
 	</g>
 	<g>
 		<!-- Checkerboard background for slightly transparent pens -->
-		<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
+		<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
 
 		<!-- Actual pen tip -->
 		<path
@@ -196,3 +324,48 @@ export const makeIconFromFactory = (pen, factory) => {
     builder.preview(renderer);
     return icon;
 };
+export const makePipetteIcon = (color) => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    const pipette = document.createElementNS(svgNamespace, 'path');
+    pipette.setAttribute('d', `
+		M 47,6
+		C 35,5 25,15 35,30
+		c -9.2,1.3 -15,0 -15,3
+			0,2 5,5 15,7
+		V 81
+		L 40,90
+		h 6
+		L 40,80
+		V 40
+		h 15
+		v 40
+		l -6,10
+		h 6
+		l 5,-9.2
+		V 40
+		C 70,38 75,35 75,33
+			75,30 69.2,31.2 60,30
+			65,15 65,5      47,6
+		Z
+	`);
+    pipette.style.fill = 'var(--primary-foreground-color)';
+    if (color) {
+        const defs = document.createElementNS(svgNamespace, 'defs');
+        defs.innerHTML = checkerboardPatternDef;
+        icon.appendChild(defs);
+        const fluidBackground = document.createElementNS(svgNamespace, 'path');
+        const fluid = document.createElementNS(svgNamespace, 'path');
+        const fluidPathData = `
+			m 40,50 c 5,5 10,0 15,-5 V 80 L 50,90 H 45 L 40,80 Z
+		`;
+        fluid.setAttribute('d', fluidPathData);
+        fluidBackground.setAttribute('d', fluidPathData);
+        fluid.style.fill = color.toHexString();
+        fluidBackground.style.fill = checkerboardPatternRef;
+        icon.appendChild(fluidBackground);
+        icon.appendChild(fluid);
+    }
+    icon.appendChild(pipette);
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};

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

@@ -16,10 +16,14 @@ export interface ToolbarLocalization {
     thicknessLabel: string;
     resizeImageToSelection: string;
     deleteSelection: string;
+    duplicateSelection: string;
+    pickColorFronScreen: string;
     undo: string;
     redo: string;
+    zoom: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;
+    colorChangedAnnouncement: (color: string) => string;
 }
 export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/src/toolbar/localization.js

@@ -3,14 +3,17 @@ export const defaultToolbarLocalization = {
     eraser: 'Eraser',
     select: 'Select',
     handTool: 'Pan',
+    zoom: 'Zoom',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
     fontLabel: 'Font: ',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
+    duplicateSelection: 'Duplicate selection',
     undo: 'Undo',
     redo: 'Redo',
     selectObjectType: 'Object type: ',
+    pickColorFronScreen: 'Pick color from screen',
     touchPanning: 'Touchscreen panning',
     anyDevicePanning: 'Any device panning',
     freehandPen: 'Freehand',
@@ -21,4 +24,5 @@ export const defaultToolbarLocalization = {
     dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
+    colorChangedAnnouncement: (color) => `Color changed to ${color}`,
 };

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

@@ -0,0 +1,5 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+declare type OnColorChangeListener = (color: Color4) => void;
+export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement];
+export default makeColorInput;

package/dist/src/toolbar/makeColorInput.js

@@ -0,0 +1,95 @@
+import Color4 from '../Color4';
+import { ToolType } from '../tools/ToolController';
+import { EditorEventType } from '../types';
+import { makePipetteIcon } from './icons';
+// Returns [ input, container ].
+export const makeColorInput = (editor, onColorChange) => {
+    const colorInputContainer = document.createElement('span');
+    const colorInput = document.createElement('input');
+    colorInput.type = 'button';
+    colorInput.classList.add('coloris_input');
+    colorInputContainer.classList.add('color-input-container');
+    colorInputContainer.appendChild(colorInput);
+    addPipetteTool(editor, colorInputContainer, (color) => {
+        colorInput.value = color.toHexString();
+        onInputEnd();
+        // Update the color preview, if it exists (may be managed by Coloris).
+        const parentElem = colorInput.parentElement;
+        if (parentElem && parentElem.classList.contains('clr-field')) {
+            parentElem.style.color = colorInput.value;
+        }
+    });
+    let currentColor;
+    const handleColorInput = () => {
+        currentColor = Color4.fromHex(colorInput.value);
+    };
+    const onInputEnd = () => {
+        handleColorInput();
+        if (currentColor) {
+            editor.announceForAccessibility(editor.localization.colorChangedAnnouncement(currentColor.toHexString()));
+            onColorChange(currentColor);
+            editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
+                kind: EditorEventType.ColorPickerColorSelected,
+                color: currentColor,
+            });
+        }
+    };
+    colorInput.oninput = handleColorInput;
+    colorInput.addEventListener('open', () => {
+        editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+            kind: EditorEventType.ColorPickerToggled,
+            open: true,
+        });
+    });
+    colorInput.addEventListener('close', () => {
+        editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+            kind: EditorEventType.ColorPickerToggled,
+            open: false,
+        });
+        onInputEnd();
+    });
+    return [colorInput, colorInputContainer];
+};
+const addPipetteTool = (editor, container, onColorChange) => {
+    const pipetteButton = document.createElement('button');
+    pipetteButton.classList.add('pipetteButton');
+    pipetteButton.title = editor.localization.pickColorFronScreen;
+    pipetteButton.setAttribute('alt', pipetteButton.title);
+    const updatePipetteIcon = (color) => {
+        pipetteButton.replaceChildren(makePipetteIcon(color));
+    };
+    updatePipetteIcon();
+    const pipetteTool = editor.toolController.getMatchingTools(ToolType.Pipette)[0];
+    const endColorSelectMode = () => {
+        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.clearColorListener();
+        updatePipetteIcon();
+        pipetteButton.classList.remove('active');
+    };
+    const pipetteColorSelect = (color) => {
+        endColorSelectMode();
+        if (color) {
+            onColorChange(color);
+        }
+    };
+    const pipetteColorPreview = (color) => {
+        if (color) {
+            updatePipetteIcon(color);
+        }
+        else {
+            updatePipetteIcon();
+        }
+    };
+    pipetteButton.onclick = () => {
+        // If already picking, cancel it.
+        if (pipetteButton.classList.contains('active')) {
+            endColorSelectMode();
+            return;
+        }
+        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);
+        if (pipetteTool) {
+            pipetteButton.classList.add('active');
+        }
+    };
+    container.appendChild(pipetteButton);
+};
+export default makeColorInput;

package/dist/src/toolbar/widgets/BaseToolWidget.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default abstract class BaseToolWidget extends BaseWidget {
+    protected editor: Editor;
+    protected targetTool: BaseTool;
+    protected localizationTable: ToolbarLocalization;
+    constructor(editor: Editor, targetTool: BaseTool, localizationTable: ToolbarLocalization);
+    protected handleClick(): void;
+    addTo(parent: HTMLElement): void;
+}

package/dist/src/toolbar/widgets/BaseToolWidget.js

@@ -0,0 +1,44 @@
+import { EditorEventType } from '../../types';
+import BaseWidget from './BaseWidget';
+export default class BaseToolWidget extends BaseWidget {
+    constructor(editor, targetTool, localizationTable) {
+        super(editor, localizationTable);
+        this.editor = editor;
+        this.targetTool = targetTool;
+        this.localizationTable = localizationTable;
+        editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolEnabled) {
+                throw new Error('Incorrect event type! (Expected ToolEnabled)');
+            }
+            if (toolEvt.tool === targetTool) {
+                this.setSelected(true);
+            }
+        });
+        editor.notifier.on(EditorEventType.ToolDisabled, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolDisabled) {
+                throw new Error('Incorrect event type! (Expected ToolDisabled)');
+            }
+            if (toolEvt.tool === targetTool) {
+                this.setSelected(false);
+                this.setDropdownVisible(false);
+            }
+        });
+    }
+    handleClick() {
+        if (this.hasDropdown) {
+            if (!this.targetTool.isEnabled()) {
+                this.targetTool.setEnabled(true);
+            }
+            else {
+                this.setDropdownVisible(!this.isDropdownVisible());
+            }
+        }
+        else {
+            this.targetTool.setEnabled(!this.targetTool.isEnabled());
+        }
+    }
+    addTo(parent) {
+        super.addTo(parent);
+        this.setSelected(this.targetTool.isEnabled());
+    }
+}

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

@@ -0,0 +1,32 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+export default abstract class BaseWidget {
+    #private;
+    protected editor: Editor;
+    protected localizationTable: ToolbarLocalization;
+    protected readonly container: HTMLElement;
+    private button;
+    private icon;
+    private dropdownContainer;
+    private dropdownIcon;
+    private label;
+    private disabled;
+    private subWidgets;
+    constructor(editor: Editor, localizationTable: ToolbarLocalization);
+    protected abstract getTitle(): string;
+    protected abstract createIcon(): Element;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected setupActionBtnClickListener(button: HTMLElement): void;
+    protected abstract handleClick(): void;
+    protected get hasDropdown(): boolean;
+    protected addSubWidget(widget: BaseWidget): void;
+    addTo(parent: HTMLElement): void;
+    protected updateIcon(): void;
+    setDisabled(disabled: boolean): void;
+    setSelected(selected: boolean): void;
+    protected setDropdownVisible(visible: boolean): void;
+    protected repositionDropdown(): void;
+    protected isDropdownVisible(): boolean;
+    protected isSelected(): boolean;
+    private createDropdownIcon;
+}

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

@@ -0,0 +1,148 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _BaseWidget_hasDropdown;
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeDropdownIcon } from '../icons';
+export default class BaseWidget {
+    constructor(editor, localizationTable) {
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        _BaseWidget_hasDropdown.set(this, void 0);
+        this.disabled = false;
+        this.subWidgets = [];
+        this.icon = null;
+        this.container = document.createElement('div');
+        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
+        this.dropdownContainer = document.createElement('div');
+        this.dropdownContainer.classList.add(`${toolbarCSSPrefix}dropdown`);
+        this.dropdownContainer.classList.add('hidden');
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
+        this.button = document.createElement('div');
+        this.button.classList.add(`${toolbarCSSPrefix}button`);
+        this.label = document.createElement('label');
+        this.button.setAttribute('role', 'button');
+        this.button.tabIndex = 0;
+    }
+    // Add content to the widget's associated dropdown menu.
+    // Returns true if such a menu should be created, false otherwise.
+    fillDropdown(dropdown) {
+        if (this.subWidgets.length === 0) {
+            return false;
+        }
+        for (const widget of this.subWidgets) {
+            widget.addTo(dropdown);
+        }
+        return true;
+    }
+    setupActionBtnClickListener(button) {
+        button.onclick = () => {
+            if (!this.disabled) {
+                this.handleClick();
+            }
+        };
+    }
+    get hasDropdown() {
+        return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
+    }
+    // Add a widget to this' dropdown. Must be called before this.addTo.
+    addSubWidget(widget) {
+        this.subWidgets.push(widget);
+    }
+    // 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.button.replaceChildren(this.icon, this.label);
+        this.container.appendChild(this.button);
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContainer), "f");
+        if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
+            this.dropdownIcon = this.createDropdownIcon();
+            this.button.appendChild(this.dropdownIcon);
+            this.container.appendChild(this.dropdownContainer);
+        }
+        this.setDropdownVisible(false);
+        parent.appendChild(this.container);
+    }
+    updateIcon() {
+        var _a;
+        const newIcon = this.createIcon();
+        (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
+        this.icon = newIcon;
+        this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+    }
+    setDisabled(disabled) {
+        this.disabled = disabled;
+        if (this.disabled) {
+            this.button.classList.add('disabled');
+        }
+        else {
+            this.button.classList.remove('disabled');
+        }
+    }
+    setSelected(selected) {
+        const currentlySelected = this.isSelected();
+        if (currentlySelected === selected) {
+            return;
+        }
+        if (selected) {
+            this.container.classList.add('selected');
+            this.button.ariaSelected = 'true';
+        }
+        else {
+            this.container.classList.remove('selected');
+            this.button.ariaSelected = 'false';
+        }
+    }
+    setDropdownVisible(visible) {
+        const currentlyVisible = this.container.classList.contains('dropdownVisible');
+        if (currentlyVisible === visible) {
+            return;
+        }
+        if (visible) {
+            this.dropdownContainer.classList.remove('hidden');
+            this.container.classList.add('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownShown(this.getTitle()));
+        }
+        else {
+            this.dropdownContainer.classList.add('hidden');
+            this.container.classList.remove('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
+        }
+        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');
+    }
+    isSelected() {
+        return this.container.classList.contains('selected');
+    }
+    createDropdownIcon() {
+        const icon = makeDropdownIcon();
+        icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
+        return icon;
+    }
+}
+_BaseWidget_hasDropdown = new WeakMap();

package/dist/src/toolbar/widgets/EraserWidget.d.ts

@@ -0,0 +1,6 @@
+import BaseToolWidget from './BaseToolWidget';
+export default class EraserWidget extends BaseToolWidget {
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    protected fillDropdown(_dropdown: HTMLElement): boolean;
+}

package/dist/src/toolbar/widgets/EraserWidget.js

@@ -0,0 +1,14 @@
+import { makeEraserIcon } from '../icons';
+import BaseToolWidget from './BaseToolWidget';
+export default class EraserWidget extends BaseToolWidget {
+    getTitle() {
+        return this.localizationTable.eraser;
+    }
+    createIcon() {
+        return makeEraserIcon();
+    }
+    fillDropdown(_dropdown) {
+        // No dropdown associated with the eraser
+        return false;
+    }
+}

package/dist/src/toolbar/widgets/HandToolWidget.d.ts

@@ -0,0 +1,13 @@
+import Editor from '../../Editor';
+import PanZoom from '../../tools/PanZoom';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+export default class HandToolWidget extends BaseToolWidget {
+    protected tool: PanZoom;
+    private touchPanningWidget;
+    constructor(editor: Editor, tool: PanZoom, localizationTable: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    setSelected(_selected: boolean): void;
+    protected handleClick(): void;
+}