@inweb/markup 25.8.11 → 25.8.12

package/dist/markup.js

@@ -11603,7 +11603,7 @@
 	        this._ref.draggable(value);
 	    }
 	    type() {
-	        return "line";
+	        return "Line";
 	    }
 	    getColor() {
 	        return this._ref.stroke();
@@ -11725,7 +11725,7 @@
 	        this._ref.draggable(value);
 	    }
 	    type() {
-	        return "text";
+	        return "Text";
 	    }
 	    getColor() {
 	        return this._ref.fill();
@@ -11847,7 +11847,7 @@
 	        this._ref.draggable(value);
 	    }
 	    type() {
-	        return "rectangle";
+	        return "Rectangle";
 	    }
 	    getColor() {
 	        return this._ref.stroke();
@@ -11968,7 +11968,7 @@
 	        this._ref.draggable(value);
 	    }
 	    type() {
-	        return "ellipse";
+	        return "Ellipse";
 	    }
 	    getColor() {
 	        return this._ref.stroke();
@@ -12032,7 +12032,7 @@
 	        this._ref.draggable(value);
 	    }
 	    type() {
-	        return "arrow";
+	        return "Arrow";
 	    }
 	    getColor() {
 	        return this._ref.stroke();
@@ -12182,7 +12182,7 @@
 	        this._ref.draggable(value);
 	    }
 	    type() {
-	        return "image";
+	        return "Image";
 	    }
 	    getRotation() {
 	        return this._ref.rotation();
@@ -12323,7 +12323,7 @@
 	        this._ref.draggable(value);
 	    }
 	    type() {
-	        return "cloud";
+	        return "Cloud";
 	    }
 	    getColor() {
 	        return this._ref.stroke();
@@ -12382,7 +12382,6 @@
 	    Line: {
 	        name: "Line",
 	        initializer: (ref, params = null) => new KonvaLine(params, ref),
-	        zIndex: 1,
 	    },
 	    Text: {
 	        name: "Text",
@@ -12391,27 +12390,22 @@
 	    Rectangle: {
 	        name: "Rect",
 	        initializer: (ref, params = null) => new KonvaRectangle(params, ref),
-	        zIndex: 1,
 	    },
 	    Ellipse: {
 	        name: "Ellipse",
 	        initializer: (ref, params = null) => new KonvaEllipse(params, ref),
-	        zIndex: 1,
 	    },
 	    Arrow: {
 	        name: "Arrow",
 	        initializer: (ref, params = null) => new KonvaArrow(params, ref),
-	        zIndex: 1,
 	    },
 	    Image: {
 	        name: "Image",
 	        initializer: (ref, params = null) => new KonvaImage(params, ref),
-	        zIndex: 0,
 	    },
 	    Cloud: {
 	        name: "Cloud",
 	        initializer: (ref, params = null) => new KonvaCloud(params, ref),
-	        zIndex: 1,
 	    },
 	};
 	/**
@@ -12422,7 +12416,6 @@
 	        this._pointerEvents = [];
 	        this._markupIsActive = false;
 	        this._markupColor = new MarkupColor(255, 0, 0);
-	        this._zIndex = 1;
 	        this.lineWidth = 4;
 	        this.lineType = "solid";
 	        this.fontSize = 34;
@@ -12523,6 +12516,9 @@
 	    }
 	    setViewpoint(viewpoint) {
 	        var _a, _b, _c, _d, _e, _f, _g, _h;
+	        this.clearSelected();
+	        this.removeTextInput();
+	        this.removeImageInput();
 	        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || { r: 255, g: 0, b: 0 };
 	        this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
 	        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
@@ -12577,6 +12573,8 @@
 	    enableEditMode(mode) {
 	        if (!mode || !MarkupMode2Konva[mode]) {
 	            this.clearSelected();
+	            this.removeTextInput();
+	            this.removeImageInput();
 	            this._markupIsActive = false;
 	        }
 	        else {
@@ -12586,16 +12584,11 @@
 	        return this;
 	    }
 	    createObject(type, params) {
-	        var _a;
 	        const konvaShape = MarkupMode2Konva[type];
 	        if (!konvaShape || !konvaShape.initializer)
 	            throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
 	        const object = konvaShape.initializer(null, params);
 	        this.addObject(object);
-	        // Set zIndex only when shape has been added to Layer else we will get
-	        // "Konva warning: Node has no parent. zIndex parameter is ignored."
-	        object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
-	        this._zIndex++;
 	        return object;
 	    }
 	    getObjects() {
@@ -12629,8 +12622,12 @@
 	            this._konvaTransformer.nodes([]);
 	    }
 	    addObject(object) {
-	        if (this._konvaLayer)
-	            this._konvaLayer.add(object.ref());
+	        if (object.type() === "Image")
+	            this._groupImages.add(object.ref());
+	        else if (object.type() === "Text")
+	            this._groupTexts.add(object.ref());
+	        else
+	            this._groupGeometry.add(object.ref());
 	    }
 	    konvaLayerFind(type) {
 	        if (!this._konvaLayer)
@@ -12639,7 +12636,12 @@
 	        if (!konvaShape || !konvaShape.initializer)
 	            return [];
 	        // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from layer.
-	        return this._konvaLayer.find(konvaShape.name).filter((ref) => ref.parent === this._konvaLayer);
+	        return this._konvaLayer
+	            .find(konvaShape.name)
+	            .filter((ref) => ref.parent === this._konvaLayer ||
+	            ref.parent === this._groupImages ||
+	            ref.parent === this._groupGeometry ||
+	            ref.parent === this._groupTexts);
 	    }
 	    initializeKonva() {
 	        // first we need Konva core things: stage and layer
@@ -12651,6 +12653,12 @@
 	        this._konvaStage = stage;
 	        const layer = new Konva.Layer({ pixelRation: window.devicePixelRatio });
 	        stage.add(layer);
+	        this._groupImages = new Konva.Group();
+	        layer.add(this._groupImages);
+	        this._groupGeometry = new Konva.Group();
+	        layer.add(this._groupGeometry);
+	        this._groupTexts = new Konva.Group();
+	        layer.add(this._groupTexts);
 	        this._konvaLayer = layer;
 	        const transformer = new Konva.Transformer({
 	            shouldOverdrawWholeArea: false,
@@ -12807,7 +12815,9 @@
 	                    this.removeImageInput();
 	                }
 	            }
-	            if (transformer.nodes().filter((x) => x.className === "Cloud").length > 0 || e.target.className === "Cloud") {
+	            if (transformer.nodes().filter((x) => x.className === "Cloud" || x.className === "Image").length > 0 ||
+	                e.target.className === "Cloud" ||
+	                e.target.className === "Image") {
 	                transformer.rotateEnabled(false);
 	            }
 	            else {
@@ -12853,8 +12863,13 @@
 	    }
 	    destroyKonva() {
 	        var _a;
+	        this.removeTextInput();
+	        this.removeImageInput();
 	        this.clearOverlay();
 	        (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
+	        this._groupImages = undefined;
+	        this._groupGeometry = undefined;
+	        this._groupTexts = undefined;
 	        this._konvaLayer = undefined;
 	        this._konvaTransformer = undefined;
 	        this._konvaStage = undefined;
@@ -13037,6 +13052,9 @@
 	            this._textInputRef.style.display = "block";
 	            this._textInputRef.style.top = inputY + "px";
 	            this._textInputRef.style.left = inputX + "px";
+	            this._textInputRef.style.fontSize = `${this.fontSize}px`;
+	            this._textInputRef.style.color = `${this._markupColor.HexColor}`;
+	            this._textInputRef.style.fontFamily = "Calibri";
 	            this._textInputRef.onkeydown = (event) => {
 	                if (event.key === "Enter" && !event.shiftKey) {
 	                    event.preventDefault();