@inweb/markup 25.8.11 → 25.8.13

package/src/markup/Konva/KonvaCloud.ts

@@ -146,7 +146,7 @@ export class KonvaCloud implements IMarkupCloud {
   }
 
   type(): string {
-    return "cloud";
+    return "Cloud";
   }
 
   getColor(): string {

package/src/markup/Konva/KonvaEllipse.ts

@@ -115,7 +115,7 @@ export class KonvaEllipse implements IMarkupEllipse {
   }
 
   type(): string {
-    return "ellipse";
+    return "Ellipse";
   }
 
   getColor(): string {

package/src/markup/Konva/KonvaImage.ts

@@ -122,7 +122,7 @@ export class KonvaImage implements IMarkupImage {
   }
 
   type(): string {
-    return "image";
+    return "Image";
   }
 
   getRotation(): number {

package/src/markup/Konva/KonvaLine.ts

@@ -64,7 +64,7 @@ export class KonvaLine implements IMarkupLine {
   }
 
   type(): string {
-    return "line";
+    return "Line";
   }
 
   getColor(): string {

package/src/markup/Konva/KonvaMarkup.ts

@@ -58,7 +58,6 @@ const MarkupMode2Konva = {
   Line: {
     name: "Line",
     initializer: (ref: any, params = null) => new KonvaLine(params, ref),
-    zIndex: 1,
   },
   Text: {
     name: "Text",
@@ -67,27 +66,22 @@ const MarkupMode2Konva = {
   Rectangle: {
     name: "Rect",
     initializer: (ref: any, params = null) => new KonvaRectangle(params, ref),
-    zIndex: 1,
   },
   Ellipse: {
     name: "Ellipse",
     initializer: (ref: any, params = null) => new KonvaEllipse(params, ref),
-    zIndex: 1,
   },
   Arrow: {
     name: "Arrow",
     initializer: (ref: any, params = null) => new KonvaArrow(params, ref),
-    zIndex: 1,
   },
   Image: {
     name: "Image",
     initializer: (ref: any, params = null) => new KonvaImage(params, ref),
-    zIndex: 0,
   },
   Cloud: {
     name: "Cloud",
     initializer: (ref: any, params = null) => new KonvaCloud(params, ref),
-    zIndex: 1,
   },
 };
 
@@ -113,7 +107,9 @@ export class KonvaMarkup implements IMarkup {
   private _imageInputPos: Konva.Vector2d;
   private _markupContainer: HTMLDivElement;
   private _resizeObserver: ResizeObserver;
-  private _zIndex = 1;
+  private _groupImages: Konva.Group;
+  private _groupGeometry: Konva.Group;
+  private _groupTexts: Konva.Group;
 
   public lineWidth = 4;
   public lineType: MarkupLineType = "solid";
@@ -246,6 +242,10 @@ export class KonvaMarkup implements IMarkup {
   }
 
   setViewpoint(viewpoint: IViewpoint): void {
+    this.clearSelected();
+    this.removeTextInput();
+    this.removeImageInput();
+
     const markupColor = viewpoint.custom_fields?.markup_color || { r: 255, g: 0, b: 0 };
     this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
 
@@ -312,6 +312,8 @@ export class KonvaMarkup implements IMarkup {
   enableEditMode(mode: MarkupMode | false): this {
     if (!mode || !MarkupMode2Konva[mode]) {
       this.clearSelected();
+      this.removeTextInput();
+      this.removeImageInput();
       this._markupIsActive = false;
     } else {
       this._markupMode = mode;
@@ -328,11 +330,6 @@ export class KonvaMarkup implements IMarkup {
     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(konvaShape.zIndex ?? this._zIndex);
-    this._zIndex++;
-
     return object;
   }
 
@@ -370,7 +367,9 @@ export class KonvaMarkup implements IMarkup {
   }
 
   private addObject(object: IMarkupObject): void {
-    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());
   }
 
   private konvaLayerFind(type: string): any {
@@ -380,7 +379,15 @@ export class KonvaMarkup implements IMarkup {
     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
+      );
   }
 
   private initializeKonva(): any {
@@ -394,6 +401,14 @@ export class KonvaMarkup implements IMarkup {
 
     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({
@@ -561,7 +576,11 @@ export class KonvaMarkup implements IMarkup {
         }
       }
 
-      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);
@@ -607,10 +626,15 @@ export class KonvaMarkup implements IMarkup {
   }
 
   private destroyKonva() {
+    this.removeTextInput();
+    this.removeImageInput();
     this.clearOverlay();
 
     this._konvaStage?.destroy();
 
+    this._groupImages = undefined;
+    this._groupGeometry = undefined;
+    this._groupTexts = undefined;
     this._konvaLayer = undefined;
     this._konvaTransformer = undefined;
     this._konvaStage = undefined;
@@ -845,6 +869,10 @@ export class KonvaMarkup implements IMarkup {
       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();

package/src/markup/Konva/KonvaRectangle.ts

@@ -106,7 +106,7 @@ export class KonvaRectangle implements IMarkupRectangle {
   }
 
   type(): string {
-    return "rectangle";
+    return "Rectangle";
   }
 
   getColor(): string {

package/src/markup/Konva/KonvaText.ts

@@ -82,7 +82,7 @@ export class KonvaText implements IMarkupText {
   }
 
   type(): string {
-    return "text";
+    return "Text";
   }
 
   getColor(): string {