@inweb/markup 25.7.4

package/src/markup/Konva/KonvaMarkup.ts

@@ -0,0 +1,1264 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import Konva from "konva";
+import { IEventEmitter } from "@inweb/eventemitter2";
+import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
+
+import { IMarkup, MarkupMode } from "../IMarkup";
+import { IWorldTransform } from "../IWorldTransform";
+import { MarkupColor } from "./MarkupColor";
+import { IMarkupObject } from "../IMarkupObject";
+import { IMarkupColorable } from "../IMarkupColorable";
+import { KonvaLine } from "./KonvaLine";
+import { KonvaText } from "./KonvaText";
+import { KonvaRectangle } from "./KonvaRectangle";
+import { KonvaEllipse } from "./KonvaEllipse";
+import { KonvaArrow } from "./KonvaArrow";
+import { KonvaImage } from "./KonvaImage";
+import { KonvaCloud } from "./KonvaCloud";
+import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
+import { IMarkupArrow } from "../IMarkupArrow";
+import { IMarkupEllipse } from "../IMarkupEllipse";
+import { IMarkupRectangle } from "../IMarkupRectangle";
+import { IMarkupCloud } from "../IMarkupCloud";
+import { IMarkupImage } from "../IMarkupImage";
+import { IMarkupText } from "../IMarkupText";
+
+class KonvaShape {
+  name: string;
+  initializer: (ref: any) => any;
+}
+
+// move to separate class and create factory with enum?
+const MarkupMode2Konva = new Map<MarkupMode, KonvaShape>([
+  [
+    MarkupMode.SelectMarkup,
+    {
+      name: "SelectMarkup",
+      initializer: () => {},
+    },
+  ],
+  [
+    MarkupMode.Line,
+    {
+      name: "Line",
+      initializer: (ref) => {
+        return new KonvaLine(null, ref);
+      },
+    },
+  ],
+  [
+    MarkupMode.Text,
+    {
+      name: "Text",
+      initializer: (ref) => {
+        return new KonvaText(null, ref);
+      },
+    },
+  ],
+  [
+    MarkupMode.Rectangle,
+    {
+      name: "Rect",
+      initializer: (ref) => {
+        return new KonvaRectangle(null, ref);
+      },
+    },
+  ],
+  [
+    MarkupMode.Ellipse,
+    {
+      name: "Ellipse",
+      initializer: (ref) => {
+        return new KonvaEllipse(null, ref);
+      },
+    },
+  ],
+  [
+    MarkupMode.Arrow,
+    {
+      name: "Arrow",
+      initializer: (ref) => {
+        return new KonvaArrow(null, ref);
+      },
+    },
+  ],
+  [
+    MarkupMode.Image,
+    {
+      name: "Image",
+      initializer: (ref) => {
+        return new KonvaImage(null, ref);
+      },
+    },
+  ],
+  [
+    MarkupMode.Cloud,
+    {
+      name: "Cloud",
+      initializer: (ref) => {
+        return new KonvaCloud(null, ref);
+      },
+    },
+  ],
+]);
+
+/**
+ * 2D markup core.
+ */
+export class KonvaMarkup implements IMarkup {
+  private _isInitialized = false;
+  private _viewer: IEventEmitter;
+  private _worldTransformer: IWorldTransform;
+  private _canvasOriginal: HTMLCanvasElement;
+  private _canvasEvents: string[];
+  private _markupIsActive = false;
+  private _markupMode: MarkupMode;
+  private _markupColor = new MarkupColor(255, 0, 0);
+  private _konvaStage: Konva.Stage;
+  private _konvaLayer: Konva.Layer;
+  private _konvaTransformer: Konva.Transformer;
+
+  private _textInputRef: HTMLTextAreaElement;
+  private _textInputPos: Konva.Vector2d;
+  private _textInputAngle: number;
+  private _imageInputRef: HTMLInputElement;
+  private _imageInputPos: Konva.Vector2d;
+  private _markupContainer: HTMLDivElement;
+  private _zIndex = 1;
+
+  private readonly _markupContainerName = "markupContainer";
+
+  public lineWidth = 4;
+  public lineType: MarkupLineType = "solid";
+  public fontSize = 34;
+
+  initialize(
+    canvas: HTMLCanvasElement,
+    canvasEvents: string[],
+    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>'
+      );
+
+    this._viewer = viewer;
+    this._worldTransformer = worldTransformer;
+    this._canvasOriginal = canvas;
+    this._canvasEvents = canvasEvents ?? [];
+
+    this._markupContainer = document.createElement("div");
+    this._markupContainer.id = this._markupContainerName;
+    this._markupContainer.style.position = "absolute";
+    this._markupContainer.style.top = "0px";
+    this._markupContainer.style.left = "0px";
+    // to eliminate grey box during delete elements
+    this._markupContainer.style.outline = "0px";
+
+    const parentDiv = this._canvasOriginal.parentElement;
+    parentDiv.appendChild(this._markupContainer);
+
+    this._markupColor.setColor(255, 0, 0);
+
+    this.initializeKonva();
+    this.resize();
+
+    this._canvasEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
+
+    if (this._viewer) {
+      this._viewer.addEventListener("resize", this.resize);
+      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._viewer.removeEventListener("resize", this.resize);
+    }
+
+    this._canvasEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
+
+    this.destroyKonva();
+
+    this._markupContainer.remove();
+    this._markupContainer = undefined;
+
+    this._canvasOriginal = undefined;
+    this._viewer = undefined;
+    this._worldTransformer = undefined;
+
+    this._markupIsActive = false;
+    this._isInitialized = false;
+  }
+
+  changeActiveDragger = (event: ChangeActiveDraggerEvent) => {
+    const draggerName = event.data;
+
+    this._markupContainer.className = this._canvasOriginal.className
+      .split(" ")
+      .filter((x) => !x.startsWith("oda-cursor-"))
+      .filter((x) => x)
+      .concat(`oda-cursor-${draggerName.toLowerCase()}`)
+      .join(" ");
+
+    this.removeTextInput();
+    this.removeImageInput();
+
+    const markupMode = MarkupMode[draggerName];
+    const konvaMode = MarkupMode2Konva.get(markupMode);
+    if (konvaMode) {
+      this._markupMode = markupMode;
+      this._markupIsActive = true;
+    } else {
+      this._markupIsActive = false;
+      this._konvaTransformer.nodes([]);
+    }
+  };
+
+  resize = () => {
+    this._konvaStage?.width(this._canvasOriginal.clientWidth);
+    this._konvaStage?.height(this._canvasOriginal.clientHeight);
+  };
+
+  pan = (event: PanEvent) => {
+    const dX = event.dX / window.devicePixelRatio;
+    const dY = event.dY / window.devicePixelRatio;
+
+    Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.move({ x: dX, y: dY })));
+  };
+
+  redirectToViewer = (event: any) => {
+    if (this._viewer) this._viewer.emit(event);
+  };
+
+  syncOverlay(): void {}
+
+  clearOverlay(): void {
+    this.removeTextInput();
+    this.removeImageInput();
+    this._konvaTransformer.nodes([]);
+    Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.destroy()));
+  }
+
+  getMarkupColor(): { r: number; g: number; b: number } {
+    return this._markupColor.RGB;
+  }
+
+  setMarkupColor(r: number, g: number, b: number): void {
+    this._markupColor.setColor(r, g, b);
+  }
+
+  colorizeAllMarkup(r = 255, g = 0, b = 0): void {
+    const hex = new MarkupColor(r, g, b).HexColor;
+    Object.values(MarkupMode).forEach((mode) => {
+      this.konvaLayerFind(mode).forEach((x) => {
+        const konvaObj = MarkupMode2Konva.get(mode)?.initializer(x);
+        if (konvaObj && konvaObj.setColor) konvaObj.setColor(hex);
+      });
+    });
+
+    this._konvaLayer.draw();
+  }
+
+  colorizeSelectedMarkups(r: number, g: number, b: number): void {
+    this.getSelectedObjects().forEach((obj) => {
+      const colorable = obj as unknown as IMarkupColorable;
+      if (colorable && colorable.setColor) {
+        colorable.setColor(new MarkupColor(r, g, b).HexColor);
+      }
+    });
+  }
+
+  setViewpoint(viewpoint: IViewpoint): void {
+    const markupColor = viewpoint.custom_fields.markup_color || { r: 255, g: 0, b: 0 };
+    this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
+
+    this.loadMarkup(viewpoint);
+  }
+
+  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);
+
+    viewpoint.description = new Date().toDateString();
+    return viewpoint;
+  }
+
+  createObject(type: string, params: any): IMarkupObject {
+    let object = null;
+    let zIndex = this._zIndex;
+
+    // TODO: factory?
+    switch (type.toLocaleLowerCase()) {
+      case "line":
+        object = new KonvaLine(params);
+        zIndex = 1;
+        break;
+      case "text":
+        object = new KonvaText(params);
+        break;
+      case "rectangle":
+        object = new KonvaRectangle(params);
+        zIndex = 1;
+        break;
+      case "ellipse":
+        object = new KonvaEllipse(params);
+        zIndex = 1;
+        break;
+      case "arrow":
+        object = new KonvaArrow(params);
+        break;
+      case "image":
+        object = new KonvaImage(params);
+        zIndex = 0;
+        break;
+      case "cloud":
+        object = new KonvaCloud(params);
+        zIndex = 1;
+        break;
+      default:
+        throw new Error("Markup CreateObject - unsupported type has been detected.");
+    }
+
+    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(zIndex);
+    this._zIndex++;
+    return object;
+  }
+
+  getObjects(): IMarkupObject[] {
+    const objects = [];
+    this.konvaLayerFind(MarkupMode.Line).forEach((line) => {
+      objects.push(new KonvaLine(null, line));
+    });
+
+    this.konvaLayerFind(MarkupMode.Text).forEach((text) => {
+      objects.push(new KonvaText(null, text));
+    });
+
+    this.konvaLayerFind(MarkupMode.Rectangle).forEach((rectangle) => {
+      objects.push(new KonvaRectangle(null, rectangle));
+    });
+
+    this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse) => {
+      objects.push(new KonvaEllipse(null, ellipse));
+    });
+
+    this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow) => {
+      objects.push(new KonvaArrow(null, arrow));
+    });
+
+    this.konvaLayerFind(MarkupMode.Image).forEach((image) => {
+      objects.push(new KonvaImage(null, image));
+    });
+
+    this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud) => {
+      objects.push(new KonvaCloud(null, cloud));
+    });
+
+    return objects;
+  }
+
+  getSelectedObjects(): IMarkupObject[] {
+    const objects = [];
+
+    this._konvaTransformer.nodes().forEach((obj) => {
+      const konvaShapeName = obj.className;
+      switch (konvaShapeName) {
+        case "Line":
+          objects.push(new KonvaLine(null, obj));
+          break;
+        case "Text":
+          objects.push(new KonvaText(null, obj));
+          break;
+        case "Rect":
+          objects.push(new KonvaRectangle(null, obj));
+          break;
+        case "Ellipse":
+          objects.push(new KonvaEllipse(null, obj));
+          break;
+        case "Arrow":
+          objects.push(new KonvaArrow(null, obj));
+          break;
+        case "Image":
+          objects.push(new KonvaImage(null, obj));
+          break;
+        case "Cloud":
+          objects.push(new KonvaCloud(null, obj));
+          break;
+        default:
+          break;
+      }
+    });
+
+    return objects;
+  }
+
+  selectObjects(objects: IMarkupObject[]) {
+    const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x) => x.ref()));
+    this._konvaTransformer.nodes(selectedObjs);
+  }
+
+  clearSelected(): void {
+    this._konvaTransformer.nodes([]);
+  }
+
+  private getPoint3dFromArray(array) {
+    return { x: array[0], y: array[1], z: array[2] };
+  }
+
+  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);
+      });
+    }
+  }
+
+  private addObject(object: IMarkupObject): void {
+    this._konvaLayer.add(object.ref());
+  }
+
+  private konvaLayerFind(markupShape: MarkupMode): any {
+    const konvaShape = MarkupMode2Konva.get(markupShape);
+    if (konvaShape) {
+      // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from Layer.
+      const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x) => x.parent instanceof Konva.Layer);
+      return konvaShapes;
+    }
+    return [];
+  }
+
+  private initializeKonva(): any {
+    // first we need Konva core things: stage and layer
+    this._konvaStage = new Konva.Stage({
+      container: this._markupContainerName,
+      width: this._canvasOriginal.clientWidth,
+      height: this._canvasOriginal.clientHeight,
+    });
+    const stage = this._konvaStage;
+    const layer = new Konva.Layer({ pixelRation: window.devicePixelRatio });
+    stage.add(layer);
+    this._konvaLayer = layer;
+
+    const transformer = new Konva.Transformer({
+      shouldOverdrawWholeArea: false,
+      keepRatio: false,
+      flipEnabled: false,
+    });
+
+    this._konvaTransformer = transformer;
+    layer.add(transformer);
+
+    let isPaint = false;
+    let lastLine;
+    let mouseDownPos;
+    let lastObj;
+
+    stage.on("mousedown touchstart", (e) => {
+      // do nothing if we mousedown on any shape
+      if (
+        !this._markupIsActive ||
+        e.target !== stage ||
+        this._markupMode === MarkupMode.Text ||
+        this._markupMode === MarkupMode.Image
+      )
+        return;
+
+      if (e.target === stage && transformer.nodes().length > 0) {
+        transformer.nodes([]);
+        return;
+      }
+
+      const pos = stage.getPointerPosition();
+      mouseDownPos = pos;
+
+      isPaint = [MarkupMode.Arrow, MarkupMode.Cloud, MarkupMode.Ellipse, MarkupMode.Line, MarkupMode.Rectangle].some(
+        (m) => m === this._markupMode
+      );
+      if (this._markupMode === MarkupMode.Line) {
+        // add point twice, so we have some drawings even on a simple click
+        lastLine = this.addLine([pos.x, pos.y, pos.x, pos.y]);
+      }
+    });
+
+    stage.on("mouseup touchend", (e) => {
+      if (!this._markupIsActive) return;
+
+      if (isPaint) {
+        const pos = stage.getPointerPosition();
+        const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+        const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+        const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+        const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+        const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+        if (defParams) {
+          if (this._markupMode === MarkupMode.Rectangle) {
+            this.addRectangle({ x: startX, y: startY }, dX, dY);
+          } else if (this._markupMode === MarkupMode.Ellipse) {
+            this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
+          } else if (this._markupMode === MarkupMode.Arrow) {
+            this.addArrow(
+              { x: mouseDownPos.x, y: mouseDownPos.y },
+              { x: defParams ? mouseDownPos.x + 200 : pos.x, y: defParams ? startY : pos.y }
+            );
+          } else if (this._markupMode === MarkupMode.Cloud) {
+            this.addCloud({ x: startX, y: startY }, Math.max(100, dX), Math.max(100, dY));
+          }
+        }
+      }
+
+      lastObj = undefined;
+      isPaint = false;
+    });
+
+    stage.on("mousemove touchmove", (e) => {
+      if (!this._markupIsActive) return;
+      if (!isPaint) {
+        return;
+      }
+
+      // prevent scrolling on touch devices
+      //e.evt.preventDefault();
+
+      const pos = stage.getPointerPosition();
+      const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+      const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+      const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+      const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+      const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+
+      if (this._markupMode === MarkupMode.Line) {
+        lastLine.addPoints([{ x: pos.x, y: pos.y }]);
+      } else if (this._markupMode === MarkupMode.Arrow) {
+        if (lastObj) lastObj.setEndPoint(pos.x, pos.y);
+        else lastObj = this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: pos.x, y: pos.y });
+      } else if (this._markupMode === MarkupMode.Rectangle) {
+        if (lastObj) {
+          lastObj.setPosition(startX, startY);
+          lastObj.setWidth(dX);
+          lastObj.setHeight(dY);
+        } else lastObj = this.addRectangle({ x: startX, y: startY }, dX, dY);
+      } else if (this._markupMode === MarkupMode.Ellipse) {
+        if (lastObj) {
+          lastObj.setPosition(startX, startY);
+          lastObj.setRadiusX(dX);
+          lastObj.setRadiusY(dY);
+        } else lastObj = this.addEllipse({ x: startX, y: startY }, { x: dX, y: dY });
+      } else if (this._markupMode === MarkupMode.Cloud) {
+        if (lastObj) {
+          lastObj.setPosition(startX, startY);
+          lastObj.setWidth(Math.max(100, dX));
+          lastObj.setHeight(Math.max(100, dY));
+        } else lastObj = this.addCloud({ x: startX, y: startY }, dX, dY);
+      }
+    });
+
+    // clicks should select/deselect shapes
+    stage.on("click tap", (e) => {
+      if (!this._markupIsActive) return;
+
+      // if click on empty area - remove all selections
+      if (e.target === stage) {
+        if (this._markupMode === MarkupMode.Text) {
+          if (this._textInputRef && this._textInputRef.value)
+            this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
+          else if (transformer.nodes().length === 0) {
+            const pos = stage.getPointerPosition();
+            this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
+          }
+        } else if (this._markupMode === MarkupMode.Image) {
+          if (this._imageInputRef && this._imageInputRef.value)
+            this.addImage(
+              { x: this._imageInputPos.x, y: this._imageInputPos.y },
+              this._imageInputRef.value,
+              0,
+              0,
+              this._imageInputRef.value
+            );
+          else if (transformer.nodes().length === 0) {
+            const pos = stage.getPointerPosition();
+            this.createImageInput(pos);
+          }
+        }
+        transformer.nodes([]);
+        return;
+      }
+
+      if (this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.SelectMarkup) {
+        if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+          if (this._textInputRef && this._textInputRef.value)
+            this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
+          else
+            this.createTextInput(
+              { x: e.target.attrs.x, y: e.target.attrs.y },
+              e.evt.pageX,
+              e.evt.pageY,
+              e.target.attrs.rotation,
+              e.target.attrs.text
+            );
+          return;
+        } else {
+          this.removeTextInput();
+        }
+      }
+
+      if (this._markupMode === MarkupMode.Image || this._markupMode === MarkupMode.SelectMarkup) {
+        if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+          if (this._imageInputRef && this._imageInputRef.value)
+            this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0);
+          else this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
+          return;
+        } else {
+          this.removeImageInput();
+        }
+      }
+
+      if (transformer.nodes().filter((x) => x.className === "Cloud").length > 0 || e.target.className === "Cloud") {
+        transformer.rotateEnabled(false);
+      } else {
+        transformer.rotateEnabled(true);
+      }
+
+      // do we pressed shift or ctrl?
+      const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+      const isSelected = transformer.nodes().indexOf(e.target) >= 0;
+
+      if (!metaPressed && !isSelected) {
+        // if no key pressed and the node is not selected
+        // select just one
+        transformer.nodes([e.target]);
+      } else if (metaPressed && isSelected) {
+        // if we pressed keys and node was selected
+        // we need to remove it from selection:
+        const nodes = transformer.nodes().slice(); // use slice to have new copy of array
+        // remove node from array
+        nodes.splice(nodes.indexOf(e.target), 1);
+        transformer.nodes(nodes);
+      } else if (metaPressed && !isSelected) {
+        // add the node into selection
+        const nodes = transformer.nodes().concat([e.target]);
+        transformer.nodes(nodes);
+      }
+    });
+
+    const container = stage.container();
+    container.tabIndex = 1;
+    // focus it
+    // also stage will be in focus on its click
+    container.focus();
+
+    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();
+        return;
+      }
+      e.preventDefault();
+    });
+  }
+
+  private destroyKonva() {
+    this.clearOverlay();
+
+    this._konvaStage.destroy();
+
+    this._konvaLayer = undefined;
+    this._konvaTransformer = undefined;
+    this._konvaStage = undefined;
+  }
+
+  private getMarkupLines() {
+    const lines = [];
+    this.konvaLayerFind(MarkupMode.Line).forEach((line) => {
+      const linePoints = line.points();
+      if (!linePoints) return;
+      const worldPoints = [];
+      const absoluteTransform = line.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
+        const atPoint = absoluteTransform.point({ x: linePoints[i], y: linePoints[i + 1] });
+        const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+
+        worldPoints.push(worldPoint);
+      }
+
+      const konvaLine = new KonvaLine(null, line);
+      lines.push({
+        id: konvaLine.id(),
+        points: worldPoints.map((p) => this.getPoint3dFromArray(p)),
+        color: konvaLine.getColor() || "#ff0000",
+        type: konvaLine.getLineType() || this.lineType,
+        width: konvaLine.getLineWidth() || this.lineWidth,
+      });
+    });
+
+    return lines;
+  }
+
+  private getMarkupTexts() {
+    const texts = [];
+
+    const textSize = 0.02;
+    const textScale = this._worldTransformer.getScale();
+
+    this.konvaLayerFind(MarkupMode.Text).forEach((text) => {
+      if (!text) return;
+
+      const position = this._worldTransformer.screenToWorld({
+        x: text.x(),
+        y: text.y(),
+      });
+
+      const shape = new KonvaText(null, text);
+      texts.push({
+        id: shape.id(),
+        position: this.getPoint3dFromArray(position),
+        text: shape.getText(),
+        text_size: textSize * textScale.y,
+        angle: shape.getRotation(),
+        color: shape.getColor(),
+        font_size: shape.getFontSize(),
+      });
+    });
+
+    return texts;
+  }
+
+  private getMarkupRectangles() {
+    const rectangles = [];
+    this.konvaLayerFind(MarkupMode.Rectangle).forEach((rect) => {
+      const position = rect.position();
+      const worldPoint = this._worldTransformer.screenToWorld(position);
+
+      const shape = new KonvaRectangle(null, rect);
+      rectangles.push({
+        id: shape.id(),
+        position: this.getPoint3dFromArray(worldPoint),
+        width: shape.getWidth(),
+        height: shape.getHeigth(),
+        line_width: shape.getLineWidth(),
+        color: shape.getColor(),
+      });
+    });
+
+    return rectangles;
+  }
+
+  private getMarkupEllipses() {
+    const ellipses = [];
+    this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse) => {
+      const position = ellipse.position();
+      const worldPoint = this._worldTransformer.screenToWorld(position);
+
+      const shape = new KonvaEllipse(null, ellipse);
+      ellipses.push({
+        id: shape.id(),
+        position: this.getPoint3dFromArray(worldPoint),
+        radius: { x: ellipse.getRadiusX(), y: ellipse.getRadiusY() },
+        line_width: shape.getLineWidth(),
+        color: shape.getColor(),
+      });
+    });
+
+    return ellipses;
+  }
+
+  private getMarkupArrows() {
+    const arrows = [];
+    this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow) => {
+      // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
+      const absoluteTransform = arrow.getAbsoluteTransform();
+
+      const atStartPoint = absoluteTransform.point({ x: arrow.points()[0], y: arrow.points()[1] });
+      const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
+
+      const atEndPoint = absoluteTransform.point({ x: arrow.points()[2], y: arrow.points()[3] });
+      const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
+
+      const shape = new KonvaArrow(null, arrow);
+      arrows.push({
+        id: shape.id(),
+        start: this.getPoint3dFromArray(worldStartPoint),
+        end: this.getPoint3dFromArray(worldEndPoint),
+        color: shape.getColor(),
+      });
+    });
+
+    return arrows;
+  }
+
+  private getMarkupImages() {
+    const images = [];
+    this.konvaLayerFind(MarkupMode.Image).forEach((image) => {
+      const position = image.position();
+      const worldPoint = this._worldTransformer.screenToWorld(position);
+
+      const shape = new KonvaImage(null, image);
+      images.push({
+        id: shape.id(),
+        position: this.getPoint3dFromArray(worldPoint),
+        src: shape.getSrc(),
+        width: shape.getWidth(),
+        height: shape.getHeight(),
+      });
+    });
+
+    return images;
+  }
+
+  private getMarkupClouds() {
+    const clouds = [];
+    this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud) => {
+      const position = cloud.position();
+      const worldPoint = this._worldTransformer.screenToWorld(position);
+
+      const shape = new KonvaCloud(null, cloud);
+      clouds.push({
+        id: shape.id(),
+        position: this.getPoint3dFromArray(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);
+    });
+
+    viewpoint.images?.forEach((vpImage) => {
+      const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
+      this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
+    });
+  }
+
+  private combineMarkupWithDrawing() {
+    const trNodes = this._konvaTransformer.nodes();
+    if (trNodes.length > 0) {
+      this._konvaTransformer.nodes([]);
+    }
+
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.height = this._canvasOriginal.height;
+    tempCanvas.width = this._canvasOriginal.width;
+    const ctx = tempCanvas.getContext("2d");
+    ctx.drawImage(this._canvasOriginal, 0, 0);
+    ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
+    return tempCanvas.toDataURL("image/jpeg", 0.25);
+  }
+
+  private addLine(
+    linePoints: number[],
+    color?: string,
+    type?: MarkupLineType,
+    width?: number,
+    id?: string
+  ): IMarkupLine | void {
+    if (!linePoints || linePoints.length === 0) return;
+    const points: { x: number; y: number }[] = [];
+    for (let i = 0; i < linePoints.length; i += 2) {
+      points.push({ x: linePoints[i], y: linePoints[i + 1] });
+    }
+
+    const konvaLine = new KonvaLine({
+      points,
+      type: type || this.lineType,
+      width: width || this.lineWidth,
+      color: color || this._markupColor.HexColor,
+      id,
+    });
+
+    const obj = konvaLine.ref();
+    this._konvaLayer.add(obj);
+    return konvaLine;
+  }
+
+  private createTextInput(pos: Konva.Vector2d, inputX: number, inputY: number, angle: number, text: string): void {
+    if (!this._textInputRef) {
+      this._textInputPos = pos;
+      this._textInputAngle = angle;
+      this._textInputRef = document.createElement("textarea");
+      this._textInputRef.style.zIndex = "9999";
+      this._textInputRef.style.position = "absolute";
+      this._textInputRef.style.display = "block";
+      this._textInputRef.style.top = inputY + "px";
+      this._textInputRef.style.left = inputX + "px";
+      this._textInputRef.onkeydown = (event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          this.removeTextInput();
+        }
+      };
+      if (text) this._textInputRef.value = text;
+      document.body.appendChild(this._textInputRef);
+
+      setTimeout(() => {
+        this._textInputRef.focus();
+      }, 50);
+    } else {
+      this.removeTextInput();
+    }
+  }
+
+  private removeTextInput(): void {
+    this._textInputRef?.remove();
+    this._textInputRef = null;
+    this._textInputPos = null;
+    this._textInputAngle = 0;
+  }
+
+  private createImageInput(pos: Konva.Vector2d): void {
+    if (!this._imageInputRef) {
+      const convertBase64 = (file) => {
+        return new Promise<string | ArrayBuffer>((resolve, reject) => {
+          const fileReader = new FileReader();
+          fileReader.readAsDataURL(file);
+
+          fileReader.onload = () => {
+            resolve(fileReader.result);
+          };
+
+          fileReader.onerror = (error) => {
+            reject(error);
+          };
+        });
+      };
+
+      this._imageInputPos = pos;
+      this._imageInputRef = document.createElement("input");
+      this._imageInputRef.style.display = "none";
+      this._imageInputRef.type = "file";
+      this._imageInputRef.accept = "image/png, image/jpeg";
+      this._imageInputRef.onchange = async (event) => {
+        const file = (event.target as HTMLInputElement).files[0];
+        const base64 = await convertBase64(file);
+        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, base64.toString(), 0, 0);
+      };
+      this._imageInputRef.oncancel = (event) => {
+        this.removeImageInput();
+      };
+      document.body.appendChild(this._imageInputRef);
+
+      setTimeout(() => {
+        this._imageInputRef.click();
+      }, 50);
+    } else {
+      this.removeImageInput();
+    }
+  }
+
+  private removeImageInput(): void {
+    this._imageInputRef?.remove();
+    this._imageInputRef = null;
+    this._imageInputPos = null;
+  }
+
+  private addText(
+    specifiedText: string,
+    position: Konva.Vector2d,
+    angle?: number,
+    color?: string,
+    textSize?: number,
+    fontSize?: number,
+    id?: string
+  ): IMarkupText | 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([]);
+    }
+
+    this.removeTextInput();
+
+    if (specifiedText) {
+      const tolerance = 1.0e-6;
+
+      // 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;
+      }
+
+      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,
+      });
+
+      this._konvaLayer.add(konvaText.ref());
+      return konvaText;
+    }
+  }
+
+  private addRectangle(
+    position: Konva.Vector2d,
+    width: number,
+    height: number,
+    lineWidth?: number,
+    color?: string,
+    id?: string
+  ): IMarkupRectangle | void {
+    if (!position) return;
+
+    const konvaRectangle = new KonvaRectangle({
+      position,
+      width,
+      height,
+      lineWidth: lineWidth || this.lineWidth,
+      color: color || this._markupColor.HexColor,
+      id,
+    });
+
+    const obj = konvaRectangle.ref();
+    this._konvaLayer.add(obj);
+    return konvaRectangle;
+  }
+
+  private addEllipse(
+    position: { x: number; y: number },
+    radius: { x: number; y: number },
+    lineWidth?: number,
+    color?: string,
+    id?: string
+  ): IMarkupEllipse | void {
+    if (!position) return;
+
+    const konvaEllipse = new KonvaEllipse({
+      position,
+      radius,
+      lineWidth,
+      color: color || this._markupColor.HexColor,
+      id,
+    });
+
+    const obj = konvaEllipse.ref();
+    this._konvaLayer.add(obj);
+    return konvaEllipse;
+  }
+
+  private addArrow(
+    start: { x: number; y: number },
+    end: { x: number; y: number },
+    color?: string,
+    id?: string
+  ): IMarkupArrow | void {
+    if (!start || !end) return;
+
+    const konvaArrow = new KonvaArrow({
+      start,
+      end,
+      color: color || this._markupColor.HexColor,
+      id,
+    });
+
+    const obj = konvaArrow.ref();
+    this._konvaLayer.add(obj);
+    return konvaArrow;
+  }
+
+  private addCloud(
+    position: { x: number; y: number },
+    width: number,
+    height: number,
+    lineWidth?: number,
+    color?: string,
+    id?: string
+  ): IMarkupCloud | void {
+    if (!position || !width || !height) return;
+
+    const konvaCloud = new KonvaCloud({
+      position,
+      width,
+      height,
+      color: color || this._markupColor.HexColor,
+      lineWidth: lineWidth || this.lineWidth,
+      id,
+    });
+
+    const obj = konvaCloud.ref();
+    this._konvaLayer.add(obj);
+    return konvaCloud;
+  }
+
+  private addImage(
+    position: { x: number; y: number },
+    src: string,
+    width?: number,
+    height?: number,
+    id?: string
+  ): IMarkupImage | void {
+    if (!position) return;
+
+    let konvaImage: IMarkupImage;
+
+    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([]);
+      }
+    }
+
+    this.removeImageInput();
+
+    return konvaImage;
+  }
+}