js-draw 0.25.1 → 1.0.1

package/dist/cjs/components/UnknownSVGObject.js

@@ -4,62 +4,49 @@
 // @internal
 // @packageDocumentation
 //
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var Rect2_1 = require("../math/shapes/Rect2");
-var SVGRenderer_1 = require("../rendering/renderers/SVGRenderer");
-var AbstractComponent_1 = require("./AbstractComponent");
-var componentId = 'unknown-svg-object';
-var UnknownSVGObject = /** @class */ (function (_super) {
-    __extends(UnknownSVGObject, _super);
-    function UnknownSVGObject(svgObject) {
-        var _this = _super.call(this, componentId) || this;
-        _this.svgObject = svgObject;
-        _this.contentBBox = Rect2_1.default.of(svgObject.getBoundingClientRect());
-        return _this;
+const math_1 = require("@js-draw/math");
+const SVGRenderer_1 = __importDefault(require("../rendering/renderers/SVGRenderer"));
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const componentId = 'unknown-svg-object';
+class UnknownSVGObject extends AbstractComponent_1.default {
+    constructor(svgObject) {
+        super(componentId);
+        this.svgObject = svgObject;
+        this.contentBBox = math_1.Rect2.of(svgObject.getBoundingClientRect());
     }
-    UnknownSVGObject.prototype.render = function (canvas, _visibleRect) {
+    render(canvas, _visibleRect) {
         if (!(canvas instanceof SVGRenderer_1.default)) {
             // Don't draw unrenderable objects if we can't
             return;
         }
+        canvas.startObject(this.contentBBox);
         canvas.drawSVGElem(this.svgObject);
-    };
-    UnknownSVGObject.prototype.intersects = function (lineSegment) {
-        return this.contentBBox.getEdges().some(function (edge) { return edge.intersection(lineSegment) !== null; });
-    };
-    UnknownSVGObject.prototype.applyTransformation = function (_affineTransfm) {
-    };
-    UnknownSVGObject.prototype.isSelectable = function () {
+        canvas.endObject(this.getLoadSaveData());
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersection(lineSegment) !== null);
+    }
+    applyTransformation(_affineTransfm) {
+    }
+    isSelectable() {
         return false;
-    };
-    UnknownSVGObject.prototype.createClone = function () {
+    }
+    createClone() {
         return new UnknownSVGObject(this.svgObject.cloneNode(true));
-    };
-    UnknownSVGObject.prototype.description = function (localization) {
+    }
+    description(localization) {
         return localization.svgObject;
-    };
-    UnknownSVGObject.prototype.serializeToJSON = function () {
+    }
+    serializeToJSON() {
         return JSON.stringify({
             html: this.svgObject.outerHTML,
         });
-    };
-    return UnknownSVGObject;
-}(AbstractComponent_1.default));
+    }
+}
 exports.default = UnknownSVGObject;
 // null: Do not deserialize UnknownSVGObjects.
 AbstractComponent_1.default.registerComponent(componentId, null);

package/dist/cjs/components/builders/ArrowBuilder.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/builders/ArrowBuilder.js

