js-draw 0.20.0 → 0.22.0

package/dist/mjs/src/math/Path.mjs

@@ -4,6 +4,7 @@ import  LineSegment2  from './LineSegment2.mjs';
 import  Mat33  from './Mat33.mjs';
 import  Rect2  from './Rect2.mjs';
 import  { Vec2 }  from './Vec2.mjs';
+import  Vec3  from './Vec3.mjs';
 export var PathCommandType;
 (function (PathCommandType) {
     PathCommandType[PathCommandType["LineTo"] = 0] = "LineTo";
@@ -11,7 +12,24 @@ export var PathCommandType;
     PathCommandType[PathCommandType["CubicBezierTo"] = 2] = "CubicBezierTo";
     PathCommandType[PathCommandType["QuadraticBezierTo"] = 3] = "QuadraticBezierTo";
 })(PathCommandType || (PathCommandType = {}));
-export default class Path {
+// Returns the bounding box of one path segment.
+const getPartBBox = (part) => {
+    let partBBox;
+    if (part instanceof LineSegment2) {
+        partBBox = part.bbox;
+    }
+    else if (part instanceof Bezier) {
+        const bbox = part.bbox();
+        const width = bbox.x.max - bbox.x.min;
+        const height = bbox.y.max - bbox.y.min;
+        partBBox = new Rect2(bbox.x.min, bbox.y.min, width, height);
+    }
+    else {
+        partBBox = new Rect2(part.x, part.y, 0, 0);
+    }
+    return partBBox;
+};
+class Path {
     constructor(startPoint, parts) {
         this.startPoint = startPoint;
         this.parts = parts;
@@ -26,6 +44,13 @@ export default class Path {
             this.bbox = this.bbox.union(Path.computeBBoxForSegment(startPoint, part));
         }
     }
+    getExactBBox() {
+        const bboxes = [];
+        for (const part of this.geometry) {
+            bboxes.push(getPartBBox(part));
+        }
+        return Rect2.union(...bboxes);
+    }
     // Lazy-loads and returns this path's geometry
     get geometry() {
         if (this.cachedGeometry) {
@@ -48,6 +73,7 @@ export default class Path {
                     startPoint = part.point;
                     break;
                 case PathCommandType.MoveTo:
+                    geometry.push(part.point);
                     startPoint = part.point;
                     break;
             }
@@ -103,11 +129,197 @@ export default class Path {
         }
         return Rect2.bboxOf(points);
     }
-    intersection(line) {
-        if (!line.bbox.intersects(this.bbox)) {
+    /**
+     * Let `S` be a closed path a distance `strokeRadius` from this path.
+     *
+     * @returns Approximate intersections of `line` with `S` using ray marching, starting from
+     * 	        both end points of `line` and each point in `additionalRaymarchStartPoints`.
+     */
+    raymarchIntersectionWith(line, strokeRadius, additionalRaymarchStartPoints = []) {
+        var _a, _b;
+        // No intersection between bounding boxes: No possible intersection
+        // of the interior.
+        if (!line.bbox.intersects(this.bbox.grownBy(strokeRadius))) {
+            return [];
+        }
+        const lineLength = line.length;
+        const partDistFunctionRecords = [];
+        // Determine distance functions for all parts that the given line could possibly intersect with
+        for (const part of this.geometry) {
+            const bbox = getPartBBox(part).grownBy(strokeRadius);
+            if (!bbox.intersects(line.bbox)) {
+                continue;
+            }
+            // Signed distance function
+            let partDist;
+            if (part instanceof LineSegment2) {
+                partDist = (point) => part.distance(point);
+            }
+            else if (part instanceof Vec3) {
+                partDist = (point) => part.minus(point).magnitude();
+            }
+            else {
+                partDist = (point) => {
+                    return part.project(point).d;
+                };
+            }
+            // Part signed distance function (negative result implies `point` is
+            // inside the shape).
+            const partSdf = (point) => partDist(point) - strokeRadius;
+            // If the line can't possibly intersect the part,
+            if (partSdf(line.p1) > lineLength && partSdf(line.p2) > lineLength) {
+                continue;
+            }
+            partDistFunctionRecords.push({
+                part,
+                distFn: partDist,
+                bbox,
+            });
+        }
+        // If no distance functions, there are no intersections.
+        if (partDistFunctionRecords.length === 0) {
             return [];
         }
+        // Returns the minimum distance to a part in this stroke, where only parts that the given
+        // line could intersect are considered.
+        const sdf = (point) => {
+            let minDist = Infinity;
+            let minDistPart = null;
+            const uncheckedDistFunctions = [];
+            // First pass: only curves for which the current point is inside
+            // the bounding box.
+            for (const distFnRecord of partDistFunctionRecords) {
+                const { part, distFn, bbox } = distFnRecord;
+                // Check later if the current point isn't in the bounding box.
+                if (!bbox.containsPoint(point)) {
+                    uncheckedDistFunctions.push(distFnRecord);
+                    continue;
+                }
+                const currentDist = distFn(point);
+                if (currentDist <= minDist) {
+                    minDist = currentDist;
+                    minDistPart = part;
+                }
+            }
+            // Second pass: Everything else
+            for (const { part, distFn, bbox } of uncheckedDistFunctions) {
+                // Skip if impossible for the distance to the target to be lesser than
+                // the current minimum.
+                if (!bbox.grownBy(minDist).containsPoint(point)) {
+                    continue;
+                }
+                const currentDist = distFn(point);
+                if (currentDist <= minDist) {
+                    minDist = currentDist;
+                    minDistPart = part;
+                }
+            }
+            return [minDistPart, minDist - strokeRadius];
+        };
+        // Raymarch:
+        const maxRaymarchSteps = 7;
+        // Start raymarching from each of these points. This allows detection of multiple
+        // intersections.
+        const startPoints = [
+            line.p1, ...additionalRaymarchStartPoints, line.p2
+        ];
+        // Converts a point ON THE LINE to a parameter
+        const pointToParameter = (point) => {
+            // Because line.direction is a unit vector, this computes the length
+            // of the projection of the vector(line.p1->point) onto line.direction.
+            //
+            // Note that this can be negative if the given point is outside of the given
+            // line segment.
+            return point.minus(line.p1).dot(line.direction);
+        };
+        // Sort start points by parameter on the line.
+        // This allows us to determine whether the current value of a parameter
+        // drops down to a value already tested.
+        startPoints.sort((a, b) => {
+            const t_a = pointToParameter(a);
+            const t_b = pointToParameter(b);
+            // Sort in increasing order
+            return t_a - t_b;
+        });
         const result = [];
+        const stoppingThreshold = strokeRadius / 1000;
+        // Returns the maximum x value explored
+        const raymarchFrom = (startPoint, 
+        // Direction to march in (multiplies line.direction)
+        directionMultiplier, 
+        // Terminate if the current point corresponds to a parameter
+        // below this.
+        minimumLineParameter) => {
+            let currentPoint = startPoint;
+            let [lastPart, lastDist] = sdf(currentPoint);
+            let lastParameter = pointToParameter(currentPoint);
+            if (lastDist > lineLength) {
+                return lastParameter;
+            }
+            const direction = line.direction.times(directionMultiplier);
+            for (let i = 0; i < maxRaymarchSteps; i++) {
+                // Step in the direction of the edge of the shape.
+                const step = lastDist;
+                currentPoint = currentPoint.plus(direction.times(step));
+                lastParameter = pointToParameter(currentPoint);
+                // If we're below the minimum parameter, stop. We've already tried
+                // this.
+                if (lastParameter <= minimumLineParameter) {
+                    return lastParameter;
+                }
+                const [currentPart, signedDist] = sdf(currentPoint);
+                // Ensure we're stepping in the correct direction.
+                // Note that because we could start with a negative distance and work towards a
+                // positive distance, we need absolute values here.
+                if (Math.abs(signedDist) > Math.abs(lastDist)) {
+                    // If not, stop.
+                    return null;
+                }
+                lastDist = signedDist;
+                lastPart = currentPart;
+                // Is the distance close enough that we can stop early?
+                if (Math.abs(lastDist) < stoppingThreshold) {
+                    break;
+                }
+            }
+            // Ensure that the point we ended with is on the line.
+            const isOnLineSegment = lastParameter >= 0 && lastParameter <= lineLength;
+            if (lastPart && isOnLineSegment && Math.abs(lastDist) < stoppingThreshold) {
+                result.push({
+                    point: currentPoint,
+                    parameterValue: NaN,
+                    curve: lastPart,
+                });
+            }
+            return lastParameter;
+        };
+        // The maximum value of the line's parameter explored so far (0 corresponds to
+        // line.p1)
+        let maxLineT = 0;
+        // Raymarch for each start point.
+        //
+        // Use a for (i from 0 to length) loop because startPoints may be added
+        // during iteration.
+        for (let i = 0; i < startPoints.length; i++) {
+            const startPoint = startPoints[i];
+            // Try raymarching in both directions.
+            maxLineT = Math.max(maxLineT, (_a = raymarchFrom(startPoint, 1, maxLineT)) !== null && _a !== void 0 ? _a : maxLineT);
+            maxLineT = Math.max(maxLineT, (_b = raymarchFrom(startPoint, -1, maxLineT)) !== null && _b !== void 0 ? _b : maxLineT);
+        }
+        return result;
+    }
+    /**
+     * Returns a list of intersections with this path. If `strokeRadius` is given,
+     * intersections are approximated with the surface `strokeRadius` away from this.
+     *
+     * If `strokeRadius > 0`, the resultant `parameterValue` has no defined value.
+     */
+    intersection(line, strokeRadius) {
+        let result = [];
+        // Is any intersection between shapes within the bounding boxes impossible?
+        if (!line.bbox.intersects(this.bbox.grownBy(strokeRadius !== null && strokeRadius !== void 0 ? strokeRadius : 0))) {
+            return [];
+        }
         for (const part of this.geometry) {
             if (part instanceof LineSegment2) {
                 const intersection = part.intersection(line);
@@ -119,7 +331,7 @@ export default class Path {
                     });
                 }
             }
-            else {
+            else if (part instanceof Bezier) {
                 const intersectionPoints = part.intersects(line).map(t => {
                     // We're using the .intersects(line) function, which is documented
                     // to always return numbers. However, to satisfy the type checker (and
@@ -142,6 +354,15 @@ export default class Path {
                 result.push(...intersectionPoints);
             }
         }
+        // If given a non-zero strokeWidth, attempt to raymarch.
+        // Even if raymarching, we need to collect starting points.
+        // We use the above-calculated intersections for this.
+        const doRaymarching = strokeRadius && strokeRadius > 1e-8;
+        if (doRaymarching) {
+            // Starting points for raymarching (in addition to the end points of the line).
+            const startPoints = result.map(intersection => intersection.point);
+            result = this.raymarchIntersectionWith(line, strokeRadius, startPoints);
+        }
         return result;
     }
     static mapPathCommand(part, mapping) {
@@ -646,3 +867,4 @@ export default class Path {
     }
 }
 Path.empty = new Path(Vec2.zero, []);
+export default Path;

package/dist/mjs/src/math/Rect2.mjs

@@ -1,7 +1,7 @@
 import  LineSegment2  from './LineSegment2.mjs';
 import  { Vec2 }  from './Vec2.mjs';
 // invariant: w ≥ 0, h ≥ 0.
-export default class Rect2 {
+class Rect2 {
     constructor(x, y, w, h) {
         this.x = x;
         this.y = y;
@@ -68,9 +68,7 @@ export default class Rect2 {
     }
     // Returns a new rectangle containing both [this] and [other].
     union(other) {
-        const topLeft = this.topLeft.zip(other.topLeft, Math.min);
-        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.max);
-        return Rect2.fromCorners(topLeft, bottomRight);
+        return Rect2.union(this, other);
     }
     // Returns a the subdivision of this into [columns] columns
     // and [rows] rows. For example,
@@ -108,6 +106,9 @@ export default class Rect2 {
     }
     // Returns this grown by [margin] in both the x and y directions.
     grownBy(margin) {
+        if (margin === 0) {
+            return this;
+        }
         return new Rect2(this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2);
     }
     getClosestPointOnBoundaryTo(target) {
@@ -226,3 +227,4 @@ export default class Rect2 {
 }
 Rect2.empty = new Rect2(0, 0, 0, 0);
 Rect2.unitSquare = new Rect2(0, 0, 1, 1);
+export default Rect2;

package/dist/mjs/src/math/Vec3.mjs

@@ -3,7 +3,7 @@
  *
  * A `Vec3` is immutable.
  */
-export default class Vec3 {
+class Vec3 {
     constructor(x, y, z) {
         this.x = x;
         this.y = y;
@@ -172,3 +172,4 @@ Vec3.unitX = Vec3.of(1, 0, 0);
 Vec3.unitY = Vec3.of(0, 1, 0);
 Vec3.unitZ = Vec3.of(0, 0, 1);
 Vec3.zero = Vec3.of(0, 0, 0);
+export default Vec3;

package/dist/mjs/src/math/polynomial/QuadraticBezier.d.ts

@@ -21,7 +21,7 @@ export default class QuadraticBezier {
      */
     approximateDistance(point: Point2): number;
     /**
-     * @returns the exact distance from `point` to this.
+     * @returns the (more) exact distance from `point` to this.
      */
     distance(point: Point2): number;
     normal(t: number): Vec2;

package/dist/mjs/src/math/polynomial/QuadraticBezier.mjs

@@ -92,15 +92,14 @@ export default class QuadraticBezier {
         return Math.sqrt(Math.min(sqrDist1, sqrDist2, sqrDist3, sqrDist4));
     }
     /**
-     * @returns the exact distance from `point` to this.
+     * @returns the (more) exact distance from `point` to this.
      */
     distance(point) {
         if (!this.bezierJs) {
             this.bezierJs = new Bezier([this.p0.xy, this.p1.xy, this.p2.xy]);
         }
-        const proj = Vec2.ofXY(this.bezierJs.project(point.xy));
-        const dist = proj.minus(point).magnitude();
-        return dist;
+        // .d: Distance
+        return this.bezierJs.project(point.xy).d;
     }
     normal(t) {
         const tangent = this.derivativeAt(t);

package/dist/mjs/src/rendering/Display.d.ts

@@ -53,7 +53,7 @@ export default class Display {
      */
     rerenderAsText(): void;
     /**
-     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     * Clears the main drawing surface and otherwise prepares for a rerender.
      *
      * @returns the dry ink renderer.
      */

package/dist/mjs/src/rendering/Display.mjs

@@ -170,14 +170,13 @@ export default class Display {
         }
     }
     /**
-     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     * Clears the main drawing surface and otherwise prepares for a rerender.
      *
      * @returns the dry ink renderer.
      */
     startRerender() {
         var _a;
         (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.wetInkRenderer.clear();
         this.dryInkRenderer.clear();
         return this.dryInkRenderer;
     }

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

@@ -22,6 +22,8 @@ export default class HTMLToolbar {
     private updateColoris;
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    private closeColorPickerOverlay;
+    private setupCloseColorPickerOverlay;
     setupColorPickers(): void;
     private reLayoutQueued;
     private queueReLayout;

package/dist/mjs/src/toolbar/HTMLToolbar.mjs

@@ -1,5 +1,5 @@
 import  { EditorEventType }  from '../types.mjs';
-import { coloris, init as colorisInit } from '@melloware/coloris';
+import { coloris, close as closeColoris, init as colorisInit } from '@melloware/coloris';
 import  Color4  from '../Color4.mjs';
 import  { defaultToolbarLocalization }  from './localization.mjs';
 import  SelectionTool  from '../tools/SelectionTool/SelectionTool.mjs';
@@ -16,8 +16,9 @@ import  ActionButtonWidget  from './widgets/ActionButtonWidget.mjs';
 import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
 import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
 import  OverflowWidget  from './widgets/OverflowWidget.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
 export const toolbarCSSPrefix = 'toolbar-';
-export default class HTMLToolbar {
+class HTMLToolbar {
     /** @internal */
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
@@ -30,6 +31,7 @@ export default class HTMLToolbar {
         // Widget to toggle overflow menu.
         this.overflowWidget = null;
         this.updateColoris = null;
+        this.closeColorPickerOverlay = null;
         this.reLayoutQueued = false;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}root`);
@@ -50,6 +52,68 @@ export default class HTMLToolbar {
             console.warn('ResizeObserver not supported. Toolbar will not resize.');
         }
     }
+    setupCloseColorPickerOverlay() {
+        if (this.closeColorPickerOverlay)
+            return;
+        this.closeColorPickerOverlay = document.createElement('div');
+        this.closeColorPickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
+        this.editor.createHTMLOverlay(this.closeColorPickerOverlay);
+        // Buffer events: Send events to the editor only if the pointer has moved enough to
+        // suggest that the user is attempting to draw, rather than click to close the color picker.
+        let eventBuffer = [];
+        let gestureStartPos = null;
+        // Hide the color picker when attempting to draw on the overlay.
+        this.listeners.push(this.editor.handlePointerEventsFrom(this.closeColorPickerOverlay, (eventName, event) => {
+            var _a, _b;
+            // Position of the current event.
+            const currentPos = Vec2.of(event.pageX, event.pageY);
+            // Whether to send the current event to the editor
+            let sendToEditor = true;
+            if (eventName === 'pointerdown') {
+                closeColoris();
+                // Buffer the event, but don't send it to the editor yet.
+                // We don't want to send single-click events, but we do want to send full strokes.
+                eventBuffer = [];
+                eventBuffer.push([eventName, event]);
+                gestureStartPos = currentPos;
+                // Capture the pointer so we receive future events even if the overlay is hidden.
+                (_a = this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.setPointerCapture(event.pointerId);
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            else if (eventName === 'pointermove') {
+                // Skip if the pointer hasn't moved enough to not be a "click".
+                const strokeStartThreshold = 10;
+                if (gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold) {
+                    eventBuffer.push([eventName, event]);
+                    sendToEditor = false;
+                }
+                else {
+                    // Send all buffered events to the editor -- start the stroke.
+                    for (const [eventName, event] of eventBuffer) {
+                        this.editor.handleHTMLPointerEvent(eventName, event);
+                    }
+                    eventBuffer = [];
+                    sendToEditor = true;
+                }
+            }
+            // Otherwise, if we received a pointerup/pointercancel without flushing all pointerevents from the
+            // buffer, the gesture wasn't recognised as a stroke. Thus, the editor isn't expecting a pointerup/
+            // pointercancel event.
+            else if ((eventName === 'pointerup' || eventName === 'pointercancel') && eventBuffer.length > 0) {
+                (_b = this.closeColorPickerOverlay) === null || _b === void 0 ? void 0 : _b.releasePointerCapture(event.pointerId);
+                eventBuffer = [];
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            // Transfer focus to the editor to allow keyboard events to be handled.
+            if (eventName === 'pointerup') {
+                this.editor.focus();
+            }
+            // Forward all other events to the editor.
+            return sendToEditor;
+        }));
+    }
     // @internal
     setupColorPickers() {
         // Much of the setup only needs to be done once.
@@ -57,9 +121,7 @@ export default class HTMLToolbar {
             this.updateColoris();
             return;
         }
-        const closePickerOverlay = document.createElement('div');
-        closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
-        this.editor.createHTMLOverlay(closePickerOverlay);
+        this.setupCloseColorPickerOverlay();
         const maxSwatchLen = 12;
         const swatches = [
             Color4.red.toHexString(),
@@ -104,7 +166,9 @@ export default class HTMLToolbar {
             }
             // 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';
+            if (this.closeColorPickerOverlay) {
+                this.closeColorPickerOverlay.style.display = event.open ? 'block' : 'none';
+            }
         }));
         // Add newly-selected colors to the swatch.
         this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
@@ -366,11 +430,14 @@ export default class HTMLToolbar {
         this.addDefaultActionButtons();
     }
     remove() {
+        var _a;
         this.container.remove();
         this.resizeObserver.disconnect();
+        (_a = this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.remove();
         for (const listener of this.listeners) {
             listener.remove();
         }
     }
 }
 HTMLToolbar.colorisStarted = false;
+export default HTMLToolbar;

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

@@ -3,7 +3,6 @@ import BaseTool from '../../tools/BaseTool';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default abstract class BaseToolWidget extends BaseWidget {
-    protected editor: Editor;
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;

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

@@ -3,7 +3,6 @@ import  BaseWidget  from './BaseWidget.mjs';
 export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
-        this.editor = editor;
         this.targetTool = targetTool;
         editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolEnabled) {

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

@@ -37,6 +37,11 @@ export default abstract class BaseWidget {
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;
     private toolbarWidgetToggleListener;
+    /**
+     * Adds this to `parent`. This can only be called once for each ToolbarWidget.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
     addTo(parent: HTMLElement): HTMLElement;
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;

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

@@ -135,14 +135,26 @@ export default class BaseWidget {
         const id = widget.getUniqueIdIn(this.subWidgets);
         this.subWidgets[id] = widget;
     }
-    // Adds this to [parent]. This can only be called once for each ToolbarWidget.
-    // Returns the element that was just added to `parent`.
-    // @internal
+    /**
+     * Adds this to `parent`. This can only be called once for each ToolbarWidget.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
     addTo(parent) {
-        this.label.innerText = this.getTitle();
-        this.setupActionBtnClickListener(this.button);
+        // Update title and icon
         this.icon = null;
         this.updateIcon();
+        this.label.innerText = this.getTitle();
+        const longLabelCSSClass = 'long-label';
+        if (this.label.innerText.length > 7) {
+            this.label.classList.add(longLabelCSSClass);
+        }
+        else {
+            this.label.classList.remove(longLabelCSSClass);
+        }
+        // Click functionality
+        this.setupActionBtnClickListener(this.button);
+        // Clear anything already in this.container.
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);

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

@@ -7,7 +7,7 @@ import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
-export default class DocumentPropertiesWidget extends BaseWidget {
+class DocumentPropertiesWidget extends BaseWidget {
     constructor(editor, localizationTable) {
         super(editor, 'document-properties-widget', localizationTable);
         this.updateDropdownContent = () => { };
@@ -170,3 +170,4 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     }
 }
 DocumentPropertiesWidget.idCounter = 0;
+export default DocumentPropertiesWidget;

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

@@ -1,7 +1,7 @@
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
-export default class EraserToolWidget extends BaseToolWidget {
+class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
@@ -55,3 +55,4 @@ export default class EraserToolWidget extends BaseToolWidget {
     }
 }
 EraserToolWidget.nextThicknessInputId = 0;
+export default EraserToolWidget;

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

@@ -15,7 +15,7 @@ import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
 import  Mat33  from '../../math/Mat33.mjs';
 import  fileToBase64  from '../../util/fileToBase64.mjs';
 import  ActionButtonWidget  from './ActionButtonWidget.mjs';
-export default class InsertImageWidget extends ActionButtonWidget {
+class InsertImageWidget extends ActionButtonWidget {
     constructor(editor, localization) {
         localization !== null && localization !== void 0 ? localization : (localization = editor.localization);
         super(editor, 'insert-image-widget', () => editor.icons.makeInsertImageIcon(), localization.image, () => this.onClicked());
@@ -168,3 +168,4 @@ export default class InsertImageWidget extends ActionButtonWidget {
     }
 }
 InsertImageWidget.nextInputId = 0;
+export default InsertImageWidget;

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

@@ -8,7 +8,7 @@ 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 {
+class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);
         this.tool = tool;
@@ -218,3 +218,4 @@ export default class PenToolWidget extends BaseToolWidget {
     }
 }
 PenToolWidget.idCounter = 0;
+export default PenToolWidget;

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

@@ -3,7 +3,7 @@ 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 {
+class TextToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'text-tool-widget', localization);
         this.tool = tool;
@@ -107,3 +107,4 @@ export default class TextToolWidget extends BaseToolWidget {
     }
 }
 TextToolWidget.idCounter = 0;
+export default TextToolWidget;