js-draw 0.23.1 → 0.24.0

package/dist/mjs/components/builders/RectangleBuilder.d.ts

@@ -0,0 +1,20 @@
+import Rect2 from '../../math/shapes/Rect2';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makeFilledRectangleBuilder: ComponentBuilderFactory;
+export declare const makeOutlinedRectangleBuilder: ComponentBuilderFactory;
+export default class RectangleBuilder implements ComponentBuilder {
+    private readonly startPoint;
+    private filled;
+    private viewport;
+    private endPoint;
+    constructor(startPoint: StrokeDataPoint, filled: boolean, viewport: Viewport);
+    getBBox(): Rect2;
+    private buildPreview;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}

package/dist/mjs/components/builders/RectangleBuilder.mjs

@@ -0,0 +1,53 @@
+import  Mat33  from '../../math/Mat33.mjs';
+import  Path  from '../../math/shapes/Path.mjs';
+import  Rect2  from '../../math/shapes/Rect2.mjs';
+import  Stroke  from '../Stroke.mjs';
+export var makeFilledRectangleBuilder = function (initialPoint, viewport) {
+    return new RectangleBuilder(initialPoint, true, viewport);
+};
+export var makeOutlinedRectangleBuilder = function (initialPoint, viewport) {
+    return new RectangleBuilder(initialPoint, false, viewport);
+};
+var RectangleBuilder = /** @class */ (function () {
+    function RectangleBuilder(startPoint, filled, viewport) {
+        this.startPoint = startPoint;
+        this.filled = filled;
+        this.viewport = viewport;
+        // Initially, the start and end points are the same.
+        this.endPoint = startPoint;
+    }
+    RectangleBuilder.prototype.getBBox = function () {
+        var preview = this.buildPreview();
+        return preview.getBBox();
+    };
+    RectangleBuilder.prototype.buildPreview = function () {
+        var _this = this;
+        var canvasAngle = this.viewport.getRotationAngle();
+        var rotationMat = Mat33.zRotation(-canvasAngle);
+        // Adjust startPoint and endPoint such that applying [rotationMat] to them
+        // brings them to this.startPoint and this.endPoint.
+        var startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+        var endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+        var rect = Rect2.fromCorners(startPoint, endPoint);
+        var path = Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        // Rotate the canvas rectangle so that its rotation matches the screen
+        rotationMat).mapPoints(function (point) { return _this.viewport.roundPoint(point); });
+        var preview = new Stroke([
+            path.toRenderable({
+                fill: this.endPoint.color
+            }),
+        ]);
+        return preview;
+    };
+    RectangleBuilder.prototype.build = function () {
+        return this.buildPreview();
+    };
+    RectangleBuilder.prototype.preview = function (renderer) {
+        this.buildPreview().render(renderer);
+    };
+    RectangleBuilder.prototype.addPoint = function (point) {
+        this.endPoint = point;
+    };
+    return RectangleBuilder;
+}());
+export default RectangleBuilder;

package/dist/mjs/components/builders/types.d.ts

@@ -0,0 +1,12 @@
+import Rect2 from '../../math/shapes/Rect2';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+export interface ComponentBuilder {
+    getBBox(): Rect2;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}
+export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

package/dist/mjs/components/builders/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/lib.d.ts

