js-draw 0.18.1 → 0.18.2

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

@@ -0,0 +1,27 @@
+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';
+import { SavedToolbuttonState } from './BaseWidget';
+export interface PenTypeRecord {
+    name: string;
+    id: string;
+    factory: ComponentBuilderFactory;
+}
+export default class PenToolWidget extends BaseToolWidget {
+    private tool;
+    private updateInputs;
+    protected penTypes: PenTypeRecord[];
+    constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);
+    protected getTitle(): string;
+    private getCurrentPenTypeIdx;
+    private getCurrentPenType;
+    protected createIcon(): Element;
+    private static idCounter;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected onKeyPress(event: KeyPressEvent): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
+}

package/dist/mjs/src/toolbar/widgets/PenToolWidget.mjs

@@ -0,0 +1,220 @@
+import  { makeArrowBuilder }  from '../../components/builders/ArrowBuilder.mjs';
+import  { makeFreehandLineBuilder }  from '../../components/builders/FreehandLineBuilder.mjs';
+import  { makePressureSensitiveFreehandLineBuilder }  from '../../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
+import  { makeLineBuilder }  from '../../components/builders/LineBuilder.mjs';
+import  { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder }  from '../../components/builders/RectangleBuilder.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
+import  Color4  from '../../Color4.mjs';
+export default class PenToolWidget extends BaseToolWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'pen', localization);
+        this.tool = tool;
+        this.updateInputs = () => { };
+        // Default pen types
+        this.penTypes = [
+            {
+                name: this.localizationTable.pressureSensitiveFreehandPen,
+                id: 'pressure-sensitive-pen',
+                factory: makePressureSensitiveFreehandLineBuilder,
+            },
+            {
+                name: this.localizationTable.freehandPen,
+                id: 'freehand-pen',
+                factory: makeFreehandLineBuilder,
+            },
+            {
+                name: this.localizationTable.arrowPen,
+                id: 'arrow',
+                factory: makeArrowBuilder,
+            },
+            {
+                name: this.localizationTable.linePen,
+                id: 'line',
+                factory: makeLineBuilder,
+            },
+            {
+                name: this.localizationTable.filledRectanglePen,
+                id: 'filled-rectangle',
+                factory: makeFilledRectangleBuilder,
+            },
+            {
+                name: this.localizationTable.outlinedRectanglePen,
+                id: 'outlined-rectangle',
+                factory: makeOutlinedRectangleBuilder,
+            },
+        ];
+        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;
+    }
+    // Return the index of this tool's stroke factory in the list of
+    // all stroke factories.
+    //
+    // Returns -1 if the stroke factory is not in the list of all stroke factories.
+    getCurrentPenTypeIdx() {
+        const currentFactory = this.tool.getStrokeFactory();
+        for (let i = 0; i < this.penTypes.length; i++) {
+            if (this.penTypes[i].factory === currentFactory) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    getCurrentPenType() {
+        for (const penType of this.penTypes) {
+            if (penType.factory === this.tool.getStrokeFactory()) {
+                return penType;
+            }
+        }
+        return null;
+    }
+    createIcon() {
+        const strokeFactory = this.tool.getStrokeFactory();
+        if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+            // 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();
+            const roundedTip = strokeFactory === makeFreehandLineBuilder;
+            return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
+        }
+        else {
+            const strokeFactory = this.tool.getStrokeFactory();
+            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
+        }
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add(`${toolbarCSSPrefix}spacedList`);
+        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}penThicknessInput${PenToolWidget.idCounter++}`;
+        objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        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 = `${inverseThicknessInputFn(2)}`;
+        thicknessInput.max = `${inverseThicknessInputFn(400)}`;
+        thicknessInput.step = '0.1';
+        thicknessInput.oninput = () => {
+            this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
+        };
+        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, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
+            this.tool.setColor(color);
+        });
+        colorInput.id = `${toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorLabel.setAttribute('for', colorInput.id);
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInputContainer);
+        this.updateInputs = () => {
+            setColorInputValue(this.tool.getColor());
+            thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
+            // Update the list of stroke factories
+            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);
+            }
+            // Update the selected stroke factory.
+            const strokeFactoryIdx = this.getCurrentPenTypeIdx();
+            if (strokeFactoryIdx === -1) {
+                objectTypeSelect.value = '';
+            }
+            else {
+                objectTypeSelect.value = strokeFactoryIdx.toString();
+            }
+        };
+        this.updateInputs();
+        container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+    onKeyPress(event) {
+        if (!this.isSelected()) {
+            return false;
+        }
+        // Map alt+0-9 to different pen types.
+        if (/^[0-9]$/.exec(event.key) && event.ctrlKey) {
+            const penTypeIdx = parseInt(event.key) - 1;
+            if (penTypeIdx >= 0 && penTypeIdx < this.penTypes.length) {
+                this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+                return true;
+            }
+        }
+        return false;
+    }
+    serializeState() {
+        var _a;
+        return Object.assign(Object.assign({}, super.serializeState()), { color: this.tool.getColor().toHexString(), thickness: this.tool.getThickness(), strokeFactoryId: (_a = this.getCurrentPenType()) === null || _a === void 0 ? void 0 : _a.id });
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        const verifyPropertyType = (propertyName, expectedType) => {
+            const actualType = typeof (state[propertyName]);
+            if (actualType !== expectedType) {
+                throw new Error(`Deserializing property ${propertyName}: Invalid type. Expected ${expectedType},` +
+                    ` was ${actualType}.`);
+            }
+        };
+        if (state.color) {
+            verifyPropertyType('color', 'string');
+            this.tool.setColor(Color4.fromHex(state.color));
+        }
+        if (state.thickness) {
+            verifyPropertyType('thickness', 'number');
+            this.tool.setThickness(state.thickness);
+        }
+        if (state.strokeFactoryId) {
+            verifyPropertyType('strokeFactoryId', 'string');
+            const factoryId = state.strokeFactoryId;
+            for (const penType of this.penTypes) {
+                if (factoryId === penType.id) {
+                    this.tool.setStrokeFactory(penType.factory);
+                    break;
+                }
+            }
+        }
+    }
+}
+PenToolWidget.idCounter = 0;

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

