js-draw 0.25.1 → 1.0.0

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

@@ -1,65 +1,67 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeLineBuilder = void 0;
-var Path_1 = require("../../math/shapes/Path");
-var Stroke_1 = require("../Stroke");
-var makeLineBuilder = function (initialPoint, viewport) {
+const math_1 = require("@js-draw/math");
+const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeLineBuilder = (initialPoint, viewport) => {
     return new LineBuilder(initialPoint, viewport);
 };
 exports.makeLineBuilder = makeLineBuilder;
-var LineBuilder = /** @class */ (function () {
-    function LineBuilder(startPoint, viewport) {
+class LineBuilder {
+    constructor(startPoint, viewport) {
         this.startPoint = startPoint;
         this.viewport = viewport;
         this.endPoint = startPoint;
     }
-    LineBuilder.prototype.getBBox = function () {
-        var preview = this.buildPreview();
+    getBBox() {
+        const preview = this.buildPreview();
         return preview.getBBox();
-    };
-    LineBuilder.prototype.buildPreview = function () {
-        var _this = this;
-        var startPoint = this.startPoint.pos;
-        var endPoint = this.endPoint.pos;
-        var toEnd = endPoint.minus(startPoint).normalized();
-        var startSize = this.startPoint.width / 2;
-        var endSize = this.endPoint.width / 2;
-        var lineNormal = toEnd.orthog();
-        var scaledStartNormal = lineNormal.times(startSize);
-        var scaledEndNormal = lineNormal.times(endSize);
-        var strokeStartPoint = startPoint.minus(scaledStartNormal);
-        var path = new Path_1.default(strokeStartPoint, [
+    }
+    buildPreview() {
+        const startPoint = this.startPoint.pos;
+        const endPoint = this.endPoint.pos;
+        const toEnd = endPoint.minus(startPoint).normalized();
+        const startSize = this.startPoint.width / 2;
+        const endSize = this.endPoint.width / 2;
+        const lineNormal = toEnd.orthog();
+        const scaledStartNormal = lineNormal.times(startSize);
+        const scaledEndNormal = lineNormal.times(endSize);
+        const strokeStartPoint = startPoint.minus(scaledStartNormal);
+        const path = new math_1.Path(strokeStartPoint, [
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: startPoint.plus(scaledStartNormal),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: endPoint.plus(scaledEndNormal),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: endPoint.minus(scaledEndNormal),
             },
             {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: startPoint.minus(scaledStartNormal),
             },
-        ]).mapPoints(function (point) { return _this.viewport.roundPoint(point); });
-        var preview = new Stroke_1.default([
-            path.toRenderable({ fill: this.startPoint.color })
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
+            (0, RenderablePathSpec_1.pathToRenderable)(path, { fill: this.startPoint.color })
         ]);
         return preview;
-    };
-    LineBuilder.prototype.build = function () {
+    }
+    build() {
         return this.buildPreview();
-    };
-    LineBuilder.prototype.preview = function (renderer) {
+    }
+    preview(renderer) {
         this.buildPreview().render(renderer);
-    };
-    LineBuilder.prototype.addPoint = function (point) {
+    }
+    addPoint(point) {
         this.endPoint = point;
-    };
-    return LineBuilder;
-}());
+    }
+}
 exports.default = LineBuilder;

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

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

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

@@ -1,39 +1,30 @@
 "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.makePressureSensitiveFreehandLineBuilder = void 0;
-var bezier_js_1 = require("bezier-js");
-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 makePressureSensitiveFreehandLineBuilder = function (initialPoint, viewport) {
+const bezier_js_1 = require("bezier-js");
+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 makePressureSensitiveFreehandLineBuilder = (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 PressureSensitiveFreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
 };
 exports.makePressureSensitiveFreehandLineBuilder = makePressureSensitiveFreehandLineBuilder;
 // Handles stroke smoothing and creates Strokes from user/stylus input.
-var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
-    function PressureSensitiveFreehandLineBuilder(startPoint, 
+class PressureSensitiveFreehandLineBuilder {
+    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, viewport) {
-        var _this = this;
         this.startPoint = startPoint;
         this.minFitAllowed = minFitAllowed;
         this.viewport = viewport;
@@ -45,32 +36,30 @@ var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
         this.parts = [];
         this.upperSegments = [];
         this.lowerSegments = [];
-        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.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);
     }
-    PressureSensitiveFreehandLineBuilder.prototype.getBBox = function () {
+    getBBox() {
         return this.bbox;
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.getRenderingStyle = function () {
-        var _a;
+    }
+    getRenderingStyle() {
         return {
-            fill: (_a = this.startPoint.color) !== null && _a !== void 0 ? _a : null,
+            fill: this.startPoint.color ?? null,
         };
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.previewCurrentPath = function () {
-        var _a;
-        var upperPath = this.upperSegments.slice();
-        var lowerPath = this.lowerSegments.slice();
-        var lowerToUpperCap;
-        var pathStartConnector;
-        var currentCurve = this.curveFitter.preview();
+    }
+    previewCurrentPath() {
+        const upperPath = this.upperSegments.slice();
+        const lowerPath = this.lowerSegments.slice();
+        let lowerToUpperCap;
+        let pathStartConnector;
+        const currentCurve = this.curveFitter.preview();
         if (currentCurve) {
-            var _b = this.segmentToPath(currentCurve), upperCurveCommand = _b.upperCurveCommand, lowerToUpperConnector = _b.lowerToUpperConnector, upperToLowerConnector = _b.upperToLowerConnector, lowerCurveCommand = _b.lowerCurveCommand;
+            const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand } = this.segmentToPath(currentCurve);
             upperPath.push(upperCurveCommand);
             lowerPath.push(lowerCurveCommand);
             lowerToUpperCap = lowerToUpperConnector;
-            pathStartConnector = (_a = this.pathStartConnector) !== null && _a !== void 0 ? _a : upperToLowerConnector;
+            pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
         }
         else {
             if (this.mostRecentConnector === null || this.pathStartConnector === null) {
@@ -79,9 +68,9 @@ var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
             lowerToUpperCap = this.mostRecentConnector;
             pathStartConnector = this.pathStartConnector;
         }
-        var startPoint;
-        var lastLowerSegment = lowerPath[lowerPath.length - 1];
-        if (lastLowerSegment.kind === Path_1.PathCommandType.LineTo || lastLowerSegment.kind === Path_1.PathCommandType.MoveTo) {
+        let startPoint;
+        const lastLowerSegment = lowerPath[lowerPath.length - 1];
+        if (lastLowerSegment.kind === math_1.PathCommandType.LineTo || lastLowerSegment.kind === math_1.PathCommandType.MoveTo) {
             startPoint = lastLowerSegment.point;
         }
         else {
@@ -95,89 +84,97 @@ var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
             // /___ /
             //  ↑
             //  Oldest points
-            startPoint: startPoint,
-            commands: __spreadArray(__spreadArray(__spreadArray([
+            startPoint,
+            commands: [
                 // Move to the most recent point on the upperPath:
                 //     ----→•
                 //  __/  __/
                 // /___ /
-                lowerToUpperCap
-            ], upperPath.reverse(), true), [
+                lowerToUpperCap,
+                // Move to the beginning of the upperPath:
+                //  __/  __/
+                // /___ /
+                //     • ←-
+                ...upperPath.reverse(),
                 // Move to the beginning of the lowerPath:
                 //  __/  __/
                 // /___ /
                 // •
-                pathStartConnector
-            ], false), lowerPath, true),
+                pathStartConnector,
+                // Move back to the start point:
+                //     •
+                //  __/  __/
+                // /___ /
+                ...lowerPath,
+            ],
             style: this.getRenderingStyle(),
         };
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.previewFullPath = function () {
-        var preview = this.previewCurrentPath();
+    }
+    previewFullPath() {
+        const preview = this.previewCurrentPath();
         if (preview) {
-            return __spreadArray(__spreadArray([], this.parts, true), [preview], false);
+            return [...this.parts, preview];
         }
         return null;
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.previewStroke = function () {
-        var pathPreview = this.previewFullPath();
+    }
+    previewStroke() {
+        const pathPreview = this.previewFullPath();
         if (pathPreview) {
             return new Stroke_1.default(pathPreview);
         }
         return null;
-    };
-    PressureSensitiveFreehandLineBuilder.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();
         }
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.build = function () {
+    }
+    build() {
         this.curveFitter.finalizeCurrentCurve();
         if (this.isFirstSegment) {
             // Ensure we have something.
             this.addCurve(null);
         }
         return this.previewStroke();
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.roundPoint = function (point) {
-        var minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
+    }
+    roundPoint(point) {
+        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }
         return Viewport_1.default.roundPoint(point, minFit);
-    };
+    }
     // Returns true if, due to overlap with previous segments, a new RenderablePathSpec should be created.
-    PressureSensitiveFreehandLineBuilder.prototype.shouldStartNewSegment = function (lowerCurve, upperCurve) {
+    shouldStartNewSegment(lowerCurve, upperCurve) {
         if (!this.lastLowerBezier || !this.lastUpperBezier) {
             return false;
         }
-        var getIntersection = function (curve1, curve2) {
-            var intersection = curve1.intersects(curve2);
+        const getIntersection = (curve1, curve2) => {
+            const intersection = curve1.intersects(curve2);
             if (!intersection || intersection.length === 0) {
                 return null;
             }
             // From http://pomax.github.io/bezierjs/#intersect-curve,
             // .intersects returns an array of 't1/t2' pairs, where curve1.at(t1) gives the point.
-            var firstTPair = intersection[0];
-            var match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
+            const firstTPair = intersection[0];
+            const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
             if (!match) {
-                throw new Error("Incorrect format returned by .intersects: ".concat(intersection, " should be array of \"number/number\"!"));
+                throw new Error(`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`);
             }
-            var t = parseFloat(match[1]);
-            return Vec2_1.Vec2.ofXY(curve1.get(t));
+            const t = parseFloat(match[1]);
+            return math_1.Vec2.ofXY(curve1.get(t));
         };
-        var getExitDirection = function (curve) {
-            return Vec2_1.Vec2.ofXY(curve.points[2]).minus(Vec2_1.Vec2.ofXY(curve.points[1])).normalized();
+        const getExitDirection = (curve) => {
+            return math_1.Vec2.ofXY(curve.points[2]).minus(math_1.Vec2.ofXY(curve.points[1])).normalized();
         };
-        var getEnterDirection = function (curve) {
-            return Vec2_1.Vec2.ofXY(curve.points[1]).minus(Vec2_1.Vec2.ofXY(curve.points[0])).normalized();
+        const getEnterDirection = (curve) => {
+            return math_1.Vec2.ofXY(curve.points[1]).minus(math_1.Vec2.ofXY(curve.points[0])).normalized();
         };
         // Prevent
         //         /
@@ -201,61 +198,61 @@ var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
         // /   / /
         //   //
         // / /
-        var lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
-        var upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
+        const lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
+        const upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
         if (lowerIntersection || upperIntersection) {
             return true;
         }
         return false;
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.addCurve = function (curve) {
+    }
+    addCurve(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.
             if (!this.isFirstSegment) {
                 return;
             }
-            var width = Viewport_1.default.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
-            var center = this.roundPoint(this.startPoint.pos);
+            const width = Viewport_1.default.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+            const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |
             //  ----- ←
             //    |
-            var startPoint = this.startPoint.pos.plus(Vec2_1.Vec2.of(width, 0));
+            const startPoint = this.startPoint.pos.plus(math_1.Vec2.of(width, 0));
             // Draw a circle-ish shape around the start point
             this.lowerSegments.push({
-                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)),
             });
             this.pathStartConnector = {
-                kind: Path_1.PathCommandType.LineTo,
+                kind: math_1.PathCommandType.LineTo,
                 point: startPoint,
             };
             this.mostRecentConnector = this.pathStartConnector;
             return;
         }
-        var _a = this.segmentToPath(curve), upperCurveCommand = _a.upperCurveCommand, lowerToUpperConnector = _a.lowerToUpperConnector, upperToLowerConnector = _a.upperToLowerConnector, lowerCurveCommand = _a.lowerCurveCommand, lowerCurve = _a.lowerCurve, upperCurve = _a.upperCurve;
-        var shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, } = this.segmentToPath(curve);
+        const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
         if (shouldStartNew) {
-            var part = this.previewCurrentPath();
+            const part = this.previewCurrentPath();
             if (part) {
                 this.parts.push(part);
                 this.upperSegments = [];
@@ -276,23 +273,23 @@ var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
         this.lastLowerBezier = lowerCurve;
         this.lastUpperBezier = upperCurve;
         this.curveStartWidth = curve.startWidth;
-    };
+    }
     // Returns [upper curve, connector, lower curve]
-    PressureSensitiveFreehandLineBuilder.prototype.segmentToPath = function (curve) {
-        var bezier = new bezier_js_1.Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
-        var startVec = Vec2_1.Vec2.ofXY(bezier.normal(0)).normalized();
-        var endVec = Vec2_1.Vec2.ofXY(bezier.normal(1)).normalized();
+    segmentToPath(curve) {
+        const bezier = new bezier_js_1.Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
+        let startVec = math_1.Vec2.ofXY(bezier.normal(0)).normalized();
+        let endVec = math_1.Vec2.ofXY(bezier.normal(1)).normalized();
         startVec = startVec.times(curve.startWidth / 2);
         endVec = endVec.times(curve.endWidth / 2);
         if (!isFinite(startVec.magnitude())) {
             console.error('Warning: startVec is NaN or ∞', startVec, endVec, curve);
             startVec = endVec;
         }
-        var startPt = curve.startPoint;
-        var endPt = curve.endPoint;
-        var controlPoint = curve.controlPoint;
+        const startPt = curve.startPoint;
+        const endPt = curve.endPoint;
+        const controlPoint = curve.controlPoint;
         // Approximate the normal at the location of the control point
-        var projectionT = bezier.project(controlPoint.xy).t;
+        let projectionT = bezier.project(controlPoint.xy).t;
         if (!projectionT) {
             if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
                 projectionT = 0.1;
@@ -301,51 +298,46 @@ var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
                 projectionT = 0.9;
             }
         }
-        var halfVecT = projectionT;
-        var halfVec = Vec2_1.Vec2.ofXY(bezier.normal(halfVecT))
+        const halfVecT = projectionT;
+        const halfVec = math_1.Vec2.ofXY(bezier.normal(halfVecT))
             .normalized().times(curve.startWidth / 2 * halfVecT
             + curve.endWidth / 2 * (1 - halfVecT));
         // Each starts at startPt ± startVec
-        var lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
-        var lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
-        var lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
-        var upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
-        var upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
-        var upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
-        var lowerCurveCommand = {
-            kind: Path_1.PathCommandType.QuadraticBezierTo,
+        const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
+        const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
+        const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
+        const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
+        const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
+        const upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
+        const lowerCurveCommand = {
+            kind: math_1.PathCommandType.QuadraticBezierTo,
             controlPoint: lowerCurveControlPoint,
             endPoint: lowerCurveEndPoint,
         };
         // From the end of the upperCurve to the start of the lowerCurve:
-        var upperToLowerConnector = {
-            kind: Path_1.PathCommandType.LineTo,
+        const upperToLowerConnector = {
+            kind: math_1.PathCommandType.LineTo,
             point: lowerCurveStartPoint,
         };
         // From the end of lowerCurve to the start of upperCurve:
-        var lowerToUpperConnector = {
-            kind: Path_1.PathCommandType.LineTo,
+        const lowerToUpperConnector = {
+            kind: math_1.PathCommandType.LineTo,
             point: upperCurveStartPoint,
         };
-        var upperCurveCommand = {
-            kind: Path_1.PathCommandType.QuadraticBezierTo,
+        const upperCurveCommand = {
+            kind: math_1.PathCommandType.QuadraticBezierTo,
             controlPoint: upperCurveControlPoint,
             endPoint: upperCurveEndPoint,
         };
-        var upperCurve = new bezier_js_1.Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
-        var lowerCurve = new bezier_js_1.Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        const upperCurve = new bezier_js_1.Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        const lowerCurve = new bezier_js_1.Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
         return {
-            upperCurveCommand: upperCurveCommand,
-            upperToLowerConnector: upperToLowerConnector,
-            lowerToUpperConnector: lowerToUpperConnector,
-            lowerCurveCommand: lowerCurveCommand,
-            upperCurve: upperCurve,
-            lowerCurve: lowerCurve,
+            upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
+            upperCurve, lowerCurve,
         };
-    };
-    PressureSensitiveFreehandLineBuilder.prototype.addPoint = function (newPoint) {
+    }
+    addPoint(newPoint) {
         this.curveFitter.addPoint(newPoint);
-    };
-    return PressureSensitiveFreehandLineBuilder;
-}());
+    }
+}
 exports.default = PressureSensitiveFreehandLineBuilder;

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