@@ -0,0 +1,14 @@
+export * from './builders/types';
+export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
+export { makeOutlinedCircleBuilder } from './builders/CircleBuilder';
+export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/StrokeSmoother';
+export * from './AbstractComponent';
+export { default as AbstractComponent } from './AbstractComponent';
+import Stroke from './Stroke';
+import TextComponent from './TextComponent';
+import ImageComponent from './ImageComponent';
+import RestyleableComponent from './RestylableComponent';
+import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
+import BackgroundComponent from './BackgroundComponent';
+export { Stroke, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/components/lib.mjs

@@ -0,0 +1,15 @@
+export  *  from './builders/types.mjs';
+export  { makeFreehandLineBuilder }  from './builders/FreehandLineBuilder.mjs';
+export  { makePressureSensitiveFreehandLineBuilder }  from './builders/PressureSensitiveFreehandLineBuilder.mjs';
+export  { makeOutlinedCircleBuilder }  from './builders/CircleBuilder.mjs';
+export  { default as StrokeSmoother }  from './util/StrokeSmoother.mjs';
+export  *  from './AbstractComponent.mjs';
+export  { default as AbstractComponent }  from './AbstractComponent.mjs';
+import  Stroke  from './Stroke.mjs';
+import  TextComponent  from './TextComponent.mjs';
+import  ImageComponent  from './ImageComponent.mjs';
+import  { createRestyleComponentCommand, isRestylableComponent }  from './RestylableComponent.mjs';
+import  BackgroundComponent  from './BackgroundComponent.mjs';
+export { Stroke, createRestyleComponentCommand, isRestylableComponent, TextComponent, 
+// @deprecated
+TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/components/localization.mjs

@@ -0,0 +1,11 @@
+export var defaultComponentLocalization = {
+    unlabeledImageNode: 'Unlabeled image node',
+    stroke: 'Stroke',
+    svgObject: 'SVG Object',
+    emptyBackground: 'Empty background',
+    gridBackground: 'Grid background',
+    filledBackgroundWithColor: function (color) { return "Filled background (".concat(color, ")"); },
+    text: function (text) { return "Text object: ".concat(text); },
+    imageNode: function (description) { return "Image: ".concat(description); },
+    restyledElement: function (elementDescription) { return "Restyled ".concat(elementDescription); },
+};

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

@@ -0,0 +1,35 @@
+import { Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/shapes/Rect2';
+import { StrokeDataPoint } from '../../types';
+export interface Curve {
+    startPoint: Vec2;
+    startWidth: number;
+    controlPoint: Vec2;
+    endWidth: number;
+    endPoint: Vec2;
+}
+type OnCurveAddedCallback = (curve: Curve | null) => void;
+export declare class StrokeSmoother {
+    private startPoint;
+    private minFitAllowed;
+    private maxFitAllowed;
+    private onCurveAdded;
+    private isFirstSegment;
+    private buffer;
+    private lastPoint;
+    private lastExitingVec;
+    private currentCurve;
+    private curveStartWidth;
+    private curveEndWidth;
+    private momentum;
+    private bbox;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, onCurveAdded: OnCurveAddedCallback);
+    getBBox(): Rect2;
+    preview(): Curve | null;
+    private approxCurrentCurveLength;
+    finalizeCurrentCurve(): void;
+    private currentSegmentToPath;
+    private computeExitingVec;
+    addPoint(newPoint: StrokeDataPoint): void;
+}
+export default StrokeSmoother;

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

@@ -0,0 +1,222 @@
+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';
+// Handles stroke smoothing
+var StrokeSmoother = /** @class */ (function () {
+    function StrokeSmoother(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
+    // [maxFitAllowed].
+    minFitAllowed, maxFitAllowed, onCurveAdded) {
+        this.startPoint = startPoint;
+        this.minFitAllowed = minFitAllowed;
+        this.maxFitAllowed = maxFitAllowed;
+        this.onCurveAdded = onCurveAdded;
+        this.isFirstSegment = true;
+        this.lastExitingVec = null;
+        this.currentCurve = null;
+        this.lastPoint = this.startPoint;
+        this.buffer = [this.startPoint.pos];
+        this.momentum = Vec2.zero;
+        this.currentCurve = null;
+        this.curveStartWidth = startPoint.width;
+        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    StrokeSmoother.prototype.getBBox = function () {
+        return this.bbox;
+    };
+    StrokeSmoother.prototype.preview = function () {
+        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 () {
+        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();
+        return toControlDist + toEndDist;
+    };
+    StrokeSmoother.prototype.finalizeCurrentCurve = function () {
+        // Case where no points have been added
+        if (!this.currentCurve) {
+            return;
+        }
+        this.onCurveAdded(this.currentSegmentToPath());
+        var 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
+        // in the current curve and we want connected curves to share end points)
+        this.buffer = [
+            this.buffer[this.buffer.length - 2], lastPoint,
+        ];
+        this.currentCurve = null;
+        this.isFirstSegment = false;
+    };
+    // Returns [upper curve, connector, lower curve]
+    StrokeSmoother.prototype.currentSegmentToPath = function () {
+        if (this.currentCurve == null) {
+            throw new Error('Invalid State: currentCurve is null!');
+        }
+        var startVec = this.currentCurve.normal(0).normalized();
+        if (!isFinite(startVec.magnitude())) {
+            throw new Error("startVec(".concat(startVec, ") is NaN or \u221E"));
+        }
+        var startPt = this.currentCurve.at(0);
+        var endPt = this.currentCurve.at(1);
+        var controlPoint = this.currentCurve.p1;
+        return {
+            startPoint: startPt,
+            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 () {
+        return this.momentum.normalized().times(this.lastPoint.width / 2);
+    };
+    StrokeSmoother.prototype.addPoint = function (newPoint) {
+        var _this = this;
+        var _a, _b;
+        if (this.lastPoint) {
+            // Ignore points that are identical
+            var fuzzEq = 1e-10;
+            var deltaTime = newPoint.time - this.lastPoint.time;
+            if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
+                return;
+            }
+            else if (isNaN(newPoint.pos.magnitude())) {
+                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
+                && this.isFirstSegment;
+            // Snap to the starting point if the stroke is contained within a small ball centered
+            // at the starting point.
+            // This allows us to create a circle/dot at the start of the stroke.
+            if (shouldSnapToInitial) {
+                return;
+            }
+            var velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
+            this.momentum = this.momentum.lerp(velocity, 0.9);
+        }
+        var lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
+        this.lastPoint = newPoint;
+        this.buffer.push(newPoint.pos);
+        var pointRadius = newPoint.width;
+        var 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;
+            // Quadratic Bézier curve
+            this.currentCurve = new QuadraticBezier(p1, p2, p3);
+            console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+            if (this.isFirstSegment) {
+                // The start of a curve often lacks accurate pressure information. Update it.
+                this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+            }
+            else {
+                this.curveStartWidth = prevEndWidth;
+            }
+        }
+        // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
+        var enteringVec = this.lastExitingVec;
+        if (!enteringVec) {
+            var 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();
+        // 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;
+        // Exit in cases where we would divide by zero
+        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
+            return;
+        }
+        console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
+        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);
+        // Position the control point at this intersection
+        var controlPoint = null;
+        if (intersection) {
+            controlPoint = intersection.point;
+        }
+        // No intersection or the intersection is one of the end points?
+        if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
+            // Position the control point closer to the first -- the connecting
+            // segment will be roughly a line.
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
+        }
+        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;
+        this.currentCurve = new QuadraticBezier(segmentStart, controlPoint, segmentEnd);
+        if (isNaN(this.currentCurve.normal(0).magnitude())) {
+            console.error('NaN normal at 0. Curve:', this.currentCurve);
+            this.currentCurve = prevCurve;
+        }
+        // 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);
+            // The sum of distances greater than minFit must not exceed this:
+            var 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);
+                if (dist > minFit) {
+                    // Use the more accurate distance function
+                    dist = curve.distance(point);
+                    nonMatchingDistSum += Math.max(0, dist - minFit);
+                    if (nonMatchingDistSum > maxNonMatchingDistSum) {
+                        return false; // false: Curve doesn't match points well enough.
+                    }
+                }
+            }
+            return true;
+        };
+        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth / 2) {
+            if (!curveMatchesPoints(this.currentCurve)) {
+                // Use a curve that better fits the points
+                this.currentCurve = prevCurve;
+                this.curveEndWidth = prevEndWidth;
+                // Reset the last point -- the current point was not added to the curve.
+                this.lastPoint = lastPoint;
+                this.finalizeCurrentCurve();
+                return;
+            }
+        }
+    };
+    return StrokeSmoother;
+}());
+export { StrokeSmoother };
+export default StrokeSmoother;

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

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

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

