first commit

node_modules/konva/lib/shapes/Arc.d.ts

@@ -0,0 +1,26 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet } from '../types.js';
+import { Context } from '../Context.js';
+export interface ArcConfig extends ShapeConfig {
+    angle: number;
+    innerRadius: number;
+    outerRadius: number;
+    clockwise?: boolean;
+}
+export declare class Arc extends Shape<ArcConfig> {
+    _sceneFunc(context: Context): void;
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    innerRadius: GetSet<number, this>;
+    outerRadius: GetSet<number, this>;
+    angle: GetSet<number, this>;
+    clockwise: GetSet<boolean, this>;
+}

node_modules/konva/lib/shapes/Arc.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Arc = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Global_1 = require("../Global");
+const Validators_1 = require("../Validators");
+const Global_2 = require("../Global");
+class Arc extends Shape_1.Shape {
+    _sceneFunc(context) {
+        const angle = Global_1.Konva.getAngle(this.angle()), clockwise = this.clockwise();
+        context.beginPath();
+        context.arc(0, 0, this.outerRadius(), 0, angle, clockwise);
+        context.arc(0, 0, this.innerRadius(), angle, 0, !clockwise);
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getWidth() {
+        return this.outerRadius() * 2;
+    }
+    getHeight() {
+        return this.outerRadius() * 2;
+    }
+    setWidth(width) {
+        this.outerRadius(width / 2);
+    }
+    setHeight(height) {
+        this.outerRadius(height / 2);
+    }
+    getSelfRect() {
+        const innerRadius = this.innerRadius();
+        const outerRadius = this.outerRadius();
+        const clockwise = this.clockwise();
+        const angle = Global_1.Konva.getAngle(clockwise ? 360 - this.angle() : this.angle());
+        const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
+        const boundRightRatio = 1;
+        const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), (3 * Math.PI) / 2));
+        const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
+        const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
+        const boundRight = boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius);
+        const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
+        const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
+        return {
+            x: boundLeft,
+            y: clockwise ? -1 * boundBottom : boundTop,
+            width: boundRight - boundLeft,
+            height: boundBottom - boundTop,
+        };
+    }
+}
+exports.Arc = Arc;
+Arc.prototype._centroid = true;
+Arc.prototype.className = 'Arc';
+Arc.prototype._attrsAffectingSize = [
+    'innerRadius',
+    'outerRadius',
+    'angle',
+    'clockwise',
+];
+(0, Global_2._registerNode)(Arc);
+Factory_1.Factory.addGetterSetter(Arc, 'innerRadius', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Arc, 'outerRadius', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Arc, 'angle', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Arc, 'clockwise', false, (0, Validators_1.getBooleanValidator)());

node_modules/konva/lib/shapes/Arrow.d.ts

@@ -0,0 +1,26 @@
+import { Line, LineConfig } from './Line.js';
+import { GetSet } from '../types.js';
+import { Context } from '../Context.js';
+export interface ArrowConfig extends LineConfig {
+    points: number[];
+    tension?: number;
+    closed?: boolean;
+    pointerLength?: number;
+    pointerWidth?: number;
+    pointerAtBeginning?: boolean;
+    pointerAtEnding?: boolean;
+}
+export declare class Arrow extends Line<ArrowConfig> {
+    _sceneFunc(ctx: Context): void;
+    __fillStroke(ctx: Context): void;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    pointerLength: GetSet<number, this>;
+    pointerWidth: GetSet<number, this>;
+    pointerAtEnding: GetSet<boolean, this>;
+    pointerAtBeginning: GetSet<boolean, this>;
+}

node_modules/konva/lib/shapes/Arrow.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Arrow = void 0;
+const Factory_1 = require("../Factory");
+const Line_1 = require("./Line");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+const Path_1 = require("./Path");
+class Arrow extends Line_1.Line {
+    _sceneFunc(ctx) {
+        super._sceneFunc(ctx);
+        const PI2 = Math.PI * 2;
+        const points = this.points();
+        let tp = points;
+        const fromTension = this.tension() !== 0 && points.length > 4;
+        if (fromTension) {
+            tp = this.getTensionPoints();
+        }
+        const length = this.pointerLength();
+        const n = points.length;
+        let dx, dy;
+        if (fromTension) {
+            const lp = [
+                tp[tp.length - 4],
+                tp[tp.length - 3],
+                tp[tp.length - 2],
+                tp[tp.length - 1],
+                points[n - 2],
+                points[n - 1],
+            ];
+            const lastLength = Path_1.Path.calcLength(tp[tp.length - 4], tp[tp.length - 3], 'C', lp);
+            const previous = Path_1.Path.getPointOnQuadraticBezier(Math.min(1, 1 - length / lastLength), lp[0], lp[1], lp[2], lp[3], lp[4], lp[5]);
+            dx = points[n - 2] - previous.x;
+            dy = points[n - 1] - previous.y;
+        }
+        else {
+            dx = points[n - 2] - points[n - 4];
+            dy = points[n - 1] - points[n - 3];
+        }
+        const radians = (Math.atan2(dy, dx) + PI2) % PI2;
+        const width = this.pointerWidth();
+        if (this.pointerAtEnding()) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.translate(points[n - 2], points[n - 1]);
+            ctx.rotate(radians);
+            ctx.moveTo(0, 0);
+            ctx.lineTo(-length, width / 2);
+            ctx.lineTo(-length, -width / 2);
+            ctx.closePath();
+            ctx.restore();
+            this.__fillStroke(ctx);
+        }
+        if (this.pointerAtBeginning()) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.translate(points[0], points[1]);
+            if (fromTension) {
+                dx = (tp[0] + tp[2]) / 2 - points[0];
+                dy = (tp[1] + tp[3]) / 2 - points[1];
+            }
+            else {
+                dx = points[2] - points[0];
+                dy = points[3] - points[1];
+            }
+            ctx.rotate((Math.atan2(-dy, -dx) + PI2) % PI2);
+            ctx.moveTo(0, 0);
+            ctx.lineTo(-length, width / 2);
+            ctx.lineTo(-length, -width / 2);
+            ctx.closePath();
+            ctx.restore();
+            this.__fillStroke(ctx);
+        }
+    }
+    __fillStroke(ctx) {
+        const isDashEnabled = this.dashEnabled();
+        if (isDashEnabled) {
+            this.attrs.dashEnabled = false;
+            ctx.setLineDash([]);
+        }
+        ctx.fillStrokeShape(this);
+        if (isDashEnabled) {
+            this.attrs.dashEnabled = true;
+        }
+    }
+    getSelfRect() {
+        const lineRect = super.getSelfRect();
+        const offset = this.pointerWidth() / 2;
+        return {
+            x: lineRect.x,
+            y: lineRect.y - offset,
+            width: lineRect.width,
+            height: lineRect.height + offset * 2,
+        };
+    }
+}
+exports.Arrow = Arrow;
+Arrow.prototype.className = 'Arrow';
+(0, Global_1._registerNode)(Arrow);
+Factory_1.Factory.addGetterSetter(Arrow, 'pointerLength', 10, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Arrow, 'pointerWidth', 10, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false);
+Factory_1.Factory.addGetterSetter(Arrow, 'pointerAtEnding', true);

node_modules/konva/lib/shapes/Circle.d.ts

@@ -0,0 +1,14 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet } from '../types.js';
+import { Context } from '../Context.js';
+export interface CircleConfig extends ShapeConfig {
+    radius?: number;
+}
+export declare class Circle extends Shape<CircleConfig> {
+    _sceneFunc(context: Context): void;
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    radius: GetSet<number, this>;
+}

node_modules/konva/lib/shapes/Circle.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Circle = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+class Circle extends Shape_1.Shape {
+    _sceneFunc(context) {
+        context.beginPath();
+        context.arc(0, 0, this.attrs.radius || 0, 0, Math.PI * 2, false);
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getWidth() {
+        return this.radius() * 2;
+    }
+    getHeight() {
+        return this.radius() * 2;
+    }
+    setWidth(width) {
+        if (this.radius() !== width / 2) {
+            this.radius(width / 2);
+        }
+    }
+    setHeight(height) {
+        if (this.radius() !== height / 2) {
+            this.radius(height / 2);
+        }
+    }
+}
+exports.Circle = Circle;
+Circle.prototype._centroid = true;
+Circle.prototype.className = 'Circle';
+Circle.prototype._attrsAffectingSize = ['radius'];
+(0, Global_1._registerNode)(Circle);
+Factory_1.Factory.addGetterSetter(Circle, 'radius', 0, (0, Validators_1.getNumberValidator)());

node_modules/konva/lib/shapes/Ellipse.d.ts

@@ -0,0 +1,17 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Context } from '../Context.js';
+import { GetSet, Vector2d } from '../types.js';
+export interface EllipseConfig extends ShapeConfig {
+    radiusX: number;
+    radiusY: number;
+}
+export declare class Ellipse extends Shape<EllipseConfig> {
+    _sceneFunc(context: Context): void;
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    radius: GetSet<Vector2d, this>;
+    radiusX: GetSet<number, this>;
+    radiusY: GetSet<number, this>;
+}

node_modules/konva/lib/shapes/Ellipse.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ellipse = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+class Ellipse extends Shape_1.Shape {
+    _sceneFunc(context) {
+        const rx = this.radiusX(), ry = this.radiusY();
+        context.beginPath();
+        context.save();
+        if (rx !== ry) {
+            context.scale(1, ry / rx);
+        }
+        context.arc(0, 0, rx, 0, Math.PI * 2, false);
+        context.restore();
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getWidth() {
+        return this.radiusX() * 2;
+    }
+    getHeight() {
+        return this.radiusY() * 2;
+    }
+    setWidth(width) {
+        this.radiusX(width / 2);
+    }
+    setHeight(height) {
+        this.radiusY(height / 2);
+    }
+}
+exports.Ellipse = Ellipse;
+Ellipse.prototype.className = 'Ellipse';
+Ellipse.prototype._centroid = true;
+Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
+(0, Global_1._registerNode)(Ellipse);
+Factory_1.Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);
+Factory_1.Factory.addGetterSetter(Ellipse, 'radiusX', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Ellipse, 'radiusY', 0, (0, Validators_1.getNumberValidator)());

node_modules/konva/lib/shapes/Image.d.ts

@@ -0,0 +1,28 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet, IRect } from '../types.js';
+import { Context } from '../Context.js';
+export interface ImageConfig extends ShapeConfig {
+    image: CanvasImageSource | undefined;
+    crop?: IRect;
+    cornerRadius?: number | number[];
+}
+export declare class Image extends Shape<ImageConfig> {
+    private _loadListener;
+    constructor(attrs: ImageConfig);
+    _setImageLoad(): void;
+    _removeImageLoad(image: any): void;
+    destroy(): this;
+    _useBufferCanvas(): boolean;
+    _sceneFunc(context: Context): void;
+    _hitFunc(context: Context): void;
+    getWidth(): any;
+    getHeight(): any;
+    static fromURL(url: string, callback: (img: Image) => void, onError?: OnErrorEventHandler): void;
+    image: GetSet<CanvasImageSource | undefined, this>;
+    crop: GetSet<IRect, this>;
+    cropX: GetSet<number, this>;
+    cropY: GetSet<number, this>;
+    cropWidth: GetSet<number, this>;
+    cropHeight: GetSet<number, this>;
+    cornerRadius: GetSet<number | number[], this>;
+}

