Initial commit

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

@@ -0,0 +1,19 @@
+import { Shape, ShapeConfig } from '../Shape';
+import { GetSet } from '../types';
+export interface ArcConfig extends ShapeConfig {
+    angle: number;
+    innerRadius: number;
+    outerRadius: number;
+    clockwise?: boolean;
+}
+export declare class Arc extends Shape<ArcConfig> {
+    _sceneFunc(context: any): void;
+    getWidth(): number;
+    getHeight(): number;
+    setWidth(width: any): void;
+    setHeight(height: any): void;
+    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,35 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { Konva } from '../Global.js';
+import { getNumberValidator, getBooleanValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class Arc extends Shape {
+    _sceneFunc(context) {
+        var angle = 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);
+    }
+}
+Arc.prototype._centroid = true;
+Arc.prototype.className = 'Arc';
+Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+_registerNode(Arc);
+Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());
+Factory.addGetterSetter(Arc, 'outerRadius', 0, getNumberValidator());
+Factory.addGetterSetter(Arc, 'angle', 0, getNumberValidator());
+Factory.addGetterSetter(Arc, 'clockwise', false, getBooleanValidator());

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

@@ -0,0 +1,25 @@
+import { Line, LineConfig } from './Line';
+import { GetSet } from '../types';
+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: any): void;
+    __fillStroke(ctx: any): 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,99 @@
+import { Factory } from '../Factory.js';
+import { Line } from './Line.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+import { Path } from './Path.js';
+export class Arrow extends Line {
+    _sceneFunc(ctx) {
+        super._sceneFunc(ctx);
+        var PI2 = Math.PI * 2;
+        var points = this.points();
+        var tp = points;
+        var fromTension = this.tension() !== 0 && points.length > 4;
+        if (fromTension) {
+            tp = this.getTensionPoints();
+        }
+        var length = this.pointerLength();
+        var n = points.length;
+        var 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.calcLength(tp[tp.length - 4], tp[tp.length - 3], 'C', lp);
+            const previous = 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];
+        }
+        var radians = (Math.atan2(dy, dx) + PI2) % PI2;
+        var 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) {
+        var 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 - offset,
+            y: lineRect.y - offset,
+            width: lineRect.width + offset * 2,
+            height: lineRect.height + offset * 2,
+        };
+    }
+}
+Arrow.prototype.className = 'Arrow';
+_registerNode(Arrow);
+Factory.addGetterSetter(Arrow, 'pointerLength', 10, getNumberValidator());
+Factory.addGetterSetter(Arrow, 'pointerWidth', 10, getNumberValidator());
+Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false);
+Factory.addGetterSetter(Arrow, 'pointerAtEnding', true);

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

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

node_modules/konva/lib/shapes/Circle.js

@@ -0,0 +1,33 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class Circle extends 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);
+        }
+    }
+}
+Circle.prototype._centroid = true;
+Circle.prototype.className = 'Circle';
+Circle.prototype._attrsAffectingSize = ['radius'];
+_registerNode(Circle);
+Factory.addGetterSetter(Circle, 'radius', 0, getNumberValidator());

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

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

node_modules/konva/lib/shapes/Ellipse.js

@@ -0,0 +1,37 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class Ellipse extends Shape {
+    _sceneFunc(context) {
+        var 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);
+    }
+}
+Ellipse.prototype.className = 'Ellipse';
+Ellipse.prototype._centroid = true;
+Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
+_registerNode(Ellipse);
+Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);
+Factory.addGetterSetter(Ellipse, 'radiusX', 0, getNumberValidator());
+Factory.addGetterSetter(Ellipse, 'radiusY', 0, getNumberValidator());

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

@@ -0,0 +1,23 @@
+import { Shape, ShapeConfig } from '../Shape';
+import { GetSet, IRect } from '../types';
+import { Context } from '../Context';
+export interface ImageConfig extends ShapeConfig {
+    image: CanvasImageSource | undefined;
+    crop?: IRect;
+}
+export declare class Image extends Shape<ImageConfig> {
+    constructor(attrs: ImageConfig);
+    _setImageLoad(): void;
+    _useBufferCanvas(): boolean;
+    _sceneFunc(context: Context): void;
+    _hitFunc(context: any): void;
+    getWidth(): any;
+    getHeight(): any;
+    static fromURL(url: any, callback: any): 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>;
+}

node_modules/konva/lib/shapes/Image.js

@@ -0,0 +1,100 @@
+import { Util } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class Image extends Shape {
+    constructor(attrs) {
+        super(attrs);
+        this.on('imageChange.konva', () => {
+            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._requestDraw();
+            });
+        }
+    }
+    _useBufferCanvas() {
+        return super._useBufferCanvas(true);
+    }
+    _sceneFunc(context) {
+        const width = this.getWidth();
+        const height = this.getHeight();
+        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()) {
+            context.beginPath();
+            context.rect(0, 0, width, height);
+            context.closePath();
+            context.fillStrokeShape(this);
+        }
+        if (image) {
+            context.drawImage.apply(context, params);
+        }
+    }
+    _hitFunc(context) {
+        var width = this.width(), height = this.height();
+        context.beginPath();
+        context.rect(0, 0, width, height);
+        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) {
+        var img = Util.createImageElement();
+        img.onload = function () {
+            var image = new Image({
+                image: img,
+            });
+            callback(image);
+        };
+        img.crossOrigin = 'Anonymous';
+        img.src = url;
+    }
+}
+Image.prototype.className = 'Image';
+_registerNode(Image);
+Factory.addGetterSetter(Image, 'image');
+Factory.addComponentsGetterSetter(Image, 'crop', ['x', 'y', 'width', 'height']);
+Factory.addGetterSetter(Image, 'cropX', 0, getNumberValidator());
+Factory.addGetterSetter(Image, 'cropY', 0, getNumberValidator());
+Factory.addGetterSetter(Image, 'cropWidth', 0, getNumberValidator());
+Factory.addGetterSetter(Image, 'cropHeight', 0, getNumberValidator());

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

@@ -0,0 +1,35 @@
+import { Shape, ShapeConfig } from '../Shape';
+import { Group } from '../Group';
+import { ContainerConfig } from '../Container';
+import { GetSet } from '../types';
+import { Text } from './Text';
+export interface LabelConfig extends ContainerConfig {
+}
+export declare class Label extends Group {
+    constructor(config?: any);
+    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: any): void;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    pointerDirection: GetSet<'left' | 'top' | 'right' | 'bottom', this>;
+    pointerWidth: GetSet<number, this>;
+    pointerHeight: GetSet<number, this>;
+    cornerRadius: GetSet<number, this>;
+}

node_modules/konva/lib/shapes/Label.js

@@ -0,0 +1,166 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { Group } from '../Group.js';
+import { getNumberOrArrayOfNumbersValidator, getNumberValidator, } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+var ATTR_CHANGE_LIST = [
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'padding',
+    'lineHeight',
+    'text',
+    'width',
+    'height',
+], CHANGE_KONVA = 'Change.konva', NONE = 'none', UP = 'up', RIGHT = 'right', DOWN = 'down', LEFT = 'left', attrChangeListLen = ATTR_CHANGE_LIST.length;
+export class Label extends 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) {
+        var that = this, n;
+        var 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() {
+        var 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,
+            });
+        }
+    }
+}
+Label.prototype.className = 'Label';
+_registerNode(Label);
+export class Tag extends Shape {
+    _sceneFunc(context) {
+        var 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() {
+        var 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,
+        };
+    }
+}
+Tag.prototype.className = 'Tag';
+_registerNode(Tag);
+Factory.addGetterSetter(Tag, 'pointerDirection', NONE);
+Factory.addGetterSetter(Tag, 'pointerWidth', 0, getNumberValidator());
+Factory.addGetterSetter(Tag, 'pointerHeight', 0, getNumberValidator());
+Factory.addGetterSetter(Tag, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));

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

