@inweb/markup 25.8.3 → 25.8.4

package/src/markup/Konva/KonvaMarkup.ts

@@ -95,11 +95,10 @@ const MarkupMode2Konva = {
  * 2D markup core.
  */
 export class KonvaMarkup implements IMarkup {
-  private _isInitialized = false;
   private _viewer: IEventEmitter;
   private _worldTransformer: IWorldTransform;
   private _container: HTMLElement;
-  private _pointerEvents: string[];
+  private _pointerEvents: string[] = [];
   private _markupIsActive = false;
   private _markupMode: MarkupMode;
   private _markupColor = new MarkupColor(255, 0, 0);
@@ -116,8 +115,6 @@ export class KonvaMarkup implements IMarkup {
   private _resizeObserver: ResizeObserver;
   private _zIndex = 1;
 
-  private readonly _markupContainerName = "markupContainer";
-
   public lineWidth = 4;
   public lineType: MarkupLineType = "solid";
   public fontSize = 34;
@@ -128,10 +125,12 @@ export class KonvaMarkup implements IMarkup {
     viewer?: IEventEmitter,
     worldTransformer?: IWorldTransform
   ): void {
-    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>'
+    if (!Konva) {
+      console.error(
+        'Markup error: Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"></script>'
       );
+      return;
+    }
 
     this._viewer = viewer;
     this._worldTransformer = worldTransformer ?? new WorldTransform();
@@ -139,7 +138,7 @@ export class KonvaMarkup implements IMarkup {
     this._pointerEvents = pointerEvents ?? [];
 
     this._markupContainer = document.createElement("div");
-    this._markupContainer.id = this._markupContainerName;
+    this._markupContainer.id = "markup-container";
     this._markupContainer.style.position = "absolute";
     this._markupContainer.style.top = "0px";
     this._markupContainer.style.left = "0px";
@@ -161,26 +160,21 @@ export class KonvaMarkup implements IMarkup {
       this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
       this._viewer.addEventListener("pan", this.pan);
     }
-
-    this._isInitialized = true;
   }
 
   dispose(): void {
-    if (!this._isInitialized) return;
-
     if (this._viewer) {
       this._viewer.removeEventListener("pan", this.pan);
       this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+      this._pointerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
     }
 
-    this._pointerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
-
     this.destroyKonva();
 
-    this._resizeObserver.disconnect();
+    this._resizeObserver?.disconnect();
     this._resizeObserver = undefined;
 
-    this._markupContainer.remove();
+    this._markupContainer?.remove();
     this._markupContainer = undefined;
 
     this._container = undefined;
@@ -188,7 +182,6 @@ export class KonvaMarkup implements IMarkup {
     this._worldTransformer = undefined;
 
     this._markupIsActive = false;
-    this._isInitialized = false;
   }
 
   changeActiveDragger = (event: ChangeActiveDraggerEvent) => {
@@ -211,9 +204,10 @@ export class KonvaMarkup implements IMarkup {
     const { width, height } = entries[0].contentRect;
 
     if (!width || !height) return; // <- invisible container, or container with parent removed
+    if (!this._konvaStage) return;
 
-    this._konvaStage?.width(width);
-    this._konvaStage?.height(height);
+    this._konvaStage.width(width);
+    this._konvaStage.height(height);
   };
 
   pan = (event: PanEvent) => {
@@ -232,7 +226,7 @@ export class KonvaMarkup implements IMarkup {
     this.removeTextInput();
     this.removeImageInput();
     this.clearSelected();
-    this.getObjects().forEach((obj) => obj.ref().destroy());
+    this.getObjects().forEach((obj) => obj.delete());
   }
 
   getMarkupColor(): { r: number; g: number; b: number } {
@@ -354,6 +348,8 @@ export class KonvaMarkup implements IMarkup {
   }
 
   getSelectedObjects(): IMarkupObject[] {
+    if (!this._konvaTransformer) return [];
+
     return this._konvaTransformer
       .nodes()
       .map((ref) => {
@@ -365,35 +361,39 @@ export class KonvaMarkup implements IMarkup {
   }
 
   selectObjects(objects: IMarkupObject[]) {
+    if (!this._konvaTransformer) return;
+
     const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x) => x.ref()));
     this._konvaTransformer.nodes(selectedObjs);
   }
 
   clearSelected(): void {
-    this._konvaTransformer.nodes([]);
+    if (this._konvaTransformer) this._konvaTransformer.nodes([]);
   }
 
   private addObject(object: IMarkupObject): void {
-    this._konvaLayer.add(object.ref());
+    if (this._konvaLayer) this._konvaLayer.add(object.ref());
   }
 
   private konvaLayerFind(type: string): any {
+    if (!this._konvaLayer) return [];
+
     const konvaShape = MarkupMode2Konva[type];
-    if (konvaShape && konvaShape.initializer) {
-      // 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 [];
+    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);
   }
 
   private initializeKonva(): any {
     // first we need Konva core things: stage and layer
-    this._konvaStage = new Konva.Stage({
-      container: this._markupContainerName,
+    const stage = new Konva.Stage({
+      container: this._markupContainer,
       width: this._container.clientWidth,
       height: this._container.clientHeight,
     });
-    const stage = this._konvaStage;
+    this._konvaStage = stage;
+
     const layer = new Konva.Layer({ pixelRation: window.devicePixelRatio });
     stage.add(layer);
     this._konvaLayer = layer;
@@ -403,9 +403,8 @@ export class KonvaMarkup implements IMarkup {
       keepRatio: false,
       flipEnabled: false,
     });
-
-    this._konvaTransformer = transformer;
     layer.add(transformer);
+    this._konvaTransformer = transformer;
 
     let isPaint = false;
     let lastLine;
@@ -601,12 +600,8 @@ export class KonvaMarkup implements IMarkup {
     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();
+        this.getSelectedObjects().forEach((obj: IMarkupObject) => obj.delete());
+        this.clearSelected();
         return;
       }
       e.preventDefault();
@@ -616,7 +611,7 @@ export class KonvaMarkup implements IMarkup {
   private destroyKonva() {
     this.clearOverlay();
 
-    this._konvaStage.destroy();
+    this._konvaStage?.destroy();
 
     this._konvaLayer = undefined;
     this._konvaTransformer = undefined;
@@ -659,10 +654,10 @@ export class KonvaMarkup implements IMarkup {
   private getMarkupTexts(): Array<IText> {
     const texts = [];
 
-    const textSize = 0.02;
-    const textScale = this._worldTransformer.getScale();
-
     this.konvaLayerFind("Text").forEach((ref) => {
+      const textSize = 0.02;
+      const textScale = this._worldTransformer.getScale();
+
       const position = { x: ref.x(), y: ref.y() };
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
@@ -804,12 +799,14 @@ export class KonvaMarkup implements IMarkup {
     this.clearSelected();
 
     const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = this._konvaStage.width();
-    tempCanvas.height = this._konvaStage.height();
+    if (this._konvaStage) {
+      tempCanvas.width = this._konvaStage.width();
+      tempCanvas.height = this._konvaStage.height();
 
-    const ctx = tempCanvas.getContext("2d");
-    if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
-    ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
+      const ctx = tempCanvas.getContext("2d");
+      if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
+      ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
+    }
 
     return tempCanvas.toDataURL("image/jpeg", 0.25);
   }
@@ -836,7 +833,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    this._konvaLayer.add(konvaLine.ref());
+    this.addObject(konvaLine);
     return konvaLine;
   }
 
@@ -925,7 +922,7 @@ export class KonvaMarkup implements IMarkup {
   }
 
   private addText(
-    specifiedText: string,
+    text: string,
     position: Konva.Vector2d,
     angle?: number,
     color?: string,
@@ -933,15 +930,12 @@ export class KonvaMarkup implements IMarkup {
     fontSize?: number,
     id?: string
   ): KonvaText | void {
-    if (!specifiedText) return;
+    if (!text) return;
 
-    const trNodes = this._konvaTransformer.nodes();
-    if (trNodes.length > 0) {
-      // in case of edit - remove old Konva.Text object
-      trNodes[0].destroy();
-      this._konvaTransformer.nodes([]);
-    }
+    // in case of edit - remove old Konva.Text object
+    this.getSelectedObjects().at(0)?.delete();
 
+    this.clearSelected();
     this.removeTextInput();
 
     // in case we have old viewpoint without font_size
@@ -954,14 +948,14 @@ export class KonvaMarkup implements IMarkup {
 
     const konvaText = new KonvaText({
       position: { x: position.x, y: position.y },
-      text: specifiedText,
+      text,
       rotation: angle,
       fontSize: fontSize || this.fontSize,
       color: color || this._markupColor.HexColor,
       id,
     });
 
-    this._konvaLayer.add(konvaText.ref());
+    this.addObject(konvaText);
     return konvaText;
   }
 
@@ -984,7 +978,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    this._konvaLayer.add(konvaRectangle.ref());
+    this.addObject(konvaRectangle);
     return konvaRectangle;
   }
 
@@ -1005,7 +999,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    this._konvaLayer.add(konvaEllipse.ref());
+    this.addObject(konvaEllipse);
     return konvaEllipse;
   }
 
@@ -1024,7 +1018,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    this._konvaLayer.add(konvaArrow.ref());
+    this.addObject(konvaArrow);
     return konvaArrow;
   }
 
@@ -1047,7 +1041,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    this._konvaLayer.add(konvaCloud.ref());
+    this.addObject(konvaCloud);
     return konvaCloud;
   }
 
@@ -1060,13 +1054,10 @@ export class KonvaMarkup implements IMarkup {
   ): KonvaImage | void {
     if (!position || !src) return;
 
-    const trNodes = this._konvaTransformer.nodes();
-    if (trNodes.length > 0) {
-      // in case of edit - remove old Image placeholder object
-      trNodes[0].destroy();
-      this._konvaTransformer.nodes([]);
-    }
+    // in case of edit - remove old Image placeholder object
+    this.getSelectedObjects().at(0)?.delete();
 
+    this.clearSelected();
     this.removeImageInput();
 
     const konvaImage = new KonvaImage({
@@ -1077,7 +1068,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    this._konvaLayer.add(konvaImage.ref());
+    this.addObject(konvaImage);
     return konvaImage;
   }
 }