js-draw 0.15.1 → 0.16.0

package/dist/src/math/Path.js

@@ -1,6 +1,7 @@
 import { Bezier } from 'bezier-js';
 import { toRoundedString, toStringOfSamePrecision } from './rounding';
 import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
 import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
 export var PathCommandType;
@@ -143,38 +144,39 @@ export default class Path {
         }
         return result;
     }
+    static mapPathCommand(part, mapping) {
+        switch (part.kind) {
+            case PathCommandType.MoveTo:
+            case PathCommandType.LineTo:
+                return {
+                    kind: part.kind,
+                    point: mapping(part.point),
+                };
+                break;
+            case PathCommandType.CubicBezierTo:
+                return {
+                    kind: part.kind,
+                    controlPoint1: mapping(part.controlPoint1),
+                    controlPoint2: mapping(part.controlPoint2),
+                    endPoint: mapping(part.endPoint),
+                };
+                break;
+            case PathCommandType.QuadraticBezierTo:
+                return {
+                    kind: part.kind,
+                    controlPoint: mapping(part.controlPoint),
+                    endPoint: mapping(part.endPoint),
+                };
+                break;
+        }
+        const exhaustivenessCheck = part;
+        return exhaustivenessCheck;
+    }
     mapPoints(mapping) {
         const startPoint = mapping(this.startPoint);
         const newParts = [];
-        let exhaustivenessCheck;
         for (const part of this.parts) {
-            switch (part.kind) {
-                case PathCommandType.MoveTo:
-                case PathCommandType.LineTo:
-                    newParts.push({
-                        kind: part.kind,
-                        point: mapping(part.point),
-                    });
-                    break;
-                case PathCommandType.CubicBezierTo:
-                    newParts.push({
-                        kind: part.kind,
-                        controlPoint1: mapping(part.controlPoint1),
-                        controlPoint2: mapping(part.controlPoint2),
-                        endPoint: mapping(part.endPoint),
-                    });
-                    break;
-                case PathCommandType.QuadraticBezierTo:
-                    newParts.push({
-                        kind: part.kind,
-                        controlPoint: mapping(part.controlPoint),
-                        endPoint: mapping(part.endPoint),
-                    });
-                    break;
-                default:
-                    exhaustivenessCheck = part;
-                    return exhaustivenessCheck;
-            }
+            newParts.push(Path.mapPathCommand(part, mapping));
         }
         return new Path(startPoint, newParts);
     }
@@ -329,6 +331,56 @@ export default class Path {
             path: this,
         };
     }
+    /**
+     * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+     */
+    static visualEquivalent(renderablePath, visibleRect) {
+        var _a, _b;
+        const path = Path.fromRenderable(renderablePath);
+        const strokeWidth = (_b = (_a = renderablePath.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+        const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+        // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+        const expandedRect = visibleRect.grownBy(strokeWidth)
+            .transformedBoundingBox(Mat33.scaling2D(2, visibleRect.center));
+        // TODO: Handle simplifying very small paths.
+        if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+            return renderablePath;
+        }
+        const parts = [];
+        let startPoint = path.startPoint;
+        for (const part of path.parts) {
+            const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+            let endPoint;
+            if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+                endPoint = part.point;
+            }
+            else {
+                endPoint = part.endPoint;
+            }
+            const intersectsVisible = partBBox.intersects(visibleRect);
+            if (intersectsVisible) {
+                // TODO: Can we trim parts of paths that intersect the visible rectangle?
+                parts.push(part);
+            }
+            else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
+                // We're stroking (not filling) and the path doesn't intersect the bounding box.
+                // Don't draw it, but preserve the endpoints.
+                parts.push({
+                    kind: PathCommandType.MoveTo,
+                    point: endPoint,
+                });
+            }
+            else {
+                // Otherwise, we may be filling. Try to roughly preserve the filled region.
+                parts.push({
+                    kind: PathCommandType.LineTo,
+                    point: endPoint,
+                });
+            }
+            startPoint = endPoint;
+        }
+        return new Path(path.startPoint, parts).toRenderable(renderablePath.style);
+    }
     toString(useNonAbsCommands) {
         if (this.cachedStringVersion) {
             return this.cachedStringVersion;

package/dist/src/math/Vec3.js

@@ -65,7 +65,7 @@ export default class Vec3 {
         return Vec3.of(this.x + v.x, this.y + v.y, this.z + v.z);
     }
     minus(v) {
-        return this.plus(v.times(-1));
+        return Vec3.of(this.x - v.x, this.y - v.y, this.z - v.z);
     }
     dot(other) {
         return this.x * other.x + this.y * other.y + this.z * other.z;

package/dist/src/rendering/Display.js

@@ -70,7 +70,7 @@ export default class Display {
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
-            maxScale: 1.4,
+            maxScale: 1.3,
             // Require about 20 strokes with 4 parts each to cache an image in one of the
             // parts of the cache grid.
             minProportionalRenderTimePerCache: 20 * 4,

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,3 +1,4 @@
+import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand } from '../../math/Path';
@@ -41,8 +42,19 @@ export default abstract class AbstractRenderer {
     private flushPath;
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
+    fillRect(rect: Rect2, fill: Color4): void;
     startObject(_boundingBox: Rect2, _clip?: boolean): void;
-    endObject(_loaderData?: LoadSaveDataTable): void;
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData?: LoadSaveDataTable, _objectTags?: string[]): void;
     protected getNestingLevel(): number;
     abstract drawPoints(...points: Point2[]): void;
     canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -64,19 +64,34 @@ export default class AbstractRenderer {
             this.currentPaths.push(path);
         }
     }
-    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+    // Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
     // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
     drawRect(rect, lineWidth, lineFill) {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));
     }