@@ -0,0 +1,28 @@
+import { Shape, ShapeConfig } from '../Shape';
+import { GetSet } from '../types';
+import { Context } from '../Context';
+export interface LineConfig extends ShapeConfig {
+    points?: number[];
+    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(): any[];
+    _getTensionPointsClosed(): any[];
+    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,155 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator, getNumberArrayValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
+    var 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) {
+    var len = p.length, allPoints = [], n, cp;
+    for (n = 2; n < len - 2; n += 2) {
+        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;
+}
+export class Line extends Shape {
+    constructor(config) {
+        super(config);
+        this.on('pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva', function () {
+            this._clearCache('tensionPoints');
+        });
+    }
+    _sceneFunc(context) {
+        var points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier(), tp, len, n;
+        if (!length) {
+            return;
+        }
+        context.beginPath();
+        context.moveTo(points[0], points[1]);
+        if (tension !== 0 && length > 4) {
+            tp = this.getTensionPoints();
+            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() {
+        var 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() {
+        var 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();
+        }
+        var minX = points[0];
+        var maxX = points[0];
+        var minY = points[1];
+        var maxY = points[1];
+        var x, y;
+        for (var 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,
+        };
+    }
+}
+Line.prototype.className = 'Line';
+Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
+_registerNode(Line);
+Factory.addGetterSetter(Line, 'closed', false);
+Factory.addGetterSetter(Line, 'bezier', false);
+Factory.addGetterSetter(Line, 'tension', 0, getNumberValidator());
+Factory.addGetterSetter(Line, 'points', [], getNumberArrayValidator());

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

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

node_modules/konva/lib/shapes/Path.js

@@ -0,0 +1,627 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { _registerNode } from '../Global.js';
+export class Path extends Shape {
+    constructor(config) {
+        super(config);
+        this.dataArray = [];
+        this.pathLength = 0;
+        this.dataArray = Path.parsePathData(this.data());
+        this.pathLength = 0;
+        for (var i = 0; i < this.dataArray.length; ++i) {
+            this.pathLength += this.dataArray[i].pathLength;
+        }
+        this.on('dataChange.konva', function () {
+            this.dataArray = Path.parsePathData(this.data());
+            this.pathLength = 0;
+            for (var i = 0; i < this.dataArray.length; ++i) {
+                this.pathLength += this.dataArray[i].pathLength;
+            }
+        });
+    }
+    _sceneFunc(context) {
+        var ca = this.dataArray;
+        context.beginPath();
+        var isClosed = false;
+        for (var n = 0; n < ca.length; n++) {
+            var c = ca[n].command;
+            var 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':
+                    var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7];
+                    var r = rx > ry ? rx : ry;
+                    var scaleX = rx > ry ? 1 : rx / ry;
+                    var 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() {
+        var points = [];
+        this.dataArray.forEach(function (data) {
+            if (data.command === 'A') {
+                var start = data.points[4];
+                var dTheta = data.points[5];
+                var end = data.points[4] + dTheta;
+                var 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);
+            }
+        });
+        var minX = points[0];
+        var maxX = points[0];
+        var minY = points[1];
+        var maxY = points[1];
+        var x, y;
+        for (var 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: Math.round(minX),
+            y: Math.round(minY),
+            width: Math.round(maxX - minX),
+            height: Math.round(maxY - minY),
+        };
+    }
+    getLength() {
+        return this.pathLength;
+    }
+    getPointAtLength(length) {
+        var point, i = 0, ii = this.dataArray.length;
+        if (!ii) {
+            return null;
+        }
+        while (i < ii && length > this.dataArray[i].pathLength) {
+            length -= this.dataArray[i].pathLength;
+            ++i;
+        }
+        if (i === ii) {
+            point = this.dataArray[i - 1].points.slice(-2);
+            return {
+                x: point[0],
+                y: point[1],
+            };
+        }
+        if (length < 0.01) {
+            point = this.dataArray[i].points.slice(0, 2);
+            return {
+                x: point[0],
+                y: point[1],
+            };
+        }
+        var cp = this.dataArray[i];
+        var 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(length / cp.pathLength, cp.start.x, cp.start.y, p[0], p[1], p[2], p[3], p[4], p[5]);
+            case 'Q':
+                return Path.getPointOnQuadraticBezier(length / cp.pathLength, cp.start.x, cp.start.y, p[0], p[1], p[2], p[3]);
+            case 'A':
+                var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6];
+                theta += (dTheta * length) / cp.pathLength;
+                return Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
+        }
+        return null;
+    }
+    static getLineLength(x1, y1, x2, y2) {
+        return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+    }
+    static getPointOnLine(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
+        if (fromX === undefined) {
+            fromX = P1x;
+        }
+        if (fromY === undefined) {
+            fromY = P1y;
+        }
+        var m = (P2y - P1y) / (P2x - P1x + 0.00000001);
+        var run = Math.sqrt((dist * dist) / (1 + m * m));
+        if (P2x < P1x) {
+            run *= -1;
+        }
+        var rise = m * run;
+        var pt;
+        if (P2x === P1x) {
+            pt = {
+                x: fromX,
+                y: fromY + rise,
+            };
+        }
+        else if ((fromY - P1y) / (fromX - P1x + 0.00000001) === m) {
+            pt = {
+                x: fromX + run,
+                y: fromY + rise,
+            };
+        }
+        else {
+            var ix, iy;
+            var len = this.getLineLength(P1x, P1y, P2x, P2y);
+            var u = (fromX - P1x) * (P2x - P1x) + (fromY - P1y) * (P2y - P1y);
+            u = u / (len * len);
+            ix = P1x + u * (P2x - P1x);
+            iy = P1y + u * (P2y - P1y);
+            var pRise = this.getLineLength(fromX, fromY, ix, iy);
+            var pRun = Math.sqrt(dist * dist - pRise * pRise);
+            run = Math.sqrt((pRun * pRun) / (1 + m * m));
+            if (P2x < P1x) {
+                run *= -1;
+            }
+            rise = m * run;
+            pt = {
+                x: ix + run,
+                y: iy + rise,
+            };
+        }
+        return pt;
+    }
+    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);
+        }
+        var x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
+        var y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
+        return {
+            x: x,
+            y: 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);
+        }
+        var x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
+        var y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
+        return {
+            x: x,
+            y: y,
+        };
+    }
+    static getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi) {
+        var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
+        var 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 [];
+        }
+        var cs = data;
+        var 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 (var n = 0; n < cc.length; n++) {
+            cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
+        }
+        var arr = cs.split('|');
+        var ca = [];
+        var coords = [];
+        var cpx = 0;
+        var cpy = 0;
+        var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
+        var match;
+        for (n = 1; n < arr.length; n++) {
+            var str = arr[n];
+            var c = str.charAt(0);
+            str = str.slice(1);
+            coords.length = 0;
+            while ((match = re.exec(str))) {
+                coords.push(match[0]);
+            }
+            var p = [];
+            for (var j = 0, jlen = coords.length; j < jlen; j++) {
+                if (coords[j] === '00') {
+                    p.push(0, 0);
+                    continue;
+                }
+                var parsed = parseFloat(coords[j]);
+                if (!isNaN(parsed)) {
+                    p.push(parsed);
+                }
+                else {
+                    p.push(0);
+                }
+            }
+            while (p.length > 0) {
+                if (isNaN(p[0])) {
+                    break;
+                }
+                var cmd = null;
+                var points = [];
+                var startX = cpx, startY = cpy;
+                var prevCmd, ctlPtx, ctlPty;
+                var 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':
+                        var dx = p.shift();
+                        var dy = p.shift();
+                        cpx += dx;
+                        cpy += dy;
+                        cmd = 'M';
+                        if (ca.length > 2 && ca[ca.length - 1].command === 'z') {
+                            for (var 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) {
+        var len, p1, p2, t;
+        var path = Path;
+        switch (cmd) {
+            case 'L':
+                return path.getLineLength(x, y, points[0], points[1]);
+            case 'C':
+                len = 0.0;
+                p1 = path.getPointOnCubicBezier(0, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
+                for (t = 0.01; t <= 1; t += 0.01) {
+                    p2 = path.getPointOnCubicBezier(t, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
+                    len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
+                    p1 = p2;
+                }
+                return len;
+            case 'Q':
+                len = 0.0;
+                p1 = path.getPointOnQuadraticBezier(0, x, y, points[0], points[1], points[2], points[3]);
+                for (t = 0.01; t <= 1; t += 0.01) {
+                    p2 = path.getPointOnQuadraticBezier(t, x, y, points[0], points[1], points[2], points[3]);
+                    len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
+                    p1 = p2;
+                }
+                return len;
+            case 'A':
+                len = 0.0;
+                var start = points[4];
+                var dTheta = points[5];
+                var end = points[4] + dTheta;
+                var 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) {
+        var psi = psiDeg * (Math.PI / 180.0);
+        var xp = (Math.cos(psi) * (x1 - x2)) / 2.0 + (Math.sin(psi) * (y1 - y2)) / 2.0;
+        var yp = (-1 * Math.sin(psi) * (x1 - x2)) / 2.0 +
+            (Math.cos(psi) * (y1 - y2)) / 2.0;
+        var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
+        if (lambda > 1) {
+            rx *= Math.sqrt(lambda);
+            ry *= Math.sqrt(lambda);
+        }
+        var 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;
+        }
+        var cxp = (f * rx * yp) / ry;
+        var cyp = (f * -ry * xp) / rx;
+        var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
+        var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
+        var vMag = function (v) {
+            return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+        };
+        var vRatio = function (u, v) {
+            return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
+        };
+        var vAngle = function (u, v) {
+            return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
+        };
+        var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
+        var u = [(xp - cxp) / rx, (yp - cyp) / ry];
+        var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
+        var 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];
+    }
+}
+Path.prototype.className = 'Path';
+Path.prototype._attrsAffectingSize = ['data'];
+_registerNode(Path);
+Factory.addGetterSetter(Path, 'data');

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

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

node_modules/konva/lib/shapes/Rect.js

@@ -0,0 +1,42 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { _registerNode } from '../Global.js';
+import { getNumberOrArrayOfNumbersValidator } from '../Validators.js';
+export class Rect extends Shape {
+    _sceneFunc(context) {
+        var cornerRadius = this.cornerRadius(), width = this.width(), height = this.height();
+        context.beginPath();
+        if (!cornerRadius) {
+            context.rect(0, 0, width, height);
+        }
+        else {
+            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.moveTo(topLeft, 0);
+            context.lineTo(width - topRight, 0);
+            context.arc(width - topRight, topRight, topRight, (Math.PI * 3) / 2, 0, false);
+            context.lineTo(width, height - bottomRight);
+            context.arc(width - bottomRight, height - bottomRight, bottomRight, 0, Math.PI / 2, false);
+            context.lineTo(bottomLeft, height);
+            context.arc(bottomLeft, height - bottomLeft, bottomLeft, Math.PI / 2, Math.PI, false);
+            context.lineTo(0, topLeft);
+            context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
+        }
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+}
+Rect.prototype.className = 'Rect';
+_registerNode(Rect);
+Factory.addGetterSetter(Rect, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));

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

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

node_modules/konva/lib/shapes/RegularPolygon.js

@@ -0,0 +1,65 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class RegularPolygon extends Shape {
+    _sceneFunc(context) {
+        const points = this._getPoints();
+        context.beginPath();
+        context.moveTo(points[0].x, points[0].y);
+        for (var 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 (var 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();
+        var minX = points[0].x;
+        var maxX = points[0].y;
+        var minY = points[0].x;
+        var 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);
+    }
+}
+RegularPolygon.prototype.className = 'RegularPolygon';
+RegularPolygon.prototype._centroid = true;
+RegularPolygon.prototype._attrsAffectingSize = ['radius'];
+_registerNode(RegularPolygon);
+Factory.addGetterSetter(RegularPolygon, 'radius', 0, getNumberValidator());
+Factory.addGetterSetter(RegularPolygon, 'sides', 0, getNumberValidator());

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

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

node_modules/konva/lib/shapes/Ring.js

@@ -0,0 +1,33 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+var PIx2 = Math.PI * 2;
+export class Ring extends 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);
+    }
+}
+Ring.prototype.className = 'Ring';
+Ring.prototype._centroid = true;
+Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+_registerNode(Ring);
+Factory.addGetterSetter(Ring, 'innerRadius', 0, getNumberValidator());
+Factory.addGetterSetter(Ring, 'outerRadius', 0, getNumberValidator());

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

@@ -0,0 +1,30 @@
+import { Shape, ShapeConfig } from '../Shape';
+import { Animation } from '../Animation';
+import { GetSet } from '../types';
+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: any);
+    _sceneFunc(context: any): void;
+    _hitFunc(context: any): 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,108 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { Animation } from '../Animation.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class Sprite extends Shape {
+    constructor(config) {
+        super(config);
+        this._updated = true;
+        this.anim = new Animation(() => {
+            var 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) {
+        var 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) {
+                var 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) {
+        var 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) {
+            var offset = offsets[anim];
+            var 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() {
+        var that = this;
+        this.interval = setInterval(function () {
+            that._updateIndex();
+        }, 1000 / this.frameRate());
+    }
+    start() {
+        if (this.isRunning()) {
+            return;
+        }
+        var 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() {
+        var 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);
+        }
+    }
+}
+Sprite.prototype.className = 'Sprite';
+_registerNode(Sprite);
+Factory.addGetterSetter(Sprite, 'animation');
+Factory.addGetterSetter(Sprite, 'animations');
+Factory.addGetterSetter(Sprite, 'frameOffsets');
+Factory.addGetterSetter(Sprite, 'image');
+Factory.addGetterSetter(Sprite, 'frameIndex', 0, getNumberValidator());
+Factory.addGetterSetter(Sprite, 'frameRate', 17, getNumberValidator());
+Factory.backCompat(Sprite, {
+    index: 'frameIndex',
+    getIndex: 'getFrameIndex',
+    setIndex: 'setFrameIndex',
+});

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

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

node_modules/konva/lib/shapes/Star.js

@@ -0,0 +1,38 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class Star extends Shape {
+    _sceneFunc(context) {
+        var innerRadius = this.innerRadius(), outerRadius = this.outerRadius(), numPoints = this.numPoints();
+        context.beginPath();
+        context.moveTo(0, 0 - outerRadius);
+        for (var n = 1; n < numPoints * 2; n++) {
+            var radius = n % 2 === 0 ? outerRadius : innerRadius;
+            var x = radius * Math.sin((n * Math.PI) / numPoints);
+            var 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);
+    }
+}
+Star.prototype.className = 'Star';
+Star.prototype._centroid = true;
+Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+_registerNode(Star);
+Factory.addGetterSetter(Star, 'numPoints', 5, getNumberValidator());
+Factory.addGetterSetter(Star, 'innerRadius', 0, getNumberValidator());
+Factory.addGetterSetter(Star, 'outerRadius', 0, getNumberValidator());

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

@@ -0,0 +1,59 @@
+import { Shape, ShapeConfig } from '../Shape';
+import { GetSet } from '../types';
+export declare function stringToArray(string: string): string[];
+export interface TextConfig extends ShapeConfig {
+    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;
+    }>;
+    _partialText: string;
+    _partialTextX: number;
+    _partialTextY: number;
+    textWidth: number;
+    textHeight: number;
+    constructor(config?: TextConfig);
+    _sceneFunc(context: any): void;
+    _hitFunc(context: any): void;
+    setText(text: any): this;
+    getWidth(): any;
+    getHeight(): any;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    measureSize(text: any): {
+        width: any;
+        height: number;
+    };
+    _getContextFont(): string;
+    _addTextLine(line: any): number;
+    _getTextWidth(text: any): any;
+    _setTextData(): void;
+    getStrokeScaleEnabled(): boolean;
+    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,347 @@
+import { Util } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { getNumberValidator, getStringValidator, getNumberOrAutoValidator, getBooleanValidator, } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export function stringToArray(string) {
+    return Array.from(string);
+}
+var AUTO = 'auto', CENTER = 'center', 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', WORD = 'word', CHAR = 'char', NONE = 'none', ELLIPSIS = '…', ATTR_CHANGE_LIST = [
+    '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(', ');
+}
+var dummyContext;
+function getDummyContext() {
+    if (dummyContext) {
+        return dummyContext;
+    }
+    dummyContext = Util.createCanvasElement().getContext(CONTEXT_2D);
+    return dummyContext;
+}
+function _fillFunc(context) {
+    context.fillText(this._partialText, this._partialTextX, this._partialTextY);
+}
+function _strokeFunc(context) {
+    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;
+}
+export class Text extends Shape {
+    constructor(config) {
+        super(checkDefaultFill(config));
+        this._partialTextX = 0;
+        this._partialTextY = 0;
+        for (var n = 0; n < attrChangeListLen; n++) {
+            this.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, this._setTextData);
+        }
+        this._setTextData();
+    }
+    _sceneFunc(context) {
+        var textArr = this.textArr, textArrLen = textArr.length;
+        if (!this.text()) {
+            return;
+        }
+        var padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), 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;
+        var translateY = 0;
+        var translateY = lineHeightPx / 2;
+        var lineTranslateX = 0;
+        var lineTranslateY = 0;
+        context.setAttr('font', this._getContextFont());
+        context.setAttr('textBaseline', MIDDLE);
+        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++) {
+            var lineTranslateX = 0;
+            var lineTranslateY = 0;
+            var obj = textArr[n], text = obj.text, width = obj.width, lastLine = n !== textArrLen - 1, spacesNumber, oneWord, lineWidth;
+            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();
+                context.moveTo(lineTranslateX, translateY + lineTranslateY + Math.round(fontSize / 2));
+                spacesNumber = text.split(' ').length - 1;
+                oneWord = spacesNumber === 0;
+                lineWidth =
+                    align === JUSTIFY && lastLine && !oneWord
+                        ? totalWidth - padding * 2
+                        : width;
+                context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + Math.round(fontSize / 2));
+                context.lineWidth = fontSize / 15;
+                context.strokeStyle = fill;
+                context.stroke();
+                context.restore();
+            }
+            if (shouldLineThrough) {
+                context.save();
+                context.beginPath();
+                context.moveTo(lineTranslateX, translateY + lineTranslateY);
+                spacesNumber = text.split(' ').length - 1;
+                oneWord = spacesNumber === 0;
+                lineWidth =
+                    align === JUSTIFY && lastLine && !oneWord
+                        ? totalWidth - padding * 2
+                        : width;
+                context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY);
+                context.lineWidth = fontSize / 15;
+                context.strokeStyle = fill;
+                context.stroke();
+                context.restore();
+            }
+            if (letterSpacing !== 0 || align === JUSTIFY) {
+                spacesNumber = text.split(' ').length - 1;
+                var array = stringToArray(text);
+                for (var li = 0; li < array.length; li++) {
+                    var letter = array[li];
+                    if (letter === ' ' && n !== textArrLen - 1 && 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 {
+                this._partialTextX = lineTranslateX;
+                this._partialTextY = translateY + lineTranslateY;
+                this._partialText = text;
+                context.fillStrokeShape(this);
+            }
+            context.restore();
+            if (textArrLen > 1) {
+                translateY += lineHeightPx;
+            }
+        }
+    }
+    _hitFunc(context) {
+        var width = this.getWidth(), height = this.getHeight();
+        context.beginPath();
+        context.rect(0, 0, width, height);
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+    setText(text) {
+        var str = Util._isString(text)
+            ? text
+            : text === null || text === undefined
+                ? ''
+                : text + '';
+        this._setAttr(TEXT, str);
+        return this;
+    }
+    getWidth() {
+        var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
+        return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
+    }
+    getHeight() {
+        var 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.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 _context = getDummyContext(), fontSize = this.fontSize(), metrics;
+        _context.save();
+        _context.font = this._getContextFont();
+        metrics = _context.measureText(text);
+        _context.restore();
+        return {
+            width: metrics.width,
+            height: fontSize,
+        };
+    }
+    _getContextFont() {
+        return (this.fontStyle() +
+            SPACE +
+            this.fontVariant() +
+            SPACE +
+            (this.fontSize() + PX_SPACE) +
+            normalizeFontFamily(this.fontFamily()));
+    }
+    _addTextLine(line) {
+        if (this.align() === JUSTIFY) {
+            line = line.trim();
+        }
+        var width = this._getTextWidth(line);
+        return this.textArr.push({ text: line, width: width });
+    }
+    _getTextWidth(text) {
+        var letterSpacing = this.letterSpacing();
+        var length = text.length;
+        return (getDummyContext().measureText(text).width +
+            (length ? letterSpacing * (length - 1) : 0));
+    }
+    _setTextData() {
+        var 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();
+        var additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
+        for (var i = 0, max = lines.length; i < max; ++i) {
+            var line = lines[i];
+            var lineWidth = this._getTextWidth(line);
+            if (fixedWidth && lineWidth > maxWidth) {
+                while (line.length > 0) {
+                    var low = 0, high = line.length, match = '', matchWidth = 0;
+                    while (low < high) {
+                        var mid = (low + high) >>> 1, substr = line.slice(0, mid + 1), substrWidth = this._getTextWidth(substr) + additionalWidth;
+                        if (substrWidth <= maxWidth) {
+                            low = mid + 1;
+                            match = substr;
+                            matchWidth = substrWidth;
+                        }
+                        else {
+                            high = mid;
+                        }
+                    }
+                    if (match) {
+                        if (wrapAtWord) {
+                            var wrapIndex;
+                            var nextChar = line[match.length];
+                            var nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
+                            if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
+                                wrapIndex = match.length;
+                            }
+                            else {
+                                wrapIndex =
+                                    Math.max(match.lastIndexOf(SPACE), match.lastIndexOf(DASH)) +
+                                        1;
+                            }
+                            if (wrapIndex > 0) {
+                                low = wrapIndex;
+                                match = match.slice(0, low);
+                                matchWidth = this._getTextWidth(match);
+                            }
+                        }
+                        match = match.trimRight();
+                        this._addTextLine(match);
+                        textWidth = Math.max(textWidth, matchWidth);
+                        currentHeightPx += lineHeightPx;
+                        if (!shouldWrap ||
+                            (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx)) {
+                            var lastLine = this.textArr[this.textArr.length - 1];
+                            if (lastLine) {
+                                if (shouldAddEllipsis) {
+                                    var 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);
+                                }
+                            }
+                            break;
+                        }
+                        line = line.slice(low);
+                        line = line.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 (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx) {
+                break;
+            }
+        }
+        this.textHeight = fontSize;
+        this.textWidth = textWidth;
+    }
+    getStrokeScaleEnabled() {
+        return true;
+    }
+}
+Text.prototype._fillFunc = _fillFunc;
+Text.prototype._strokeFunc = _strokeFunc;
+Text.prototype.className = TEXT_UPPER;
+Text.prototype._attrsAffectingSize = [
+    'text',
+    'fontSize',
+    'padding',
+    'wrap',
+    'lineHeight',
+    'letterSpacing',
+];
+_registerNode(Text);
+Factory.overWriteSetter(Text, 'width', getNumberOrAutoValidator());
+Factory.overWriteSetter(Text, 'height', getNumberOrAutoValidator());
+Factory.addGetterSetter(Text, 'fontFamily', 'Arial');
+Factory.addGetterSetter(Text, 'fontSize', 12, getNumberValidator());
+Factory.addGetterSetter(Text, 'fontStyle', NORMAL);
+Factory.addGetterSetter(Text, 'fontVariant', NORMAL);
+Factory.addGetterSetter(Text, 'padding', 0, getNumberValidator());
+Factory.addGetterSetter(Text, 'align', LEFT);
+Factory.addGetterSetter(Text, 'verticalAlign', TOP);
+Factory.addGetterSetter(Text, 'lineHeight', 1, getNumberValidator());
+Factory.addGetterSetter(Text, 'wrap', WORD);
+Factory.addGetterSetter(Text, 'ellipsis', false, getBooleanValidator());
+Factory.addGetterSetter(Text, 'letterSpacing', 0, getNumberValidator());
+Factory.addGetterSetter(Text, 'text', '', getStringValidator());
+Factory.addGetterSetter(Text, 'textDecoration', '');

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

@@ -0,0 +1,54 @@
+import { Shape, ShapeConfig } from '../Shape';
+import { GetSet, Vector2d } from '../types';
+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: any[];
+    glyphInfo: Array<{
+        transposeX: number;
+        transposeY: number;
+        text: string;
+        rotation: number;
+        p0: Vector2d;
+        p1: Vector2d;
+    }>;
+    partialText: string;
+    textWidth: number;
+    textHeight: number;
+    constructor(config?: TextPathConfig);
+    _sceneFunc(context: any): void;
+    _hitFunc(context: any): void;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    setText(text: any): any;
+    _getContextFont(): any;
+    _getTextSize(text: any): {
+        width: number;
+        height: number;
+    };
+    _setTextData(): void;
+    getSelfRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    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,343 @@
+import { Util } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { Path } from './Path.js';
+import { Text, stringToArray } from './Text.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+var EMPTY_STRING = '', NORMAL = 'normal';
+function _fillFunc(context) {
+    context.fillText(this.partialText, 0, 0);
+}
+function _strokeFunc(context) {
+    context.strokeText(this.partialText, 0, 0);
+}
+export class TextPath extends Shape {
+    constructor(config) {
+        super(config);
+        this.dummyCanvas = Util.createCanvasElement();
+        this.dataArray = [];
+        this.dataArray = Path.parsePathData(this.attrs.data);
+        this.on('dataChange.konva', function () {
+            this.dataArray = Path.parsePathData(this.attrs.data);
+            this._setTextData();
+        });
+        this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva', this._setTextData);
+        this._setTextData();
+    }
+    _sceneFunc(context) {
+        context.setAttr('font', this._getContextFont());
+        context.setAttr('textBaseline', this.textBaseline());
+        context.setAttr('textAlign', 'left');
+        context.save();
+        var textDecoration = this.textDecoration();
+        var fill = this.fill();
+        var fontSize = this.fontSize();
+        var glyphInfo = this.glyphInfo;
+        if (textDecoration === 'underline') {
+            context.beginPath();
+        }
+        for (var i = 0; i < glyphInfo.length; i++) {
+            context.save();
+            var 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();
+        var glyphInfo = this.glyphInfo;
+        if (glyphInfo.length >= 1) {
+            var p0 = glyphInfo[0].p0;
+            context.moveTo(p0.x, p0.y);
+        }
+        for (var i = 0; i < glyphInfo.length; i++) {
+            var 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.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.prototype.setText.call(this, text);
+    }
+    _getContextFont() {
+        return Text.prototype._getContextFont.call(this);
+    }
+    _getTextSize(text) {
+        var dummyCanvas = this.dummyCanvas;
+        var _context = dummyCanvas.getContext('2d');
+        _context.save();
+        _context.font = this._getContextFont();
+        var metrics = _context.measureText(text);
+        _context.restore();
+        return {
+            width: metrics.width,
+            height: parseInt(this.attrs.fontSize, 10),
+        };
+    }
+    _setTextData() {
+        var that = this;
+        var size = this._getTextSize(this.attrs.text);
+        var letterSpacing = this.letterSpacing();
+        var align = this.align();
+        var kerningFunc = this.kerningFunc();
+        this.textWidth = size.width;
+        this.textHeight = size.height;
+        var textFullWidth = Math.max(this.textWidth + ((this.attrs.text || '').length - 1) * letterSpacing, 0);
+        this.glyphInfo = [];
+        var fullPathWidth = 0;
+        for (var l = 0; l < that.dataArray.length; l++) {
+            if (that.dataArray[l].pathLength > 0) {
+                fullPathWidth += that.dataArray[l].pathLength;
+            }
+        }
+        var offset = 0;
+        if (align === 'center') {
+            offset = Math.max(0, fullPathWidth / 2 - textFullWidth / 2);
+        }
+        if (align === 'right') {
+            offset = Math.max(0, fullPathWidth - textFullWidth);
+        }
+        var charArr = stringToArray(this.text());
+        var spacesNumber = this.text().split(' ').length - 1;
+        var p0, p1, pathCmd;
+        var pIndex = -1;
+        var currentT = 0;
+        var getNextPathSegment = function () {
+            currentT = 0;
+            var pathData = that.dataArray;
+            for (var j = pIndex + 1; j < pathData.length; j++) {
+                if (pathData[j].pathLength > 0) {
+                    pIndex = j;
+                    return pathData[j];
+                }
+                else if (pathData[j].command === 'M') {
+                    p0 = {
+                        x: pathData[j].points[0],
+                        y: pathData[j].points[1],
+                    };
+                }
+            }
+            return {};
+        };
+        var findSegmentToFitCharacter = function (c) {
+            var glyphWidth = that._getTextSize(c).width + letterSpacing;
+            if (c === ' ' && align === 'justify') {
+                glyphWidth += (fullPathWidth - textFullWidth) / spacesNumber;
+            }
+            var currLen = 0;
+            var attempts = 0;
+            p1 = undefined;
+            while (Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 &&
+                attempts < 20) {
+                attempts++;
+                var cumulativePathLength = currLen;
+                while (pathCmd === undefined) {
+                    pathCmd = getNextPathSegment();
+                    if (pathCmd &&
+                        cumulativePathLength + pathCmd.pathLength < glyphWidth) {
+                        cumulativePathLength += pathCmd.pathLength;
+                        pathCmd = undefined;
+                    }
+                }
+                if (pathCmd === {} || p0 === undefined) {
+                    return undefined;
+                }
+                var needNewSegment = false;
+                switch (pathCmd.command) {
+                    case 'L':
+                        if (Path.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
+                            p1 = Path.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
+                        }
+                        else {
+                            pathCmd = undefined;
+                        }
+                        break;
+                    case 'A':
+                        var start = pathCmd.points[4];
+                        var dTheta = pathCmd.points[5];
+                        var end = pathCmd.points[4] + dTheta;
+                        if (currentT === 0) {
+                            currentT = start + 0.00000001;
+                        }
+                        else if (glyphWidth > currLen) {
+                            currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);
+                        }
+                        else {
+                            currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);
+                        }
+                        if ((dTheta < 0 && currentT < end) ||
+                            (dTheta >= 0 && currentT > end)) {
+                            currentT = end;
+                            needNewSegment = true;
+                        }
+                        p1 = Path.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]);
+                        break;
+                    case 'C':
+                        if (currentT === 0) {
+                            if (glyphWidth > pathCmd.pathLength) {
+                                currentT = 0.00000001;
+                            }
+                            else {
+                                currentT = glyphWidth / pathCmd.pathLength;
+                            }
+                        }
+                        else if (glyphWidth > currLen) {
+                            currentT += (glyphWidth - currLen) / pathCmd.pathLength / 2;
+                        }
+                        else {
+                            currentT = Math.max(currentT - (currLen - glyphWidth) / pathCmd.pathLength / 2, 0);
+                        }
+                        if (currentT > 1.0) {
+                            currentT = 1.0;
+                            needNewSegment = true;
+                        }
+                        p1 = Path.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]);
+                        break;
+                    case 'Q':
+                        if (currentT === 0) {
+                            currentT = glyphWidth / pathCmd.pathLength;
+                        }
+                        else if (glyphWidth > currLen) {
+                            currentT += (glyphWidth - currLen) / pathCmd.pathLength;
+                        }
+                        else {
+                            currentT -= (currLen - glyphWidth) / pathCmd.pathLength;
+                        }
+                        if (currentT > 1.0) {
+                            currentT = 1.0;
+                            needNewSegment = true;
+                        }
+                        p1 = Path.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]);
+                        break;
+                }
+                if (p1 !== undefined) {
+                    currLen = Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
+                }
+                if (needNewSegment) {
+                    needNewSegment = false;
+                    pathCmd = undefined;
+                }
+            }
+        };
+        var testChar = 'C';
+        var glyphWidth = that._getTextSize(testChar).width + letterSpacing;
+        var lettersInOffset = offset / glyphWidth - 1;
+        for (var k = 0; k < lettersInOffset; k++) {
+            findSegmentToFitCharacter(testChar);
+            if (p0 === undefined || p1 === undefined) {
+                break;
+            }
+            p0 = p1;
+        }
+        for (var i = 0; i < charArr.length; i++) {
+            findSegmentToFitCharacter(charArr[i]);
+            if (p0 === undefined || p1 === undefined) {
+                break;
+            }
+            var width = Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
+            var kern = 0;
+            if (kerningFunc) {
+                try {
+                    kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();
+                }
+                catch (e) {
+                    kern = 0;
+                }
+            }
+            p0.x += kern;
+            p1.x += kern;
+            this.textWidth += kern;
+            var midpoint = Path.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
+            var rotation = Math.atan2(p1.y - p0.y, p1.x - p0.x);
+            this.glyphInfo.push({
+                transposeX: midpoint.x,
+                transposeY: midpoint.y,
+                text: charArr[i],
+                rotation: rotation,
+                p0: p0,
+                p1: p1,
+            });
+            p0 = p1;
+        }
+    }
+    getSelfRect() {
+        if (!this.glyphInfo.length) {
+            return {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+            };
+        }
+        var 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);
+        });
+        var minX = points[0] || 0;
+        var maxX = points[0] || 0;
+        var minY = points[1] || 0;
+        var maxY = points[1] || 0;
+        var x, y;
+        for (var 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);
+        }
+        var fontSize = this.fontSize();
+        return {
+            x: minX - fontSize / 2,
+            y: minY - fontSize / 2,
+            width: maxX - minX + fontSize,
+            height: maxY - minY + fontSize,
+        };
+    }
+}
+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'];
+_registerNode(TextPath);
+Factory.addGetterSetter(TextPath, 'data');
+Factory.addGetterSetter(TextPath, 'fontFamily', 'Arial');
+Factory.addGetterSetter(TextPath, 'fontSize', 12, getNumberValidator());
+Factory.addGetterSetter(TextPath, 'fontStyle', NORMAL);
+Factory.addGetterSetter(TextPath, 'align', 'left');
+Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
+Factory.addGetterSetter(TextPath, 'textBaseline', 'middle');
+Factory.addGetterSetter(TextPath, 'fontVariant', NORMAL);
+Factory.addGetterSetter(TextPath, 'text', EMPTY_STRING);
+Factory.addGetterSetter(TextPath, 'textDecoration', null);
+Factory.addGetterSetter(TextPath, 'kerningFunc', null);

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

