js-draw 0.23.0 → 0.24.0

package/dist/mjs/components/TextComponent.mjs

@@ -0,0 +1,408 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import  Mat33  from '../math/Mat33.mjs';
+import  Rect2  from '../math/shapes/Rect2.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  { cloneTextStyle, textStyleFromJSON, textStyleToJSON }  from '../rendering/TextRenderingStyle.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+var componentTypeId = 'text';
+export var TextTransformMode;
+(function (TextTransformMode) {
+    /** Absolutely positioned in both the X and Y dimensions. */
+    TextTransformMode[TextTransformMode["ABSOLUTE_XY"] = 0] = "ABSOLUTE_XY";
+    /** Relatively positioned in both the X and Y dimensions. */
+    TextTransformMode[TextTransformMode["RELATIVE_XY"] = 1] = "RELATIVE_XY";
+    /**Relatively positioned in the X direction, absolutely positioned in the Y direction. */
+    TextTransformMode[TextTransformMode["RELATIVE_X_ABSOLUTE_Y"] = 2] = "RELATIVE_X_ABSOLUTE_Y";
+    /**Relatively positioned in the Y direction, absolutely positioned in the X direction. */
+    TextTransformMode[TextTransformMode["RELATIVE_Y_ABSOLUTE_X"] = 3] = "RELATIVE_Y_ABSOLUTE_X";
+})(TextTransformMode || (TextTransformMode = {}));
+/**
+ * Displays text.
+ */
+var TextComponent = /** @class */ (function (_super) {
+    __extends(TextComponent, _super);
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
+    function TextComponent(textObjects, 
+    // Transformation relative to this component's parent element.
+    transform, style, 
+    // @internal
+    transformMode) {
+        if (transformMode === void 0) { transformMode = TextTransformMode.ABSOLUTE_XY; }
+        var _this = _super.call(this, componentTypeId) || this;
+        _this.textObjects = textObjects;
+        _this.transform = transform;
+        _this.style = style;
+        _this.transformMode = transformMode;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        _this.isRestylableComponent = true;
+        _this.recomputeBBox();
+        // If this has no direct children, choose a style representative of this' content
+        // (useful for estimating the style of the TextComponent).
+        var hasDirectContent = textObjects.some(function (obj) { return typeof obj === 'string'; });
+        if (!hasDirectContent && textObjects.length > 0) {
+            _this.style = textObjects[0].getTextStyle();
+        }
+        return _this;
+    }
+    TextComponent.applyTextStyles = function (ctx, style) {
+        var _a, _b, _c;
+        // Quote the font family if necessary.
+        var fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+        ctx.font = [
+            (_a = style.fontStyle) !== null && _a !== void 0 ? _a : '',
+            (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '',
+            ((_c = style.size) !== null && _c !== void 0 ? _c : 12) + 'px',
+            "".concat(fontFamily)
+        ].join(' ');
+        // TODO: Support RTL
+        ctx.textAlign = 'left';
+    };
+    // Roughly estimate the bounding box of `text`. Use if no CanvasRenderingContext2D is available.
+    TextComponent.estimateTextDimens = function (text, style) {
+        var widthEst = text.length * style.size;
+        var 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);
+    };
+    // Returns a set of TextMetrics for the given text, if a canvas is available.
+    TextComponent.getTextMetrics = function (text, style) {
+        var _a, _b;
+        (_a = TextComponent.textMeasuringCtx) !== null && _a !== void 0 ? _a : (TextComponent.textMeasuringCtx = (_b = document.createElement('canvas').getContext('2d')) !== null && _b !== void 0 ? _b : null);
+        if (!TextComponent.textMeasuringCtx) {
+            return null;
+        }
+        var ctx = TextComponent.textMeasuringCtx;
+        TextComponent.applyTextStyles(ctx, style);
+        return ctx.measureText(text);
+    };
+    // Returns the bounding box of `text`. This is approximate if no Canvas is available.
+    TextComponent.getTextDimens = function (text, style) {
+        var metrics = this.getTextMetrics(text, style);
+        if (!metrics) {
+            return this.estimateTextDimens(text, style);
+        }
+        // Text is drawn with (0,0) at the bottom left of the baseline.
+        var textY = -metrics.actualBoundingBoxAscent;
+        var textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        return new Rect2(0, textY, metrics.width, textHeight);
+    };
+    TextComponent.getFontHeight = function (style) {
+        return style.size;
+    };
+    TextComponent.prototype.computeUntransformedBBoxOfPart = function (part) {
+        if (typeof part === 'string') {
+            return TextComponent.getTextDimens(part, this.style);
+        }
+        else {
+            return part.contentBBox;
+        }
+    };
+    TextComponent.prototype.recomputeBBox = function () {
+        var bbox = null;
+        var cursor = new TextComponent.TextCursor(this.transform, this.style);
+        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
+            var textObject = _a[_i];
+            var transform = cursor.update(textObject);
+            var currentBBox = this.computeUntransformedBBoxOfPart(textObject).transformedBoundingBox(transform);
+            bbox !== null && bbox !== void 0 ? bbox : (bbox = currentBBox);
+            bbox = bbox.union(currentBBox);
+        }
+        this.contentBBox = bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
+    };
+    TextComponent.prototype.renderInternal = function (canvas) {
+        var cursor = new TextComponent.TextCursor(this.transform, this.style);
+        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
+            var textObject = _a[_i];
+            var transform = cursor.update(textObject);
+            if (typeof textObject === 'string') {
+                canvas.drawText(textObject, transform, this.style);
+            }
+            else {
+                canvas.pushTransform(transform);
+                textObject.renderInternal(canvas);
+                canvas.popTransform();
+            }
+        }
+    };
+    TextComponent.prototype.render = function (canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
+        this.renderInternal(canvas);
+        canvas.endObject(this.getLoadSaveData());
+    };
+    TextComponent.prototype.getProportionalRenderingTime = function () {
+        return this.textObjects.length;
+    };
+    TextComponent.prototype.intersects = function (lineSegment) {
+        var cursor = new TextComponent.TextCursor(this.transform, this.style);
+        var _loop_1 = function (subObject) {
+            // Convert canvas space to internal space relative to the current object.
+            var invTransform = cursor.update(subObject).inverse();
+            var transformedLine = lineSegment.transformedBy(invTransform);
+            if (typeof subObject === 'string') {
+                var textBBox = TextComponent.getTextDimens(subObject, this_1.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(function (edge) { return transformedLine.intersection(edge) !== null; })) {
+                    return { value: true };
+                }
+            }
+            else {
+                if (subObject.intersects(transformedLine)) {
+                    return { value: true };
+                }
+            }
+        };
+        var this_1 = this;
+        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
+            var subObject = _a[_i];
+            var state_1 = _loop_1(subObject);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+        return false;
+    };
+    TextComponent.prototype.getStyle = function () {
+        return {
+            color: this.style.renderingStyle.fill,
+            // Make a copy
+            textStyle: __assign(__assign({}, this.style), { renderingStyle: __assign({}, this.style.renderingStyle) }),
+        };
+    };
+    TextComponent.prototype.updateStyle = function (style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    };
+    TextComponent.prototype.forceStyle = function (style, editor) {
+        if (style.textStyle) {
+            this.style = cloneTextStyle(style.textStyle);
+        }
+        else if (style.color) {
+            this.style = __assign(__assign({}, this.style), { renderingStyle: __assign(__assign({}, this.style.renderingStyle), { fill: style.color }) });
+        }
+        else {
+            return;
+        }
+        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
+            var child = _a[_i];
+            if (child instanceof TextComponent) {
+                child.forceStyle(style, editor);
+            }
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    };
+    // See {@link getStyle}
+    TextComponent.prototype.getTextStyle = function () {
+        return cloneTextStyle(this.style);
+    };
+    TextComponent.prototype.getBaselinePos = function () {
+        return this.transform.transformVec2(Vec2.zero);
+    };
+    TextComponent.prototype.getTransform = function () {
+        return this.transform;
+    };
+    TextComponent.prototype.applyTransformation = function (affineTransfm) {
+        this.transform = affineTransfm.rightMul(this.transform);
+        this.recomputeBBox();
+    };
+    TextComponent.prototype.createClone = function () {
+        var clonedTextObjects = this.textObjects.map(function (obj) {
+            if (typeof obj === 'string') {
+                return obj;
+            }
+            else {
+                return obj.createClone();
+            }
+        });
+        return new TextComponent(clonedTextObjects, this.transform, this.style);
+    };
+    TextComponent.prototype.getText = function () {
+        var result = [];
+        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
+            var textObject = _a[_i];
+            if (typeof textObject === 'string') {
+                result.push(textObject);
+            }
+            else {
+                result.push(textObject.getText());
+            }
+        }
+        return result.join('\n');
+    };
+    TextComponent.prototype.description = function (localizationTable) {
+        return localizationTable.text(this.getText());
+    };
+    // Do not rely on the output of `serializeToJSON` taking any particular format.
+    TextComponent.prototype.serializeToJSON = function () {
+        var serializableStyle = textStyleToJSON(this.style);
+        var serializedTextObjects = this.textObjects.map(function (text) {
+            if (typeof text === 'string') {
+                return {
+                    text: text,
+                };
+            }
+            else {
+                return {
+                    json: text.serializeToJSON(),
+                };
+            }
+        });
+        return {
+            textObjects: serializedTextObjects,
+            transform: this.transform.toArray(),
+            style: serializableStyle,
+        };
+    };
+    // @internal
+    TextComponent.deserializeFromString = function (json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        var style = textStyleFromJSON(json.style);
+        var textObjects = json.textObjects.map(function (data) {
+            var _a;
+            if (((_a = data.text) !== null && _a !== void 0 ? _a : null) !== null) {
+                return data.text;
+            }
+            return TextComponent.deserializeFromString(data.json);
+        });
+        json.transform = json.transform.filter(function (elem) { return typeof elem === 'number'; });
+        if (json.transform.length !== 9) {
+            throw new Error("Unable to deserialize transform, ".concat(json.transform, "."));
+        }
+        var transformData = json.transform;
+        var transform = new (Mat33.bind.apply(Mat33, __spreadArray([void 0], transformData, false)))();
+        return new TextComponent(textObjects, transform, style);
+    };
+    /**
+     * Creates a `TextComponent` from `lines`.
+     *
+     * @example
+     * ```ts
+     * const textStyle = {
+     *   size: 12,
+     *   fontFamily: 'serif',
+     *   renderingStyle: { fill: Color4.black },
+     * };
+     *
+     * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
+     * ```
+     */
+    TextComponent.fromLines = function (lines, transform, style) {
+        var lastComponent = null;
+        var components = [];
+        var lineMargin = Math.round(this.getFontHeight(style));
+        var position = Vec2.zero;
+        for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
+            var line = lines_1[_i];
+            if (lastComponent) {
+                position = position.plus(Vec2.unitY.times(lineMargin));
+            }
+            var component = new TextComponent([line], Mat33.translation(position), style);
+            components.push(component);
+            lastComponent = component;
+        }
+        return new TextComponent(components, transform, style);
+    };
+    TextComponent.textMeasuringCtx = null;
+    TextComponent.TextCursor = /** @class */ (function () {
+        function class_1(parentTransform, parentStyle) {
+            if (parentTransform === void 0) { parentTransform = Mat33.identity; }
+            this.parentTransform = parentTransform;
+            this.parentStyle = parentStyle;
+            this.transform = Mat33.identity;
+        }
+        /**
+         * Based on previous calls to `update`, returns the transformation of
+         * the given `element` (including the parentTransform given to this cursor's
+         * constructor).
+         *
+         * The result does not take into account
+         */
+        class_1.prototype.update = function (elem) {
+            var elementTransform = Mat33.identity;
+            var elemInternalTransform = Mat33.identity;
+            var textSize;
+            if (typeof (elem) === 'string') {
+                textSize = TextComponent.getTextDimens(elem, this.parentStyle);
+            }
+            else {
+                // TODO: Double-check whether we need to take elem.transform into account here.
+                // elementTransform = elem.transform;
+                elemInternalTransform = elem.transform;
+                textSize = elem.getBBox();
+            }
+            var 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) {
+                // Zero the absolute component of this.transform's translation
+                var transform = this.transform.mapEntries(function (component, _a) {
+                    var row = _a[0], col = _a[1];
+                    if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y) {
+                        // Zero the y component of this.transform's translation
+                        return row === 1 && col === 2 ? 0 : component;
+                    }
+                    else if (positioning === TextTransformMode.RELATIVE_Y_ABSOLUTE_X) {
+                        // Zero the x component of this.transform's translation
+                        return row === 0 && col === 2 ? 0 : component;
+                    }
+                    throw new Error('Unreachable');
+                    return 0;
+                });
+                elementTransform = transform.rightMul(elementTransform);
+            }
+            // Update this.transform so that future calls to update return correct values.
+            var endShiftTransform = Mat33.translation(Vec2.of(textSize.width, 0));
+            this.transform = elementTransform.rightMul(elemInternalTransform).rightMul(endShiftTransform);
+            return this.parentTransform.rightMul(elementTransform);
+        };
+        return class_1;
+    }());
+    return TextComponent;
+}(AbstractComponent));
+export default TextComponent;
+AbstractComponent.registerComponent(componentTypeId, function (data) { return TextComponent.deserializeFromString(data); });

