@inweb/client 25.2.2 → 25.2.5

package/src/Viewer/Markup/Impl/Konva/KonvaMarkup.ts

@@ -1,872 +1,1208 @@
-import Konva from "konva";
-import { IMarkup, MarkupMode } from "../../IMarkup";
-import { Viewer } from "../../../Viewer";
-import { ChangeActiveDraggerEvent, PanEvent } from "../../../ViewerEvents";
-import { MarkupColor } from "./MarkupColor";
-import * as utils from "../../../Draggers/MeasureLineDragger/MeasureUtils";
-import { OdBaseDragger } from "../../../Draggers/Common/OdBaseDragger";
-import { IMarkupObject } from "../../Api/IMarkupObject";
-import { KonvaLine } from "../../Api/Impl/Konva/KonvaLine";
-import { KonvaText } from "../../Api/Impl/Konva/KonvaText";
-import { KonvaRectangle } from "../../Api/Impl/Konva/KonvaRectangle";
-import { KonvaEllipse } from "../../Api/Impl/Konva/KonvaEllipse";
-import { KonvaArrow } from "../../Api/Impl/Konva/KonvaArrow";
-import { KonvaImage } from "../../Api/Impl/Konva/KonvaImage";
-
-class KonvaShape {
-  name: string;
-  initializer: (ref: any) => any;
-}
-
-// move to separate class and create factory with enum?
-const MarkupMode2Konva = new Map<MarkupMode, KonvaShape>([
-  [
-    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);
-      },
-    },
-  ],
-]);
-
-export class KonvaMarkup implements IMarkup {
-  private _isInitialized = false;
-  private _viewer: Viewer;
-  private _canvasOriginal: HTMLCanvasElement;
-  private _canvasEvents: string[];
-  private _markupIsActive: boolean;
-  private _markupMode: MarkupMode;
-  private _markupColor: MarkupColor;
-  private _konvaStage: Konva.Stage;
-  private _konvaLayer: Konva.Layer;
-  private _konvaTransformer: Konva.Transformer;
-
-  private _textInputRef: HTMLTextAreaElement;
-  private _textInputPos: Konva.Vector2d;
-  private _textInputAngle: number;
-  private _markupContainer: HTMLDivElement;
-  private _zIndex = 1;
-
-  private readonly _markupContainerName = "markupContainer";
-  private readonly TEXT_FONT_FAMILY = "Calibri";
-
-  public lineWidth = 4;
-
-  initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[] = []): void {
-    if (!Konva)
-      throw new Error(
-        'Konva Markup: Error during Markup 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._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 = new MarkupColor(255, 0, 0);
-    this._markupIsActive = false;
-
-    this.initializeKonva();
-    this.resize();
-
-    this._canvasEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
-
-    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;
-
-    this._canvasEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
-
-    this._viewer.removeEventListener("pan", this.pan);
-    this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-    this._viewer.removeEventListener("resize", this.resize);
-
-    this.destroyKonva();
-
-    this._markupContainer.remove();
-
-    this._markupContainer = undefined;
-    this._canvasOriginal = undefined;
-    this._viewer = undefined;
-
-    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();
-
-    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) => {
-    this._viewer.emit(event);
-  };
-
-  getDraggers(): Map<string, typeof OdBaseDragger> {
-    return null;
-  }
-
-  clearOverlay(): void {
-    this.removeTextInput();
-    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.setColor) konvaObj.setColor(hex);
-      });
-    });
-
-    this._konvaLayer.draw();
-  }
-
-  drawViewpoint(viewpoint: any): void {
-    function getLogicalPoint3dAsArray(point3d) {
-      return [point3d.x, point3d.y, point3d.z];
-    }
-
-    if (!this._isInitialized) return;
-    if (!this._viewer.visualizeJs) return;
-
-    const visLib = this._viewer.visLib();
-    const visViewer = visLib.getViewer();
-    const activeView = visViewer.activeView;
-
-    this._viewer.resetActiveDragger();
-    this._viewer.clearSlices();
-    this._viewer.clearOverlay();
-
-    if (viewpoint.orthogonal_camera) {
-      activeView.setView(
-        getLogicalPoint3dAsArray(viewpoint.orthogonal_camera.view_point),
-        getLogicalPoint3dAsArray(viewpoint.orthogonal_camera.direction),
-        getLogicalPoint3dAsArray(viewpoint.orthogonal_camera.up_vector),
-        viewpoint.orthogonal_camera.field_width,
-        viewpoint.orthogonal_camera.field_height,
-        true
-      );
-    }
-
-    this._viewer.syncOverlay();
-
-    const markupColor = viewpoint.custom_fields.markup_color || { r: 255, g: 0, b: 0 };
-    this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
-
-    if (viewpoint.clipping_planes) {
-      for (const plane of viewpoint.clipping_planes) {
-        const cuttingPlane = new visLib.OdTvPlane();
-        cuttingPlane.set(getLogicalPoint3dAsArray(plane.location), getLogicalPoint3dAsArray(plane.direction));
-
-        activeView.addCuttingPlane(cuttingPlane);
-        activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
-      }
-    }
-
-    this.loadMarkup(viewpoint);
-
-    this._viewer.update();
-  }
-
-  createViewpoint(): object {
-    function getLogicalPoint3dFromArray(array) {
-      return { x: array[0], y: array[1], z: array[2] };
-    }
-
-    if (!this._isInitialized) return {};
-    if (!this._viewer.visualizeJs) return {};
-
-    const visLib = this._viewer.visLib();
-    const visViewer = visLib.getViewer();
-    const activeView = visViewer.activeView;
-
-    const viewpoint = {
-      lines: [],
-      texts: [],
-      clipping_planes: [],
-    } as any;
-
-    viewpoint.orthogonal_camera = {
-      view_point: getLogicalPoint3dFromArray(activeView.viewPosition),
-      direction: getLogicalPoint3dFromArray(activeView.viewTarget),
-      up_vector: getLogicalPoint3dFromArray(activeView.upVector),
-      field_width: activeView.viewFieldWidth,
-      field_height: activeView.viewFieldHeight,
-    };
-
-    for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
-      const cuttingPlane = activeView.getCuttingPlane(i);
-
-      const plane = {
-        location: getLogicalPoint3dFromArray(cuttingPlane.getOrigin()),
-        direction: getLogicalPoint3dFromArray(cuttingPlane.normal()),
-      };
-
-      viewpoint.clipping_planes.push(plane);
-    }
-
-    viewpoint.snapshot = {
-      data: this.combineMarkupWithDrawing(),
-    };
-
-    viewpoint.custom_fields = {
-      markup_color: this.getMarkupColor(),
-    };
-
-    const markupLines = this.getMarkupLines();
-    if (markupLines && markupLines.length > 0) {
-      markupLines?.forEach((markupLine) => {
-        const line = {
-          points: [],
-          color: markupLine.color || "ff0000",
-          width: markupLine.width || 3,
-        };
-        for (const point of markupLine.points) {
-          line.points.push(getLogicalPoint3dFromArray(point));
-        }
-        viewpoint.lines.push(line);
-      });
-    }
-
-    const markupTexts = this.getMarkupTexts();
-    if (markupTexts && markupTexts.length > 0) {
-      markupTexts?.forEach((markupText) => {
-        const text = {
-          position: getLogicalPoint3dFromArray(markupText.position),
-          text: markupText.text,
-          angle: markupText.rotation ?? 0,
-          text_size: markupText.size,
-          color: markupText.color,
-        };
-        viewpoint.texts.push(text);
-      });
-    }
-
-    viewpoint.description = new Date().toDateString();
-    return viewpoint;
-  }
-
-  createObject(type: string, params: any): IMarkupObject {
-    let object;
-    let zIndex = this._zIndex;
-
-    // TODO: factory?
-    switch (type) {
-      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;
-      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));
-    });
-
-    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;
-        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 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;
-    }
-  }
-
-  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,
-    });
-
-    this._konvaTransformer = transformer;
-    layer.add(transformer);
-
-    let isPaint = false;
-    let lastLine;
-
-    stage.on("mousedown touchstart", (e) => {
-      // do nothing if we mousedown on any shape
-      if (!this._markupIsActive || e.target !== stage || this._markupMode === MarkupMode.Text) return;
-
-      if (e.target === stage && transformer.nodes().length > 0) {
-        transformer.nodes([]);
-        return;
-      }
-
-      const pos = stage.getPointerPosition();
-
-      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]);
-
-        isPaint = true;
-      } else if (this._markupMode === MarkupMode.Rectangle) {
-        this.addRectangle({ x: pos.x, y: pos.y }, 50, 50);
-      } else if (this._markupMode === MarkupMode.Ellipse) {
-        this.addEllipse({ x: pos.x, y: pos.y }, { x: 50, y: 50 });
-      } else if (this._markupMode === MarkupMode.Arrow) {
-        this.addArrow([pos.x, pos.y, pos.x + 50, pos.y + 50], 5, 5);
-      }
-    });
-
-    stage.on("mouseup touchend", (e) => {
-      if (!this._markupIsActive) return;
-      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 newPoints = lastLine.points().concat([pos.x, pos.y]);
-      lastLine.points(newPoints);
-    });
-
-    // 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.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);
-          }
-        }
-        transformer.nodes([]);
-        return;
-      }
-
-      if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
-        if (this._textInputRef) 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();
-      }
-
-      // 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.attrs.points;
-      if (!linePoints) return;
-      const worldPoints = [];
-      const absoluteTransform = line.getAbsoluteTransform();
-      for (let i = 0; i < linePoints.length; i += 2) {
-        // https://stackoverflow.com/a/57641487 - check answer's comments
-        const atPoint = absoluteTransform.point({ x: linePoints[i], y: linePoints[i + 1] });
-        const worldPoint = this._viewer
-          .visViewer()
-          .screenToWorld(atPoint.x * window.devicePixelRatio, atPoint.y * window.devicePixelRatio);
-        worldPoints.push(worldPoint);
-      }
-
-      const konvaLine = new KonvaLine(null, line);
-      lines.push({
-        points: worldPoints,
-        color: konvaLine.getColor(),
-        width: konvaLine.getLineWidth(),
-      });
-    });
-
-    return lines;
-  }
-
-  private getMarkupTexts() {
-    const texts = [];
-
-    const textSize = 0.02;
-    let textScale = 1.0;
-
-    const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
-    const mtrxNumber = projMtrx.get(1, 1);
-    const tol = 1.0e-6;
-    if (!(mtrxNumber < tol && mtrxNumber > -tol)) {
-      textScale = 1 / mtrxNumber;
-    }
-
-    this.konvaLayerFind(MarkupMode.Text).forEach((text) => {
-      if (!text) return;
-      texts.push({
-        position: this._viewer
-          .visViewer()
-          .screenToWorld(text.attrs.x * window.devicePixelRatio, text.attrs.y * window.devicePixelRatio),
-        text: text.attrs.text,
-        rotation: text.attrs.rotation && Math.abs(text.attrs.rotation) > tol ? text.attrs.rotation : 0,
-        size: textSize * textScale,
-        color: text.attrs.fill,
-      });
-    });
-
-    return texts;
-  }
-
-  private loadMarkup(viewpoint) {
-    const vpLines = viewpoint.lines;
-    vpLines?.forEach((vpLine) => {
-      const linePoints = [];
-      vpLine.points.forEach((point) => {
-        const screenPoint = utils.worldToScreen(
-          [point.x, point.y, point.z],
-          this._viewer.visualizeJs,
-          this._viewer.visViewer()
-        );
-        linePoints.push(screenPoint.x);
-        linePoints.push(screenPoint.y);
-      });
-
-      this.addLine(linePoints, vpLine.color, vpLine.width);
-    });
-
-    const vpTexts = viewpoint.texts;
-    vpTexts?.forEach((vpText) => {
-      const screenPoint = utils.worldToScreen(
-        [vpText.position.x, vpText.position.y, vpText.position.z],
-        this._viewer.visualizeJs,
-        this._viewer.visViewer()
-      );
-      this.addText(vpText.text, screenPoint, vpText.angle, vpText.color);
-    });
-  }
-
-  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, width?: number): Konva.Line | 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,
-      color: color || this._markupColor.HexColor,
-      width: width || this.lineWidth,
-    });
-
-    const obj = konvaLine.ref();
-    this._konvaLayer.add(obj);
-    return obj;
-  }
-
-  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.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 addText(specifiedText: string, pos: Konva.Vector2d, angle: number, color?: string): void {
-    if (specifiedText) {
-      const konvaText = new Konva.Text({
-        x: pos.x,
-        y: pos.y,
-        text: specifiedText,
-        fontSize: 34,
-        fontFamily: this.TEXT_FONT_FAMILY,
-        fill: color || this._markupColor.HexColor,
-        align: "left",
-        draggable: true,
-        rotation: angle,
-      });
-
-      this._konvaLayer.add(konvaText);
-    }
-
-    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();
-
-    return;
-  }
-
-  private addRectangle(pos: Konva.Vector2d, width: number, height: number): Konva.Rect | void {
-    if (!pos) return;
-    const konvaRectangle = new Konva.Rect({
-      stroke: this._markupColor.HexColor,
-      strokeWidth: this.lineWidth,
-      globalCompositeOperation: "source-over",
-      lineCap: "round",
-      lineJoin: "round",
-      x: pos.x,
-      y: pos.y,
-      width,
-      height,
-      draggable: true,
-      strokeScaleEnabled: false,
-    });
-
-    this._konvaLayer.add(konvaRectangle);
-    return konvaRectangle;
-  }
-
-  private addEllipse(pos: { x: number; y: number }, radius: { x: number; y: number }): Konva.Ellipse | void {
-    if (!pos) return;
-
-    const konvaEllipse = new Konva.Ellipse({
-      stroke: this._markupColor.HexColor,
-      strokeWidth: this.lineWidth,
-      globalCompositeOperation: "source-over",
-      lineCap: "round",
-      lineJoin: "round",
-      x: pos.x,
-      y: pos.y,
-      radiusX: radius.x,
-      radiusY: radius.y,
-      draggable: true,
-      strokeScaleEnabled: false,
-    });
-
-    this._konvaLayer.add(konvaEllipse);
-    return konvaEllipse;
-  }
-
-  private addArrow(points: number[], pointerWidth: number, pointerLength: number): Konva.Arrow | void {
-    if (!points) return;
-
-    const konvaArrow = new Konva.Arrow({
-      stroke: this._markupColor.HexColor,
-      fill: this._markupColor.HexColor,
-      strokeWidth: this.lineWidth,
-      globalCompositeOperation: "source-over",
-      lineCap: "round",
-      lineJoin: "round",
-      points,
-      pointerWidth,
-      pointerLength,
-      draggable: true,
-      strokeScaleEnabled: false,
-    });
-
-    this._konvaLayer.add(konvaArrow);
-    return konvaArrow;
-  }
-}
+import Konva from "konva";
+import { IMarkup, MarkupMode } from "../../IMarkup";
+import { Viewer } from "../../../Viewer";
+import { ChangeActiveDraggerEvent, PanEvent } from "../../../ViewerEvents";
+import { MarkupColor } from "./MarkupColor";
+import * as utils from "../../../Draggers/MeasureLineDragger/MeasureUtils";
+import { OdBaseDragger } from "../../../Draggers/Common/OdBaseDragger";
+import { IMarkupObject } from "../../Api/IMarkupObject";
+import { KonvaLine } from "../../Api/Impl/Konva/KonvaLine";
+import { LineType } from "../../Api/IMarkupLine";
+import { KonvaText } from "../../Api/Impl/Konva/KonvaText";
+import { KonvaRectangle } from "../../Api/Impl/Konva/KonvaRectangle";
+import { KonvaEllipse } from "../../Api/Impl/Konva/KonvaEllipse";
+import { KonvaArrow } from "../../Api/Impl/Konva/KonvaArrow";
+import { KonvaImage } from "../../Api/Impl/Konva/KonvaImage";
+import { KonvaCloud } from "../../Api/Impl/Konva/KonvaCloud";
+
+class KonvaShape {
+  name: string;
+  initializer: (ref: any) => any;
+}
+
+// move to separate class and create factory with enum?
+const MarkupMode2Konva = new Map<MarkupMode, KonvaShape>([
+  [
+    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);
+      },
+    },
+  ],
+]);
+
+export class KonvaMarkup implements IMarkup {
+  private _isInitialized = false;
+  private _viewer: Viewer;
+  private _canvasOriginal: HTMLCanvasElement;
+  private _canvasEvents: string[];
+  private _markupIsActive: boolean;
+  private _markupMode: MarkupMode;
+  private _markupColor: MarkupColor;
+  private _konvaStage: Konva.Stage;
+  private _konvaLayer: Konva.Layer;
+  private _konvaTransformer: Konva.Transformer;
+
+  private _textInputRef: HTMLTextAreaElement;
+  private _textInputPos: Konva.Vector2d;
+  private _textInputAngle: number;
+  private _markupContainer: HTMLDivElement;
+  private _zIndex = 1;
+
+  private readonly _markupContainerName = "markupContainer";
+  private readonly TEXT_FONT_FAMILY = "Calibri";
+
+  public lineWidth = 4;
+
+  initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[] = []): void {
+    if (!Konva)
+      throw new Error(
+        'Konva Markup: Error during Markup 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._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 = new MarkupColor(255, 0, 0);
+    this._markupIsActive = false;
+
+    this.initializeKonva();
+    this.resize();
+
+    this._canvasEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
+
+    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;
+
+    this._canvasEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
+
+    this._viewer.removeEventListener("pan", this.pan);
+    this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+    this._viewer.removeEventListener("resize", this.resize);
+
+    this.destroyKonva();
+
+    this._markupContainer.remove();
+
+    this._markupContainer = undefined;
+    this._canvasOriginal = undefined;
+    this._viewer = undefined;
+
+    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();
+
+    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) => {
+    this._viewer.emit(event);
+  };
+
+  getDraggers(): Map<string, typeof OdBaseDragger> {
+    return null;
+  }
+
+  clearOverlay(): void {
+    this.removeTextInput();
+    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.setColor) konvaObj.setColor(hex);
+      });
+    });
+
+    this._konvaLayer.draw();
+  }
+
+  drawViewpoint(viewpoint: any): void {
+    function getLogicalPoint3dAsArray(point3d) {
+      return [point3d.x, point3d.y, point3d.z];
+    }
+
+    if (!this._isInitialized) return;
+    if (!this._viewer.visualizeJs) return;
+
+    const visLib = this._viewer.visLib();
+    const visViewer = visLib.getViewer();
+    const activeView = visViewer.activeView;
+
+    this._viewer.resetActiveDragger();
+    this._viewer.clearSlices();
+    this._viewer.clearOverlay();
+
+    if (viewpoint.orthogonal_camera) {
+      activeView.setView(
+        getLogicalPoint3dAsArray(viewpoint.orthogonal_camera.view_point),
+        getLogicalPoint3dAsArray(viewpoint.orthogonal_camera.direction),
+        getLogicalPoint3dAsArray(viewpoint.orthogonal_camera.up_vector),
+        viewpoint.orthogonal_camera.field_width,
+        viewpoint.orthogonal_camera.field_height,
+        true
+      );
+    }
+
+    this._viewer.syncOverlay();
+
+    const markupColor = viewpoint.custom_fields.markup_color || { r: 255, g: 0, b: 0 };
+    this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
+
+    if (viewpoint.clipping_planes) {
+      for (const plane of viewpoint.clipping_planes) {
+        const cuttingPlane = new visLib.OdTvPlane();
+        cuttingPlane.set(getLogicalPoint3dAsArray(plane.location), getLogicalPoint3dAsArray(plane.direction));
+
+        activeView.addCuttingPlane(cuttingPlane);
+        activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
+      }
+    }
+
+    this.loadMarkup(viewpoint);
+
+    this._viewer.update();
+  }
+
+  createViewpoint(): object {
+    if (!this._viewer.visualizeJs) return {};
+
+    const visLib = this._viewer.visLib();
+    const visViewer = visLib.getViewer();
+    const activeView = visViewer.activeView;
+
+    const viewpoint = {
+      lines: [],
+      texts: [],
+      arrows: [],
+      clouds: [],
+      ellipses: [],
+      images: [],
+      rectangles: [],
+      clipping_planes: [],
+    } as any;
+
+    viewpoint.orthogonal_camera = {
+      view_point: this.getPoint3dFromArray(activeView.viewPosition),
+      direction: this.getPoint3dFromArray(activeView.viewTarget),
+      up_vector: this.getPoint3dFromArray(activeView.upVector),
+      field_width: activeView.viewFieldWidth,
+      field_height: activeView.viewFieldHeight,
+    };
+
+    for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
+      const cuttingPlane = activeView.getCuttingPlane(i);
+
+      const plane = {
+        location: this.getPoint3dFromArray(cuttingPlane.getOrigin()),
+        direction: this.getPoint3dFromArray(cuttingPlane.normal()),
+      };
+
+      viewpoint.clipping_planes.push(plane);
+    }
+
+    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;
+    let zIndex = this._zIndex;
+
+    // TODO: factory?
+    switch (type) {
+      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;
+    }
+  }
+
+  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,
+    });
+
+    this._konvaTransformer = transformer;
+    layer.add(transformer);
+
+    let isPaint = false;
+    let lastLine;
+
+    stage.on("mousedown touchstart", (e) => {
+      // do nothing if we mousedown on any shape
+      if (!this._markupIsActive || e.target !== stage || this._markupMode === MarkupMode.Text) return;
+
+      if (e.target === stage && transformer.nodes().length > 0) {
+        transformer.nodes([]);
+        return;
+      }
+
+      const pos = stage.getPointerPosition();
+
+      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]);
+
+        isPaint = true;
+      }
+      // 25.2 - currently only for debug purposes:
+      else if (this._markupMode === MarkupMode.Rectangle) {
+        this.addRectangle({ x: pos.x, y: pos.y }, 50, 50);
+      } else if (this._markupMode === MarkupMode.Ellipse) {
+        this.addEllipse({ x: pos.x, y: pos.y }, { x: 50, y: 50 });
+      } else if (this._markupMode === MarkupMode.Arrow) {
+        this.addArrow({ x: pos.x, y: pos.y }, { x: pos.x + 50, y: pos.y + 50 });
+      } else if (this._markupMode === MarkupMode.Cloud) {
+        this.addCloud({ x: pos.x, y: pos.y }, 200, 400);
+      }
+    });
+
+    stage.on("mouseup touchend", (e) => {
+      if (!this._markupIsActive) return;
+      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 newPoints = lastLine.points().concat([pos.x, pos.y]);
+      lastLine.points(newPoints);
+    });
+
+    // 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.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);
+          }
+        }
+        transformer.nodes([]);
+        return;
+      }
+
+      if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+        if (this._textInputRef) 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 (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._viewer
+          .visViewer()
+          .screenToWorld(atPoint.x * window.devicePixelRatio, atPoint.y * window.devicePixelRatio);
+        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() || "solid",
+        width: konvaLine.getLineWidth() || 3,
+      });
+    });
+
+    return lines;
+  }
+
+  private getMarkupTexts() {
+    const texts = [];
+
+    const textSize = 0.02;
+    let textScale = 1.0;
+
+    const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
+    const mtrxNumber = projMtrx.get(1, 1);
+    const tol = 1.0e-6;
+    if (mtrxNumber > tol || mtrxNumber < -tol) {
+      textScale = 1 / mtrxNumber;
+    }
+
+    this.konvaLayerFind(MarkupMode.Text).forEach((text) => {
+      if (!text) return;
+
+      const position = this._viewer
+        .visViewer()
+        .screenToWorld(text.x() * window.devicePixelRatio, text.y() * window.devicePixelRatio);
+
+      const shape = new KonvaText(null, text);
+      texts.push({
+        id: shape.id(),
+        position: this.getPoint3dFromArray(position),
+        text: shape.getText(),
+        text_size: textSize * textScale,
+        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._viewer
+        .visViewer()
+        .screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+
+      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._viewer
+        .visViewer()
+        .screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+
+      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._viewer
+        .visViewer()
+        .screenToWorld(atStartPoint.x * window.devicePixelRatio, atStartPoint.y * window.devicePixelRatio);
+
+      const atEndPoint = absoluteTransform.point({ x: arrow.points()[2], y: arrow.points()[3] });
+      const worldEndPoint = this._viewer
+        .visViewer()
+        .screenToWorld(atEndPoint.x * window.devicePixelRatio, atEndPoint.y * window.devicePixelRatio);
+
+      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._viewer
+        .visViewer()
+        .screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+
+      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._viewer
+        .visViewer()
+        .screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+
+      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) {
+    viewpoint.lines?.forEach((vpLine) => {
+      const linePoints = [];
+      vpLine.points.forEach((point) => {
+        const screenPoint = utils.worldToScreen(
+          [point.x, point.y, point.z],
+          this._viewer.visualizeJs,
+          this._viewer.visViewer()
+        );
+        linePoints.push(screenPoint.x);
+        linePoints.push(screenPoint.y);
+      });
+
+      this.addLine(linePoints, vpLine.color, vpLine.type, vpLine.width, vpLine.id);
+    });
+
+    viewpoint.texts?.forEach((vpText) => {
+      const screenPoint = utils.worldToScreen(
+        [vpText.position.x, vpText.position.y, vpText.position.z],
+        this._viewer.visualizeJs,
+        this._viewer.visViewer()
+      );
+      this.addText(vpText.text, screenPoint, vpText.angle, vpText.color, vpText.text_size, vpText.font_size, vpText.id);
+    });
+
+    viewpoint.rectangles?.forEach((vpRect) => {
+      const screenPoint = utils.worldToScreen(
+        [vpRect.position.x, vpRect.position.y, vpRect.position.z],
+        this._viewer.visualizeJs,
+        this._viewer.visViewer()
+      );
+
+      this.addRectangle(
+        { x: screenPoint.x, y: screenPoint.y },
+        vpRect.width,
+        vpRect.height,
+        vpRect.line_width,
+        vpRect.color,
+        vpRect.id
+      );
+    });
+
+    viewpoint.ellipses?.forEach((vpEllipse) => {
+      const screenPoint = utils.worldToScreen(
+        [vpEllipse.position.x, vpEllipse.position.y, vpEllipse.position.z],
+        this._viewer.visualizeJs,
+        this._viewer.visViewer()
+      );
+
+      this.addEllipse(
+        { x: screenPoint.x, y: screenPoint.y },
+        { x: vpEllipse.radius.x, y: vpEllipse.radius.y },
+        vpEllipse.line_width,
+        vpEllipse.color,
+        vpEllipse.id
+      );
+    });
+
+    viewpoint.arrows?.forEach((vpArrow) => {
+      const startPoint = utils.worldToScreen(
+        [vpArrow.start.x, vpArrow.start.y, vpArrow.start.z],
+        this._viewer.visualizeJs,
+        this._viewer.visViewer()
+      );
+
+      const endPoint = utils.worldToScreen(
+        [vpArrow.end.x, vpArrow.end.y, vpArrow.end.z],
+        this._viewer.visualizeJs,
+        this._viewer.visViewer()
+      );
+
+      this.addArrow({ x: startPoint.x, y: startPoint.y }, { x: endPoint.x, y: endPoint.y }, vpArrow.color, vpArrow.id);
+    });
+
+    viewpoint.clouds?.forEach((vpCloud) => {
+      const screenPoint = utils.worldToScreen(
+        [vpCloud.position.x, vpCloud.position.y, vpCloud.position.z],
+        this._viewer.visualizeJs,
+        this._viewer.visViewer()
+      );
+
+      this.addCloud(
+        { x: screenPoint.x, y: screenPoint.y },
+        vpCloud.width,
+        vpCloud.height,
+        vpCloud.line_width,
+        vpCloud.color,
+        vpCloud.id
+      );
+    });
+
+    viewpoint.images?.forEach((vpImage) => {
+      const screenPoint = utils.worldToScreen(
+        [vpImage.position.x, vpImage.position.y, vpImage.position.z],
+        this._viewer.visualizeJs,
+        this._viewer.visViewer()
+      );
+
+      this.addImage({ x: screenPoint.x, y: screenPoint.y }, 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?: LineType,
+    width?: number,
+    id?: string
+  ): Konva.Line | 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,
+      color: color || this._markupColor.HexColor,
+      type: type || LineType.Solid,
+      width: width || this.lineWidth,
+      id,
+    });
+
+    const obj = konvaLine.ref();
+    this._konvaLayer.add(obj);
+    return obj;
+  }
+
+  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.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 addText(
+    specifiedText: string,
+    position: Konva.Vector2d,
+    angle?: number,
+    color?: string,
+    textSize?: number,
+    fontSize?: number,
+    id?: string
+  ): void {
+    if (specifiedText) {
+      const tol = 1.0e-6;
+
+      // in case we have old viewpoint without font_size
+      if (textSize && textSize > tol && (!fontSize || fontSize < tol)) {
+        const size = 0.02;
+        let scale = 1.0;
+
+        const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
+        const mtrxNumber = projMtrx.get(1, 1);
+
+        if (mtrxNumber > tol || mtrxNumber < -tol) {
+          scale = 1 / mtrxNumber;
+        }
+        fontSize = textSize / (scale / size) / 34;
+      }
+
+      const konvaText = new KonvaText({
+        position: { x: position.x, y: position.y },
+        text: specifiedText,
+        fontSize,
+        color: color || this._markupColor.HexColor,
+        rotation: angle,
+        id,
+      });
+
+      this._konvaLayer.add(konvaText.ref());
+    }
+
+    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();
+
+    return;
+  }
+
+  private addRectangle(
+    position: Konva.Vector2d,
+    width: number,
+    height: number,
+    lineWidth?: number,
+    color?: string,
+    id?: string
+  ): Konva.Rect | void {
+    if (!position) return;
+
+    const konvaRectangle = new KonvaRectangle({
+      position,
+      color: color || this._markupColor.HexColor,
+      lineWidth: lineWidth || this.lineWidth,
+      width,
+      height,
+      id,
+    });
+
+    const obj = konvaRectangle.ref();
+    this._konvaLayer.add(obj);
+    return obj;
+  }
+
+  private addEllipse(
+    position: { x: number; y: number },
+    radius: { x: number; y: number },
+    lineWidth?: number,
+    color?: string,
+    id?: string
+  ): Konva.Ellipse | 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 obj;
+  }
+
+  private addArrow(
+    start: { x: number; y: number },
+    end: { x: number; y: number },
+    color?: string,
+    id?: string
+  ): Konva.Arrow | 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 obj;
+  }
+
+  private addCloud(
+    position: { x: number; y: number },
+    width: number,
+    height: number,
+    lineWidth?: number,
+    color?: string,
+    id?: string
+  ): Konva.Shape | 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 obj;
+  }
+
+  private addImage(
+    position: { x: number; y: number },
+    src: string,
+    width: number,
+    height: number,
+    id?: string
+  ): Konva.Image | void {
+    if (!position || !width || !height) return;
+
+    const konvaImage = new KonvaImage({
+      position,
+      src,
+      width,
+      height,
+      id,
+    });
+
+    const obj = konvaImage.ref();
+    this._konvaLayer.add(obj);
+    return obj;
+  }
+}