js-draw 0.23.1 → 0.24.1

package/dist/cjs/components/Stroke.js

@@ -0,0 +1,271 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Path_1 = require("../math/shapes/Path");
+var Rect2_1 = require("../math/shapes/Rect2");
+var RenderingStyle_1 = require("../rendering/RenderingStyle");
+var AbstractComponent_1 = require("./AbstractComponent");
+var 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))));
+ * ```
+ */
+var Stroke = /** @class */ (function (_super) {
+    __extends(Stroke, _super);
+    /**
+     * 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 })
+     * ]);
+     * ```
+     */
+    function Stroke(parts) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, 'stroke') || this;
+        // @internal
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        _this.isRestylableComponent = true;
+        _this.approximateRenderingTime = 0;
+        _this.parts = [];
+        for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+            var section = parts_1[_i];
+            var path = Path_1.default.fromRenderable(section);
+            var pathBBox = _this.bboxForPart(path.bbox, section.style);
+            if (!_this.contentBBox) {
+                _this.contentBBox = pathBBox;
+            }
+            else {
+                _this.contentBBox = _this.contentBBox.union(pathBBox);
+            }
+            _this.parts.push({
+                path: 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);
+        return _this;
+    }
+    Stroke.prototype.getStyle = function () {
+        if (this.parts.length === 0) {
+            return {};
+        }
+        var 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,
+        };
+    };
+    Stroke.prototype.updateStyle = function (style) {
+        return (0, RestylableComponent_1.createRestyleComponentCommand)(this.getStyle(), style, this);
+    };
+    Stroke.prototype.forceStyle = function (style, editor) {
+        if (!style.color) {
+            return;
+        }
+        this.parts = this.parts.map(function (part) {
+            var newStyle = __assign(__assign({}, part.style), { stroke: part.style.stroke ? __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();
+        }
+    };
+    Stroke.prototype.intersects = function (line) {
+        var _a;
+        for (var _i = 0, _b = this.parts; _i < _b.length; _i++) {
+            var part = _b[_i];
+            var strokeWidth = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width;
+            var strokeRadius = strokeWidth ? strokeWidth / 2 : undefined;
+            if (part.path.intersection(line, strokeRadius).length > 0) {
+                return true;
+            }
+        }
+        return false;
+    };
+    Stroke.prototype.render = function (canvas, visibleRect) {
+        var _a, _b;
+        canvas.startObject(this.getBBox());
+        for (var _i = 0, _c = this.parts; _i < _c.length; _i++) {
+            var part = _c[_i];
+            var bbox = this.bboxForPart(part.path.bbox, part.style);
+            if (visibleRect) {
+                if (!bbox.intersects(visibleRect)) {
+                    continue;
+                }
+                var muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 3 || bbox.size.y > visibleRect.size.y * 3;
+                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());
+    };
+    Stroke.prototype.getProportionalRenderingTime = function () {
+        return this.approximateRenderingTime;
+    };
+    // Grows the bounding box for a given stroke part based on that part's style.
+    Stroke.prototype.bboxForPart = function (origBBox, style) {
+        if (!style.stroke) {
+            return origBBox;
+        }
+        return origBBox.grownBy(style.stroke.width / 2);
+    };
+    Stroke.prototype.getExactBBox = function () {
+        var bbox = null;
+        for (var _i = 0, _a = this.parts; _i < _a.length; _i++) {
+            var _b = _a[_i], path = _b.path, style = _b.style;
+            // Paths' default .bbox can be
+            var partBBox = this.bboxForPart(path.getExactBBox(), style);
+            bbox !== null && bbox !== void 0 ? bbox : (bbox = partBBox);
+            bbox = bbox.union(partBBox);
+        }
+        return bbox !== null && bbox !== void 0 ? bbox : Rect2_1.default.empty;
+    };
+    Stroke.prototype.applyTransformation = function (affineTransfm) {
+        var _this = this;
+        this.contentBBox = Rect2_1.default.empty;
+        var isFirstPart = true;
+        // Update each part
+        this.parts = this.parts.map(function (part) {
+            var newPath = part.path.transformedBy(affineTransfm);
+            var newStyle = __assign(__assign({}, part.style), { stroke: part.style.stroke ? __assign({}, part.style.stroke) : undefined });
+            // Approximate the scale factor.
+            if (newStyle.stroke) {
+                var scaleFactor = affineTransfm.getScaleFactor();
+                newStyle.stroke.width *= scaleFactor;
+            }
+            var 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.
+     */
+    Stroke.prototype.getPath = function () {
+        var result = null;
+        for (var _i = 0, _a = this.parts; _i < _a.length; _i++) {
+            var part = _a[_i];
+            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;
+    };
+    Stroke.prototype.description = function (localization) {
+        return localization.stroke;
+    };
+    Stroke.prototype.createClone = function () {
+        return new Stroke(this.parts);
+    };
+    Stroke.prototype.serializeToJSON = function () {
+        return this.parts.map(function (part) {
+            return {
+                style: (0, RenderingStyle_1.styleToJSON)(part.style),
+                path: part.path.serialize(),
+            };
+        });
+    };
+    /** @internal */
+    Stroke.deserializeFromJSON = function (json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json !== 'object' || typeof json.length !== 'number') {
+            throw new Error("".concat(json, " is missing required field, parts, or parts is of the wrong type."));
+        }
+        var pathSpec = json.map(function (part) {
+            var style = (0, RenderingStyle_1.styleFromJSON)(part.style);
+            return Path_1.default.fromString(part.path).toRenderable(style);
+        });
+        return new Stroke(pathSpec);
+    };
+    return Stroke;
+}(AbstractComponent_1.default));
+exports.default = Stroke;
+AbstractComponent_1.default.registerComponent('stroke', Stroke.deserializeFromJSON);

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

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

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

@@ -0,0 +1,79 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/shapes/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';
+export declare enum TextTransformMode {
+    /** Absolutely positioned in both the X and Y dimensions. */
+    ABSOLUTE_XY = 0,
+    /** Relatively positioned in both the X and Y dimensions. */
+    RELATIVE_XY = 1,
+    /**Relatively positioned in the X direction, absolutely positioned in the Y direction. */
+    RELATIVE_X_ABSOLUTE_Y = 2,
+    /**Relatively positioned in the Y direction, absolutely positioned in the X direction. */
+    RELATIVE_Y_ABSOLUTE_X = 3
+}
+type TextElement = TextComponent | string;
+/**
+ * Displays text.
+ */
+export default class TextComponent extends AbstractComponent implements RestyleableComponent {
+    protected readonly textObjects: Array<TextElement>;
+    private transform;
+    private style;
+    private transformMode;
+    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<TextElement>, transform: Mat33, style: TextRenderingStyle, transformMode?: TextTransformMode);
+    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextRenderingStyle): void;
+    private static textMeasuringCtx;
+    private static estimateTextDimens;
+    private static getTextMetrics;
+    private static getTextDimens;
+    private static getFontHeight;
+    private computeUntransformedBBoxOfPart;
+    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(): TextRenderingStyle;
+    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;
+    private static TextCursor;
+}
+export {};