js-draw 0.17.4 → 0.18.0

package/dist/cjs/src/rendering/renderers/TextOnlyRenderer.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Vec2_1 = require("../../math/Vec2");
+const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
+// Outputs a description of what was rendered.
+class TextOnlyRenderer extends AbstractRenderer_1.default {
+    constructor(viewport, localizationTable) {
+        super(viewport);
+        this.localizationTable = localizationTable;
+        this.descriptionBuilder = [];
+        this.pathCount = 0;
+        this.textNodeCount = 0;
+        this.imageNodeCount = 0;
+    }
+    displaySize() {
+        // We don't have a graphical display, export a reasonable size.
+        return Vec2_1.Vec2.of(500, 500);
+    }
+    clear() {
+        this.descriptionBuilder = [];
+        this.pathCount = 0;
+        this.textNodeCount = 0;
+    }
+    getDescription() {
+        return [
+            this.localizationTable.pathNodeCount(this.pathCount),
+            ...(this.textNodeCount > 0 ? [this.localizationTable.textNodeCount(this.textNodeCount)] : []),
+            ...(this.imageNodeCount > 0 ? [this.localizationTable.imageNodeCount(this.imageNodeCount)] : []),
+            ...this.descriptionBuilder
+        ].join('\n');
+    }
+    beginPath(_startPoint) {
+    }
+    endPath(_style) {
+        this.pathCount++;
+    }
+    lineTo(_point) {
+    }
+    moveTo(_point) {
+    }
+    traceCubicBezierCurve(_p1, _p2, _p3) {
+    }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) {
+    }
+    drawText(text, _transform, _style) {
+        this.descriptionBuilder.push(this.localizationTable.textNode(text));
+        this.textNodeCount++;
+    }
+    drawImage(image) {
+        const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+        this.descriptionBuilder.push(label);
+        this.imageNodeCount++;
+    }
+    isTooSmallToRender(rect) {
+        return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
+    }
+    drawPoints(..._points) {
+    }
+}
+exports.default = TextOnlyRenderer;

package/dist/cjs/src/testing/beforeEachFile.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const loadExpectExtensions_1 = __importDefault(require("./loadExpectExtensions"));
+(0, loadExpectExtensions_1.default)();
+jest.useFakeTimers();
+// jsdom doesn't support HTMLCanvasElement#getContext — it logs an error
+// to the console. Make it return null so we can handle a non-existent Canvas
+// at runtime (e.g. use something else, if available).
+HTMLCanvasElement.prototype.getContext = () => null;

package/dist/cjs/src/testing/createEditor.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Display_1 = require("../rendering/Display");
+const Editor_1 = __importDefault(require("../Editor"));
+/** Creates an editor. Should only be used in test files. */
+exports.default = () => {
+    if (jest === undefined) {
+        throw new Error('Files in the testing/ folder should only be used in tests!');
+    }
+    return new Editor_1.default(document.body, { renderingMode: Display_1.RenderingMode.DummyRenderer });
+};

package/dist/cjs/src/testing/lib.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendTouchEvent = exports.sendPenEvent = void 0;
+var sendPenEvent_1 = require("./sendPenEvent");
+Object.defineProperty(exports, "sendPenEvent", { enumerable: true, get: function () { return __importDefault(sendPenEvent_1).default; } });
+var sendTouchEvent_1 = require("./sendTouchEvent");
+Object.defineProperty(exports, "sendTouchEvent", { enumerable: true, get: function () { return __importDefault(sendTouchEvent_1).default; } });

package/dist/cjs/src/testing/loadExpectExtensions.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadExpectExtensions = void 0;
+const loadExpectExtensions = () => {
+    // Custom matchers. See
+    // https://jestjs.io/docs/expect#expectextendmatchers
+    expect.extend({
+        // Determine whether expected = actual based on the objects'
+        // .eq methods
+        objEq(actual, expected, ...eqArgs) {
+            let pass = false;
+            if ((expected !== null && expected !== void 0 ? expected : null) === null) {
+                pass = actual.eq(expected, ...eqArgs);
+            }
+            else {
+                pass = expected.eq(actual, ...eqArgs);
+            }
+            return {
+                pass,
+                message: () => {
+                    return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
+                },
+            };
+        },
+    });
+};
+exports.loadExpectExtensions = loadExpectExtensions;
+exports.default = exports.loadExpectExtensions;

