js-draw 0.5.0 → 0.7.0

package/dist/src/toolbar/IconProvider.js

@@ -0,0 +1,417 @@
+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 {
+    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;
+    }
+    /**
+     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+     */
+    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);
+    }
+    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;
+    }
+    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.js

@@ -13,7 +13,6 @@ 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;
@@ -206,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.js

@@ -4,7 +4,6 @@ import { makeLineBuilder } from '../../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeIconFromFactory, makePenIcon } from '../icons';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 export default class PenToolWidget extends BaseToolWidget {
@@ -55,11 +54,11 @@ export default class PenToolWidget extends BaseToolWidget {
             // 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());
+            return this.editor.icons.makePenIcon(scale, color.toHexString());
         }
         else {
             const strokeFactory = this.tool.getStrokeFactory();
-            return makeIconFromFactory(this.tool, strokeFactory);
+            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
         }
     }
     fillDropdown(dropdown) {
@@ -78,12 +77,15 @@ export default class PenToolWidget extends BaseToolWidget {
         thicknessLabel.setAttribute('for', thicknessInput.id);
         objectSelectLabel.innerText = this.localizationTable.selectObjectType;
         objectSelectLabel.setAttribute('for', objectTypeSelect.id);
+        // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+        const inverseThicknessInputFn = (t) => Math.log10(t);
+        const thicknessInputFn = (t) => Math.pow(10, t);
         thicknessInput.type = 'range';
-        thicknessInput.min = '2';
-        thicknessInput.max = '20';
-        thicknessInput.step = '1';
+        thicknessInput.min = `${inverseThicknessInputFn(2)}`;
+        thicknessInput.max = `${inverseThicknessInputFn(400)}`;
+        thicknessInput.step = '0.1';
         thicknessInput.oninput = () => {
-            this.tool.setThickness(Math.pow(parseFloat(thicknessInput.value), 2));
+            this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
         };
         thicknessRow.appendChild(thicknessLabel);
         thicknessRow.appendChild(thicknessInput);
@@ -109,7 +111,7 @@ export default class PenToolWidget extends BaseToolWidget {
         colorRow.appendChild(colorInputContainer);
         this.updateInputs = () => {
             colorInput.value = this.tool.getColor().toHexString();
-            thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+            thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
             objectTypeSelect.replaceChildren();
             for (let i = 0; i < this.penTypes.length; i++) {
                 const penType = this.penTypes[i];

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

@@ -1,10 +1,13 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
     constructor(editor: Editor, tool: SelectionTool, localization: ToolbarLocalization);
+    private resizeImageToSelection;
+    protected onKeyPress(event: KeyPressEvent): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
 }