node_modules/konva/lib/shapes/Image.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const Util_1 = require("../Util");
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Global_1 = require("../Global");
+const Validators_1 = require("../Validators");
+class Image extends Shape_1.Shape {
+    constructor(attrs) {
+        super(attrs);
+        this._loadListener = () => {
+            this._requestDraw();
+        };
+        this.on('imageChange.konva', (props) => {
+            this._removeImageLoad(props.oldVal);
+            this._setImageLoad();
+        });
+        this._setImageLoad();
+    }
+    _setImageLoad() {
+        const image = this.image();
+        if (image && image.complete) {
+            return;
+        }
+        if (image && image.readyState === 4) {
+            return;
+        }
+        if (image && image['addEventListener']) {
+            image['addEventListener']('load', this._loadListener);
+        }
+    }
+    _removeImageLoad(image) {
+        if (image && image['removeEventListener']) {
+            image['removeEventListener']('load', this._loadListener);
+        }
+    }
+    destroy() {
+        this._removeImageLoad(this.image());
+        super.destroy();
+        return this;
+    }
+    _useBufferCanvas() {
+        const hasCornerRadius = !!this.cornerRadius();
+        const hasShadow = this.hasShadow();
+        if (hasCornerRadius && hasShadow) {
+            return true;
+        }
+        return super._useBufferCanvas(true);
+    }
+    _sceneFunc(context) {
+        const width = this.getWidth();
+        const height = this.getHeight();
+        const cornerRadius = this.cornerRadius();
+        const image = this.attrs.image;
+        let params;
+        if (image) {
+            const cropWidth = this.attrs.cropWidth;
+            const cropHeight = this.attrs.cropHeight;
+            if (cropWidth && cropHeight) {
+                params = [
+                    image,
+                    this.cropX(),
+                    this.cropY(),
+                    cropWidth,
+                    cropHeight,
+                    0,
+                    0,
+                    width,
+                    height,
+                ];
+            }
+            else {
+                params = [image, 0, 0, width, height];
+            }
+        }
+        if (this.hasFill() || this.hasStroke() || cornerRadius) {
+            context.beginPath();
+            cornerRadius
+                ? Util_1.Util.drawRoundedRectPath(context, width, height, cornerRadius)
+                : context.rect(0, 0, width, height);
+            context.closePath();
+            context.fillStrokeShape(this);
+        }
+        if (image) {
+            if (cornerRadius) {
+                context.clip();
+            }
+            context.drawImage.apply(context, params);
+        }
+    }
+    _hitFunc(context) {
+        const width = this.width(), height = this.height(), cornerRadius = this.cornerRadius();
+        context.beginPath();
+        if (!cornerRadius) {
+            context.rect(0, 0, width, height);
+        }
+        else {
+            Util_1.Util.drawRoundedRectPath(context, width, height, cornerRadius);
+        }
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getWidth() {
+        var _a, _b;
+        return (_a = this.attrs.width) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.width;
+    }
+    getHeight() {
+        var _a, _b;
+        return (_a = this.attrs.height) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.height;
+    }
+    static fromURL(url, callback, onError = null) {
+        const img = Util_1.Util.createImageElement();
+        img.onload = function () {
+            const image = new Image({
+                image: img,
+            });
+            callback(image);
+        };
+        img.onerror = onError;
+        img.crossOrigin = 'Anonymous';
+        img.src = url;
+    }
+}
+exports.Image = Image;
+Image.prototype.className = 'Image';
+(0, Global_1._registerNode)(Image);
+Factory_1.Factory.addGetterSetter(Image, 'cornerRadius', 0, (0, Validators_1.getNumberOrArrayOfNumbersValidator)(4));
+Factory_1.Factory.addGetterSetter(Image, 'image');
+Factory_1.Factory.addComponentsGetterSetter(Image, 'crop', ['x', 'y', 'width', 'height']);
+Factory_1.Factory.addGetterSetter(Image, 'cropX', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Image, 'cropY', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Image, 'cropWidth', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Image, 'cropHeight', 0, (0, Validators_1.getNumberValidator)());

node_modules/konva/lib/shapes/Label.d.ts

@@ -0,0 +1,38 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Group } from '../Group.js';
+import { Context } from '../Context.js';
+import { ContainerConfig } from '../Container.js';
+import { GetSet } from '../types.js';
+import { Text } from './Text.js';
+export interface LabelConfig extends ContainerConfig {
+}
+declare const NONE = "none";
+export declare class Label extends Group {
+    constructor(config?: LabelConfig);
+    getText(): Text;
+    getTag(): Tag;
+    _addListeners(text: any): void;
+    getWidth(): number;
+    getHeight(): number;
+    _sync(): void;
+}
+export interface TagConfig extends ShapeConfig {
+    pointerDirection?: string;
+    pointerWidth?: number;
+    pointerHeight?: number;
+    cornerRadius?: number | Array<number>;
+}
+export declare class Tag extends Shape<TagConfig> {
+    _sceneFunc(context: Context): void;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    pointerDirection: GetSet<'left' | 'up' | 'right' | 'down' | typeof NONE, this>;
+    pointerWidth: GetSet<number, this>;
+    pointerHeight: GetSet<number, this>;
+    cornerRadius: GetSet<number, this>;
+}
+export {};

node_modules/konva/lib/shapes/Label.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = exports.Label = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Group_1 = require("../Group");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+const ATTR_CHANGE_LIST = [
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'padding',
+    'lineHeight',
+    'text',
+    'width',
+    'height',
+    'pointerDirection',
+    'pointerWidth',
+    'pointerHeight',
+], CHANGE_KONVA = 'Change.konva', NONE = 'none', UP = 'up', RIGHT = 'right', DOWN = 'down', LEFT = 'left', attrChangeListLen = ATTR_CHANGE_LIST.length;
+class Label extends Group_1.Group {
+    constructor(config) {
+        super(config);
+        this.on('add.konva', function (evt) {
+            this._addListeners(evt.child);
+            this._sync();
+        });
+    }
+    getText() {
+        return this.find('Text')[0];
+    }
+    getTag() {
+        return this.find('Tag')[0];
+    }
+    _addListeners(text) {
+        let that = this, n;
+        const func = function () {
+            that._sync();
+        };
+        for (n = 0; n < attrChangeListLen; n++) {
+            text.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, func);
+        }
+    }
+    getWidth() {
+        return this.getText().width();
+    }
+    getHeight() {
+        return this.getText().height();
+    }
+    _sync() {
+        let text = this.getText(), tag = this.getTag(), width, height, pointerDirection, pointerWidth, x, y, pointerHeight;
+        if (text && tag) {
+            width = text.width();
+            height = text.height();
+            pointerDirection = tag.pointerDirection();
+            pointerWidth = tag.pointerWidth();
+            pointerHeight = tag.pointerHeight();
+            x = 0;
+            y = 0;
+            switch (pointerDirection) {
+                case UP:
+                    x = width / 2;
+                    y = -1 * pointerHeight;
+                    break;
+                case RIGHT:
+                    x = width + pointerWidth;
+                    y = height / 2;
+                    break;
+                case DOWN:
+                    x = width / 2;
+                    y = height + pointerHeight;
+                    break;
+                case LEFT:
+                    x = -1 * pointerWidth;
+                    y = height / 2;
+                    break;
+            }
+            tag.setAttrs({
+                x: -1 * x,
+                y: -1 * y,
+                width: width,
+                height: height,
+            });
+            text.setAttrs({
+                x: -1 * x,
+                y: -1 * y,
+            });
+        }
+    }
+}
+exports.Label = Label;
+Label.prototype.className = 'Label';
+(0, Global_1._registerNode)(Label);
+class Tag extends Shape_1.Shape {
+    _sceneFunc(context) {
+        const width = this.width(), height = this.height(), pointerDirection = this.pointerDirection(), pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), cornerRadius = this.cornerRadius();
+        let topLeft = 0;
+        let topRight = 0;
+        let bottomLeft = 0;
+        let bottomRight = 0;
+        if (typeof cornerRadius === 'number') {
+            topLeft =
+                topRight =
+                    bottomLeft =
+                        bottomRight =
+                            Math.min(cornerRadius, width / 2, height / 2);
+        }
+        else {
+            topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
+            topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2);
+            bottomRight = Math.min(cornerRadius[2] || 0, width / 2, height / 2);
+            bottomLeft = Math.min(cornerRadius[3] || 0, width / 2, height / 2);
+        }
+        context.beginPath();
+        context.moveTo(topLeft, 0);
+        if (pointerDirection === UP) {
+            context.lineTo((width - pointerWidth) / 2, 0);
+            context.lineTo(width / 2, -1 * pointerHeight);
+            context.lineTo((width + pointerWidth) / 2, 0);
+        }
+        context.lineTo(width - topRight, 0);
+        context.arc(width - topRight, topRight, topRight, (Math.PI * 3) / 2, 0, false);
+        if (pointerDirection === RIGHT) {
+            context.lineTo(width, (height - pointerHeight) / 2);
+            context.lineTo(width + pointerWidth, height / 2);
+            context.lineTo(width, (height + pointerHeight) / 2);
+        }
+        context.lineTo(width, height - bottomRight);
+        context.arc(width - bottomRight, height - bottomRight, bottomRight, 0, Math.PI / 2, false);
+        if (pointerDirection === DOWN) {
+            context.lineTo((width + pointerWidth) / 2, height);
+            context.lineTo(width / 2, height + pointerHeight);
+            context.lineTo((width - pointerWidth) / 2, height);
+        }
+        context.lineTo(bottomLeft, height);
+        context.arc(bottomLeft, height - bottomLeft, bottomLeft, Math.PI / 2, Math.PI, false);
+        if (pointerDirection === LEFT) {
+            context.lineTo(0, (height + pointerHeight) / 2);
+            context.lineTo(-1 * pointerWidth, height / 2);
+            context.lineTo(0, (height - pointerHeight) / 2);
+        }
+        context.lineTo(0, topLeft);
+        context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getSelfRect() {
+        let x = 0, y = 0, pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), direction = this.pointerDirection(), width = this.width(), height = this.height();
+        if (direction === UP) {
+            y -= pointerHeight;
+            height += pointerHeight;
+        }
+        else if (direction === DOWN) {
+            height += pointerHeight;
+        }
+        else if (direction === LEFT) {
+            x -= pointerWidth * 1.5;
+            width += pointerWidth;
+        }
+        else if (direction === RIGHT) {
+            width += pointerWidth * 1.5;
+        }
+        return {
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+        };
+    }
+}
+exports.Tag = Tag;
+Tag.prototype.className = 'Tag';
+(0, Global_1._registerNode)(Tag);
+Factory_1.Factory.addGetterSetter(Tag, 'pointerDirection', NONE);
+Factory_1.Factory.addGetterSetter(Tag, 'pointerWidth', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Tag, 'pointerHeight', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Tag, 'cornerRadius', 0, (0, Validators_1.getNumberOrArrayOfNumbersValidator)(4));

node_modules/konva/lib/shapes/Line.d.ts

@@ -0,0 +1,28 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Context } from '../Context.js';
+import { GetSet } from '../types.js';
+export interface LineConfig extends ShapeConfig {
+    points?: number[] | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array;
+    tension?: number;
+    closed?: boolean;
+    bezier?: boolean;
+}
+export declare class Line<Config extends LineConfig = LineConfig> extends Shape<Config> {
+    constructor(config?: Config);
+    _sceneFunc(context: Context): void;
+    getTensionPoints(): any;
+    _getTensionPoints(): number[];
+    _getTensionPointsClosed(): number[];
+    getWidth(): number;
+    getHeight(): number;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    closed: GetSet<boolean, this>;
+    bezier: GetSet<boolean, this>;
+    tension: GetSet<number, this>;
+    points: GetSet<number[], this>;
+}