package/dist/cjs/src/testing/sendPenEvent.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Pointer_1 = __importDefault(require("../Pointer"));
+const types_1 = require("../types");
+/**
+ * Dispatch a pen event to the currently selected tool.
+ * Intended for unit tests.
+ *
+ * @see {@link sendTouchEvent}
+ */
+const sendPenEvent = (editor, eventType, point, allPointers) => {
+    const mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== types_1.InputEvtType.PointerUpEvt, editor.viewport);
+    editor.toolController.dispatchInputEvent({
+        kind: eventType,
+        allPointers: allPointers !== null && allPointers !== void 0 ? allPointers : [
+            mainPointer,
+        ],
+        current: mainPointer,
+    });
+};
+exports.default = sendPenEvent;

package/dist/cjs/src/testing/sendTouchEvent.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Pointer_1 = __importStar(require("../Pointer"));
+const types_1 = require("../types");
+/**
+ * Dispatch a touch event to the currently selected tool. Intended for unit tests.
+ *
+ * @see {@link sendPenEvent}
+ *
+ * @example
+ * **Simulating a horizontal swipe gesture:**
+ * ```ts
+ * sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * for (let i = 1; i <= 10; i++) {
+ *   jest.advanceTimersByTime(10);
+ *   sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+ * }
+ * ```
+ *
+ * @example
+ * **Simulating a pinch gesture.** This example assumes that you're using [Jest with timer mocks enabled](https://jestjs.io/docs/timer-mocks).
+ * ```ts
+ * let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer ]);
+ *
+ * // Simulate a pinch
+ * const maxIterations = 10;
+ * for (let i = 0; i < maxIterations; i++) {
+ *   // Use the unit testing framework's tool for increasing the current time
+ *   // returned by (new Date()).getTime(), etc.
+ *   jest.advanceTimersByTime(100);
+ *
+ *   const point1 = Vec2.of(-i * 5, 0);
+ *   const point2 = Vec2.of(i * 5 + 100, 0);
+ *
+ *   firstPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point1, [ secondPointer ]);
+ *   secondPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point2, [ firstPointer ]);
+ * }
+ * ```
+ */
+const sendTouchEvent = (editor, eventType, screenPos, allOtherPointers) => {
+    const canvasPos = editor.viewport.screenToCanvas(screenPos);
+    let ptrId = 0;
+    let maxPtrId = 0;
+    // Get a unique ID for the main pointer
+    // (try to use id=0, but don't use it if it's already in use).
+    for (const pointer of allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []) {
+        maxPtrId = Math.max(pointer.id, maxPtrId);
+        if (pointer.id === ptrId) {
+            ptrId = maxPtrId + 1;
+        }
+    }
+    const mainPointer = Pointer_1.default.ofCanvasPoint(canvasPos, eventType !== types_1.InputEvtType.PointerUpEvt, editor.viewport, ptrId, Pointer_1.PointerDevice.Touch);
+    editor.toolController.dispatchInputEvent({
+        kind: eventType,
+        allPointers: [
+            ...(allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []),
+            mainPointer,
+        ],
+        current: mainPointer,
+    });
+    return mainPointer;
+};
+exports.default = sendTouchEvent;

package/dist/cjs/src/toolbar/HTMLToolbar.js

