js-draw 0.17.3 → 0.18.0

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

@@ -0,0 +1,347 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makePressureSensitiveFreehandLineBuilder = void 0;
+const bezier_js_1 = require("bezier-js");
+const Vec2_1 = require("../../math/Vec2");
+const Rect2_1 = __importDefault(require("../../math/Rect2"));
+const Path_1 = require("../../math/Path");
+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.
+    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.
+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) {
+        this.startPoint = startPoint;
+        this.minFitAllowed = minFitAllowed;
+        this.viewport = viewport;
+        this.isFirstSegment = true;
+        this.pathStartConnector = null;
+        this.mostRecentConnector = null;
+        this.lastUpperBezier = null;
+        this.lastLowerBezier = null;
+        this.parts = [];
+        this.upperSegments = [];
+        this.lowerSegments = [];
+        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);
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    getRenderingStyle() {
+        var _a;
+        return {
+            fill: (_a = this.startPoint.color) !== null && _a !== void 0 ? _a : null,
+        };
+    }
+    previewCurrentPath() {
+        var _a;
+        const upperPath = this.upperSegments.slice();
+        const lowerPath = this.lowerSegments.slice();
+        let lowerToUpperCap;
+        let pathStartConnector;
+        const currentCurve = this.curveFitter.preview();
+        if (currentCurve) {
+            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;
+        }
+        else {
+            if (this.mostRecentConnector === null || this.pathStartConnector === null) {
+                return null;
+            }
+            lowerToUpperCap = this.mostRecentConnector;
+            pathStartConnector = this.pathStartConnector;
+        }
+        let startPoint;
+        const lastLowerSegment = lowerPath[lowerPath.length - 1];
+        if (lastLowerSegment.kind === Path_1.PathCommandType.LineTo || lastLowerSegment.kind === Path_1.PathCommandType.MoveTo) {
+            startPoint = lastLowerSegment.point;
+        }
+        else {
+            startPoint = lastLowerSegment.endPoint;
+        }
+        return {
+            // Start at the end of the lower curve:
+            //    Start point
+            //     ↓
+            //  __/  __/ ← Most recent points on this end
+            // /___ /
+            //  ↑
+            //  Oldest points
+            startPoint,
+            commands: [
+                // Move to the most recent point on the upperPath:
+                //     ----→•
+                //  __/  __/
+                // /___ /
+                lowerToUpperCap,
+                // Move to the beginning of the upperPath:
+                //  __/  __/
+                // /___ /
+                //     • ←-
+                ...upperPath.reverse(),
+                // Move to the beginning of the lowerPath:
+                //  __/  __/
+                // /___ /
+                // •
+                pathStartConnector,
+                // Move back to the start point:
+                //     •
+                //  __/  __/
+                // /___ /
+                ...lowerPath,
+            ],
+            style: this.getRenderingStyle(),
+        };
+    }
+    previewFullPath() {
+        const preview = this.previewCurrentPath();
+        if (preview) {
+            return [...this.parts, preview];
+        }
+        return null;
+    }
+    previewStroke() {
+        const pathPreview = this.previewFullPath();
+        if (pathPreview) {
+            return new Stroke_1.default(pathPreview);
+        }
+        return null;
+    }
+    preview(renderer) {
+        const paths = this.previewFullPath();
+        if (paths) {
+            const approxBBox = this.viewport.visibleRect;
+            renderer.startObject(approxBBox);
+            for (const path of paths) {
+                renderer.drawPath(path);
+            }
+            renderer.endObject();
+        }
+    }
+    build() {
+        this.curveFitter.finalizeCurrentCurve();
+        if (this.isFirstSegment) {
+            // Ensure we have something.
+            this.addCurve(null);
+        }
+        return this.previewStroke();
+    }
+    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.
+    shouldStartNewSegment(lowerCurve, upperCurve) {
+        if (!this.lastLowerBezier || !this.lastUpperBezier) {
+            return false;
+        }
+        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.
+            const firstTPair = intersection[0];
+            const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
+            if (!match) {
+                throw new Error(`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`);
+            }
+            const t = parseFloat(match[1]);
+            return Vec2_1.Vec2.ofXY(curve1.get(t));
+        };
+        const getExitDirection = (curve) => {
+            return Vec2_1.Vec2.ofXY(curve.points[2]).minus(Vec2_1.Vec2.ofXY(curve.points[1])).normalized();
+        };
+        const getEnterDirection = (curve) => {
+            return Vec2_1.Vec2.ofXY(curve.points[1]).minus(Vec2_1.Vec2.ofXY(curve.points[0])).normalized();
+        };
+        // Prevent
+        //         /
+        //       / /
+        //      /  /  /|
+        //    /    /   |
+        //  /          |
+        // where the next stroke and the previous stroke are in different directions.
+        //
+        // Are the exit/enter directions of the previous and current curves in different enough directions?
+        if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.3
+            || getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.3
+            // Also handle if the curves exit/enter directions differ
+            || getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
+            || getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
+            return true;
+        }
+        // Check whether the lower curve intersects the other wall:
+        //       /    / ← lower
+        //    / /   /
+        // /   / /
+        //   //
+        // / /
+        const lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
+        const upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
+        if (lowerIntersection || upperIntersection) {
+            return true;
+        }
+        return false;
+    }
+    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;
+            }
+            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:
+            //    |
+            //  ----- ←
+            //    |
+            const startPoint = this.startPoint.pos.plus(Vec2_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)),
+                // Bottom of the circle
+                //    |
+                //  -----
+                //    |
+                //    ↑
+                endPoint: center.plus(Vec2_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: Path_1.PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2_1.Vec2.of(-width, -width)),
+                endPoint: center.plus(Vec2_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)),
+            });
+            this.pathStartConnector = {
+                kind: Path_1.PathCommandType.LineTo,
+                point: startPoint,
+            };
+            this.mostRecentConnector = this.pathStartConnector;
+            return;
+        }
+        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, } = this.segmentToPath(curve);
+        const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+        if (shouldStartNew) {
+            const part = this.previewCurrentPath();
+            if (part) {
+                this.parts.push(part);
+                this.upperSegments = [];
+                this.lowerSegments = [];
+            }
+        }
+        if (this.isFirstSegment || shouldStartNew) {
+            // We draw the upper path (reversed), then the lower path, so we need the
+            // upperToLowerConnector to join the two paths.
+            this.pathStartConnector = upperToLowerConnector;
+            this.isFirstSegment = false;
+        }
+        // With the most recent connector, we're joining the end of the lowerPath to the most recent
+        // upperPath:
+        this.mostRecentConnector = lowerToUpperConnector;
+        this.lowerSegments.push(lowerCurveCommand);
+        this.upperSegments.push(upperCurveCommand);
+        this.lastLowerBezier = lowerCurve;
+        this.lastUpperBezier = upperCurve;
+        this.curveStartWidth = curve.startWidth;
+    }
+    // Returns [upper curve, connector, lower curve]
+    segmentToPath(curve) {
+        const bezier = new bezier_js_1.Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
+        let startVec = Vec2_1.Vec2.ofXY(bezier.normal(0)).normalized();
+        let endVec = Vec2_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;
+        }
+        const startPt = curve.startPoint;
+        const endPt = curve.endPoint;
+        const controlPoint = curve.controlPoint;
+        // Approximate the normal at the location of the control point
+        let projectionT = bezier.project(controlPoint.xy).t;
+        if (!projectionT) {
+            if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
+                projectionT = 0.1;
+            }
+            else {
+                projectionT = 0.9;
+            }
+        }
+        const halfVecT = projectionT;
+        const halfVec = Vec2_1.Vec2.ofXY(bezier.normal(halfVecT))
+            .normalized().times(curve.startWidth / 2 * halfVecT
+            + curve.endWidth / 2 * (1 - halfVecT));
+        // Each starts at startPt ± startVec
+        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: Path_1.PathCommandType.QuadraticBezierTo,
+            controlPoint: lowerCurveControlPoint,
+            endPoint: lowerCurveEndPoint,
+        };
+        // From the end of the upperCurve to the start of the lowerCurve:
+        const upperToLowerConnector = {
+            kind: Path_1.PathCommandType.LineTo,
+            point: lowerCurveStartPoint,
+        };
+        // From the end of lowerCurve to the start of upperCurve:
+        const lowerToUpperConnector = {
+            kind: Path_1.PathCommandType.LineTo,
+            point: upperCurveStartPoint,
+        };
+        const upperCurveCommand = {
+            kind: Path_1.PathCommandType.QuadraticBezierTo,
+            controlPoint: upperCurveControlPoint,
+            endPoint: upperCurveEndPoint,
+        };
+        const upperCurve = new bezier_js_1.Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        const lowerCurve = new bezier_js_1.Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        return {
+            upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
+            upperCurve, lowerCurve,
+        };
+    }
+    addPoint(newPoint) {
+        this.curveFitter.addPoint(newPoint);
+    }
+}
+exports.default = PressureSensitiveFreehandLineBuilder;

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.js

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

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.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}`,
+};