@inweb/viewer-visualize 25.6.7 → 25.7.1

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

@@ -22,13 +22,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import Konva from "konva";
-import { ChangeActiveDraggerEvent, IViewpoint, LineType, PanEvent } from "@inweb/viewer-core";
+import { IEventEmitter } from "@inweb/eventemitter2";
+import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
 
 import { IMarkup, MarkupMode } from "../../IMarkup";
-import { Viewer } from "../../../Viewer";
+import { IWorldTransform } from "../../IWorldTransform";
 import { MarkupColor } from "./MarkupColor";
-import * as utils from "../../../Draggers/MeasureLineDragger/MeasureUtils";
-import { OdBaseDragger } from "../../../Draggers/Common/OdBaseDragger";
 import { IMarkupObject } from "../../Api/IMarkupObject";
 import { IMarkupColorable } from "../../Api/IMarkupColorable";
 import { KonvaLine } from "../../Api/Impl/Konva/KonvaLine";
@@ -38,12 +37,13 @@ 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";
-import { IMarkupLine } from "../../Api/IMarkupLine";
+import { IMarkupLine, MarkupLineType } from "../../Api/IMarkupLine";
 import { IMarkupArrow } from "../../Api/IMarkupArrow";
 import { IMarkupEllipse } from "../../Api/IMarkupEllipse";
 import { IMarkupRectangle } from "../../Api/IMarkupRectangle";
 import { IMarkupCloud } from "../../Api/IMarkupCloud";
 import { IMarkupImage } from "../../Api/IMarkupImage";
+import { IMarkupText } from "../../Api/IMarkupText";
 
 class KonvaShape {
   name: string;
@@ -124,14 +124,18 @@ const MarkupMode2Konva = new Map<MarkupMode, KonvaShape>([
   ],
 ]);
 
+/**
+ * 2D markup core.
+ */
 export class KonvaMarkup implements IMarkup {
   private _isInitialized = false;
-  private _viewer: Viewer;
+  private _viewer: IEventEmitter;
+  private _worldTransformer: IWorldTransform;
   private _canvasOriginal: HTMLCanvasElement;
   private _canvasEvents: string[];
-  private _markupIsActive: boolean;
+  private _markupIsActive = false;
   private _markupMode: MarkupMode;
-  private _markupColor: MarkupColor;
+  private _markupColor = new MarkupColor(255, 0, 0);
   private _konvaStage: Konva.Stage;
   private _konvaLayer: Konva.Layer;
   private _konvaTransformer: Konva.Transformer;
@@ -147,19 +151,24 @@ export class KonvaMarkup implements IMarkup {
   private readonly _markupContainerName = "markupContainer";
 
   public lineWidth = 4;
-  public lineType: LineType = "solid";
+  public lineType: MarkupLineType = "solid";
   public fontSize = 34;
 
-  initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[] = []): void {
+  initialize(
+    canvas: HTMLCanvasElement,
+    canvasEvents: string[],
+    viewer?: IEventEmitter,
+    worldTransformer?: IWorldTransform
+  ): 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>'
+        '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._canvasEvents = canvasEvents ?? [];
 
     this._markupContainer = document.createElement("div");
     this._markupContainer.id = this._markupContainerName;
@@ -172,17 +181,18 @@ export class KonvaMarkup implements IMarkup {
     const parentDiv = this._canvasOriginal.parentElement;
     parentDiv.appendChild(this._markupContainer);
 
-    this._markupColor = new MarkupColor(255, 0, 0);
-    this._markupIsActive = false;
+    this._markupColor.setColor(255, 0, 0);
 
     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);
+    if (this._viewer) {
+      this._viewer.addEventListener("resize", this.resize);
+      this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
+      this._viewer.addEventListener("pan", this.pan);
+    }
 
     this._isInitialized = true;
   }
@@ -190,20 +200,24 @@ export class KonvaMarkup implements IMarkup {
   dispose(): void {
     if (!this._isInitialized) return;
 
-    this._canvasEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
+    if (this._viewer) {
+      this._viewer.removeEventListener("pan", this.pan);
+      this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+      this._viewer.removeEventListener("resize", this.resize);
+    }
 
-    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;
   }
 
@@ -243,13 +257,11 @@ export class KonvaMarkup implements IMarkup {
     Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.move({ x: dX, y: dY })));
   };
 
