js-draw 0.23.0 → 0.24.0

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

@@ -0,0 +1,31 @@
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33, { Mat33Array } from '../math/Mat33';
+import Rect2 from '../math/shapes/Rect2';
+import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+export default class ImageComponent extends AbstractComponent {
+    protected contentBBox: Rect2;
+    private image;
+    constructor(image: RenderableImage);
+    private getImageRect;
+    private recomputeBBox;
+    static fromImage(elem: HTMLImageElement, transform: Mat33): Promise<ImageComponent>;
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
+    intersects(lineSegment: LineSegment2): boolean;
+    protected applyTransformation(affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    getAltText(): string;
+    getURL(): string;
+    getTransformation(): Mat33;
+    protected createClone(): AbstractComponent;
+    protected serializeToJSON(): {
+        src: string;
+        label: string;
+        width: number;
+        height: number;
+        transform: Mat33Array;
+    };
+    static deserializeFromJSON(data: any): ImageComponent;
+}

package/dist/mjs/components/ImageComponent.mjs

@@ -0,0 +1,226 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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  { assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+// Represents a raster image.
+var ImageComponent = /** @class */ (function (_super) {
+    __extends(ImageComponent, _super);
+    function ImageComponent(image) {
+        var _this = this;
+        var _a, _b, _c;
+        _this = _super.call(this, 'image-component') || this;
+        _this.image = __assign(__assign({}, image), { label: (_c = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('alt')) !== null && _b !== void 0 ? _b : image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : undefined });
+        var isHTMLImageElem = function (elem) {
+            return elem.getAttribute('src') !== undefined;
+        };
+        if (isHTMLImageElem(image.image) && !image.image.complete) {
+            image.image.onload = function () { return _this.recomputeBBox(); };
+        }
+        _this.recomputeBBox();
+        return _this;
+    }
+    ImageComponent.prototype.getImageRect = function () {
+        return new Rect2(0, 0, this.image.image.width, this.image.image.height);
+    };
+    ImageComponent.prototype.recomputeBBox = function () {
+        this.contentBBox = this.getImageRect();
+        this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
+    };
+    // Load from an image. Waits for the image to load if incomplete.
+    ImageComponent.fromImage = function (elem, transform) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var width, height, image, url, canvas, ctx;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        if (!!elem.complete) return [3 /*break*/, 2];
+                        return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                elem.onload = resolve;
+                                elem.onerror = reject;
+                                elem.onabort = reject;
+                            })];
+                    case 1:
+                        _d.sent();
+                        _d.label = 2;
+                    case 2:
+                        if (typeof elem.width === 'number' && typeof elem.height === 'number'
+                            && elem.width !== 0 && elem.height !== 0) {
+                            width = elem.width;
+                            height = elem.height;
+                        }
+                        else {
+                            width = elem.clientWidth;
+                            height = elem.clientHeight;
+                        }
+                        url = (_a = elem.src) !== null && _a !== void 0 ? _a : '';
+                        if (!url.startsWith('data:image/')) {
+                            canvas = document.createElement('canvas');
+                            canvas.width = width;
+                            canvas.height = height;
+                            ctx = canvas.getContext('2d');
+                            ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
+                            url = canvas.toDataURL();
+                            image = canvas;
+                        }
+                        else {
+                            image = new Image();
+                            image.src = url;
+                            image.width = width;
+                            image.height = height;
+                        }
+                        image.setAttribute('alt', (_b = elem.getAttribute('alt')) !== null && _b !== void 0 ? _b : '');
+                        image.setAttribute('aria-label', (_c = elem.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : '');
+                        return [2 /*return*/, new ImageComponent({
+                                image: image,
+                                base64Url: url,
+                                transform: transform,
+                            })];
+                }
+            });
+        });
+    };
+    ImageComponent.prototype.render = function (canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
+        canvas.drawImage(this.image);
+        canvas.endObject(this.getLoadSaveData());
+    };
+    ImageComponent.prototype.getProportionalRenderingTime = function () {
+        // Estimate: Equivalent to a stroke with 10 segments.
+        return 10;
+    };
+    ImageComponent.prototype.intersects = function (lineSegment) {
+        var _this = this;
+        var rect = this.getImageRect();
+        var edges = rect.getEdges().map(function (edge) { return edge.transformedBy(_this.image.transform); });
+        for (var _i = 0, edges_1 = edges; _i < edges_1.length; _i++) {
+            var edge = edges_1[_i];
+            if (edge.intersects(lineSegment)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    ImageComponent.prototype.applyTransformation = function (affineTransfm) {
+        this.image.transform = affineTransfm.rightMul(this.image.transform);
+        this.recomputeBBox();
+    };
+    ImageComponent.prototype.description = function (localizationTable) {
+        return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+    };
+    ImageComponent.prototype.getAltText = function () {
+        return this.image.label;
+    };
+    ImageComponent.prototype.getURL = function () {
+        return this.image.base64Url;
+    };
+    ImageComponent.prototype.getTransformation = function () {
+        return this.image.transform;
+    };
+    ImageComponent.prototype.createClone = function () {
+        return new ImageComponent(__assign({}, this.image));
+    };
+    ImageComponent.prototype.serializeToJSON = function () {
+        return {
+            src: this.image.base64Url,
+            label: this.image.label,
+            // Store the width and height for bounding box computations while the image is loading.
+            width: this.image.image.width,
+            height: this.image.image.height,
+            transform: this.image.transform.toArray(),
+        };
+    };
+    ImageComponent.deserializeFromJSON = function (data) {
+        if (!(typeof data.src === 'string')) {
+            throw new Error("".concat(data, " has invalid format! Expected src property."));
+        }
+        assertIsNumberArray(data.transform);
+        assertIsNumber(data.width);
+        assertIsNumber(data.height);
+        var image = new Image();
+        image.src = data.src;
+        image.width = data.width;
+        image.height = data.height;
+        var transform = new (Mat33.bind.apply(Mat33, __spreadArray([void 0], data.transform, false)))();
+        return new ImageComponent({
+            image: image,
+            base64Url: data.src,
+            label: data.label,
+            transform: transform,
+        });
+    };
+    return ImageComponent;
+}(AbstractComponent));
+export default ImageComponent;
+AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

package/dist/mjs/components/RestylableComponent.mjs

@@ -0,0 +1,98 @@
+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  Color4  from '../Color4.mjs';
+import  SerializableCommand  from '../commands/SerializableCommand.mjs';
+import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
+import  { textStyleFromJSON, textStyleToJSON }  from '../rendering/TextRenderingStyle.mjs';
+var serializeComponentStyle = function (style) {
+    var result = {};
+    if (style.color) {
+        result.color = style.color.toHexString();
+    }
+    if (style.textStyle) {
+        result.textStyle = textStyleToJSON(style.textStyle);
+    }
+    return result;
+};
+var deserializeComponentStyle = function (json) {
+    var color = json.color ? Color4.fromHex(json.color) : undefined;
+    var textStyle = json.textStyle ? textStyleFromJSON(json.textStyle) : undefined;
+    return {
+        color: color,
+        textStyle: textStyle,
+    };
+};
+// For internal use by Components implementing `updateStyle`:
+export var createRestyleComponentCommand = function (initialStyle, newStyle, component) {
+    return new DefaultRestyleComponentCommand(initialStyle, newStyle, component.getId(), component);
+};
+// Returns true if `component` is a `RestylableComponent`.
+export var isRestylableComponent = function (component) {
+    var hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
+    if (!hasMethods) {
+        return false;
+    }
+    if (!('isRestylableComponent' in component) || !component['isRestylableComponent']) {
+        return false;
+    }
+    return true;
+};
+var defaultRestyleComponentCommandId = 'default-restyle-element';
+var DefaultRestyleComponentCommand = /** @class */ (function (_super) {
+    __extends(DefaultRestyleComponentCommand, _super);
+    function DefaultRestyleComponentCommand(originalStyle, newStyle, componentID, component) {
+        var _this = _super.call(this, defaultRestyleComponentCommandId, componentID, component) || this;
+        _this.originalStyle = originalStyle;
+        _this.newStyle = newStyle;
+        return _this;
+    }
+    DefaultRestyleComponentCommand.prototype.getComponent = function (editor) {
+        this.resolveComponent(editor.image);
+        var component = this.component;
+        if (!component || !component['forceStyle'] || !component['updateStyle']) {
+            throw new Error('this.component is missing forceStyle and/or updateStyle methods!');
+        }
+        return component;
+    };
+    DefaultRestyleComponentCommand.prototype.apply = function (editor) {
+        this.getComponent(editor).forceStyle(this.newStyle, editor);
+    };
+    DefaultRestyleComponentCommand.prototype.unapply = function (editor) {
+        this.getComponent(editor).forceStyle(this.originalStyle, editor);
+    };
+    DefaultRestyleComponentCommand.prototype.description = function (editor, localizationTable) {
+        return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
+    };
+    DefaultRestyleComponentCommand.prototype.serializeToJSON = function () {
+        return {
+            id: this.componentID,
+            originalStyle: serializeComponentStyle(this.originalStyle),
+            newStyle: serializeComponentStyle(this.newStyle),
+        };
+    };
+    return DefaultRestyleComponentCommand;
+}(UnresolvedSerializableCommand));
+(function () {
+    SerializableCommand.register(defaultRestyleComponentCommandId, function (json, _editor) {
+        var origStyle = deserializeComponentStyle(json.originalStyle);
+        var newStyle = deserializeComponentStyle(json.newStyle);
+        var id = json.id;
+        if (typeof json.id !== 'string') {
+            throw new Error("json.id is of type ".concat((typeof json.id), ", not string."));
+        }
+        return new DefaultRestyleComponentCommand(origStyle, newStyle, id);
+    });
+})();

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

@@ -0,0 +1,21 @@
+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';
+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/mjs/components/SVGGlobalAttributesObject.mjs

@@ -0,0 +1,80 @@
+//
+// Used by `SVGLoader`s to store unrecognised global attributes
+// (e.g. unrecognised XML namespace declarations).
+// @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 componentKind = 'svg-global-attributes';
+// Stores global SVG attributes (e.g. namespace identifiers.)
+var SVGGlobalAttributesObject = /** @class */ (function (_super) {
+    __extends(SVGGlobalAttributesObject, _super);
+    function SVGGlobalAttributesObject(attrs) {
+        var _this = _super.call(this, componentKind) || this;
+        _this.attrs = attrs;
+        _this.contentBBox = Rect2.empty;
+        return _this;
+    }
+    SVGGlobalAttributesObject.prototype.render = function (canvas, _visibleRect) {
+        if (!(canvas instanceof SVGRenderer)) {
+            // Don't draw unrenderable objects if we can't
+            return;
+        }
+        for (var _i = 0, _a = this.attrs; _i < _a.length; _i++) {
+            var _b = _a[_i], attr = _b[0], value = _b[1];
+            canvas.setRootSVGAttribute(attr, value);
+        }
+    };
+    SVGGlobalAttributesObject.prototype.intersects = function (_lineSegment) {
+        return false;
+    };
+    SVGGlobalAttributesObject.prototype.applyTransformation = function (_affineTransfm) {
+    };
+    SVGGlobalAttributesObject.prototype.isSelectable = function () {
+        return false;
+    };
+    SVGGlobalAttributesObject.prototype.createClone = function () {
+        return new SVGGlobalAttributesObject(this.attrs);
+    };
+    SVGGlobalAttributesObject.prototype.description = function (localization) {
+        return localization.svgObject;
+    };
+    SVGGlobalAttributesObject.prototype.serializeToJSON = function () {
+        return JSON.stringify(this.attrs);
+    };
+    SVGGlobalAttributesObject.deserializeFromString = function (data) {
+        var json = JSON.parse(data);
+        var attrs = [];
+        var numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
+        // Don't deserialize all attributes, just those that should be safe.
+        for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
+            var _a = json_1[_i], key = _a[0], val = _a[1];
+            if (key === 'viewBox' || key === 'width' || key === 'height') {
+                if (val && numericAndSpaceContentExp.exec(val)) {
+                    attrs.push([key, val]);
+                }
+            }
+        }
+        return new SVGGlobalAttributesObject(attrs);
+    };
+    return SVGGlobalAttributesObject;
+}(AbstractComponent));
+export default SVGGlobalAttributesObject;
+AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

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

@@ -0,0 +1,76 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Path from '../math/shapes/Path';
+import Rect2 from '../math/shapes/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;
+    getExactBBox(): Rect2;
+    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;
+            };
+        };
+        path: string;
+    }[];
+    /** @internal */
+    static deserializeFromJSON(json: any): Stroke;
+}