js-draw 0.1.6 → 0.1.9

package/dist/src/toolbar/HTMLToolbar.js

@@ -5,503 +5,16 @@ import Color4 from '../Color4';
 import Pen from '../tools/Pen';
 import Eraser from '../tools/Eraser';
 import SelectionTool from '../tools/SelectionTool';
-import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
-import { makeLineBuilder } from '../components/builders/LineBuilder';
-import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 import { defaultToolbarLocalization } from './localization';
-import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon, makeTextIcon } from './icons';
-import PanZoom, { PanZoomMode } from '../tools/PanZoom';
-import Mat33 from '../geometry/Mat33';
-import Viewport from '../Viewport';
+import { makeRedoIcon, makeUndoIcon } from './icons';
+import PanZoom from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
-const toolbarCSSPrefix = 'toolbar-';
-class ToolbarWidget {
-    constructor(editor, targetTool, localizationTable) {
-        this.editor = editor;
-        this.targetTool = targetTool;
-        this.localizationTable = localizationTable;
-        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');
-        this.hasDropdown = false;
-        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;
-        editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
-            if (toolEvt.kind !== EditorEventType.ToolEnabled) {
-                throw new Error('Incorrect event type! (Expected ToolEnabled)');
-            }
-            if (toolEvt.tool === targetTool) {
-                this.updateSelected(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.updateSelected(false);
-                this.setDropdownVisible(false);
-            }
-        });
-    }
-    setupActionBtnClickListener(button) {
-        button.onclick = () => {
-            this.handleClick();
-        };
-    }
-    handleClick() {
-        if (this.hasDropdown) {
-            if (!this.targetTool.isEnabled()) {
-                this.targetTool.setEnabled(true);
-            }
-            else {
-                this.setDropdownVisible(!this.isDropdownVisible());
-            }
-        }
-        else {
-            this.targetTool.setEnabled(!this.targetTool.isEnabled());
-        }
-    }
-    // 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());
-        this.button.replaceChildren(this.icon, this.label);
-        this.container.appendChild(this.button);
-        this.hasDropdown = this.fillDropdown(this.dropdownContainer);
-        if (this.hasDropdown) {
-            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`);
-    }
-    updateSelected(selected) {
-        const currentlySelected = this.container.classList.contains('selected');
-        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.targetTool.description));
-        }
-        else {
-            this.dropdownContainer.classList.add('hidden');
-            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 = makeDropdownIcon();
-        icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
-        return icon;
-    }
-}
-class EraserWidget extends ToolbarWidget {
-    getTitle() {
-        return this.localizationTable.eraser;
-    }
-    createIcon() {
-        return makeEraserIcon();
-    }
-    fillDropdown(_dropdown) {
-        // No dropdown associated with the eraser
-        return false;
-    }
-}
-class SelectionWidget extends ToolbarWidget {
-    constructor(editor, tool, localization) {
-        super(editor, tool, localization);
-        this.tool = tool;
-    }
-    getTitle() {
-        return this.localizationTable.select;
-    }
-    createIcon() {
-        return makeSelectionIcon();
-    }
-    fillDropdown(dropdown) {
-        const container = document.createElement('div');
-        const resizeButton = document.createElement('button');
-        const deleteButton = document.createElement('button');
-        resizeButton.innerText = this.localizationTable.resizeImageToSelection;
-        resizeButton.disabled = true;
-        deleteButton.innerText = this.localizationTable.deleteSelection;
-        deleteButton.disabled = true;
-        resizeButton.onclick = () => {
-            const selection = this.tool.getSelection();
-            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
-        };
-        deleteButton.onclick = () => {
-            const selection = this.tool.getSelection();
-            this.editor.dispatch(selection.deleteSelectedObjects());
-            this.tool.clearSelection();
-        };
-        // Enable/disable actions based on whether items are selected
-        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
-            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
-                throw new Error('Invalid event type!');
-            }
-            if (toolEvt.tool === this.tool) {
-                const selection = this.tool.getSelection();
-                const hasSelection = selection && selection.region.area > 0;
-                resizeButton.disabled = !hasSelection;
-                deleteButton.disabled = resizeButton.disabled;
-            }
-        });
-        container.replaceChildren(resizeButton, deleteButton);
-        dropdown.appendChild(container);
-        return true;
-    }
-}
-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.handTool;
-    }
-    createIcon() {
-        return makeHandToolIcon();
-    }
-    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) {
-    }
-    handleClick() {
-        this.setDropdownVisible(!this.isDropdownVisible());
-    }
-}
-class TextToolWidget extends ToolbarWidget {
-    constructor(editor, tool, localization) {
-        super(editor, tool, localization);
-        this.tool = tool;
-        this.updateDropdownInputs = null;
-        editor.notifier.on(EditorEventType.ToolUpdated, evt => {
-            var _a;
-            if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
-                this.updateIcon();
-                (_a = this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(this);
-            }
-        });
-    }
-    getTitle() {
-        return this.targetTool.description;
-    }
-    createIcon() {
-        const textStyle = this.tool.getTextStyle();
-        return makeTextIcon(textStyle);
-    }
-    fillDropdown(dropdown) {
-        const fontRow = document.createElement('div');
-        const colorRow = document.createElement('div');
-        const fontInput = document.createElement('select');
-        const fontLabel = document.createElement('label');
-        const colorInput = document.createElement('input');
-        const colorLabel = document.createElement('label');
-        const fontsInInput = new Set();
-        const addFontToInput = (fontName) => {
-            const option = document.createElement('option');
-            option.value = fontName;
-            option.textContent = fontName;
-            fontInput.appendChild(option);
-            fontsInInput.add(fontName);
-        };
-        fontLabel.innerText = this.localizationTable.fontLabel;
-        colorLabel.innerText = this.localizationTable.colorLabel;
-        colorInput.classList.add('coloris_input');
-        colorInput.type = 'button';
-        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
-        colorLabel.setAttribute('for', colorInput.id);
-        addFontToInput('monospace');
-        addFontToInput('serif');
-        addFontToInput('sans-serif');
-        fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
-        fontLabel.setAttribute('for', fontInput.id);
-        fontInput.onchange = () => {
-            this.tool.setFontFamily(fontInput.value);
-        };
-        colorInput.oninput = () => {
-            this.tool.setColor(Color4.fromString(colorInput.value));
-        };
-        colorRow.appendChild(colorLabel);
-        colorRow.appendChild(colorInput);
-        fontRow.appendChild(fontLabel);
-        fontRow.appendChild(fontInput);
-        this.updateDropdownInputs = () => {
-            const style = this.tool.getTextStyle();
-            colorInput.value = style.renderingStyle.fill.toHexString();
-            if (!fontsInInput.has(style.fontFamily)) {
-                addFontToInput(style.fontFamily);
-            }
-            fontInput.value = style.fontFamily;
-        };
-        this.updateDropdownInputs();
-        dropdown.replaceChildren(colorRow, fontRow);
-        return true;
-    }
-}
-TextToolWidget.idCounter = 0;
-class PenWidget extends ToolbarWidget {
-    constructor(editor, tool, localization, penTypes) {
-        super(editor, tool, localization);
-        this.tool = tool;
-        this.penTypes = penTypes;
-        this.updateInputs = () => { };
-        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
-            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
-                throw new Error('Invalid event type!');
-            }
-            // The button icon may depend on tool properties.
-            if (toolEvt.tool === this.tool) {
-                this.updateIcon();
-                this.updateInputs();
-            }
-        });
-    }
-    getTitle() {
-        return this.targetTool.description;
-    }
-    createIcon() {
-        const strokeFactory = this.tool.getStrokeFactory();
-        if (strokeFactory === makeFreehandLineBuilder) {
-            // 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 {
-            const strokeFactory = this.tool.getStrokeFactory();
-            return makeIconFromFactory(this.tool, strokeFactory);
-        }
-    }
-    fillDropdown(dropdown) {
-        const container = document.createElement('div');
-        const thicknessRow = document.createElement('div');
-        const objectTypeRow = document.createElement('div');
-        // Thickness: Value of the input is squared to allow for finer control/larger values.
-        const thicknessLabel = document.createElement('label');
-        const thicknessInput = document.createElement('input');
-        const objectSelectLabel = document.createElement('label');
-        const objectTypeSelect = document.createElement('select');
-        // Give inputs IDs so we can label them with a <label for=...>Label text</label>
-        thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenWidget.idCounter++}`;
-        objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenWidget.idCounter++}`;
-        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
-        thicknessLabel.setAttribute('for', thicknessInput.id);
-        objectSelectLabel.innerText = this.localizationTable.selectObjectType;
-        objectSelectLabel.setAttribute('for', objectTypeSelect.id);
-        thicknessInput.type = 'range';
-        thicknessInput.min = '1';
-        thicknessInput.max = '20';
-        thicknessInput.step = '1';
-        thicknessInput.oninput = () => {
-            this.tool.setThickness(Math.pow(parseFloat(thicknessInput.value), 2));
-        };
-        thicknessRow.appendChild(thicknessLabel);
-        thicknessRow.appendChild(thicknessInput);
-        objectTypeSelect.oninput = () => {
-            const penTypeIdx = parseInt(objectTypeSelect.value);
-            if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
-                console.error('Invalid pen type index', penTypeIdx);
-                return;
-            }
-            this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
-        };
-        objectTypeRow.appendChild(objectSelectLabel);
-        objectTypeRow.appendChild(objectTypeSelect);
-        const colorRow = document.createElement('div');
-        const colorLabel = document.createElement('label');
-        const colorInput = document.createElement('input');
-        colorInput.id = `${toolbarCSSPrefix}colorInput${PenWidget.idCounter++}`;
-        colorLabel.innerText = this.localizationTable.colorLabel;
-        colorLabel.setAttribute('for', colorInput.id);
-        colorInput.className = 'coloris_input';
-        colorInput.type = 'button';
-        colorInput.oninput = () => {
-            this.tool.setColor(Color4.fromHex(colorInput.value));
-        };
-        colorInput.addEventListener('open', () => {
-            this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
-                kind: EditorEventType.ColorPickerToggled,
-                open: true,
-            });
-        });
-        colorInput.addEventListener('close', () => {
-            this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
-                kind: EditorEventType.ColorPickerToggled,
-                open: false,
-            });
-        });
-        colorRow.appendChild(colorLabel);
-        colorRow.appendChild(colorInput);
-        this.updateInputs = () => {
-            colorInput.value = this.tool.getColor().toHexString();
-            thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
-            objectTypeSelect.replaceChildren();
-            for (let i = 0; i < this.penTypes.length; i++) {
-                const penType = this.penTypes[i];
-                const option = document.createElement('option');
-                option.value = i.toString();
-                option.innerText = penType.name;
-                objectTypeSelect.appendChild(option);
-                if (penType.factory === this.tool.getStrokeFactory()) {
-                    objectTypeSelect.value = i.toString();
-                }
-            }
-        };
-        this.updateInputs();
-        container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
-        dropdown.replaceChildren(container);
-        return true;
-    }
-}
-PenWidget.idCounter = 0;
+import PenWidget from './widgets/PenWidget';
+import EraserWidget from './widgets/EraserWidget';
+import { SelectionWidget } from './widgets/SelectionWidget';
+import TextToolWidget from './widgets/TextToolWidget';
+import HandToolWidget from './widgets/HandToolWidget';
+export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
@@ -510,51 +23,53 @@ export default class HTMLToolbar {
         this.container.classList.add(`${toolbarCSSPrefix}root`);
         this.container.setAttribute('role', 'toolbar');
         parent.appendChild(this.container);
-        colorisInit();
+        if (!HTMLToolbar.colorisStarted) {
+            colorisInit();
+            HTMLToolbar.colorisStarted = true;
+        }
         this.setupColorPickers();
-        // Default pen types
-        this.penTypes = [
-            {
-                name: localizationTable.freehandPen,
-                factory: makeFreehandLineBuilder,
-            },
-            {
-                name: localizationTable.arrowPen,
-                factory: makeArrowBuilder,
-            },
-            {
-                name: localizationTable.linePen,
-                factory: makeLineBuilder,
-            },
-            {
-                name: localizationTable.filledRectanglePen,
-                factory: makeFilledRectangleBuilder,
-            },
-            {
-                name: localizationTable.outlinedRectanglePen,
-                factory: makeOutlinedRectangleBuilder,
-            },
-        ];
     }
     setupColorPickers() {
         const closePickerOverlay = document.createElement('div');
         closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
         this.editor.createHTMLOverlay(closePickerOverlay);
-        coloris({
-            el: '.coloris_input',
-            format: 'hex',
-            selectInput: false,
-            focusInput: false,
-            themeMode: 'auto',
-            swatches: [
-                Color4.red.toHexString(),
-                Color4.purple.toHexString(),
-                Color4.blue.toHexString(),
-                Color4.clay.toHexString(),
-                Color4.black.toHexString(),
-                Color4.white.toHexString(),
-            ],
-        });
+        const maxSwatchLen = 12;
+        const swatches = [
+            Color4.red.toHexString(),
+            Color4.purple.toHexString(),
+            Color4.blue.toHexString(),
+            Color4.clay.toHexString(),
+            Color4.black.toHexString(),
+            Color4.white.toHexString(),
+        ];
+        const presetColorEnd = swatches.length;
+        // (Re)init Coloris -- update the swatches list.
+        const initColoris = () => {
+            coloris({
+                el: '.coloris_input',
+                format: 'hex',
+                selectInput: false,
+                focusInput: false,
+                themeMode: 'auto',
+                swatches
+            });
+        };
+        initColoris();
+        const addColorToSwatch = (newColor) => {
+            let alreadyPresent = false;
+            for (const color of swatches) {
+                if (color === newColor) {
+                    alreadyPresent = true;
+                }
+            }
+            if (!alreadyPresent) {
+                swatches.push(newColor);
+                if (swatches.length > maxSwatchLen) {
+                    swatches.splice(presetColorEnd, 1);
+                }
+                initColoris();
+            }
+        };
         this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
             if (event.kind !== EditorEventType.ColorPickerToggled) {
                 return;
@@ -563,6 +78,12 @@ export default class HTMLToolbar {
             // on that shows/hides the color picker.
             closePickerOverlay.style.display = event.open ? 'block' : 'none';
         });
+        // Add newly-selected colors to the swatch.
+        this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
+            if (event.kind === EditorEventType.ColorPickerColorSelected) {
+                addColorToSwatch(event.color.toHexString());
+            }
+        });
     }
     addActionButton(title, command, parent) {
         const button = document.createElement('button');
@@ -615,7 +136,7 @@ export default class HTMLToolbar {
             if (!(tool instanceof Pen)) {
                 throw new Error('All `Pen` tools must have kind === ToolType.Pen');
             }
-            const widget = new PenWidget(this.editor, tool, this.localizationTable, this.penTypes);
+            const widget = new PenWidget(this.editor, tool, this.localizationTable);
             widget.addTo(this.container);
         }
         for (const tool of toolController.getMatchingTools(ToolType.Eraser)) {
@@ -648,3 +169,4 @@ export default class HTMLToolbar {
         this.addUndoRedoButtons();
     }
 }
+HTMLToolbar.colorisStarted = false;

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

@@ -1,3 +1,4 @@
+import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/Text';
 import Pen from '../tools/Pen';
@@ -7,6 +8,10 @@ export declare const makeDropdownIcon: () => SVGSVGElement;
 export declare const makeEraserIcon: () => SVGSVGElement;
 export declare const makeSelectionIcon: () => SVGSVGElement;
 export declare const makeHandToolIcon: () => SVGSVGElement;
+export declare const makeTouchPanningIcon: () => SVGSVGElement;
+export declare const makeAllDevicePanningIcon: () => SVGSVGElement;
+export declare const makeZoomIcon: () => SVGSVGElement;
 export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
 export declare const makePenIcon: (tipThickness: number, color: string) => SVGSVGElement;
 export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;
+export declare const makePipetteIcon: (color?: Color4) => SVGSVGElement;