@inweb/markup 25.7.4

package/dist/markup.module.js

@@ -0,0 +1,1838 @@
+import Konva from "konva";
+
+var MarkupMode;
+
+(function(MarkupMode) {
+    MarkupMode["SelectMarkup"] = "SelectMarkup";
+    MarkupMode["Line"] = "Line";
+    MarkupMode["Text"] = "Text";
+    MarkupMode["Rectangle"] = "Rectangle";
+    MarkupMode["Ellipse"] = "Ellipse";
+    MarkupMode["Arrow"] = "Arrow";
+    MarkupMode["Image"] = "Image";
+    MarkupMode["Cloud"] = "Cloud";
+})(MarkupMode || (MarkupMode = {}));
+
+class MarkupColor {
+    get HexColor() {
+        return "#" + this._hex;
+    }
+    get RGB() {
+        return {
+            r: this.R,
+            g: this.G,
+            b: this.B
+        };
+    }
+    constructor(r, g, b) {
+        this.setColor(r, g, b);
+    }
+    setColor(r, g, b) {
+        this.R = r;
+        this.G = g;
+        this.B = b;
+        this._hex = this.rgbToHex(r, g, b);
+    }
+    rgbToHex(r, g, b) {
+        const valueToHex = c => {
+            const hex = c.toString(16);
+            return hex === "0" ? "00" : hex;
+        };
+        return valueToHex(r) + valueToHex(g) + valueToHex(b);
+    }
+}
+
+const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
+
+class KonvaLine {
+    constructor(params, ref = null) {
+        var _a, _b;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params.points) return;
+        const konvaPoints = [];
+        params.points.forEach((point => konvaPoints.push(point.x, point.y)));
+        this._ref = new Konva.Line({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.width) !== null && _b !== void 0 ? _b : 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            points: konvaPoints,
+            draggable: true,
+            strokeScaleEnabled: false,
+            dash: LineTypeSpecs.get(params.type) || []
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "line";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPoints() {
+        return this._ref.points();
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+    getLineType() {
+        const typeSpecs = this._ref.dash() || [];
+        let type;
+        switch (typeSpecs) {
+          case LineTypeSpecs.get("dot"):
+            type = "dot";
+            break;
+
+          case LineTypeSpecs.get("dash"):
+            type = "dash";
+            break;
+
+          default:
+            type = "solid";
+            break;
+        }
+        return type;
+    }
+    setLineType(type) {
+        const specs = LineTypeSpecs.get(type);
+        if (specs) this._ref.dash(specs);
+    }
+    addPoints(points) {
+        let newPoints = this._ref.points();
+        points.forEach((point => {
+            newPoints = newPoints.concat([ point.x, point.y ]);
+        }));
+        this._ref.points(newPoints);
+    }
+}
+
+class KonvaText {
+    constructor(params, ref = null) {
+        var _a, _b, _c;
+        this.TEXT_FONT_FAMILY = "Calibri";
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params || !params.text) return;
+        this._ref = new Konva.Text({
+            x: params.position.x,
+            y: params.position.y,
+            text: params.text,
+            fontSize: (_a = params.fontSize) !== null && _a !== void 0 ? _a : 34,
+            fontFamily: this.TEXT_FONT_FAMILY,
+            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+            align: "left",
+            draggable: true,
+            rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
+        });
+        this._ref.width(this._ref.getTextWidth());
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 50;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < Math.round(this.getFontSize())) newHeight = Math.round(this.getFontSize());
+            if (scaleByX) {
+                this._ref.width(newWidth);
+            }
+            if (scaleByY) {
+                this._ref.height(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "text";
+    }
+    getColor() {
+        return this._ref.fill();
+    }
+    setColor(hex) {
+        this._ref.fill(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getText() {
+        return this._ref.text();
+    }
+    setText(text) {
+        this._ref.text(text);
+    }
+    getPosition() {
+        return this._ref.getPosition();
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+    getFontSize() {
+        return this._ref.fontSize();
+    }
+    setFontSize(size) {
+        this._ref.fontSize(size);
+    }
+}
+
+class KonvaRectangle {
+    constructor(params, ref = null) {
+        var _a, _b, _c, _d;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params.position) return;
+        this._ref = new Konva.Rect({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            x: params.position.x,
+            y: params.position.y,
+            width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
+            height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 50;
+            const minHeight = 50;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < minHeight) newHeight = minHeight;
+            if (scaleByX) {
+                this._ref.width(newWidth);
+            }
+            if (scaleByY) {
+                this._ref.height(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    getPosition() {
+        return this._ref.position();
+    }
+    getWidth() {
+        return this._ref.width();
+    }
+    getHeigth() {
+        return this._ref.height();
+    }
+    setWidth(w) {
+        this._ref.width(w);
+    }
+    setHeight(h) {
+        this._ref.height(h);
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "rectangle";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+}
+
+class KonvaEllipse {
+    constructor(params, ref = null) {
+        var _a, _b;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params.position) return;
+        this._ref = new Konva.Ellipse({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            x: params.position.x,
+            y: params.position.y,
+            radiusX: params.radius.x,
+            radiusY: params.radius.y,
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newRadiusX = this._ref.radiusX();
+            if (scaleByX) newRadiusX *= attrs.scaleX;
+            let newRadiusY = this._ref.radiusY();
+            if (scaleByY) newRadiusY *= attrs.scaleY;
+            const minRadiusX = 25;
+            const minRadiusY = 25;
+            if (newRadiusX < minRadiusX) newRadiusX = minRadiusX;
+            if (newRadiusY < minRadiusY) newRadiusY = minRadiusY;
+            if (e.evt.ctrlKey || e.evt.shiftKey) {
+                if (scaleByX) {
+                    this._ref.radius({
+                        x: newRadiusX,
+                        y: newRadiusX
+                    });
+                } else {
+                    this._ref.radius({
+                        x: newRadiusY,
+                        y: newRadiusY
+                    });
+                }
+            } else {
+                this._ref.radius({
+                    x: newRadiusX,
+                    y: newRadiusY
+                });
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    getPosition() {
+        return this._ref.position();
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+    getRadiusX() {
+        return this._ref.radiusX();
+    }
+    setRadiusX(r) {
+        this._ref.radiusX(r);
+    }
+    getRadiusY() {
+        return this._ref.radiusY();
+    }
+    setRadiusY(r) {
+        this._ref.radiusY(r);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "ellipse";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+}
+
+class KonvaArrow {
+    constructor(params, ref = null) {
+        var _a, _b;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params.start || !params.end) return;
+        this._ref = new Konva.Arrow({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+            strokeWidth: 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            points: [ params.start.x, params.start.y, params.end.x, params.end.y ],
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "arrow";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+        this._ref.fill(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPoints() {
+        const points = this._ref.points();
+        return [ {
+            x: points[0],
+            y: points[1]
+        }, {
+            x: points[2],
+            y: points[3]
+        } ];
+    }
+    setPoints(points) {
+        if (points.length === 2) {
+            this._ref.points([ points[0].x, points[0].y, points[1].x, points[1].y ]);
+        }
+    }
+    getStartPoint() {
+        const points = this._ref.points();
+        return {
+            x: points[0],
+            y: points[1]
+        };
+    }
+    setStartPoint(x, y) {
+        const points = this._ref.points();
+        this._ref.points([ x, y, points[2], points[3] ]);
+    }
+    getEndPoint() {
+        const points = this._ref.points();
+        return {
+            x: points[2],
+            y: points[3]
+        };
+    }
+    setEndPoint(x, y) {
+        const points = this._ref.points();
+        this._ref.points([ points[0], points[1], x, y ]);
+    }
+}
+
+class KonvaImage {
+    constructor(params, ref = null) {
+        this._ratio = 1;
+        if (ref) {
+            if (ref.height() === 0 || ref.width() === 0) return;
+            this._ref = ref;
+            this._canvasImage = ref.image();
+            this._ratio = this._ref.height() / this._ref.width();
+            return;
+        }
+        if (!params.position || !params.src) return;
+        this._canvasImage = new Image;
+        this._ref = new Konva.Image({
+            x: params.position.x,
+            y: params.position.y,
+            image: this._canvasImage,
+            width: params.width,
+            height: params.height,
+            draggable: true
+        });
+        this._canvasImage.onload = () => {
+            this._ref.image(this._canvasImage);
+            if (this._ref.height() === 0) this._ref.height(this._canvasImage.height);
+            if (this._ref.width() === 0) this._ref.width(this._canvasImage.width);
+            this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
+        };
+        this._canvasImage.src = params.src;
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            if (e.evt.ctrlKey || e.evt.shiftKey) {
+                if (scaleByX) {
+                    this._ref.width(newWidth);
+                    this._ref.height(newWidth * this._ratio);
+                } else {
+                    this._ref.width(newHeight / this._ratio);
+                    this._ref.height(newHeight);
+                }
+            } else {
+                if (scaleByX) {
+                    this._ref.width(newWidth);
+                }
+                if (scaleByY) {
+                    this._ref.height(newHeight);
+                }
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    getSrc() {
+        return this._canvasImage.src;
+    }
+    setSrc(src) {
+        this._canvasImage.src = src;
+    }
+    getWidth() {
+        return this._ref.width();
+    }
+    setWidth(w) {
+        this._ref.width(w);
+        this._ref.height(w * this._ratio);
+    }
+    getHeight() {
+        return this._ref.height();
+    }
+    setHeight(h) {
+        this._ref.height(h);
+        this._ref.width(h / this._ratio);
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "image";
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPosition() {
+        return this._ref.getPosition();
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+}
+
+class KonvaCloud {
+    constructor(params, ref = null) {
+        var _a, _b, _c, _d;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params.position || !params.width || !params.height) return;
+        const arcRadius = 16;
+        this._ref = new Konva.Shape({
+            x: params.position.x,
+            y: params.position.y,
+            width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
+            height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
+            stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
+            strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 4,
+            draggable: true,
+            strokeScaleEnabled: false,
+            globalCompositeOperation: "source-over",
+            sceneFunc: (context, shape) => {
+                function calculateMidpoint(position, width, height) {
+                    const midX = position.x + width / 2;
+                    const midY = position.y + height / 2;
+                    return {
+                        x: midX,
+                        y: midY
+                    };
+                }
+                const points = [ {
+                    x: 0,
+                    y: 0
+                }, {
+                    x: 0 + this._ref.width(),
+                    y: 0
+                }, {
+                    x: 0 + this._ref.width(),
+                    y: 0 + this._ref.height()
+                }, {
+                    x: 0,
+                    y: 0 + this._ref.height()
+                }, {
+                    x: 0,
+                    y: 0
+                } ];
+                const midPoint = calculateMidpoint({
+                    x: 0,
+                    y: 0
+                }, this._ref.width(), this._ref.height());
+                const baseArcLength = 30;
+                context.beginPath();
+                for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
+                    let approxArcLength = baseArcLength;
+                    const dx = points[iPoint + 1].x - points[iPoint].x;
+                    const dy = points[iPoint + 1].y - points[iPoint].y;
+                    const length = Math.sqrt(dx * dx + dy * dy);
+                    const arcCount = Math.floor(length / approxArcLength);
+                    const lengthMod = length % approxArcLength;
+                    approxArcLength = baseArcLength + arcCount / lengthMod;
+                    let pX = points[iPoint].x + dx / arcCount / 2;
+                    let pY = points[iPoint].y + dy / arcCount / 2;
+                    const pEndX = points[iPoint + 1].x;
+                    const pEndY = points[iPoint + 1].y;
+                    const endAngle = Math.atan((pEndY - pY) / (pEndX - pX));
+                    const startAngle = endAngle + Math.PI;
+                    const counterClockwise = pX > midPoint.x && pY > midPoint.y;
+                    for (let iArc = 0; iArc < arcCount; iArc++) {
+                        if (counterClockwise) {
+                            context.arc(pX, pY, arcRadius, endAngle, startAngle);
+                        } else {
+                            context.arc(pX, pY, arcRadius, startAngle, endAngle);
+                        }
+                        pX += dx / arcCount;
+                        pY += dy / arcCount;
+                    }
+                }
+                context.closePath();
+                context.fillStrokeShape(shape);
+            }
+        });
+        this._ref.className = "Cloud";
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 100;
+            const minHeight = 100;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < minHeight) newHeight = minHeight;
+            if (scaleByX) {
+                this._ref.width(newWidth);
+            }
+            if (scaleByY) {
+                this._ref.height(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.getSelfRect = () => ({
+            x: 0 - arcRadius,
+            y: 0 - arcRadius,
+            width: this._ref.width() + 2 * arcRadius,
+            height: this._ref.height() + 2 * arcRadius
+        });
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "cloud";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPosition() {
+        return this._ref.position();
+    }
+    setPosition(x, y) {
+        this._ref.position({
+            x: x,
+            y: y
+        });
+    }
+    getWidth() {
+        return this._ref.width();
+    }
+    setWidth(w) {
+        this._ref.width(w);
+    }
+    getHeigth() {
+        return this._ref.height();
+    }
+    setHeight(h) {
+        this._ref.height(h);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+}
+
+const MarkupMode2Konva = new Map([ [ MarkupMode.SelectMarkup, {
+    name: "SelectMarkup",
+    initializer: () => {}
+} ], [ MarkupMode.Line, {
+    name: "Line",
+    initializer: ref => new KonvaLine(null, ref)
+} ], [ MarkupMode.Text, {
+    name: "Text",
+    initializer: ref => new KonvaText(null, ref)
+} ], [ MarkupMode.Rectangle, {
+    name: "Rect",
+    initializer: ref => new KonvaRectangle(null, ref)
+} ], [ MarkupMode.Ellipse, {
+    name: "Ellipse",
+    initializer: ref => new KonvaEllipse(null, ref)
+} ], [ MarkupMode.Arrow, {
+    name: "Arrow",
+    initializer: ref => new KonvaArrow(null, ref)
+} ], [ MarkupMode.Image, {
+    name: "Image",
+    initializer: ref => new KonvaImage(null, ref)
+} ], [ MarkupMode.Cloud, {
+    name: "Cloud",
+    initializer: ref => new KonvaCloud(null, ref)
+} ] ]);
+
+class KonvaMarkup {
+    constructor() {
+        this._isInitialized = false;
+        this._markupIsActive = false;
+        this._markupColor = new MarkupColor(255, 0, 0);
+        this._zIndex = 1;
+        this._markupContainerName = "markupContainer";
+        this.lineWidth = 4;
+        this.lineType = "solid";
+        this.fontSize = 34;
+        this.changeActiveDragger = event => {
+            const draggerName = event.data;
+            this._markupContainer.className = this._canvasOriginal.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
+            this.removeTextInput();
+            this.removeImageInput();
+            const markupMode = MarkupMode[draggerName];
+            const konvaMode = MarkupMode2Konva.get(markupMode);
+            if (konvaMode) {
+                this._markupMode = markupMode;
+                this._markupIsActive = true;
+            } else {
+                this._markupIsActive = false;
+                this._konvaTransformer.nodes([]);
+            }
+        };
+        this.resize = () => {
+            var _a, _b;
+            (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.width(this._canvasOriginal.clientWidth);
+            (_b = this._konvaStage) === null || _b === void 0 ? void 0 : _b.height(this._canvasOriginal.clientHeight);
+        };
+        this.pan = event => {
+            const dX = event.dX / window.devicePixelRatio;
+            const dY = event.dY / window.devicePixelRatio;
+            Object.values(MarkupMode).forEach((mode => this.konvaLayerFind(mode).forEach((x => x.move({
+                x: dX,
+                y: dY
+            })))));
+        };
+        this.redirectToViewer = event => {
+            if (this._viewer) this._viewer.emit(event);
+        };
+    }
+    initialize(canvas, canvasEvents, viewer, worldTransformer) {
+        if (!Konva) throw new Error('Markup: Error during initialization. Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"><\/script>');
+        this._viewer = viewer;
+        this._worldTransformer = worldTransformer;
+        this._canvasOriginal = canvas;
+        this._canvasEvents = canvasEvents !== null && canvasEvents !== void 0 ? canvasEvents : [];
+        this._markupContainer = document.createElement("div");
+        this._markupContainer.id = this._markupContainerName;
+        this._markupContainer.style.position = "absolute";
+        this._markupContainer.style.top = "0px";
+        this._markupContainer.style.left = "0px";
+        this._markupContainer.style.outline = "0px";
+        const parentDiv = this._canvasOriginal.parentElement;
+        parentDiv.appendChild(this._markupContainer);
+        this._markupColor.setColor(255, 0, 0);
+        this.initializeKonva();
+        this.resize();
+        this._canvasEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
+        if (this._viewer) {
+            this._viewer.addEventListener("resize", this.resize);
+            this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
+            this._viewer.addEventListener("pan", this.pan);
+        }
+        this._isInitialized = true;
+    }
+    dispose() {
+        if (!this._isInitialized) return;
+        if (this._viewer) {
+            this._viewer.removeEventListener("pan", this.pan);
+            this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+            this._viewer.removeEventListener("resize", this.resize);
+        }
+        this._canvasEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
+        this.destroyKonva();
+        this._markupContainer.remove();
+        this._markupContainer = undefined;
+        this._canvasOriginal = undefined;
+        this._viewer = undefined;
+        this._worldTransformer = undefined;
+        this._markupIsActive = false;
+        this._isInitialized = false;
+    }
+    syncOverlay() {}
+    clearOverlay() {
+        this.removeTextInput();
+        this.removeImageInput();
+        this._konvaTransformer.nodes([]);
+        Object.values(MarkupMode).forEach((mode => this.konvaLayerFind(mode).forEach((x => x.destroy()))));
+    }
+    getMarkupColor() {
+        return this._markupColor.RGB;
+    }
+    setMarkupColor(r, g, b) {
+        this._markupColor.setColor(r, g, b);
+    }
+    colorizeAllMarkup(r = 255, g = 0, b = 0) {
+        const hex = new MarkupColor(r, g, b).HexColor;
+        Object.values(MarkupMode).forEach((mode => {
+            this.konvaLayerFind(mode).forEach((x => {
+                var _a;
+                const konvaObj = (_a = MarkupMode2Konva.get(mode)) === null || _a === void 0 ? void 0 : _a.initializer(x);
+                if (konvaObj && konvaObj.setColor) konvaObj.setColor(hex);
+            }));
+        }));
+        this._konvaLayer.draw();
+    }
+    colorizeSelectedMarkups(r, g, b) {
+        this.getSelectedObjects().forEach((obj => {
+            const colorable = obj;
+            if (colorable && colorable.setColor) {
+                colorable.setColor(new MarkupColor(r, g, b).HexColor);
+            }
+        }));
+    }
+    setViewpoint(viewpoint) {
+        const markupColor = viewpoint.custom_fields.markup_color || {
+            r: 255,
+            g: 0,
+            b: 0
+        };
+        this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
+        this.loadMarkup(viewpoint);
+    }
+    getViewpoint() {
+        const viewpoint = {
+            lines: [],
+            texts: [],
+            arrows: [],
+            clouds: [],
+            ellipses: [],
+            images: [],
+            rectangles: []
+        };
+        viewpoint.snapshot = {
+            data: this.combineMarkupWithDrawing()
+        };
+        viewpoint.custom_fields = {
+            markup_color: this.getMarkupColor()
+        };
+        this.fillViewpointShapes(viewpoint);
+        viewpoint.description = (new Date).toDateString();
+        return viewpoint;
+    }
+    createObject(type, params) {
+        let object = null;
+        let zIndex = this._zIndex;
+        switch (type.toLocaleLowerCase()) {
+          case "line":
+            object = new KonvaLine(params);
+            zIndex = 1;
+            break;
+
+          case "text":
+            object = new KonvaText(params);
+            break;
+
+          case "rectangle":
+            object = new KonvaRectangle(params);
+            zIndex = 1;
+            break;
+
+          case "ellipse":
+            object = new KonvaEllipse(params);
+            zIndex = 1;
+            break;
+
+          case "arrow":
+            object = new KonvaArrow(params);
+            break;
+
+          case "image":
+            object = new KonvaImage(params);
+            zIndex = 0;
+            break;
+
+          case "cloud":
+            object = new KonvaCloud(params);
+            zIndex = 1;
+            break;
+
+          default:
+            throw new Error("Markup CreateObject - unsupported type has been detected.");
+        }
+        this.addObject(object);
+        object.setZIndex(zIndex);
+        this._zIndex++;
+        return object;
+    }
+    getObjects() {
+        const objects = [];
+        this.konvaLayerFind(MarkupMode.Line).forEach((line => {
+            objects.push(new KonvaLine(null, line));
+        }));
+        this.konvaLayerFind(MarkupMode.Text).forEach((text => {
+            objects.push(new KonvaText(null, text));
+        }));
+        this.konvaLayerFind(MarkupMode.Rectangle).forEach((rectangle => {
+            objects.push(new KonvaRectangle(null, rectangle));
+        }));
+        this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse => {
+            objects.push(new KonvaEllipse(null, ellipse));
+        }));
+        this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow => {
+            objects.push(new KonvaArrow(null, arrow));
+        }));
+        this.konvaLayerFind(MarkupMode.Image).forEach((image => {
+            objects.push(new KonvaImage(null, image));
+        }));
+        this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud => {
+            objects.push(new KonvaCloud(null, cloud));
+        }));
+        return objects;
+    }
+    getSelectedObjects() {
+        const objects = [];
+        this._konvaTransformer.nodes().forEach((obj => {
+            const konvaShapeName = obj.className;
+            switch (konvaShapeName) {
+              case "Line":
+                objects.push(new KonvaLine(null, obj));
+                break;
+
+              case "Text":
+                objects.push(new KonvaText(null, obj));
+                break;
+
+              case "Rect":
+                objects.push(new KonvaRectangle(null, obj));
+                break;
+
+              case "Ellipse":
+                objects.push(new KonvaEllipse(null, obj));
+                break;
+
+              case "Arrow":
+                objects.push(new KonvaArrow(null, obj));
+                break;
+
+              case "Image":
+                objects.push(new KonvaImage(null, obj));
+                break;
+
+              case "Cloud":
+                objects.push(new KonvaCloud(null, obj));
+                break;
+            }
+        }));
+        return objects;
+    }
+    selectObjects(objects) {
+        const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x => x.ref())));
+        this._konvaTransformer.nodes(selectedObjs);
+    }
+    clearSelected() {
+        this._konvaTransformer.nodes([]);
+    }
+    getPoint3dFromArray(array) {
+        return {
+            x: array[0],
+            y: array[1],
+            z: array[2]
+        };
+    }
+    fillViewpointShapes(viewpoint) {
+        const markupLines = this.getMarkupLines();
+        if (markupLines && markupLines.length > 0) {
+            markupLines === null || markupLines === void 0 ? void 0 : markupLines.forEach((line => {
+                viewpoint.lines.push(line);
+            }));
+        }
+        const markupTexts = this.getMarkupTexts();
+        if (markupTexts && markupTexts.length > 0) {
+            markupTexts === null || markupTexts === void 0 ? void 0 : markupTexts.forEach((text => {
+                viewpoint.texts.push(text);
+            }));
+        }
+        const markupRectangles = this.getMarkupRectangles();
+        if (markupRectangles && markupRectangles.length > 0) {
+            markupRectangles === null || markupRectangles === void 0 ? void 0 : markupRectangles.forEach((rectangle => {
+                viewpoint.rectangles.push(rectangle);
+            }));
+        }
+        const markupEllipses = this.getMarkupEllipses();
+        if (markupEllipses && markupEllipses.length > 0) {
+            markupEllipses === null || markupEllipses === void 0 ? void 0 : markupEllipses.forEach((ellipse => {
+                viewpoint.ellipses.push(ellipse);
+            }));
+        }
+        const markupArrows = this.getMarkupArrows();
+        if (markupArrows && markupArrows.length > 0) {
+            markupArrows === null || markupArrows === void 0 ? void 0 : markupArrows.forEach((arrow => {
+                viewpoint.arrows.push(arrow);
+            }));
+        }
+        const markupImages = this.getMarkupImages();
+        if (markupImages && markupImages.length > 0) {
+            markupImages === null || markupImages === void 0 ? void 0 : markupImages.forEach((image => {
+                viewpoint.images.push(image);
+            }));
+        }
+        const markupClouds = this.getMarkupClouds();
+        if (markupClouds && markupClouds.length > 0) {
+            markupClouds === null || markupClouds === void 0 ? void 0 : markupClouds.forEach((cloud => {
+                viewpoint.clouds.push(cloud);
+            }));
+        }
+    }
+    addObject(object) {
+        this._konvaLayer.add(object.ref());
+    }
+    konvaLayerFind(markupShape) {
+        const konvaShape = MarkupMode2Konva.get(markupShape);
+        if (konvaShape) {
+            const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x => x.parent instanceof Konva.Layer));
+            return konvaShapes;
+        }
+        return [];
+    }
+    initializeKonva() {
+        this._konvaStage = new Konva.Stage({
+            container: this._markupContainerName,
+            width: this._canvasOriginal.clientWidth,
+            height: this._canvasOriginal.clientHeight
+        });
+        const stage = this._konvaStage;
+        const layer = new Konva.Layer({
+            pixelRation: window.devicePixelRatio
+        });
+        stage.add(layer);
+        this._konvaLayer = layer;
+        const transformer = new Konva.Transformer({
+            shouldOverdrawWholeArea: false,
+            keepRatio: false,
+            flipEnabled: false
+        });
+        this._konvaTransformer = transformer;
+        layer.add(transformer);
+        let isPaint = false;
+        let lastLine;
+        let mouseDownPos;
+        let lastObj;
+        stage.on("mousedown touchstart", (e => {
+            if (!this._markupIsActive || e.target !== stage || this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.Image) return;
+            if (e.target === stage && transformer.nodes().length > 0) {
+                transformer.nodes([]);
+                return;
+            }
+            const pos = stage.getPointerPosition();
+            mouseDownPos = pos;
+            isPaint = [ MarkupMode.Arrow, MarkupMode.Cloud, MarkupMode.Ellipse, MarkupMode.Line, MarkupMode.Rectangle ].some((m => m === this._markupMode));
+            if (this._markupMode === MarkupMode.Line) {
+                lastLine = this.addLine([ pos.x, pos.y, pos.x, pos.y ]);
+            }
+        }));
+        stage.on("mouseup touchend", (e => {
+            if (!this._markupIsActive) return;
+            if (isPaint) {
+                const pos = stage.getPointerPosition();
+                const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+                const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+                const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+                const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+                const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+                if (defParams) {
+                    if (this._markupMode === MarkupMode.Rectangle) {
+                        this.addRectangle({
+                            x: startX,
+                            y: startY
+                        }, dX, dY);
+                    } else if (this._markupMode === MarkupMode.Ellipse) {
+                        this.addEllipse({
+                            x: startX,
+                            y: startY
+                        }, {
+                            x: dX / 2,
+                            y: dY / 2
+                        });
+                    } else if (this._markupMode === MarkupMode.Arrow) {
+                        this.addArrow({
+                            x: mouseDownPos.x,
+                            y: mouseDownPos.y
+                        }, {
+                            x: defParams ? mouseDownPos.x + 200 : pos.x,
+                            y: defParams ? startY : pos.y
+                        });
+                    } else if (this._markupMode === MarkupMode.Cloud) {
+                        this.addCloud({
+                            x: startX,
+                            y: startY
+                        }, Math.max(100, dX), Math.max(100, dY));
+                    }
+                }
+            }
+            lastObj = undefined;
+            isPaint = false;
+        }));
+        stage.on("mousemove touchmove", (e => {
+            if (!this._markupIsActive) return;
+            if (!isPaint) {
+                return;
+            }
+            const pos = stage.getPointerPosition();
+            const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+            const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+            const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+            const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+            const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+            if (this._markupMode === MarkupMode.Line) {
+                lastLine.addPoints([ {
+                    x: pos.x,
+                    y: pos.y
+                } ]);
+            } else if (this._markupMode === MarkupMode.Arrow) {
+                if (lastObj) lastObj.setEndPoint(pos.x, pos.y); else lastObj = this.addArrow({
+                    x: mouseDownPos.x,
+                    y: mouseDownPos.y
+                }, {
+                    x: pos.x,
+                    y: pos.y
+                });
+            } else if (this._markupMode === MarkupMode.Rectangle) {
+                if (lastObj) {
+                    lastObj.setPosition(startX, startY);
+                    lastObj.setWidth(dX);
+                    lastObj.setHeight(dY);
+                } else lastObj = this.addRectangle({
+                    x: startX,
+                    y: startY
+                }, dX, dY);
+            } else if (this._markupMode === MarkupMode.Ellipse) {
+                if (lastObj) {
+                    lastObj.setPosition(startX, startY);
+                    lastObj.setRadiusX(dX);
+                    lastObj.setRadiusY(dY);
+                } else lastObj = this.addEllipse({
+                    x: startX,
+                    y: startY
+                }, {
+                    x: dX,
+                    y: dY
+                });
+            } else if (this._markupMode === MarkupMode.Cloud) {
+                if (lastObj) {
+                    lastObj.setPosition(startX, startY);
+                    lastObj.setWidth(Math.max(100, dX));
+                    lastObj.setHeight(Math.max(100, dY));
+                } else lastObj = this.addCloud({
+                    x: startX,
+                    y: startY
+                }, dX, dY);
+            }
+        }));
+        stage.on("click tap", (e => {
+            if (!this._markupIsActive) return;
+            if (e.target === stage) {
+                if (this._markupMode === MarkupMode.Text) {
+                    if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else if (transformer.nodes().length === 0) {
+                        const pos = stage.getPointerPosition();
+                        this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
+                    }
+                } else if (this._markupMode === MarkupMode.Image) {
+                    if (this._imageInputRef && this._imageInputRef.value) this.addImage({
+                        x: this._imageInputPos.x,
+                        y: this._imageInputPos.y
+                    }, this._imageInputRef.value, 0, 0, this._imageInputRef.value); else if (transformer.nodes().length === 0) {
+                        const pos = stage.getPointerPosition();
+                        this.createImageInput(pos);
+                    }
+                }
+                transformer.nodes([]);
+                return;
+            }
+            if (this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.SelectMarkup) {
+                if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+                    if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
+                        x: e.target.attrs.x,
+                        y: e.target.attrs.y
+                    }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
+                    return;
+                } else {
+                    this.removeTextInput();
+                }
+            }
+            if (this._markupMode === MarkupMode.Image || this._markupMode === MarkupMode.SelectMarkup) {
+                if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+                    if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0); else this.createImageInput({
+                        x: e.target.attrs.x,
+                        y: e.target.attrs.y
+                    });
+                    return;
+                } else {
+                    this.removeImageInput();
+                }
+            }
+            if (transformer.nodes().filter((x => x.className === "Cloud")).length > 0 || e.target.className === "Cloud") {
+                transformer.rotateEnabled(false);
+            } else {
+                transformer.rotateEnabled(true);
+            }
+            const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+            const isSelected = transformer.nodes().indexOf(e.target) >= 0;
+            if (!metaPressed && !isSelected) {
+                transformer.nodes([ e.target ]);
+            } else if (metaPressed && isSelected) {
+                const nodes = transformer.nodes().slice();
+                nodes.splice(nodes.indexOf(e.target), 1);
+                transformer.nodes(nodes);
+            } else if (metaPressed && !isSelected) {
+                const nodes = transformer.nodes().concat([ e.target ]);
+                transformer.nodes(nodes);
+            }
+        }));
+        const container = stage.container();
+        container.tabIndex = 1;
+        container.focus();
+        container.addEventListener("keydown", (e => {
+            if (!this._markupIsActive) return;
+            if (e.code === "Delete") {
+                const trNodes = this._konvaTransformer.nodes();
+                if (trNodes.length > 0) {
+                    this._konvaTransformer.nodes().forEach((x => x.destroy()));
+                    this._konvaTransformer.nodes([]);
+                }
+                layer.draw();
+                return;
+            }
+            e.preventDefault();
+        }));
+    }
+    destroyKonva() {
+        this.clearOverlay();
+        this._konvaStage.destroy();
+        this._konvaLayer = undefined;
+        this._konvaTransformer = undefined;
+        this._konvaStage = undefined;
+    }
+    getMarkupLines() {
+        const lines = [];
+        this.konvaLayerFind(MarkupMode.Line).forEach((line => {
+            const linePoints = line.points();
+            if (!linePoints) return;
+            const worldPoints = [];
+            const absoluteTransform = line.getAbsoluteTransform();
+            for (let i = 0; i < linePoints.length; i += 2) {
+                const atPoint = absoluteTransform.point({
+                    x: linePoints[i],
+                    y: linePoints[i + 1]
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                worldPoints.push(worldPoint);
+            }
+            const konvaLine = new KonvaLine(null, line);
+            lines.push({
+                id: konvaLine.id(),
+                points: worldPoints.map((p => this.getPoint3dFromArray(p))),
+                color: konvaLine.getColor() || "#ff0000",
+                type: konvaLine.getLineType() || this.lineType,
+                width: konvaLine.getLineWidth() || this.lineWidth
+            });
+        }));
+        return lines;
+    }
+    getMarkupTexts() {
+        const texts = [];
+        const textSize = .02;
+        const textScale = this._worldTransformer.getScale();
+        this.konvaLayerFind(MarkupMode.Text).forEach((text => {
+            if (!text) return;
+            const position = this._worldTransformer.screenToWorld({
+                x: text.x(),
+                y: text.y()
+            });
+            const shape = new KonvaText(null, text);
+            texts.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(position),
+                text: shape.getText(),
+                text_size: textSize * textScale.y,
+                angle: shape.getRotation(),
+                color: shape.getColor(),
+                font_size: shape.getFontSize()
+            });
+        }));
+        return texts;
+    }
+    getMarkupRectangles() {
+        const rectangles = [];
+        this.konvaLayerFind(MarkupMode.Rectangle).forEach((rect => {
+            const position = rect.position();
+            const worldPoint = this._worldTransformer.screenToWorld(position);
+            const shape = new KonvaRectangle(null, rect);
+            rectangles.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                width: shape.getWidth(),
+                height: shape.getHeigth(),
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            });
+        }));
+        return rectangles;
+    }
+    getMarkupEllipses() {
+        const ellipses = [];
+        this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse => {
+            const position = ellipse.position();
+            const worldPoint = this._worldTransformer.screenToWorld(position);
+            const shape = new KonvaEllipse(null, ellipse);
+            ellipses.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                radius: {
+                    x: ellipse.getRadiusX(),
+                    y: ellipse.getRadiusY()
+                },
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            });
+        }));
+        return ellipses;
+    }
+    getMarkupArrows() {
+        const arrows = [];
+        this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow => {
+            const absoluteTransform = arrow.getAbsoluteTransform();
+            const atStartPoint = absoluteTransform.point({
+                x: arrow.points()[0],
+                y: arrow.points()[1]
+            });
+            const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
+            const atEndPoint = absoluteTransform.point({
+                x: arrow.points()[2],
+                y: arrow.points()[3]
+            });
+            const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
+            const shape = new KonvaArrow(null, arrow);
+            arrows.push({
+                id: shape.id(),
+                start: this.getPoint3dFromArray(worldStartPoint),
+                end: this.getPoint3dFromArray(worldEndPoint),
+                color: shape.getColor()
+            });
+        }));
+        return arrows;
+    }
+    getMarkupImages() {
+        const images = [];
+        this.konvaLayerFind(MarkupMode.Image).forEach((image => {
+            const position = image.position();
+            const worldPoint = this._worldTransformer.screenToWorld(position);
+            const shape = new KonvaImage(null, image);
+            images.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                src: shape.getSrc(),
+                width: shape.getWidth(),
+                height: shape.getHeight()
+            });
+        }));
+        return images;
+    }
+    getMarkupClouds() {
+        const clouds = [];
+        this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud => {
+            const position = cloud.position();
+            const worldPoint = this._worldTransformer.screenToWorld(position);
+            const shape = new KonvaCloud(null, cloud);
+            clouds.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                width: shape.getWidth(),
+                height: shape.getHeigth(),
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            });
+        }));
+        return clouds;
+    }
+    loadMarkup(viewpoint) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        (_a = viewpoint.lines) === null || _a === void 0 ? void 0 : _a.forEach((vpLine => {
+            const linePoints = [];
+            vpLine.points.forEach((point => {
+                const screenPoint = this._worldTransformer.worldToScreen(point);
+                linePoints.push(screenPoint.x);
+                linePoints.push(screenPoint.y);
+            }));
+            this.addLine(linePoints, vpLine.color, vpLine.type, vpLine.width, vpLine.id);
+        }));
+        (_b = viewpoint.texts) === null || _b === void 0 ? void 0 : _b.forEach((vpText => {
+            const screenPoint = this._worldTransformer.worldToScreen(vpText.position);
+            this.addText(vpText.text, screenPoint, vpText.angle, vpText.color, vpText.text_size, vpText.font_size, vpText.id);
+        }));
+        (_c = viewpoint.rectangles) === null || _c === void 0 ? void 0 : _c.forEach((vpRect => {
+            const screenPoint = this._worldTransformer.worldToScreen(vpRect.position);
+            this.addRectangle(screenPoint, vpRect.width, vpRect.height, vpRect.line_width, vpRect.color, vpRect.id);
+        }));
+        (_d = viewpoint.ellipses) === null || _d === void 0 ? void 0 : _d.forEach((vpEllipse => {
+            const screenPoint = this._worldTransformer.worldToScreen(vpEllipse.position);
+            this.addEllipse(screenPoint, vpEllipse.radius, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
+        }));
+        (_e = viewpoint.arrows) === null || _e === void 0 ? void 0 : _e.forEach((vpArrow => {
+            const startPoint = this._worldTransformer.worldToScreen(vpArrow.start);
+            const endPoint = this._worldTransformer.worldToScreen(vpArrow.end);
+            this.addArrow(startPoint, endPoint, vpArrow.color, vpArrow.id);
+        }));
+        (_f = viewpoint.clouds) === null || _f === void 0 ? void 0 : _f.forEach((vpCloud => {
+            const screenPoint = this._worldTransformer.worldToScreen(vpCloud.position);
+            this.addCloud(screenPoint, vpCloud.width, vpCloud.height, vpCloud.line_width, vpCloud.color, vpCloud.id);
+        }));
+        (_g = viewpoint.images) === null || _g === void 0 ? void 0 : _g.forEach((vpImage => {
+            const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
+            this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
+        }));
+    }
+    combineMarkupWithDrawing() {
+        const trNodes = this._konvaTransformer.nodes();
+        if (trNodes.length > 0) {
+            this._konvaTransformer.nodes([]);
+        }
+        const tempCanvas = document.createElement("canvas");
+        tempCanvas.height = this._canvasOriginal.height;
+        tempCanvas.width = this._canvasOriginal.width;
+        const ctx = tempCanvas.getContext("2d");
+        ctx.drawImage(this._canvasOriginal, 0, 0);
+        ctx.drawImage(this._konvaStage.toCanvas({
+            pixelRatio: window.devicePixelRatio
+        }), 0, 0);
+        return tempCanvas.toDataURL("image/jpeg", .25);
+    }
+    addLine(linePoints, color, type, width, id) {
+        if (!linePoints || linePoints.length === 0) return;
+        const points = [];
+        for (let i = 0; i < linePoints.length; i += 2) {
+            points.push({
+                x: linePoints[i],
+                y: linePoints[i + 1]
+            });
+        }
+        const konvaLine = new KonvaLine({
+            points: points,
+            type: type || this.lineType,
+            width: width || this.lineWidth,
+            color: color || this._markupColor.HexColor,
+            id: id
+        });
+        const obj = konvaLine.ref();
+        this._konvaLayer.add(obj);
+        return konvaLine;
+    }
+    createTextInput(pos, inputX, inputY, angle, text) {
+        if (!this._textInputRef) {
+            this._textInputPos = pos;
+            this._textInputAngle = angle;
+            this._textInputRef = document.createElement("textarea");
+            this._textInputRef.style.zIndex = "9999";
+            this._textInputRef.style.position = "absolute";
+            this._textInputRef.style.display = "block";
+            this._textInputRef.style.top = inputY + "px";
+            this._textInputRef.style.left = inputX + "px";
+            this._textInputRef.onkeydown = event => {
+                if (event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+                    this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
+                }
+                if (event.key === "Escape") {
+                    event.preventDefault();
+                    this.removeTextInput();
+                }
+            };
+            if (text) this._textInputRef.value = text;
+            document.body.appendChild(this._textInputRef);
+            setTimeout((() => {
+                this._textInputRef.focus();
+            }), 50);
+        } else {
+            this.removeTextInput();
+        }
+    }
+    removeTextInput() {
+        var _a;
+        (_a = this._textInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+        this._textInputRef = null;
+        this._textInputPos = null;
+        this._textInputAngle = 0;
+    }
+    createImageInput(pos) {
+        if (!this._imageInputRef) {
+            const convertBase64 = file => new Promise(((resolve, reject) => {
+                const fileReader = new FileReader;
+                fileReader.readAsDataURL(file);
+                fileReader.onload = () => {
+                    resolve(fileReader.result);
+                };
+                fileReader.onerror = error => {
+                    reject(error);
+                };
+            }));
+            this._imageInputPos = pos;
+            this._imageInputRef = document.createElement("input");
+            this._imageInputRef.style.display = "none";
+            this._imageInputRef.type = "file";
+            this._imageInputRef.accept = "image/png, image/jpeg";
+            this._imageInputRef.onchange = async event => {
+                const file = event.target.files[0];
+                const base64 = await convertBase64(file);
+                this.addImage({
+                    x: this._imageInputPos.x,
+                    y: this._imageInputPos.y
+                }, base64.toString(), 0, 0);
+            };
+            this._imageInputRef.oncancel = event => {
+                this.removeImageInput();
+            };
+            document.body.appendChild(this._imageInputRef);
+            setTimeout((() => {
+                this._imageInputRef.click();
+            }), 50);
+        } else {
+            this.removeImageInput();
+        }
+    }
+    removeImageInput() {
+        var _a;
+        (_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+        this._imageInputRef = null;
+        this._imageInputPos = null;
+    }
+    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
+        const trNodes = this._konvaTransformer.nodes();
+        if (trNodes.length > 0) {
+            trNodes[0].destroy();
+            this._konvaTransformer.nodes([]);
+        }
+        this.removeTextInput();
+        if (specifiedText) {
+            const tolerance = 1e-6;
+            if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+                const size = .02;
+                const scale = this._worldTransformer.getScale();
+                fontSize = textSize / (scale.y / size) / 34;
+            }
+            const konvaText = new KonvaText({
+                position: {
+                    x: position.x,
+                    y: position.y
+                },
+                text: specifiedText,
+                rotation: angle,
+                fontSize: fontSize || this.fontSize,
+                color: color || this._markupColor.HexColor,
+                id: id
+            });
+            this._konvaLayer.add(konvaText.ref());
+            return konvaText;
+        }
+    }
+    addRectangle(position, width, height, lineWidth, color, id) {
+        if (!position) return;
+        const konvaRectangle = new KonvaRectangle({
+            position: position,
+            width: width,
+            height: height,
+            lineWidth: lineWidth || this.lineWidth,
+            color: color || this._markupColor.HexColor,
+            id: id
+        });
+        const obj = konvaRectangle.ref();
+        this._konvaLayer.add(obj);
+        return konvaRectangle;
+    }
+    addEllipse(position, radius, lineWidth, color, id) {
+        if (!position) return;
+        const konvaEllipse = new KonvaEllipse({
+            position: position,
+            radius: radius,
+            lineWidth: lineWidth,
+            color: color || this._markupColor.HexColor,
+            id: id
+        });
+        const obj = konvaEllipse.ref();
+        this._konvaLayer.add(obj);
+        return konvaEllipse;
+    }
+    addArrow(start, end, color, id) {
+        if (!start || !end) return;
+        const konvaArrow = new KonvaArrow({
+            start: start,
+            end: end,
+            color: color || this._markupColor.HexColor,
+            id: id
+        });
+        const obj = konvaArrow.ref();
+        this._konvaLayer.add(obj);
+        return konvaArrow;
+    }
+    addCloud(position, width, height, lineWidth, color, id) {
+        if (!position || !width || !height) return;
+        const konvaCloud = new KonvaCloud({
+            position: position,
+            width: width,
+            height: height,
+            color: color || this._markupColor.HexColor,
+            lineWidth: lineWidth || this.lineWidth,
+            id: id
+        });
+        const obj = konvaCloud.ref();
+        this._konvaLayer.add(obj);
+        return konvaCloud;
+    }
+    addImage(position, src, width, height, id) {
+        if (!position) return;
+        let konvaImage;
+        if (src) {
+            konvaImage = new KonvaImage({
+                position: position,
+                src: src,
+                width: width,
+                height: height,
+                id: id
+            });
+            const obj = konvaImage.ref();
+            this._konvaLayer.add(obj);
+            const trNodes = this._konvaTransformer.nodes();
+            if (trNodes.length > 0) {
+                trNodes[0].destroy();
+                this._konvaTransformer.nodes([]);
+            }
+        }
+        this.removeImageInput();
+        return konvaImage;
+    }
+}
+
+export { KonvaMarkup as Markup, MarkupMode };
+//# sourceMappingURL=markup.module.js.map