js-draw 1.16.1 → 1.18.0

package/dist/cjs/components/Stroke.js

@@ -44,8 +44,8 @@ class Stroke extends AbstractComponent_1.default {
      * ]);
      * ```
      */
-    constructor(parts) {
-        super('stroke');
+    constructor(parts, initialZIndex) {
+        super('stroke', initialZIndex);
         // @internal
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
         this.isRestylableComponent = true;
@@ -123,6 +123,162 @@ class Stroke extends AbstractComponent_1.default {
             editor.queueRerender();
         }
     }
+    /** @beta -- May fail for concave `path`s */
+    withRegionErased(eraserPath, viewport) {
+        const polyline = eraserPath.polylineApproximation();
+        const isPointInsideEraser = (point) => {
+            return eraserPath.closedContainsPoint(point);
+        };
+        const newStrokes = [];
+        let failedAssertions = false;
+        for (const part of this.parts) {
+            const path = part.path;
+            const makeStroke = (path) => {
+                if (part.style.fill.a > 0) {
+                    // Remove visually empty paths.
+                    if (path.parts.length < 1 || (path.parts.length === 1 && path.parts[0].kind === math_1.PathCommandType.LineTo)) {
+                        // TODO: If this isn't present, a very large number of strokes are created while erasing.
+                        return null;
+                    }
+                    else {
+                        // Filled paths must be closed (allows for optimizations elsewhere)
+                        path = path.asClosed();
+                    }
+                }
+                if (isNaN(path.getExactBBox().area)) {
+                    console.warn('Prevented creating a stroke with NaN area');
+                    failedAssertions = true;
+                    return null;
+                }
+                return new Stroke([(0, RenderablePathSpec_1.pathToRenderable)(path, part.style)], this.getZIndex());
+            };
+            const intersectionPoints = [];
+            // If stroked, finds intersections with the middle of the stroke.
+            // If filled, finds intersections with the edge of the stroke.
+            for (const segment of polyline) {
+                intersectionPoints.push(...path.intersection(segment));
+            }
+            // When stroked, if the stroke width is significantly larger than the eraser,
+            // it can't intersect both the edge of the stroke and its middle at the same time
+            // (generally, erasing is triggered by the eraser touching the edge of this stroke).
+            //
+            // As such, we also look for intersections along the edge of this, if none with the
+            // center were found, but only within a certain range of sizes because:
+            // 1. Intersection testing with stroked paths is generally much slower than with
+            //    non-stroked paths.
+            // 2. If zoomed in significantly, it's unlikely that the user wants to erase a large
+            //    part of the stroke.
+            let isErasingFromEdge = false;
+            if (intersectionPoints.length === 0
+                && part.style.stroke
+                && part.style.stroke.width > eraserPath.bbox.minDimension * 0.3
+                && part.style.stroke.width < eraserPath.bbox.maxDimension * 30) {
+                for (const segment of polyline) {
+                    intersectionPoints.push(...path.intersection(segment, part.style.stroke.width / 2));
+                }
+                isErasingFromEdge = true;
+            }
+            // Sort first by curve index, then by parameter value
+            intersectionPoints.sort(math_1.comparePathIndices);
+            const isInsideJustBeforeFirst = (() => {
+                if (intersectionPoints.length === 0) {
+                    return false;
+                }
+                // The eraser may not be near the center of the curve -- approximate.
+                if (isErasingFromEdge) {
+                    return intersectionPoints[0].curveIndex === 0 && intersectionPoints[0].parameterValue <= 0;
+                }
+                const justBeforeFirstIntersection = (0, math_1.stepPathIndexBy)(intersectionPoints[0], -1e-10);
+                return isPointInsideEraser(path.at(justBeforeFirstIntersection));
+            })();
+            let intersectionCount = isInsideJustBeforeFirst ? 1 : 0;
+            const addNewPath = (path, knownToBeInside) => {
+                const component = makeStroke(path);
+                let isInside = intersectionCount % 2 === 1;
+                intersectionCount++;
+                if (knownToBeInside !== undefined) {
+                    isInside = knownToBeInside;
+                }
+                // Here, we work around bugs in the underlying Bezier curve library
+                // (including https://github.com/Pomax/bezierjs/issues/179).
+                // Even if not all intersections are returned correctly, we still want
+                // isInside to be roughly correct.
+                if (knownToBeInside === undefined && !isInside && eraserPath.closedContainsPoint(path.getExactBBox().center)) {
+                    isInside = !isInside;
+                }
+                if (!component) {
+                    return;
+                }
+                // Assertion: Avoid deleting sections that are much larger than the eraser.
+                failedAssertions ||= isInside && path.getExactBBox().maxDimension > eraserPath.getExactBBox().maxDimension * 2;
+                if (!isInside) {
+                    newStrokes.push(component);
+                }
+            };
+            if (part.style.fill.a === 0) { // Not filled?
+                // An additional case where we erase completely -- without the padding of the stroke,
+                // the path is smaller than the eraser (allows us to erase dots completely).
+                const shouldEraseCompletely = eraserPath.getExactBBox().maxDimension / 10 > path.getExactBBox().maxDimension;
+                if (!shouldEraseCompletely) {
+                    const split = path.splitAt(intersectionPoints, { mapNewPoint: p => viewport.roundPoint(p) });
+                    for (const splitPart of split) {
+                        addNewPath(splitPart);
+                    }
+                }
+            }
+            else if (intersectionPoints.length >= 2 && intersectionPoints.length % 2 === 0) {
+                // TODO: Support subtractive erasing on small scales -- see https://github.com/personalizedrefrigerator/js-draw/pull/63/commits/568686e2384219ad0bb07617ea4efff1540aed00
+                //       for a broken implementation.
+                //
+                // We currently assume that a 4-point intersection means that the intersection
+                // looks similar to this:
+                //   -----------
+                //  |   STROKE  |
+                //  |           |
+                //%%x-----------x%%%%%%%
+                //%                    %
+                //%      ERASER        %
+                //%                    %
+                //%%x-----------x%%%%%%%
+                //  |   STROKE  |
+                //   -----------
+                //
+                // Our goal is to separate STROKE into the contiguous parts outside
+                // of the eraser (as shown above).
+                //
+                // To do this, we split STROKE at each intersection:
+                //   3 3 3 3 3 3
+                //  3   STROKE  3
+                //  3           3
+                //  x           x
+                //  2           4
+                //  2   STROKE  4
+                //  2           4
+                //  x           x
+                //  1   STROKE  5
+                //   . 5 5 5 5 5
+                //   ^
+                // Start
+                //
+                // The difficulty here is correctly pairing edges to create the the output
+                // strokes, particularly because we don't know the order of intersection points.
+                const parts = path.splitAt(intersectionPoints, { mapNewPoint: p => viewport.roundPoint(p) });
+                for (let i = 0; i < Math.floor(parts.length / 2); i++) {
+                    addNewPath(parts[i].union(parts[parts.length - i - 1]).asClosed());
+                }
+                if (parts.length % 2 !== 0) {
+                    addNewPath(parts[Math.floor(parts.length / 2)].asClosed());
+                }
+            }
+            else {
+                addNewPath(path, false);
+            }
+        }
+        if (failedAssertions) {
+            return [this];
+        }
+        return newStrokes;
+    }
     intersects(line) {
         for (const part of this.parts) {
             const strokeWidth = part.style.stroke?.width;

package/dist/cjs/components/TextComponent.d.ts

@@ -19,6 +19,41 @@ export declare enum TextTransformMode {
 type TextElement = TextComponent | string;
 /**
  * Displays text.
+ *
+ * A `TextComponent` is a collection of `TextElement`s (`string`s or {@link TextComponent}s).
+ *
+ * **Example**:
+ *
+ * ```ts,runnable
+ * import { Editor, TextComponent, Mat33, Vec2, Color4, TextRenderingStyle } from 'js-draw';
+ * const editor = new Editor(document.body);
+ * editor.dispatch(editor.setBackgroundStyle({ color: Color4.black, autoresize: true ));
+ * ---visible---
+ * /// Adding a simple TextComponent
+ * ///------------------------------
+ *
+ * const positioning1 = Mat33.translation(Vec2.of(10, 10));
+ * const style: TextRenderingStyle = {
+ *     fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.green },
+ * };
+ *
+ * editor.dispatch(
+ *     editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)),
+ * );
+ *
+ *
+ * /// Adding nested TextComponents
+ * ///-----------------------------
+ *
+ * // Add another TextComponent that contains text and a TextComponent. Observe that '[Test]'
+ * // is placed directly after 'Test'.
+ * const positioning2 = Mat33.translation(Vec2.of(10, 50));
+ * editor.dispatch(
+ *     editor.image.addElement(
+ *         new TextComponent([ new TextComponent(['Test'], positioning1, style), '[Test]' ], positioning2, style)
+ *     ),
+ * );
+ * ```
  */
 export default class TextComponent extends AbstractComponent implements RestyleableComponent {
     protected readonly textObjects: Array<TextElement>;
@@ -32,7 +67,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
      *
      * @see {@link fromLines}
      */
-    constructor(textObjects: Array<TextElement>, transform: Mat33, style: TextRenderingStyle, transformMode?: TextTransformMode);
+    constructor(textObjects: Array<TextElement>, transform: Mat33, style?: TextRenderingStyle, transformMode?: TextTransformMode);
     static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextRenderingStyle): void;
     private static textMeasuringCtx;
     private static estimateTextDimens;

package/dist/cjs/components/TextComponent.js

@@ -20,8 +20,46 @@ var TextTransformMode;
     /**Relatively positioned in the Y direction, absolutely positioned in the X direction. */
     TextTransformMode[TextTransformMode["RELATIVE_Y_ABSOLUTE_X"] = 3] = "RELATIVE_Y_ABSOLUTE_X";
 })(TextTransformMode || (exports.TextTransformMode = TextTransformMode = {}));
+const defaultTextStyle = {
+    fontFamily: 'sans', size: 12, renderingStyle: { fill: math_1.Color4.purple },
+};
 /**
  * Displays text.
+ *
+ * A `TextComponent` is a collection of `TextElement`s (`string`s or {@link TextComponent}s).
+ *
+ * **Example**:
+ *
+ * ```ts,runnable
+ * import { Editor, TextComponent, Mat33, Vec2, Color4, TextRenderingStyle } from 'js-draw';
+ * const editor = new Editor(document.body);
+ * editor.dispatch(editor.setBackgroundStyle({ color: Color4.black, autoresize: true ));
+ * ---visible---
+ * /// Adding a simple TextComponent
+ * ///------------------------------
+ *
+ * const positioning1 = Mat33.translation(Vec2.of(10, 10));
+ * const style: TextRenderingStyle = {
+ *     fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.green },
+ * };
+ *
+ * editor.dispatch(
+ *     editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)),
+ * );
+ *
+ *
+ * /// Adding nested TextComponents
+ * ///-----------------------------
+ *
+ * // Add another TextComponent that contains text and a TextComponent. Observe that '[Test]'
+ * // is placed directly after 'Test'.
+ * const positioning2 = Mat33.translation(Vec2.of(10, 50));
+ * editor.dispatch(
+ *     editor.image.addElement(
+ *         new TextComponent([ new TextComponent(['Test'], positioning1, style), '[Test]' ], positioning2, style)
+ *     ),
+ * );
+ * ```
  */
 class TextComponent extends AbstractComponent_1.default {
     /**
@@ -31,7 +69,7 @@ class TextComponent extends AbstractComponent_1.default {
      */
     constructor(textObjects, 
     // Transformation relative to this component's parent element.
-    transform, style, 
+    transform, style = defaultTextStyle, 
     // @internal
     transformMode = TextTransformMode.ABSOLUTE_XY) {
         super(componentTypeId);

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

@@ -27,7 +27,7 @@ class ArrowBuilder {
         const lineStartPoint = this.startPoint.pos;
         const endPoint = this.endPoint.pos;
         const toEnd = endPoint.minus(lineStartPoint).normalized();
-        const arrowLength = endPoint.minus(lineStartPoint).length();
+        const arrowLength = endPoint.distanceTo(lineStartPoint);
         // Ensure that the arrow tip is smaller than the arrow.
         const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
         const startSize = this.startPoint.width / 2;

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

@@ -0,0 +1,35 @@
+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';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+import RenderingStyle from '../../rendering/RenderingStyle';
+/**
+ * Creates strokes from line segments rather than Bézier curves.
+ *
+ */
+export declare const makePolylineBuilder: ComponentBuilderFactory;
+export default class PolylineBuilder implements ComponentBuilder {
+    private minFitAllowed;
+    private viewport;
+    private parts;
+    private bbox;
+    private averageWidth;
+    private widthAverageNumSamples;
+    private lastPoint;
+    private startPoint;
+    private lastLineSegment;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, viewport: Viewport);
+    getBBox(): Rect2;
+    protected getRenderingStyle(): RenderingStyle;
+    protected previewCurrentPath(): RenderablePathSpec;
+    protected previewFullPath(): RenderablePathSpec[];
+    preview(renderer: AbstractRenderer): void;
+    build(): Stroke;
+    private getMinFit;
+    private roundPoint;
+    private roundDistance;
+    addPoint(newPoint: StrokeDataPoint): void;
+}

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

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makePolylineBuilder = void 0;
+const math_1 = require("@js-draw/math");
+const Stroke_1 = __importDefault(require("../Stroke"));
+const Viewport_1 = __importDefault(require("../../Viewport"));
+const makeShapeFitAutocorrect_1 = __importDefault(require("./autocorrect/makeShapeFitAutocorrect"));
+/**
+ * Creates strokes from line segments rather than Bézier curves.
+ *
+ */
+exports.makePolylineBuilder = (0, makeShapeFitAutocorrect_1.default)((initialPoint, viewport) => {
+    const minFit = viewport.getSizeOfPixelOnCanvas();
+    return new PolylineBuilder(initialPoint, minFit, viewport);
+});
+class PolylineBuilder {
+    constructor(startPoint, minFitAllowed, viewport) {
+        this.minFitAllowed = minFitAllowed;
+        this.viewport = viewport;
+        this.parts = [];
+        this.widthAverageNumSamples = 1;
+        this.lastLineSegment = null;
+        this.averageWidth = startPoint.width;
+        this.startPoint = {
+            ...startPoint,
+            pos: this.roundPoint(startPoint.pos),
+        };
+        this.lastPoint = this.startPoint.pos;
+        this.bbox = new math_1.Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+        this.parts = [
+            {
+                kind: math_1.PathCommandType.MoveTo,
+                point: this.startPoint.pos,
+            },
+        ];
+    }
+    getBBox() {
+        return this.bbox.grownBy(this.averageWidth);
+    }
+    getRenderingStyle() {
+        return {
+            fill: math_1.Color4.transparent,
+            stroke: {
+                color: this.startPoint.color,
+                width: this.roundDistance(this.averageWidth),
+            }
+        };
+    }
+    previewCurrentPath() {
+        const startPoint = this.startPoint.pos;
+        const commands = [...this.parts];
+        // TODO: For now, this is necesary for the path to be visible.
+        if (commands.length <= 1) {
+            commands.push({
+                kind: math_1.PathCommandType.LineTo,
+                point: startPoint.plus(math_1.Vec2.of(this.averageWidth / 4, 0)),
+            });
+        }
+        return {
+            startPoint,
+            commands,
+            style: this.getRenderingStyle(),
+        };
+    }
+    previewFullPath() {
+        return [this.previewCurrentPath()];
+    }
+    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() {
+        return new Stroke_1.default(this.previewFullPath());
+    }
+    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);
+    }
+    addPoint(newPoint) {
+        this.widthAverageNumSamples++;
+        this.averageWidth =
+            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
+                + newPoint.width / this.widthAverageNumSamples;
+        const roundedPoint = this.roundPoint(newPoint.pos);
+        if (!roundedPoint.eq(this.lastPoint)) {
+            // If almost exactly in the same line as the previous
+            if (this.lastLineSegment && this.lastLineSegment.direction.dot(roundedPoint.minus(this.lastPoint).normalized()) > 0.997) {
+                this.parts.pop();
+                this.lastPoint = this.lastLineSegment.p1;
+            }
+            this.parts.push({
+                kind: math_1.PathCommandType.LineTo,
+                point: this.roundPoint(newPoint.pos),
+            });
+            this.bbox = this.bbox.grownToPoint(roundedPoint);
+            this.lastLineSegment = new math_1.LineSegment2(this.lastPoint, roundedPoint);
+            this.lastPoint = roundedPoint;
+        }
+    }
+}
+exports.default = PolylineBuilder;

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

@@ -12,6 +12,7 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
     private isFirstSegment;
     private pathStartConnector;
     private mostRecentConnector;
+    private nextCurveStartConnector;
     private upperSegments;
     private lowerSegments;
     private lastUpperBezier;
@@ -25,7 +26,6 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
     private getRenderingStyle;
     private previewCurrentPath;
     private previewFullPath;
-    private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;