-  redirectToViewer = (event) => {
-    this._viewer.emit(event);
+  redirectToViewer = (event: any) => {
+    if (this._viewer) this._viewer.emit(event);
   };
 
-  getDraggers(): Map<string, typeof OdBaseDragger> {
-    return null;
-  }
+  syncOverlay(): void {}
 
   clearOverlay(): void {
     this.removeTextInput();
@@ -295,9 +307,6 @@ export class KonvaMarkup implements IMarkup {
   }
 
   getViewpoint(): IViewpoint {
-    // TODO: at the current 25.2 state we need VisualizeJS here and below. In the future we need to use it as an external interface.
-    if (!this._viewer.visualizeJs) return {};
-
     const viewpoint: IViewpoint = {
       lines: [],
       texts: [],
@@ -323,7 +332,7 @@ export class KonvaMarkup implements IMarkup {
   }
 
   createObject(type: string, params: any): IMarkupObject {
-    let object;
+    let object = null;
     let zIndex = this._zIndex;
 
     // TODO: factory?
@@ -767,9 +776,8 @@ export class KonvaMarkup implements IMarkup {
         // 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);
+        const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+
         worldPoints.push(worldPoint);
       }
 
@@ -790,28 +798,22 @@ export class KonvaMarkup implements IMarkup {
     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;
-    }
+    const textScale = this._worldTransformer.getScale();
 
     this.konvaLayerFind(MarkupMode.Text).forEach((text) => {
       if (!text) return;
 
-      const position = this._viewer
-        .visViewer()
-        .screenToWorld(text.x() * window.devicePixelRatio, text.y() * window.devicePixelRatio);
+      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,
+        text_size: textSize * textScale.y,
         angle: shape.getRotation(),
         color: shape.getColor(),
         font_size: shape.getFontSize(),
@@ -825,9 +827,7 @@ export class KonvaMarkup implements IMarkup {
     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 worldPoint = this._worldTransformer.screenToWorld(position);
 
       const shape = new KonvaRectangle(null, rect);
       rectangles.push({
@@ -847,9 +847,7 @@ export class KonvaMarkup implements IMarkup {
     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 worldPoint = this._worldTransformer.screenToWorld(position);
 
       const shape = new KonvaEllipse(null, ellipse);
       ellipses.push({
@@ -871,14 +869,10 @@ export class KonvaMarkup implements IMarkup {
       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 worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
 
       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 worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
 
       const shape = new KonvaArrow(null, arrow);
       arrows.push({
@@ -896,9 +890,7 @@ export class KonvaMarkup implements IMarkup {
     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 worldPoint = this._worldTransformer.screenToWorld(position);
 
       const shape = new KonvaImage(null, image);
       images.push({
@@ -917,9 +909,7 @@ export class KonvaMarkup implements IMarkup {
     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 worldPoint = this._worldTransformer.screenToWorld(position);
 
       const shape = new KonvaCloud(null, cloud);
       clouds.push({
@@ -939,101 +929,43 @@ export class KonvaMarkup implements IMarkup {
     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()
-        );
+        const screenPoint = this._worldTransformer.worldToScreen(point);
         linePoints.push(screenPoint.x);
         linePoints.push(screenPoint.y);
       });
 
-      this.addLine(linePoints, vpLine.color, vpLine.type, vpLine.width, vpLine.id);
+      this.addLine(linePoints, vpLine.color, vpLine.type as MarkupLineType, 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()
-      );
+      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 = 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
-      );
+      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 = 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
-      );
+      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 = 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);
+      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 = 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
-      );
+      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 = 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);
+      const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
+      this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
     });
   }
 
@@ -1055,7 +987,7 @@ export class KonvaMarkup implements IMarkup {
   private addLine(
     linePoints: number[],
     color?: string,
-    type?: LineType,
+    type?: MarkupLineType,
     width?: number,
     id?: string
   ): IMarkupLine | void {
@@ -1170,22 +1102,24 @@ export class KonvaMarkup implements IMarkup {
     textSize?: number,
     fontSize?: number,
     id?: string
-  ): void {
+  ): 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 tol = 1.0e-6;
+      const tolerance = 1.0e-6;
 
       // in case we have old viewpoint without font_size
-      if (textSize && textSize > tol && (!fontSize || fontSize < tol)) {
+      if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
         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 scale = this._worldTransformer.getScale();
+        fontSize = textSize / (scale.y / size) / 34;
       }
 
       const konvaText = new KonvaText({
@@ -1198,18 +1132,8 @@ export class KonvaMarkup implements IMarkup {
       });
 
       this._konvaLayer.add(konvaText.ref());
+      return 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(

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

@@ -21,6 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+/**
+ * Markup color.
+ */
 export class MarkupColor {
   public R: number;
   public G: number;

package/src/Viewer/Markup/Impl/Visualize/VisualizeMarkup.ts

@@ -1,12 +1,14 @@
+import { IEventEmitter } from "@inweb/eventemitter2";
 import { ILine, IText, IViewpoint } from "@inweb/viewer-core";
-
-import { IMarkup, MarkupMode } from "../../IMarkup";
+import { IMarkup } from "../../IMarkup";
+import { IWorldTransform } from "../../IWorldTransform";
 import { Viewer } from "../../../Viewer";
-import { OdBaseDragger } from "../../../Draggers/Common/OdBaseDragger";
 import { MARKUP_ENTITY_LINE, OdaLineDragger } from "../../../Draggers/OdaLineDragger";
 import { MARKUP_ENTITY_TEXT, OdaTextDragger } from "../../../Draggers/OdaTextDragger";
 import { IMarkupObject } from "../../Api/IMarkupObject";
 
+const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
+
 export class VisualizeMarkup implements IMarkup {
   private _viewer: Viewer;
   protected _markupColor = { r: 255, g: 0, b: 0 };
@@ -15,17 +17,50 @@ export class VisualizeMarkup implements IMarkup {
   public lineType: "solid";
   public fontSize = 34;
 
-  initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[]): void {
-    this._viewer = viewer;
+  initialize(
+    canvas: HTMLCanvasElement,
+    canvasEvents: string[],
+    viewer?: IEventEmitter,
+    worldTransformer?: IWorldTransform
+  ): void {
+    this._viewer = viewer as Viewer;
+    this._viewer.registerDragger("Line", OdaLineDragger);
+    this._viewer.registerDragger("Text", OdaTextDragger);
   }
 
   dispose(): void {}
 
-  getDraggers(): Map<string, typeof OdBaseDragger> {
-    return new Map<string, typeof OdBaseDragger>([
-      [MarkupMode.Line, OdaLineDragger],
-      [MarkupMode.Text, OdaTextDragger],
-    ]);
+  syncOverlay(): void {
+    if (!this._viewer.visualizeJs) return;
+
+    const visViewer = this._viewer.visViewer();
+    const activeView = visViewer.activeView;
+
+    let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
+    if (!overlayView) {
+      const overlayModel = visViewer.getMarkupModel();
+      const pDevice = visViewer.getActiveDevice();
+
+      overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
+      overlayView.addModel(overlayModel);
+
+      activeView.addSibling(overlayView);
+      pDevice.addView(overlayView);
+    }
+
+    overlayView.viewPosition = activeView.viewPosition;
+    overlayView.viewTarget = activeView.viewTarget;
+    overlayView.upVector = activeView.upVector;
+    overlayView.viewFieldWidth = activeView.viewFieldWidth;
+    overlayView.viewFieldHeight = activeView.viewFieldHeight;
+
+    const viewPort = overlayView.getViewport();
+    overlayView.setViewport(viewPort.lowerLeft, viewPort.upperRight);
+    overlayView.vportRect = activeView.vportRect;
+
+    this._viewer.update();
+
+    return overlayView;
   }
 
   clearOverlay(): void {

package/src/Viewer/Markup/MarkupFactory.ts

@@ -21,41 +21,37 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { IMarkup, MarkupType } from "./IMarkup";
+import { IMarkup } from "./IMarkup";
 import { KonvaMarkup } from "./Impl/Konva/KonvaMarkup";
 import { VisualizeMarkup } from "./Impl/Visualize/VisualizeMarkup";
 
+/**
+ * The markup type: `Visualize` (deprecated) or `Konva`.
+ */
+export enum MarkupType {
+  Unknown,
+  Konva = "Konva",
+  Visualize = "Visualize",
+}
+
 export class MarkupFactory {
-  /**
-   * Initialize {@link IMarkup} instance
-   *
-   * @param markupType - Specifies version of the markup support. Two variants of markup
-   *   support are implemented: old "Visualize" and new "Konva". Default is "Konva". {@link MarkupType}
-   */
-  public static createMarkup(markupType: MarkupType): IMarkup {
-    let markup;
+  public static createMarkup(markupType: MarkupType = MarkupType.Konva): IMarkup {
+    let markup: IMarkup;
+
     switch (markupType) {
       case MarkupType.Konva:
-        markup = this.createKonva();
+        markup = new KonvaMarkup();
         break;
 
       case MarkupType.Visualize:
-        markup = this.createVisualize();
+        markup = new VisualizeMarkup();
         break;
 
       default:
-        throw new Error("Error during Markup Initialization. Markup Type is unknown.");
+        throw new Error("Error during Markup initialization. Unknown Markup type.");
         break;
     }
 
     return markup;
   }
-
-  private static createKonva(): IMarkup {
-    return new KonvaMarkup();
-  }
-
-  private static createVisualize(): IMarkup {
-    return new VisualizeMarkup();
-  }
 }