js-draw 0.18.1 → 0.19.0

package/dist/cjs/src/components/builders/RectangleBuilder.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeOutlinedRectangleBuilder = exports.makeFilledRectangleBuilder = void 0;
+const Mat33_1 = __importDefault(require("../../math/Mat33"));
+const Path_1 = __importDefault(require("../../math/Path"));
+const Rect2_1 = __importDefault(require("../../math/Rect2"));
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeFilledRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, true, viewport);
+};
+exports.makeFilledRectangleBuilder = makeFilledRectangleBuilder;
+const makeOutlinedRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, false, viewport);
+};
+exports.makeOutlinedRectangleBuilder = makeOutlinedRectangleBuilder;
+class RectangleBuilder {
+    constructor(startPoint, filled, viewport) {
+        this.startPoint = startPoint;
+        this.filled = filled;
+        this.viewport = viewport;
+        // Initially, the start and end points are the same.
+        this.endPoint = startPoint;
+    }
+    getBBox() {
+        const preview = this.buildPreview();
+        return preview.getBBox();
+    }
+    buildPreview() {
+        const canvasAngle = this.viewport.getRotationAngle();
+        const rotationMat = Mat33_1.default.zRotation(-canvasAngle);
+        // Adjust startPoint and endPoint such that applying [rotationMat] to them
+        // brings them to this.startPoint and this.endPoint.
+        const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+        const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+        const rect = Rect2_1.default.fromCorners(startPoint, endPoint);
+        const path = Path_1.default.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        // Rotate the canvas rectangle so that its rotation matches the screen
+        rotationMat).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
+            path.toRenderable({
+                fill: this.endPoint.color
+            }),
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}
+exports.default = RectangleBuilder;

package/dist/cjs/src/components/builders/types.d.ts

@@ -0,0 +1,12 @@
+import Rect2 from '../../math/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/cjs/src/components/builders/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/components/lib.d.ts

@@ -0,0 +1,13 @@
+export * from './builders/types';
+export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
+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 ImageBackground from './ImageBackground';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

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

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageComponent = exports.BackgroundComponent = exports.StrokeComponent = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Text = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = exports.makePressureSensitiveFreehandLineBuilder = exports.makeFreehandLineBuilder = void 0;
+__exportStar(require("./builders/types"), exports);
+var FreehandLineBuilder_1 = require("./builders/FreehandLineBuilder");
+Object.defineProperty(exports, "makeFreehandLineBuilder", { enumerable: true, get: function () { return FreehandLineBuilder_1.makeFreehandLineBuilder; } });
+var PressureSensitiveFreehandLineBuilder_1 = require("./builders/PressureSensitiveFreehandLineBuilder");
+Object.defineProperty(exports, "makePressureSensitiveFreehandLineBuilder", { enumerable: true, get: function () { return PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder; } });
+var StrokeSmoother_1 = require("./util/StrokeSmoother");
+Object.defineProperty(exports, "StrokeSmoother", { enumerable: true, get: function () { return __importDefault(StrokeSmoother_1).default; } });
+__exportStar(require("./AbstractComponent"), exports);
+var AbstractComponent_1 = require("./AbstractComponent");
+Object.defineProperty(exports, "AbstractComponent", { enumerable: true, get: function () { return __importDefault(AbstractComponent_1).default; } });
+const Stroke_1 = __importDefault(require("./Stroke"));
+exports.Stroke = Stroke_1.default;
+exports.StrokeComponent = Stroke_1.default;
+const TextComponent_1 = __importDefault(require("./TextComponent"));
+exports.Text = TextComponent_1.default;
+exports.TextComponent = TextComponent_1.default;
+const ImageComponent_1 = __importDefault(require("./ImageComponent"));
+exports.ImageComponent = ImageComponent_1.default;
+const RestylableComponent_1 = require("./RestylableComponent");
+Object.defineProperty(exports, "createRestyleComponentCommand", { enumerable: true, get: function () { return RestylableComponent_1.createRestyleComponentCommand; } });
+Object.defineProperty(exports, "isRestylableComponent", { enumerable: true, get: function () { return RestylableComponent_1.isRestylableComponent; } });
+const ImageBackground_1 = __importDefault(require("./ImageBackground"));
+exports.BackgroundComponent = ImageBackground_1.default;