-    // Note the start/end of an object with the given bounding box.
+    // Fills a rectangle.
+    fillRect(rect, fill) {
+        const path = Path.fromRect(rect);
+        this.drawPath(path.toRenderable({ fill }));
+    }
+    // Note the start of an object with the given bounding box.
     // Renderers are not required to support [clip]
     startObject(_boundingBox, _clip) {
         this.currentPaths = [];
         this.objectLevel++;
     }
-    endObject(_loaderData) {
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData, _objectTags) {
         // Render the paths all at once
         this.flushPath();
         this.currentPaths = null;

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -10,6 +10,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
     private ignoringObject;
+    private currentObjectBBox;
     private minSquareCurveApproxDist;
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
@@ -30,7 +31,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     private clipLevels;
-    startObject(boundingBox: Rect2, clip: boolean): void;
+    startObject(boundingBox: Rect2, clip?: boolean): void;
     endObject(): void;
     drawPoints(...points: Point2[]): void;
     isTooSmallToRender(rect: Rect2): boolean;

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,5 +1,6 @@
 import Color4 from '../../Color4';
 import TextComponent from '../../components/TextComponent';
+import Path from '../../math/Path';
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -8,6 +9,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx = ctx;
         this.ignoreObjectsAboveLevel = null;
         this.ignoringObject = false;
+        this.currentObjectBBox = null;
         this.clipLevels = [];
         this.setDraftMode(false);
     }
@@ -43,8 +45,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         else {
             this.minSquareCurveApproxDist = 0.5;
-            this.minRenderSizeBothDimens = 0.3;
-            this.minRenderSizeAnyDimen = 1e-5;
+            this.minRenderSizeBothDimens = 0.2;
+            this.minRenderSizeAnyDimen = 1e-6;
         }
     }
     displaySize() {
@@ -106,9 +108,15 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
     }
     drawPath(path) {
+        var _a;
         if (this.ignoringObject) {
             return;
         }
+        // If part of a huge object, it might be worth trimming the path
+        if ((_a = this.currentObjectBBox) === null || _a === void 0 ? void 0 : _a.containsRect(this.getViewport().visibleRect)) {
+            // Try to trim/remove parts of the path outside of the bounding box.
+            path = Path.visualEquivalent(path, this.getViewport().visibleRect);
+        }
         super.drawPath(path);
     }
     drawText(text, transform, style) {
@@ -140,6 +148,7 @@ export default class CanvasRenderer extends AbstractRenderer {
             this.ignoringObject = true;
         }
         super.startObject(boundingBox);
+        this.currentObjectBBox = boundingBox;
         if (!this.ignoringObject && clip) {
             this.clipLevels.push(this.objectLevel);
             this.ctx.save();
@@ -158,6 +167,7 @@ export default class CanvasRenderer extends AbstractRenderer {
                 this.clipLevels.pop();
             }
         }
+        this.currentObjectBBox = null;
         super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -28,7 +28,7 @@ export default class SVGRenderer extends AbstractRenderer {
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
-    endObject(loaderData?: LoadSaveDataTable): void;
+    endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;
     private unimplementedMessage;
     protected beginPath(_startPoint: Point2): void;
     protected endPath(_style: RenderingStyle): void;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -215,8 +215,8 @@ export default class SVGRenderer extends AbstractRenderer {
         this.textParentStyle = null;
         this.objectElems = [];
     }
-    endObject(loaderData) {
-        var _a;
+    endObject(loaderData, elemClassNames) {
+        var _a, _b;
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
@@ -237,6 +237,12 @@ export default class SVGRenderer extends AbstractRenderer {
                 }
             }
         }
+        // Add class names to the object, if given.
+        if (elemClassNames) {
+            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
+                elem.classList.add(...elemClassNames);
+            }
+        }
     }
     // Not implemented -- use drawPath instead.
     unimplementedMessage() { throw new Error('Not implemenented!'); }

package/dist/src/testing/sendTouchEvent.d.ts

@@ -0,0 +1,6 @@
+import Editor from '../Editor';
+import { Vec2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { InputEvtType } from '../types';
+declare const sendTouchEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
+export default sendTouchEvent;

package/dist/src/testing/sendTouchEvent.js

@@ -0,0 +1,26 @@
+import Pointer, { PointerDevice } from '../Pointer';
+import { InputEvtType } from '../types';
+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.ofCanvasPoint(canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch);
+    editor.toolController.dispatchInputEvent({
+        kind: eventType,
+        allPointers: [
+            ...(allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []),
+            mainPointer,
+        ],
+        current: mainPointer,
+    });
+    return mainPointer;
+};
+export default sendTouchEvent;

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