@@ -0,0 +1,112 @@
+import { Transform } from '../Util';
+import { Node } from '../Node';
+import { Rect } from './Rect';
+import { Group } from '../Group';
+import { ContainerConfig } from '../Container';
+import { GetSet, IRect, Vector2d } from '../types';
+export interface Box extends IRect {
+    rotation: number;
+}
+export interface TransformerConfig extends ContainerConfig {
+    resizeEnabled?: boolean;
+    rotateEnabled?: boolean;
+    rotationSnaps?: Array<number>;
+    rotationSnapTolerance?: number;
+    rotateAnchorOffset?: number;
+    borderEnabled?: boolean;
+    borderStroke?: string;
+    borderStrokeWidth?: number;
+    borderDash?: Array<number>;
+    anchorFill?: string;
+    anchorStroke?: string;
+    anchorStrokeWidth?: number;
+    anchorSize?: number;
+    anchorCornerRadius?: number;
+    keepRatio?: boolean;
+    centeredScaling?: boolean;
+    enabledAnchors?: Array<string>;
+    flipEnabled?: boolean;
+    node?: Rect;
+    ignoreStroke?: boolean;
+    boundBoxFunc?: (oldBox: Box, newBox: Box) => Box;
+    useSingleNodeRotation?: boolean;
+    shouldOverdrawWholeArea?: boolean;
+}
+export declare class Transformer extends Group {
+    _nodes: Array<Node>;
+    _movingAnchorName: string;
+    _transforming: boolean;
+    _anchorDragOffset: Vector2d;
+    sin: number;
+    cos: number;
+    _cursorChange: boolean;
+    constructor(config?: TransformerConfig);
+    attachTo(node: any): this;
+    setNode(node: any): this;
+    getNode(): Node<import("../Node").NodeConfig>;
+    setNodes(nodes?: Array<Node>): this;
+    _proxyDrag(node: Node): void;
+    getNodes(): Node<import("../Node").NodeConfig>[];
+    getActiveAnchor(): string;
+    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(): any;
+    nodes: GetSet<Node[], this>;
+    enabledAnchors: GetSet<string[], this>;
+    rotationSnaps: GetSet<number[], this>;
+    anchorSize: GetSet<number, this>;
+    resizeEnabled: GetSet<boolean, this>;
+    rotateEnabled: GetSet<boolean, this>;
+    rotateAnchorOffset: GetSet<number, this>;
+    rotationSnapTolerance: GetSet<number, 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>;
+    centeredScaling: GetSet<boolean, this>;
+    flipEnabled: GetSet<boolean, this>;
+    ignoreStroke: GetSet<boolean, this>;
+    boundBoxFunc: GetSet<(oldBox: Box, newBox: Box) => Box, this>;
+    shouldOverdrawWholeArea: GetSet<boolean, this>;
+    useSingleNodeRotation: GetSet<boolean, this>;
+}