package/dist/cjs/src/components/localization.d.ts

@@ -0,0 +1,11 @@
+export interface ImageComponentLocalization {
+    unlabeledImageNode: string;
+    text: (text: string) => string;
+    imageNode: (description: string) => string;
+    stroke: string;
+    svgObject: string;
+    emptyBackground: string;
+    filledBackgroundWithColor: (color: string) => string;
+    restyledElement: (elementDescription: string) => string;
+}
+export declare const defaultComponentLocalization: ImageComponentLocalization;

package/dist/cjs/src/components/localization.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultComponentLocalization = void 0;
+exports.defaultComponentLocalization = {
+    unlabeledImageNode: 'Unlabeled image node',
+    stroke: 'Stroke',
+    svgObject: 'SVG Object',
+    emptyBackground: 'Empty background',
+    filledBackgroundWithColor: (color) => `Filled background (${color})`,
+    text: (text) => `Text object: ${text}`,
+    imageNode: (description) => `Image: ${description}`,
+    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
+};

package/dist/cjs/src/components/util/StrokeSmoother.d.ts

@@ -0,0 +1,35 @@
+import { Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/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/cjs/src/components/util/StrokeSmoother.js

@@ -0,0 +1,217 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StrokeSmoother = void 0;
+const bezier_js_1 = require("bezier-js");
+const Vec2_1 = require("../../math/Vec2");
+const Rect2_1 = __importDefault(require("../../math/Rect2"));
+const LineSegment2_1 = __importDefault(require("../../math/LineSegment2"));
+// Handles stroke smoothing
+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
+    // [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_1.Vec2.zero;
+        this.currentCurve = null;
+        this.curveStartWidth = startPoint.width;
+        this.bbox = new Rect2_1.default(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    preview() {
+        if (!this.currentCurve) {
+            return null;
+        }
+        return this.currentSegmentToPath();
+    }
+    // Returns the distance between the start, control, and end points of the curve.
+    approxCurrentCurveLength() {
+        if (!this.currentCurve) {
+            return 0;
+        }
+        const startPt = Vec2_1.Vec2.ofXY(this.currentCurve.points[0]);
+        const controlPt = Vec2_1.Vec2.ofXY(this.currentCurve.points[1]);
+        const endPt = Vec2_1.Vec2.ofXY(this.currentCurve.points[2]);
+        const toControlDist = startPt.minus(controlPt).length();
+        const toEndDist = endPt.minus(controlPt).length();
+        return toControlDist + toEndDist;
+    }
+    finalizeCurrentCurve() {
+        // Case where no points have been added
+        if (!this.currentCurve) {
+            return;
+        }
+        this.onCurveAdded(this.currentSegmentToPath());
+        const lastPoint = this.buffer[this.buffer.length - 1];
+        this.lastExitingVec = Vec2_1.Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2_1.Vec2.ofXY(this.currentCurve.points[1]));
+        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]
+    currentSegmentToPath() {
+        if (this.currentCurve == null) {
+            throw new Error('Invalid State: currentCurve is null!');
+        }
+        const startVec = Vec2_1.Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+        if (!isFinite(startVec.magnitude())) {
+            throw new Error(`startVec(${startVec}) is NaN or ∞`);
+        }
+        const startPt = Vec2_1.Vec2.ofXY(this.currentCurve.get(0));
+        const endPt = Vec2_1.Vec2.ofXY(this.currentCurve.get(1));
+        const controlPoint = Vec2_1.Vec2.ofXY(this.currentCurve.points[1]);
+        return {
+            startPoint: startPt,
+            controlPoint,
+            endPoint: endPt,
+            startWidth: this.curveStartWidth,
+            endWidth: this.curveEndWidth,
+        };
+    }
+    // Compute the direction of the velocity at the end of this.buffer
+    computeExitingVec() {
+        return this.momentum.normalized().times(this.lastPoint.width / 2);
+    }
+    addPoint(newPoint) {
+        var _a, _b;
+        if (this.lastPoint) {
+            // Ignore points that are identical
+            const fuzzEq = 1e-10;
+            const 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;
+            }
+            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.
+            // This allows us to create a circle/dot at the start of the stroke.
+            if (shouldSnapToInitial) {
+                return;
+            }
+            const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
+            this.momentum = this.momentum.lerp(velocity, 0.9);
+        }
+        const lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
+        this.lastPoint = newPoint;
+        this.buffer.push(newPoint.pos);
+        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) {
+            const p1 = lastPoint.pos;
+            const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2_1.Vec2.unitX);
+            const p3 = newPoint.pos;
+            // Quadratic Bézier curve
+            this.currentCurve = new bezier_js_1.Bezier(p1.xy, p2.xy, p3.xy);
+            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.
+        let enteringVec = this.lastExitingVec;
+        if (!enteringVec) {
+            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]);
+        }
+        let exitingVec = this.computeExitingVec();
+        // Find the intersection between the entering vector and the exiting vector
+        const maxRelativeLength = 2.2;
+        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;
+        }
+        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!');
+        const lineFromStart = new LineSegment2_1.default(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
+        const lineFromEnd = new LineSegment2_1.default(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
+        const intersection = lineFromEnd.intersection(lineFromStart);
+        // Position the control point at this intersection
+        let 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!');
+        const prevCurve = this.currentCurve;
+        this.currentCurve = new bezier_js_1.Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
+        if (isNaN(Vec2_1.Vec2.ofXY(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.
+        const curveMatchesPoints = (curve) => {
+            for (const point of this.buffer) {
+                const proj = Vec2_1.Vec2.ofXY(curve.project(point.xy));
+                const dist = proj.minus(point).magnitude();
+                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
+                if (dist > minFit || dist > this.maxFitAllowed) {
+                    return false;
+                }
+            }
+            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;
+            }
+        }
+    }
+}
+exports.StrokeSmoother = StrokeSmoother;
+exports.default = StrokeSmoother;

package/dist/cjs/src/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 | null;
+export default _default;

package/dist/cjs/src/components/util/describeComponentList.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Returns the description of all given elements, if identical, otherwise,
+// returns null.
+exports.default = (localizationTable, elems) => {
+    if (elems.length === 0) {
+        return null;
+    }
+    const description = elems[0].description(localizationTable);
+    for (const elem of elems) {
+        if (elem.description(localizationTable) !== description) {
+            return null;
+        }
+    }
+    return description;
+};

package/dist/cjs/src/lib.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 } 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 { 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/cjs/src/lib.js

@@ -0,0 +1,93 @@
+"use strict";
+/**
+ * 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = exports.UndoRedoHistory = exports.HTMLToolbar = exports.PointerDevice = exports.Pointer = exports.Viewport = exports.SVGLoader = exports.Color4 = exports.getLocalizationTable = exports.EditorImage = void 0;
+const Editor_1 = __importDefault(require("./Editor"));
+exports.Editor = Editor_1.default;
+var EditorImage_1 = require("./EditorImage");
+Object.defineProperty(exports, "EditorImage", { enumerable: true, get: function () { return __importDefault(EditorImage_1).default; } });
+__exportStar(require("./types"), exports);
+var getLocalizationTable_1 = require("./localizations/getLocalizationTable");
+Object.defineProperty(exports, "getLocalizationTable", { enumerable: true, get: function () { return __importDefault(getLocalizationTable_1).default; } });
+__exportStar(require("./localization"), exports);
+var Color4_1 = require("./Color4");
+Object.defineProperty(exports, "Color4", { enumerable: true, get: function () { return __importDefault(Color4_1).default; } });
+var SVGLoader_1 = require("./SVGLoader");
+Object.defineProperty(exports, "SVGLoader", { enumerable: true, get: function () { return __importDefault(SVGLoader_1).default; } });
+var Viewport_1 = require("./Viewport");
+Object.defineProperty(exports, "Viewport", { enumerable: true, get: function () { return __importDefault(Viewport_1).default; } });
+__exportStar(require("./math/lib"), exports);
+__exportStar(require("./components/lib"), exports);
+__exportStar(require("./commands/lib"), exports);
+__exportStar(require("./tools/lib"), exports);
+__exportStar(require("./toolbar/lib"), exports);
+__exportStar(require("./rendering/lib"), exports);
+__exportStar(require("./testing/lib"), exports);
+var Pointer_1 = require("./Pointer");
+Object.defineProperty(exports, "Pointer", { enumerable: true, get: function () { return __importDefault(Pointer_1).default; } });
+Object.defineProperty(exports, "PointerDevice", { enumerable: true, get: function () { return Pointer_1.PointerDevice; } });
+var HTMLToolbar_1 = require("./toolbar/HTMLToolbar");
+Object.defineProperty(exports, "HTMLToolbar", { enumerable: true, get: function () { return __importDefault(HTMLToolbar_1).default; } });
+var UndoRedoHistory_1 = require("./UndoRedoHistory");
+Object.defineProperty(exports, "UndoRedoHistory", { enumerable: true, get: function () { return __importDefault(UndoRedoHistory_1).default; } });
+exports.default = Editor_1.default;

package/dist/cjs/src/localization.d.ts

@@ -0,0 +1,14 @@
+import { CommandLocalization } from './commands/localization';
+import { ImageComponentLocalization } from './components/localization';
+import { TextRendererLocalization } from './rendering/localization';
+import { ToolbarLocalization } from './toolbar/localization';
+import { ToolLocalization } from './tools/localization';
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
+    accessibilityInputInstructions: string;
+    undoAnnouncement: (actionDescription: string) => string;
+    redoAnnouncement: (actionDescription: string) => string;
+    doneLoading: string;
+    loading: (percentage: number) => string;
+    imageEditor: string;
+}
+export declare const defaultEditorLocalization: EditorLocalization;

package/dist/cjs/src/localization.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultEditorLocalization = void 0;
+const localization_1 = require("./commands/localization");
+const localization_2 = require("./components/localization");
+const localization_3 = require("./rendering/localization");
+const localization_4 = require("./toolbar/localization");
+const localization_5 = require("./tools/localization");
+exports.defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, localization_4.defaultToolbarLocalization), localization_5.defaultToolLocalization), localization_1.defaultCommandLocalization), localization_2.defaultComponentLocalization), localization_3.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: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

package/dist/cjs/src/localizations/de.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/cjs/src/localizations/de.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const localization_1 = require("../localization");
+// German localization
+const localization = Object.assign(Object.assign({}, localization_1.defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', 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', selectObjectType: 'Objekt-Typ: ', freehandPen: 'Freihand', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', dropdownShown: t => `Dropdown-Menü für ${t} angezeigt`, dropdownHidden: t => `Dropdown-Menü für ${t} versteckt`, zoomLevel: t => `Vergößerung: ${t}%`, colorChangedAnnouncement: t => `Farbe zu ${t} geändert`, penTool: t => `Stift ${t}`, 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', toolEnabledAnnouncement: t => `${t} aktiviert`, toolDisabledAnnouncement: t => `${t} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: t => `${t} Element${1 === t ? '' : 'e'} transformiert`, resizeOutputCommand: t => `Bildgröße auf ${t.w}x${t.h} geändert`, addElementAction: t => `${t} hinzugefügt`, eraseAction: (t, e) => `${e} ${t} gelöscht`, duplicateAction: (t, e) => `${e} ${t} dupliziert`, inverseOf: t => `Umkehrung von ${t}`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: t => `${Math.abs(t)} Grad ${t < 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: t => `${t} Element${1 === t ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: t => `Text-Objekt: ${t}`, pathNodeCount: t => `Es gibt ${t} sichtbare Pfad-Objekte.`, textNodeCount: t => `Es gibt ${t} sichtbare Text-Knotenpunkte.`, textNode: t => `Text: ${t}`, 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: t => `Laden ${t}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: t => `Rückgangig gemacht ${t}`, redoAnnouncement: t => `Wiederholt ${t}` });
+exports.default = localization;

package/dist/cjs/src/localizations/en.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;