@@ -12,12 +12,19 @@ export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
-    private widgets;
+    private resizeObserver;
+    private listeners;
+    private widgetsById;
+    private widgetList;
+    private overflowWidget;
     private static colorisStarted;
     private updateColoris;
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
+    private reLayoutQueued;
+    private queueReLayout;
+    private reLayout;
     /**
      * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
      * (i.e. its `addTo` method should not have been called).
@@ -63,17 +70,33 @@ export default class HTMLToolbar {
      *
      * @return The added button.
      */
-    addActionButton(title: string | ActionButtonIcon, command: () => void): BaseWidget;
+    addActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
     addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;
+    /**
+     * 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(): void;
     /**
      * Adds both the default tool widgets and action buttons. Equivalent to
      * ```ts
      * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
      * toolbar.addDefaultActionButtons();
      * ```
      */
     addDefaults(): void;
+    remove(): void;
 }
 export {};

package/dist/src/toolbar/HTMLToolbar.js

@@ -14,14 +14,21 @@ import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
 import ActionButtonWidget from './widgets/ActionButtonWidget';
 import InsertImageWidget from './widgets/InsertImageWidget';
+import DocumentPropertiesWidget from './widgets/DocumentPropertiesWidget';
+import OverflowWidget from './widgets/OverflowWidget';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
         this.localizationTable = localizationTable;
-        this.widgets = {};
+        this.listeners = [];
+        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(`${toolbarCSSPrefix}root`);
         this.container.setAttribute('role', 'toolbar');
@@ -31,6 +38,15 @@ export default class HTMLToolbar {
             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() {
@@ -80,20 +96,84 @@ export default class HTMLToolbar {
                 initColoris();
             }
         };
-        this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+        this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
             if (event.kind !== 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.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
+        this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
             if (event.kind === 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;
+        };
+        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 (shownWidgetWidth + overflowWidgetsWidth <= availableWidth) {
+            // 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();
+                }
+            }
+            this.overflowWidget.setHidden(true);
+            overflowWidgetsWidth = 0;
+            updatedChildren = true;
+        }
+        if (shownWidgetWidth >= availableWidth) {
+            // Move widgets to the overflow menu.
+            this.overflowWidget.setHidden(false);
+            // 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;
+        }
+        if (updatedChildren) {
+            this.setupColorPickers();
+        }
     }
     /**
      * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
@@ -108,12 +188,17 @@ export default class HTMLToolbar {
      */
     addWidget(widget) {
         // Prevent name collisions
-        const id = widget.getUniqueIdIn(this.widgets);
+        const id = widget.getUniqueIdIn(this.widgetsById);
         // Add the widget
-        this.widgets[id] = widget;
+        this.widgetsById[id] = widget;
+        this.widgetList.push(widget);
         // Add HTML elements.
-        widget.addTo(this.container);
+        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.widgetList.length}`;
+        this.queueReLayout();
     }
     /**
      * Adds a spacer.
@@ -152,8 +237,8 @@ export default class HTMLToolbar {
     }
     serializeState() {
         const result = {};
-        for (const widgetId in this.widgets) {
-            result[widgetId] = this.widgets[widgetId].serializeState();
+        for (const widgetId in this.widgetsById) {
+            result[widgetId] = this.widgetsById[widgetId].serializeState();
         }
         return JSON.stringify(result);
     }
@@ -164,10 +249,10 @@ export default class HTMLToolbar {
     deserializeState(state) {
         const data = JSON.parse(state);
         for (const widgetId in data) {
-            if (!(widgetId in this.widgets)) {
+            if (!(widgetId in this.widgetsById)) {
                 console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
             }
-            this.widgets[widgetId].deserializeFrom(data[widgetId]);
+            this.widgetsById[widgetId].deserializeFrom(data[widgetId]);
         }
     }
     /**
@@ -175,7 +260,7 @@ export default class HTMLToolbar {
      *
      * @return The added button.
      */
-    addActionButton(title, command) {
+    addActionButton(title, command, mustBeToplevel = true) {
         const titleString = typeof title === 'string' ? title : title.label;
         const widgetId = 'action-button';
         const makeIcon = () => {
@@ -184,7 +269,7 @@ export default class HTMLToolbar {
             }
             return title.icon;
         };
-        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization);
+        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
         this.addWidget(widget);
         return widget;
     }
@@ -226,25 +311,52 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(TextTool)) {
             this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
         }
-        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
         const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
         if (panZoomTool) {
             this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
         }
+        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
     }
     addDefaultActionButtons() {
+        this.addWidget(new DocumentPropertiesWidget(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(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();
+        }
+    }
 }
 HTMLToolbar.colorisStarted = false;

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

@@ -57,4 +57,6 @@ export default class IconProvider {
     makePasteIcon(): IconType;
     makeDeleteSelectionIcon(): IconType;
     makeSaveIcon(): IconType;
+    makeConfigureDocumentIcon(): IconType;
+    makeOverflowIcon(): IconType;
 }