package/dist/mjs/components/TextComponent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/UnknownSVGObject.d.ts

@@ -0,0 +1,18 @@
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/shapes/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+export default class UnknownSVGObject extends AbstractComponent {
+    private svgObject;
+    protected contentBBox: Rect2;
+    constructor(svgObject: SVGElement);
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    intersects(lineSegment: LineSegment2): boolean;
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    isSelectable(): boolean;
+    protected createClone(): AbstractComponent;
+    description(localization: ImageComponentLocalization): string;
+    protected serializeToJSON(): string | null;
+}

package/dist/mjs/components/UnknownSVGObject.mjs

@@ -0,0 +1,63 @@
+//
+// Stores objects loaded from an SVG that aren't recognised by the editor.
+// @internal
+// @packageDocumentation
+//
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import  Rect2  from '../math/shapes/Rect2.mjs';
+import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+var componentId = 'unknown-svg-object';
+var UnknownSVGObject = /** @class */ (function (_super) {
+    __extends(UnknownSVGObject, _super);
+    function UnknownSVGObject(svgObject) {
+        var _this = _super.call(this, componentId) || this;
+        _this.svgObject = svgObject;
+        _this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
+        return _this;
+    }
+    UnknownSVGObject.prototype.render = function (canvas, _visibleRect) {
+        if (!(canvas instanceof SVGRenderer)) {
+            // Don't draw unrenderable objects if we can't
+            return;
+        }
+        canvas.drawSVGElem(this.svgObject);
+    };
+    UnknownSVGObject.prototype.intersects = function (lineSegment) {
+        return this.contentBBox.getEdges().some(function (edge) { return edge.intersection(lineSegment) !== null; });
+    };
+    UnknownSVGObject.prototype.applyTransformation = function (_affineTransfm) {
+    };
+    UnknownSVGObject.prototype.isSelectable = function () {
+        return false;
+    };
+    UnknownSVGObject.prototype.createClone = function () {
+        return new UnknownSVGObject(this.svgObject.cloneNode(true));
+    };
+    UnknownSVGObject.prototype.description = function (localization) {
+        return localization.svgObject;
+    };
+    UnknownSVGObject.prototype.serializeToJSON = function () {
+        return JSON.stringify({
+            html: this.svgObject.outerHTML,
+        });
+    };
+    return UnknownSVGObject;
+}(AbstractComponent));
+export default UnknownSVGObject;
+// null: Do not deserialize UnknownSVGObjects.
+AbstractComponent.registerComponent(componentId, null);