@@ -0,0 +1,15 @@
+// Returns the description of all given elements, if identical, otherwise,
+// returns null.
+export default (function (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];
+        if (elem.description(localizationTable) !== description) {
+            return null;
+        }
+    }
+    return description;
+});

package/dist/mjs/lib.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The main entrypoint for the NPM package. Everything exported by this file
+ * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
+ *
+ * @example
+ * ```
+ * import { Editor, Vec3, Mat33 } from 'js-draw';
+ *
+ * // Apply js-draw CSS
+ * import 'js-draw/styles';
+ * // If your bundler doesn't support the above, try
+ * // import 'js-draw/bundledStyles';
+ *
+ * (async () => {
+ *   const editor = new Editor(document.body);
+ *   const toolbar = editor.addToolbar();
+ *   editor.getRootElement().style.height = '600px';
+ *
+ *   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>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *       </svg>
+ *   `);
+ *
+ *   toolbar.addActionButton({
+ *      label: 'Save',
+ *      icon: editor.icons.makeSaveIcon(),
+ *   }, () => {
+ *       const saveData = editor.toSVG().outerHTML;
+ *
+ *       // Do something with saveData
+ *   });
+ * })();
+ * ```
+ *
+ * @see
+ * {@link Editor}
+ * {@link Editor.loadFromSVG}
+ * {@link HTMLToolbar.addActionButton }
+ *
+ * @packageDocumentation
+ */
+import Editor, { EditorSettings } from './Editor';
+export { default as EditorImage } from './EditorImage';
+export * from './types';
+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 './components/lib';
+export * from './commands/lib';
+export * from './tools/lib';
+export * from './toolbar/lib';
+export * from './rendering/lib';
+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 Editor;

package/dist/mjs/lib.mjs

@@ -0,0 +1,66 @@
+/**
+ * The main entrypoint for the NPM package. Everything exported by this file
+ * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
+ *
+ * @example
+ * ```
+ * import { Editor, Vec3, Mat33 } from 'js-draw';
+ *
+ * // Apply js-draw CSS
+ * import 'js-draw/styles';
+ * // If your bundler doesn't support the above, try
+ * // import 'js-draw/bundledStyles';
+ *
+ * (async () => {
+ *   const editor = new Editor(document.body);
+ *   const toolbar = editor.addToolbar();
+ *   editor.getRootElement().style.height = '600px';
+ *
+ *   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>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *       </svg>
+ *   `);
+ *
+ *   toolbar.addActionButton({
+ *      label: 'Save',
+ *      icon: editor.icons.makeSaveIcon(),
+ *   }, () => {
+ *       const saveData = editor.toSVG().outerHTML;
+ *
+ *       // Do something with saveData
+ *   });
+ * })();
+ * ```
+ *
+ * @see
+ * {@link Editor}
+ * {@link Editor.loadFromSVG}
+ * {@link HTMLToolbar.addActionButton }
+ *
+ * @packageDocumentation
+ */
+import  Editor  from './Editor.mjs';
+export  { default as EditorImage }  from './EditorImage.mjs';
+export  *  from './types.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 './components/lib.mjs';
+export  *  from './commands/lib.mjs';
+export  *  from './tools/lib.mjs';
+export  *  from './toolbar/lib.mjs';
+export  *  from './rendering/lib.mjs';
+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 };
+export default Editor;

package/dist/mjs/localization.mjs

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import  { defaultCommandLocalization }  from './commands/localization.mjs';
+import  { defaultComponentLocalization }  from './components/localization.mjs';
+import  { defaultTextRendererLocalization }  from './rendering/localization.mjs';
+import  { defaultToolbarLocalization }  from './toolbar/localization.mjs';
+import  { defaultToolLocalization }  from './tools/localization.mjs';
+export var defaultEditorLocalization = __assign(__assign(__assign(__assign(__assign(__assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), defaultTextRendererLocalization), { accessibilityInputInstructions: [
+        'Press "t" to read the contents of the viewport as text.',
+        'Use the arrow keys to move the viewport, click and drag to draw strokes.',
+        'Press "w" to zoom in and "s" to zoom out.',
+    ].join(' '), loading: function (percentage) { return "Loading ".concat(percentage, "%..."); }, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: function (commandDescription) { return "Undid ".concat(commandDescription); }, redoAnnouncement: function (commandDescription) { return "Redid ".concat(commandDescription); } });

package/dist/mjs/localizations/de.mjs

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import  { defaultEditorLocalization }  from '../localization.mjs';
+// German localization
+var localization = __assign(__assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', image: 'Bild', inputAltText: 'Alt-Text: ', chooseFile: 'Wähle Datei: ', submit: 'Absenden', cancel: 'Abbrechen', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', textSize: 'Größe: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', pressureSensitiveFreehandPen: 'Stift (druckempfindlich)', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', lockRotation: 'Sperre Rotation', paste: 'Einfügen', dropdownShown: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " angezeigt"); }, dropdownHidden: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " versteckt"); }, zoomLevel: function (zoomPercent) { return "Verg\u00F6\u00DFerung: ".concat(zoomPercent, "%"); }, colorChangedAnnouncement: function (color) { return "Farbe zu ".concat(color, " ge\u00E4ndert"); }, imageSize: function (size, units) { return "Bild-Gr\u00F6\u00DFe: ".concat(size, " ").concat(units); }, imageLoadError: function (message) { return "Fehler beim Laden des Bildes: ".concat(message); }, errorImageHasZeroSize: 'Fehler: Bild hat Größe Null', penTool: function (penNumber) { return "Stift ".concat(penNumber); }, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', changeTool: 'Wechsle Werkzeug', pasteHandler: 'Copy-Paste-Handler', findLabel: 'Finde', toNextMatch: 'Nächstes', closeFindDialog: 'Schließen', findDialogShown: 'Finde-Dialog angezeigt', findDialogHidden: 'Finde-Dialog versteckt', focusedFoundText: function (matchIdx, totalMatches) { return "Sieh Treffer ".concat(matchIdx, " von ").concat(totalMatches, " an"); }, toolEnabledAnnouncement: function (toolName) { return "".concat(toolName, " aktiviert"); }, toolDisabledAnnouncement: function (toolName) { return "".concat(toolName, " deaktiviert"); }, updatedViewport: 'Transformierte Ansicht', transformedElements: function (elemCount) { return "".concat(elemCount, " Element").concat(1 === elemCount ? '' : 'e', " transformiert"); }, resizeOutputCommand: function (newSize) { return "Bildgr\u00F6\u00DFe auf ".concat(newSize.w, "x").concat(newSize.h, " ge\u00E4ndert"); }, addElementAction: function (componentDescription) { return "".concat(componentDescription, " hinzugef\u00FCgt"); }, eraseAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " gel\u00F6scht"); }, duplicateAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " dupliziert"); }, inverseOf: function (actionDescription) { return "".concat(actionDescription, " umgekehrt"); }, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: function (degrees) { return "".concat(Math.abs(degrees), " Grad ").concat(degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn', " gedreht"); }, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: function (count) { return "".concat(count, " Element").concat(1 === count ? '' : 'e', " ausgew\u00E4hlt"); }, stroke: 'Strich', svgObject: 'SVG-Objekt', text: function (text) { return "Text-Objekt: ".concat(text); }, pathNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Pfad-Objekte."); }, textNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Text-Knotenpunkte."); }, textNode: function (content) { return "Text: ".concat(content); }, imageNodeCount: function (nodeCount) { return "Es gibt ".concat(nodeCount, " sichtbare Bild-Knoten."); }, imageNode: function (label) { return "Bild: ".concat(label); }, unlabeledImageNode: 'Bild ohne Label', rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: function (percentage) { return "Laden ".concat(percentage, "%..."); }, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " r\u00FCckg\u00E4ngig gemacht"); }, redoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " wiederholt"); }, reformatSelection: 'Formatiere Auswahl', documentProperties: 'Seite', backgroundColor: 'Hintergrundfarbe: ', imageWidthOption: 'Breite: ', imageHeightOption: 'Höhe: ', useGridOption: 'Gitter: ', toggleOverflow: 'Mehr', selectAllTool: 'Alle auswählen', soundExplorer: 'Klangbasierte Bilderkundung', disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung', enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung', copied: function (count, description) { return "".concat(count, " ").concat(description, " kopiert"); }, pasted: function (count, description) { return "".concat(count, " ").concat(description, " eingef\u00FCgt"); }, unionOf: function (actionDescription, actionCount) { return "Vereinigung: ".concat(actionCount, " ").concat(actionDescription); }, emptyBackground: 'Leerer Hintergrund', filledBackgroundWithColor: function (color) { return "Gef\u00FCllter Hintergrund (".concat(color, ")"); }, restyledElement: function (elementDescription) { return "".concat(elementDescription, " umgestaltet"); } });
+export default localization;

package/dist/mjs/localizations/en.mjs

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import  { defaultEditorLocalization }  from '../localization.mjs';
+// Default localizations are already in English.
+var localization = __assign({}, defaultEditorLocalization);
+export default localization;