@@ -1,74 +1,76 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeArrowBuilder = void 0;
-var Path_1 = require("../../math/shapes/Path");
-var Stroke_1 = require("../Stroke");
-var makeArrowBuilder = function (initialPoint, viewport) {
+const math_1 = require("@js-draw/math");
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeArrowBuilder = (initialPoint, viewport) => {
     return new ArrowBuilder(initialPoint, viewport);
 };
 exports.makeArrowBuilder = makeArrowBuilder;
-var ArrowBuilder = /** @class */ (function () {
-    function ArrowBuilder(startPoint, viewport) {
+class ArrowBuilder {
+    constructor(startPoint, viewport) {
         this.startPoint = startPoint;
         this.viewport = viewport;
         this.endPoint = startPoint;
     }
-    ArrowBuilder.prototype.getLineWidth = function () {
+    getLineWidth() {
         return Math.max(this.endPoint.width, this.startPoint.width);
-    };
-    ArrowBuilder.prototype.getBBox = function () {
-        var preview = this.buildPreview();
+    }
+    getBBox() {
+        const preview = this.buildPreview();
         return preview.getBBox();
-    };
-    ArrowBuilder.prototype.buildPreview = function () {
-        var _this = this;
-        var lineStartPoint = this.startPoint.pos;
-        var endPoint = this.endPoint.pos;
-        var toEnd = endPoint.minus(lineStartPoint).normalized();
-        var arrowLength = endPoint.minus(lineStartPoint).length();
+    }
+    buildPreview() {
+        const lineStartPoint = this.startPoint.pos;
+        const endPoint = this.endPoint.pos;
+        const toEnd = endPoint.minus(lineStartPoint).normalized();
+        const arrowLength = endPoint.minus(lineStartPoint).length();
         // Ensure that the arrow tip is smaller than the arrow.
-        var arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
-        var startSize = this.startPoint.width / 2;
-        var endSize = this.endPoint.width / 2;
-        var arrowTipBase = endPoint.minus(toEnd.times(arrowTipSize));
+        const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
+        const startSize = this.startPoint.width / 2;
+        const endSize = this.endPoint.width / 2;
+        const arrowTipBase = endPoint.minus(toEnd.times(arrowTipSize));
         // Scaled normal vectors.
-        var lineNormal = toEnd.orthog();
-        var scaledStartNormal = lineNormal.times(startSize);
-        var scaledBaseNormal = lineNormal.times(endSize);
-        var path = new Path_1.default(arrowTipBase.minus(scaledBaseNormal), [
+        const lineNormal = toEnd.orthog();
+        const scaledStartNormal = lineNormal.times(startSize);
+        const scaledBaseNormal = lineNormal.times(endSize);
+        const path = new math_1.Path(arrowTipBase.minus(scaledBaseNormal), [
             // Stem
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: lineStartPoint.minus(scaledStartNormal),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: lineStartPoint.plus(scaledStartNormal),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: arrowTipBase.plus(scaledBaseNormal),
             },
             // Head
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: endPoint.plus(toEnd.times(endSize)),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: arrowTipBase.minus(scaledBaseNormal),
             },
             // Round all points in the arrow (to remove unnecessary decimal places)
-        ]).mapPoints(function (point) { return _this.viewport.roundPoint(point); });
-        var preview = new Stroke_1.default([
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
             {
                 startPoint: path.startPoint,
                 commands: path.parts,
@@ -78,16 +80,15 @@ var ArrowBuilder = /** @class */ (function () {
             }
         ]);
         return preview;
-    };
-    ArrowBuilder.prototype.build = function () {
+    }
+    build() {
         return this.buildPreview();
-    };
-    ArrowBuilder.prototype.preview = function (renderer) {
+    }
+    preview(renderer) {
         this.buildPreview().render(renderer);
-    };
-    ArrowBuilder.prototype.addPoint = function (point) {
+    }
+    addPoint(point) {
         this.endPoint = point;
-    };
-    return ArrowBuilder;
-}());
+    }
+}
 exports.default = ArrowBuilder;

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

@@ -1,58 +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.makeOutlinedCircleBuilder = void 0;
-var Vec2_1 = require("../../math/Vec2");
-var Path_1 = require("../../math/shapes/Path");
-var Viewport_1 = require("../../Viewport");
-var Stroke_1 = require("../Stroke");
-var Color4_1 = require("../../Color4");
-var makeOutlinedCircleBuilder = function (initialPoint, viewport) {
+const math_1 = require("@js-draw/math");
+const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
+const Viewport_1 = __importDefault(require("../../Viewport"));
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeOutlinedCircleBuilder = (initialPoint, viewport) => {
     return new CircleBuilder(initialPoint, viewport);
 };
 exports.makeOutlinedCircleBuilder = makeOutlinedCircleBuilder;
-var CircleBuilder = /** @class */ (function () {
-    function CircleBuilder(startPoint, viewport) {
+class CircleBuilder {
+    constructor(startPoint, viewport) {
         this.startPoint = startPoint;
         this.viewport = viewport;
         // Initially, the start and end points are the same.
         this.endPoint = startPoint;
     }
-    CircleBuilder.prototype.getBBox = function () {
-        var preview = this.buildPreview();
+    getBBox() {
+        const preview = this.buildPreview();
         return preview.getBBox();
-    };
-    CircleBuilder.prototype.buildPreview = function () {
-        var _this = this;
-        var pathCommands = [];
-        var numDivisions = 6;
-        var stepSize = Math.PI * 2 / numDivisions;
+    }
+    buildPreview() {
+        const pathCommands = [];
+        const numDivisions = 6;
+        const stepSize = Math.PI * 2 / numDivisions;
         // Round the stroke width so that when exported it doesn't have unnecessary trailing decimals.
-        var strokeWidth = Viewport_1.default.roundPoint(this.endPoint.width, 5 / this.viewport.getScaleFactor());
-        var center = this.startPoint.pos.lerp(this.endPoint.pos, 0.5);
-        var startEndDelta = this.endPoint.pos.minus(center);
-        var radius = startEndDelta.length() - strokeWidth / 2;
-        var startPoint = center.plus(Vec2_1.Vec2.of(radius, 0));
-        for (var t = stepSize; t <= Math.PI * 2; t += stepSize) {
-            var endPoint = Vec2_1.Vec2.of(radius * Math.cos(t), -radius * Math.sin(t)).plus(center);
+        const strokeWidth = Viewport_1.default.roundPoint(this.endPoint.width, 5 / this.viewport.getScaleFactor());
+        const center = this.startPoint.pos.lerp(this.endPoint.pos, 0.5);
+        const startEndDelta = this.endPoint.pos.minus(center);
+        const radius = startEndDelta.length() - strokeWidth / 2;
+        const startPoint = center.plus(math_1.Vec2.of(radius, 0));
+        for (let t = stepSize; t <= Math.PI * 2; t += stepSize) {
+            const endPoint = math_1.Vec2.of(radius * Math.cos(t), -radius * Math.sin(t)).plus(center);
             // controlPointRadiusScale is selected to make the circles appear circular and
             // **does** depend on stepSize.
-            var controlPointRadiusScale = 1.141;
-            var controlPoint = Vec2_1.Vec2.of(Math.cos(t - stepSize / 2), -Math.sin(t - stepSize / 2)).times(radius * controlPointRadiusScale).plus(center);
+            const controlPointRadiusScale = 1.141;
+            const controlPoint = math_1.Vec2.of(Math.cos(t - stepSize / 2), -Math.sin(t - stepSize / 2)).times(radius * controlPointRadiusScale).plus(center);
             pathCommands.push({
-                kind: Path_1.PathCommandType.QuadraticBezierTo,
-                controlPoint: controlPoint,
-                endPoint: endPoint,
+                kind: math_1.PathCommandType.QuadraticBezierTo,
+                controlPoint,
+                endPoint,
             });
         }
         pathCommands.push({
-            kind: Path_1.PathCommandType.LineTo,
+            kind: math_1.PathCommandType.LineTo,
             point: startPoint,
         });
-        var path = new Path_1.default(startPoint, pathCommands)
-            .mapPoints(function (point) { return _this.viewport.roundPoint(point); });
-        var preview = new Stroke_1.default([
-            path.toRenderable({
-                fill: Color4_1.default.transparent,
+        const path = new math_1.Path(startPoint, pathCommands)
+            .mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
+            (0, RenderablePathSpec_1.pathToRenderable)(path, {
+                fill: math_1.Color4.transparent,
                 stroke: {
                     width: strokeWidth,
                     color: this.endPoint.color,
@@ -60,15 +61,14 @@ var CircleBuilder = /** @class */ (function () {
             }),
         ]);
         return preview;
-    };
-    CircleBuilder.prototype.build = function () {
+    }
+    build() {
         return this.buildPreview();
-    };
-    CircleBuilder.prototype.preview = function (renderer) {
+    }
+    preview(renderer) {
         this.buildPreview().render(renderer);
-    };
-    CircleBuilder.prototype.addPoint = function (point) {
+    }
+    addPoint(point) {
         this.endPoint = point;
-    };
-    return CircleBuilder;
-}());
+    }
+}

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

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

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

@@ -1,112 +1,101 @@
 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeFreehandLineBuilder = void 0;
-var Vec2_1 = require("../../math/Vec2");
-var Rect2_1 = require("../../math/shapes/Rect2");
-var Path_1 = require("../../math/shapes/Path");
-var Stroke_1 = require("../Stroke");
-var Viewport_1 = require("../../Viewport");
-var StrokeSmoother_1 = require("../util/StrokeSmoother");
-var Color4_1 = require("../../Color4");
-var makeFreehandLineBuilder = function (initialPoint, viewport) {
+const math_1 = require("@js-draw/math");
+const Stroke_1 = __importDefault(require("../Stroke"));
+const Viewport_1 = __importDefault(require("../../Viewport"));
+const StrokeSmoother_1 = require("../util/StrokeSmoother");
+const makeFreehandLineBuilder = (initialPoint, viewport) => {
     // Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
     // less than ±1 px from the curve.
-    var maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
-    var minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
+    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
+    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
     return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
 };
 exports.makeFreehandLineBuilder = makeFreehandLineBuilder;
 // Handles stroke smoothing and creates Strokes from user/stylus input.
-var FreehandLineBuilder = /** @class */ (function () {
-    function FreehandLineBuilder(startPoint, minFitAllowed, maxFitAllowed, viewport) {
-        var _this = this;
+class FreehandLineBuilder {
+    constructor(startPoint, minFitAllowed, maxFitAllowed, viewport) {
         this.startPoint = startPoint;
         this.minFitAllowed = minFitAllowed;
         this.viewport = viewport;
         this.isFirstSegment = true;
         this.parts = [];
         this.widthAverageNumSamples = 1;
-        this.curveFitter = new StrokeSmoother_1.StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, function (curve) { return _this.addCurve(curve); });
+        this.curveFitter = new StrokeSmoother_1.StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, (curve) => this.addCurve(curve));
         this.averageWidth = 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);
     }
-    FreehandLineBuilder.prototype.getBBox = function () {
+    getBBox() {
         return this.bbox;
-    };
-    FreehandLineBuilder.prototype.getRenderingStyle = function () {
+    }
+    getRenderingStyle() {
         return {
-            fill: Color4_1.default.transparent,
+            fill: math_1.Color4.transparent,
             stroke: {
                 color: this.startPoint.color,
                 width: this.roundDistance(this.averageWidth),
             }
         };
-    };
-    FreehandLineBuilder.prototype.previewCurrentPath = function () {
-        var path = this.parts.slice();
-        var commands = __spreadArray(__spreadArray([], path, true), this.curveToPathCommands(this.curveFitter.preview()), true);
-        var startPoint = this.startPoint.pos;
+    }
+    previewCurrentPath() {
+        const path = this.parts.slice();
+        const commands = [...path, ...this.curveToPathCommands(this.curveFitter.preview())];
+        const startPoint = this.startPoint.pos;
         return {
-            startPoint: startPoint,
-            commands: commands,
+            startPoint,
+            commands,
             style: this.getRenderingStyle(),
         };
-    };
-    FreehandLineBuilder.prototype.previewFullPath = function () {
-        var preview = this.previewCurrentPath();
+    }
+    previewFullPath() {
+        const preview = this.previewCurrentPath();
         if (preview) {
             return [preview];
         }
         return null;
-    };
-    FreehandLineBuilder.prototype.previewStroke = function () {
-        var pathPreview = this.previewFullPath();
+    }
+    previewStroke() {
+        const pathPreview = this.previewFullPath();
         if (pathPreview) {
             return new Stroke_1.default(pathPreview);
         }
         return null;
-    };
-    FreehandLineBuilder.prototype.preview = function (renderer) {
-        var paths = this.previewFullPath();
+    }
+    preview(renderer) {
+        const paths = this.previewFullPath();
         if (paths) {
-            var approxBBox = this.viewport.visibleRect;
+            const approxBBox = this.viewport.visibleRect;
             renderer.startObject(approxBBox);
-            for (var _i = 0, paths_1 = paths; _i < paths_1.length; _i++) {
-                var path = paths_1[_i];
+            for (const path of paths) {
                 renderer.drawPath(path);
             }
             renderer.endObject();
         }
-    };
-    FreehandLineBuilder.prototype.build = function () {
+    }
+    build() {
         this.curveFitter.finalizeCurrentCurve();
         return this.previewStroke();
-    };
-    FreehandLineBuilder.prototype.getMinFit = function () {
-        var minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
+    }
+    getMinFit() {
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }
         return minFit;
-    };
-    FreehandLineBuilder.prototype.roundPoint = function (point) {
-        var minFit = this.getMinFit();
+    }
+    roundPoint(point) {
+        const minFit = this.getMinFit();
         return Viewport_1.default.roundPoint(point, minFit);
-    };
-    FreehandLineBuilder.prototype.roundDistance = function (dist) {
-        var minFit = this.getMinFit();
+    }
+    roundDistance(dist) {
+        const minFit = this.getMinFit();
         return Viewport_1.default.roundPoint(dist, minFit);
-    };
-    FreehandLineBuilder.prototype.curveToPathCommands = function (curve) {
+    }
+    curveToPathCommands(curve) {
         // Case where no points have been added
         if (!curve) {
             // Don't create a circle around the initial point if the stroke has more than one point.
@@ -114,8 +103,8 @@ var FreehandLineBuilder = /** @class */ (function () {
                 return [];
             }
             // Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
-            var width = Viewport_1.default.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
-            var center = this.roundPoint(this.startPoint.pos);
+            const width = Viewport_1.default.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
+            const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |
             //  ----- ←
@@ -123,61 +112,59 @@ var FreehandLineBuilder = /** @class */ (function () {
             // Draw a circle-ish shape around the start point
             return [
                 {
-                    kind: Path_1.PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2_1.Vec2.of(width, width)),
+                    kind: math_1.PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(math_1.Vec2.of(width, width)),
                     // Bottom of the circle
                     //    |
                     //  -----
                     //    |
                     //    ↑
-                    endPoint: center.plus(Vec2_1.Vec2.of(0, width)),
+                    endPoint: center.plus(math_1.Vec2.of(0, width)),
                 },
                 {
-                    kind: Path_1.PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2_1.Vec2.of(-width, width)),
-                    endPoint: center.plus(Vec2_1.Vec2.of(-width, 0)),
+                    kind: math_1.PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(math_1.Vec2.of(-width, width)),
+                    endPoint: center.plus(math_1.Vec2.of(-width, 0)),
                 },
                 {
-                    kind: Path_1.PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2_1.Vec2.of(-width, -width)),
-                    endPoint: center.plus(Vec2_1.Vec2.of(0, -width)),
+                    kind: math_1.PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(math_1.Vec2.of(-width, -width)),
+                    endPoint: center.plus(math_1.Vec2.of(0, -width)),
                 },
                 {
-                    kind: Path_1.PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2_1.Vec2.of(width, -width)),
-                    endPoint: center.plus(Vec2_1.Vec2.of(width, 0)),
+                    kind: math_1.PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(math_1.Vec2.of(width, -width)),
+                    endPoint: center.plus(math_1.Vec2.of(width, 0)),
                 }
             ];
         }
-        var result = [];
+        const result = [];
         if (this.isFirstSegment) {
             result.push({
-                kind: Path_1.PathCommandType.MoveTo,
+                kind: math_1.PathCommandType.MoveTo,
                 point: this.roundPoint(curve.startPoint),
             });
         }
         result.push({
-            kind: Path_1.PathCommandType.QuadraticBezierTo,
+            kind: math_1.PathCommandType.QuadraticBezierTo,
             controlPoint: this.roundPoint(curve.controlPoint),
             endPoint: this.roundPoint(curve.endPoint),
         });
         return result;
-    };
-    FreehandLineBuilder.prototype.addCurve = function (curve) {
-        var _a;
-        var parts = this.curveToPathCommands(curve);
-        (_a = this.parts).push.apply(_a, parts);
+    }
+    addCurve(curve) {
+        const parts = this.curveToPathCommands(curve);
+        this.parts.push(...parts);
         if (this.isFirstSegment) {
             this.isFirstSegment = false;
         }
-    };
-    FreehandLineBuilder.prototype.addPoint = function (newPoint) {
+    }
+    addPoint(newPoint) {
         this.curveFitter.addPoint(newPoint);
         this.widthAverageNumSamples++;
         this.averageWidth =
             this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
                 + newPoint.width / this.widthAverageNumSamples;
-    };
-    return FreehandLineBuilder;
-}());
+    }
+}
 exports.default = FreehandLineBuilder;

package/dist/cjs/components/builders/LineBuilder.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';