js-draw 0.4.1 → 0.6.0

package/dist/src/toolbar/IconProvider.js

@@ -0,0 +1,415 @@
+import Color4 from '../Color4';
+import EventDispatcher from '../EventDispatcher';
+import { Vec2 } from '../math/Vec2';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import Viewport from '../Viewport';
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const iconColorFill = `
+	style='fill: var(--icon-color);'
+`;
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-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)';
+// Provides icons that can be used in the toolbar, etc.
+// Extend this class and override methods to customize icons.
+export default class IconProvider {
+    constructor() {
+        this.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(--icon-color)';
+                textNode.style.fontFamily = 'monospace';
+                icon.appendChild(textNode);
+            };
+            addTextNode('+', 40, 45);
+            addTextNode('-', 70, 75);
+            return icon;
+        };
+    }
+    makeUndoIcon() {
+        return this.makeRedoIcon(true);
+    }
+    // @param mirror - reflect across the x-axis @internal
+    // @returns a redo icon.
+    makeRedoIcon(mirror = false) {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.innerHTML = `
+			<style>
+				.toolbar-svg-undo-redo-icon {
+					stroke: var(--icon-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;
+    }
+    makeDropdownIcon() {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.innerHTML = `
+		<g>
+			<path
+				d='M5,10 L50,90 L95,10 Z'
+				${iconColorFill}
+			/>
+		</g>
+		`;
+        icon.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    }
+    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
+				${iconColorFill}
+			/>
+		</g>
+		`;
+        icon.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    }
+    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;
+    }
+    makeIconFromPath(pathData, fill = 'var(--icon-color)', strokeColor = 'none', strokeWidth = '0px') {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        const path = document.createElementNS(svgNamespace, 'path');
+        path.setAttribute('d', pathData);
+        path.style.fill = fill;
+        path.style.stroke = strokeColor;
+        path.style.strokeWidth = strokeWidth;
+        icon.appendChild(path);
+        icon.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    }
+    makeHandToolIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        const strokeWidth = '3';
+        // Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+        return this.makeIconFromPath(`
+			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, strokeColor, strokeWidth);
+    }
+    makeTouchPanningIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        const strokeWidth = '3';
+        return this.makeIconFromPath(`
+			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, strokeColor, strokeWidth);
+    }
+    makeAllDevicePanningIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        const strokeWidth = '3';
+        return this.makeIconFromPath(`
+			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, strokeColor, strokeWidth);
+    }
+    makeTextIcon(textStyle) {
+        var _a, _b;
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.setAttribute('viewBox', '0 0 100 100');
+        const textNode = document.createElementNS(svgNamespace, 'text');
+        textNode.appendChild(document.createTextNode('T'));
+        textNode.style.fontFamily = textStyle.fontFamily;
+        textNode.style.fontWeight = (_a = textStyle.fontWeight) !== null && _a !== void 0 ? _a : '';
+        textNode.style.fontVariant = (_b = textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+        textNode.style.fill = textStyle.renderingStyle.fill.toHexString();
+        textNode.style.textAnchor = 'middle';
+        textNode.setAttribute('x', '50');
+        textNode.setAttribute('y', '75');
+        textNode.style.fontSize = '65px';
+        textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
+        icon.appendChild(textNode);
+        return icon;
+    }
+    makePenIcon(tipThickness, color) {
+        if (color instanceof Color4) {
+            color = color.toHexString();
+        }
+        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>
+			${checkerboardPatternDef}
+		</defs>
+		<g>
+			<!-- Pen grip -->
+			<path
+				d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
+				${iconColorStrokeFill}
+			/>
+		</g>
+		<g>
+			<!-- Checkerboard background for slightly transparent pens -->
+			<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
+	
+			<!-- Actual pen tip -->
+			<path
+				d='${primaryStrokeTipPath}'
+				fill='${color}'
+				stroke='${color}'
+			/>
+		</g>
+		`;
+        return icon;
+    }
+    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;
+    }
+    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(--icon-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;
+    }
+    makeResizeViewportIcon() {
+        return this.makeIconFromPath(`
+			M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z
+			M 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z
+			M 84 15 82 17 81 16 81 20 85 20 84 19 86 17 84 15 z
+			M 26 24 24 26 26 28 25 29 29 29 29 25 28 26 26 24 z
+			M 25 71 26 72 24 74 26 76 28 74 29 75 29 71 25 71 z
+			M 15 75 15 85 25 85 25 80 20 80 20 75 15 75 z
+			M 90 75 90 90 75 90 75 95 95 95 95 75 90 75 z
+			M 81 81 81 85 82 84 84 86 86 84 84 82 85 81 81 81 z
+		`);
+    }
+    makeDuplicateSelectionIcon() {
+        return this.makeIconFromPath(`
+			M 45,10 45,55 90,55 90,10 45,10 z
+			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+		`);
+    }
+    makeDeleteSelectionIcon() {
+        const strokeWidth = '5px';
+        const strokeColor = 'var(--icon-color)';
+        const fillColor = 'none';
+        return this.makeIconFromPath(`
+			M 10,10 90,90
+			M 10,90 90,10
+		`, fillColor, strokeColor, strokeWidth);
+    }
+    makeSaveIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.innerHTML = `
+			<style>
+				.toolbar-save-icon {
+					stroke: var(--icon-color);
+					stroke-width: 10;
+					stroke-linejoin: round;
+					stroke-linecap: round;
+					fill: none;
+				}
+			</style>
+			<path
+				d='
+					M 15,55 30,70 85,20
+				'
+				class='toolbar-save-icon'
+			/>
+		`;
+        svg.setAttribute('viewBox', '0 0 100 100');
+        return svg;
+    }
+}

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

@@ -1,3 +1,3 @@
 export * from './widgets/lib';
-export * as icons from './icons';
 export * from './makeColorInput';
+export { default as IconProvider } from './IconProvider';

package/dist/src/toolbar/lib.js

@@ -1,4 +1,3 @@
 export * from './widgets/lib';
-import * as icons_1 from './icons';
-export { icons_1 as icons };
 export * from './makeColorInput';
+export { default as IconProvider } from './IconProvider';

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

@@ -1,6 +1,5 @@
 export interface ToolbarLocalization {
     fontLabel: string;
-    anyDevicePanning: string;
     touchPanning: string;
     outlinedRectanglePen: string;
     filledRectanglePen: string;

package/dist/src/toolbar/localization.js

@@ -18,7 +18,6 @@ export const defaultToolbarLocalization = {
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     touchPanning: 'Touchscreen panning',
-    anyDevicePanning: 'Any device panning',
     freehandPen: 'Freehand',
     arrowPen: 'Arrow',
     linePen: 'Line',

package/dist/src/toolbar/makeColorInput.js

@@ -1,7 +1,6 @@
 import Color4 from '../Color4';
 import PipetteTool from '../tools/PipetteTool';
 import { EditorEventType } from '../types';
-import { makePipetteIcon } from './icons';
 // Returns [ color input, input container ].
 export const makeColorInput = (editor, onColorChange) => {
     const colorInputContainer = document.createElement('span');
@@ -56,7 +55,7 @@ const addPipetteTool = (editor, container, onColorChange) => {
     pipetteButton.title = editor.localization.pickColorFromScreen;
     pipetteButton.setAttribute('alt', pipetteButton.title);
     const updatePipetteIcon = (color) => {
-        pipetteButton.replaceChildren(makePipetteIcon(color));
+        pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
     };
     updatePipetteIcon();
     const pipetteTool = editor.toolController.getMatchingTools(PipetteTool)[0];

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

@@ -1,4 +1,5 @@
 import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 export default abstract class BaseWidget {
     #private;
@@ -18,6 +19,7 @@ export default abstract class BaseWidget {
     protected abstract createIcon(): Element;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected setupActionBtnClickListener(button: HTMLElement): void;
+    protected onKeyPress(_event: KeyPressEvent): boolean;
     protected abstract handleClick(): void;
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;

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

@@ -10,9 +10,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
+import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
 import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeDropdownIcon } from '../icons';
 export default class BaseWidget {
     constructor(editor, localizationTable) {
         this.editor = editor;
@@ -33,6 +33,12 @@ export default class BaseWidget {
         this.label = document.createElement('label');
         this.button.setAttribute('role', 'button');
         this.button.tabIndex = 0;
+        const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+        // If the onKeyPress function has been extended and the editor is configured to send keypress events to
+        // toolbar widgets,
+        if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+            toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
+        }
     }
     // Add content to the widget's associated dropdown menu.
     // Returns true if such a menu should be created, false otherwise.
@@ -62,6 +68,7 @@ export default class BaseWidget {
                     kind: InputEvtType.KeyPressEvent,
                     key: evt.key,
                     ctrlKey: evt.ctrlKey,
+                    altKey: evt.altKey,
                 });
             }
         };
@@ -73,6 +80,7 @@ export default class BaseWidget {
                 kind: InputEvtType.KeyUpEvent,
                 key: evt.key,
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             });
         };
         button.onclick = () => {
@@ -81,6 +89,12 @@ export default class BaseWidget {
             }
         };
     }
+    // Add a listener that is triggered when a key is pressed.
+    // Listeners will fire regardless of whether this widget is selected and require that
+    // {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+    onKeyPress(_event) {
+        return false;
+    }
     get hasDropdown() {
         return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
     }
@@ -191,7 +205,7 @@ export default class BaseWidget {
         return this.container.classList.contains('selected');
     }
     createDropdownIcon() {
-        const icon = makeDropdownIcon();
+        const icon = this.editor.icons.makeDropdownIcon();
         icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
         return icon;
     }

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

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

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

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

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

@@ -1,9 +1,8 @@
 import Mat33 from '../../math/Mat33';
-import { PanZoomMode } from '../../tools/PanZoom';
+import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
 import { EditorEventType } from '../../types';
 import Viewport from '../../Viewport';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeAllDevicePanningIcon, makeHandToolIcon, makeTouchPanningIcon, makeZoomIcon } from '../icons';
 import BaseToolWidget from './BaseToolWidget';
 import BaseWidget from './BaseWidget';
 const makeZoomControl = (localizationTable, editor) => {
@@ -66,7 +65,7 @@ class ZoomWidget extends BaseWidget {
         return this.localizationTable.zoom;
     }
     createIcon() {
-        return makeZoomIcon();
+        return this.editor.icons.makeZoomIcon();
     }
     handleClick() {
         this.setDropdownVisible(!this.isDropdownVisible());
@@ -117,24 +116,48 @@ class HandModeWidget extends BaseWidget {
     }
 }
 export default class HandToolWidget extends BaseToolWidget {
-    constructor(editor, tool, localizationTable) {
+    constructor(editor, 
+    // Pan zoom tool that overrides all other tools (enabling this tool for a device
+    // causes that device to pan/zoom instead of interact with the primary tools)
+    overridePanZoomTool, localizationTable) {
+        const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
+        const tool = primaryHandTool !== null && primaryHandTool !== void 0 ? primaryHandTool : overridePanZoomTool;
         super(editor, tool, localizationTable);
-        this.tool = tool;
-        this.container.classList.add('dropdownShowable');
-        this.touchPanningWidget = new HandModeWidget(editor, localizationTable, tool, PanZoomMode.OneFingerTouchGestures, makeTouchPanningIcon, localizationTable.touchPanning);
+        this.overridePanZoomTool = overridePanZoomTool;
+        // Only allow toggling a hand tool if we're using the primary hand tool and not the override
+        // hand tool for this button.
+        this.allowTogglingBaseTool = primaryHandTool !== null;
+        // Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
+        if (!this.allowTogglingBaseTool) {
+            this.container.classList.add('dropdownShowable');
+        }
+        // Controls for the overriding hand tool.
+        this.touchPanningWidget = new HandModeWidget(editor, localizationTable, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning);
         this.addSubWidget(this.touchPanningWidget);
-        this.addSubWidget(new HandModeWidget(editor, localizationTable, tool, PanZoomMode.SinglePointerGestures, makeAllDevicePanningIcon, localizationTable.anyDevicePanning));
         this.addSubWidget(new ZoomWidget(editor, localizationTable));
     }
+    static getPrimaryHandTool(toolController) {
+        const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom);
+        const primaryPanZoomTool = primaryPanZoomToolList[0];
+        return primaryPanZoomTool;
+    }
     getTitle() {
         return this.localizationTable.handTool;
     }
     createIcon() {
-        return makeHandToolIcon();
-    }
-    setSelected(_selected) {
+        return this.editor.icons.makeHandToolIcon();
     }
     handleClick() {
-        this.setDropdownVisible(!this.isDropdownVisible());
+        if (this.allowTogglingBaseTool) {
+            super.handleClick();
+        }
+        else {
+            this.setDropdownVisible(!this.isDropdownVisible());
+        }
+    }
+    setSelected(selected) {
+        if (this.allowTogglingBaseTool) {
+            super.setSelected(selected);
+        }
     }
 }

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

@@ -1,6 +1,7 @@
 import { ComponentBuilderFactory } from '../../components/builders/types';
 import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export interface PenTypeRecord {
@@ -16,4 +17,5 @@ export default class PenToolWidget extends BaseToolWidget {
     protected createIcon(): Element;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected onKeyPress(event: KeyPressEvent): boolean;
 }