node_modules/konva/lib/shapes/Line.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Line = void 0;
+const Factory_1 = require("../Factory");
+const Global_1 = require("../Global");
+const Shape_1 = require("../Shape");
+const Validators_1 = require("../Validators");
+function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
+    const d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)), d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)), fa = (t * d01) / (d01 + d12), fb = (t * d12) / (d01 + d12), p1x = x1 - fa * (x2 - x0), p1y = y1 - fa * (y2 - y0), p2x = x1 + fb * (x2 - x0), p2y = y1 + fb * (y2 - y0);
+    return [p1x, p1y, p2x, p2y];
+}
+function expandPoints(p, tension) {
+    const len = p.length, allPoints = [];
+    for (let n = 2; n < len - 2; n += 2) {
+        const cp = getControlPoints(p[n - 2], p[n - 1], p[n], p[n + 1], p[n + 2], p[n + 3], tension);
+        if (isNaN(cp[0])) {
+            continue;
+        }
+        allPoints.push(cp[0]);
+        allPoints.push(cp[1]);
+        allPoints.push(p[n]);
+        allPoints.push(p[n + 1]);
+        allPoints.push(cp[2]);
+        allPoints.push(cp[3]);
+    }
+    return allPoints;
+}
+class Line extends Shape_1.Shape {
+    constructor(config) {
+        super(config);
+        this.on('pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva', function () {
+            this._clearCache('tensionPoints');
+        });
+    }
+    _sceneFunc(context) {
+        const points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier();
+        if (!length) {
+            return;
+        }
+        let n = 0;
+        context.beginPath();
+        context.moveTo(points[0], points[1]);
+        if (tension !== 0 && length > 4) {
+            const tp = this.getTensionPoints();
+            const len = tp.length;
+            n = closed ? 0 : 4;
+            if (!closed) {
+                context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
+            }
+            while (n < len - 2) {
+                context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
+            }
+            if (!closed) {
+                context.quadraticCurveTo(tp[len - 2], tp[len - 1], points[length - 2], points[length - 1]);
+            }
+        }
+        else if (bezier) {
+            n = 2;
+            while (n < length) {
+                context.bezierCurveTo(points[n++], points[n++], points[n++], points[n++], points[n++], points[n++]);
+            }
+        }
+        else {
+            for (n = 2; n < length; n += 2) {
+                context.lineTo(points[n], points[n + 1]);
+            }
+        }
+        if (closed) {
+            context.closePath();
+            context.fillStrokeShape(this);
+        }
+        else {
+            context.strokeShape(this);
+        }
+    }
+    getTensionPoints() {
+        return this._getCache('tensionPoints', this._getTensionPoints);
+    }
+    _getTensionPoints() {
+        if (this.closed()) {
+            return this._getTensionPointsClosed();
+        }
+        else {
+            return expandPoints(this.points(), this.tension());
+        }
+    }
+    _getTensionPointsClosed() {
+        const p = this.points(), len = p.length, tension = this.tension(), firstControlPoints = getControlPoints(p[len - 2], p[len - 1], p[0], p[1], p[2], p[3], tension), lastControlPoints = getControlPoints(p[len - 4], p[len - 3], p[len - 2], p[len - 1], p[0], p[1], tension), middle = expandPoints(p, tension), tp = [firstControlPoints[2], firstControlPoints[3]]
+            .concat(middle)
+            .concat([
+            lastControlPoints[0],
+            lastControlPoints[1],
+            p[len - 2],
+            p[len - 1],
+            lastControlPoints[2],
+            lastControlPoints[3],
+            firstControlPoints[0],
+            firstControlPoints[1],
+            p[0],
+            p[1],
+        ]);
+        return tp;
+    }
+    getWidth() {
+        return this.getSelfRect().width;
+    }
+    getHeight() {
+        return this.getSelfRect().height;
+    }
+    getSelfRect() {
+        let points = this.points();
+        if (points.length < 4) {
+            return {
+                x: points[0] || 0,
+                y: points[1] || 0,
+                width: 0,
+                height: 0,
+            };
+        }
+        if (this.tension() !== 0) {
+            points = [
+                points[0],
+                points[1],
+                ...this._getTensionPoints(),
+                points[points.length - 2],
+                points[points.length - 1],
+            ];
+        }
+        else {
+            points = this.points();
+        }
+        let minX = points[0];
+        let maxX = points[0];
+        let minY = points[1];
+        let maxY = points[1];
+        let x, y;
+        for (let i = 0; i < points.length / 2; i++) {
+            x = points[i * 2];
+            y = points[i * 2 + 1];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+        }
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+}
+exports.Line = Line;
+Line.prototype.className = 'Line';
+Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
+(0, Global_1._registerNode)(Line);
+Factory_1.Factory.addGetterSetter(Line, 'closed', false);
+Factory_1.Factory.addGetterSetter(Line, 'bezier', false);
+Factory_1.Factory.addGetterSetter(Line, 'tension', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Line, 'points', [], (0, Validators_1.getNumberArrayValidator)());

node_modules/konva/lib/shapes/Path.d.ts

@@ -0,0 +1,49 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet, PathSegment } from '../types.js';
+export interface PathConfig extends ShapeConfig {
+    data?: string;
+}
+export declare class Path extends Shape<PathConfig> {
+    dataArray: PathSegment[];
+    pathLength: number;
+    constructor(config?: PathConfig);
+    _readDataAttribute(): void;
+    _sceneFunc(context: any): void;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    getLength(): number;
+    getPointAtLength(length: number): {
+        x: number;
+        y: number;
+    } | null;
+    data: GetSet<string, this>;
+    static getLineLength(x1: any, y1: any, x2: any, y2: any): number;
+    static getPathLength(dataArray: PathSegment[]): number;
+    static getPointAtLengthOfDataArray(length: number, dataArray: PathSegment[]): {
+        x: number;
+        y: number;
+    } | null;
+    static getPointOnLine(dist: number, P1x: number, P1y: number, P2x: number, P2y: number, fromX?: number, fromY?: number): {
+        x: number;
+        y: number;
+    };
+    static getPointOnCubicBezier(pct: number, P1x: number, P1y: number, P2x: number, P2y: number, P3x: number, P3y: number, P4x: number, P4y: number): {
+        x: number;
+        y: number;
+    };
+    static getPointOnQuadraticBezier(pct: any, P1x: any, P1y: any, P2x: any, P2y: any, P3x: any, P3y: any): {
+        x: number;
+        y: number;
+    };
+    static getPointOnEllipticalArc(cx: number, cy: number, rx: number, ry: number, theta: number, psi: number): {
+        x: number;
+        y: number;
+    };
+    static parsePathData(data: any): PathSegment[];
+    static calcLength(x: any, y: any, cmd: any, points: any): any;
+    static convertEndpointToCenterParameterization(x1: number, y1: number, x2: number, y2: number, fa: number, fs: number, rx: number, ry: number, psiDeg: number): number[];
+}

node_modules/konva/lib/shapes/Path.js

