js-draw 0.18.1 → 0.19.0

package/dist/cjs/src/components/TextComponent.js

@@ -0,0 +1,280 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const LineSegment2_1 = __importDefault(require("../math/LineSegment2"));
+const Mat33_1 = __importDefault(require("../math/Mat33"));
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+const Vec2_1 = require("../math/Vec2");
+const TextRenderingStyle_1 = require("../rendering/TextRenderingStyle");
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const RestylableComponent_1 = require("./RestylableComponent");
+const componentTypeId = 'text';
+/**
+ * Displays text.
+ */
+class TextComponent extends AbstractComponent_1.default {
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
+    constructor(textObjects, transform, style) {
+        super(componentTypeId);
+        this.textObjects = textObjects;
+        this.transform = transform;
+        this.style = style;
+        // 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).
+        const hasDirectContent = textObjects.some(obj => typeof obj === 'string');
+        if (!hasDirectContent && textObjects.length > 0) {
+            this.style = textObjects[0].getTextStyle();
+        }
+    }
+    static applyTextStyles(ctx, style) {
+        var _a, _b;
+        // Quote the font family if necessary.
+        const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+        ctx.font = [
+            ((_a = style.size) !== null && _a !== void 0 ? _a : 12) + 'px',
+            (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '',
+            `${fontFamily}`,
+            style.fontWeight
+        ].join(' ');
+        ctx.textAlign = 'left';
+    }
+    // Roughly estimate the bounding box of `text`. Use if no CanvasRenderingContext2D is available.
+    static estimateTextDimens(text, style) {
+        const widthEst = text.length * style.size;
+        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_1.default(0, -heightEst * 2 / 3, widthEst, heightEst);
+    }
+    // Returns the bounding box of `text`. This is approximate if no Canvas is available.
+    static getTextDimens(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 this.estimateTextDimens(text, style);
+        }
+        const ctx = TextComponent.textMeasuringCtx;
+        TextComponent.applyTextStyles(ctx, style);
+        const measure = ctx.measureText(text);
+        // Text is drawn with (0,0) at the bottom left of the baseline.
+        const textY = -measure.actualBoundingBoxAscent;
+        const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+        return new Rect2_1.default(0, textY, measure.width, textHeight);
+    }
+    computeBBoxOfPart(part) {
+        if (typeof part === 'string') {
+            const textBBox = TextComponent.getTextDimens(part, this.style);
+            return textBBox.transformedBoundingBox(this.transform);
+        }
+        else {
+            const bbox = part.contentBBox.transformedBoundingBox(this.transform);
+            return bbox;
+        }
+    }
+    recomputeBBox() {
+        let bbox = null;
+        for (const textObject of this.textObjects) {
+            const currentBBox = this.computeBBoxOfPart(textObject);
+            bbox !== null && bbox !== void 0 ? bbox : (bbox = currentBBox);
+            bbox = bbox.union(currentBBox);
+        }
+        this.contentBBox = bbox !== null && bbox !== void 0 ? bbox : Rect2_1.default.empty;
+    }
+    renderInternal(canvas) {
+        const cursor = this.transform;
+        for (const textObject of this.textObjects) {
+            if (typeof textObject === 'string') {
+                canvas.drawText(textObject, cursor, this.style);
+            }
+            else {
+                canvas.pushTransform(cursor);
+                textObject.renderInternal(canvas);
+                canvas.popTransform();
+            }
+        }
+    }
+    render(canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
+        this.renderInternal(canvas);
+        canvas.endObject(this.getLoadSaveData());
+    }
+    getProportionalRenderingTime() {
+        return this.textObjects.length;
+    }
+    intersects(lineSegment) {
+        // Convert canvas space to internal space.
+        const invTransform = this.transform.inverse();
+        const p1InThisSpace = invTransform.transformVec2(lineSegment.p1);
+        const p2InThisSpace = invTransform.transformVec2(lineSegment.p2);
+        lineSegment = new LineSegment2_1.default(p1InThisSpace, p2InThisSpace);
+        for (const subObject of this.textObjects) {
+            if (typeof subObject === 'string') {
+                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 => lineSegment.intersection(edge) !== null)) {
+                    return true;
+                }
+            }
+            else {
+                if (subObject.intersects(lineSegment)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    getStyle() {
+        return {
+            color: this.style.renderingStyle.fill,
+            // Make a copy
+            textStyle: Object.assign(Object.assign({}, this.style), { renderingStyle: Object.assign({}, this.style.renderingStyle) }),
+        };
+    }
+    updateStyle(style) {
+        return (0, RestylableComponent_1.createRestyleComponentCommand)(this.getStyle(), style, this);
+    }
+    forceStyle(style, editor) {
+        if (style.textStyle) {
+            this.style = (0, TextRenderingStyle_1.cloneTextStyle)(style.textStyle);
+        }
+        else if (style.color) {
+            this.style = Object.assign(Object.assign({}, this.style), { renderingStyle: Object.assign(Object.assign({}, this.style.renderingStyle), { fill: style.color }) });
+        }
+        else {
+            return;
+        }
+        for (const child of this.textObjects) {
+            if (child instanceof TextComponent) {
+                child.forceStyle(style, editor);
+            }
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    }
+    // See this.getStyle
+    getTextStyle() {
+        return (0, TextRenderingStyle_1.cloneTextStyle)(this.style);
+    }
+    getBaselinePos() {
+        return this.transform.transformVec2(Vec2_1.Vec2.zero);
+    }
+    getTransform() {
+        return this.transform;
+    }
+    applyTransformation(affineTransfm) {
+        this.transform = affineTransfm.rightMul(this.transform);
+        this.recomputeBBox();
+    }
+    createClone() {
+        const clonedTextObjects = this.textObjects.map(obj => {
+            if (typeof obj === 'string') {
+                return obj;
+            }
+            else {
+                return obj.createClone();
+            }
+        });
+        return new TextComponent(clonedTextObjects, this.transform, this.style);
+    }
+    getText() {
+        const result = [];
+        for (const textObject of this.textObjects) {
+            if (typeof textObject === 'string') {
+                result.push(textObject);
+            }
+            else {
+                result.push(textObject.getText());
+            }
+        }
+        return result.join('\n');
+    }
+    description(localizationTable) {
+        return localizationTable.text(this.getText());
+    }
+    // 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 => {
+            if (typeof text === 'string') {
+                return {
+                    text,
+                };
+            }
+            else {
+                return {
+                    json: text.serializeToJSON(),
+                };
+            }
+        });
+        return {
+            textObjects: serializedTextObjects,
+            transform: this.transform.toArray(),
+            style: serializableStyle,
+        };
+    }
+    // @internal
+    static deserializeFromString(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        const style = (0, TextRenderingStyle_1.textStyleFromJSON)(json.style);
+        const textObjects = json.textObjects.map((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((elem) => typeof elem === 'number');
+        if (json.transform.length !== 9) {
+            throw new Error(`Unable to deserialize transform, ${json.transform}.`);
+        }
+        const transformData = json.transform;
+        const transform = new Mat33_1.default(...transformData);
+        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);
+     * ```
+     */
+    static fromLines(lines, transform, style) {
+        let lastComponent = null;
+        const components = [];
+        for (const line of lines) {
+            let position = Vec2_1.Vec2.zero;
+            if (lastComponent) {
+                const lineMargin = Math.floor(style.size);
+                position = lastComponent.getBBox().bottomLeft.plus(Vec2_1.Vec2.unitY.times(lineMargin));
+            }
+            const component = new TextComponent([line], Mat33_1.default.translation(position), style);
+            components.push(component);
+            lastComponent = component;
+        }
+        return new TextComponent(components, transform, style);
+    }
+}
+exports.default = TextComponent;
+TextComponent.textMeasuringCtx = null;
+AbstractComponent_1.default.registerComponent(componentTypeId, (data) => TextComponent.deserializeFromString(data));

package/dist/cjs/src/components/UnknownSVGObject.d.ts

@@ -0,0 +1,18 @@
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/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/cjs/src/components/UnknownSVGObject.js

@@ -0,0 +1,50 @@
+"use strict";
+//
+// Stores objects loaded from an SVG that aren't recognised by the editor.
+// @internal
+// @packageDocumentation
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+const SVGRenderer_1 = __importDefault(require("../rendering/renderers/SVGRenderer"));
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const componentId = 'unknown-svg-object';
+class UnknownSVGObject extends AbstractComponent_1.default {
+    constructor(svgObject) {
+        super(componentId);
+        this.svgObject = svgObject;
+        this.contentBBox = Rect2_1.default.of(svgObject.getBoundingClientRect());
+    }
+    render(canvas, _visibleRect) {
+        if (!(canvas instanceof SVGRenderer_1.default)) {
+            // Don't draw unrenderable objects if we can't
+            return;
+        }
+        canvas.drawSVGElem(this.svgObject);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersection(lineSegment) !== null);
+    }
+    applyTransformation(_affineTransfm) {
+    }
+    isSelectable() {
+        return false;
+    }
+    createClone() {
+        return new UnknownSVGObject(this.svgObject.cloneNode(true));
+    }
+    description(localization) {
+        return localization.svgObject;
+    }
+    serializeToJSON() {
+        return JSON.stringify({
+            html: this.svgObject.outerHTML,
+        });
+    }
+}
+exports.default = UnknownSVGObject;
+// null: Do not deserialize UnknownSVGObjects.
+AbstractComponent_1.default.registerComponent(componentId, null);

package/dist/cjs/src/components/builders/ArrowBuilder.d.ts

@@ -0,0 +1,19 @@
+import Rect2 from '../../math/Rect2';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const 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/cjs/src/components/builders/ArrowBuilder.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeArrowBuilder = void 0;
+const Path_1 = __importStar(require("../../math/Path"));
+const Stroke_1 = __importDefault(require("../Stroke"));
+const makeArrowBuilder = (initialPoint, viewport) => {
+    return new ArrowBuilder(initialPoint, viewport);
+};
+exports.makeArrowBuilder = makeArrowBuilder;
+class ArrowBuilder {
+    constructor(startPoint, viewport) {
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.endPoint = startPoint;
+    }
+    getLineWidth() {
+        return Math.max(this.endPoint.width, this.startPoint.width);
+    }
+    getBBox() {
+        const preview = this.buildPreview();
+        return preview.getBBox();
+    }
+    buildPreview() {
+        const lineStartPoint = this.startPoint.pos;
+        const endPoint = this.endPoint.pos;
+        const toEnd = endPoint.minus(lineStartPoint).normalized();
+        const arrowLength = endPoint.minus(lineStartPoint).length();
+        // Ensure that the arrow tip is smaller than the arrow.
+        const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
+        const startSize = this.startPoint.width / 2;
+        const endSize = this.endPoint.width / 2;
+        const arrowTipBase = endPoint.minus(toEnd.times(arrowTipSize));
+        // Scaled normal vectors.
+        const lineNormal = toEnd.orthog();
+        const scaledStartNormal = lineNormal.times(startSize);
+        const scaledBaseNormal = lineNormal.times(endSize);
+        const path = new Path_1.default(arrowTipBase.minus(scaledBaseNormal), [
+            // Stem
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: lineStartPoint.minus(scaledStartNormal),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: lineStartPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.plus(scaledBaseNormal),
+            },
+            // Head
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: endPoint.plus(toEnd.times(endSize)),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+            },
+            {
+                kind: Path_1.PathCommandType.LineTo,
+                point: arrowTipBase.minus(scaledBaseNormal),
+            },
+            // Round all points in the arrow (to remove unnecessary decimal places)
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([
+            {
+                startPoint: path.startPoint,
+                commands: path.parts,
+                style: {
+                    fill: this.startPoint.color,
+                }
+            }
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}
+exports.default = ArrowBuilder;

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

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