js-draw 0.25.0 → 1.0.0

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

@@ -1,58 +1,58 @@
 "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;
-var Mat33_1 = require("../../math/Mat33");
-var Path_1 = require("../../math/shapes/Path");
-var Rect2_1 = require("../../math/shapes/Rect2");
-var Stroke_1 = require("../Stroke");
-var makeFilledRectangleBuilder = function (initialPoint, viewport) {
+const math_1 = require("@js-draw/math");
+const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeFilledRectangleBuilder = (initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, true, viewport);
 };
 exports.makeFilledRectangleBuilder = makeFilledRectangleBuilder;
-var makeOutlinedRectangleBuilder = function (initialPoint, viewport) {
+const makeOutlinedRectangleBuilder = (initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, false, viewport);
 };
 exports.makeOutlinedRectangleBuilder = makeOutlinedRectangleBuilder;
-var RectangleBuilder = /** @class */ (function () {
-    function RectangleBuilder(startPoint, filled, viewport) {
+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;
     }
-    RectangleBuilder.prototype.getBBox = function () {
-        var preview = this.buildPreview();
+    getBBox() {
+        const preview = this.buildPreview();
         return preview.getBBox();
-    };
-    RectangleBuilder.prototype.buildPreview = function () {
-        var _this = this;
-        var canvasAngle = this.viewport.getRotationAngle();
-        var rotationMat = Mat33_1.default.zRotation(-canvasAngle);
+    }
+    buildPreview() {
+        const canvasAngle = this.viewport.getRotationAngle();
+        const rotationMat = math_1.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_1.default.fromCorners(startPoint, endPoint);
-        var path = Path_1.default.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+        const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+        const rect = math_1.Rect2.fromCorners(startPoint, endPoint);
+        const path = math_1.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_1.default([
-            path.toRenderable({
+        rotationMat).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
+            (0, RenderablePathSpec_1.pathToRenderable)(path, {
                 fill: this.endPoint.color
             }),
         ]);
         return preview;
-    };
-    RectangleBuilder.prototype.build = function () {
+    }
+    build() {
         return this.buildPreview();
-    };
-    RectangleBuilder.prototype.preview = function (renderer) {
+    }
+    preview(renderer) {
         this.buildPreview().render(renderer);
-    };
-    RectangleBuilder.prototype.addPoint = function (point) {
+    }
+    addPoint(point) {
         this.endPoint = point;
-    };
-    return RectangleBuilder;
-}());
+    }
+}
 exports.default = RectangleBuilder;

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

@@ -1,4 +1,4 @@
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

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

@@ -11,4 +11,6 @@ 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, };
+export { Stroke, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, 
+/** @deprecated use {@link TextComponent} */
+TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/cjs/components/lib.js

@@ -13,6 +13,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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.Text = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = exports.makeOutlinedCircleBuilder = exports.makePressureSensitiveFreehandLineBuilder = exports.makeFreehandLineBuilder = void 0;
 __exportStar(require("./builders/types"), exports);
@@ -23,20 +26,20 @@ Object.defineProperty(exports, "makePressureSensitiveFreehandLineBuilder", { enu
 var CircleBuilder_1 = require("./builders/CircleBuilder");
 Object.defineProperty(exports, "makeOutlinedCircleBuilder", { enumerable: true, get: function () { return CircleBuilder_1.makeOutlinedCircleBuilder; } });
 var StrokeSmoother_1 = require("./util/StrokeSmoother");
-Object.defineProperty(exports, "StrokeSmoother", { enumerable: true, get: function () { return StrokeSmoother_1.default; } });
+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 AbstractComponent_1.default; } });
-var Stroke_1 = require("./Stroke");
+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;
-var TextComponent_1 = require("./TextComponent");
+const TextComponent_1 = __importDefault(require("./TextComponent"));
 exports.TextComponent = TextComponent_1.default;
 exports.Text = TextComponent_1.default;
-var ImageComponent_1 = require("./ImageComponent");
+const ImageComponent_1 = __importDefault(require("./ImageComponent"));
 exports.ImageComponent = ImageComponent_1.default;
-var RestylableComponent_1 = require("./RestylableComponent");
+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; } });
-var BackgroundComponent_1 = require("./BackgroundComponent");
+const BackgroundComponent_1 = __importDefault(require("./BackgroundComponent"));
 exports.BackgroundComponent = BackgroundComponent_1.default;

package/dist/cjs/components/localization.js

@@ -7,8 +7,8 @@ exports.defaultComponentLocalization = {
     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); },
+    filledBackgroundWithColor: (color) => `Filled background (${color})`,
+    text: (text) => `Text object: ${text}`,
+    imageNode: (description) => `Image: ${description}`,
+    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
 };

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

@@ -1,5 +1,4 @@
-import { Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/shapes/Rect2';
+import { Vec2, Rect2 } from '@js-draw/math';
 import { StrokeDataPoint } from '../../types';
 export interface Curve {
     startPoint: Vec2;

package/dist/cjs/components/util/StrokeSmoother.js

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StrokeSmoother = void 0;
-var Vec2_1 = require("../../math/Vec2");
-var Rect2_1 = require("../../math/shapes/Rect2");
-var LineSegment2_1 = require("../../math/shapes/LineSegment2");
-var QuadraticBezier_1 = require("../../math/shapes/QuadraticBezier");
+const math_1 = require("@js-draw/math");
 // Handles stroke smoothing
-var StrokeSmoother = /** @class */ (function () {
-    function StrokeSmoother(startPoint, 
+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
@@ -22,39 +19,39 @@ var StrokeSmoother = /** @class */ (function () {
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
         this.buffer = [this.startPoint.pos];
-        this.momentum = Vec2_1.Vec2.zero;
+        this.momentum = math_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);
+        this.bbox = new math_1.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
@@ -64,38 +61,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;
             }
@@ -103,8 +98,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.
@@ -112,24 +107,26 @@ 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_1.Vec2.unitX);
-            var p3 = newPoint.pos;
+            const p1 = lastPoint.pos;
+            const p2 = lastPoint.pos.plus(this.lastExitingVec ?? math_1.Vec2.unitX);
+            const p3 = newPoint.pos;
             // Quadratic Bézier curve
-            this.currentCurve = new QuadraticBezier_1.default(p1, p2, p3);
+            this.currentCurve = new math_1.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.
@@ -140,21 +137,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;
@@ -163,11 +160,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_1.default(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
-        var lineFromEnd = new LineSegment2_1.default(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
-        var intersection = lineFromEnd.intersection(lineFromStart);
+        const lineFromStart = new math_1.LineSegment2(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
+        const lineFromEnd = new math_1.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;
         }
@@ -179,23 +176,22 @@ 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;
-        this.currentCurve = new QuadraticBezier_1.default(segmentStart, controlPoint, segmentEnd);
+        const prevCurve = this.currentCurve;
+        this.currentCurve = new math_1.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);
+        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);
@@ -218,8 +214,7 @@ var StrokeSmoother = /** @class */ (function () {
                 return;
             }
         }
-    };
-    return StrokeSmoother;
-}());
+    }
+}
 exports.StrokeSmoother = StrokeSmoother;
 exports.default = StrokeSmoother;

package/dist/cjs/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/cjs/components/util/describeComponentList.js

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 // Returns the description of all given elements, if identical, otherwise,
 // returns null.
-exports.default = (function (localizationTable, elems) {
+exports.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/cjs/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/cjs/dialogs/makeAboutDialog.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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();
+        },
+    };
+};
+exports.default = makeAboutDialog;

package/dist/cjs/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 {};