js-draw 0.18.1 → 0.19.0

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

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRestylableComponent = exports.createRestyleComponentCommand = void 0;
+const Color4_1 = __importDefault(require("../Color4"));
+const SerializableCommand_1 = __importDefault(require("../commands/SerializableCommand"));
+const UnresolvedCommand_1 = __importDefault(require("../commands/UnresolvedCommand"));
+const TextRenderingStyle_1 = require("../rendering/TextRenderingStyle");
+const serializeComponentStyle = (style) => {
+    const result = {};
+    if (style.color) {
+        result.color = style.color.toHexString();
+    }
+    if (style.textStyle) {
+        result.textStyle = (0, TextRenderingStyle_1.textStyleToJSON)(style.textStyle);
+    }
+    return result;
+};
+const deserializeComponentStyle = (json) => {
+    const color = json.color ? Color4_1.default.fromHex(json.color) : undefined;
+    const textStyle = json.textStyle ? (0, TextRenderingStyle_1.textStyleFromJSON)(json.textStyle) : undefined;
+    return {
+        color,
+        textStyle,
+    };
+};
+// For internal use by Components implementing `updateStyle`:
+const createRestyleComponentCommand = (initialStyle, newStyle, component) => {
+    return new DefaultRestyleComponentCommand(initialStyle, newStyle, component.getId(), component);
+};
+exports.createRestyleComponentCommand = createRestyleComponentCommand;
+// Returns true if `component` is a `RestylableComponent`.
+const isRestylableComponent = (component) => {
+    const hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
+    if (!hasMethods) {
+        return false;
+    }
+    if (!('isRestylableComponent' in component) || !component['isRestylableComponent']) {
+        return false;
+    }
+    return true;
+};
+exports.isRestylableComponent = isRestylableComponent;
+const defaultRestyleComponentCommandId = 'default-restyle-element';
+class DefaultRestyleComponentCommand extends UnresolvedCommand_1.default {
+    constructor(originalStyle, newStyle, componentID, component) {
+        super(defaultRestyleComponentCommandId, componentID, component);
+        this.originalStyle = originalStyle;
+        this.newStyle = newStyle;
+    }
+    getComponent(editor) {
+        this.resolveComponent(editor.image);
+        const component = this.component;
+        if (!component || !component['forceStyle'] || !component['updateStyle']) {
+            throw new Error('this.component is missing forceStyle and/or updateStyle methods!');
+        }
+        return component;
+    }
+    apply(editor) {
+        this.getComponent(editor).forceStyle(this.newStyle, editor);
+    }
+    unapply(editor) {
+        this.getComponent(editor).forceStyle(this.originalStyle, editor);
+    }
+    description(editor, localizationTable) {
+        return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
+    }
+    serializeToJSON() {
+        return {
+            id: this.componentID,
+            originalStyle: serializeComponentStyle(this.originalStyle),
+            newStyle: serializeComponentStyle(this.newStyle),
+        };
+    }
+}
+(() => {
+    SerializableCommand_1.default.register(defaultRestyleComponentCommandId, (json, _editor) => {
+        const origStyle = deserializeComponentStyle(json.originalStyle);
+        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.`);
+        }
+        return new DefaultRestyleComponentCommand(origStyle, newStyle, id);
+    });
+})();

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

@@ -0,0 +1,21 @@
+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';
+type GlobalAttrsList = Array<[string, string | null]>;
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+    private readonly attrs;
+    protected contentBBox: Rect2;
+    constructor(attrs: GlobalAttrsList);
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    intersects(_lineSegment: LineSegment2): boolean;
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    isSelectable(): boolean;
+    protected createClone(): SVGGlobalAttributesObject;
+    description(localization: ImageComponentLocalization): string;
+    protected serializeToJSON(): string | null;
+    static deserializeFromString(data: string): AbstractComponent;
+}
+export {};

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

@@ -0,0 +1,65 @@
+"use strict";
+//
+// Used by `SVGLoader`s to store unrecognised global attributes
+// (e.g. unrecognised XML namespace declarations).
+// @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 componentKind = 'svg-global-attributes';
+// Stores global SVG attributes (e.g. namespace identifiers.)
+class SVGGlobalAttributesObject extends AbstractComponent_1.default {
+    constructor(attrs) {
+        super(componentKind);
+        this.attrs = attrs;
+        this.contentBBox = Rect2_1.default.empty;
+    }
+    render(canvas, _visibleRect) {
+        if (!(canvas instanceof SVGRenderer_1.default)) {
+            // Don't draw unrenderable objects if we can't
+            return;
+        }
+        for (const [attr, value] of this.attrs) {
+            canvas.setRootSVGAttribute(attr, value);
+        }
+    }
+    intersects(_lineSegment) {
+        return false;
+    }
+    applyTransformation(_affineTransfm) {
+    }
+    isSelectable() {
+        return false;
+    }
+    createClone() {
+        return new SVGGlobalAttributesObject(this.attrs);
+    }
+    description(localization) {
+        return localization.svgObject;
+    }
+    serializeToJSON() {
+        return JSON.stringify(this.attrs);
+    }
+    static deserializeFromString(data) {
+        const json = JSON.parse(data);
+        const attrs = [];
+        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
+        // Don't deserialize all attributes, just those that should be safe.
+        for (const [key, val] of json) {
+            if (key === 'viewBox' || key === 'width' || key === 'height') {
+                if (val && numericAndSpaceContentExp.exec(val)) {
+                    attrs.push([key, val]);
+                }
+            }
+        }
+        return new SVGGlobalAttributesObject(attrs);
+    }
+}
+exports.default = SVGGlobalAttributesObject;
+AbstractComponent_1.default.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

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

@@ -0,0 +1,75 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Path from '../math/Path';
+import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
+import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
+export default class Stroke extends AbstractComponent implements RestyleableComponent {
+    private parts;
+    protected contentBBox: Rect2;
+    readonly isRestylableComponent: true;
+    private approximateRenderingTime;
+    /**
+     * Creates a `Stroke` from the given `parts`. All parts should have the
+     * same color.
+     *
+     * @example
+     * ```ts
+     * // A path that starts at (1,1), moves to the right by (2, 0),
+     * // then moves down and right by (3, 3)
+     * const path = Path.fromString('m1,1 2,0 3,3');
+     *
+     * const stroke = new Stroke([
+     *     // Fill with red
+     *     path.toRenderable({ fill: Color4.red })
+     * ]);
+     * ```
+     */
+    constructor(parts: RenderablePathSpec[]);
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    intersects(line: LineSegment2): boolean;
+    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
+    private bboxForPart;
+    protected applyTransformation(affineTransfm: Mat33): void;
+    /**
+     * @returns the {@link Path.union} of all paths that make up this stroke.
+     */
+    getPath(): Path;
+    description(localization: ImageComponentLocalization): string;
+    protected createClone(): AbstractComponent;
+    protected serializeToJSON(): {
+        style: {
+            fill: string;
+            stroke: {
+                color: string;
+                width: number;
+            } | undefined;
+        };
+        path: string;
+    }[];
+    /** @internal */
+    static deserializeFromJSON(json: any): Stroke;
+}

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

@@ -0,0 +1,225 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Path_1 = __importDefault(require("../math/Path"));
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+const RenderingStyle_1 = require("../rendering/RenderingStyle");
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const RestylableComponent_1 = require("./RestylableComponent");
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
+class Stroke extends AbstractComponent_1.default {
+    /**
+     * Creates a `Stroke` from the given `parts`. All parts should have the
+     * same color.
+     *
+     * @example
+     * ```ts
+     * // A path that starts at (1,1), moves to the right by (2, 0),
+     * // then moves down and right by (3, 3)
+     * const path = Path.fromString('m1,1 2,0 3,3');
+     *
+     * const stroke = new Stroke([
+     *     // Fill with red
+     *     path.toRenderable({ fill: Color4.red })
+     * ]);
+     * ```
+     */
+    constructor(parts) {
+        var _a;
+        super('stroke');
+        // @internal
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.approximateRenderingTime = 0;
+        this.parts = [];
+        for (const section of parts) {
+            const path = Path_1.default.fromRenderable(section);
+            const pathBBox = this.bboxForPart(path.bbox, section.style);
+            if (!this.contentBBox) {
+                this.contentBBox = pathBBox;
+            }
+            else {
+                this.contentBBox = this.contentBBox.union(pathBBox);
+            }
+            this.parts.push({
+                path,
+                // To implement RenderablePathSpec
+                startPoint: path.startPoint,
+                style: section.style,
+                commands: path.parts,
+            });
+            this.approximateRenderingTime += path.parts.length;
+        }
+        (_a = this.contentBBox) !== null && _a !== void 0 ? _a : (this.contentBBox = Rect2_1.default.empty);
+    }
+    getStyle() {
+        if (this.parts.length === 0) {
+            return {};
+        }
+        const firstPart = this.parts[0];
+        if (firstPart.style.stroke === undefined
+            || firstPart.style.stroke.width === 0) {
+            return {
+                color: firstPart.style.fill,
+            };
+        }
+        return {
+            color: firstPart.style.stroke.color,
+        };
+    }
+    updateStyle(style) {
+        return (0, RestylableComponent_1.createRestyleComponentCommand)(this.getStyle(), style, this);
+    }
+    forceStyle(style, editor) {
+        if (!style.color) {
+            return;
+        }
+        this.parts = this.parts.map((part) => {
+            const newStyle = Object.assign(Object.assign({}, part.style), { stroke: part.style.stroke ? Object.assign({}, part.style.stroke) : undefined });
+            // Change the stroke color if a stroked shape. Else,
+            // change the fill.
+            if (newStyle.stroke && newStyle.stroke.width > 0) {
+                newStyle.stroke.color = style.color;
+            }
+            else {
+                newStyle.fill = style.color;
+            }
+            return {
+                path: part.path,
+                startPoint: part.startPoint,
+                commands: part.commands,
+                style: newStyle,
+            };
+        });
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    }
+    intersects(line) {
+        for (const part of this.parts) {
+            if (part.path.intersection(line).length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+    render(canvas, visibleRect) {
+        var _a, _b;
+        canvas.startObject(this.getBBox());
+        for (const part of this.parts) {
+            const bbox = this.bboxForPart(part.path.bbox, part.style);
+            if (visibleRect) {
+                if (!bbox.intersects(visibleRect)) {
+                    continue;
+                }
+                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+                if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, (_b = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0)) {
+                    continue;
+                }
+            }
+            canvas.drawPath(part);
+        }
+        canvas.endObject(this.getLoadSaveData());
+    }
+    getProportionalRenderingTime() {
+        return this.approximateRenderingTime;
+    }
+    // Grows the bounding box for a given stroke part based on that part's style.
+    bboxForPart(origBBox, style) {
+        if (!style.stroke) {
+            return origBBox;
+        }
+        return origBBox.grownBy(style.stroke.width / 2);
+    }
+    applyTransformation(affineTransfm) {
+        this.contentBBox = Rect2_1.default.empty;
+        let isFirstPart = true;
+        // Update each part
+        this.parts = this.parts.map((part) => {
+            const newPath = part.path.transformedBy(affineTransfm);
+            const newStyle = Object.assign(Object.assign({}, part.style), { stroke: part.style.stroke ? Object.assign({}, part.style.stroke) : undefined });
+            // Approximate the scale factor.
+            if (newStyle.stroke) {
+                const scaleFactor = affineTransfm.getScaleFactor();
+                newStyle.stroke.width *= scaleFactor;
+            }
+            const newBBox = this.bboxForPart(newPath.bbox, newStyle);
+            if (isFirstPart) {
+                this.contentBBox = newBBox;
+                isFirstPart = false;
+            }
+            else {
+                this.contentBBox = this.contentBBox.union(newBBox);
+            }
+            return {
+                path: newPath,
+                startPoint: newPath.startPoint,
+                commands: newPath.parts,
+                style: newStyle,
+            };
+        });
+    }
+    /**
+     * @returns the {@link Path.union} of all paths that make up this stroke.
+     */
+    getPath() {
+        let result = null;
+        for (const part of this.parts) {
+            if (result) {
+                result = result.union(part.path);
+            }
+            else {
+                result !== null && result !== void 0 ? result : (result = part.path);
+            }
+        }
+        return result !== null && result !== void 0 ? result : Path_1.default.empty;
+    }
+    description(localization) {
+        return localization.stroke;
+    }
+    createClone() {
+        return new Stroke(this.parts);
+    }
+    serializeToJSON() {
+        return this.parts.map(part => {
+            return {
+                style: (0, RenderingStyle_1.styleToJSON)(part.style),
+                path: part.path.serialize(),
+            };
+        });
+    }
+    /** @internal */
+    static deserializeFromJSON(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json !== 'object' || typeof json.length !== 'number') {
+            throw new Error(`${json} is missing required field, parts, or parts is of the wrong type.`);
+        }
+        const pathSpec = json.map((part) => {
+            const style = (0, RenderingStyle_1.styleFromJSON)(part.style);
+            return Path_1.default.fromString(part.path).toRenderable(style);
+        });
+        return new Stroke(pathSpec);
+    }
+}
+exports.default = Stroke;
+AbstractComponent_1.default.registerComponent('stroke', Stroke.deserializeFromJSON);

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

@@ -0,0 +1,75 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import { TextRenderingStyle } from '../rendering/TextRenderingStyle';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+/**
+ * Displays text.
+ */
+export default class TextComponent extends AbstractComponent implements RestyleableComponent {
+    protected readonly textObjects: Array<string | TextComponent>;
+    private transform;
+    private style;
+    protected contentBBox: Rect2;
+    readonly isRestylableComponent: true;
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
+    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextRenderingStyle);
+    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextRenderingStyle): void;
+    private static textMeasuringCtx;
+    private static estimateTextDimens;
+    private static getTextDimens;
+    private computeBBoxOfPart;
+    private recomputeBBox;
+    private renderInternal;
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
+    intersects(lineSegment: LineSegment2): boolean;
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    getTextStyle(): {
+        renderingStyle: {
+            fill: import("../Color4").default;
+            stroke: {
+                color: import("../Color4").default;
+                width: number;
+            } | undefined;
+        };
+        size: number;
+        fontFamily: string;
+        fontWeight?: string | undefined;
+        fontVariant?: string | undefined;
+    };
+    getBaselinePos(): import("../lib").Vec3;
+    getTransform(): Mat33;
+    protected applyTransformation(affineTransfm: Mat33): void;
+    protected createClone(): AbstractComponent;
+    getText(): string;
+    description(localizationTable: ImageComponentLocalization): string;
+    protected serializeToJSON(): Record<string, any>;
+    static deserializeFromString(json: any): TextComponent;
+    /**
+     * 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: string[], transform: Mat33, style: TextRenderingStyle): AbstractComponent;
+}