js-draw 0.18.1 → 0.18.2

package/dist/cjs/src/toolbar/widgets/PenToolWidget.js

@@ -0,0 +1,226 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ArrowBuilder_1 = require("../../components/builders/ArrowBuilder");
+const FreehandLineBuilder_1 = require("../../components/builders/FreehandLineBuilder");
+const PressureSensitiveFreehandLineBuilder_1 = require("../../components/builders/PressureSensitiveFreehandLineBuilder");
+const LineBuilder_1 = require("../../components/builders/LineBuilder");
+const RectangleBuilder_1 = require("../../components/builders/RectangleBuilder");
+const types_1 = require("../../types");
+const HTMLToolbar_1 = require("../HTMLToolbar");
+const makeColorInput_1 = __importDefault(require("../makeColorInput"));
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+const Color4_1 = __importDefault(require("../../Color4"));
+class PenToolWidget extends BaseToolWidget_1.default {
+    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: PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder,
+            },
+            {
+                name: this.localizationTable.freehandPen,
+                id: 'freehand-pen',
+                factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
+            },
+            {
+                name: this.localizationTable.arrowPen,
+                id: 'arrow',
+                factory: ArrowBuilder_1.makeArrowBuilder,
+            },
+            {
+                name: this.localizationTable.linePen,
+                id: 'line',
+                factory: LineBuilder_1.makeLineBuilder,
+            },
+            {
+                name: this.localizationTable.filledRectanglePen,
+                id: 'filled-rectangle',
+                factory: RectangleBuilder_1.makeFilledRectangleBuilder,
+            },
+            {
+                name: this.localizationTable.outlinedRectanglePen,
+                id: 'outlined-rectangle',
+                factory: RectangleBuilder_1.makeOutlinedRectangleBuilder,
+            },
+        ];
+        this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== types_1.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 === FreehandLineBuilder_1.makeFreehandLineBuilder || strokeFactory === PressureSensitiveFreehandLineBuilder_1.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 === FreehandLineBuilder_1.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(`${HTMLToolbar_1.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 = `${HTMLToolbar_1.toolbarCSSPrefix}penThicknessInput${PenToolWidget.idCounter++}`;
+        objectTypeSelect.id = `${HTMLToolbar_1.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] = (0, makeColorInput_1.default)(this.editor, color => {
+            this.tool.setColor(color);
+        });
+        colorInput.id = `${HTMLToolbar_1.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_1.default.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;
+                }
+            }
+        }
+    }
+}
+exports.default = PenToolWidget;
+PenToolWidget.idCounter = 0;

package/dist/cjs/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/cjs/src/toolbar/widgets/SelectionToolWidget.js

@@ -0,0 +1,153 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Color4_1 = __importDefault(require("../../Color4"));
+const RestylableComponent_1 = require("../../components/RestylableComponent");
+const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
+const types_1 = require("../../types");
+const makeColorInput_1 = __importDefault(require("../makeColorInput"));
+const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+const BaseWidget_1 = __importDefault(require("./BaseWidget"));
+class RestyleSelectionWidget extends BaseWidget_1.default {
+    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(types_1.EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== types_1.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] = (0, makeColorInput_1.default)(this.editor, color => {
+            const selection = this.selectionTool.getSelection();
+            if (selection) {
+                const updateStyleCommands = [];
+                for (const elem of selection.getSelectedObjects()) {
+                    if ((0, RestylableComponent_1.isRestylableComponent)(elem)) {
+                        updateStyleCommands.push(elem.updateStyle({ color }));
+                    }
+                }
+                const unitedCommand = (0, uniteCommands_1.default)(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 ((0, RestylableComponent_1.isRestylableComponent)(elem)) {
+                        const color = elem.getStyle().color;
+                        if (color) {
+                            colors.push(color);
+                        }
+                    }
+                }
+                setColorInputValue(Color4_1.default.average(colors));
+            }
+            else {
+                colorInput.disabled = true;
+            }
+        };
+        colorRow.replaceChildren(colorLabel, colorInputContainer);
+        container.replaceChildren(colorRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
+class SelectionToolWidget extends BaseToolWidget_1.default {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'selection-tool-widget', localization);
+        this.tool = tool;
+        const resizeButton = new ActionButtonWidget_1.default(editor, 'resize-btn', () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
+            this.resizeImageToSelection();
+        }, localization);
+        const deleteButton = new ActionButtonWidget_1.default(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_1.default(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(types_1.EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== types_1.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();
+    }
+}
+exports.default = SelectionToolWidget;

package/dist/cjs/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/cjs/src/toolbar/widgets/TextToolWidget.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Color4_1 = __importDefault(require("../../Color4"));
+const types_1 = require("../../types");
+const HTMLToolbar_1 = require("../HTMLToolbar");
+const makeColorInput_1 = __importDefault(require("../makeColorInput"));
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+class TextToolWidget extends BaseToolWidget_1.default {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'text-tool-widget', localization);
+        this.tool = tool;
+        this.updateDropdownInputs = null;
+        editor.notifier.on(types_1.EditorEventType.ToolUpdated, evt => {
+            var _a;
+            if (evt.kind === types_1.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(`${HTMLToolbar_1.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] = (0, makeColorInput_1.default)(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 = `${HTMLToolbar_1.toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+        colorLabel.setAttribute('for', colorInput.id);
+        sizeInput.id = `${HTMLToolbar_1.toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+        sizeLabel.setAttribute('for', sizeInput.id);
+        addFontToInput('monospace');
+        addFontToInput('serif');
+        addFontToInput('sans-serif');
+        fontInput.id = `${HTMLToolbar_1.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_1.default.fromHex(state.color));
+        }
+        if (state.textSize && typeof (state.textSize) === 'number') {
+            this.tool.setFontSize(state.textSize);
+        }
+        super.deserializeFrom(state);
+    }
+}
+exports.default = TextToolWidget;
+TextToolWidget.idCounter = 0;

package/dist/cjs/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/cjs/src/toolbar/widgets/lib.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentPropertiesWidget = exports.InsertImageWidget = exports.EraserToolWidget = exports.SelectionToolWidget = exports.HandToolWidget = exports.TextToolWidget = exports.PenToolWidget = exports.BaseWidget = exports.BaseToolWidget = exports.ActionButtonWidget = void 0;
+var ActionButtonWidget_1 = require("./ActionButtonWidget");
+Object.defineProperty(exports, "ActionButtonWidget", { enumerable: true, get: function () { return __importDefault(ActionButtonWidget_1).default; } });
+var BaseToolWidget_1 = require("./BaseToolWidget");
+Object.defineProperty(exports, "BaseToolWidget", { enumerable: true, get: function () { return __importDefault(BaseToolWidget_1).default; } });
+var BaseWidget_1 = require("./BaseWidget");
+Object.defineProperty(exports, "BaseWidget", { enumerable: true, get: function () { return __importDefault(BaseWidget_1).default; } });
+var PenToolWidget_1 = require("./PenToolWidget");
+Object.defineProperty(exports, "PenToolWidget", { enumerable: true, get: function () { return __importDefault(PenToolWidget_1).default; } });
+var TextToolWidget_1 = require("./TextToolWidget");
+Object.defineProperty(exports, "TextToolWidget", { enumerable: true, get: function () { return __importDefault(TextToolWidget_1).default; } });
+var HandToolWidget_1 = require("./HandToolWidget");
+Object.defineProperty(exports, "HandToolWidget", { enumerable: true, get: function () { return __importDefault(HandToolWidget_1).default; } });
+var SelectionToolWidget_1 = require("./SelectionToolWidget");
+Object.defineProperty(exports, "SelectionToolWidget", { enumerable: true, get: function () { return __importDefault(SelectionToolWidget_1).default; } });
+var EraserToolWidget_1 = require("./EraserToolWidget");
+Object.defineProperty(exports, "EraserToolWidget", { enumerable: true, get: function () { return __importDefault(EraserToolWidget_1).default; } });
+var InsertImageWidget_1 = require("./InsertImageWidget");
+Object.defineProperty(exports, "InsertImageWidget", { enumerable: true, get: function () { return __importDefault(InsertImageWidget_1).default; } });
+var DocumentPropertiesWidget_1 = require("./DocumentPropertiesWidget");
+Object.defineProperty(exports, "DocumentPropertiesWidget", { enumerable: true, get: function () { return __importDefault(DocumentPropertiesWidget_1).default; } });

package/dist/cjs/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/cjs/src/tools/BaseTool.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("../types");
+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(types_1.EditorEventType.ToolEnabled, {
+                kind: types_1.EditorEventType.ToolEnabled,
+                tool: this,
+            });
+        }
+        else {
+            this.notifier.dispatch(types_1.EditorEventType.ToolDisabled, {
+                kind: types_1.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;
+    }
+}
+exports.default = BaseTool;