@@ -0,0 +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;
+}

package/dist/mjs/src/toolbar/widgets/SelectionToolWidget.mjs

@@ -0,0 +1,147 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import  Color4  from '../../Color4.mjs';
+import  { isRestylableComponent }  from '../../components/RestylableComponent.mjs';
+import  uniteCommands  from '../../commands/uniteCommands.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  ActionButtonWidget  from './ActionButtonWidget.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
+class RestyleSelectionWidget extends BaseWidget {
+    constructor(editor, selectionTool, localizationTable) {
+        super(editor, 'restyle-selection', localizationTable);
+        this.selectionTool = selectionTool;
+        this.updateFormatData = () => { };
+        // Allow showing the dropdown even if this widget isn't selected yet
+        this.container.classList.add('dropdownShowable');
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+                throw new Error('Invalid event type!');
+            }
+            if (toolEvt.tool === this.selectionTool) {
+                this.updateFormatData();
+            }
+        });
+    }
+    getTitle() {
+        return this.localizationTable.reformatSelection;
+    }
+    createIcon() {
+        return this.editor.icons.makeFormatSelectionIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const colorLabel = document.createElement('label');
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
+            const selection = this.selectionTool.getSelection();
+            if (selection) {
+                const updateStyleCommands = [];
+                for (const elem of selection.getSelectedObjects()) {
+                    if (isRestylableComponent(elem)) {
+                        updateStyleCommands.push(elem.updateStyle({ color }));
+                    }
+                }
+                const unitedCommand = uniteCommands(updateStyleCommands);
+                this.editor.dispatch(unitedCommand);
+            }
+        });
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        this.updateFormatData = () => {
+            const selection = this.selectionTool.getSelection();
+            if (selection) {
+                colorInput.disabled = false;
+                const colors = [];
+                for (const elem of selection.getSelectedObjects()) {
+                    if (isRestylableComponent(elem)) {
+                        const color = elem.getStyle().color;
+                        if (color) {
+                            colors.push(color);
+                        }
+                    }
+                }
+                setColorInputValue(Color4.average(colors));
+            }
+            else {
+                colorInput.disabled = true;
+            }
+        };
+        colorRow.replaceChildren(colorLabel, colorInputContainer);
+        container.replaceChildren(colorRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
+export default class SelectionToolWidget extends BaseToolWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'selection-tool-widget', localization);
+        this.tool = tool;
+        const resizeButton = new ActionButtonWidget(editor, 'resize-btn', () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
+            this.resizeImageToSelection();
+        }, localization);
+        const deleteButton = new ActionButtonWidget(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(selection.deleteSelectedObjects());
+            this.tool.clearSelection();
+        }, localization);
+        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => __awaiter(this, void 0, void 0, function* () {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(yield selection.duplicateSelectedObjects());
+        }), localization);
+        const restyleButton = new RestyleSelectionWidget(editor, this.tool, localization);
+        this.addSubWidget(resizeButton);
+        this.addSubWidget(deleteButton);
+        this.addSubWidget(duplicateButton);
+        this.addSubWidget(restyleButton);
+        const updateDisabled = (disabled) => {
+            resizeButton.setDisabled(disabled);
+            deleteButton.setDisabled(disabled);
+            duplicateButton.setDisabled(disabled);
+            restyleButton.setDisabled(disabled);
+        };
+        updateDisabled(true);
+        // 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.getSelectedItemCount() > 0;
+                updateDisabled(!hasSelection);
+            }
+        });
+    }
+    resizeImageToSelection() {
+        const selection = this.tool.getSelection();
+        if (selection) {
+            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+        }
+    }
+    onKeyPress(event) {
+        // Resize image to selection:
+        // Other keys are handled directly by the selection tool.
+        if (event.ctrlKey && event.key === 'r') {
+            this.resizeImageToSelection();
+            return true;
+        }
+        return false;
+    }
+    getTitle() {
+        return this.localizationTable.select;
+    }
+    createIcon() {
+        return this.editor.icons.makeSelectionIcon();
+    }
+}

