js-draw 0.17.4 → 0.18.0

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

@@ -0,0 +1,117 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeArrowBuilder = void 0;
+const Path_1 = __importStar(require("../../math/Path"));
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeArrowBuilder = (initialPoint, viewport) => {
+    return new ArrowBuilder(initialPoint, viewport);
+};
+exports.makeArrowBuilder = makeArrowBuilder;
+class ArrowBuilder {
+    constructor(startPoint, viewport) {
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.endPoint = startPoint;
+    }
+    getLineWidth() {
+        return Math.max(this.endPoint.width, this.startPoint.width);
+    }
+    getBBox() {
+        const preview = this.buildPreview();
+        return preview.getBBox();
+    }
+    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.
+        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.
+        const lineNormal = toEnd.orthog();
+        const scaledStartNormal = lineNormal.times(startSize);
+        const scaledBaseNormal = lineNormal.times(endSize);
+        const path = new Path_1.default(arrowTipBase.minus(scaledBaseNormal), [
+            // Stem
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: lineStartPoint.minus(scaledStartNormal),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: lineStartPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.plus(scaledBaseNormal),
+            },
+            // Head
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: endPoint.plus(toEnd.times(endSize)),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.minus(scaledBaseNormal),
+            },
+            // Round all points in the arrow (to remove unnecessary decimal places)
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
+            {
+                startPoint: path.startPoint,
+                commands: path.parts,
+                style: {
+                    fill: this.startPoint.color,
+                }
+            }
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}
+exports.default = ArrowBuilder;

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

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeFreehandLineBuilder = void 0;
+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 Color4_1 = __importDefault(require("../../Color4"));
+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.
+    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.
+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, (curve) => this.addCurve(curve));
+        this.averageWidth = startPoint.width;
+        this.bbox = new Rect2_1.default(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    getRenderingStyle() {
+        return {
+            fill: Color4_1.default.transparent,
+            stroke: {
+                color: this.startPoint.color,
+                width: this.roundDistance(this.averageWidth),
+            }
+        };
+    }
+    previewCurrentPath() {
+        const path = this.parts.slice();
+        const commands = [...path, ...this.curveToPathCommands(this.curveFitter.preview())];
+        const startPoint = this.startPoint.pos;
+        return {
+            startPoint,
+            commands,
+            style: this.getRenderingStyle(),
+        };
+    }
+    previewFullPath() {
+        const preview = this.previewCurrentPath();
+        if (preview) {
+            return [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();
+        return this.previewStroke();
+    }
+    getMinFit() {
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
+        if (minFit < 1e-10) {
+            minFit = this.minFitAllowed;
+        }
+        return minFit;
+    }
+    roundPoint(point) {
+        const minFit = this.getMinFit();
+        return Viewport_1.default.roundPoint(point, minFit);
+    }
+    roundDistance(dist) {
+        const minFit = this.getMinFit();
+        return Viewport_1.default.roundPoint(dist, minFit);
+    }
+    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.
+            if (!this.isFirstSegment) {
+                return [];
+            }
+            // Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
+            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:
+            //    |
+            //  ----- ←
+            //    |
+            // Draw a circle-ish shape around the start point
+            return [
+                {
+                    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)),
+                }
+            ];
+        }
+        const result = [];
+        if (this.isFirstSegment) {
+            result.push({
+                kind: Path_1.PathCommandType.MoveTo,
+                point: this.roundPoint(curve.startPoint),
+            });
+        }
+        result.push({
+            kind: Path_1.PathCommandType.QuadraticBezierTo,
+            controlPoint: this.roundPoint(curve.controlPoint),
+            endPoint: this.roundPoint(curve.endPoint),
+        });
+        return result;
+    }
+    addCurve(curve) {
+        const parts = this.curveToPathCommands(curve);
+        this.parts.push(...parts);
+        if (this.isFirstSegment) {
+            this.isFirstSegment = false;
+        }
+    }
+    addPoint(newPoint) {
+        this.curveFitter.addPoint(newPoint);
+        this.widthAverageNumSamples++;
+        this.averageWidth =
+            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
+                + newPoint.width / this.widthAverageNumSamples;
+    }
+}
+exports.default = FreehandLineBuilder;

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

@@ -0,0 +1,89 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeLineBuilder = void 0;
+const Path_1 = __importStar(require("../../math/Path"));
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeLineBuilder = (initialPoint, viewport) => {
+    return new LineBuilder(initialPoint, viewport);
+};
+exports.makeLineBuilder = makeLineBuilder;
+class LineBuilder {
+    constructor(startPoint, viewport) {
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.endPoint = startPoint;
+    }
+    getBBox() {
+        const preview = this.buildPreview();
+        return preview.getBBox();
+    }
+    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 Path_1.default(strokeStartPoint, [
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: startPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: endPoint.plus(scaledEndNormal),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: endPoint.minus(scaledEndNormal),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: startPoint.minus(scaledStartNormal),
+            },
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
+            path.toRenderable({ fill: this.startPoint.color })
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}
+exports.default = LineBuilder;