@inweb/markup 26.4.0 → 26.5.0

package/src/markup/Konva/KonvaMarkup.ts

@@ -35,6 +35,7 @@ import {
   IViewpoint,
   PanEvent,
   ZoomAtEvent,
+  ResizeEvent,
 } from "@inweb/viewer-core";
 
 import { IMarkup, MarkupMode } from "../IMarkup";
@@ -58,34 +59,47 @@ const MarkupMode2Konva = {
   },
   Line: {
     name: "Line",
-    initializer: (ref: any, params = null) => new KonvaLine(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaLine(params, ref, ...attr),
   },
   Text: {
     name: "Text",
-    initializer: (ref: any, params = null) => new KonvaText(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaText(params, ref, ...attr),
   },
   Rectangle: {
     name: "Rect",
-    initializer: (ref: any, params = null) => new KonvaRectangle(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaRectangle(params, ref, ...attr),
   },
   Ellipse: {
     name: "Ellipse",
-    initializer: (ref: any, params = null) => new KonvaEllipse(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaEllipse(params, ref, ...attr),
   },
   Arrow: {
     name: "Arrow",
-    initializer: (ref: any, params = null) => new KonvaArrow(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaArrow(params, ref, ...attr),
   },
   Image: {
     name: "Image",
-    initializer: (ref: any, params = null) => new KonvaImage(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaImage(params, ref, ...attr),
   },
   Cloud: {
     name: "Cloud",
-    initializer: (ref: any, params = null) => new KonvaCloud(params, ref),
+    initializer: (ref: any, params = null, ...attr: any) => new KonvaCloud(params, ref, ...attr),
   },
 };
 
+function debounce(func, wait: number) {
+  let timeout = null;
+  return (...args) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      func(...args);
+    }, wait);
+  };
+}
+
 /**
  * 2D markup core.
  */
@@ -93,7 +107,6 @@ export class KonvaMarkup implements IMarkup {
   private _viewer: IEventEmitter;
   private _worldTransformer: IWorldTransform;
   private _container: HTMLElement;
-  private _containerEvents: string[] = [];
   private _markupIsActive = false;
   private _markupMode: MarkupMode;
   private _markupColor = new MarkupColor(255, 0, 0);
@@ -130,7 +143,6 @@ export class KonvaMarkup implements IMarkup {
     this._viewer = viewer;
     this._worldTransformer = worldTransformer ?? new WorldTransform();
     this._container = container;
-    this._containerEvents = containerEvents ?? [];
 
     this._markupContainer = document.createElement("div");
     this._markupContainer.id = "markup-container";
@@ -143,15 +155,14 @@ export class KonvaMarkup implements IMarkup {
     const parentDiv = this._container.parentElement;
     parentDiv.appendChild(this._markupContainer);
 
-    this._resizeObserver = new ResizeObserver(this.resizeContainer);
-    this._resizeObserver.observe(parentDiv);
+    if (viewer) this._viewer.addEventListener("resize", this.resizeViewer);
+    else this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
 
     this._markupColor.setColor(255, 0, 0);
 
     this.initializeKonva();
 
     if (this._viewer) {
-      // this._containerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
       this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
       this._viewer.addEventListener("pan", this.pan);
       this._viewer.addEventListener("zoomat", this.zoomAt);
@@ -163,7 +174,6 @@ export class KonvaMarkup implements IMarkup {
       this._viewer.removeEventListener("zoomat", this.zoomAt);
       this._viewer.removeEventListener("pan", this.pan);
       this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-      // this._containerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
     }
 
     this.destroyKonva();
@@ -205,25 +215,36 @@ export class KonvaMarkup implements IMarkup {
 
     this._konvaStage.width(width);
     this._konvaStage.height(height);
+
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
+  };
+
+  resizeViewer = (event: ResizeEvent) => {
+    const { width, height } = event;
+
+    if (!width || !height) return; // <- invisible container, or container with parent removed
+    if (!this._konvaStage) return;
+
+    this._konvaStage.width(width);
+    this._konvaStage.height(height);
+
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
   };
 
   pan = (event: PanEvent) => {
-    const newPos = {
-      x: this._konvaStage.x() + event.dX,
-      y: this._konvaStage.y() + event.dY,
-    };
-    this._konvaStage.position(newPos);
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
   };
 
   zoomAt = (event: ZoomAtEvent) => {
-    const newScale = this._konvaStage.scaleX() * event.data;
-    this._konvaStage.scale({ x: newScale, y: newScale });
-
-    const newPos = {
-      x: event.x - (event.x - this._konvaStage.x()) * event.data,
-      y: event.y - (event.y - this._konvaStage.y()) * event.data,
-    };
-    this._konvaStage.position(newPos);
+    this.getObjects().forEach((markupObject) => {
+      markupObject.updateScreenCoordinates();
+    });
   };
 
   redirectToViewer = (event: any) => {
@@ -285,12 +306,23 @@ export class KonvaMarkup implements IMarkup {
 
     viewpoint.rectangles?.forEach((rect: IRectangle) => {
       const screenPoint = this._worldTransformer.worldToScreen(rect.position);
-      this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+      const screenPoint2 = rect.position2 ? this._worldTransformer.worldToScreen(rect.position2) : null;
+      this.addRectangle(screenPoint, screenPoint2, rect.width, rect.height, rect.line_width, rect.color, rect.id);
     });
 
     viewpoint.ellipses?.forEach((ellipse: IEllipse) => {
       const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
-      this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+      const screenPoint2 = ellipse.position2 ? this._worldTransformer.worldToScreen(ellipse.position2) : null;
+      const screenPoint3 = ellipse.position3 ? this._worldTransformer.worldToScreen(ellipse.position3) : null;
+      this.addEllipse(
+        screenPoint,
+        screenPoint2,
+        screenPoint3,
+        ellipse.radius,
+        ellipse.line_width,
+        ellipse.color,
+        ellipse.id
+      );
     });
 
     viewpoint.arrows?.forEach((arrow: IArrow) => {
@@ -301,12 +333,14 @@ export class KonvaMarkup implements IMarkup {
 
     viewpoint.clouds?.forEach((cloud: ICloud) => {
       const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
-      this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+      const screenPoint2 = cloud.position2 ? this._worldTransformer.worldToScreen(cloud.position2) : null;
+      this.addCloud(screenPoint, screenPoint2, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
     });
 
     viewpoint.images?.forEach((image: IImage) => {
       const screenPoint = this._worldTransformer.worldToScreen(image.position);
-      this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+      const screenPoint2 = image.position2 ? this._worldTransformer.worldToScreen(image.position2) : null;
+      this.addImage(screenPoint, screenPoint2, image.src, image.width, image.height, image.id);
     });
   }
 
@@ -347,7 +381,7 @@ export class KonvaMarkup implements IMarkup {
     if (!konvaShape || !konvaShape.initializer)
       throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
 
-    const object = konvaShape.initializer(null, params);
+    const object = konvaShape.initializer(null, params, this._worldTransformer);
     this.addObject(object);
 
     return object;
@@ -357,7 +391,9 @@ export class KonvaMarkup implements IMarkup {
     const objects = [];
     Object.keys(MarkupMode2Konva).forEach((type) => {
       const konvaShape = MarkupMode2Konva[type];
-      this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
+      this.konvaLayerFind(type).forEach((ref) =>
+        objects.push(konvaShape.initializer(ref, null, this._worldTransformer))
+      );
     });
     return objects;
   }
@@ -370,7 +406,7 @@ export class KonvaMarkup implements IMarkup {
       .map((ref) => {
         const name = ref.className;
         const konvaShape = Object.values(MarkupMode2Konva).find((shape) => shape.name === name);
-        return konvaShape ? konvaShape.initializer(ref) : null;
+        return konvaShape ? konvaShape.initializer(ref, null, this._worldTransformer) : null;
       })
       .filter((x) => x);
   }
@@ -490,16 +526,16 @@ export class KonvaMarkup implements IMarkup {
         const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
         if (defParams) {
           if (this._markupMode === "Rectangle") {
-            this.addRectangle({ x: startX, y: startY }, dX, dY);
+            this.addRectangle({ x: startX, y: startY }, null, dX, dY);
           } else if (this._markupMode === "Ellipse") {
-            this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
+            this.addEllipse({ x: startX, y: startY }, null, null, { x: dX / 2, y: dY / 2 });
           } else if (this._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 === "Cloud") {
-            this.addCloud({ x: startX, y: startY }, Math.max(100, dX), Math.max(100, dY));
+            this.addCloud({ x: startX, y: startY }, null, Math.max(100, dX), Math.max(100, dY));
           }
         }
       }
@@ -534,19 +570,19 @@ export class KonvaMarkup implements IMarkup {
           lastObj.setPosition(startX, startY);
           lastObj.setWidth(dX);
           lastObj.setHeight(dY);
-        } else lastObj = this.addRectangle({ x: startX, y: startY }, dX, dY);
+        } else lastObj = this.addRectangle({ x: startX, y: startY }, null, dX, dY);
       } else if (this._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 lastObj = this.addEllipse({ x: startX, y: startY }, null, null, { x: dX, y: dY });
       } else if (this._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);
+        } else lastObj = this.addCloud({ x: startX, y: startY }, null, dX, dY);
       }
     });
 
@@ -567,6 +603,7 @@ export class KonvaMarkup implements IMarkup {
           if (this._imageInputRef && this._imageInputRef.value)
             this.addImage(
               { x: this._imageInputPos.x, y: this._imageInputPos.y },
+              null,
               this._imageInputRef.value,
               0,
               0,
@@ -602,7 +639,7 @@ export class KonvaMarkup implements IMarkup {
       if (this._markupMode === "Image" || this._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);
+            this.addImage(this._imageInputPos, null, this._imageInputRef.value, 0, 0);
           else this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
           return;
         } else {
@@ -678,27 +715,13 @@ export class KonvaMarkup implements IMarkup {
     const lines = [];
 
     this.konvaLayerFind("Line").forEach((ref) => {
-      const linePoints = ref.points();
-      if (!linePoints) return;
-
-      const worldPoints = [];
-      const absoluteTransform = ref.getAbsoluteTransform();
-      for (let i = 0; i < linePoints.length; i += 2) {
-        // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-        // https://stackoverflow.com/a/57641487 - check answer's comments
-        const atPoint = absoluteTransform.point({
-          x: linePoints[i],
-          y: linePoints[i + 1],
-        });
-        const worldPoint = this._worldTransformer.screenToWorld(atPoint);
-
-        worldPoints.push(worldPoint);
-      }
+      const wcsPoints = ref.getAttr("wcsPoints");
+      if (!wcsPoints) return;
 
-      const konvaLine = new KonvaLine(null, ref);
+      const konvaLine = new KonvaLine(null, ref, this._worldTransformer);
       const line: ILine = {
         id: konvaLine.id(),
-        points: worldPoints,
+        points: wcsPoints,
         color: konvaLine.getColor() || "#ff0000",
         type: konvaLine.getLineType() || this.lineType,
         width: konvaLine.getLineWidth() || this.lineWidth,
@@ -717,16 +740,13 @@ export class KonvaMarkup implements IMarkup {
       const textSize = 0.02;
       const textScale = this._worldTransformer.getScale();
 
-      const position = ref.position();
+      const wcsPosition = ref.getAttr("wcsStart");
       const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-      const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
 
-      const worldPoint = this._worldTransformer.screenToWorld(atPoint);
-
-      const shape = new KonvaText(null, ref);
+      const shape = new KonvaText(null, ref, this._worldTransformer);
       const text: IText = {
         id: shape.id(),
-        position: worldPoint,
+        position: wcsPosition,
         text: shape.getText(),
         text_size: textSize * textScale.y,
         angle: shape.getRotation(),
@@ -744,18 +764,18 @@ export class KonvaMarkup implements IMarkup {
     const rectangles = [];
 
     this.konvaLayerFind("Rectangle").forEach((ref) => {
-      const position = ref.position();
-      const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-      const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
-      const worldPoint = this._worldTransformer.screenToWorld(atPoint);
-      const scale = stageAbsoluteTransform.getMatrix()[0];
+      const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
+      const screenStart = this._worldTransformer.worldToScreen(wcsStart);
+      const screenEnd = this._worldTransformer.worldToScreen(wcsEnd);
 
-      const shape = new KonvaRectangle(null, ref);
+      const shape = new KonvaRectangle(null, ref, this._worldTransformer);
       const rectangle: IRectangle = {
         id: shape.id(),
-        position: worldPoint,
-        width: shape.getWidth() * scale,
-        height: shape.getHeigth() * scale,
+        position: wcsStart,
+        position2: wcsEnd,
+        width: Math.abs(screenStart.x - screenEnd.x),
+        height: Math.abs(screenStart.y - screenEnd.y),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
       };
@@ -770,16 +790,18 @@ export class KonvaMarkup implements IMarkup {
     const ellipses = [];
 
     this.konvaLayerFind("Ellipse").forEach((ref) => {
-      const position = ref.position();
+      const wcsPosition = ref.getAttr("wcsPosition");
+      const wcsPosition2 = ref.getAttr("wcsRadiusX");
+      const wcsPosition3 = ref.getAttr("wcsRadiusY");
       const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-      const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
-      const worldPoint = this._worldTransformer.screenToWorld(atPoint);
       const scale = stageAbsoluteTransform.getMatrix()[0];
 
-      const shape = new KonvaEllipse(null, ref);
+      const shape = new KonvaEllipse(null, ref, this._worldTransformer);
       const ellipse: IEllipse = {
         id: shape.id(),
-        position: worldPoint,
+        position: wcsPosition,
+        position2: wcsPosition2,
+        position3: wcsPosition3,
         radius: {
           x: ref.getRadiusX() * scale,
           y: ref.getRadiusY() * scale,
@@ -799,25 +821,14 @@ export class KonvaMarkup implements IMarkup {
 
     this.konvaLayerFind("Arrow").forEach((ref) => {
       // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-      const absoluteTransform = ref.getAbsoluteTransform();
-
-      const atStartPoint = absoluteTransform.point({
-        x: ref.points()[0],
-        y: ref.points()[1],
-      });
-      const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
+      const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
 
-      const atEndPoint = absoluteTransform.point({
-        x: ref.points()[2],
-        y: ref.points()[3],
-      });
-      const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
-
-      const shape = new KonvaArrow(null, ref);
+      const shape = new KonvaArrow(null, ref, this._worldTransformer);
       const arrow: IArrow = {
         id: shape.id(),
-        start: worldStartPoint,
-        end: worldEndPoint,
+        start: wcsStart,
+        end: wcsEnd,
         color: shape.getColor(),
       };
 
@@ -831,16 +842,16 @@ export class KonvaMarkup implements IMarkup {
     const images = [];
 
     this.konvaLayerFind("Image").forEach((ref) => {
-      const position = ref.position();
+      const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
       const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-      const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
-      const worldPoint = this._worldTransformer.screenToWorld(atPoint);
       const scale = stageAbsoluteTransform.getMatrix()[0];
 
-      const shape = new KonvaImage(null, ref);
+      const shape = new KonvaImage(null, ref, this._worldTransformer);
       const image: IImage = {
         id: shape.id(),
-        position: worldPoint,
+        position: wcsStart,
+        position2: wcsEnd,
         src: shape.getSrc(),
         width: shape.getWidth() * scale,
         height: shape.getHeight() * scale,
@@ -856,18 +867,18 @@ export class KonvaMarkup implements IMarkup {
     const clouds = [];
 
     this.konvaLayerFind("Cloud").forEach((ref) => {
-      const position = ref.position();
-      const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
-      const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
-      const worldPoint = this._worldTransformer.screenToWorld(atPoint);
-      const scale = stageAbsoluteTransform.getMatrix()[0];
+      const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
+      const screenStart = this._worldTransformer.worldToScreen(wcsStart);
+      const screenEnd = this._worldTransformer.worldToScreen(wcsEnd);
 
-      const shape = new KonvaCloud(null, ref);
+      const shape = new KonvaCloud(null, ref, this._worldTransformer);
       const cloud: ICloud = {
         id: shape.id(),
-        position: worldPoint,
-        width: shape.getWidth() * scale,
-        height: shape.getHeigth() * scale,
+        position: wcsStart,
+        position2: wcsEnd,
+        width: Math.abs(screenStart.x - screenEnd.x),
+        height: Math.abs(screenStart.y - screenEnd.y),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
       };
@@ -908,13 +919,17 @@ export class KonvaMarkup implements IMarkup {
       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.asHex(),
-      id,
-    });
+    const konvaLine = new KonvaLine(
+      {
+        points,
+        type: type || this.lineType,
+        width: width || this.lineWidth,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaLine);
     return konvaLine;
@@ -987,7 +1002,7 @@ export class KonvaMarkup implements IMarkup {
       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.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, base64.toString(), 0, 0);
       };
       this._imageInputRef.oncancel = (event) => {
         this.removeImageInput();
@@ -1033,14 +1048,18 @@ export class KonvaMarkup implements IMarkup {
       fontSize = textSize / (scale.y / size) / 34;
     }
 
-    const konvaText = new KonvaText({
-      position: { x: position.x, y: position.y },
-      text,
-      rotation: angle,
-      fontSize: fontSize || this.fontSize,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaText = new KonvaText(
+      {
+        position: { x: position.x, y: position.y },
+        text,
+        rotation: angle,
+        fontSize: fontSize || this.fontSize,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaText);
     return konvaText;
@@ -1048,6 +1067,7 @@ export class KonvaMarkup implements IMarkup {
 
   private addRectangle(
     position: Konva.Vector2d,
+    position2: Konva.Vector2d,
     width: number,
     height: number,
     lineWidth?: number,
@@ -1056,61 +1076,74 @@ export class KonvaMarkup implements IMarkup {
   ): KonvaRectangle | void {
     if (!position) return;
 
-    const konvaRectangle = new KonvaRectangle({
-      position,
-      width,
-      height,
-      lineWidth: lineWidth || this.lineWidth,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaRectangle = new KonvaRectangle(
+      {
+        position,
+        position2,
+        width,
+        height,
+        lineWidth: lineWidth || this.lineWidth,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaRectangle);
     return konvaRectangle;
   }
 
   private addEllipse(
-    position: { x: number; y: number },
-    radius: { x: number; y: number },
+    position: Konva.Vector2d,
+    position2: Konva.Vector2d,
+    position3: Konva.Vector2d,
+    radius: Konva.Vector2d,
     lineWidth?: number,
     color?: string,
     id?: string
   ): KonvaEllipse | void {
     if (!position) return;
 
-    const konvaEllipse = new KonvaEllipse({
-      position,
-      radius,
-      lineWidth,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaEllipse = new KonvaEllipse(
+      {
+        position,
+        position2,
+        position3,
+        radius,
+        lineWidth,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaEllipse);
     return konvaEllipse;
   }
 
-  private addArrow(
-    start: { x: number; y: number },
-    end: { x: number; y: number },
-    color?: string,
-    id?: string
-  ): KonvaArrow | void {
+  private addArrow(start: Konva.Vector2d, end: Konva.Vector2d, color?: string, id?: string): KonvaArrow | void {
     if (!start || !end) return;
 
-    const konvaArrow = new KonvaArrow({
-      start,
-      end,
-      color: color || this._markupColor.asHex(),
-      id,
-    });
+    const konvaArrow = new KonvaArrow(
+      {
+        start,
+        end,
+        color: color || this._markupColor.asHex(),
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaArrow);
     return konvaArrow;
   }
 
   private addCloud(
-    position: { x: number; y: number },
+    position: Konva.Vector2d,
+    position2: Konva.Vector2d,
     width: number,
     height: number,
     lineWidth?: number,
@@ -1119,21 +1152,27 @@ export class KonvaMarkup implements IMarkup {
   ): KonvaCloud | void {
     if (!position || !width || !height) return;
 
-    const konvaCloud = new KonvaCloud({
-      position,
-      width,
-      height,
-      color: color || this._markupColor.asHex(),
-      lineWidth: lineWidth || this.lineWidth,
-      id,
-    });
+    const konvaCloud = new KonvaCloud(
+      {
+        position,
+        position2,
+        width,
+        height,
+        color: color || this._markupColor.asHex(),
+        lineWidth: lineWidth || this.lineWidth,
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaCloud);
     return konvaCloud;
   }
 
   private addImage(
-    position: { x: number; y: number },
+    position: Konva.Vector2d,
+    position2: Konva.Vector2d,
     src: string,
     width?: number,
     height?: number,
@@ -1147,15 +1186,20 @@ export class KonvaMarkup implements IMarkup {
     this.clearSelected();
     this.removeImageInput();
 
-    const konvaImage = new KonvaImage({
-      position,
-      src,
-      width,
-      height,
-      maxWidth: this._konvaStage.width() - position.x,
-      maxHeight: this._konvaStage.height() - position.y,
-      id,
-    });
+    const konvaImage = new KonvaImage(
+      {
+        position,
+        position2,
+        src,
+        width,
+        height,
+        maxWidth: this._konvaStage.width() - position.x,
+        maxHeight: this._konvaStage.height() - position.y,
+        id,
+      },
+      null,
+      this._worldTransformer
+    );
 
     this.addObject(konvaImage);
     return konvaImage;