package/dist/mjs/src/toolbar/widgets/TextToolWidget.d.ts

@@ -0,0 +1,16 @@
+import Editor from '../../Editor';
+import TextTool from '../../tools/TextTool';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
+export default class TextToolWidget extends BaseToolWidget {
+    private tool;
+    private updateDropdownInputs;
+    constructor(editor: Editor, tool: TextTool, localization?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    private static idCounter;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
+}

package/dist/mjs/src/toolbar/widgets/TextToolWidget.mjs

@@ -0,0 +1,109 @@
+import  Color4  from '../../Color4.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
+export default class TextToolWidget extends BaseToolWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'text-tool-widget', 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 this.editor.icons.makeTextIcon(textStyle);
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add(`${toolbarCSSPrefix}spacedList`);
+        const fontRow = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const sizeRow = document.createElement('div');
+        const fontInput = document.createElement('select');
+        const fontLabel = document.createElement('label');
+        const sizeInput = document.createElement('input');
+        const sizeLabel = document.createElement('label');
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
+            this.tool.setColor(color);
+        });
+        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);
+        };
+        sizeInput.setAttribute('type', 'number');
+        sizeInput.min = '1';
+        sizeInput.max = '128';
+        fontLabel.innerText = this.localizationTable.fontLabel;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        sizeLabel.innerText = this.localizationTable.textSize;
+        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+        colorLabel.setAttribute('for', colorInput.id);
+        sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+        sizeLabel.setAttribute('for', sizeInput.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);
+        };
+        sizeInput.onchange = () => {
+            const size = parseInt(sizeInput.value);
+            if (!isNaN(size) && size > 0) {
+                this.tool.setFontSize(size);
+            }
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInputContainer);
+        fontRow.appendChild(fontLabel);
+        fontRow.appendChild(fontInput);
+        sizeRow.appendChild(sizeLabel);
+        sizeRow.appendChild(sizeInput);
+        this.updateDropdownInputs = () => {
+            const style = this.tool.getTextStyle();
+            setColorInputValue(style.renderingStyle.fill);
+            if (!fontsInInput.has(style.fontFamily)) {
+                addFontToInput(style.fontFamily);
+            }
+            fontInput.value = style.fontFamily;
+            sizeInput.value = `${style.size}`;
+        };
+        this.updateDropdownInputs();
+        container.replaceChildren(colorRow, sizeRow, fontRow);
+        dropdown.appendChild(container);
+        return true;
+    }
+    serializeState() {
+        const textStyle = this.tool.getTextStyle();
+        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, textSize: textStyle.size, color: textStyle.renderingStyle.fill.toHexString() });
+    }
+    deserializeFrom(state) {
+        if (state.fontFamily && typeof (state.fontFamily) === 'string') {
+            this.tool.setFontFamily(state.fontFamily);
+        }
+        if (state.color && typeof (state.color) === 'string') {
+            this.tool.setColor(Color4.fromHex(state.color));
+        }
+        if (state.textSize && typeof (state.textSize) === 'number') {
+            this.tool.setFontSize(state.textSize);
+        }
+        super.deserializeFrom(state);
+    }
+}
+TextToolWidget.idCounter = 0;

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

@@ -0,0 +1,10 @@
+export { default as ActionButtonWidget } from './ActionButtonWidget';
+export { default as BaseToolWidget } from './BaseToolWidget';
+export { default as BaseWidget } from './BaseWidget';
+export { default as PenToolWidget } from './PenToolWidget';
+export { default as TextToolWidget } from './TextToolWidget';
+export { default as HandToolWidget } from './HandToolWidget';
+export { default as SelectionToolWidget } from './SelectionToolWidget';
+export { default as EraserToolWidget } from './EraserToolWidget';
+export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';