@@ -0,0 +1,383 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toolbarCSSPrefix = void 0;
+const types_1 = require("../types");
+const coloris_1 = require("@melloware/coloris");
+const Color4_1 = __importDefault(require("../Color4"));
+const localization_1 = require("./localization");
+const SelectionTool_1 = __importDefault(require("../tools/SelectionTool/SelectionTool"));
+const PanZoom_1 = __importDefault(require("../tools/PanZoom"));
+const TextTool_1 = __importDefault(require("../tools/TextTool"));
+const Eraser_1 = __importDefault(require("../tools/Eraser"));
+const Pen_1 = __importDefault(require("../tools/Pen"));
+const PenToolWidget_1 = __importDefault(require("./widgets/PenToolWidget"));
+const EraserToolWidget_1 = __importDefault(require("./widgets/EraserToolWidget"));
+const SelectionToolWidget_1 = __importDefault(require("./widgets/SelectionToolWidget"));
+const TextToolWidget_1 = __importDefault(require("./widgets/TextToolWidget"));
+const HandToolWidget_1 = __importDefault(require("./widgets/HandToolWidget"));
+const ActionButtonWidget_1 = __importDefault(require("./widgets/ActionButtonWidget"));
+const InsertImageWidget_1 = __importDefault(require("./widgets/InsertImageWidget"));
+const DocumentPropertiesWidget_1 = __importDefault(require("./widgets/DocumentPropertiesWidget"));
+const OverflowWidget_1 = __importDefault(require("./widgets/OverflowWidget"));
+exports.toolbarCSSPrefix = 'toolbar-';
+class HTMLToolbar {
+    /** @internal */
+    constructor(editor, parent, localizationTable = localization_1.defaultToolbarLocalization) {
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.listeners = [];
+        // Flex-order of the next widget to be added.
+        this.widgetOrderCounter = 0;
+        this.widgetsById = {};
+        this.widgetList = [];
+        // Widget to toggle overflow menu.
+        this.overflowWidget = null;
+        this.updateColoris = null;
+        this.reLayoutQueued = false;
+        this.container = document.createElement('div');
+        this.container.classList.add(`${exports.toolbarCSSPrefix}root`);
+        this.container.setAttribute('role', 'toolbar');
+        parent.appendChild(this.container);
+        if (!HTMLToolbar.colorisStarted) {
+            (0, coloris_1.init)();
+            HTMLToolbar.colorisStarted = true;
+        }
+        this.setupColorPickers();
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver((_entries) => {
+                this.reLayout();
+            });
+            this.resizeObserver.observe(this.container);
+        }
+        else {
+            console.warn('ResizeObserver not supported. Toolbar will not resize.');
+        }
+    }
+    // @internal
+    setupColorPickers() {
+        // Much of the setup only needs to be done once.
+        if (this.updateColoris) {
+            this.updateColoris();
+            return;
+        }
+        const closePickerOverlay = document.createElement('div');
+        closePickerOverlay.className = `${exports.toolbarCSSPrefix}closeColorPickerOverlay`;
+        this.editor.createHTMLOverlay(closePickerOverlay);
+        const maxSwatchLen = 12;
+        const swatches = [
+            Color4_1.default.red.toHexString(),
+            Color4_1.default.purple.toHexString(),
+            Color4_1.default.blue.toHexString(),
+            Color4_1.default.clay.toHexString(),
+            Color4_1.default.black.toHexString(),
+            Color4_1.default.white.toHexString(),
+        ];
+        const presetColorEnd = swatches.length;
+        // (Re)init Coloris -- update the swatches list.
+        const initColoris = () => {
+            (0, coloris_1.coloris)({
+                el: '.coloris_input',
+                format: 'hex',
+                selectInput: false,
+                focusInput: false,
+                themeMode: 'auto',
+                swatches
+            });
+        };
+        initColoris();
+        this.updateColoris = 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.listeners.push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerToggled, event => {
+            if (event.kind !== types_1.EditorEventType.ColorPickerToggled) {
+                return;
+            }
+            // Show/hide the overlay. Making the overlay visible gives users a surface to click
+            // on that shows/hides the color picker.
+            closePickerOverlay.style.display = event.open ? 'block' : 'none';
+        }));
+        // Add newly-selected colors to the swatch.
+        this.listeners.push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerColorSelected, event => {
+            if (event.kind === types_1.EditorEventType.ColorPickerColorSelected) {
+                addColorToSwatch(event.color.toHexString());
+            }
+        }));
+    }
+    queueReLayout() {
+        if (!this.reLayoutQueued) {
+            this.reLayoutQueued = true;
+            requestAnimationFrame(() => this.reLayout());
+        }
+    }
+    reLayout() {
+        this.reLayoutQueued = false;
+        if (!this.overflowWidget) {
+            return;
+        }
+        const getTotalWidth = (widgetList) => {
+            let totalWidth = 0;
+            for (const widget of widgetList) {
+                if (!widget.isHidden()) {
+                    totalWidth += widget.getButtonWidth();
+                }
+            }
+            return totalWidth;
+        };
+        // Returns true if there is enough empty space to move the first child
+        // from the overflow menu to the main menu.
+        const canRemoveFirstChildFromOverflow = (freeSpaceInMainMenu) => {
+            var _a, _b;
+            const overflowChildren = (_b = (_a = this.overflowWidget) === null || _a === void 0 ? void 0 : _a.getChildWidgets()) !== null && _b !== void 0 ? _b : [];
+            if (overflowChildren.length === 0) {
+                return false;
+            }
+            return overflowChildren[0].getButtonWidth() <= freeSpaceInMainMenu;
+        };
+        let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
+        let shownWidgetWidth = getTotalWidth(this.widgetList) - overflowWidgetsWidth;
+        let availableWidth = this.container.clientWidth * 0.87;
+        // If on a device that has enough vertical space, allow
+        // showing two rows of buttons.
+        // TODO: Fix magic numbers
+        if (window.innerHeight > availableWidth * 1.75) {
+            availableWidth *= 1.75;
+        }
+        let updatedChildren = false;
+        // If we can remove at least one child from the overflow menu,
+        if (canRemoveFirstChildFromOverflow(availableWidth - shownWidgetWidth)) {
+            // Move widgets to the main menu.
+            const overflowChildren = this.overflowWidget.clearChildren();
+            for (const child of overflowChildren) {
+                child.addTo(this.container);
+                child.setIsToplevel(true);
+                if (!child.isHidden()) {
+                    shownWidgetWidth += child.getButtonWidth();
+                }
+            }
+            overflowWidgetsWidth = 0;
+            updatedChildren = true;
+        }
+        if (shownWidgetWidth >= availableWidth) {
+            // Move widgets to the overflow menu.
+            // Start with the rightmost widget, move to the leftmost
+            for (let i = this.widgetList.length - 1; i >= 0 && shownWidgetWidth >= availableWidth; i--) {
+                const child = this.widgetList[i];
+                if (this.overflowWidget.hasAsChild(child)) {
+                    continue;
+                }
+                if (child.canBeInOverflowMenu()) {
+                    shownWidgetWidth -= child.getButtonWidth();
+                    this.overflowWidget.addToOverflow(child);
+                }
+            }
+            updatedChildren = true;
+        }
+        // Hide/show the overflow widget.
+        this.overflowWidget.setHidden(this.overflowWidget.getChildWidgets().length === 0);
+        if (updatedChildren) {
+            this.setupColorPickers();
+        }
+    }
+    /**
+     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+     * (i.e. its `addTo` method should not have been called).
+     *
+     * @example
+     * ```ts
+     * const toolbar = editor.addToolbar();
+     * const insertImageWidget = new InsertImageWidget(editor);
+     * toolbar.addWidget(insertImageWidget);
+     * ```
+     */
+    addWidget(widget) {
+        // Prevent name collisions
+        const id = widget.getUniqueIdIn(this.widgetsById);
+        // Add the widget
+        this.widgetsById[id] = widget;
+        this.widgetList.push(widget);
+        // Add HTML elements.
+        const container = widget.addTo(this.container);
+        this.setupColorPickers();
+        // Ensure that the widget gets displayed in the correct
+        // place in the toolbar, even if it's removed and re-added.
+        container.style.order = `${this.widgetOrderCounter++}`;
+        this.queueReLayout();
+    }
+    /**
+     * Adds a spacer.
+     *
+     * @example
+     * Adding a save button that moves to the very right edge of the toolbar
+     * while keeping the other buttons centered:
+     * ```ts
+     * const toolbar = editor.addToolbar(false);
+     *
+     * toolbar.addSpacer({ grow: 1 });
+     * toolbar.addDefaults();
+     * toolbar.addSpacer({ grow: 1 });
+     *
+     * toolbar.addActionButton({
+     * 	label: 'Save',
+     * 	icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     * 	  saveCallback();
+     * });
+     * ```
+     */
+    addSpacer(options = {}) {
+        const spacer = document.createElement('div');
+        spacer.classList.add(`${exports.toolbarCSSPrefix}spacer`);
+        if (options.grow) {
+            spacer.style.flexGrow = `${options.grow}`;
+        }
+        if (options.minSize) {
+            spacer.style.minWidth = options.minSize;
+        }
+        if (options.maxSize) {
+            spacer.style.maxWidth = options.maxSize;
+        }
+        spacer.style.order = `${this.widgetOrderCounter++}`;
+        this.container.appendChild(spacer);
+    }
+    serializeState() {
+        const result = {};
+        for (const widgetId in this.widgetsById) {
+            result[widgetId] = this.widgetsById[widgetId].serializeState();
+        }
+        return JSON.stringify(result);
+    }
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
+    deserializeState(state) {
+        const data = JSON.parse(state);
+        for (const widgetId in data) {
+            if (!(widgetId in this.widgetsById)) {
+                console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
+            }
+            this.widgetsById[widgetId].deserializeFrom(data[widgetId]);
+        }
+    }
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title, command, mustBeToplevel = true) {
+        const titleString = typeof title === 'string' ? title : title.label;
+        const widgetId = 'action-button';
+        const makeIcon = () => {
+            if (typeof title === 'string') {
+                return null;
+            }
+            return title.icon;
+        };
+        const widget = new ActionButtonWidget_1.default(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
+        this.addWidget(widget);
+        return widget;
+    }
+    addUndoRedoButtons() {
+        const undoButton = this.addActionButton({
+            label: this.localizationTable.undo,
+            icon: this.editor.icons.makeUndoIcon()
+        }, () => {
+            this.editor.history.undo();
+        });
+        const redoButton = this.addActionButton({
+            label: this.localizationTable.redo,
+            icon: this.editor.icons.makeRedoIcon(),
+        }, () => {
+            this.editor.history.redo();
+        });
+        undoButton.setDisabled(true);
+        redoButton.setDisabled(true);
+        this.editor.notifier.on(types_1.EditorEventType.UndoRedoStackUpdated, event => {
+            if (event.kind !== types_1.EditorEventType.UndoRedoStackUpdated) {
+                throw new Error('Wrong event type!');
+            }
+            undoButton.setDisabled(event.undoStackSize === 0);
+            redoButton.setDisabled(event.redoStackSize === 0);
+        });
+    }
+    addDefaultToolWidgets() {
+        const toolController = this.editor.toolController;
+        for (const tool of toolController.getMatchingTools(Pen_1.default)) {
+            const widget = new PenToolWidget_1.default(this.editor, tool, this.localizationTable);
+            this.addWidget(widget);
+        }
+        for (const tool of toolController.getMatchingTools(Eraser_1.default)) {
+            this.addWidget(new EraserToolWidget_1.default(this.editor, tool, this.localizationTable));
+        }
+        for (const tool of toolController.getMatchingTools(SelectionTool_1.default)) {
+            this.addWidget(new SelectionToolWidget_1.default(this.editor, tool, this.localizationTable));
+        }
+        for (const tool of toolController.getMatchingTools(TextTool_1.default)) {
+            this.addWidget(new TextToolWidget_1.default(this.editor, tool, this.localizationTable));
+        }
+        const panZoomTool = toolController.getMatchingTools(PanZoom_1.default)[0];
+        if (panZoomTool) {
+            this.addWidget(new HandToolWidget_1.default(this.editor, panZoomTool, this.localizationTable));
+        }
+        this.addWidget(new InsertImageWidget_1.default(this.editor, this.localizationTable));
+    }
+    addDefaultActionButtons() {
+        this.addWidget(new DocumentPropertiesWidget_1.default(this.editor, this.localizationTable));
+        this.addUndoRedoButtons();
+    }
+    /**
+     * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
+     * that this widget is in the correct space (if shown).
+     *
+     * @example
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     * shows the overflow widget between the default tool widgets and the default action buttons,
+     * if shown.
+     */
+    addOverflowWidget() {
+        this.overflowWidget = new OverflowWidget_1.default(this.editor, this.localizationTable);
+        this.addWidget(this.overflowWidget);
+    }
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults() {
+        this.addDefaultToolWidgets();
+        this.addOverflowWidget();
+        this.addDefaultActionButtons();
+    }
+    remove() {
+        this.container.remove();
+        this.resizeObserver.disconnect();
+        for (const listener of this.listeners) {
+            listener.remove();
+        }
+    }
+}
+exports.default = HTMLToolbar;
+HTMLToolbar.colorisStarted = false;