js-draw 0.25.1 → 1.0.0

package/dist/mjs/components/util/StrokeSmoother.mjs

@@ -1,10 +1,7 @@
-import  { Vec2 }  from '../../math/Vec2.mjs';
-import  Rect2  from '../../math/shapes/Rect2.mjs';
-import  LineSegment2  from '../../math/shapes/LineSegment2.mjs';
-import  QuadraticBezier  from '../../math/shapes/QuadraticBezier.mjs';
+import { Vec2, Rect2, LineSegment2, QuadraticBezier } from '@js-draw/math';
 // Handles stroke smoothing
-var StrokeSmoother = /** @class */ (function () {
-    function StrokeSmoother(startPoint, 
+export class StrokeSmoother {
+    constructor(startPoint, 
     // Maximum distance from the actual curve (irrespective of stroke width)
     // for which a point is considered 'part of the curve'.
     // Note that the maximum will be smaller if the stroke width is less than
@@ -24,34 +21,34 @@ var StrokeSmoother = /** @class */ (function () {
         this.curveStartWidth = startPoint.width;
         this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
     }
-    StrokeSmoother.prototype.getBBox = function () {
+    getBBox() {
         return this.bbox;
-    };
-    StrokeSmoother.prototype.preview = function () {
+    }
+    preview() {
         if (!this.currentCurve) {
             return null;
         }
         return this.currentSegmentToPath();
-    };
+    }
     // Returns the distance between the start, control, and end points of the curve.
-    StrokeSmoother.prototype.approxCurrentCurveLength = function () {
+    approxCurrentCurveLength() {
         if (!this.currentCurve) {
             return 0;
         }
-        var startPt = this.currentCurve.p0;
-        var controlPt = this.currentCurve.p1;
-        var endPt = this.currentCurve.p2;
-        var toControlDist = startPt.minus(controlPt).length();
-        var toEndDist = endPt.minus(controlPt).length();
+        const startPt = this.currentCurve.p0;
+        const controlPt = this.currentCurve.p1;
+        const endPt = this.currentCurve.p2;
+        const toControlDist = startPt.minus(controlPt).length();
+        const toEndDist = endPt.minus(controlPt).length();
         return toControlDist + toEndDist;
-    };
-    StrokeSmoother.prototype.finalizeCurrentCurve = function () {
+    }
+    finalizeCurrentCurve() {
         // Case where no points have been added
         if (!this.currentCurve) {
             return;
         }
         this.onCurveAdded(this.currentSegmentToPath());
-        var lastPoint = this.buffer[this.buffer.length - 1];
+        const lastPoint = this.buffer[this.buffer.length - 1];
         this.lastExitingVec = this.currentCurve.p2.minus(this.currentCurve.p1);
         console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
         // Use the last two points to start a new curve (the last point isn't used
@@ -61,38 +58,36 @@ var StrokeSmoother = /** @class */ (function () {
         ];
         this.currentCurve = null;
         this.isFirstSegment = false;
-    };
+    }
     // Returns [upper curve, connector, lower curve]
-    StrokeSmoother.prototype.currentSegmentToPath = function () {
+    currentSegmentToPath() {
         if (this.currentCurve == null) {
             throw new Error('Invalid State: currentCurve is null!');
         }
-        var startVec = this.currentCurve.normal(0).normalized();
+        const startVec = this.currentCurve.normal(0).normalized();
         if (!isFinite(startVec.magnitude())) {
-            throw new Error("startVec(".concat(startVec, ") is NaN or \u221E"));
+            throw new Error(`startVec(${startVec}) is NaN or ∞`);
         }
-        var startPt = this.currentCurve.at(0);
-        var endPt = this.currentCurve.at(1);
-        var controlPoint = this.currentCurve.p1;
+        const startPt = this.currentCurve.at(0);
+        const endPt = this.currentCurve.at(1);
+        const controlPoint = this.currentCurve.p1;
         return {
             startPoint: startPt,
-            controlPoint: controlPoint,
+            controlPoint,
             endPoint: endPt,
             startWidth: this.curveStartWidth,
             endWidth: this.curveEndWidth,
         };
-    };
+    }
     // Compute the direction of the velocity at the end of this.buffer
-    StrokeSmoother.prototype.computeExitingVec = function () {
+    computeExitingVec() {
         return this.momentum.normalized().times(this.lastPoint.width / 2);
-    };
-    StrokeSmoother.prototype.addPoint = function (newPoint) {
-        var _this = this;
-        var _a, _b;
+    }
+    addPoint(newPoint) {
         if (this.lastPoint) {
             // Ignore points that are identical
-            var fuzzEq = 1e-10;
-            var deltaTime = newPoint.time - this.lastPoint.time;
+            const fuzzEq = 1e-10;
+            const deltaTime = newPoint.time - this.lastPoint.time;
             if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
                 return;
             }
@@ -100,8 +95,8 @@ var StrokeSmoother = /** @class */ (function () {
                 console.warn('Discarding NaN point.', newPoint);
                 return;
             }
-            var threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
-            var shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+            const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
+            const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
                 && this.isFirstSegment;
             // Snap to the starting point if the stroke is contained within a small ball centered
             // at the starting point.
@@ -109,22 +104,24 @@ var StrokeSmoother = /** @class */ (function () {
             if (shouldSnapToInitial) {
                 return;
             }
-            var velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
-            this.momentum = this.momentum.lerp(velocity, 0.9);
+            const deltaTimeSeconds = deltaTime / 1000;
+            const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / deltaTimeSeconds);
+            // TODO: Do we need momentum smoothing? (this.momentum.lerp(velocity, 0.9);)
+            this.momentum = velocity;
         }
-        var lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
+        const lastPoint = this.lastPoint ?? newPoint;
         this.lastPoint = newPoint;
         this.buffer.push(newPoint.pos);
-        var pointRadius = newPoint.width;
-        var prevEndWidth = this.curveEndWidth;
+        const pointRadius = newPoint.width;
+        const prevEndWidth = this.curveEndWidth;
         this.curveEndWidth = pointRadius;
         // recompute bbox
         this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
         // If the last curve just ended or it's the first curve,
         if (this.currentCurve === null) {
-            var p1 = lastPoint.pos;
-            var p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2.unitX);
-            var p3 = newPoint.pos;
+            const p1 = lastPoint.pos;
+            const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
+            const p3 = newPoint.pos;
             // Quadratic Bézier curve
             this.currentCurve = new QuadraticBezier(p1, p2, p3);
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
@@ -137,21 +134,21 @@ var StrokeSmoother = /** @class */ (function () {
             }
         }
         // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
-        var enteringVec = this.lastExitingVec;
+        let enteringVec = this.lastExitingVec;
         if (!enteringVec) {
-            var sampleIdx = Math.ceil(this.buffer.length / 2);
+            let sampleIdx = Math.ceil(this.buffer.length / 2);
             if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
                 sampleIdx = this.buffer.length - 1;
             }
             enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
         }
-        var exitingVec = this.computeExitingVec();
+        let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        var maxRelativeLength = 2;
-        var segmentStart = this.buffer[0];
-        var segmentEnd = newPoint.pos;
-        var startEndDist = segmentEnd.minus(segmentStart).magnitude();
-        var maxControlPointDist = maxRelativeLength * startEndDist;
+        const maxRelativeLength = 2.4;
+        const segmentStart = this.buffer[0];
+        const segmentEnd = newPoint.pos;
+        const startEndDist = segmentEnd.minus(segmentStart).magnitude();
+        const maxControlPointDist = maxRelativeLength * startEndDist;
         // Exit in cases where we would divide by zero
         if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
             return;
@@ -160,11 +157,11 @@ var StrokeSmoother = /** @class */ (function () {
         enteringVec = enteringVec.normalized();
         exitingVec = exitingVec.normalized();
         console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
-        var lineFromStart = new LineSegment2(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
-        var lineFromEnd = new LineSegment2(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
-        var intersection = lineFromEnd.intersection(lineFromStart);
+        const lineFromStart = new LineSegment2(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
+        const lineFromEnd = new LineSegment2(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
+        const intersection = lineFromEnd.intersection(lineFromStart);
         // Position the control point at this intersection
-        var controlPoint = null;
+        let controlPoint = null;
         if (intersection) {
             controlPoint = intersection.point;
         }
@@ -176,7 +173,7 @@ var StrokeSmoother = /** @class */ (function () {
         }
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
-        var prevCurve = this.currentCurve;
+        const prevCurve = this.currentCurve;
         this.currentCurve = new QuadraticBezier(segmentStart, controlPoint, segmentEnd);
         if (isNaN(this.currentCurve.normal(0).magnitude())) {
             console.error('NaN normal at 0. Curve:', this.currentCurve);
@@ -184,15 +181,14 @@ var StrokeSmoother = /** @class */ (function () {
         }
         // Should we start making a new curve? Check whether all buffer points are within
         // ±strokeWidth of the curve.
-        var curveMatchesPoints = function (curve) {
-            var minFit = Math.min(Math.max(Math.min(_this.curveStartWidth, _this.curveEndWidth) / 4, _this.minFitAllowed), _this.maxFitAllowed);
+        const curveMatchesPoints = (curve) => {
+            const minFit = Math.min(Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 4, this.minFitAllowed), this.maxFitAllowed);
             // The sum of distances greater than minFit must not exceed this:
-            var maxNonMatchingDistSum = minFit;
+            const maxNonMatchingDistSum = minFit;
             // Sum of distances greater than minFit.
-            var nonMatchingDistSum = 0;
-            for (var _i = 0, _a = _this.buffer; _i < _a.length; _i++) {
-                var point = _a[_i];
-                var dist = curve.approximateDistance(point);
+            let nonMatchingDistSum = 0;
+            for (const point of this.buffer) {
+                let dist = curve.approximateDistance(point);
                 if (dist > minFit) {
                     // Use the more accurate distance function
                     dist = curve.distance(point);
@@ -215,8 +211,6 @@ var StrokeSmoother = /** @class */ (function () {
                 return;
             }
         }
-    };
-    return StrokeSmoother;
-}());
-export { StrokeSmoother };
+    }
+}
 export default StrokeSmoother;

package/dist/mjs/components/util/describeComponentList.d.ts

@@ -1,4 +1,4 @@
 import AbstractComponent from '../AbstractComponent';
 import { ImageComponentLocalization } from '../localization';
-declare const _default: (localizationTable: ImageComponentLocalization, elems: AbstractComponent[]) => string;
+declare const _default: (localizationTable: ImageComponentLocalization, elems: AbstractComponent[]) => string | null;
 export default _default;

package/dist/mjs/components/util/describeComponentList.mjs

@@ -1,15 +1,14 @@
 // Returns the description of all given elements, if identical, otherwise,
 // returns null.
-export default (function (localizationTable, elems) {
+export default (localizationTable, elems) => {
     if (elems.length === 0) {
         return null;
     }
-    var description = elems[0].description(localizationTable);
-    for (var _i = 0, elems_1 = elems; _i < elems_1.length; _i++) {
-        var elem = elems_1[_i];
+    const description = elems[0].description(localizationTable);
+    for (const elem of elems) {
         if (elem.description(localizationTable) !== description) {
             return null;
         }
     }
     return description;
-});
+};

package/dist/mjs/dialogs/makeAboutDialog.d.ts

@@ -0,0 +1,15 @@
+import type Editor from '../Editor';
+export interface AboutDialogLink {
+    kind: 'link';
+    text: string;
+    href: string;
+}
+export interface AboutDialogEntry {
+    heading: string | AboutDialogLink;
+    text?: string;
+    minimized?: boolean;
+}
+declare const makeAboutDialog: (editor: Editor, entries: AboutDialogEntry[]) => {
+    close: () => void;
+};
+export default makeAboutDialog;

package/dist/mjs/dialogs/makeAboutDialog.mjs

@@ -0,0 +1,52 @@
+const makeAboutDialog = (editor, entries) => {
+    const overlay = document.createElement('div');
+    const { remove: removeOverlay } = editor.createHTMLOverlay(overlay);
+    overlay.classList.add('dialog-container', 'about-dialog-container');
+    const dialog = document.createElement('dialog');
+    const heading = document.createElement('h1');
+    heading.innerText = editor.localization.about;
+    heading.setAttribute('autofocus', 'true');
+    const closeButton = document.createElement('button');
+    closeButton.innerText = editor.localization.closeDialog;
+    closeButton.classList.add('close-button');
+    closeButton.onclick = () => removeOverlay();
+    overlay.onclick = event => {
+        if (event.target === overlay) {
+            removeOverlay();
+        }
+    };
+    const licenseContainer = document.createElement('div');
+    licenseContainer.classList.add('about-entry-container');
+    // Allow scrolling in the license container -- don't forward wheel events.
+    licenseContainer.onwheel = evt => evt.stopPropagation();
+    for (const entry of entries) {
+        const container = document.createElement(entry.minimized ? 'details' : 'div');
+        container.classList.add('about-entry');
+        const header = document.createElement(entry.minimized ? 'summary' : 'h2');
+        if (typeof (entry.heading) === 'string') {
+            header.innerText = entry.heading;
+        }
+        else {
+            const link = document.createElement('a');
+            link.href = entry.heading.href.replace(/^javascript:/i, '');
+            link.text = entry.heading.text;
+            header.appendChild(link);
+        }
+        container.appendChild(header);
+        if (entry.text) {
+            const bodyText = document.createElement('div');
+            bodyText.innerText = entry.text;
+            container.appendChild(bodyText);
+        }
+        licenseContainer.appendChild(container);
+    }
+    dialog.replaceChildren(heading, licenseContainer, closeButton);
+    overlay.replaceChildren(dialog);
+    dialog.show();
+    return {
+        close: () => {
+            removeOverlay();
+        },
+    };
+};
+export default makeAboutDialog;

package/dist/mjs/inputEvents.d.ts

@@ -0,0 +1,84 @@
+import Pointer from './Pointer';
+import { Point2, Vec3 } from '@js-draw/math';
+export type HTMLPointerEventName = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+export type HTMLPointerEventFilter = (eventName: HTMLPointerEventName, event: PointerEvent) => boolean;
+export interface PointerEvtListener {
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+}
+export declare enum InputEvtType {
+    PointerDownEvt = 0,
+    PointerMoveEvt = 1,
+    PointerUpEvt = 2,
+    GestureCancelEvt = 3,
+    WheelEvt = 4,
+    KeyPressEvent = 5,
+    KeyUpEvent = 6,
+    CopyEvent = 7,
+    PasteEvent = 8
+}
+export interface WheelEvt {
+    readonly kind: InputEvtType.WheelEvt;
+    readonly delta: Vec3;
+    readonly screenPos: Point2;
+}
+interface BaseKeyEvent {
+    readonly key: string;
+    readonly code: string;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
+    readonly shiftKey: boolean | undefined;
+}
+/**
+ * Represents a keydown or auto-repeated keydown event.
+ *
+ * Use {@link keyPressEventFromHTMLEvent} where possible rather than
+ * constructing directly (required properties may change between minor
+ * releases).
+ */
+export interface KeyPressEvent extends BaseKeyEvent {
+    readonly kind: InputEvtType.KeyPressEvent;
+}
+/**
+ * Represents a key release or auto-repeated key releae event.
+ *
+ * Use {@link keyUpEventFromHTMLEvent} where possible rather than
+ * constructing directly (required properties may change between minor
+ * releases).
+ */
+export interface KeyUpEvent extends BaseKeyEvent {
+    readonly kind: InputEvtType.KeyUpEvent;
+}
+export interface CopyEvent {
+    readonly kind: InputEvtType.CopyEvent;
+    setData(mime: string, data: string): void;
+}
+export interface PasteEvent {
+    readonly kind: InputEvtType.PasteEvent;
+    readonly data: string;
+    readonly mime: string;
+}
+export interface GestureCancelEvt {
+    readonly kind: InputEvtType.GestureCancelEvt;
+}
+interface PointerEvtBase {
+    readonly current: Pointer;
+    readonly allPointers: Pointer[];
+}
+export interface PointerDownEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerDownEvt;
+}
+export interface PointerMoveEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerMoveEvt;
+}
+export interface PointerUpEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerUpEvt;
+}
+export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export declare const keyUpEventFromHTMLEvent: (event: KeyboardEvent) => KeyUpEvent;
+export declare const keyPressEventFromHTMLEvent: (event: KeyboardEvent) => KeyPressEvent;
+export declare const isPointerEvt: (event: InputEvt) => event is PointerEvt;
+export {};

package/dist/mjs/inputEvents.mjs

@@ -0,0 +1,34 @@
+export var InputEvtType;
+(function (InputEvtType) {
+    InputEvtType[InputEvtType["PointerDownEvt"] = 0] = "PointerDownEvt";
+    InputEvtType[InputEvtType["PointerMoveEvt"] = 1] = "PointerMoveEvt";
+    InputEvtType[InputEvtType["PointerUpEvt"] = 2] = "PointerUpEvt";
+    InputEvtType[InputEvtType["GestureCancelEvt"] = 3] = "GestureCancelEvt";
+    InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
+    InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
+    InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
+    InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
+    InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
+})(InputEvtType || (InputEvtType = {}));
+// Constructor
+const keyEventFromHTMLEvent = (kind, event) => {
+    return {
+        kind,
+        key: event.key,
+        code: event.code,
+        ctrlKey: event.ctrlKey || event.metaKey,
+        altKey: event.altKey,
+        shiftKey: event.shiftKey,
+    };
+};
+export const keyUpEventFromHTMLEvent = (event) => {
+    return keyEventFromHTMLEvent(InputEvtType.KeyUpEvent, event);
+};
+export const keyPressEventFromHTMLEvent = (event) => {
+    return keyEventFromHTMLEvent(InputEvtType.KeyPressEvent, event);
+};
+export const isPointerEvt = (event) => {
+    return event.kind === InputEvtType.PointerDownEvt
+        || event.kind === InputEvtType.PointerMoveEvt
+        || event.kind === InputEvtType.PointerUpEvt;
+};

package/dist/mjs/lib.d.ts

@@ -3,8 +3,8 @@
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
  * @example
- * ```
- * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```ts,runnable
+ * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
@@ -14,8 +14,11 @@
  * (async () => {
  *   const editor = new Editor(document.body);
  *   const toolbar = editor.addToolbar();
+ *
+ *   // Increases the minimum height of the editor
  *   editor.getRootElement().style.height = '600px';
  *
+ *   // Loads from SVG data
  *   await editor.loadFromSVG(`
  *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
@@ -24,13 +27,19 @@
  *       </svg>
  *   `);
  *
- *   toolbar.addActionButton({
- *      label: 'Save',
- *      icon: editor.icons.makeSaveIcon(),
- *   }, () => {
- *       const saveData = editor.toSVG().outerHTML;
+ *   // Adding tags to a toolbar button allows different styles to be applied.
+ *   // Also see addActionButton.
+ *   const buttonLabels = [ ToolbarWidgetTag.Save ];
  *
- *       // Do something with saveData
+ *   toolbar.addSaveButton(() => {
+ *     const saveData = editor.toSVG().outerHTML;
+ *
+ *     // Do something with saveData
+ *   });
+ *
+ *   toolbar.addExitButton(() => {
+ *     // Save/confirm exiting here?
+ *     editor.remove();
  *   });
  * })();
  * ```
@@ -38,19 +47,19 @@
  * @see
  * {@link Editor}
  * {@link Editor.loadFromSVG}
- * {@link HTMLToolbar.addActionButton }
+ * {@link AbstractToolbar.addActionButton }
  *
  * @packageDocumentation
  */
 import Editor, { EditorSettings } from './Editor';
 export { default as EditorImage } from './EditorImage';
 export * from './types';
+export * from './inputEvents';
 export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
-export { default as Color4 } from './Color4';
 export { default as SVGLoader } from './SVGLoader';
 export { default as Viewport } from './Viewport';
-export * from './math/lib';
+export * from '@js-draw/math';
 export * from './components/lib';
 export * from './commands/lib';
 export * from './tools/lib';
@@ -60,7 +69,14 @@ export * from './testing/lib';
 export * from './shortcuts/lib';
 export { default as EventDispatcher } from './EventDispatcher';
 export { default as Pointer, PointerDevice } from './Pointer';
-export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 export { default as UndoRedoHistory } from './UndoRedoHistory';
-export { Editor, EditorSettings };
+export { default as __js_draw__version } from './version';
+import AbstractToolbar from './toolbar/AbstractToolbar';
+export { Editor, EditorSettings, AbstractToolbar, 
+/**
+ * Using the HTMLToolbar alias is deprecated. Use
+ * `AbstractToolbar` instead.
+ * @deprecated
+ */
+AbstractToolbar as HTMLToolbar, };
 export default Editor;

package/dist/mjs/lib.mjs

@@ -3,8 +3,8 @@
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
  * @example
- * ```
- * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```ts,runnable
+ * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
@@ -14,8 +14,11 @@
  * (async () => {
  *   const editor = new Editor(document.body);
  *   const toolbar = editor.addToolbar();
+ *
+ *   // Increases the minimum height of the editor
  *   editor.getRootElement().style.height = '600px';
  *
+ *   // Loads from SVG data
  *   await editor.loadFromSVG(`
  *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
@@ -24,13 +27,19 @@
  *       </svg>
  *   `);
  *
- *   toolbar.addActionButton({
- *      label: 'Save',
- *      icon: editor.icons.makeSaveIcon(),
- *   }, () => {
- *       const saveData = editor.toSVG().outerHTML;
+ *   // Adding tags to a toolbar button allows different styles to be applied.
+ *   // Also see addActionButton.
+ *   const buttonLabels = [ ToolbarWidgetTag.Save ];
  *
- *       // Do something with saveData
+ *   toolbar.addSaveButton(() => {
+ *     const saveData = editor.toSVG().outerHTML;
+ *
+ *     // Do something with saveData
+ *   });
+ *
+ *   toolbar.addExitButton(() => {
+ *     // Save/confirm exiting here?
+ *     editor.remove();
  *   });
  * })();
  * ```
@@ -38,19 +47,19 @@
  * @see
  * {@link Editor}
  * {@link Editor.loadFromSVG}
- * {@link HTMLToolbar.addActionButton }
+ * {@link AbstractToolbar.addActionButton }
  *
  * @packageDocumentation
  */
 import  Editor  from './Editor.mjs';
 export  { default as EditorImage }  from './EditorImage.mjs';
 export  *  from './types.mjs';
+export  *  from './inputEvents.mjs';
 export  { default as getLocalizationTable, matchingLocalizationTable }  from './localizations/getLocalizationTable.mjs';
 export  *  from './localization.mjs';
-export  { default as Color4 }  from './Color4.mjs';
 export  { default as SVGLoader }  from './SVGLoader.mjs';
 export  { default as Viewport }  from './Viewport.mjs';
-export  *  from './math/lib.mjs';
+export * from '@js-draw/math';
 export  *  from './components/lib.mjs';
 export  *  from './commands/lib.mjs';
 export  *  from './tools/lib.mjs';
@@ -60,7 +69,15 @@ export  *  from './testing/lib.mjs';
 export  *  from './shortcuts/lib.mjs';
 export  { default as EventDispatcher }  from './EventDispatcher.mjs';
 export  { default as Pointer, PointerDevice }  from './Pointer.mjs';
-export  { default as HTMLToolbar }  from './toolbar/HTMLToolbar.mjs';
 export  { default as UndoRedoHistory }  from './UndoRedoHistory.mjs';
-export { Editor };
+// @internal
+export  { default as __js_draw__version }  from './version.mjs';
+import  AbstractToolbar  from './toolbar/AbstractToolbar.mjs';
+export { Editor, AbstractToolbar, 
+/**
+ * Using the HTMLToolbar alias is deprecated. Use
+ * `AbstractToolbar` instead.
+ * @deprecated
+ */
+AbstractToolbar as HTMLToolbar, };
 export default Editor;