node_modules/konva/lib/shapes/Transformer.js

@@ -0,0 +1,944 @@
+import { Util, Transform } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Node } from '../Node.js';
+import { Shape } from '../Shape.js';
+import { Rect } from './Rect.js';
+import { Group } from '../Group.js';
+import { Konva } from '../Global.js';
+import { getBooleanValidator, getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+var EVENTS_NAME = 'tr-konva';
+var ATTR_CHANGE_LIST = [
+    'resizeEnabledChange',
+    'rotateAnchorOffsetChange',
+    'rotateEnabledChange',
+    'enabledAnchorsChange',
+    'anchorSizeChange',
+    'borderEnabledChange',
+    'borderStrokeChange',
+    'borderStrokeWidthChange',
+    'borderDashChange',
+    'anchorStrokeChange',
+    'anchorStrokeWidthChange',
+    'anchorFillChange',
+    'anchorCornerRadiusChange',
+    'ignoreStrokeChange',
+]
+    .map((e) => e + `.${EVENTS_NAME}`)
+    .join(' ');
+var NODES_RECT = 'nodesRect';
+var TRANSFORM_CHANGE_STR = [
+    'widthChange',
+    'heightChange',
+    'scaleXChange',
+    'scaleYChange',
+    'skewXChange',
+    'skewYChange',
+    'rotationChange',
+    'offsetXChange',
+    'offsetYChange',
+    'transformsEnabledChange',
+    'strokeWidthChange',
+]
+    .map((e) => e + `.${EVENTS_NAME}`)
+    .join(' ');
+var ANGLES = {
+    'top-left': -45,
+    'top-center': 0,
+    'top-right': 45,
+    'middle-right': -90,
+    'middle-left': 90,
+    'bottom-left': -135,
+    'bottom-center': 180,
+    'bottom-right': 135,
+};
+const TOUCH_DEVICE = 'ontouchstart' in Konva._global;
+function getCursor(anchorName, rad) {
+    if (anchorName === 'rotater') {
+        return 'crosshair';
+    }
+    rad += Util.degToRad(ANGLES[anchorName] || 0);
+    var angle = ((Util.radToDeg(rad) % 360) + 360) % 360;
+    if (Util._inRange(angle, 315 + 22.5, 360) || Util._inRange(angle, 0, 22.5)) {
+        return 'ns-resize';
+    }
+    else if (Util._inRange(angle, 45 - 22.5, 45 + 22.5)) {
+        return 'nesw-resize';
+    }
+    else if (Util._inRange(angle, 90 - 22.5, 90 + 22.5)) {
+        return 'ew-resize';
+    }
+    else if (Util._inRange(angle, 135 - 22.5, 135 + 22.5)) {
+        return 'nwse-resize';
+    }
+    else if (Util._inRange(angle, 180 - 22.5, 180 + 22.5)) {
+        return 'ns-resize';
+    }
+    else if (Util._inRange(angle, 225 - 22.5, 225 + 22.5)) {
+        return 'nesw-resize';
+    }
+    else if (Util._inRange(angle, 270 - 22.5, 270 + 22.5)) {
+        return 'ew-resize';
+    }
+    else if (Util._inRange(angle, 315 - 22.5, 315 + 22.5)) {
+        return 'nwse-resize';
+    }
+    else {
+        Util.error('Transformer has unknown angle for cursor detection: ' + angle);
+        return 'pointer';
+    }
+}
+var ANCHORS_NAMES = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'middle-right',
+    'middle-left',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+var MAX_SAFE_INTEGER = 100000000;
+function getCenter(shape) {
+    return {
+        x: shape.x +
+            (shape.width / 2) * Math.cos(shape.rotation) +
+            (shape.height / 2) * Math.sin(-shape.rotation),
+        y: shape.y +
+            (shape.height / 2) * Math.cos(shape.rotation) +
+            (shape.width / 2) * Math.sin(shape.rotation),
+    };
+}
+function rotateAroundPoint(shape, angleRad, point) {
+    const x = point.x +
+        (shape.x - point.x) * Math.cos(angleRad) -
+        (shape.y - point.y) * Math.sin(angleRad);
+    const y = point.y +
+        (shape.x - point.x) * Math.sin(angleRad) +
+        (shape.y - point.y) * Math.cos(angleRad);
+    return Object.assign(Object.assign({}, shape), { rotation: shape.rotation + angleRad, x,
+        y });
+}
+function rotateAroundCenter(shape, deltaRad) {
+    const center = getCenter(shape);
+    return rotateAroundPoint(shape, deltaRad, center);
+}
+function getSnap(snaps, newRotationRad, tol) {
+    let snapped = newRotationRad;
+    for (let i = 0; i < snaps.length; i++) {
+        const angle = Konva.getAngle(snaps[i]);
+        const absDiff = Math.abs(angle - newRotationRad) % (Math.PI * 2);
+        const dif = Math.min(absDiff, Math.PI * 2 - absDiff);
+        if (dif < tol) {
+            snapped = angle;
+        }
+    }
+    return snapped;
+}
+export class Transformer extends Group {
+    constructor(config) {
+        super(config);
+        this._transforming = false;
+        this._createElements();
+        this._handleMouseMove = this._handleMouseMove.bind(this);
+        this._handleMouseUp = this._handleMouseUp.bind(this);
+        this.update = this.update.bind(this);
+        this.on(ATTR_CHANGE_LIST, this.update);
+        if (this.getNode()) {
+            this.update();
+        }
+    }
+    attachTo(node) {
+        this.setNode(node);
+        return this;
+    }
+    setNode(node) {
+        Util.warn('tr.setNode(shape), tr.node(shape) and tr.attachTo(shape) methods are deprecated. Please use tr.nodes(nodesArray) instead.');
+        return this.setNodes([node]);
+    }
+    getNode() {
+        return this._nodes && this._nodes[0];
+    }
+    setNodes(nodes = []) {
+        if (this._nodes && this._nodes.length) {
+            this.detach();
+        }
+        this._nodes = nodes;
+        if (nodes.length === 1 && this.useSingleNodeRotation()) {
+            this.rotation(nodes[0].getAbsoluteRotation());
+        }
+        else {
+            this.rotation(0);
+        }
+        this._nodes.forEach((node) => {
+            const additionalEvents = node._attrsAffectingSize
+                .map((prop) => prop + 'Change.' + EVENTS_NAME)
+                .join(' ');
+            const onChange = () => {
+                if (this.nodes().length === 1 && this.useSingleNodeRotation()) {
+                    this.rotation(this.nodes()[0].getAbsoluteRotation());
+                }
+                this._resetTransformCache();
+                if (!this._transforming && !this.isDragging()) {
+                    this.update();
+                }
+            };
+            node.on(additionalEvents, onChange);
+            node.on(TRANSFORM_CHANGE_STR, onChange);
+            node.on(`absoluteTransformChange.${EVENTS_NAME}`, onChange);
+            node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, onChange);
+            this._proxyDrag(node);
+        });
+        this._resetTransformCache();
+        var elementsCreated = !!this.findOne('.top-left');
+        if (elementsCreated) {
+            this.update();
+        }
+        return this;
+    }
+    _proxyDrag(node) {
+        let lastPos;
+        node.on(`dragstart.${EVENTS_NAME}`, (e) => {
+            lastPos = node.getAbsolutePosition();
+            if (!this.isDragging() && node !== this.findOne('.back')) {
+                this.startDrag(e, false);
+            }
+        });
+        node.on(`dragmove.${EVENTS_NAME}`, (e) => {
+            if (!lastPos) {
+                return;
+            }
+            const abs = node.getAbsolutePosition();
+            const dx = abs.x - lastPos.x;
+            const dy = abs.y - lastPos.y;
+            this.nodes().forEach((otherNode) => {
+                if (otherNode === node) {
+                    return;
+                }
+                if (otherNode.isDragging()) {
+                    return;
+                }
+                const otherAbs = otherNode.getAbsolutePosition();
+                otherNode.setAbsolutePosition({
+                    x: otherAbs.x + dx,
+                    y: otherAbs.y + dy,
+                });
+                otherNode.startDrag(e);
+            });
+            lastPos = null;
+        });
+    }
+    getNodes() {
+        return this._nodes || [];
+    }
+    getActiveAnchor() {
+        return this._movingAnchorName;
+    }
+    detach() {
+        if (this._nodes) {
+            this._nodes.forEach((node) => {
+                node.off('.' + EVENTS_NAME);
+            });
+        }
+        this._nodes = [];
+        this._resetTransformCache();
+    }
+    _resetTransformCache() {
+        this._clearCache(NODES_RECT);
+        this._clearCache('transform');
+        this._clearSelfAndDescendantCache('absoluteTransform');
+    }
+    _getNodeRect() {
+        return this._getCache(NODES_RECT, this.__getNodeRect);
+    }
+    __getNodeShape(node, rot = this.rotation(), relative) {
+        var rect = node.getClientRect({
+            skipTransform: true,
+            skipShadow: true,
+            skipStroke: this.ignoreStroke(),
+        });
+        var absScale = node.getAbsoluteScale(relative);
+        var absPos = node.getAbsolutePosition(relative);
+        var dx = rect.x * absScale.x - node.offsetX() * absScale.x;
+        var dy = rect.y * absScale.y - node.offsetY() * absScale.y;
+        const rotation = (Konva.getAngle(node.getAbsoluteRotation()) + Math.PI * 2) %
+            (Math.PI * 2);
+        const box = {
+            x: absPos.x + dx * Math.cos(rotation) + dy * Math.sin(-rotation),
+            y: absPos.y + dy * Math.cos(rotation) + dx * Math.sin(rotation),
+            width: rect.width * absScale.x,
+            height: rect.height * absScale.y,
+            rotation: rotation,
+        };
+        return rotateAroundPoint(box, -Konva.getAngle(rot), {
+            x: 0,
+            y: 0,
+        });
+    }
+    __getNodeRect() {
+        var node = this.getNode();
+        if (!node) {
+            return {
+                x: -MAX_SAFE_INTEGER,
+                y: -MAX_SAFE_INTEGER,
+                width: 0,
+                height: 0,
+                rotation: 0,
+            };
+        }
+        const totalPoints = [];
+        this.nodes().map((node) => {
+            const box = node.getClientRect({
+                skipTransform: true,
+                skipShadow: true,
+                skipStroke: this.ignoreStroke(),
+            });
+            var points = [
+                { x: box.x, y: box.y },
+                { x: box.x + box.width, y: box.y },
+                { x: box.x + box.width, y: box.y + box.height },
+                { x: box.x, y: box.y + box.height },
+            ];
+            var trans = node.getAbsoluteTransform();
+            points.forEach(function (point) {
+                var transformed = trans.point(point);
+                totalPoints.push(transformed);
+            });
+        });
+        const tr = new Transform();
+        tr.rotate(-Konva.getAngle(this.rotation()));
+        var minX, minY, maxX, maxY;
+        totalPoints.forEach(function (point) {
+            var transformed = tr.point(point);
+            if (minX === undefined) {
+                minX = maxX = transformed.x;
+                minY = maxY = transformed.y;
+            }
+            minX = Math.min(minX, transformed.x);
+            minY = Math.min(minY, transformed.y);
+            maxX = Math.max(maxX, transformed.x);
+            maxY = Math.max(maxY, transformed.y);
+        });
+        tr.invert();
+        const p = tr.point({ x: minX, y: minY });
+        return {
+            x: p.x,
+            y: p.y,
+            width: maxX - minX,
+            height: maxY - minY,
+            rotation: Konva.getAngle(this.rotation()),
+        };
+    }
+    getX() {
+        return this._getNodeRect().x;
+    }
+    getY() {
+        return this._getNodeRect().y;
+    }
+    getWidth() {
+        return this._getNodeRect().width;
+    }
+    getHeight() {
+        return this._getNodeRect().height;
+    }
+    _createElements() {
+        this._createBack();
+        ANCHORS_NAMES.forEach(function (name) {
+            this._createAnchor(name);
+        }.bind(this));
+        this._createAnchor('rotater');
+    }
+    _createAnchor(name) {
+        var anchor = new Rect({
+            stroke: 'rgb(0, 161, 255)',
+            fill: 'white',
+            strokeWidth: 1,
+            name: name + ' _anchor',
+            dragDistance: 0,
+            draggable: true,
+            hitStrokeWidth: TOUCH_DEVICE ? 10 : 'auto',
+        });
+        var self = this;
+        anchor.on('mousedown touchstart', function (e) {
+            self._handleMouseDown(e);
+        });
+        anchor.on('dragstart', (e) => {
+            anchor.stopDrag();
+            e.cancelBubble = true;
+        });
+        anchor.on('dragend', (e) => {
+            e.cancelBubble = true;
+        });
+        anchor.on('mouseenter', () => {
+            var rad = Konva.getAngle(this.rotation());
+            var cursor = getCursor(name, rad);
+            anchor.getStage().content &&
+                (anchor.getStage().content.style.cursor = cursor);
+            this._cursorChange = true;
+        });
+        anchor.on('mouseout', () => {
+            anchor.getStage().content &&
+                (anchor.getStage().content.style.cursor = '');
+            this._cursorChange = false;
+        });
+        this.add(anchor);
+    }
+    _createBack() {
+        var back = new Shape({
+            name: 'back',
+            width: 0,
+            height: 0,
+            draggable: true,
+            sceneFunc(ctx) {
+                var tr = this.getParent();
+                var padding = tr.padding();
+                ctx.beginPath();
+                ctx.rect(-padding, -padding, this.width() + padding * 2, this.height() + padding * 2);
+                ctx.moveTo(this.width() / 2, -padding);
+                if (tr.rotateEnabled()) {
+                    ctx.lineTo(this.width() / 2, -tr.rotateAnchorOffset() * Util._sign(this.height()) - padding);
+                }
+                ctx.fillStrokeShape(this);
+            },
+            hitFunc: (ctx, shape) => {
+                if (!this.shouldOverdrawWholeArea()) {
+                    return;
+                }
+                var padding = this.padding();
+                ctx.beginPath();
+                ctx.rect(-padding, -padding, shape.width() + padding * 2, shape.height() + padding * 2);
+                ctx.fillStrokeShape(shape);
+            },
+        });
+        this.add(back);
+        this._proxyDrag(back);
+        back.on('dragstart', (e) => {
+            e.cancelBubble = true;
+        });
+        back.on('dragmove', (e) => {
+            e.cancelBubble = true;
+        });
+        back.on('dragend', (e) => {
+            e.cancelBubble = true;
+        });
+        this.on('dragmove', (e) => {
+            this.update();
+        });
+    }
+    _handleMouseDown(e) {
+        this._movingAnchorName = e.target.name().split(' ')[0];
+        var attrs = this._getNodeRect();
+        var width = attrs.width;
+        var height = attrs.height;
+        var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+        this.sin = Math.abs(height / hypotenuse);
+        this.cos = Math.abs(width / hypotenuse);
+        if (typeof window !== 'undefined') {
+            window.addEventListener('mousemove', this._handleMouseMove);
+            window.addEventListener('touchmove', this._handleMouseMove);
+            window.addEventListener('mouseup', this._handleMouseUp, true);
+            window.addEventListener('touchend', this._handleMouseUp, true);
+        }
+        this._transforming = true;
+        var ap = e.target.getAbsolutePosition();
+        var pos = e.target.getStage().getPointerPosition();
+        this._anchorDragOffset = {
+            x: pos.x - ap.x,
+            y: pos.y - ap.y,
+        };
+        this._fire('transformstart', { evt: e, target: this.getNode() });
+        this._nodes.forEach((target) => {
+            target._fire('transformstart', { evt: e, target });
+        });
+    }
+    _handleMouseMove(e) {
+        var x, y, newHypotenuse;
+        var anchorNode = this.findOne('.' + this._movingAnchorName);
+        var stage = anchorNode.getStage();
+        stage.setPointersPositions(e);
+        const pp = stage.getPointerPosition();
+        var newNodePos = {
+            x: pp.x - this._anchorDragOffset.x,
+            y: pp.y - this._anchorDragOffset.y,
+        };
+        const oldAbs = anchorNode.getAbsolutePosition();
+        anchorNode.setAbsolutePosition(newNodePos);
+        const newAbs = anchorNode.getAbsolutePosition();
+        if (oldAbs.x === newAbs.x && oldAbs.y === newAbs.y) {
+            return;
+        }
+        if (this._movingAnchorName === 'rotater') {
+            var attrs = this._getNodeRect();
+            x = anchorNode.x() - attrs.width / 2;
+            y = -anchorNode.y() + attrs.height / 2;
+            let delta = Math.atan2(-y, x) + Math.PI / 2;
+            if (attrs.height < 0) {
+                delta -= Math.PI;
+            }
+            var oldRotation = Konva.getAngle(this.rotation());
+            const newRotation = oldRotation + delta;
+            const tol = Konva.getAngle(this.rotationSnapTolerance());
+            const snappedRot = getSnap(this.rotationSnaps(), newRotation, tol);
+            const diff = snappedRot - attrs.rotation;
+            const shape = rotateAroundCenter(attrs, diff);
+            this._fitNodesInto(shape, e);
+            return;
+        }
+        var keepProportion = this.keepRatio() || e.shiftKey;
+        var centeredScaling = this.centeredScaling() || e.altKey;
+        if (this._movingAnchorName === 'top-left') {
+            if (keepProportion) {
+                var comparePoint = centeredScaling
+                    ? {
+                        x: this.width() / 2,
+                        y: this.height() / 2,
+                    }
+                    : {
+                        x: this.findOne('.bottom-right').x(),
+                        y: this.findOne('.bottom-right').y(),
+                    };
+                newHypotenuse = Math.sqrt(Math.pow(comparePoint.x - anchorNode.x(), 2) +
+                    Math.pow(comparePoint.y - anchorNode.y(), 2));
+                var reverseX = this.findOne('.top-left').x() > comparePoint.x ? -1 : 1;
+                var reverseY = this.findOne('.top-left').y() > comparePoint.y ? -1 : 1;
+                x = newHypotenuse * this.cos * reverseX;
+                y = newHypotenuse * this.sin * reverseY;
+                this.findOne('.top-left').x(comparePoint.x - x);
+                this.findOne('.top-left').y(comparePoint.y - y);
+            }
+        }
+        else if (this._movingAnchorName === 'top-center') {
+            this.findOne('.top-left').y(anchorNode.y());
+        }
+        else if (this._movingAnchorName === 'top-right') {
+            if (keepProportion) {
+                var comparePoint = centeredScaling
+                    ? {
+                        x: this.width() / 2,
+                        y: this.height() / 2,
+                    }
+                    : {
+                        x: this.findOne('.bottom-left').x(),
+                        y: this.findOne('.bottom-left').y(),
+                    };
+                newHypotenuse = Math.sqrt(Math.pow(anchorNode.x() - comparePoint.x, 2) +
+                    Math.pow(comparePoint.y - anchorNode.y(), 2));
+                var reverseX = this.findOne('.top-right').x() < comparePoint.x ? -1 : 1;
+                var reverseY = this.findOne('.top-right').y() > comparePoint.y ? -1 : 1;
+                x = newHypotenuse * this.cos * reverseX;
+                y = newHypotenuse * this.sin * reverseY;
+                this.findOne('.top-right').x(comparePoint.x + x);
+                this.findOne('.top-right').y(comparePoint.y - y);
+            }
+            var pos = anchorNode.position();
+            this.findOne('.top-left').y(pos.y);
+            this.findOne('.bottom-right').x(pos.x);
+        }
+        else if (this._movingAnchorName === 'middle-left') {
+            this.findOne('.top-left').x(anchorNode.x());
+        }
+        else if (this._movingAnchorName === 'middle-right') {
+            this.findOne('.bottom-right').x(anchorNode.x());
+        }
+        else if (this._movingAnchorName === 'bottom-left') {
+            if (keepProportion) {
+                var comparePoint = centeredScaling
+                    ? {
+                        x: this.width() / 2,
+                        y: this.height() / 2,
+                    }
+                    : {
+                        x: this.findOne('.top-right').x(),
+                        y: this.findOne('.top-right').y(),
+                    };
+                newHypotenuse = Math.sqrt(Math.pow(comparePoint.x - anchorNode.x(), 2) +
+                    Math.pow(anchorNode.y() - comparePoint.y, 2));
+                var reverseX = comparePoint.x < anchorNode.x() ? -1 : 1;
+                var reverseY = anchorNode.y() < comparePoint.y ? -1 : 1;
+                x = newHypotenuse * this.cos * reverseX;
+                y = newHypotenuse * this.sin * reverseY;
+                anchorNode.x(comparePoint.x - x);
+                anchorNode.y(comparePoint.y + y);
+            }
+            pos = anchorNode.position();
+            this.findOne('.top-left').x(pos.x);
+            this.findOne('.bottom-right').y(pos.y);
+        }
+        else if (this._movingAnchorName === 'bottom-center') {
+            this.findOne('.bottom-right').y(anchorNode.y());
+        }
+        else if (this._movingAnchorName === 'bottom-right') {
+            if (keepProportion) {
+                var comparePoint = centeredScaling
+                    ? {
+                        x: this.width() / 2,
+                        y: this.height() / 2,
+                    }
+                    : {
+                        x: this.findOne('.top-left').x(),
+                        y: this.findOne('.top-left').y(),
+                    };
+                newHypotenuse = Math.sqrt(Math.pow(anchorNode.x() - comparePoint.x, 2) +
+                    Math.pow(anchorNode.y() - comparePoint.y, 2));
+                var reverseX = this.findOne('.bottom-right').x() < comparePoint.x ? -1 : 1;
+                var reverseY = this.findOne('.bottom-right').y() < comparePoint.y ? -1 : 1;
+                x = newHypotenuse * this.cos * reverseX;
+                y = newHypotenuse * this.sin * reverseY;
+                this.findOne('.bottom-right').x(comparePoint.x + x);
+                this.findOne('.bottom-right').y(comparePoint.y + y);
+            }
+        }
+        else {
+            console.error(new Error('Wrong position argument of selection resizer: ' +
+                this._movingAnchorName));
+        }
+        var centeredScaling = this.centeredScaling() || e.altKey;
+        if (centeredScaling) {
+            var topLeft = this.findOne('.top-left');
+            var bottomRight = this.findOne('.bottom-right');
+            var topOffsetX = topLeft.x();
+            var topOffsetY = topLeft.y();
+            var bottomOffsetX = this.getWidth() - bottomRight.x();
+            var bottomOffsetY = this.getHeight() - bottomRight.y();
+            bottomRight.move({
+                x: -topOffsetX,
+                y: -topOffsetY,
+            });
+            topLeft.move({
+                x: bottomOffsetX,
+                y: bottomOffsetY,
+            });
+        }
+        var absPos = this.findOne('.top-left').getAbsolutePosition();
+        x = absPos.x;
+        y = absPos.y;
+        var width = this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
+        var height = this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
+        this._fitNodesInto({
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+            rotation: Konva.getAngle(this.rotation()),
+        }, e);
+    }
+    _handleMouseUp(e) {
+        this._removeEvents(e);
+    }
+    getAbsoluteTransform() {
+        return this.getTransform();
+    }
+    _removeEvents(e) {
+        if (this._transforming) {
+            this._transforming = false;
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('mousemove', this._handleMouseMove);
+                window.removeEventListener('touchmove', this._handleMouseMove);
+                window.removeEventListener('mouseup', this._handleMouseUp, true);
+                window.removeEventListener('touchend', this._handleMouseUp, true);
+            }
+            var node = this.getNode();
+            this._fire('transformend', { evt: e, target: node });
+            if (node) {
+                this._nodes.forEach((target) => {
+                    target._fire('transformend', { evt: e, target });
+                });
+            }
+            this._movingAnchorName = null;
+        }
+    }
+    _fitNodesInto(newAttrs, evt) {
+        var oldAttrs = this._getNodeRect();
+        const minSize = 1;
+        if (Util._inRange(newAttrs.width, -this.padding() * 2 - minSize, minSize)) {
+            this.update();
+            return;
+        }
+        if (Util._inRange(newAttrs.height, -this.padding() * 2 - minSize, minSize)) {
+            this.update();
+            return;
+        }
+        const allowNegativeScale = this.flipEnabled();
+        var t = new Transform();
+        t.rotate(Konva.getAngle(this.rotation()));
+        if (this._movingAnchorName &&
+            newAttrs.width < 0 &&
+            this._movingAnchorName.indexOf('left') >= 0) {
+            const offset = t.point({
+                x: -this.padding() * 2,
+                y: 0,
+            });
+            newAttrs.x += offset.x;
+            newAttrs.y += offset.y;
+            newAttrs.width += this.padding() * 2;
+            this._movingAnchorName = this._movingAnchorName.replace('left', 'right');
+            this._anchorDragOffset.x -= offset.x;
+            this._anchorDragOffset.y -= offset.y;
+            if (!allowNegativeScale) {
+                this.update();
+                return;
+            }
+        }
+        else if (this._movingAnchorName &&
+            newAttrs.width < 0 &&
+            this._movingAnchorName.indexOf('right') >= 0) {
+            const offset = t.point({
+                x: this.padding() * 2,
+                y: 0,
+            });
+            this._movingAnchorName = this._movingAnchorName.replace('right', 'left');
+            this._anchorDragOffset.x -= offset.x;
+            this._anchorDragOffset.y -= offset.y;
+            newAttrs.width += this.padding() * 2;
+            if (!allowNegativeScale) {
+                this.update();
+                return;
+            }
+        }
+        if (this._movingAnchorName &&
+            newAttrs.height < 0 &&
+            this._movingAnchorName.indexOf('top') >= 0) {
+            const offset = t.point({
+                x: 0,
+                y: -this.padding() * 2,
+            });
+            newAttrs.x += offset.x;
+            newAttrs.y += offset.y;
+            this._movingAnchorName = this._movingAnchorName.replace('top', 'bottom');
+            this._anchorDragOffset.x -= offset.x;
+            this._anchorDragOffset.y -= offset.y;
+            newAttrs.height += this.padding() * 2;
+            if (!allowNegativeScale) {
+                this.update();
+                return;
+            }
+        }
+        else if (this._movingAnchorName &&
+            newAttrs.height < 0 &&
+            this._movingAnchorName.indexOf('bottom') >= 0) {
+            const offset = t.point({
+                x: 0,
+                y: this.padding() * 2,
+            });
+            this._movingAnchorName = this._movingAnchorName.replace('bottom', 'top');
+            this._anchorDragOffset.x -= offset.x;
+            this._anchorDragOffset.y -= offset.y;
+            newAttrs.height += this.padding() * 2;
+            if (!allowNegativeScale) {
+                this.update();
+                return;
+            }
+        }
+        if (this.boundBoxFunc()) {
+            const bounded = this.boundBoxFunc()(oldAttrs, newAttrs);
+            if (bounded) {
+                newAttrs = bounded;
+            }
+            else {
+                Util.warn('boundBoxFunc returned falsy. You should return new bound rect from it!');
+            }
+        }
+        const baseSize = 10000000;
+        const oldTr = new Transform();
+        oldTr.translate(oldAttrs.x, oldAttrs.y);
+        oldTr.rotate(oldAttrs.rotation);
+        oldTr.scale(oldAttrs.width / baseSize, oldAttrs.height / baseSize);
+        const newTr = new Transform();
+        newTr.translate(newAttrs.x, newAttrs.y);
+        newTr.rotate(newAttrs.rotation);
+        newTr.scale(newAttrs.width / baseSize, newAttrs.height / baseSize);
+        const delta = newTr.multiply(oldTr.invert());
+        this._nodes.forEach((node) => {
+            var _a;
+            const parentTransform = node.getParent().getAbsoluteTransform();
+            const localTransform = node.getTransform().copy();
+            localTransform.translate(node.offsetX(), node.offsetY());
+            const newLocalTransform = new Transform();
+            newLocalTransform
+                .multiply(parentTransform.copy().invert())
+                .multiply(delta)
+                .multiply(parentTransform)
+                .multiply(localTransform);
+            const attrs = newLocalTransform.decompose();
+            node.setAttrs(attrs);
+            this._fire('transform', { evt: evt, target: node });
+            node._fire('transform', { evt: evt, target: node });
+            (_a = node.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
+        });
+        this.rotation(Util._getRotation(newAttrs.rotation));
+        this._resetTransformCache();
+        this.update();
+        this.getLayer().batchDraw();
+    }
+    forceUpdate() {
+        this._resetTransformCache();
+        this.update();
+    }
+    _batchChangeChild(selector, attrs) {
+        const anchor = this.findOne(selector);
+        anchor.setAttrs(attrs);
+    }
+    update() {
+        var _a;
+        var attrs = this._getNodeRect();
+        this.rotation(Util._getRotation(attrs.rotation));
+        var width = attrs.width;
+        var height = attrs.height;
+        var enabledAnchors = this.enabledAnchors();
+        var resizeEnabled = this.resizeEnabled();
+        var padding = this.padding();
+        var anchorSize = this.anchorSize();
+        this.find('._anchor').forEach((node) => {
+            node.setAttrs({
+                width: anchorSize,
+                height: anchorSize,
+                offsetX: anchorSize / 2,
+                offsetY: anchorSize / 2,
+                stroke: this.anchorStroke(),
+                strokeWidth: this.anchorStrokeWidth(),
+                fill: this.anchorFill(),
+                cornerRadius: this.anchorCornerRadius(),
+            });
+        });
+        this._batchChangeChild('.top-left', {
+            x: 0,
+            y: 0,
+            offsetX: anchorSize / 2 + padding,
+            offsetY: anchorSize / 2 + padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('top-left') >= 0,
+        });
+        this._batchChangeChild('.top-center', {
+            x: width / 2,
+            y: 0,
+            offsetY: anchorSize / 2 + padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('top-center') >= 0,
+        });
+        this._batchChangeChild('.top-right', {
+            x: width,
+            y: 0,
+            offsetX: anchorSize / 2 - padding,
+            offsetY: anchorSize / 2 + padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('top-right') >= 0,
+        });
+        this._batchChangeChild('.middle-left', {
+            x: 0,
+            y: height / 2,
+            offsetX: anchorSize / 2 + padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('middle-left') >= 0,
+        });
+        this._batchChangeChild('.middle-right', {
+            x: width,
+            y: height / 2,
+            offsetX: anchorSize / 2 - padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('middle-right') >= 0,
+        });
+        this._batchChangeChild('.bottom-left', {
+            x: 0,
+            y: height,
+            offsetX: anchorSize / 2 + padding,
+            offsetY: anchorSize / 2 - padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('bottom-left') >= 0,
+        });
+        this._batchChangeChild('.bottom-center', {
+            x: width / 2,
+            y: height,
+            offsetY: anchorSize / 2 - padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('bottom-center') >= 0,
+        });
+        this._batchChangeChild('.bottom-right', {
+            x: width,
+            y: height,
+            offsetX: anchorSize / 2 - padding,
+            offsetY: anchorSize / 2 - padding,
+            visible: resizeEnabled && enabledAnchors.indexOf('bottom-right') >= 0,
+        });
+        this._batchChangeChild('.rotater', {
+            x: width / 2,
+            y: -this.rotateAnchorOffset() * Util._sign(height) - padding,
+            visible: this.rotateEnabled(),
+        });
+        this._batchChangeChild('.back', {
+            width: width,
+            height: height,
+            visible: this.borderEnabled(),
+            stroke: this.borderStroke(),
+            strokeWidth: this.borderStrokeWidth(),
+            dash: this.borderDash(),
+            x: 0,
+            y: 0,
+        });
+        (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
+    }
+    isTransforming() {
+        return this._transforming;
+    }
+    stopTransform() {
+        if (this._transforming) {
+            this._removeEvents();
+            var anchorNode = this.findOne('.' + this._movingAnchorName);
+            if (anchorNode) {
+                anchorNode.stopDrag();
+            }
+        }
+    }
+    destroy() {
+        if (this.getStage() && this._cursorChange) {
+            this.getStage().content && (this.getStage().content.style.cursor = '');
+        }
+        Group.prototype.destroy.call(this);
+        this.detach();
+        this._removeEvents();
+        return this;
+    }
+    toObject() {
+        return Node.prototype.toObject.call(this);
+    }
+}
+function validateAnchors(val) {
+    if (!(val instanceof Array)) {
+        Util.warn('enabledAnchors value should be an array');
+    }
+    if (val instanceof Array) {
+        val.forEach(function (name) {
+            if (ANCHORS_NAMES.indexOf(name) === -1) {
+                Util.warn('Unknown anchor name: ' +
+                    name +
+                    '. Available names are: ' +
+                    ANCHORS_NAMES.join(', '));
+            }
+        });
+    }
+    return val || [];
+}
+Transformer.prototype.className = 'Transformer';
+_registerNode(Transformer);
+Factory.addGetterSetter(Transformer, 'enabledAnchors', ANCHORS_NAMES, validateAnchors);
+Factory.addGetterSetter(Transformer, 'flipEnabled', true, getBooleanValidator());
+Factory.addGetterSetter(Transformer, 'resizeEnabled', true);
+Factory.addGetterSetter(Transformer, 'anchorSize', 10, getNumberValidator());
+Factory.addGetterSetter(Transformer, 'rotateEnabled', true);
+Factory.addGetterSetter(Transformer, 'rotationSnaps', []);
+Factory.addGetterSetter(Transformer, 'rotateAnchorOffset', 50, getNumberValidator());
+Factory.addGetterSetter(Transformer, 'rotationSnapTolerance', 5, getNumberValidator());
+Factory.addGetterSetter(Transformer, 'borderEnabled', true);
+Factory.addGetterSetter(Transformer, 'anchorStroke', 'rgb(0, 161, 255)');
+Factory.addGetterSetter(Transformer, 'anchorStrokeWidth', 1, getNumberValidator());
+Factory.addGetterSetter(Transformer, 'anchorFill', 'white');
+Factory.addGetterSetter(Transformer, 'anchorCornerRadius', 0, getNumberValidator());
+Factory.addGetterSetter(Transformer, 'borderStroke', 'rgb(0, 161, 255)');
+Factory.addGetterSetter(Transformer, 'borderStrokeWidth', 1, getNumberValidator());
+Factory.addGetterSetter(Transformer, 'borderDash');
+Factory.addGetterSetter(Transformer, 'keepRatio', true);
+Factory.addGetterSetter(Transformer, 'centeredScaling', false);
+Factory.addGetterSetter(Transformer, 'ignoreStroke', false);
+Factory.addGetterSetter(Transformer, 'padding', 0, getNumberValidator());
+Factory.addGetterSetter(Transformer, 'node');
+Factory.addGetterSetter(Transformer, 'nodes');
+Factory.addGetterSetter(Transformer, 'boundBoxFunc');
+Factory.addGetterSetter(Transformer, 'shouldOverdrawWholeArea', false);
+Factory.addGetterSetter(Transformer, 'useSingleNodeRotation', true);
+Factory.backCompat(Transformer, {
+    lineEnabled: 'borderEnabled',
+    rotateHandlerOffset: 'rotateAnchorOffset',
+    enabledHandlers: 'enabledAnchors',
+});

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

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

node_modules/konva/lib/shapes/Wedge.js

@@ -0,0 +1,38 @@
+import { Factory } from '../Factory.js';
+import { Shape } from '../Shape.js';
+import { Konva } from '../Global.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
+export class Wedge extends Shape {
+    _sceneFunc(context) {
+        context.beginPath();
+        context.arc(0, 0, this.radius(), 0, 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);
+    }
+}
+Wedge.prototype.className = 'Wedge';
+Wedge.prototype._centroid = true;
+Wedge.prototype._attrsAffectingSize = ['radius'];
+_registerNode(Wedge);
+Factory.addGetterSetter(Wedge, 'radius', 0, getNumberValidator());
+Factory.addGetterSetter(Wedge, 'angle', 0, getNumberValidator());
+Factory.addGetterSetter(Wedge, 'clockwise', false);
+Factory.backCompat(Wedge, {
+    angleDeg: 'angle',
+    getAngleDeg: 'getAngle',
+    setAngleDeg: 'setAngle',
+});