js-draw 0.17.4 → 0.18.1

package/dist/src/components/TextComponent.js

@@ -1,252 +0,0 @@
-import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/Rect2';
-import { Vec2 } from '../math/Vec2';
-import { cloneTextStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
-import AbstractComponent from './AbstractComponent';
-import { createRestyleComponentCommand } from './RestylableComponent';
-const componentTypeId = 'text';
-export default class TextComponent extends AbstractComponent {
-    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(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(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.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(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 createRestyleComponentCommand(this.getStyle(), style, this);
-    }
-    forceStyle(style, editor) {
-        if (style.textStyle) {
-            this.style = 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 cloneTextStyle(this.style);
-    }
-    getBaselinePos() {
-        return this.transform.transformVec2(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 = 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 = 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(...transformData);
-        return new TextComponent(textObjects, transform, style);
-    }
-    static fromLines(lines, transform, style) {
-        let lastComponent = null;
-        const components = [];
-        for (const line of lines) {
-            let position = Vec2.zero;
-            if (lastComponent) {
-                const lineMargin = Math.floor(style.size);
-                position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
-            }
-            const component = new TextComponent([line], Mat33.translation(position), style);
-            components.push(component);
-            lastComponent = component;
-        }
-        return new TextComponent(components, transform, style);
-    }
-}
-TextComponent.textMeasuringCtx = null;
-AbstractComponent.registerComponent(componentTypeId, (data) => TextComponent.deserializeFromString(data));

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

@@ -1,18 +0,0 @@
-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/src/components/UnknownSVGObject.js

@@ -1,44 +0,0 @@
-//
-// Stores objects loaded from an SVG that aren't recognised by the editor.
-// @internal
-// @packageDocumentation
-//
-import Rect2 from '../math/Rect2';
-import SVGRenderer from '../rendering/renderers/SVGRenderer';
-import AbstractComponent from './AbstractComponent';
-const componentId = 'unknown-svg-object';
-export default class UnknownSVGObject extends AbstractComponent {
-    constructor(svgObject) {
-        super(componentId);
-        this.svgObject = svgObject;
-        this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
-    }
-    render(canvas, _visibleRect) {
-        if (!(canvas instanceof SVGRenderer)) {
-            // 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,
-        });
-    }
-}
-// null: Do not deserialize UnknownSVGObjects.
-AbstractComponent.registerComponent(componentId, null);

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

@@ -1,19 +0,0 @@
-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/src/components/builders/ArrowBuilder.js

@@ -1,86 +0,0 @@
-import Path, { PathCommandType } from '../../math/Path';
-import Stroke from '../Stroke';
-export const makeArrowBuilder = (initialPoint, viewport) => {
-    return new ArrowBuilder(initialPoint, viewport);
-};
-export default 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(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(point => this.viewport.roundPoint(point));
-        const preview = new Stroke([
-            {
-                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;
-    }
-}

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

@@ -1,33 +0,0 @@
-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;
-}

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -1,165 +0,0 @@
-import { Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/Rect2';
-import { PathCommandType } from '../../math/Path';
-import Stroke from '../Stroke';
-import Viewport from '../../Viewport';
-import { StrokeSmoother } from '../util/StrokeSmoother';
-import Color4 from '../../Color4';
-export const makeFreehandLineBuilder = (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.
-    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
-    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
-    return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
-};
-// Handles stroke smoothing and creates Strokes from user/stylus input.
-export default class FreehandLineBuilder {
-    constructor(startPoint, minFitAllowed, maxFitAllowed, viewport) {
-        this.startPoint = startPoint;
-        this.minFitAllowed = minFitAllowed;
-        this.viewport = viewport;
-        this.isFirstSegment = true;
-        this.parts = [];
-        this.widthAverageNumSamples = 1;
-        this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, (curve) => this.addCurve(curve));
-        this.averageWidth = startPoint.width;
-        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
-    }
-    getBBox() {
-        return this.bbox;
-    }
-    getRenderingStyle() {
-        return {
-            fill: Color4.transparent,
-            stroke: {
-                color: this.startPoint.color,
-                width: this.roundDistance(this.averageWidth),
-            }
-        };
-    }
-    previewCurrentPath() {
-        const path = this.parts.slice();
-        const commands = [...path, ...this.curveToPathCommands(this.curveFitter.preview())];
-        const startPoint = this.startPoint.pos;
-        return {
-            startPoint,
-            commands,
-            style: this.getRenderingStyle(),
-        };
-    }
-    previewFullPath() {
-        const preview = this.previewCurrentPath();
-        if (preview) {
-            return [preview];
-        }
-        return null;
-    }
-    previewStroke() {
-        const pathPreview = this.previewFullPath();
-        if (pathPreview) {
-            return new Stroke(pathPreview);
-        }
-        return null;
-    }
-    preview(renderer) {
-        const paths = this.previewFullPath();
-        if (paths) {
-            const approxBBox = this.viewport.visibleRect;
-            renderer.startObject(approxBBox);
-            for (const path of paths) {
-                renderer.drawPath(path);
-            }
-            renderer.endObject();
-        }
-    }
-    build() {
-        this.curveFitter.finalizeCurrentCurve();
-        return this.previewStroke();
-    }
-    getMinFit() {
-        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
-        if (minFit < 1e-10) {
-            minFit = this.minFitAllowed;
-        }
-        return minFit;
-    }
-    roundPoint(point) {
-        const minFit = this.getMinFit();
-        return Viewport.roundPoint(point, minFit);
-    }
-    roundDistance(dist) {
-        const minFit = this.getMinFit();
-        return Viewport.roundPoint(dist, minFit);
-    }
-    curveToPathCommands(curve) {
-        // Case where no points have been added
-        if (!curve) {
-            // Don't create a circle around the initial point if the stroke has more than one point.
-            if (!this.isFirstSegment) {
-                return [];
-            }
-            // Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
-            const width = Viewport.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
-            const center = this.roundPoint(this.startPoint.pos);
-            // Start on the right, cycle clockwise:
-            //    |
-            //  ----- ←
-            //    |
-            // Draw a circle-ish shape around the start point
-            return [
-                {
-                    kind: PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2.of(width, width)),
-                    // Bottom of the circle
-                    //    |
-                    //  -----
-                    //    |
-                    //    ↑
-                    endPoint: center.plus(Vec2.of(0, width)),
-                },
-                {
-                    kind: PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2.of(-width, width)),
-                    endPoint: center.plus(Vec2.of(-width, 0)),
-                },
-                {
-                    kind: PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2.of(-width, -width)),
-                    endPoint: center.plus(Vec2.of(0, -width)),
-                },
-                {
-                    kind: PathCommandType.QuadraticBezierTo,
-                    controlPoint: center.plus(Vec2.of(width, -width)),
-                    endPoint: center.plus(Vec2.of(width, 0)),
-                }
-            ];
-        }
-        const result = [];
-        if (this.isFirstSegment) {
-            result.push({
-                kind: PathCommandType.MoveTo,
-                point: this.roundPoint(curve.startPoint),
-            });
-        }
-        result.push({
-            kind: PathCommandType.QuadraticBezierTo,
-            controlPoint: this.roundPoint(curve.controlPoint),
-            endPoint: this.roundPoint(curve.endPoint),
-        });
-        return result;
-    }
-    addCurve(curve) {
-        const parts = this.curveToPathCommands(curve);
-        this.parts.push(...parts);
-        if (this.isFirstSegment) {
-            this.isFirstSegment = false;
-        }
-    }
-    addPoint(newPoint) {
-        this.curveFitter.addPoint(newPoint);
-        this.widthAverageNumSamples++;
-        this.averageWidth =
-            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
-                + newPoint.width / this.widthAverageNumSamples;
-    }
-}

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

@@ -1,18 +0,0 @@
-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 makeLineBuilder: ComponentBuilderFactory;
-export default class LineBuilder implements ComponentBuilder {
-    private readonly startPoint;
-    private readonly viewport;
-    private endPoint;
-    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
-    getBBox(): Rect2;
-    private buildPreview;
-    build(): AbstractComponent;
-    preview(renderer: AbstractRenderer): void;
-    addPoint(point: StrokeDataPoint): void;
-}