js-draw 0.18.1 → 0.19.0

package/dist/mjs/src/components/builders/ArrowBuilder.mjs

@@ -0,0 +1,86 @@
+import  Path, { PathCommandType }  from '../../math/Path.mjs';
+import  Stroke  from '../Stroke.mjs';
+export const makeArrowBuilder = (initialPoint, viewport) => {
+    return new ArrowBuilder(initialPoint, viewport);
+};
+export default 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(arrowTipBase.minus(scaledBaseNormal), [
+            // Stem
+            {
+                kind: PathCommandType.LineTo,
+                point: lineStartPoint.minus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: lineStartPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(scaledBaseNormal),
+            },
+            // Head
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.plus(toEnd.times(endSize)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+            },
+            {
+                kind: 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([
+            {
+                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;
+    }
+}

package/dist/mjs/src/components/builders/FreehandLineBuilder.d.ts

@@ -0,0 +1,33 @@
+import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
+import Rect2 from '../../math/Rect2';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+import RenderingStyle from '../../rendering/RenderingStyle';
+export declare const makeFreehandLineBuilder: ComponentBuilderFactory;
+export default class FreehandLineBuilder implements ComponentBuilder {
+    private startPoint;
+    private minFitAllowed;
+    private viewport;
+    private isFirstSegment;
+    private parts;
+    private curveFitter;
+    private bbox;
+    private averageWidth;
+    private widthAverageNumSamples;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
+    getBBox(): Rect2;
+    protected getRenderingStyle(): RenderingStyle;
+    protected previewCurrentPath(): RenderablePathSpec | null;
+    protected previewFullPath(): RenderablePathSpec[] | null;
+    private previewStroke;
+    preview(renderer: AbstractRenderer): void;
+    build(): Stroke;
+    private getMinFit;
+    private roundPoint;
+    private roundDistance;
+    private curveToPathCommands;
+    private addCurve;
+    addPoint(newPoint: StrokeDataPoint): void;
+}

package/dist/mjs/src/components/builders/FreehandLineBuilder.mjs

@@ -0,0 +1,165 @@
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  Rect2  from '../../math/Rect2.mjs';
+import  { PathCommandType }  from '../../math/Path.mjs';
+import  Stroke  from '../Stroke.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
+import  Color4  from '../../Color4.mjs';
+export 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);
+};
+// Handles stroke smoothing and creates Strokes from user/stylus input.
+export default 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(startPoint, minFitAllowed, maxFitAllowed, (curve) => this.addCurve(curve));
+        this.averageWidth = startPoint.width;
+        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    getRenderingStyle() {
+        return {
+            fill: Color4.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(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.roundPoint(point, minFit);
+    }
+    roundDistance(dist) {
+        const minFit = this.getMinFit();
+        return Viewport.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.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: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(width, width)),
+                    // Bottom of the circle
+                    //    |
+                    //  -----
+                    //    |
+                    //    ↑
+                    endPoint: center.plus(Vec2.of(0, width)),
+                },
+                {
+                    kind: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(-width, width)),
+                    endPoint: center.plus(Vec2.of(-width, 0)),
+                },
+                {
+                    kind: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(-width, -width)),
+                    endPoint: center.plus(Vec2.of(0, -width)),
+                },
+                {
+                    kind: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(width, -width)),
+                    endPoint: center.plus(Vec2.of(width, 0)),
+                }
+            ];
+        }
+        const result = [];
+        if (this.isFirstSegment) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: this.roundPoint(curve.startPoint),
+            });
+        }
+        result.push({
+            kind: 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;
+    }
+}

package/dist/mjs/src/components/builders/LineBuilder.d.ts

@@ -0,0 +1,18 @@
+import Rect2 from '../../math/Rect2';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makeLineBuilder: ComponentBuilderFactory;
+export default class LineBuilder implements ComponentBuilder {
+    private readonly startPoint;
+    private readonly viewport;
+    private endPoint;
+    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
+    getBBox(): Rect2;
+    private buildPreview;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}

package/dist/mjs/src/components/builders/LineBuilder.mjs

@@ -0,0 +1,58 @@
+import  Path, { PathCommandType }  from '../../math/Path.mjs';
+import  Stroke  from '../Stroke.mjs';
+export const makeLineBuilder = (initialPoint, viewport) => {
+    return new LineBuilder(initialPoint, viewport);
+};
+export default 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(strokeStartPoint, [
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.plus(scaledEndNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.minus(scaledEndNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.minus(scaledStartNormal),
+            },
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke([
+            path.toRenderable({ fill: this.startPoint.color })
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}

package/dist/mjs/src/components/builders/PressureSensitiveFreehandLineBuilder.d.ts

@@ -0,0 +1,36 @@
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import Rect2 from '../../math/Rect2';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makePressureSensitiveFreehandLineBuilder: ComponentBuilderFactory;
+export default class PressureSensitiveFreehandLineBuilder implements ComponentBuilder {
+    private startPoint;
+    private minFitAllowed;
+    private viewport;
+    private isFirstSegment;
+    private pathStartConnector;
+    private mostRecentConnector;
+    private upperSegments;
+    private lowerSegments;
+    private lastUpperBezier;
+    private lastLowerBezier;
+    private parts;
+    private curveFitter;
+    private curveStartWidth;
+    private bbox;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
+    getBBox(): Rect2;
+    private getRenderingStyle;
+    private previewCurrentPath;
+    private previewFullPath;
+    private previewStroke;
+    preview(renderer: AbstractRenderer): void;
+    build(): Stroke;
+    private roundPoint;
+    private shouldStartNewSegment;
+    private addCurve;
+    private segmentToPath;
+    addPoint(newPoint: StrokeDataPoint): void;
+}