package/dist/mjs/components/UnknownSVGObject.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+import Rect2 from '../../math/shapes/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 makeArrowBuilder: ComponentBuilderFactory;
+export default class ArrowBuilder implements ComponentBuilder {
+    private readonly startPoint;
+    private readonly viewport;
+    private endPoint;
+    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
+    private getLineWidth;
+    getBBox(): Rect2;
+    private buildPreview;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}

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

@@ -0,0 +1,89 @@
+import  Path, { PathCommandType }  from '../../math/shapes/Path.mjs';
+import  Stroke  from '../Stroke.mjs';
+export var makeArrowBuilder = function (initialPoint, viewport) {
+    return new ArrowBuilder(initialPoint, viewport);
+};
+var ArrowBuilder = /** @class */ (function () {
+    function ArrowBuilder(startPoint, viewport) {
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.endPoint = startPoint;
+    }
+    ArrowBuilder.prototype.getLineWidth = function () {
+        return Math.max(this.endPoint.width, this.startPoint.width);
+    };
+    ArrowBuilder.prototype.getBBox = function () {
+        var preview = this.buildPreview();
+        return preview.getBBox();
+    };
+    ArrowBuilder.prototype.buildPreview = function () {
+        var _this = this;
+        var lineStartPoint = this.startPoint.pos;
+        var endPoint = this.endPoint.pos;
+        var toEnd = endPoint.minus(lineStartPoint).normalized();
+        var arrowLength = endPoint.minus(lineStartPoint).length();
+        // Ensure that the arrow tip is smaller than the arrow.
+        var arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
+        var startSize = this.startPoint.width / 2;
+        var endSize = this.endPoint.width / 2;
+        var arrowTipBase = endPoint.minus(toEnd.times(arrowTipSize));
+        // Scaled normal vectors.
+        var lineNormal = toEnd.orthog();
+        var scaledStartNormal = lineNormal.times(startSize);
+        var scaledBaseNormal = lineNormal.times(endSize);
+        var 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(function (point) { return _this.viewport.roundPoint(point); });
+        var preview = new Stroke([
+            {
+                startPoint: path.startPoint,
+                commands: path.parts,
+                style: {
+                    fill: this.startPoint.color,
+                }
+            }
+        ]);
+        return preview;
+    };
+    ArrowBuilder.prototype.build = function () {
+        return this.buildPreview();
+    };
+    ArrowBuilder.prototype.preview = function (renderer) {
+        this.buildPreview().render(renderer);
+    };
+    ArrowBuilder.prototype.addPoint = function (point) {
+        this.endPoint = point;
+    };
+    return ArrowBuilder;
+}());
+export default ArrowBuilder;

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

