js-draw 1.21.2 → 1.22.0

package/dist/cjs/commands/Erase.js

@@ -51,7 +51,7 @@ class Erase extends SerializableCommand_1.default {
     constructor(toRemove) {
         super('erase');
         // Clone the list
-        this.toRemove = toRemove.map(elem => elem);
+        this.toRemove = toRemove.map((elem) => elem);
         this.applied = false;
     }
     apply(editor) {
@@ -91,7 +91,7 @@ class Erase extends SerializableCommand_1.default {
     serializeToJSON() {
         // If applied, the elements can't be fetched from the image because they're
         // erased. Serialize and return the elements themselves.
-        const elems = this.toRemove.map(elem => elem.serialize());
+        const elems = this.toRemove.map((elem) => elem.serialize());
         return elems;
     }
 }
@@ -100,8 +100,7 @@ class Erase extends SerializableCommand_1.default {
         if (!Array.isArray(json)) {
             throw new Error('seralized erase data must be an array');
         }
-        const elems = json
-            .map((elemData) => {
+        const elems = json.map((elemData) => {
             const componentId = typeof elemData === 'string' ? elemData : `${elemData.id}`;
             const component = editor.image.lookupElement(componentId) ?? AbstractComponent_1.default.deserialize(elemData);
             return component;

package/dist/cjs/commands/invertCommand.js

@@ -10,7 +10,7 @@ const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
 const invertCommand = (command) => {
     if (command instanceof SerializableCommand_1.default) {
         // SerializableCommand that does the inverse of [command]
-        return new class extends SerializableCommand_1.default {
+        return new (class extends SerializableCommand_1.default {
             constructor() {
                 super(...arguments);
                 // For debugging
@@ -31,11 +31,11 @@ const invertCommand = (command) => {
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }
-        }('inverse');
+        })('inverse');
     }
     else {
         // Command that does the inverse of [command].
-        const result = new class extends Command_1.default {
+        const result = new (class extends Command_1.default {
             apply(editor) {
                 command.unapply(editor);
             }
@@ -48,7 +48,7 @@ const invertCommand = (command) => {
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }
-        };
+        })();
         // We know that T does not extend SerializableCommand, and thus returning a Command
         // is appropriate.
         return result;

package/dist/cjs/commands/lib.d.ts

@@ -4,4 +4,4 @@ import Erase from './Erase';
 import invertCommand from './invertCommand';
 import SerializableCommand from './SerializableCommand';
 import uniteCommands from './uniteCommands';
-export { Command, Duplicate, Erase, SerializableCommand, invertCommand, uniteCommands, };
+export { Command, Duplicate, Erase, SerializableCommand, invertCommand, uniteCommands };

package/dist/cjs/commands/uniteCommands.js

@@ -15,7 +15,7 @@ class NonSerializableUnion extends Command_1.default {
     }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
-            const results = this.commands.map(cmd => cmd.apply(editor));
+            const results = this.commands.map((cmd) => cmd.apply(editor));
             return (0, waitForAll_1.default)(results);
         }
         else {
@@ -26,7 +26,7 @@ class NonSerializableUnion extends Command_1.default {
         const commands = [...this.commands];
         commands.reverse();
         if (this.applyChunkSize === undefined) {
-            const results = commands.map(cmd => cmd.unapply(editor));
+            const results = commands.map((cmd) => cmd.unapply(editor));
             return (0, waitForAll_1.default)(results);
         }
         else {
@@ -34,7 +34,7 @@ class NonSerializableUnion extends Command_1.default {
         }
     }
     onDrop(editor) {
-        this.commands.forEach(command => command.onDrop(editor));
+        this.commands.forEach((command) => command.onDrop(editor));
     }
     description(editor, localizationTable) {
         if (this.descriptionOverride) {
@@ -86,7 +86,7 @@ class SerializableUnion extends SerializableCommand_1.default {
         }
         return {
             applyChunkSize: this.applyChunkSize,
-            data: this.commands.map(command => command.serialize()),
+            data: this.commands.map((command) => command.serialize()),
             description: this.descriptionOverride,
         };
     }

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

@@ -4,7 +4,7 @@ import { LineSegment2, Mat33, Path, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 import Viewport from '../Viewport';
-export type LoadSaveData = (string[] | Record<symbol, string | number>);
+export type LoadSaveData = string[] | Record<symbol, string | number>;
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export type DeserializeCallback = (data: string) => AbstractComponent;
 export declare enum ComponentSizingMode {

package/dist/cjs/components/AbstractComponent.js

@@ -42,7 +42,7 @@ class AbstractComponent {
         this.componentKind = componentKind;
         // Stores data attached by a loader.
         this.loadSaveData = {};
-        this.lastChangedTime = (new Date()).getTime();
+        this.lastChangedTime = new Date().getTime();
         if (initialZIndex !== undefined) {
             this.zIndex = initialZIndex;
         }
@@ -140,7 +140,7 @@ class AbstractComponent {
         }
         // Otherwise check if it intersects one of the rectangle's edges.
         const testLines = rect.getEdges();
-        return testLines.some(edge => this.intersects(edge));
+        return testLines.some((edge) => this.intersects(edge));
     }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
@@ -290,7 +290,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
             }
             this.component.applyTransformation(newTransfm);
             this.component.zIndex = targetZIndex;
-            this.component.lastChangedTime = (new Date()).getTime();
+            this.component.lastChangedTime = new Date().getTime();
             // Ensure that new components are automatically drawn above the current component.
             if (targetZIndex >= AbstractComponent.zIndexCounter) {
                 AbstractComponent.zIndexCounter = targetZIndex + 1;

package/dist/cjs/components/BackgroundComponent.js

@@ -207,7 +207,7 @@ class BackgroundComponent extends AbstractComponent_1.default {
             });
             result.push({
                 kind: math_1.PathCommandType.LineTo,
-                point: math_1.Vec2.of(x, targetRect.y + targetRect.h)
+                point: math_1.Vec2.of(x, targetRect.y + targetRect.h),
             });
         }
         return new math_1.Path(startPoint, result);
@@ -235,7 +235,8 @@ class BackgroundComponent extends AbstractComponent_1.default {
         const clip = this.backgroundType === BackgroundType.Grid;
         const contentBBox = this.getFullBoundingBox(visibleRect);
         canvas.startObject(contentBBox, clip);
-        if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
+        if (this.backgroundType === BackgroundType.SolidColor ||
+            this.backgroundType === BackgroundType.Grid) {
             // If the rectangle for this region contains the visible rect,
             // we can fill the entire visible rectangle (which may be more efficient than
             // filling the entire region for this.)
@@ -257,7 +258,7 @@ class BackgroundComponent extends AbstractComponent_1.default {
             }
             const style = {
                 fill: math_1.Color4.transparent,
-                stroke: { width: this.gridStrokeWidth, color: gridColor }
+                stroke: { width: this.gridStrokeWidth, color: gridColor },
             };
             canvas.drawPath((0, RenderablePathSpec_1.pathToRenderable)(this.generateGridPath(visibleRect), style));
         }
@@ -274,7 +275,7 @@ class BackgroundComponent extends AbstractComponent_1.default {
         canvas.endObject(this.getLoadSaveData(), classNames);
     }
     intersects(lineSegment) {
-        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+        return this.contentBBox.getEdges().some((edge) => edge.intersects(lineSegment));
     }
     isSelectable() {
         return false;
@@ -325,8 +326,9 @@ class BackgroundComponent extends AbstractComponent_1.default {
         }
         let backgroundType;
         const jsonBackgroundType = json.backgroundType;
-        if (jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
-            || jsonBackgroundType === BackgroundType.SolidColor) {
+        if (jsonBackgroundType === BackgroundType.None ||
+            jsonBackgroundType === BackgroundType.Grid ||
+            jsonBackgroundType === BackgroundType.SolidColor) {
             backgroundType = jsonBackgroundType;
         }
         else {

package/dist/cjs/components/ImageComponent.js

@@ -18,7 +18,10 @@ class ImageComponent extends AbstractComponent_1.default {
         super('image-component');
         this.image = {
             ...image,
-            label: image.label ?? image.image.getAttribute('alt') ?? image.image.getAttribute('aria-label') ?? undefined,
+            label: image.label ??
+                image.image.getAttribute('alt') ??
+                image.image.getAttribute('aria-label') ??
+                undefined,
         };
         const isHTMLImageElem = (elem) => {
             return elem.getAttribute('src') !== undefined;
@@ -44,8 +47,10 @@ class ImageComponent extends AbstractComponent_1.default {
     static async fromImage(elem, transform) {
         await (0, waitForImageLoaded_1.default)(elem);
         let width, height;
-        if (typeof elem.width === 'number' && typeof elem.height === 'number'
-            && elem.width !== 0 && elem.height !== 0) {
+        if (typeof elem.width === 'number' &&
+            typeof elem.height === 'number' &&
+            elem.width !== 0 &&
+            elem.height !== 0) {
             width = elem.width;
             height = elem.height;
         }
@@ -91,7 +96,7 @@ class ImageComponent extends AbstractComponent_1.default {
     }
     intersects(lineSegment) {
         const rect = this.getImageRect();
-        const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+        const edges = rect.getEdges().map((edge) => edge.transformedBy(this.image.transform));
         for (const edge of edges) {
             if (edge.intersects(lineSegment)) {
                 return true;
@@ -104,7 +109,9 @@ class ImageComponent extends AbstractComponent_1.default {
         this.recomputeBBox();
     }
     description(localizationTable) {
-        return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+        return this.image.label
+            ? localizationTable.imageNode(this.image.label)
+            : localizationTable.unlabeledImageNode;
     }
     getAltText() {
         return this.image.label;

package/dist/cjs/components/RestylableComponent.js

@@ -81,7 +81,7 @@ class DefaultRestyleComponentCommand extends UnresolvedCommand_1.default {
         const newStyle = deserializeComponentStyle(json.newStyle);
         const id = json.id;
         if (typeof json.id !== 'string') {
-            throw new Error(`json.id is of type ${(typeof json.id)}, not string.`);
+            throw new Error(`json.id is of type ${typeof json.id}, not string.`);
         }
         return new DefaultRestyleComponentCommand(origStyle, newStyle, id);
     });

package/dist/cjs/components/SVGGlobalAttributesObject.js

@@ -61,8 +61,7 @@ class SVGGlobalAttributesObject extends AbstractComponent_1.default {
     intersects(_lineSegment) {
         return false;
     }
-    applyTransformation(_affineTransfm) {
-    }
+    applyTransformation(_affineTransfm) { }
     isSelectable() {
         return false;
     }

package/dist/cjs/components/Stroke.js

@@ -79,8 +79,7 @@ class Stroke extends AbstractComponent_1.default {
             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,
             };
@@ -99,9 +98,11 @@ class Stroke extends AbstractComponent_1.default {
         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.
@@ -136,7 +137,8 @@ class Stroke extends AbstractComponent_1.default {
             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)) {
+                    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;
                     }
@@ -169,10 +171,10 @@ class Stroke extends AbstractComponent_1.default {
             // 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));
                 }
@@ -186,7 +188,7 @@ class Stroke extends AbstractComponent_1.default {
                 }
                 // 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 = (0, math_1.stepPathIndexBy)(intersectionPoints[0], -1e-10);
                 return isPointInsideEraser(path.at(justBeforeFirstIntersection));
@@ -203,24 +205,30 @@ class Stroke extends AbstractComponent_1.default {
                 // (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);
                     }
@@ -262,7 +270,9 @@ class Stroke extends AbstractComponent_1.default {
                 //
                 // 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());
                 }
@@ -338,12 +348,12 @@ class Stroke extends AbstractComponent_1.default {
         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;
             }
@@ -393,7 +403,8 @@ class Stroke extends AbstractComponent_1.default {
                     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;
                 }
             }
@@ -429,9 +440,11 @@ class Stroke extends AbstractComponent_1.default {
             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) {
@@ -489,7 +502,7 @@ class Stroke extends AbstractComponent_1.default {
         return new Stroke(this.parts);
     }
     serializeToJSON() {
-        return this.parts.map(part => {
+        return this.parts.map((part) => {
             return {
                 style: (0, RenderingStyle_1.styleToJSON)(part.style),
                 path: part.path.serialize(),

package/dist/cjs/components/TextComponent.js

@@ -21,7 +21,9 @@ var TextTransformMode;
     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 },
+    fontFamily: 'sans',
+    size: 12,
+    renderingStyle: { fill: math_1.Color4.purple },
 };
 /**
  * Displays text.
@@ -82,7 +84,7 @@ class TextComponent extends AbstractComponent_1.default {
         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();
         }
@@ -96,7 +98,7 @@ class TextComponent extends AbstractComponent_1.default {
             style.fontStyle ?? '',
             style.fontWeight ?? '',
             (style.size ?? 12) + 'px',
-            `${fontFamily}`
+            `${fontFamily}`,
         ].join(' ');
         // TODO: Support RTL
         ctx.textAlign = 'left';
@@ -107,7 +109,7 @@ class TextComponent extends AbstractComponent_1.default {
         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 math_1.Rect2(0, -heightEst * 2 / 3, widthEst, heightEst);
+        return new math_1.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) {
@@ -187,7 +189,7 @@ class TextComponent extends AbstractComponent_1.default {
                 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;
                 }
             }
@@ -255,7 +257,7 @@ class TextComponent extends AbstractComponent_1.default {
         this.recomputeBBox();
     }
     createClone() {
-        const clonedTextObjects = this.textObjects.map(obj => {
+        const clonedTextObjects = this.textObjects.map((obj) => {
             if (typeof obj === 'string') {
                 return obj;
             }
@@ -283,7 +285,7 @@ class TextComponent extends AbstractComponent_1.default {
     // Do not rely on the output of `serializeToJSON` taking any particular format.
     serializeToJSON() {
         const serializableStyle = (0, TextRenderingStyle_1.textStyleToJSON)(this.style);
-        const serializedTextObjects = this.textObjects.map(text => {
+        const serializedTextObjects = this.textObjects.map((text) => {
             if (typeof text === 'string') {
                 return {
                     text,
@@ -369,7 +371,7 @@ TextComponent.TextCursor = class {
         let elementTransform = math_1.Mat33.identity;
         let elemInternalTransform = math_1.Mat33.identity;
         let textSize;
-        if (typeof (elem) === 'string') {
+        if (typeof elem === 'string') {
             textSize = TextComponent.getTextDimens(elem, this.parentStyle);
         }
         else {
@@ -378,12 +380,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/cjs/components/UnknownSVGObject.js

@@ -51,10 +51,9 @@ class UnknownSVGObject extends AbstractComponent_1.default {
         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/cjs/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/cjs/components/builders/ArrowBuilder.js

@@ -7,6 +7,12 @@ exports.makeArrowBuilder = void 0;
 const math_1 = require("@js-draw/math");
 const Stroke_1 = __importDefault(require("../Stroke"));
 const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+/**
+ * Creates a stroke builder that generates arrows circles.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 exports.makeArrowBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new ArrowBuilder(initialPoint, viewport);
 });
@@ -69,15 +75,15 @@ 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_1.default([
             {
                 startPoint: path.startPoint,
                 commands: path.parts,
                 style: {
                     fill: this.startPoint.color,
-                }
-            }
+                },
+            },
         ]);
         return preview;
     }

package/dist/cjs/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/cjs/components/builders/CircleBuilder.js

@@ -9,6 +9,12 @@ const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
 const Viewport_1 = __importDefault(require("../../Viewport"));
 const Stroke_1 = __importDefault(require("../Stroke"));
 const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+/**
+ * Creates a stroke builder that generates outlined circles.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 exports.makeOutlinedCircleBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new CircleBuilder(initialPoint, viewport);
 });
@@ -26,7 +32,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_1.default.roundPoint(this.endPoint.width, 5 / this.viewport.getScaleFactor());
         const center = this.startPoint.pos.lerp(this.endPoint.pos, 0.5);
@@ -38,7 +44,9 @@ class CircleBuilder {
             // controlPointRadiusScale is selected to make the circles appear circular and
             // **does** depend on stepSize.
             const controlPointRadiusScale = 1.141;
-            const controlPoint = math_1.Vec2.of(Math.cos(t - stepSize / 2), -Math.sin(t - stepSize / 2)).times(radius * controlPointRadiusScale).plus(center);
+            const controlPoint = math_1.Vec2.of(Math.cos(t - stepSize / 2), -Math.sin(t - stepSize / 2))
+                .times(radius * controlPointRadiusScale)
+                .plus(center);
             pathCommands.push({
                 kind: math_1.PathCommandType.QuadraticBezierTo,
                 controlPoint,
@@ -49,8 +57,7 @@ class CircleBuilder {
             kind: math_1.PathCommandType.LineTo,
             point: startPoint,
         });
-        const path = new math_1.Path(startPoint, pathCommands)
-            .mapPoints(point => this.viewport.roundPoint(point));
+        const path = new math_1.Path(startPoint, pathCommands).mapPoints((point) => this.viewport.roundPoint(point));
         const preview = new Stroke_1.default([
             (0, RenderablePathSpec_1.pathToRenderable)(path, {
                 fill: math_1.Color4.transparent,

package/dist/cjs/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;