package/dist/mjs/src/toolbar/widgets/lib.mjs

@@ -0,0 +1,10 @@
+export  { default as ActionButtonWidget }  from './ActionButtonWidget.mjs';
+export  { default as BaseToolWidget }  from './BaseToolWidget.mjs';
+export  { default as BaseWidget }  from './BaseWidget.mjs';
+export  { default as PenToolWidget }  from './PenToolWidget.mjs';
+export  { default as TextToolWidget }  from './TextToolWidget.mjs';
+export  { default as HandToolWidget }  from './HandToolWidget.mjs';
+export  { default as SelectionToolWidget }  from './SelectionToolWidget.mjs';
+export  { default as EraserToolWidget }  from './EraserToolWidget.mjs';
+export  { default as InsertImageWidget }  from './InsertImageWidget.mjs';
+export  { default as DocumentPropertiesWidget }  from './DocumentPropertiesWidget.mjs';

package/dist/mjs/src/tools/BaseTool.d.ts

@@ -0,0 +1,22 @@
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
+import ToolEnabledGroup from './ToolEnabledGroup';
+export default abstract class BaseTool implements PointerEvtListener {
+    private notifier;
+    readonly description: string;
+    private enabled;
+    private group;
+    onPointerDown(_event: PointerEvt): boolean;
+    onPointerMove(_event: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
+    protected constructor(notifier: EditorNotifier, description: string);
+    onWheel(_event: WheelEvt): boolean;
+    onCopy(_event: CopyEvent): boolean;
+    onPaste(_event: PasteEvent): boolean;
+    onKeyPress(_event: KeyPressEvent): boolean;
+    onKeyUp(_event: KeyUpEvent): boolean;
+    setEnabled(enabled: boolean): void;
+    isEnabled(): boolean;
+    setToolGroup(group: ToolEnabledGroup): void;
+    getToolGroup(): ToolEnabledGroup | null;
+}

package/dist/mjs/src/tools/BaseTool.mjs

@@ -0,0 +1,63 @@
+import  { EditorEventType }  from '../types.mjs';
+export default class BaseTool {
+    onPointerDown(_event) { return false; }
+    onPointerMove(_event) { }
+    onPointerUp(_event) { }
+    onGestureCancel() { }
+    constructor(notifier, description) {
+        this.notifier = notifier;
+        this.description = description;
+        this.enabled = true;
+        this.group = null;
+    }
+    onWheel(_event) {
+        return false;
+    }
+    onCopy(_event) {
+        return false;
+    }
+    onPaste(_event) {
+        return false;
+    }
+    onKeyPress(_event) {
+        return false;
+    }
+    onKeyUp(_event) {
+        return false;
+    }
+    setEnabled(enabled) {
+        var _a;
+        this.enabled = enabled;
+        // Ensure that at most one tool in the group is enabled.
+        if (enabled) {
+            (_a = this.group) === null || _a === void 0 ? void 0 : _a.notifyEnabled(this);
+            this.notifier.dispatch(EditorEventType.ToolEnabled, {
+                kind: EditorEventType.ToolEnabled,
+                tool: this,
+            });
+        }
+        else {
+            this.notifier.dispatch(EditorEventType.ToolDisabled, {
+                kind: EditorEventType.ToolDisabled,
+                tool: this,
+            });
+        }
+    }
+    isEnabled() {
+        return this.enabled;
+    }
+    // Connect this tool to a set of other tools, ensuring that at most one
+    // of the tools in the group is enabled.
+    setToolGroup(group) {
+        if (this.isEnabled()) {
+            group.notifyEnabled(this);
+        }
+        this.group = group;
+    }
+    getToolGroup() {
+        if (this.group) {
+            return this.group;
+        }
+        return null;
+    }
+}

package/dist/mjs/src/tools/Eraser.d.ts

@@ -0,0 +1,23 @@
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import Editor from '../Editor';
+export default class Eraser extends BaseTool {
+    private editor;
+    private lastPoint;
+    private isFirstEraseEvt;
+    private toRemove;
+    private thickness;
+    private partialCommands;
+    constructor(editor: Editor, description: string);
+    private clearPreview;
+    private getSizeOnCanvas;
+    private drawPreviewAt;
+    private getEraserRect;
+    private eraseTo;
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+    getThickness(): number;
+    setThickness(thickness: number): void;
+}