@@ -0,0 +1,2 @@
+import { ComponentBuilderFactory } from './types';
+export declare const makeOutlinedCircleBuilder: ComponentBuilderFactory;

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

@@ -0,0 +1,70 @@
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  Path, { PathCommandType }  from '../../math/shapes/Path.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  Stroke  from '../Stroke.mjs';
+import  Color4  from '../../Color4.mjs';
+export var makeOutlinedCircleBuilder = function (initialPoint, viewport) {
+    return new CircleBuilder(initialPoint, viewport);
+};
+var CircleBuilder = /** @class */ (function () {
+    function CircleBuilder(startPoint, viewport) {
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        // Initially, the start and end points are the same.
+        this.endPoint = startPoint;
+    }
+    CircleBuilder.prototype.getBBox = function () {
+        var preview = this.buildPreview();
+        return preview.getBBox();
+    };
+    CircleBuilder.prototype.buildPreview = function () {
+        var _this = this;
+        var pathCommands = [];
+        var numDivisions = 6;
+        var stepSize = Math.PI * 2 / numDivisions;
+        // Round the stroke width so that when exported it doesn't have unnecessary trailing decimals.
+        var strokeWidth = Viewport.roundPoint(this.endPoint.width, 5 / this.viewport.getScaleFactor());
+        var center = this.startPoint.pos.lerp(this.endPoint.pos, 0.5);
+        var startEndDelta = this.endPoint.pos.minus(center);
+        var radius = startEndDelta.length() - strokeWidth / 2;
+        var startPoint = center.plus(Vec2.of(radius, 0));
+        for (var t = stepSize; t <= Math.PI * 2; t += stepSize) {
+            var endPoint = Vec2.of(radius * Math.cos(t), -radius * Math.sin(t)).plus(center);
+            // controlPointRadiusScale is selected to make the circles appear circular and
+            // **does** depend on stepSize.
+            var controlPointRadiusScale = 1.141;
+            var controlPoint = Vec2.of(Math.cos(t - stepSize / 2), -Math.sin(t - stepSize / 2)).times(radius * controlPointRadiusScale).plus(center);
+            pathCommands.push({
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: controlPoint,
+                endPoint: endPoint,
+            });
+        }
+        pathCommands.push({
+            kind: PathCommandType.LineTo,
+            point: startPoint,
+        });
+        var path = new Path(startPoint, pathCommands)
+            .mapPoints(function (point) { return _this.viewport.roundPoint(point); });
+        var preview = new Stroke([
+            path.toRenderable({
+                fill: Color4.transparent,
+                stroke: {
+                    width: strokeWidth,
+                    color: this.endPoint.color,
+                },
+            }),
+        ]);
+        return preview;
+    };
+    CircleBuilder.prototype.build = function () {
+        return this.buildPreview();
+    };
+    CircleBuilder.prototype.preview = function (renderer) {
+        this.buildPreview().render(renderer);
+    };
+    CircleBuilder.prototype.addPoint = function (point) {
+        this.endPoint = point;
+    };
+    return CircleBuilder;
+}());