@inweb/markup 25.8.2 → 25.8.4

package/src/markup/Konva/KonvaMarkup.ts

@@ -23,12 +23,22 @@
 
 import Konva from "konva";
 import { IEventEmitter } from "@inweb/eventemitter2";
-import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
+import {
+  ChangeActiveDraggerEvent,
+  IArrow,
+  ICloud,
+  IEllipse,
+  IImage,
+  ILine,
+  IRectangle,
+  IText,
+  IViewpoint,
+  PanEvent,
+} from "@inweb/viewer-core";
 
 import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
-import { IMarkupColorable } from "../IMarkupColorable";
 import { MarkupLineType } from "../IMarkupLine";
 import { MarkupColor } from "./MarkupColor";
 import { WorldTransform } from "../WorldTransform";
@@ -85,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);
@@ -106,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;
@@ -118,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();
@@ -129,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";
@@ -151,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;
@@ -178,7 +182,6 @@ export class KonvaMarkup implements IMarkup {
     this._worldTransformer = undefined;
 
     this._markupIsActive = false;
-    this._isInitialized = false;
   }
 
   changeActiveDragger = (event: ChangeActiveDraggerEvent) => {
@@ -201,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) => {
@@ -222,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 } {
@@ -235,49 +239,73 @@ export class KonvaMarkup implements IMarkup {
 
   colorizeAllMarkup(r: number, g: number, b: number): void {
     const hexColor = new MarkupColor(r, g, b).HexColor;
-    this.getObjects().forEach((obj) => {
-      const colorable = obj as unknown as IMarkupColorable;
-      if (colorable && colorable.setColor) colorable.setColor(hexColor);
-    });
-
-    this._konvaLayer.draw();
+    this.getObjects().filter((obj: any) => obj.setColor?.(hexColor));
   }
 
   colorizeSelectedMarkups(r: number, g: number, b: number): void {
     const hexColor = new MarkupColor(r, g, b).HexColor;
-    this.getSelectedObjects().forEach((obj) => {
-      const colorable = obj as unknown as IMarkupColorable;
-      if (colorable && colorable.setColor) colorable.setColor(hexColor);
-    });
+    this.getSelectedObjects().filter((obj: any) => obj.setColor?.(hexColor));
   }
 
   setViewpoint(viewpoint: IViewpoint): void {
-    const markupColor = viewpoint.custom_fields.markup_color || { r: 255, g: 0, b: 0 };
+    const markupColor = viewpoint.custom_fields?.markup_color || { r: 255, g: 0, b: 0 };
     this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
 
-    this.loadMarkup(viewpoint);
+    viewpoint.lines?.forEach((line: ILine) => {
+      const linePoints = [];
+      line.points.forEach((point) => {
+        const screenPoint = this._worldTransformer.worldToScreen(point);
+        linePoints.push(screenPoint.x);
+        linePoints.push(screenPoint.y);
+      });
+      this.addLine(linePoints, line.color, line.type as MarkupLineType, line.width, line.id);
+    });
+
+    viewpoint.texts?.forEach((text: IText) => {
+      const screenPoint = this._worldTransformer.worldToScreen(text.position);
+      this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
+    });
+
+    viewpoint.rectangles?.forEach((rect: IRectangle) => {
+      const screenPoint = this._worldTransformer.worldToScreen(rect.position);
+      this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+    });
+
+    viewpoint.ellipses?.forEach((ellipse: IEllipse) => {
+      const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
+      this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+    });
+
+    viewpoint.arrows?.forEach((arrow: IArrow) => {
+      const startPoint = this._worldTransformer.worldToScreen(arrow.start);
+      const endPoint = this._worldTransformer.worldToScreen(arrow.end);
+      this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
+    });
+
+    viewpoint.clouds?.forEach((cloud: ICloud) => {
+      const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
+      this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+    });
+
+    viewpoint.images?.forEach((image: IImage) => {
+      const screenPoint = this._worldTransformer.worldToScreen(image.position);
+      this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+    });
   }
 
   getViewpoint(): IViewpoint {
-    const viewpoint: IViewpoint = {
-      lines: [],
-      texts: [],
-      arrows: [],
-      clouds: [],
-      ellipses: [],
-      images: [],
-      rectangles: [],
-    };
-
-    viewpoint.snapshot = {
-      data: this.combineMarkupWithDrawing(),
-    };
-
-    viewpoint.custom_fields = {
-      markup_color: this.getMarkupColor(),
-    };
-
-    this.fillViewpointShapes(viewpoint);
+    const viewpoint: IViewpoint = {};
+
+    viewpoint.lines = this.getMarkupLines();
+    viewpoint.texts = this.getMarkupTexts();
+    viewpoint.arrows = this.getMarkupArrows();
+    viewpoint.clouds = this.getMarkupClouds();
+    viewpoint.ellipses = this.getMarkupEllipses();
+    viewpoint.images = this.getMarkupImages();
+    viewpoint.rectangles = this.getMarkupRectangles();
+
+    viewpoint.custom_fields = { markup_color: this.getMarkupColor() };
+    viewpoint.snapshot = { data: this.combineMarkupWithDrawing() };
 
     viewpoint.description = new Date().toDateString();
     return viewpoint;
@@ -320,6 +348,8 @@ export class KonvaMarkup implements IMarkup {
   }
 
   getSelectedObjects(): IMarkupObject[] {
+    if (!this._konvaTransformer) return [];
+
     return this._konvaTransformer
       .nodes()
       .map((ref) => {
@@ -331,86 +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([]);
-  }
-
-  private fillViewpointShapes(viewpoint) {
-    const markupLines = this.getMarkupLines();
-    if (markupLines && markupLines.length > 0) {
-      markupLines?.forEach((line) => {
-        viewpoint.lines.push(line);
-      });
-    }
-
-    const markupTexts = this.getMarkupTexts();
-    if (markupTexts && markupTexts.length > 0) {
-      markupTexts?.forEach((text) => {
-        viewpoint.texts.push(text);
-      });
-    }
-
-    const markupRectangles = this.getMarkupRectangles();
-    if (markupRectangles && markupRectangles.length > 0) {
-      markupRectangles?.forEach((rectangle) => {
-        viewpoint.rectangles.push(rectangle);
-      });
-    }
-
-    const markupEllipses = this.getMarkupEllipses();
-    if (markupEllipses && markupEllipses.length > 0) {
-      markupEllipses?.forEach((ellipse) => {
-        viewpoint.ellipses.push(ellipse);
-      });
-    }
-
-    const markupArrows = this.getMarkupArrows();
-    if (markupArrows && markupArrows.length > 0) {
-      markupArrows?.forEach((arrow) => {
-        viewpoint.arrows.push(arrow);
-      });
-    }
-
-    const markupImages = this.getMarkupImages();
-    if (markupImages && markupImages.length > 0) {
-      markupImages?.forEach((image) => {
-        viewpoint.images.push(image);
-      });
-    }
-
-    const markupClouds = this.getMarkupClouds();
-    if (markupClouds && markupClouds.length > 0) {
-      markupClouds?.forEach((cloud) => {
-        viewpoint.clouds.push(cloud);
-      });
-    }
+    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;
@@ -420,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;
@@ -618,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();
@@ -633,20 +611,22 @@ export class KonvaMarkup implements IMarkup {
   private destroyKonva() {
     this.clearOverlay();
 
-    this._konvaStage.destroy();
+    this._konvaStage?.destroy();
 
     this._konvaLayer = undefined;
     this._konvaTransformer = undefined;
     this._konvaStage = undefined;
   }
 
-  private getMarkupLines() {
+  private getMarkupLines(): Array<ILine> {
     const lines = [];
-    this.konvaLayerFind("Line").forEach((line) => {
-      const linePoints = line.points();
+
+    this.konvaLayerFind("Line").forEach((ref) => {
+      const linePoints = ref.points();
       if (!linePoints) return;
+
       const worldPoints = [];
-      const absoluteTransform = line.getAbsoluteTransform();
+      const absoluteTransform = ref.getAbsoluteTransform();
       for (let i = 0; i < linePoints.length; i += 2) {
         // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
         // https://stackoverflow.com/a/57641487 - check answer's comments
@@ -656,33 +636,33 @@ export class KonvaMarkup implements IMarkup {
         worldPoints.push(worldPoint);
       }
 
-      const konvaLine = new KonvaLine(null, line);
-      lines.push({
+      const konvaLine = new KonvaLine(null, ref);
+      const line: ILine = {
         id: konvaLine.id(),
         points: worldPoints,
         color: konvaLine.getColor() || "#ff0000",
         type: konvaLine.getLineType() || this.lineType,
         width: konvaLine.getLineWidth() || this.lineWidth,
-      });
+      };
+
+      lines.push(line);
     });
 
     return lines;
   }
 
-  private getMarkupTexts() {
+  private getMarkupTexts(): Array<IText> {
     const texts = [];
 
-    const textSize = 0.02;
-    const textScale = this._worldTransformer.getScale();
-
-    this.konvaLayerFind("Text").forEach((text) => {
-      if (!text) return;
+    this.konvaLayerFind("Text").forEach((ref) => {
+      const textSize = 0.02;
+      const textScale = this._worldTransformer.getScale();
 
-      const position = { x: text.x(), y: text.y() };
+      const position = { x: ref.x(), y: ref.y() };
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaText(null, text);
-      texts.push({
+      const shape = new KonvaText(null, ref);
+      const text: IText = {
         id: shape.id(),
         position: worldPoint,
         text: shape.getText(),
@@ -690,168 +670,143 @@ export class KonvaMarkup implements IMarkup {
         angle: shape.getRotation(),
         color: shape.getColor(),
         font_size: shape.getFontSize(),
-      });
+      };
+
+      texts.push(text);
     });
 
     return texts;
   }
 
-  private getMarkupRectangles() {
+  private getMarkupRectangles(): Array<IRectangle> {
     const rectangles = [];
-    this.konvaLayerFind("Rectangle").forEach((rect) => {
-      const position = rect.position();
+
+    this.konvaLayerFind("Rectangle").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaRectangle(null, rect);
-      rectangles.push({
+      const shape = new KonvaRectangle(null, ref);
+      const rectangle: IRectangle = {
         id: shape.id(),
         position: worldPoint,
         width: shape.getWidth(),
         height: shape.getHeigth(),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
-      });
+      };
+
+      rectangles.push(rectangle);
     });
 
     return rectangles;
   }
 
-  private getMarkupEllipses() {
+  private getMarkupEllipses(): Array<IEllipse> {
     const ellipses = [];
-    this.konvaLayerFind("Ellipse").forEach((ellipse) => {
-      const position = ellipse.position();
+
+    this.konvaLayerFind("Ellipse").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaEllipse(null, ellipse);
-      ellipses.push({
+      const shape = new KonvaEllipse(null, ref);
+      const ellipse: IEllipse = {
         id: shape.id(),
         position: worldPoint,
-        radius: { x: ellipse.getRadiusX(), y: ellipse.getRadiusY() },
+        radius: { x: ref.getRadiusX(), y: ref.getRadiusY() },
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
-      });
+      };
+
+      ellipses.push(ellipse);
     });
 
     return ellipses;
   }
 
-  private getMarkupArrows() {
+  private getMarkupArrows(): Array<IArrow> {
     const arrows = [];
-    this.konvaLayerFind("Arrow").forEach((arrow) => {
+
+    this.konvaLayerFind("Arrow").forEach((ref) => {
       // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-      const absoluteTransform = arrow.getAbsoluteTransform();
+      const absoluteTransform = ref.getAbsoluteTransform();
 
-      const atStartPoint = absoluteTransform.point({ x: arrow.points()[0], y: arrow.points()[1] });
+      const atStartPoint = absoluteTransform.point({ x: ref.points()[0], y: ref.points()[1] });
       const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
 
-      const atEndPoint = absoluteTransform.point({ x: arrow.points()[2], y: arrow.points()[3] });
+      const atEndPoint = absoluteTransform.point({ x: ref.points()[2], y: ref.points()[3] });
       const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
 
-      const shape = new KonvaArrow(null, arrow);
-      arrows.push({
+      const shape = new KonvaArrow(null, ref);
+      const arrow: IArrow = {
         id: shape.id(),
         start: worldStartPoint,
         end: worldEndPoint,
         color: shape.getColor(),
-      });
+      };
+
+      arrows.push(arrow);
     });
 
     return arrows;
   }
 
-  private getMarkupImages() {
+  private getMarkupImages(): Array<IImage> {
     const images = [];
-    this.konvaLayerFind("Image").forEach((image) => {
-      const position = image.position();
+
+    this.konvaLayerFind("Image").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaImage(null, image);
-      images.push({
+      const shape = new KonvaImage(null, ref);
+      const image: IImage = {
         id: shape.id(),
         position: worldPoint,
         src: shape.getSrc(),
         width: shape.getWidth(),
         height: shape.getHeight(),
-      });
+      };
+
+      images.push(image);
     });
 
     return images;
   }
 
-  private getMarkupClouds() {
+  private getMarkupClouds(): Array<ICloud> {
     const clouds = [];
-    this.konvaLayerFind("Cloud").forEach((cloud) => {
-      const position = cloud.position();
+
+    this.konvaLayerFind("Cloud").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaCloud(null, cloud);
-      clouds.push({
+      const shape = new KonvaCloud(null, ref);
+      const cloud: ICloud = {
         id: shape.id(),
         position: worldPoint,
         width: shape.getWidth(),
         height: shape.getHeigth(),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
-      });
-    });
-
-    return clouds;
-  }
-
-  private loadMarkup(viewpoint: IViewpoint) {
-    viewpoint.lines?.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 as MarkupLineType, vpLine.width, vpLine.id);
-    });
-
-    viewpoint.texts?.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);
-    });
-
-    viewpoint.rectangles?.forEach((vpRect) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpRect.position);
-      this.addRectangle(screenPoint, vpRect.width, vpRect.height, vpRect.line_width, vpRect.color, vpRect.id);
-    });
-
-    viewpoint.ellipses?.forEach((vpEllipse) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpEllipse.position);
-      this.addEllipse(screenPoint, vpEllipse.radius, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
-    });
-
-    viewpoint.arrows?.forEach((vpArrow) => {
-      const startPoint = this._worldTransformer.worldToScreen(vpArrow.start);
-      const endPoint = this._worldTransformer.worldToScreen(vpArrow.end);
-      this.addArrow(startPoint, endPoint, vpArrow.color, vpArrow.id);
-    });
+      };
 
-    viewpoint.clouds?.forEach((vpCloud) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpCloud.position);
-      this.addCloud(screenPoint, vpCloud.width, vpCloud.height, vpCloud.line_width, vpCloud.color, vpCloud.id);
+      clouds.push(cloud);
     });
 
-    viewpoint.images?.forEach((vpImage) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
-      this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
-    });
+    return clouds;
   }
 
   private combineMarkupWithDrawing() {
     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);
   }
@@ -878,8 +833,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaLine.ref();
-    this._konvaLayer.add(obj);
+    this.addObject(konvaLine);
     return konvaLine;
   }
 
@@ -968,7 +922,7 @@ export class KonvaMarkup implements IMarkup {
   }
 
   private addText(
-    specifiedText: string,
+    text: string,
     position: Konva.Vector2d,
     angle?: number,
     color?: string,
@@ -976,37 +930,33 @@ export class KonvaMarkup implements IMarkup {
     fontSize?: number,
     id?: string
   ): KonvaText | void {
-    const trNodes = this._konvaTransformer.nodes();
-    if (trNodes.length > 0) {
-      // in case of edit - remove old Konva.Text object
-      trNodes[0].destroy();
-      this._konvaTransformer.nodes([]);
-    }
+    if (!text) return;
 
-    this.removeTextInput();
+    // in case of edit - remove old Konva.Text object
+    this.getSelectedObjects().at(0)?.delete();
 
-    if (specifiedText) {
-      const tolerance = 1.0e-6;
+    this.clearSelected();
+    this.removeTextInput();
 
-      // in case we have old viewpoint without font_size
-      if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
-        const size = 0.02;
-        const scale = this._worldTransformer.getScale();
-        fontSize = textSize / (scale.y / size) / 34;
-      }
+    // in case we have old viewpoint without font_size
+    const tolerance = 1.0e-6;
+    if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+      const size = 0.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,
-      });
+    const konvaText = new KonvaText({
+      position: { x: position.x, y: position.y },
+      text,
+      rotation: angle,
+      fontSize: fontSize || this.fontSize,
+      color: color || this._markupColor.HexColor,
+      id,
+    });
 
-      this._konvaLayer.add(konvaText.ref());
-      return konvaText;
-    }
+    this.addObject(konvaText);
+    return konvaText;
   }
 
   private addRectangle(
@@ -1028,8 +978,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaRectangle.ref();
-    this._konvaLayer.add(obj);
+    this.addObject(konvaRectangle);
     return konvaRectangle;
   }
 
@@ -1050,8 +999,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaEllipse.ref();
-    this._konvaLayer.add(obj);
+    this.addObject(konvaEllipse);
     return konvaEllipse;
   }
 
@@ -1070,8 +1018,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaArrow.ref();
-    this._konvaLayer.add(obj);
+    this.addObject(konvaArrow);
     return konvaArrow;
   }
 
@@ -1094,8 +1041,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaCloud.ref();
-    this._konvaLayer.add(obj);
+    this.addObject(konvaCloud);
     return konvaCloud;
   }
 
@@ -1106,32 +1052,23 @@ export class KonvaMarkup implements IMarkup {
     height?: number,
     id?: string
   ): KonvaImage | void {
-    if (!position) return;
+    if (!position || !src) return;
 
-    let konvaImage: KonvaImage;
-
-    if (src) {
-      konvaImage = new KonvaImage({
-        position,
-        src,
-        width,
-        height,
-        id,
-      });
-
-      const obj = konvaImage.ref();
-      this._konvaLayer.add(obj);
-
-      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({
+      position,
+      src,
+      width,
+      height,
+      id,
+    });
+
+    this.addObject(konvaImage);
     return konvaImage;
   }
 }