@@ -0,0 +1,610 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Path = void 0;
+const Factory_1 = require("../Factory");
+const Global_1 = require("../Global");
+const Shape_1 = require("../Shape");
+const BezierFunctions_1 = require("../BezierFunctions");
+class Path extends Shape_1.Shape {
+    constructor(config) {
+        super(config);
+        this.dataArray = [];
+        this.pathLength = 0;
+        this._readDataAttribute();
+        this.on('dataChange.konva', function () {
+            this._readDataAttribute();
+        });
+    }
+    _readDataAttribute() {
+        this.dataArray = Path.parsePathData(this.data());
+        this.pathLength = Path.getPathLength(this.dataArray);
+    }
+    _sceneFunc(context) {
+        const ca = this.dataArray;
+        context.beginPath();
+        let isClosed = false;
+        for (let n = 0; n < ca.length; n++) {
+            const c = ca[n].command;
+            const p = ca[n].points;
+            switch (c) {
+                case 'L':
+                    context.lineTo(p[0], p[1]);
+                    break;
+                case 'M':
+                    context.moveTo(p[0], p[1]);
+                    break;
+                case 'C':
+                    context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);
+                    break;
+                case 'Q':
+                    context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
+                    break;
+                case 'A':
+                    const cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7];
+                    const r = rx > ry ? rx : ry;
+                    const scaleX = rx > ry ? 1 : rx / ry;
+                    const scaleY = rx > ry ? ry / rx : 1;
+                    context.translate(cx, cy);
+                    context.rotate(psi);
+                    context.scale(scaleX, scaleY);
+                    context.arc(0, 0, r, theta, theta + dTheta, 1 - fs);
+                    context.scale(1 / scaleX, 1 / scaleY);
+                    context.rotate(-psi);
+                    context.translate(-cx, -cy);
+                    break;
+                case 'z':
+                    isClosed = true;
+                    context.closePath();
+                    break;
+            }
+        }
+        if (!isClosed && !this.hasFill()) {
+            context.strokeShape(this);
+        }
+        else {
+            context.fillStrokeShape(this);
+        }
+    }
+    getSelfRect() {
+        let points = [];
+        this.dataArray.forEach(function (data) {
+            if (data.command === 'A') {
+                const start = data.points[4];
+                const dTheta = data.points[5];
+                const end = data.points[4] + dTheta;
+                let inc = Math.PI / 180.0;
+                if (Math.abs(start - end) < inc) {
+                    inc = Math.abs(start - end);
+                }
+                if (dTheta < 0) {
+                    for (let t = start - inc; t > end; t -= inc) {
+                        const point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
+                        points.push(point.x, point.y);
+                    }
+                }
+                else {
+                    for (let t = start + inc; t < end; t += inc) {
+                        const point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
+                        points.push(point.x, point.y);
+                    }
+                }
+            }
+            else if (data.command === 'C') {
+                for (let t = 0.0; t <= 1; t += 0.01) {
+                    const point = Path.getPointOnCubicBezier(t, data.start.x, data.start.y, data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);
+                    points.push(point.x, point.y);
+                }
+            }
+            else {
+                points = points.concat(data.points);
+            }
+        });
+        let minX = points[0];
+        let maxX = points[0];
+        let minY = points[1];
+        let maxY = points[1];
+        let x, y;
+        for (let i = 0; i < points.length / 2; i++) {
+            x = points[i * 2];
+            y = points[i * 2 + 1];
+            if (!isNaN(x)) {
+                minX = Math.min(minX, x);
+                maxX = Math.max(maxX, x);
+            }
+            if (!isNaN(y)) {
+                minY = Math.min(minY, y);
+                maxY = Math.max(maxY, y);
+            }
+        }
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    getLength() {
+        return this.pathLength;
+    }
+    getPointAtLength(length) {
+        return Path.getPointAtLengthOfDataArray(length, this.dataArray);
+    }
+    static getLineLength(x1, y1, x2, y2) {
+        return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+    }
+    static getPathLength(dataArray) {
+        let pathLength = 0;
+        for (let i = 0; i < dataArray.length; ++i) {
+            pathLength += dataArray[i].pathLength;
+        }
+        return pathLength;
+    }
+    static getPointAtLengthOfDataArray(length, dataArray) {
+        let points, i = 0, ii = dataArray.length;
+        if (!ii) {
+            return null;
+        }
+        while (i < ii && length > dataArray[i].pathLength) {
+            length -= dataArray[i].pathLength;
+            ++i;
+        }
+        if (i === ii) {
+            points = dataArray[i - 1].points.slice(-2);
+            return {
+                x: points[0],
+                y: points[1],
+            };
+        }
+        if (length < 0.01) {
+            const cmd = dataArray[i].command;
+            if (cmd === 'M') {
+                points = dataArray[i].points.slice(0, 2);
+                return {
+                    x: points[0],
+                    y: points[1],
+                };
+            }
+            else {
+                return {
+                    x: dataArray[i].start.x,
+                    y: dataArray[i].start.y,
+                };
+            }
+        }
+        const cp = dataArray[i];
+        const p = cp.points;
+        switch (cp.command) {
+            case 'L':
+                return Path.getPointOnLine(length, cp.start.x, cp.start.y, p[0], p[1]);
+            case 'C':
+                return Path.getPointOnCubicBezier((0, BezierFunctions_1.t2length)(length, Path.getPathLength(dataArray), (i) => {
+                    return (0, BezierFunctions_1.getCubicArcLength)([cp.start.x, p[0], p[2], p[4]], [cp.start.y, p[1], p[3], p[5]], i);
+                }), cp.start.x, cp.start.y, p[0], p[1], p[2], p[3], p[4], p[5]);
+            case 'Q':
+                return Path.getPointOnQuadraticBezier((0, BezierFunctions_1.t2length)(length, Path.getPathLength(dataArray), (i) => {
+                    return (0, BezierFunctions_1.getQuadraticArcLength)([cp.start.x, p[0], p[2]], [cp.start.y, p[1], p[3]], i);
+                }), cp.start.x, cp.start.y, p[0], p[1], p[2], p[3]);
+            case 'A':
+                const cx = p[0], cy = p[1], rx = p[2], ry = p[3], dTheta = p[5], psi = p[6];
+                let theta = p[4];
+                theta += (dTheta * length) / cp.pathLength;
+                return Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
+        }
+        return null;
+    }
+    static getPointOnLine(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
+        fromX = fromX !== null && fromX !== void 0 ? fromX : P1x;
+        fromY = fromY !== null && fromY !== void 0 ? fromY : P1y;
+        const len = this.getLineLength(P1x, P1y, P2x, P2y);
+        if (len < 1e-10) {
+            return { x: P1x, y: P1y };
+        }
+        if (P2x === P1x) {
+            return { x: fromX, y: fromY + (P2y > P1y ? dist : -dist) };
+        }
+        const m = (P2y - P1y) / (P2x - P1x);
+        const run = Math.sqrt((dist * dist) / (1 + m * m)) * (P2x < P1x ? -1 : 1);
+        const rise = m * run;
+        if (Math.abs(fromY - P1y - m * (fromX - P1x)) < 1e-10) {
+            return { x: fromX + run, y: fromY + rise };
+        }
+        const u = ((fromX - P1x) * (P2x - P1x) + (fromY - P1y) * (P2y - P1y)) / (len * len);
+        const ix = P1x + u * (P2x - P1x);
+        const iy = P1y + u * (P2y - P1y);
+        const pRise = this.getLineLength(fromX, fromY, ix, iy);
+        const pRun = Math.sqrt(dist * dist - pRise * pRise);
+        const adjustedRun = Math.sqrt((pRun * pRun) / (1 + m * m)) * (P2x < P1x ? -1 : 1);
+        const adjustedRise = m * adjustedRun;
+        return { x: ix + adjustedRun, y: iy + adjustedRise };
+    }
+    static getPointOnCubicBezier(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) {
+        function CB1(t) {
+            return t * t * t;
+        }
+        function CB2(t) {
+            return 3 * t * t * (1 - t);
+        }
+        function CB3(t) {
+            return 3 * t * (1 - t) * (1 - t);
+        }
+        function CB4(t) {
+            return (1 - t) * (1 - t) * (1 - t);
+        }
+        const x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
+        const y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
+        return { x, y };
+    }
+    static getPointOnQuadraticBezier(pct, P1x, P1y, P2x, P2y, P3x, P3y) {
+        function QB1(t) {
+            return t * t;
+        }
+        function QB2(t) {
+            return 2 * t * (1 - t);
+        }
+        function QB3(t) {
+            return (1 - t) * (1 - t);
+        }
+        const x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
+        const y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
+        return { x, y };
+    }
+    static getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi) {
+        const cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
+        const pt = {
+            x: rx * Math.cos(theta),
+            y: ry * Math.sin(theta),
+        };
+        return {
+            x: cx + (pt.x * cosPsi - pt.y * sinPsi),
+            y: cy + (pt.x * sinPsi + pt.y * cosPsi),
+        };
+    }
+    static parsePathData(data) {
+        if (!data) {
+            return [];
+        }
+        let cs = data;
+        const cc = [
+            'm',
+            'M',
+            'l',
+            'L',
+            'v',
+            'V',
+            'h',
+            'H',
+            'z',
+            'Z',
+            'c',
+            'C',
+            'q',
+            'Q',
+            't',
+            'T',
+            's',
+            'S',
+            'a',
+            'A',
+        ];
+        cs = cs.replace(new RegExp(' ', 'g'), ',');
+        for (let n = 0; n < cc.length; n++) {
+            cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
+        }
+        const arr = cs.split('|');
+        const ca = [];
+        const coords = [];
+        let cpx = 0;
+        let cpy = 0;
+        const re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
+        let match;
+        for (let n = 1; n < arr.length; n++) {
+            let str = arr[n];
+            let c = str.charAt(0);
+            str = str.slice(1);
+            coords.length = 0;
+            while ((match = re.exec(str))) {
+                coords.push(match[0]);
+            }
+            const p = [];
+            for (let j = 0, jlen = coords.length; j < jlen; j++) {
+                if (coords[j] === '00') {
+                    p.push(0, 0);
+                    continue;
+                }
+                const parsed = parseFloat(coords[j]);
+                if (!isNaN(parsed)) {
+                    p.push(parsed);
+                }
+                else {
+                    p.push(0);
+                }
+            }
+            while (p.length > 0) {
+                if (isNaN(p[0])) {
+                    break;
+                }
+                let cmd = '';
+                let points = [];
+                const startX = cpx, startY = cpy;
+                let prevCmd, ctlPtx, ctlPty;
+                let rx, ry, psi, fa, fs, x1, y1;
+                switch (c) {
+                    case 'l':
+                        cpx += p.shift();
+                        cpy += p.shift();
+                        cmd = 'L';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'L':
+                        cpx = p.shift();
+                        cpy = p.shift();
+                        points.push(cpx, cpy);
+                        break;
+                    case 'm':
+                        const dx = p.shift();
+                        const dy = p.shift();
+                        cpx += dx;
+                        cpy += dy;
+                        cmd = 'M';
+                        if (ca.length > 2 && ca[ca.length - 1].command === 'z') {
+                            for (let idx = ca.length - 2; idx >= 0; idx--) {
+                                if (ca[idx].command === 'M') {
+                                    cpx = ca[idx].points[0] + dx;
+                                    cpy = ca[idx].points[1] + dy;
+                                    break;
+                                }
+                            }
+                        }
+                        points.push(cpx, cpy);
+                        c = 'l';
+                        break;
+                    case 'M':
+                        cpx = p.shift();
+                        cpy = p.shift();
+                        cmd = 'M';
+                        points.push(cpx, cpy);
+                        c = 'L';
+                        break;
+                    case 'h':
+                        cpx += p.shift();
+                        cmd = 'L';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'H':
+                        cpx = p.shift();
+                        cmd = 'L';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'v':
+                        cpy += p.shift();
+                        cmd = 'L';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'V':
+                        cpy = p.shift();
+                        cmd = 'L';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'C':
+                        points.push(p.shift(), p.shift(), p.shift(), p.shift());
+                        cpx = p.shift();
+                        cpy = p.shift();
+                        points.push(cpx, cpy);
+                        break;
+                    case 'c':
+                        points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
+                        cpx += p.shift();
+                        cpy += p.shift();
+                        cmd = 'C';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'S':
+                        ctlPtx = cpx;
+                        ctlPty = cpy;
+                        prevCmd = ca[ca.length - 1];
+                        if (prevCmd.command === 'C') {
+                            ctlPtx = cpx + (cpx - prevCmd.points[2]);
+                            ctlPty = cpy + (cpy - prevCmd.points[3]);
+                        }
+                        points.push(ctlPtx, ctlPty, p.shift(), p.shift());
+                        cpx = p.shift();
+                        cpy = p.shift();
+                        cmd = 'C';
+                        points.push(cpx, cpy);
+                        break;
+                    case 's':
+                        ctlPtx = cpx;
+                        ctlPty = cpy;
+                        prevCmd = ca[ca.length - 1];
+                        if (prevCmd.command === 'C') {
+                            ctlPtx = cpx + (cpx - prevCmd.points[2]);
+                            ctlPty = cpy + (cpy - prevCmd.points[3]);
+                        }
+                        points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
+                        cpx += p.shift();
+                        cpy += p.shift();
+                        cmd = 'C';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'Q':
+                        points.push(p.shift(), p.shift());
+                        cpx = p.shift();
+                        cpy = p.shift();
+                        points.push(cpx, cpy);
+                        break;
+                    case 'q':
+                        points.push(cpx + p.shift(), cpy + p.shift());
+                        cpx += p.shift();
+                        cpy += p.shift();
+                        cmd = 'Q';
+                        points.push(cpx, cpy);
+                        break;
+                    case 'T':
+                        ctlPtx = cpx;
+                        ctlPty = cpy;
+                        prevCmd = ca[ca.length - 1];
+                        if (prevCmd.command === 'Q') {
+                            ctlPtx = cpx + (cpx - prevCmd.points[0]);
+                            ctlPty = cpy + (cpy - prevCmd.points[1]);
+                        }
+                        cpx = p.shift();
+                        cpy = p.shift();
+                        cmd = 'Q';
+                        points.push(ctlPtx, ctlPty, cpx, cpy);
+                        break;
+                    case 't':
+                        ctlPtx = cpx;
+                        ctlPty = cpy;
+                        prevCmd = ca[ca.length - 1];
+                        if (prevCmd.command === 'Q') {
+                            ctlPtx = cpx + (cpx - prevCmd.points[0]);
+                            ctlPty = cpy + (cpy - prevCmd.points[1]);
+                        }
+                        cpx += p.shift();
+                        cpy += p.shift();
+                        cmd = 'Q';
+                        points.push(ctlPtx, ctlPty, cpx, cpy);
+                        break;
+                    case 'A':
+                        rx = p.shift();
+                        ry = p.shift();
+                        psi = p.shift();
+                        fa = p.shift();
+                        fs = p.shift();
+                        x1 = cpx;
+                        y1 = cpy;
+                        cpx = p.shift();
+                        cpy = p.shift();
+                        cmd = 'A';
+                        points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
+                        break;
+                    case 'a':
+                        rx = p.shift();
+                        ry = p.shift();
+                        psi = p.shift();
+                        fa = p.shift();
+                        fs = p.shift();
+                        x1 = cpx;
+                        y1 = cpy;
+                        cpx += p.shift();
+                        cpy += p.shift();
+                        cmd = 'A';
+                        points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
+                        break;
+                }
+                ca.push({
+                    command: cmd || c,
+                    points: points,
+                    start: {
+                        x: startX,
+                        y: startY,
+                    },
+                    pathLength: this.calcLength(startX, startY, cmd || c, points),
+                });
+            }
+            if (c === 'z' || c === 'Z') {
+                ca.push({
+                    command: 'z',
+                    points: [],
+                    start: undefined,
+                    pathLength: 0,
+                });
+            }
+        }
+        return ca;
+    }
+    static calcLength(x, y, cmd, points) {
+        let len, p1, p2, t;
+        const path = Path;
+        switch (cmd) {
+            case 'L':
+                return path.getLineLength(x, y, points[0], points[1]);
+            case 'C':
+                return (0, BezierFunctions_1.getCubicArcLength)([x, points[0], points[2], points[4]], [y, points[1], points[3], points[5]], 1);
+            case 'Q':
+                return (0, BezierFunctions_1.getQuadraticArcLength)([x, points[0], points[2]], [y, points[1], points[3]], 1);
+            case 'A':
+                len = 0.0;
+                const start = points[4];
+                const dTheta = points[5];
+                const end = points[4] + dTheta;
+                let inc = Math.PI / 180.0;
+                if (Math.abs(start - end) < inc) {
+                    inc = Math.abs(start - end);
+                }
+                p1 = path.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], start, 0);
+                if (dTheta < 0) {
+                    for (t = start - inc; t > end; t -= inc) {
+                        p2 = path.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
+                        len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
+                        p1 = p2;
+                    }
+                }
+                else {
+                    for (t = start + inc; t < end; t += inc) {
+                        p2 = path.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
+                        len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
+                        p1 = p2;
+                    }
+                }
+                p2 = path.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], end, 0);
+                len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
+                return len;
+        }
+        return 0;
+    }
+    static convertEndpointToCenterParameterization(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
+        const psi = psiDeg * (Math.PI / 180.0);
+        const xp = (Math.cos(psi) * (x1 - x2)) / 2.0 + (Math.sin(psi) * (y1 - y2)) / 2.0;
+        const yp = (-1 * Math.sin(psi) * (x1 - x2)) / 2.0 +
+            (Math.cos(psi) * (y1 - y2)) / 2.0;
+        const lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
+        if (lambda > 1) {
+            rx *= Math.sqrt(lambda);
+            ry *= Math.sqrt(lambda);
+        }
+        let f = Math.sqrt((rx * rx * (ry * ry) - rx * rx * (yp * yp) - ry * ry * (xp * xp)) /
+            (rx * rx * (yp * yp) + ry * ry * (xp * xp)));
+        if (fa === fs) {
+            f *= -1;
+        }
+        if (isNaN(f)) {
+            f = 0;
+        }
+        const cxp = (f * rx * yp) / ry;
+        const cyp = (f * -ry * xp) / rx;
+        const cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
+        const cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
+        const vMag = function (v) {
+            return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+        };
+        const vRatio = function (u, v) {
+            return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
+        };
+        const vAngle = function (u, v) {
+            return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
+        };
+        const theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
+        const u = [(xp - cxp) / rx, (yp - cyp) / ry];
+        const v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
+        let dTheta = vAngle(u, v);
+        if (vRatio(u, v) <= -1) {
+            dTheta = Math.PI;
+        }
+        if (vRatio(u, v) >= 1) {
+            dTheta = 0;
+        }
+        if (fs === 0 && dTheta > 0) {
+            dTheta = dTheta - 2 * Math.PI;
+        }
+        if (fs === 1 && dTheta < 0) {
+            dTheta = dTheta + 2 * Math.PI;
+        }
+        return [cx, cy, rx, ry, theta, dTheta, psi, fs];
+    }
+}
+exports.Path = Path;
+Path.prototype.className = 'Path';
+Path.prototype._attrsAffectingSize = ['data'];
+(0, Global_1._registerNode)(Path);
+Factory_1.Factory.addGetterSetter(Path, 'data');

node_modules/konva/lib/shapes/Rect.d.ts

@@ -0,0 +1,10 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet } from '../types.js';
+import { Context } from '../Context.js';
+export interface RectConfig extends ShapeConfig {
+    cornerRadius?: number | number[];
+}
+export declare class Rect extends Shape<RectConfig> {
+    _sceneFunc(context: Context): void;
+    cornerRadius: GetSet<number | number[], this>;
+}

