@inweb/markup 25.8.11 → 25.8.13

package/dist/markup.module.js

@@ -91,7 +91,7 @@ class KonvaLine {
         this._ref.draggable(value);
     }
     type() {
-        return "line";
+        return "Line";
     }
     getColor() {
         return this._ref.stroke();
@@ -211,7 +211,7 @@ class KonvaText {
         this._ref.draggable(value);
     }
     type() {
-        return "text";
+        return "Text";
     }
     getColor() {
         return this._ref.fill();
@@ -336,7 +336,7 @@ class KonvaRectangle {
         this._ref.draggable(value);
     }
     type() {
-        return "rectangle";
+        return "Rectangle";
     }
     getColor() {
         return this._ref.stroke();
@@ -464,7 +464,7 @@ class KonvaEllipse {
         this._ref.draggable(value);
     }
     type() {
-        return "ellipse";
+        return "Ellipse";
     }
     getColor() {
         return this._ref.stroke();
@@ -525,7 +525,7 @@ class KonvaArrow {
         this._ref.draggable(value);
     }
     type() {
-        return "arrow";
+        return "Arrow";
     }
     getColor() {
         return this._ref.stroke();
@@ -678,7 +678,7 @@ class KonvaImage {
         this._ref.draggable(value);
     }
     type() {
-        return "image";
+        return "Image";
     }
     getRotation() {
         return this._ref.rotation();
@@ -829,7 +829,7 @@ class KonvaCloud {
         this._ref.draggable(value);
     }
     type() {
-        return "cloud";
+        return "Cloud";
     }
     getColor() {
         return this._ref.stroke();
@@ -889,8 +889,7 @@ const MarkupMode2Konva = {
     },
     Line: {
         name: "Line",
-        initializer: (ref, params = null) => new KonvaLine(params, ref),
-        zIndex: 1
+        initializer: (ref, params = null) => new KonvaLine(params, ref)
     },
     Text: {
         name: "Text",
@@ -898,28 +897,23 @@ const MarkupMode2Konva = {
     },
     Rectangle: {
         name: "Rect",
-        initializer: (ref, params = null) => new KonvaRectangle(params, ref),
-        zIndex: 1
+        initializer: (ref, params = null) => new KonvaRectangle(params, ref)
     },
     Ellipse: {
         name: "Ellipse",
-        initializer: (ref, params = null) => new KonvaEllipse(params, ref),
-        zIndex: 1
+        initializer: (ref, params = null) => new KonvaEllipse(params, ref)
     },
     Arrow: {
         name: "Arrow",
-        initializer: (ref, params = null) => new KonvaArrow(params, ref),
-        zIndex: 1
+        initializer: (ref, params = null) => new KonvaArrow(params, ref)
     },
     Image: {
         name: "Image",
-        initializer: (ref, params = null) => new KonvaImage(params, ref),
-        zIndex: 0
+        initializer: (ref, params = null) => new KonvaImage(params, ref)
     },
     Cloud: {
         name: "Cloud",
-        initializer: (ref, params = null) => new KonvaCloud(params, ref),
-        zIndex: 1
+        initializer: (ref, params = null) => new KonvaCloud(params, ref)
     }
 };
 
@@ -928,7 +922,6 @@ class KonvaMarkup {
         this._pointerEvents = [];
         this._markupIsActive = false;
         this._markupColor = new MarkupColor(255, 0, 0);
-        this._zIndex = 1;
         this.lineWidth = 4;
         this.lineType = "solid";
         this.fontSize = 34;
@@ -1028,6 +1021,9 @@ class KonvaMarkup {
     }
     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,
@@ -1090,6 +1086,8 @@ class KonvaMarkup {
     enableEditMode(mode) {
         if (!mode || !MarkupMode2Konva[mode]) {
             this.clearSelected();
+            this.removeTextInput();
+            this.removeImageInput();
             this._markupIsActive = false;
         } else {
             this._markupMode = mode;
@@ -1098,13 +1096,10 @@ class KonvaMarkup {
         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);
-        object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
-        this._zIndex++;
         return object;
     }
     getObjects() {
@@ -1132,13 +1127,13 @@ class KonvaMarkup {
         if (this._konvaTransformer) 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) return [];
         const konvaShape = MarkupMode2Konva[type];
         if (!konvaShape || !konvaShape.initializer) return [];
-        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() {
         const stage = new Konva.Stage({
@@ -1151,6 +1146,12 @@ class KonvaMarkup {
             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,
@@ -1316,7 +1317,7 @@ class KonvaMarkup {
                     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 {
                 transformer.rotateEnabled(true);
@@ -1349,8 +1350,13 @@ class KonvaMarkup {
     }
     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;
@@ -1547,6 +1553,9 @@ class KonvaMarkup {
             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();