js-draw 1.21.3 → 1.22.0

package/dist/mjs/components/Stroke.mjs

@@ -1,8 +1,8 @@
-import { Path, Rect2, PathCommandType, comparePathIndices, stepPathIndexBy } from '@js-draw/math';
+import { Path, Rect2, PathCommandType, comparePathIndices, stepPathIndexBy, } from '@js-draw/math';
 import  { styleFromJSON, styleToJSON }  from '../rendering/RenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
-import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
-import  { pathFromRenderable, pathToRenderable, simplifyPathToFullScreenOrEmpty }  from '../rendering/RenderablePathSpec.mjs';
+import  { createRestyleComponentCommand, }  from './RestylableComponent.mjs';
+import  { pathFromRenderable, pathToRenderable, simplifyPathToFullScreenOrEmpty, }  from '../rendering/RenderablePathSpec.mjs';
 /**
  * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
  *
@@ -74,8 +74,7 @@ export default class Stroke extends AbstractComponent {
             return {};
         }
         const firstPart = this.parts[0];
-        if (firstPart.style.stroke === undefined
-            || firstPart.style.stroke.width === 0) {
+        if (firstPart.style.stroke === undefined || firstPart.style.stroke.width === 0) {
             return {
                 color: firstPart.style.fill,
             };
@@ -94,9 +93,11 @@ export default class Stroke extends AbstractComponent {
         this.parts = this.parts.map((part) => {
             const newStyle = {
                 ...part.style,
-                stroke: part.style.stroke ? {
-                    ...part.style.stroke,
-                } : undefined,
+                stroke: part.style.stroke
+                    ? {
+                        ...part.style.stroke,
+                    }
+                    : undefined,
             };
             // Change the stroke color if a stroked shape. Else,
             // change the fill.
@@ -131,7 +132,8 @@ export default class Stroke extends AbstractComponent {
             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 === PathCommandType.LineTo)) {
+                    if (path.parts.length < 1 ||
+                        (path.parts.length === 1 && path.parts[0].kind === PathCommandType.LineTo)) {
                         // TODO: If this isn't present, a very large number of strokes are created while erasing.
                         return null;
                     }
@@ -164,10 +166,10 @@ export default class Stroke extends AbstractComponent {
             // 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) {
+            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));
                 }
@@ -181,7 +183,7 @@ export default class Stroke extends AbstractComponent {
                 }
                 // The eraser may not be near the center of the curve -- approximate.
                 if (isErasingFromEdge) {
-                    return intersectionPoints[0].curveIndex === 0 && intersectionPoints[0].parameterValue <= 0;
+                    return (intersectionPoints[0].curveIndex === 0 && intersectionPoints[0].parameterValue <= 0);
                 }
                 const justBeforeFirstIntersection = stepPathIndexBy(intersectionPoints[0], -1e-10);
                 return isPointInsideEraser(path.at(justBeforeFirstIntersection));
@@ -198,24 +200,30 @@ export default class Stroke extends AbstractComponent {
                 // (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)) {
+                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;
+                failedAssertions ||=
+                    isInside && path.getExactBBox().maxDimension > eraserPath.getExactBBox().maxDimension * 2;
                 if (!isInside) {
                     newStrokes.push(component);
                 }
             };
-            if (part.style.fill.a === 0) { // Not filled?
+            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) });
+                    const split = path.splitAt(intersectionPoints, {
+                        mapNewPoint: (p) => viewport.roundPoint(p),
+                    });
                     for (const splitPart of split) {
                         addNewPath(splitPart);
                     }
@@ -257,7 +265,9 @@ export default class Stroke extends AbstractComponent {
                 //
                 // 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) });
+                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());
                 }
@@ -333,12 +343,12 @@ export default class Stroke extends AbstractComponent {
         let occludes = false;
         let skipSimplification = false;
         for (const part of this.parts) {
-            if (skipSimplification
+            if (skipSimplification ||
                 // Simplification currently only works for stroked paths
-                || !part.style.stroke
+                !part.style.stroke ||
                 // One of the main purposes of this is to check for occlusion.
                 // We can't occlude things if the stroke is partially transparent.
-                || part.style.stroke.color.a < 0.99) {
+                part.style.stroke.color.a < 0.99) {
                 simplifiedParts.push(part);
                 continue;
             }
@@ -388,7 +398,8 @@ export default class Stroke extends AbstractComponent {
                     continue;
                 }
                 const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 3 || bbox.size.y > visibleRect.size.y * 3;
-                if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width ?? 0)) {
+                if (muchBiggerThanVisible &&
+                    !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width ?? 0)) {
                     continue;
                 }
             }
@@ -424,9 +435,11 @@ export default class Stroke extends AbstractComponent {
             const newPath = part.path.transformedBy(affineTransfm);
             const newStyle = {
                 ...part.style,
-                stroke: part.style.stroke ? {
-                    ...part.style.stroke,
-                } : undefined,
+                stroke: part.style.stroke
+                    ? {
+                        ...part.style.stroke,
+                    }
+                    : undefined,
             };
             // Approximate the scale factor.
             if (newStyle.stroke) {
@@ -484,7 +497,7 @@ export default class Stroke extends AbstractComponent {
         return new Stroke(this.parts);
     }
     serializeToJSON() {
-        return this.parts.map(part => {
+        return this.parts.map((part) => {
             return {
                 style: styleToJSON(part.style),
                 path: part.path.serialize(),

package/dist/mjs/components/TextComponent.mjs

@@ -1,7 +1,7 @@
 import { Vec2, Rect2, Mat33, Color4 } from '@js-draw/math';
-import  { cloneTextStyle, textStyleFromJSON, textStyleToJSON }  from '../rendering/TextRenderingStyle.mjs';
+import  { cloneTextStyle, textStyleFromJSON, textStyleToJSON, }  from '../rendering/TextRenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
-import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+import  { createRestyleComponentCommand, }  from './RestylableComponent.mjs';
 const componentTypeId = 'text';
 export var TextTransformMode;
 (function (TextTransformMode) {
@@ -15,7 +15,9 @@ export var TextTransformMode;
     TextTransformMode[TextTransformMode["RELATIVE_Y_ABSOLUTE_X"] = 3] = "RELATIVE_Y_ABSOLUTE_X";
 })(TextTransformMode || (TextTransformMode = {}));
 const defaultTextStyle = {
-    fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.purple },
+    fontFamily: 'sans',
+    size: 12,
+    renderingStyle: { fill: Color4.purple },
 };
 /**
  * Displays text.
@@ -76,7 +78,7 @@ class TextComponent extends AbstractComponent {
         this.recomputeBBox();
         // If this has no direct children, choose a style representative of this' content
         // (useful for estimating the style of the TextComponent).
-        const hasDirectContent = textObjects.some(obj => typeof obj === 'string');
+        const hasDirectContent = textObjects.some((obj) => typeof obj === 'string');
         if (!hasDirectContent && textObjects.length > 0) {
             this.style = textObjects[0].getTextStyle();
         }
@@ -90,7 +92,7 @@ class TextComponent extends AbstractComponent {
             style.fontStyle ?? '',
             style.fontWeight ?? '',
             (style.size ?? 12) + 'px',
-            `${fontFamily}`
+            `${fontFamily}`,
         ].join(' ');
         // TODO: Support RTL
         ctx.textAlign = 'left';
@@ -101,7 +103,7 @@ class TextComponent extends AbstractComponent {
         const heightEst = style.size;
         // Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
         // be above (0, 0).
-        return new Rect2(0, -heightEst * 2 / 3, widthEst, heightEst);
+        return new Rect2(0, (-heightEst * 2) / 3, widthEst, heightEst);
     }
     // Returns a set of TextMetrics for the given text, if a canvas is available.
     static getTextMetrics(text, style) {
@@ -181,7 +183,7 @@ class TextComponent extends AbstractComponent {
                 const textBBox = TextComponent.getTextDimens(subObject, this.style);
                 // TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
                 // use pixel-testing to check for intersection with its contour.
-                if (textBBox.getEdges().some(edge => transformedLine.intersection(edge) !== null)) {
+                if (textBBox.getEdges().some((edge) => transformedLine.intersection(edge) !== null)) {
                     return true;
                 }
             }
@@ -249,7 +251,7 @@ class TextComponent extends AbstractComponent {
         this.recomputeBBox();
     }
     createClone() {
-        const clonedTextObjects = this.textObjects.map(obj => {
+        const clonedTextObjects = this.textObjects.map((obj) => {
             if (typeof obj === 'string') {
                 return obj;
             }
@@ -277,7 +279,7 @@ class TextComponent extends AbstractComponent {
     // Do not rely on the output of `serializeToJSON` taking any particular format.
     serializeToJSON() {
         const serializableStyle = textStyleToJSON(this.style);
-        const serializedTextObjects = this.textObjects.map(text => {
+        const serializedTextObjects = this.textObjects.map((text) => {
             if (typeof text === 'string') {
                 return {
                     text,
@@ -363,7 +365,7 @@ TextComponent.TextCursor = class {
         let elementTransform = Mat33.identity;
         let elemInternalTransform = Mat33.identity;
         let textSize;
-        if (typeof (elem) === 'string') {
+        if (typeof elem === 'string') {
             textSize = TextComponent.getTextDimens(elem, this.parentStyle);
         }
         else {
@@ -372,12 +374,13 @@ TextComponent.TextCursor = class {
             elemInternalTransform = elem.transform;
             textSize = elem.getBBox();
         }
-        const positioning = typeof (elem) === 'string' ? TextTransformMode.RELATIVE_XY : elem.transformMode;
+        const positioning = typeof elem === 'string' ? TextTransformMode.RELATIVE_XY : elem.transformMode;
         if (positioning === TextTransformMode.RELATIVE_XY) {
             // Position relative to the previous element's transform.
             elementTransform = this.transform.rightMul(elementTransform);
         }
-        else if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y || positioning === TextTransformMode.RELATIVE_Y_ABSOLUTE_X) {
+        else if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y ||
+            positioning === TextTransformMode.RELATIVE_Y_ABSOLUTE_X) {
             // Zero the absolute component of this.transform's translation
             const transform = this.transform.mapEntries((component, [row, col]) => {
                 if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y) {

package/dist/mjs/components/UnknownSVGObject.mjs

@@ -23,10 +23,9 @@ export default class UnknownSVGObject extends AbstractComponent {
         canvas.endObject(this.getLoadSaveData());
     }
     intersects(lineSegment) {
-        return this.contentBBox.getEdges().some(edge => edge.intersection(lineSegment) !== null);
-    }
-    applyTransformation(_affineTransfm) {
+        return this.contentBBox.getEdges().some((edge) => edge.intersection(lineSegment) !== null);
     }
+    applyTransformation(_affineTransfm) { }
     isSelectable() {
         return false;
     }

package/dist/mjs/components/builders/ArrowBuilder.d.ts

@@ -4,6 +4,12 @@ import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
+/**
+ * Creates a stroke builder that generates arrows circles.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeArrowBuilder: ComponentBuilderFactory;
 export default class ArrowBuilder implements ComponentBuilder {
     private readonly startPoint;

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

@@ -1,6 +1,12 @@
 import { Path, PathCommandType } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+/**
+ * Creates a stroke builder that generates arrows circles.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export const makeArrowBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new ArrowBuilder(initialPoint, viewport);
 });
@@ -63,15 +69,15 @@ export default class ArrowBuilder {
                 point: arrowTipBase.minus(scaledBaseNormal),
             },
             // Round all points in the arrow (to remove unnecessary decimal places)
-        ]).mapPoints(point => this.viewport.roundPoint(point));
+        ]).mapPoints((point) => this.viewport.roundPoint(point));
         const preview = new Stroke([
             {
                 startPoint: path.startPoint,
                 commands: path.parts,
                 style: {
                     fill: this.startPoint.color,
-                }
-            }
+                },
+            },
         ]);
         return preview;
     }

package/dist/mjs/components/builders/CircleBuilder.d.ts

@@ -1,2 +1,8 @@
 import { ComponentBuilderFactory } from './types';
+/**
+ * Creates a stroke builder that generates outlined circles.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeOutlinedCircleBuilder: ComponentBuilderFactory;

package/dist/mjs/components/builders/CircleBuilder.mjs

@@ -3,6 +3,12 @@ import  { pathToRenderable }  from '../../rendering/RenderablePathSpec.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  Stroke  from '../Stroke.mjs';
 import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+/**
+ * Creates a stroke builder that generates outlined circles.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export const makeOutlinedCircleBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new CircleBuilder(initialPoint, viewport);
 });
@@ -20,7 +26,7 @@ class CircleBuilder {
     buildPreview() {
         const pathCommands = [];
         const numDivisions = 6;
-        const stepSize = Math.PI * 2 / numDivisions;
+        const stepSize = (Math.PI * 2) / numDivisions;
         // Round the stroke width so that when exported it doesn't have unnecessary trailing decimals.
         const strokeWidth = Viewport.roundPoint(this.endPoint.width, 5 / this.viewport.getScaleFactor());
         const center = this.startPoint.pos.lerp(this.endPoint.pos, 0.5);
@@ -32,7 +38,9 @@ class CircleBuilder {
             // controlPointRadiusScale is selected to make the circles appear circular and
             // **does** depend on stepSize.
             const controlPointRadiusScale = 1.141;
-            const controlPoint = Vec2.of(Math.cos(t - stepSize / 2), -Math.sin(t - stepSize / 2)).times(radius * controlPointRadiusScale).plus(center);
+            const controlPoint = Vec2.of(Math.cos(t - stepSize / 2), -Math.sin(t - stepSize / 2))
+                .times(radius * controlPointRadiusScale)
+                .plus(center);
             pathCommands.push({
                 kind: PathCommandType.QuadraticBezierTo,
                 controlPoint,
@@ -43,8 +51,7 @@ class CircleBuilder {
             kind: PathCommandType.LineTo,
             point: startPoint,
         });
-        const path = new Path(startPoint, pathCommands)
-            .mapPoints(point => this.viewport.roundPoint(point));
+        const path = new Path(startPoint, pathCommands).mapPoints((point) => this.viewport.roundPoint(point));
         const preview = new Stroke([
             pathToRenderable(path, {
                 fill: Color4.transparent,

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

@@ -6,6 +6,12 @@ import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 import RenderingStyle from '../../rendering/RenderingStyle';
+/**
+ * Creates a stroke builder that draws freehand lines.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeFreehandLineBuilder: ComponentBuilderFactory;
 export default class FreehandLineBuilder implements ComponentBuilder {
     private startPoint;

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

@@ -3,6 +3,12 @@ import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
 import  makeShapeFitAutocorrect  from './autocorrect/makeShapeFitAutocorrect.mjs';
+/**
+ * Creates a stroke builder that draws freehand lines.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export const makeFreehandLineBuilder = makeShapeFitAutocorrect((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.
@@ -32,7 +38,7 @@ export default class FreehandLineBuilder {
             stroke: {
                 color: this.startPoint.color,
                 width: this.roundDistance(this.averageWidth),
-            }
+            },
         };
     }
     previewCurrentPath() {
@@ -129,7 +135,7 @@ export default class FreehandLineBuilder {
                     kind: PathCommandType.QuadraticBezierTo,
                     controlPoint: center.plus(Vec2.of(width, -width)),
                     endPoint: center.plus(Vec2.of(width, 0)),
-                }
+                },
             ];
         }
         const result = [];
@@ -157,7 +163,7 @@ export default class FreehandLineBuilder {
         this.curveFitter.addPoint(newPoint);
         this.widthAverageNumSamples++;
         this.averageWidth =
-            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
-                + newPoint.width / this.widthAverageNumSamples;
+            (this.averageWidth * (this.widthAverageNumSamples - 1)) / this.widthAverageNumSamples +
+                newPoint.width / this.widthAverageNumSamples;
     }
 }

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

@@ -4,6 +4,12 @@ import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
+/**
+ * Creates a stroke builder that generates filled lines.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeLineBuilder: ComponentBuilderFactory;
 export default class LineBuilder implements ComponentBuilder {
     private readonly startPoint;

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

@@ -2,6 +2,12 @@ import { Path, PathCommandType } from '@js-draw/math';
 import  { pathToRenderable }  from '../../rendering/RenderablePathSpec.mjs';
 import  Stroke  from '../Stroke.mjs';
 import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+/**
+ * Creates a stroke builder that generates filled lines.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export const makeLineBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new LineBuilder(initialPoint, viewport);
 });
@@ -42,10 +48,8 @@ export default class LineBuilder {
                 kind: PathCommandType.LineTo,
                 point: startPoint.minus(scaledStartNormal),
             },
-        ]).mapPoints(point => this.viewport.roundPoint(point));
-        const preview = new Stroke([
-            pathToRenderable(path, { fill: this.startPoint.color })
-        ]);
+        ]).mapPoints((point) => this.viewport.roundPoint(point));
+        const preview = new Stroke([pathToRenderable(path, { fill: this.startPoint.color })]);
         return preview;
     }
     build() {

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

@@ -7,8 +7,11 @@ import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 import RenderingStyle from '../../rendering/RenderingStyle';
 /**
- * Creates strokes from line segments rather than Bézier curves.
+ * Creates a freehand line builder that creates strokes from line segments
+ * rather than Bézier curves.
  *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
  */
 export declare const makePolylineBuilder: ComponentBuilderFactory;
 export default class PolylineBuilder implements ComponentBuilder {

package/dist/mjs/components/builders/PolylineBuilder.mjs

@@ -1,10 +1,13 @@
-import { Rect2, Color4, PathCommandType, Vec2, LineSegment2 } from '@js-draw/math';
+import { Rect2, Color4, PathCommandType, Vec2, LineSegment2, } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  makeShapeFitAutocorrect  from './autocorrect/makeShapeFitAutocorrect.mjs';
 /**
- * Creates strokes from line segments rather than Bézier curves.
+ * Creates a freehand line builder that creates strokes from line segments
+ * rather than Bézier curves.
  *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
  */
 export const makePolylineBuilder = makeShapeFitAutocorrect((initialPoint, viewport) => {
     // Fit to a value slightly smaller than the pixel size. A larger value can
@@ -42,7 +45,7 @@ export default class PolylineBuilder {
             stroke: {
                 color: this.startPoint.color,
                 width: this.roundDistance(this.averageWidth),
-            }
+            },
         };
     }
     previewCurrentPath() {
@@ -96,12 +99,13 @@ export default class PolylineBuilder {
     addPoint(newPoint) {
         this.widthAverageNumSamples++;
         this.averageWidth =
-            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
-                + newPoint.width / this.widthAverageNumSamples;
+            (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) {
+            if (this.lastLineSegment &&
+                this.lastLineSegment.direction.dot(roundedPoint.minus(this.lastPoint).normalized()) > 0.997) {
                 this.parts.pop();
                 this.lastPoint = this.lastLineSegment.p1;
             }

package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs

@@ -1,4 +1,4 @@
-import { Vec2, Rect2, PathCommandType, QuadraticBezier } from '@js-draw/math';
+import { Vec2, Rect2, PathCommandType, QuadraticBezier, } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
@@ -30,7 +30,7 @@ export default class PressureSensitiveFreehandLineBuilder {
         this.parts = [];
         this.upperSegments = [];
         this.lowerSegments = [];
-        this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, curve => this.addCurve(curve));
+        this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, (curve) => this.addCurve(curve));
         this.curveStartWidth = startPoint.width;
         this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
     }
@@ -64,7 +64,8 @@ export default class PressureSensitiveFreehandLineBuilder {
         }
         let startPoint;
         const lastLowerSegment = lowerPath[lowerPath.length - 1];
-        if (lastLowerSegment.kind === PathCommandType.LineTo || lastLowerSegment.kind === PathCommandType.MoveTo) {
+        if (lastLowerSegment.kind === PathCommandType.LineTo ||
+            lastLowerSegment.kind === PathCommandType.MoveTo) {
             startPoint = lastLowerSegment.point;
         }
         else {
@@ -163,11 +164,11 @@ export default class PressureSensitiveFreehandLineBuilder {
         // 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.35
-            || getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.35
+        if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.35 ||
+            getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.35 ||
             // Also handle if the curves exit/enter directions differ
-            || getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
-            || getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
+            getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0 ||
+            getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
             return true;
         }
         // Check whether the lower curve intersects the other wall:
@@ -274,8 +275,9 @@ export default class PressureSensitiveFreehandLineBuilder {
         // Approximate the normal at the location of the control point
         const projectionT = bezier.nearestPointTo(controlPoint).parameterValue;
         const halfVecT = projectionT;
-        const halfVec = bezier.normal(halfVecT).times(curve.startWidth / 2 * halfVecT
-            + curve.endWidth / 2 * (1 - halfVecT));
+        const halfVec = bezier
+            .normal(halfVecT)
+            .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));
@@ -318,8 +320,12 @@ export default class PressureSensitiveFreehandLineBuilder {
         const upperCurve = new QuadraticBezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
         const lowerCurve = new QuadraticBezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
         return {
-            upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
-            upperCurve, lowerCurve,
+            upperCurveCommand,
+            upperToLowerConnector,
+            lowerToUpperConnector,
+            lowerCurveCommand,
+            upperCurve,
+            lowerCurve,
             nextCurveStartConnector,
         };
     }

package/dist/mjs/components/builders/RectangleBuilder.d.ts

@@ -4,7 +4,19 @@ import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
+/**
+ * Creates filled rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeFilledRectangleBuilder: ComponentBuilderFactory;
+/**
+ * Creates outlined rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeOutlinedRectangleBuilder: ComponentBuilderFactory;
 export default class RectangleBuilder implements ComponentBuilder {
     private readonly startPoint;