node_modules/konva/lib/shapes/Rect.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rect = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Global_1 = require("../Global");
+const Util_1 = require("../Util");
+const Validators_1 = require("../Validators");
+class Rect extends Shape_1.Shape {
+    _sceneFunc(context) {
+        const cornerRadius = this.cornerRadius(), width = this.width(), height = this.height();
+        context.beginPath();
+        if (!cornerRadius) {
+            context.rect(0, 0, width, height);
+        }
+        else {
+            Util_1.Util.drawRoundedRectPath(context, width, height, cornerRadius);
+        }
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+}
+exports.Rect = Rect;
+Rect.prototype.className = 'Rect';
+(0, Global_1._registerNode)(Rect);
+Factory_1.Factory.addGetterSetter(Rect, 'cornerRadius', 0, (0, Validators_1.getNumberOrArrayOfNumbersValidator)(4));

node_modules/konva/lib/shapes/RegularPolygon.d.ts

@@ -0,0 +1,23 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet, Vector2d } from '../types.js';
+import { Context } from '../Context.js';
+export interface RegularPolygonConfig extends ShapeConfig {
+    sides: number;
+    radius: number;
+}
+export declare class RegularPolygon extends Shape<RegularPolygonConfig> {
+    _sceneFunc(context: Context): void;
+    _getPoints(): Vector2d[];
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    radius: GetSet<number, this>;
+    sides: GetSet<number, this>;
+}

node_modules/konva/lib/shapes/RegularPolygon.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegularPolygon = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+class RegularPolygon extends Shape_1.Shape {
+    _sceneFunc(context) {
+        const points = this._getPoints();
+        context.beginPath();
+        context.moveTo(points[0].x, points[0].y);
+        for (let n = 1; n < points.length; n++) {
+            context.lineTo(points[n].x, points[n].y);
+        }
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    _getPoints() {
+        const sides = this.attrs.sides;
+        const radius = this.attrs.radius || 0;
+        const points = [];
+        for (let n = 0; n < sides; n++) {
+            points.push({
+                x: radius * Math.sin((n * 2 * Math.PI) / sides),
+                y: -1 * radius * Math.cos((n * 2 * Math.PI) / sides),
+            });
+        }
+        return points;
+    }
+    getSelfRect() {
+        const points = this._getPoints();
+        let minX = points[0].x;
+        let maxX = points[0].y;
+        let minY = points[0].x;
+        let maxY = points[0].y;
+        points.forEach((point) => {
+            minX = Math.min(minX, point.x);
+            maxX = Math.max(maxX, point.x);
+            minY = Math.min(minY, point.y);
+            maxY = Math.max(maxY, point.y);
+        });
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    getWidth() {
+        return this.radius() * 2;
+    }
+    getHeight() {
+        return this.radius() * 2;
+    }
+    setWidth(width) {
+        this.radius(width / 2);
+    }
+    setHeight(height) {
+        this.radius(height / 2);
+    }
+}
+exports.RegularPolygon = RegularPolygon;
+RegularPolygon.prototype.className = 'RegularPolygon';
+RegularPolygon.prototype._centroid = true;
+RegularPolygon.prototype._attrsAffectingSize = ['radius'];
+(0, Global_1._registerNode)(RegularPolygon);
+Factory_1.Factory.addGetterSetter(RegularPolygon, 'radius', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(RegularPolygon, 'sides', 0, (0, Validators_1.getNumberValidator)());

node_modules/konva/lib/shapes/Ring.d.ts

@@ -0,0 +1,16 @@
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet } from '../types.js';
+import { Context } from '../Context.js';
+export interface RingConfig extends ShapeConfig {
+    innerRadius: number;
+    outerRadius: number;
+}
+export declare class Ring extends Shape<RingConfig> {
+    _sceneFunc(context: Context): void;
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    outerRadius: GetSet<number, this>;
+    innerRadius: GetSet<number, this>;
+}

node_modules/konva/lib/shapes/Ring.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ring = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+const PIx2 = Math.PI * 2;
+class Ring extends Shape_1.Shape {
+    _sceneFunc(context) {
+        context.beginPath();
+        context.arc(0, 0, this.innerRadius(), 0, PIx2, false);
+        context.moveTo(this.outerRadius(), 0);
+        context.arc(0, 0, this.outerRadius(), PIx2, 0, true);
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getWidth() {
+        return this.outerRadius() * 2;
+    }
+    getHeight() {
+        return this.outerRadius() * 2;
+    }
+    setWidth(width) {
+        this.outerRadius(width / 2);
+    }
+    setHeight(height) {
+        this.outerRadius(height / 2);
+    }
+}
+exports.Ring = Ring;
+Ring.prototype.className = 'Ring';
+Ring.prototype._centroid = true;
+Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+(0, Global_1._registerNode)(Ring);
+Factory_1.Factory.addGetterSetter(Ring, 'innerRadius', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Ring, 'outerRadius', 0, (0, Validators_1.getNumberValidator)());

node_modules/konva/lib/shapes/Sprite.d.ts

@@ -0,0 +1,31 @@
+import { Context } from '../Context.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Animation } from '../Animation.js';
+import { GetSet } from '../types.js';
+export interface SpriteConfig extends ShapeConfig {
+    animation: string;
+    animations: any;
+    frameIndex?: number;
+    image: HTMLImageElement;
+    frameRate?: number;
+}
+export declare class Sprite extends Shape<SpriteConfig> {
+    _updated: boolean;
+    anim: Animation;
+    interval: any;
+    constructor(config: SpriteConfig);
+    _sceneFunc(context: Context): void;
+    _hitFunc(context: Context): void;
+    _useBufferCanvas(): boolean;
+    _setInterval(): void;
+    start(): void;
+    stop(): void;
+    isRunning(): boolean;
+    _updateIndex(): void;
+    frameIndex: GetSet<number, this>;
+    animation: GetSet<string, this>;
+    image: GetSet<CanvasImageSource, this>;
+    animations: GetSet<any, this>;
+    frameOffsets: GetSet<any, this>;
+    frameRate: GetSet<number, this>;
+}

node_modules/konva/lib/shapes/Sprite.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sprite = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Animation_1 = require("../Animation");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+class Sprite extends Shape_1.Shape {
+    constructor(config) {
+        super(config);
+        this._updated = true;
+        this.anim = new Animation_1.Animation(() => {
+            const updated = this._updated;
+            this._updated = false;
+            return updated;
+        });
+        this.on('animationChange.konva', function () {
+            this.frameIndex(0);
+        });
+        this.on('frameIndexChange.konva', function () {
+            this._updated = true;
+        });
+        this.on('frameRateChange.konva', function () {
+            if (!this.anim.isRunning()) {
+                return;
+            }
+            clearInterval(this.interval);
+            this._setInterval();
+        });
+    }
+    _sceneFunc(context) {
+        const anim = this.animation(), index = this.frameIndex(), ix4 = index * 4, set = this.animations()[anim], offsets = this.frameOffsets(), x = set[ix4 + 0], y = set[ix4 + 1], width = set[ix4 + 2], height = set[ix4 + 3], image = this.image();
+        if (this.hasFill() || this.hasStroke()) {
+            context.beginPath();
+            context.rect(0, 0, width, height);
+            context.closePath();
+            context.fillStrokeShape(this);
+        }
+        if (image) {
+            if (offsets) {
+                const offset = offsets[anim], ix2 = index * 2;
+                context.drawImage(image, x, y, width, height, offset[ix2 + 0], offset[ix2 + 1], width, height);
+            }
+            else {
+                context.drawImage(image, x, y, width, height, 0, 0, width, height);
+            }
+        }
+    }
+    _hitFunc(context) {
+        const anim = this.animation(), index = this.frameIndex(), ix4 = index * 4, set = this.animations()[anim], offsets = this.frameOffsets(), width = set[ix4 + 2], height = set[ix4 + 3];
+        context.beginPath();
+        if (offsets) {
+            const offset = offsets[anim];
+            const ix2 = index * 2;
+            context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height);
+        }
+        else {
+            context.rect(0, 0, width, height);
+        }
+        context.closePath();
+        context.fillShape(this);
+    }
+    _useBufferCanvas() {
+        return super._useBufferCanvas(true);
+    }
+    _setInterval() {
+        const that = this;
+        this.interval = setInterval(function () {
+            that._updateIndex();
+        }, 1000 / this.frameRate());
+    }
+    start() {
+        if (this.isRunning()) {
+            return;
+        }
+        const layer = this.getLayer();
+        this.anim.setLayers(layer);
+        this._setInterval();
+        this.anim.start();
+    }
+    stop() {
+        this.anim.stop();
+        clearInterval(this.interval);
+    }
+    isRunning() {
+        return this.anim.isRunning();
+    }
+    _updateIndex() {
+        const index = this.frameIndex(), animation = this.animation(), animations = this.animations(), anim = animations[animation], len = anim.length / 4;
+        if (index < len - 1) {
+            this.frameIndex(index + 1);
+        }
+        else {
+            this.frameIndex(0);
+        }
+    }
+}
+exports.Sprite = Sprite;
+Sprite.prototype.className = 'Sprite';
+(0, Global_1._registerNode)(Sprite);
+Factory_1.Factory.addGetterSetter(Sprite, 'animation');
+Factory_1.Factory.addGetterSetter(Sprite, 'animations');
+Factory_1.Factory.addGetterSetter(Sprite, 'frameOffsets');
+Factory_1.Factory.addGetterSetter(Sprite, 'image');
+Factory_1.Factory.addGetterSetter(Sprite, 'frameIndex', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Sprite, 'frameRate', 17, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.backCompat(Sprite, {
+    index: 'frameIndex',
+    getIndex: 'getFrameIndex',
+    setIndex: 'setFrameIndex',
+});

node_modules/konva/lib/shapes/Star.d.ts

@@ -0,0 +1,18 @@
+import { Context } from '../Context.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet } from '../types.js';
+export interface StarConfig extends ShapeConfig {
+    numPoints: number;
+    innerRadius: number;
+    outerRadius: number;
+}
+export declare class Star extends Shape<StarConfig> {
+    _sceneFunc(context: Context): void;
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    outerRadius: GetSet<number, this>;
+    innerRadius: GetSet<number, this>;
+    numPoints: GetSet<number, this>;
+}

node_modules/konva/lib/shapes/Star.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Star = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+class Star extends Shape_1.Shape {
+    _sceneFunc(context) {
+        const innerRadius = this.innerRadius(), outerRadius = this.outerRadius(), numPoints = this.numPoints();
+        context.beginPath();
+        context.moveTo(0, 0 - outerRadius);
+        for (let n = 1; n < numPoints * 2; n++) {
+            const radius = n % 2 === 0 ? outerRadius : innerRadius;
+            const x = radius * Math.sin((n * Math.PI) / numPoints);
+            const y = -1 * radius * Math.cos((n * Math.PI) / numPoints);
+            context.lineTo(x, y);
+        }
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getWidth() {
+        return this.outerRadius() * 2;
+    }
+    getHeight() {
+        return this.outerRadius() * 2;
+    }
+    setWidth(width) {
+        this.outerRadius(width / 2);
+    }
+    setHeight(height) {
+        this.outerRadius(height / 2);
+    }
+}
+exports.Star = Star;
+Star.prototype.className = 'Star';
+Star.prototype._centroid = true;
+Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+(0, Global_1._registerNode)(Star);
+Factory_1.Factory.addGetterSetter(Star, 'numPoints', 5, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Star, 'innerRadius', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Star, 'outerRadius', 0, (0, Validators_1.getNumberValidator)());

node_modules/konva/lib/shapes/Text.d.ts

@@ -0,0 +1,77 @@
+import { Context } from '../Context.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet } from '../types.js';
+export declare function stringToArray(string: string): string[];
+export interface TextConfig extends ShapeConfig {
+    direction?: string;
+    text?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    fontVariant?: string;
+    textDecoration?: string;
+    align?: string;
+    verticalAlign?: string;
+    padding?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    wrap?: string;
+    ellipsis?: boolean;
+}
+export declare class Text extends Shape<TextConfig> {
+    textArr: Array<{
+        text: string;
+        width: number;
+        lastInParagraph: boolean;
+    }>;
+    _partialText: string;
+    _partialTextX: number;
+    _partialTextY: number;
+    textWidth: number;
+    textHeight: number;
+    constructor(config?: TextConfig);
+    _sceneFunc(context: Context): void;
+    _hitFunc(context: Context): void;
+    setText(text: string): this;
+    getWidth(): any;
+    getHeight(): any;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    measureSize(text: string): {
+        actualBoundingBoxAscent: number;
+        actualBoundingBoxDescent: number;
+        actualBoundingBoxLeft: number;
+        actualBoundingBoxRight: number;
+        alphabeticBaseline: number;
+        emHeightAscent: number;
+        emHeightDescent: number;
+        fontBoundingBoxAscent: number;
+        fontBoundingBoxDescent: number;
+        hangingBaseline: number;
+        ideographicBaseline: number;
+        width: number;
+        height: number;
+    };
+    _getContextFont(): string;
+    _addTextLine(line: string): number;
+    _getTextWidth(text: string): number;
+    _setTextData(): void;
+    _shouldHandleEllipsis(currentHeightPx: number): boolean;
+    _tryToAddEllipsisToLastLine(): void;
+    getStrokeScaleEnabled(): boolean;
+    _useBufferCanvas(): boolean;
+    direction: GetSet<string, this>;
+    fontFamily: GetSet<string, this>;
+    fontSize: GetSet<number, this>;
+    fontStyle: GetSet<string, this>;
+    fontVariant: GetSet<string, this>;
+    align: GetSet<string, this>;
+    letterSpacing: GetSet<number, this>;
+    verticalAlign: GetSet<string, this>;
+    padding: GetSet<number, this>;
+    lineHeight: GetSet<number, this>;
+    textDecoration: GetSet<string, this>;
+    text: GetSet<string, this>;
+    wrap: GetSet<string, this>;
+    ellipsis: GetSet<boolean, this>;
+}

node_modules/konva/lib/shapes/Text.js

@@ -0,0 +1,439 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+exports.stringToArray = stringToArray;
+const Util_1 = require("../Util");
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Global_1 = require("../Global");
+const Validators_1 = require("../Validators");
+const Global_2 = require("../Global");
+function stringToArray(string) {
+    return [...string].reduce((acc, char, index, array) => {
+        if (/\p{Emoji}/u.test(char)) {
+            const nextChar = array[index + 1];
+            if (nextChar && /\p{Emoji_Modifier}|\u200D/u.test(nextChar)) {
+                acc.push(char + nextChar);
+                array[index + 1] = '';
+            }
+            else {
+                acc.push(char);
+            }
+        }
+        else if (/\p{Regional_Indicator}{2}/u.test(char + (array[index + 1] || ''))) {
+            acc.push(char + array[index + 1]);
+        }
+        else if (index > 0 && /\p{Mn}|\p{Me}|\p{Mc}/u.test(char)) {
+            acc[acc.length - 1] += char;
+        }
+        else if (char) {
+            acc.push(char);
+        }
+        return acc;
+    }, []);
+}
+const AUTO = 'auto', CENTER = 'center', INHERIT = 'inherit', JUSTIFY = 'justify', CHANGE_KONVA = 'Change.konva', CONTEXT_2D = '2d', DASH = '-', LEFT = 'left', TEXT = 'text', TEXT_UPPER = 'Text', TOP = 'top', BOTTOM = 'bottom', MIDDLE = 'middle', NORMAL = 'normal', PX_SPACE = 'px ', SPACE = ' ', RIGHT = 'right', RTL = 'rtl', WORD = 'word', CHAR = 'char', NONE = 'none', ELLIPSIS = '…', ATTR_CHANGE_LIST = [
+    'direction',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontVariant',
+    'padding',
+    'align',
+    'verticalAlign',
+    'lineHeight',
+    'text',
+    'width',
+    'height',
+    'wrap',
+    'ellipsis',
+    'letterSpacing',
+], attrChangeListLen = ATTR_CHANGE_LIST.length;
+function normalizeFontFamily(fontFamily) {
+    return fontFamily
+        .split(',')
+        .map((family) => {
+        family = family.trim();
+        const hasSpace = family.indexOf(' ') >= 0;
+        const hasQuotes = family.indexOf('"') >= 0 || family.indexOf("'") >= 0;
+        if (hasSpace && !hasQuotes) {
+            family = `"${family}"`;
+        }
+        return family;
+    })
+        .join(', ');
+}
+let dummyContext;
+function getDummyContext() {
+    if (dummyContext) {
+        return dummyContext;
+    }
+    dummyContext = Util_1.Util.createCanvasElement().getContext(CONTEXT_2D);
+    return dummyContext;
+}
+function _fillFunc(context) {
+    context.fillText(this._partialText, this._partialTextX, this._partialTextY);
+}
+function _strokeFunc(context) {
+    context.setAttr('miterLimit', 2);
+    context.strokeText(this._partialText, this._partialTextX, this._partialTextY);
+}
+function checkDefaultFill(config) {
+    config = config || {};
+    if (!config.fillLinearGradientColorStops &&
+        !config.fillRadialGradientColorStops &&
+        !config.fillPatternImage) {
+        config.fill = config.fill || 'black';
+    }
+    return config;
+}
+class Text extends Shape_1.Shape {
+    constructor(config) {
+        super(checkDefaultFill(config));
+        this._partialTextX = 0;
+        this._partialTextY = 0;
+        for (let n = 0; n < attrChangeListLen; n++) {
+            this.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, this._setTextData);
+        }
+        this._setTextData();
+    }
+    _sceneFunc(context) {
+        const textArr = this.textArr, textArrLen = textArr.length;
+        if (!this.text()) {
+            return;
+        }
+        let padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), direction = this.direction(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
+        direction = direction === INHERIT ? context.direction : direction;
+        let translateY = lineHeightPx / 2;
+        let baseline = MIDDLE;
+        if (Global_1.Konva._fixTextRendering) {
+            const metrics = this.measureSize('M');
+            baseline = 'alphabetic';
+            translateY =
+                (metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2 +
+                    lineHeightPx / 2;
+        }
+        if (direction === RTL) {
+            context.setAttr('direction', direction);
+        }
+        context.setAttr('font', this._getContextFont());
+        context.setAttr('textBaseline', baseline);
+        context.setAttr('textAlign', LEFT);
+        if (verticalAlign === MIDDLE) {
+            alignY = (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2;
+        }
+        else if (verticalAlign === BOTTOM) {
+            alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
+        }
+        context.translate(padding, alignY + padding);
+        for (n = 0; n < textArrLen; n++) {
+            let lineTranslateX = 0;
+            let lineTranslateY = 0;
+            const obj = textArr[n], text = obj.text, width = obj.width, lastLine = obj.lastInParagraph;
+            context.save();
+            if (align === RIGHT) {
+                lineTranslateX += totalWidth - width - padding * 2;
+            }
+            else if (align === CENTER) {
+                lineTranslateX += (totalWidth - width - padding * 2) / 2;
+            }
+            if (shouldUnderline) {
+                context.save();
+                context.beginPath();
+                const yOffset = Global_1.Konva._fixTextRendering
+                    ? Math.round(fontSize / 4)
+                    : Math.round(fontSize / 2);
+                const x = lineTranslateX;
+                const y = translateY + lineTranslateY + yOffset;
+                context.moveTo(x, y);
+                const lineWidth = align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
+                context.lineTo(x + Math.round(lineWidth), y);
+                context.lineWidth = fontSize / 15;
+                const gradient = this._getLinearGradient();
+                context.strokeStyle = gradient || fill;
+                context.stroke();
+                context.restore();
+            }
+            if (shouldLineThrough) {
+                context.save();
+                context.beginPath();
+                const yOffset = Global_1.Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
+                context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
+                const lineWidth = align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
+                context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + yOffset);
+                context.lineWidth = fontSize / 15;
+                const gradient = this._getLinearGradient();
+                context.strokeStyle = gradient || fill;
+                context.stroke();
+                context.restore();
+            }
+            if (direction !== RTL && (letterSpacing !== 0 || align === JUSTIFY)) {
+                const spacesNumber = text.split(' ').length - 1;
+                const array = stringToArray(text);
+                for (let li = 0; li < array.length; li++) {
+                    const letter = array[li];
+                    if (letter === ' ' && !lastLine && align === JUSTIFY) {
+                        lineTranslateX += (totalWidth - padding * 2 - width) / spacesNumber;
+                    }
+                    this._partialTextX = lineTranslateX;
+                    this._partialTextY = translateY + lineTranslateY;
+                    this._partialText = letter;
+                    context.fillStrokeShape(this);
+                    lineTranslateX += this.measureSize(letter).width + letterSpacing;
+                }
+            }
+            else {
+                if (letterSpacing !== 0) {
+                    context.setAttr('letterSpacing', `${letterSpacing}px`);
+                }
+                this._partialTextX = lineTranslateX;
+                this._partialTextY = translateY + lineTranslateY;
+                this._partialText = text;
+                context.fillStrokeShape(this);
+            }
+            context.restore();
+            if (textArrLen > 1) {
+                translateY += lineHeightPx;
+            }
+        }
+    }
+    _hitFunc(context) {
+        const width = this.getWidth(), height = this.getHeight();
+        context.beginPath();
+        context.rect(0, 0, width, height);
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    setText(text) {
+        const str = Util_1.Util._isString(text)
+            ? text
+            : text === null || text === undefined
+                ? ''
+                : text + '';
+        this._setAttr(TEXT, str);
+        return this;
+    }
+    getWidth() {
+        const isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
+        return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
+    }
+    getHeight() {
+        const isAuto = this.attrs.height === AUTO || this.attrs.height === undefined;
+        return isAuto
+            ? this.fontSize() * this.textArr.length * this.lineHeight() +
+                this.padding() * 2
+            : this.attrs.height;
+    }
+    getTextWidth() {
+        return this.textWidth;
+    }
+    getTextHeight() {
+        Util_1.Util.warn('text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height.');
+        return this.textHeight;
+    }
+    measureSize(text) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        let _context = getDummyContext(), fontSize = this.fontSize(), metrics;
+        _context.save();
+        _context.font = this._getContextFont();
+        metrics = _context.measureText(text);
+        _context.restore();
+        const scaleFactor = fontSize / 100;
+        return {
+            actualBoundingBoxAscent: (_a = metrics.actualBoundingBoxAscent) !== null && _a !== void 0 ? _a : 71.58203125 * scaleFactor,
+            actualBoundingBoxDescent: (_b = metrics.actualBoundingBoxDescent) !== null && _b !== void 0 ? _b : 0,
+            actualBoundingBoxLeft: (_c = metrics.actualBoundingBoxLeft) !== null && _c !== void 0 ? _c : -7.421875 * scaleFactor,
+            actualBoundingBoxRight: (_d = metrics.actualBoundingBoxRight) !== null && _d !== void 0 ? _d : 75.732421875 * scaleFactor,
+            alphabeticBaseline: (_e = metrics.alphabeticBaseline) !== null && _e !== void 0 ? _e : 0,
+            emHeightAscent: (_f = metrics.emHeightAscent) !== null && _f !== void 0 ? _f : 100 * scaleFactor,
+            emHeightDescent: (_g = metrics.emHeightDescent) !== null && _g !== void 0 ? _g : -20 * scaleFactor,
+            fontBoundingBoxAscent: (_h = metrics.fontBoundingBoxAscent) !== null && _h !== void 0 ? _h : 91 * scaleFactor,
+            fontBoundingBoxDescent: (_j = metrics.fontBoundingBoxDescent) !== null && _j !== void 0 ? _j : 21 * scaleFactor,
+            hangingBaseline: (_k = metrics.hangingBaseline) !== null && _k !== void 0 ? _k : 72.80000305175781 * scaleFactor,
+            ideographicBaseline: (_l = metrics.ideographicBaseline) !== null && _l !== void 0 ? _l : -21 * scaleFactor,
+            width: metrics.width,
+            height: fontSize,
+        };
+    }
+    _getContextFont() {
+        return (this.fontStyle() +
+            SPACE +
+            this.fontVariant() +
+            SPACE +
+            (this.fontSize() + PX_SPACE) +
+            normalizeFontFamily(this.fontFamily()));
+    }
+    _addTextLine(line) {
+        const align = this.align();
+        if (align === JUSTIFY) {
+            line = line.trim();
+        }
+        const width = this._getTextWidth(line);
+        return this.textArr.push({
+            text: line,
+            width: width,
+            lastInParagraph: false,
+        });
+    }
+    _getTextWidth(text) {
+        const letterSpacing = this.letterSpacing();
+        const length = text.length;
+        return getDummyContext().measureText(text).width + letterSpacing * length;
+    }
+    _setTextData() {
+        let lines = this.text().split('\n'), fontSize = +this.fontSize(), textWidth = 0, lineHeightPx = this.lineHeight() * fontSize, width = this.attrs.width, height = this.attrs.height, fixedWidth = width !== AUTO && width !== undefined, fixedHeight = height !== AUTO && height !== undefined, padding = this.padding(), maxWidth = width - padding * 2, maxHeightPx = height - padding * 2, currentHeightPx = 0, wrap = this.wrap(), shouldWrap = wrap !== NONE, wrapAtWord = wrap !== CHAR && shouldWrap, shouldAddEllipsis = this.ellipsis();
+        this.textArr = [];
+        getDummyContext().font = this._getContextFont();
+        const additionalWidth = shouldAddEllipsis
+            ? this._getTextWidth(ELLIPSIS)
+            : 0;
+        for (let i = 0, max = lines.length; i < max; ++i) {
+            let line = lines[i];
+            let lineWidth = this._getTextWidth(line);
+            if (fixedWidth && lineWidth > maxWidth) {
+                while (line.length > 0) {
+                    let low = 0, high = stringToArray(line).length, match = '', matchWidth = 0;
+                    while (low < high) {
+                        const mid = (low + high) >>> 1, lineArray = stringToArray(line), substr = lineArray.slice(0, mid + 1).join(''), substrWidth = this._getTextWidth(substr);
+                        const shouldConsiderEllipsis = shouldAddEllipsis &&
+                            fixedHeight &&
+                            currentHeightPx + lineHeightPx > maxHeightPx;
+                        const effectiveWidth = shouldConsiderEllipsis
+                            ? substrWidth + additionalWidth
+                            : substrWidth;
+                        if (effectiveWidth <= maxWidth) {
+                            low = mid + 1;
+                            match = substr;
+                            matchWidth = substrWidth;
+                        }
+                        else {
+                            high = mid;
+                        }
+                    }
+                    if (match) {
+                        if (wrapAtWord) {
+                            const lineArray = stringToArray(line);
+                            const matchArray = stringToArray(match);
+                            const nextChar = lineArray[matchArray.length];
+                            const nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
+                            let wrapIndex;
+                            if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
+                                wrapIndex = matchArray.length;
+                            }
+                            else {
+                                const lastSpaceIndex = matchArray.lastIndexOf(SPACE);
+                                const lastDashIndex = matchArray.lastIndexOf(DASH);
+                                wrapIndex = Math.max(lastSpaceIndex, lastDashIndex) + 1;
+                            }
+                            if (wrapIndex > 0) {
+                                low = wrapIndex;
+                                match = lineArray.slice(0, low).join('');
+                                matchWidth = this._getTextWidth(match);
+                            }
+                        }
+                        match = match.trimRight();
+                        this._addTextLine(match);
+                        textWidth = Math.max(textWidth, matchWidth);
+                        currentHeightPx += lineHeightPx;
+                        const shouldHandleEllipsis = this._shouldHandleEllipsis(currentHeightPx);
+                        if (shouldHandleEllipsis) {
+                            this._tryToAddEllipsisToLastLine();
+                            break;
+                        }
+                        const lineArray = stringToArray(line);
+                        line = lineArray.slice(low).join('').trimLeft();
+                        if (line.length > 0) {
+                            lineWidth = this._getTextWidth(line);
+                            if (lineWidth <= maxWidth) {
+                                this._addTextLine(line);
+                                currentHeightPx += lineHeightPx;
+                                textWidth = Math.max(textWidth, lineWidth);
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            else {
+                this._addTextLine(line);
+                currentHeightPx += lineHeightPx;
+                textWidth = Math.max(textWidth, lineWidth);
+                if (this._shouldHandleEllipsis(currentHeightPx) && i < max - 1) {
+                    this._tryToAddEllipsisToLastLine();
+                }
+            }
+            if (this.textArr[this.textArr.length - 1]) {
+                this.textArr[this.textArr.length - 1].lastInParagraph = true;
+            }
+            if (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx) {
+                break;
+            }
+        }
+        this.textHeight = fontSize;
+        this.textWidth = textWidth;
+    }
+    _shouldHandleEllipsis(currentHeightPx) {
+        const fontSize = +this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, height = this.attrs.height, fixedHeight = height !== AUTO && height !== undefined, padding = this.padding(), maxHeightPx = height - padding * 2, wrap = this.wrap(), shouldWrap = wrap !== NONE;
+        return (!shouldWrap ||
+            (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx));
+    }
+    _tryToAddEllipsisToLastLine() {
+        const width = this.attrs.width, fixedWidth = width !== AUTO && width !== undefined, padding = this.padding(), maxWidth = width - padding * 2, shouldAddEllipsis = this.ellipsis();
+        const lastLine = this.textArr[this.textArr.length - 1];
+        if (!lastLine || !shouldAddEllipsis) {
+            return;
+        }
+        if (fixedWidth) {
+            const haveSpace = this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
+            if (!haveSpace) {
+                lastLine.text = lastLine.text.slice(0, lastLine.text.length - 3);
+            }
+        }
+        this.textArr.splice(this.textArr.length - 1, 1);
+        this._addTextLine(lastLine.text + ELLIPSIS);
+    }
+    getStrokeScaleEnabled() {
+        return true;
+    }
+    _useBufferCanvas() {
+        const hasLine = this.textDecoration().indexOf('underline') !== -1 ||
+            this.textDecoration().indexOf('line-through') !== -1;
+        const hasShadow = this.hasShadow();
+        if (hasLine && hasShadow) {
+            return true;
+        }
+        return super._useBufferCanvas();
+    }
+}
+exports.Text = Text;
+Text.prototype._fillFunc = _fillFunc;
+Text.prototype._strokeFunc = _strokeFunc;
+Text.prototype.className = TEXT_UPPER;
+Text.prototype._attrsAffectingSize = [
+    'text',
+    'fontSize',
+    'padding',
+    'wrap',
+    'lineHeight',
+    'letterSpacing',
+];
+(0, Global_2._registerNode)(Text);
+Factory_1.Factory.overWriteSetter(Text, 'width', (0, Validators_1.getNumberOrAutoValidator)());
+Factory_1.Factory.overWriteSetter(Text, 'height', (0, Validators_1.getNumberOrAutoValidator)());
+Factory_1.Factory.addGetterSetter(Text, 'direction', INHERIT);
+Factory_1.Factory.addGetterSetter(Text, 'fontFamily', 'Arial');
+Factory_1.Factory.addGetterSetter(Text, 'fontSize', 12, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Text, 'fontStyle', NORMAL);
+Factory_1.Factory.addGetterSetter(Text, 'fontVariant', NORMAL);
+Factory_1.Factory.addGetterSetter(Text, 'padding', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Text, 'align', LEFT);
+Factory_1.Factory.addGetterSetter(Text, 'verticalAlign', TOP);
+Factory_1.Factory.addGetterSetter(Text, 'lineHeight', 1, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Text, 'wrap', WORD);
+Factory_1.Factory.addGetterSetter(Text, 'ellipsis', false, (0, Validators_1.getBooleanValidator)());
+Factory_1.Factory.addGetterSetter(Text, 'letterSpacing', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Text, 'text', '', (0, Validators_1.getStringValidator)());
+Factory_1.Factory.addGetterSetter(Text, 'textDecoration', '');

node_modules/konva/lib/shapes/TextPath.d.ts

@@ -0,0 +1,64 @@
+import { Context } from '../Context.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Text } from './Text.js';
+import { GetSet, PathSegment, Vector2d } from '../types.js';
+export interface TextPathConfig extends ShapeConfig {
+    text?: string;
+    data?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    letterSpacing?: number;
+}
+export declare class TextPath extends Shape<TextPathConfig> {
+    dummyCanvas: HTMLCanvasElement;
+    dataArray: PathSegment[];
+    glyphInfo: Array<{
+        transposeX: number;
+        transposeY: number;
+        text: string;
+        rotation: number;
+        p0: Vector2d;
+        p1: Vector2d;
+    }>;
+    partialText: string;
+    pathLength: number;
+    textWidth: number;
+    textHeight: number;
+    constructor(config?: TextPathConfig);
+    _getTextPathLength(): number;
+    _getPointAtLength(length: number): {
+        x: number;
+        y: number;
+    } | null;
+    _readDataAttribute(): void;
+    _sceneFunc(context: Context): void;
+    _hitFunc(context: Context): void;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    setText(text: string): Text;
+    _getContextFont(): string;
+    _getTextSize(text: string): {
+        width: number;
+        height: number;
+    };
+    _setTextData(): null | undefined;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    destroy(): this;
+    fontFamily: GetSet<string, this>;
+    fontSize: GetSet<number, this>;
+    fontStyle: GetSet<string, this>;
+    fontVariant: GetSet<string, this>;
+    align: GetSet<string, this>;
+    letterSpacing: GetSet<number, this>;
+    text: GetSet<string, this>;
+    data: GetSet<string, this>;
+    kerningFunc: GetSet<(leftChar: string, rightChar: string) => number, this>;
+    textBaseline: GetSet<string, this>;
+    textDecoration: GetSet<string, this>;
+}

node_modules/konva/lib/shapes/TextPath.js

@@ -0,0 +1,241 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextPath = void 0;
+const Util_1 = require("../Util");
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Path_1 = require("./Path");
+const Text_1 = require("./Text");
+const Validators_1 = require("../Validators");
+const Global_1 = require("../Global");
+const EMPTY_STRING = '', NORMAL = 'normal';
+function _fillFunc(context) {
+    context.fillText(this.partialText, 0, 0);
+}
+function _strokeFunc(context) {
+    context.strokeText(this.partialText, 0, 0);
+}
+class TextPath extends Shape_1.Shape {
+    constructor(config) {
+        super(config);
+        this.dummyCanvas = Util_1.Util.createCanvasElement();
+        this.dataArray = [];
+        this._readDataAttribute();
+        this.on('dataChange.konva', function () {
+            this._readDataAttribute();
+            this._setTextData();
+        });
+        this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva fontFamilyChange.konva', this._setTextData);
+        this._setTextData();
+    }
+    _getTextPathLength() {
+        return Path_1.Path.getPathLength(this.dataArray);
+    }
+    _getPointAtLength(length) {
+        if (!this.attrs.data) {
+            return null;
+        }
+        const totalLength = this.pathLength;
+        if (length - 1 > totalLength) {
+            return null;
+        }
+        return Path_1.Path.getPointAtLengthOfDataArray(length, this.dataArray);
+    }
+    _readDataAttribute() {
+        this.dataArray = Path_1.Path.parsePathData(this.attrs.data);
+        this.pathLength = this._getTextPathLength();
+    }
+    _sceneFunc(context) {
+        context.setAttr('font', this._getContextFont());
+        context.setAttr('textBaseline', this.textBaseline());
+        context.setAttr('textAlign', 'left');
+        context.save();
+        const textDecoration = this.textDecoration();
+        const fill = this.fill();
+        const fontSize = this.fontSize();
+        const glyphInfo = this.glyphInfo;
+        if (textDecoration === 'underline') {
+            context.beginPath();
+        }
+        for (let i = 0; i < glyphInfo.length; i++) {
+            context.save();
+            const p0 = glyphInfo[i].p0;
+            context.translate(p0.x, p0.y);
+            context.rotate(glyphInfo[i].rotation);
+            this.partialText = glyphInfo[i].text;
+            context.fillStrokeShape(this);
+            if (textDecoration === 'underline') {
+                if (i === 0) {
+                    context.moveTo(0, fontSize / 2 + 1);
+                }
+                context.lineTo(fontSize, fontSize / 2 + 1);
+            }
+            context.restore();
+        }
+        if (textDecoration === 'underline') {
+            context.strokeStyle = fill;
+            context.lineWidth = fontSize / 20;
+            context.stroke();
+        }
+        context.restore();
+    }
+    _hitFunc(context) {
+        context.beginPath();
+        const glyphInfo = this.glyphInfo;
+        if (glyphInfo.length >= 1) {
+            const p0 = glyphInfo[0].p0;
+            context.moveTo(p0.x, p0.y);
+        }
+        for (let i = 0; i < glyphInfo.length; i++) {
+            const p1 = glyphInfo[i].p1;
+            context.lineTo(p1.x, p1.y);
+        }
+        context.setAttr('lineWidth', this.fontSize());
+        context.setAttr('strokeStyle', this.colorKey);
+        context.stroke();
+    }
+    getTextWidth() {
+        return this.textWidth;
+    }
+    getTextHeight() {
+        Util_1.Util.warn('text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height.');
+        return this.textHeight;
+    }
+    setText(text) {
+        return Text_1.Text.prototype.setText.call(this, text);
+    }
+    _getContextFont() {
+        return Text_1.Text.prototype._getContextFont.call(this);
+    }
+    _getTextSize(text) {
+        const dummyCanvas = this.dummyCanvas;
+        const _context = dummyCanvas.getContext('2d');
+        _context.save();
+        _context.font = this._getContextFont();
+        const metrics = _context.measureText(text);
+        _context.restore();
+        return {
+            width: metrics.width,
+            height: parseInt(`${this.fontSize()}`, 10),
+        };
+    }
+    _setTextData() {
+        const { width, height } = this._getTextSize(this.attrs.text);
+        this.textWidth = width;
+        this.textHeight = height;
+        this.glyphInfo = [];
+        if (!this.attrs.data) {
+            return null;
+        }
+        const letterSpacing = this.letterSpacing();
+        const align = this.align();
+        const kerningFunc = this.kerningFunc();
+        const textWidth = Math.max(this.textWidth + ((this.attrs.text || '').length - 1) * letterSpacing, 0);
+        let offset = 0;
+        if (align === 'center') {
+            offset = Math.max(0, this.pathLength / 2 - textWidth / 2);
+        }
+        if (align === 'right') {
+            offset = Math.max(0, this.pathLength - textWidth);
+        }
+        const charArr = (0, Text_1.stringToArray)(this.text());
+        let offsetToGlyph = offset;
+        for (let i = 0; i < charArr.length; i++) {
+            const charStartPoint = this._getPointAtLength(offsetToGlyph);
+            if (!charStartPoint)
+                return;
+            let glyphWidth = this._getTextSize(charArr[i]).width + letterSpacing;
+            if (charArr[i] === ' ' && align === 'justify') {
+                const numberOfSpaces = this.text().split(' ').length - 1;
+                glyphWidth += (this.pathLength - textWidth) / numberOfSpaces;
+            }
+            const charEndPoint = this._getPointAtLength(offsetToGlyph + glyphWidth);
+            if (!charEndPoint)
+                return;
+            const width = Path_1.Path.getLineLength(charStartPoint.x, charStartPoint.y, charEndPoint.x, charEndPoint.y);
+            let kern = 0;
+            if (kerningFunc) {
+                try {
+                    kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();
+                }
+                catch (e) {
+                    kern = 0;
+                }
+            }
+            charStartPoint.x += kern;
+            charEndPoint.x += kern;
+            this.textWidth += kern;
+            const midpoint = Path_1.Path.getPointOnLine(kern + width / 2.0, charStartPoint.x, charStartPoint.y, charEndPoint.x, charEndPoint.y);
+            const rotation = Math.atan2(charEndPoint.y - charStartPoint.y, charEndPoint.x - charStartPoint.x);
+            this.glyphInfo.push({
+                transposeX: midpoint.x,
+                transposeY: midpoint.y,
+                text: charArr[i],
+                rotation: rotation,
+                p0: charStartPoint,
+                p1: charEndPoint,
+            });
+            offsetToGlyph += glyphWidth;
+        }
+    }
+    getSelfRect() {
+        if (!this.glyphInfo.length) {
+            return {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+            };
+        }
+        const points = [];
+        this.glyphInfo.forEach(function (info) {
+            points.push(info.p0.x);
+            points.push(info.p0.y);
+            points.push(info.p1.x);
+            points.push(info.p1.y);
+        });
+        let minX = points[0] || 0;
+        let maxX = points[0] || 0;
+        let minY = points[1] || 0;
+        let maxY = points[1] || 0;
+        let x, y;
+        for (let i = 0; i < points.length / 2; i++) {
+            x = points[i * 2];
+            y = points[i * 2 + 1];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+        }
+        const fontSize = this.fontSize();
+        return {
+            x: minX - fontSize / 2,
+            y: minY - fontSize / 2,
+            width: maxX - minX + fontSize,
+            height: maxY - minY + fontSize,
+        };
+    }
+    destroy() {
+        Util_1.Util.releaseCanvas(this.dummyCanvas);
+        return super.destroy();
+    }
+}
+exports.TextPath = TextPath;
+TextPath.prototype._fillFunc = _fillFunc;
+TextPath.prototype._strokeFunc = _strokeFunc;
+TextPath.prototype._fillFuncHit = _fillFunc;
+TextPath.prototype._strokeFuncHit = _strokeFunc;
+TextPath.prototype.className = 'TextPath';
+TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
+(0, Global_1._registerNode)(TextPath);
+Factory_1.Factory.addGetterSetter(TextPath, 'data');
+Factory_1.Factory.addGetterSetter(TextPath, 'fontFamily', 'Arial');
+Factory_1.Factory.addGetterSetter(TextPath, 'fontSize', 12, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(TextPath, 'fontStyle', NORMAL);
+Factory_1.Factory.addGetterSetter(TextPath, 'align', 'left');
+Factory_1.Factory.addGetterSetter(TextPath, 'letterSpacing', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(TextPath, 'textBaseline', 'middle');
+Factory_1.Factory.addGetterSetter(TextPath, 'fontVariant', NORMAL);
+Factory_1.Factory.addGetterSetter(TextPath, 'text', EMPTY_STRING);
+Factory_1.Factory.addGetterSetter(TextPath, 'textDecoration', '');
+Factory_1.Factory.addGetterSetter(TextPath, 'kerningFunc', undefined);

node_modules/konva/lib/shapes/Transformer.d.ts

@@ -0,0 +1,130 @@
+import { Transform } from '../Util.js';
+import { Node } from '../Node.js';
+import { Rect } from './Rect.js';
+import { Group } from '../Group.js';
+import { ContainerConfig } from '../Container.js';
+import { GetSet, IRect, Vector2d } from '../types.js';
+export interface Box extends IRect {
+    rotation: number;
+}
+export interface TransformerConfig extends ContainerConfig {
+    resizeEnabled?: boolean;
+    rotateEnabled?: boolean;
+    rotateLineVisible?: boolean;
+    rotationSnaps?: Array<number>;
+    rotationSnapTolerance?: number;
+    rotateAnchorOffset?: number;
+    rotateAnchorCursor?: string;
+    borderEnabled?: boolean;
+    borderStroke?: string;
+    borderStrokeWidth?: number;
+    borderDash?: Array<number>;
+    anchorFill?: string;
+    anchorStroke?: string;
+    anchorStrokeWidth?: number;
+    anchorSize?: number;
+    anchorCornerRadius?: number;
+    keepRatio?: boolean;
+    shiftBehavior?: string;
+    centeredScaling?: boolean;
+    enabledAnchors?: Array<string>;
+    flipEnabled?: boolean;
+    node?: Rect;
+    ignoreStroke?: boolean;
+    boundBoxFunc?: (oldBox: Box, newBox: Box) => Box;
+    useSingleNodeRotation?: boolean;
+    shouldOverdrawWholeArea?: boolean;
+    anchorDragBoundFunc?: (oldPos: Vector2d, newPos: Vector2d, evt: any) => Vector2d;
+    anchorStyleFunc?: (anchor: Rect) => void;
+}
+export declare class Transformer extends Group {
+    _nodes: Array<Node>;
+    _movingAnchorName: string | null;
+    _transforming: boolean;
+    _anchorDragOffset: Vector2d;
+    sin: number;
+    cos: number;
+    _cursorChange: boolean;
+    static isTransforming: () => boolean;
+    constructor(config?: TransformerConfig);
+    attachTo(node: Node): this;
+    setNode(node: Node): this;
+    getNode(): Node<import("../Node.js").NodeConfig>;
+    _getEventNamespace(): string;
+    setNodes(nodes?: Array<Node>): this;
+    _proxyDrag(node: Node): void;
+    getNodes(): Node<import("../Node.js").NodeConfig>[];
+    getActiveAnchor(): string | null;
+    detach(): void;
+    _resetTransformCache(): void;
+    _getNodeRect(): any;
+    __getNodeShape(node: Node, rot?: number, relative?: Node): {
+        rotation: number;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    __getNodeRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rotation: number;
+    };
+    getX(): any;
+    getY(): any;
+    getWidth(): any;
+    getHeight(): any;
+    _createElements(): void;
+    _createAnchor(name: any): void;
+    _createBack(): void;
+    _handleMouseDown(e: any): void;
+    _handleMouseMove(e: any): void;
+    _handleMouseUp(e: any): void;
+    getAbsoluteTransform(): Transform;
+    _removeEvents(e?: any): void;
+    _fitNodesInto(newAttrs: any, evt?: any): void;
+    forceUpdate(): void;
+    _batchChangeChild(selector: string, attrs: any): void;
+    update(): void;
+    isTransforming(): boolean;
+    stopTransform(): void;
+    destroy(): this;
+    toObject(): {
+        attrs: any;
+        className: string;
+        children?: Array<any>;
+    };
+    clone(obj?: any): this;
+    getClientRect(): IRect;
+    nodes: GetSet<Node[], this>;
+    enabledAnchors: GetSet<string[], this>;
+    rotationSnaps: GetSet<number[], this>;
+    anchorSize: GetSet<number, this>;
+    resizeEnabled: GetSet<boolean, this>;
+    rotateEnabled: GetSet<boolean, this>;
+    rotateLineVisible: GetSet<boolean, this>;
+    rotateAnchorOffset: GetSet<number, this>;
+    rotationSnapTolerance: GetSet<number, this>;
+    rotateAnchorCursor: GetSet<string, this>;
+    padding: GetSet<number, this>;
+    borderEnabled: GetSet<boolean, this>;
+    borderStroke: GetSet<string, this>;
+    borderStrokeWidth: GetSet<number, this>;
+    borderDash: GetSet<number[], this>;
+    anchorFill: GetSet<string, this>;
+    anchorStroke: GetSet<string, this>;
+    anchorCornerRadius: GetSet<number, this>;
+    anchorStrokeWidth: GetSet<number, this>;
+    keepRatio: GetSet<boolean, this>;
+    shiftBehavior: GetSet<string, this>;
+    centeredScaling: GetSet<boolean, this>;
+    flipEnabled: GetSet<boolean, this>;
+    ignoreStroke: GetSet<boolean, this>;
+    boundBoxFunc: GetSet<(oldBox: Box, newBox: Box) => Box, this>;
+    anchorDragBoundFunc: GetSet<(oldPos: Vector2d, newPos: Vector2d, e: MouseEvent) => Vector2d, this>;
+    anchorStyleFunc: GetSet<null | ((Node: Rect) => void), this>;
+    shouldOverdrawWholeArea: GetSet<boolean, this>;
+    useSingleNodeRotation: GetSet<boolean, this>;
+}

node_modules/konva/lib/shapes/Wedge.d.ts

@@ -0,0 +1,18 @@
+import { Context } from '../Context.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { GetSet } from '../types.js';
+export interface WedgeConfig extends ShapeConfig {
+    angle: number;
+    radius: number;
+    clockwise?: boolean;
+}
+export declare class Wedge extends Shape<WedgeConfig> {
+    _sceneFunc(context: Context): void;
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    radius: GetSet<number, this>;
+    angle: GetSet<number, this>;
+    clockwise: GetSet<boolean, this>;
+}

node_modules/konva/lib/shapes/Wedge.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wedge = void 0;
+const Factory_1 = require("../Factory");
+const Shape_1 = require("../Shape");
+const Global_1 = require("../Global");
+const Validators_1 = require("../Validators");
+const Global_2 = require("../Global");
+class Wedge extends Shape_1.Shape {
+    _sceneFunc(context) {
+        context.beginPath();
+        context.arc(0, 0, this.radius(), 0, Global_1.Konva.getAngle(this.angle()), this.clockwise());
+        context.lineTo(0, 0);
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    getWidth() {
+        return this.radius() * 2;
+    }
+    getHeight() {
+        return this.radius() * 2;
+    }
+    setWidth(width) {
+        this.radius(width / 2);
+    }
+    setHeight(height) {
+        this.radius(height / 2);
+    }
+}
+exports.Wedge = Wedge;
+Wedge.prototype.className = 'Wedge';
+Wedge.prototype._centroid = true;
+Wedge.prototype._attrsAffectingSize = ['radius'];
+(0, Global_2._registerNode)(Wedge);
+Factory_1.Factory.addGetterSetter(Wedge, 'radius', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Wedge, 'angle', 0, (0, Validators_1.getNumberValidator)());
+Factory_1.Factory.addGetterSetter(Wedge, 'clockwise', false);
+Factory_1.Factory.backCompat(Wedge, {
+    angleDeg: 'angle',
+    getAngleDeg: 'getAngle',
+    setAngleDeg: 'setAngle',
+});