@inweb/viewer-visualize 25.3.21 → 25.3.23

package/lib/Viewer/Draggers/Common/OdBaseDragger.d.ts

@@ -1,20 +1,6 @@
 import { Viewer } from "../../Viewer";
 import { Point2d } from "./Geometry";
 import { OdaGeAction } from "./OdaGeAction";
-/**
- * A [Viewer]{@link Viewer} event that fires when the viewer needs to be updated.
- *
- * @property {string} type - `update`
- * @event update
- */
-/**
- * A [Viewer]{@link Viewer} event that fires when the user selects an entity with the mouse.
- *
- * @property {string} type - `select`
- * @property {OdTvSelectionSet} data - The set of selected entities. For more information, see
- *   [OdTvSelectionSet](https://cloud.opendesign.com/docs/index.html#/vis/OdTvSelectionSet?id=odtvselectionset).
- * @event select
- */
 export declare class OdBaseDragger extends OdaGeAction {
     protected subject: Viewer;
     protected needInputText: boolean;

package/lib/Viewer/Markup/IMarkup.d.ts

@@ -29,6 +29,7 @@ export interface IMarkup {
         b: number;
     };
     colorizeAllMarkup(r: number, g: number, b: number): void;
+    colorizeSelectedMarkups(r: number, g: number, b: number): void;
     setViewpoint(viewpoint: IViewpoint): void;
     getViewpoint(): IViewpoint;
     createObject(type: string, params: any): IMarkupObject;

package/lib/Viewer/Markup/Impl/Konva/KonvaMarkup.d.ts

@@ -17,6 +17,8 @@ export declare class KonvaMarkup implements IMarkup {
     private _textInputRef;
     private _textInputPos;
     private _textInputAngle;
+    private _imageInputRef;
+    private _imageInputPos;
     private _markupContainer;
     private _zIndex;
     private readonly _markupContainerName;
@@ -36,6 +38,7 @@ export declare class KonvaMarkup implements IMarkup {
     };
     setMarkupColor(r: number, g: number, b: number): void;
     colorizeAllMarkup(r?: number, g?: number, b?: number): void;
+    colorizeSelectedMarkups(r: number, g: number, b: number): void;
     setViewpoint(viewpoint: IViewpoint): void;
     getViewpoint(): IViewpoint;
     createObject(type: string, params: any): IMarkupObject;
@@ -61,6 +64,8 @@ export declare class KonvaMarkup implements IMarkup {
     private addLine;
     private createTextInput;
     private removeTextInput;
+    private createImageInput;
+    private removeImageInput;
     private addText;
     private addRectangle;
     private addEllipse;

package/lib/Viewer/Markup/Impl/Visualize/VisualizeMarkup.d.ts

@@ -22,6 +22,7 @@ export declare class VisualizeMarkup implements IMarkup {
     };
     setMarkupColor(r: number, g: number, b: number): void;
     colorizeAllMarkup(r?: number, g?: number, b?: number): void;
+    colorizeSelectedMarkups(r?: number, g?: number, b?: number): void;
     setViewpoint(viewpoint: IViewpoint): void;
     getViewpoint(): IViewpoint;
     getLayer(): any;

package/lib/Viewer/Viewer.d.ts

@@ -17,7 +17,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventM
     private _renderTime;
     protected _options: Options;
     protected _visualizeJsUrl: string;
-    protected _abortControllerForReferences: AbortController | undefined;
+    protected _visualizeJs: any;
     private canvaseventlistener;
     draggerFactory: Map<string, typeof OdBaseDragger>;
     canvasEvents: string[];
@@ -25,9 +25,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventM
     private _resizeObserver;
     canvas: HTMLCanvasElement | undefined;
     markup: IMarkup;
-    visualizeJs: any;
     _abortController: AbortController | undefined;
     _abortControllerForRequestMap: Map<string, AbortController> | undefined;
+    _abortControllerForReferences: AbortController | undefined;
     client: Client | undefined;
     /**
      * @param client - The `Client` instance that provides access to a server. Do not specify
@@ -122,6 +122,11 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventM
      */
     private scheduleUpdateAsync;
     updateAsync(maxScheduleUpdateTimeInMs?: number, maxScheduleUpdateCount?: number): Promise<void>;
+    /**
+     * Returns `VisualizeJS`
+     * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
+     */
+    get visualizeJs(): any;
     /**
      * Returns `VisualizeJS`
      * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
@@ -171,7 +176,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventM
      *
      * Fires:
      *
-     * - {@link ChangeActiveDragger | changeactivedragger}
+     * - {@link ChangeActiveDraggerEvent | changeactivedragger}
      *
      * @param name - Dragger name. Can be one of the {@link Viewer#draggers | draggers} list.
      * @returns Returns active dragger instance or `null` if there is no dragger with the given name.
@@ -311,22 +316,28 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventM
      * @param b - `Blue` part of color.
      */
     colorizeAllMarkup(r?: number, g?: number, b?: number): void;
+    /**
+     * Colorize all selected markup entities with the specified color.
+     *
+     * @param r - `Red` part of color.
+     * @param g - `Green` part of color.
+     * @param b - `Blue` part of color.
+     */
+    colorizeSelectedMarkups(r?: number, g?: number, b?: number): void;
     /**
      * Add an empty markup entity to the overlay.
      */
     addMarkupEntity(entityName: string): any;
     /**
      * Draw a viewpoint. To get a list of available model viewpoints, use the
-     * {@link Model#getViewpoints | Model.getViewpoints()} or
-     * {@link File#getViewpoints | File.getViewpoints()}.
+     * {@link Model.getViewpoints()} or {@link File.getViewpoints()}.
      *
-     * @param viewpoint - Viewpoint.
+     * @param viewpoint - Viewpoint data.
      */
     drawViewpoint(viewpoint: IViewpoint): void;
     /**
      * Create a viewpoint. To add a viewpoint to the list of model viewpoints, use the
-     * {@link Model#saveViewpoint | Model.saveViewpoint()} or
-     * {@link File#saveViewpoint | File.saveViewpoint()}.
+     * {@link Model.saveViewpoint()} or {@link File.saveViewpoint()}.
      */
     createViewpoint(): IViewpoint;
     private getPoint3dFromArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "25.3.21",
+  "version": "25.3.23",
   "description": "3D CAD and BIM data Viewer powered by Visualize",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -25,7 +25,8 @@
   ],
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "test": "karma start karma.conf.js"
+    "test": "karma start karma.conf.js",
+    "ts-docs": "typedoc"
   },
   "dependencies": {
     "@inweb/client": "^25.3.19",

package/src/Viewer/Draggers/Common/OdBaseDragger.ts

@@ -31,22 +31,6 @@ const CLICK_DELTA = 5;
 
 const INTERACTIVITY_FPS = 24;
 
-/**
- * A [Viewer]{@link Viewer} event that fires when the viewer needs to be updated.
- *
- * @property {string} type - `update`
- * @event update
- */
-
-/**
- * A [Viewer]{@link Viewer} event that fires when the user selects an entity with the mouse.
- *
- * @property {string} type - `select`
- * @property {OdTvSelectionSet} data - The set of selected entities. For more information, see
- *   [OdTvSelectionSet](https://cloud.opendesign.com/docs/index.html#/vis/OdTvSelectionSet?id=odtvselectionset).
- * @event select
- */
-
 export class OdBaseDragger extends OdaGeAction {
   protected subject: Viewer;
   protected needInputText: boolean;

package/src/Viewer/Markup/Api/Impl/Konva/KonvaImage.ts

@@ -33,6 +33,8 @@ export class KonvaImage implements IMarkupImage {
 
     this._canvasImage.onload = () => {
       this._ref.image(this._canvasImage);
+      if (this._ref.height() === 0) this._ref.height(this._canvasImage.height);
+      if (this._ref.width() === 0) this._ref.width(this._canvasImage.width);
       this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
     };
 

package/src/Viewer/Markup/IMarkup.ts

@@ -31,6 +31,7 @@ export interface IMarkup {
   setMarkupColor(r: number, g: number, b: number): void;
   getMarkupColor(): { r: number; g: number; b: number };
   colorizeAllMarkup(r: number, g: number, b: number): void;
+  colorizeSelectedMarkups(r: number, g: number, b: number): void;
   setViewpoint(viewpoint: IViewpoint): void;
   getViewpoint(): IViewpoint;
 

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

@@ -7,6 +7,7 @@ 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";
 import { KonvaText } from "../../Api/Impl/Konva/KonvaText";
 import { KonvaRectangle } from "../../Api/Impl/Konva/KonvaRectangle";
@@ -14,6 +15,12 @@ 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 { IMarkupArrow } from "../../Api/IMarkupArrow";
+import { IMarkupEllipse } from "../../Api/IMarkupEllipse";
+import { IMarkupRectangle } from "../../Api/IMarkupRectangle";
+import { IMarkupCloud } from "../../Api/IMarkupCloud";
+import { IMarkupImage } from "../../Api/IMarkupImage";
 
 class KonvaShape {
   name: string;
@@ -102,6 +109,8 @@ export class KonvaMarkup implements IMarkup {
   private _textInputRef: HTMLTextAreaElement;
   private _textInputPos: Konva.Vector2d;
   private _textInputAngle: number;
+  private _imageInputRef: HTMLInputElement;
+  private _imageInputPos: Konva.Vector2d;
   private _markupContainer: HTMLDivElement;
   private _zIndex = 1;
 
@@ -177,6 +186,7 @@ export class KonvaMarkup implements IMarkup {
       .join(" ");
 
     this.removeTextInput();
+    this.removeImageInput();
 
     const markupMode = MarkupMode[draggerName];
     const konvaMode = MarkupMode2Konva.get(markupMode);
@@ -211,6 +221,7 @@ export class KonvaMarkup implements IMarkup {
 
   clearOverlay(): void {
     this.removeTextInput();
+    this.removeImageInput();
     this._konvaTransformer.nodes([]);
     Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.destroy()));
   }
@@ -235,6 +246,15 @@ export class KonvaMarkup implements IMarkup {
     this._konvaLayer.draw();
   }
 
+  colorizeSelectedMarkups(r: number, g: number, b: number): void {
+    this.getSelectedObjects().forEach((obj) => {
+      const colorable = obj as unknown as IMarkupColorable;
+      if (colorable && colorable.setColor) {
+        colorable.setColor(new MarkupColor(r, g, b).HexColor);
+      }
+    });
+  }
+
   setViewpoint(viewpoint: IViewpoint): void {
     const markupColor = viewpoint.custom_fields.markup_color || { r: 255, g: 0, b: 0 };
     this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
@@ -480,10 +500,18 @@ export class KonvaMarkup implements IMarkup {
 
     let isPaint = false;
     let lastLine;
+    let mouseDownPos;
+    let lastObj;
 
     stage.on("mousedown touchstart", (e) => {
       // do nothing if we mousedown on any shape
-      if (!this._markupIsActive || e.target !== stage || this._markupMode === MarkupMode.Text) return;
+      if (
+        !this._markupIsActive ||
+        e.target !== stage ||
+        this._markupMode === MarkupMode.Text ||
+        this._markupMode === MarkupMode.Image
+      )
+        return;
 
       if (e.target === stage && transformer.nodes().length > 0) {
         transformer.nodes([]);
@@ -491,27 +519,44 @@ export class KonvaMarkup implements IMarkup {
       }
 
       const pos = stage.getPointerPosition();
+      mouseDownPos = pos;
 
+      isPaint = [MarkupMode.Arrow, MarkupMode.Cloud, MarkupMode.Ellipse, MarkupMode.Line, MarkupMode.Rectangle].some(
+        (m) => m === this._markupMode
+      );
       if (this._markupMode === MarkupMode.Line) {
         // add point twice, so we have some drawings even on a simple click
         lastLine = this.addLine([pos.x, pos.y, pos.x, pos.y]);
-
-        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;
+
+      if (isPaint) {
+        const pos = stage.getPointerPosition();
+        const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+        const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+        const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+        const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+        const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+        if (defParams) {
+          if (this._markupMode === MarkupMode.Rectangle) {
+            this.addRectangle({ x: startX, y: startY }, dX, dY);
+          } else if (this._markupMode === MarkupMode.Ellipse) {
+            this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
+          } else if (this._markupMode === MarkupMode.Arrow) {
+            this.addArrow(
+              { x: mouseDownPos.x, y: mouseDownPos.y },
+              { x: defParams ? mouseDownPos.x + 200 : pos.x, y: defParams ? startY : pos.y }
+            );
+          } else if (this._markupMode === MarkupMode.Cloud) {
+            this.addCloud({ x: startX, y: startY }, Math.max(100, dX), Math.max(100, dY));
+          }
+        }
+      }
+
+      lastObj = undefined;
       isPaint = false;
     });
 
@@ -525,8 +570,36 @@ export class KonvaMarkup implements IMarkup {
       //e.evt.preventDefault();
 
       const pos = stage.getPointerPosition();
-      const newPoints = lastLine.points().concat([pos.x, pos.y]);
-      lastLine.points(newPoints);
+      const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+      const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+      const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+      const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+      const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+
+      if (this._markupMode === MarkupMode.Line) {
+        lastLine.addPoints([{ x: pos.x, y: pos.y }]);
+      } else if (this._markupMode === MarkupMode.Arrow) {
+        if (lastObj) lastObj.setEndPoint(pos.x, pos.y);
+        else lastObj = this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: pos.x, y: pos.y });
+      } else if (this._markupMode === MarkupMode.Rectangle) {
+        if (lastObj) {
+          lastObj.setPosition(startX, startY);
+          lastObj.setWidth(dX);
+          lastObj.setHeight(dY);
+        } else lastObj = this.addRectangle({ x: startX, y: startY }, dX, dY);
+      } else if (this._markupMode === MarkupMode.Ellipse) {
+        if (lastObj) {
+          lastObj.setPosition(startX, startY);
+          lastObj.setRadiusX(dX);
+          lastObj.setRadiusY(dY);
+        } else lastObj = this.addEllipse({ x: startX, y: startY }, { x: dX, y: dY });
+      } else if (this._markupMode === MarkupMode.Cloud) {
+        if (lastObj) {
+          lastObj.setPosition(startX, startY);
+          lastObj.setWidth(Math.max(100, dX));
+          lastObj.setHeight(Math.max(100, dY));
+        } else lastObj = this.addCloud({ x: startX, y: startY }, dX, dY);
+      }
     });
 
     // clicks should select/deselect shapes
@@ -536,18 +609,33 @@ export class KonvaMarkup implements IMarkup {
       // 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);
+          if (this._textInputRef && this._textInputRef.value)
+            this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
           else if (transformer.nodes().length === 0) {
             const pos = stage.getPointerPosition();
             this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
           }
+        } else if (this._markupMode === MarkupMode.Image) {
+          if (this._imageInputRef && this._imageInputRef.value)
+            this.addImage(
+              { x: this._imageInputPos.x, y: this._imageInputPos.y },
+              this._imageInputRef.value,
+              0,
+              0,
+              this._imageInputRef.value
+            );
+          else if (transformer.nodes().length === 0) {
+            const pos = stage.getPointerPosition();
+            this.createImageInput(pos);
+          }
         }
         transformer.nodes([]);
         return;
       }
 
       if (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);
+        if (this._textInputRef && this._textInputRef.value)
+          this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
         else
           this.createTextInput(
             { x: e.target.attrs.x, y: e.target.attrs.y },
@@ -561,6 +649,15 @@ export class KonvaMarkup implements IMarkup {
         this.removeTextInput();
       }
 
+      if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+        if (this._imageInputRef && this._imageInputRef.value)
+          this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0);
+        else this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
+        return;
+      } else {
+        this.removeImageInput();
+      }
+
       if (transformer.nodes().filter((x) => x.className === "Cloud").length > 0 || e.target.className === "Cloud") {
         transformer.rotateEnabled(false);
       } else {
@@ -922,7 +1019,7 @@ export class KonvaMarkup implements IMarkup {
     type?: LineType,
     width?: number,
     id?: string
-  ): Konva.Line | void {
+  ): IMarkupLine | void {
     if (!linePoints || linePoints.length === 0) return;
     const points: { x: number; y: number }[] = [];
     for (let i = 0; i < linePoints.length; i += 2) {
@@ -939,7 +1036,7 @@ export class KonvaMarkup implements IMarkup {
 
     const obj = konvaLine.ref();
     this._konvaLayer.add(obj);
-    return obj;
+    return konvaLine;
   }
 
   private createTextInput(pos: Konva.Vector2d, inputX: number, inputY: number, angle: number, text: string): void {
@@ -980,6 +1077,52 @@ export class KonvaMarkup implements IMarkup {
     this._textInputAngle = 0;
   }
 
+  private createImageInput(pos: Konva.Vector2d): void {
+    if (!this._imageInputRef) {
+      const convertBase64 = (file) => {
+        return new Promise<string | ArrayBuffer>((resolve, reject) => {
+          const fileReader = new FileReader();
+          fileReader.readAsDataURL(file);
+
+          fileReader.onload = () => {
+            resolve(fileReader.result);
+          };
+
+          fileReader.onerror = (error) => {
+            reject(error);
+          };
+        });
+      };
+
+      this._imageInputPos = pos;
+      this._imageInputRef = document.createElement("input");
+      this._imageInputRef.style.display = "none";
+      this._imageInputRef.type = "file";
+      this._imageInputRef.accept = "image/png, image/jpeg";
+      this._imageInputRef.onchange = async (event) => {
+        const file = (event.target as HTMLInputElement).files[0];
+        const base64 = await convertBase64(file);
+        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, base64.toString(), 0, 0);
+      };
+      this._imageInputRef.oncancel = (event) => {
+        this.removeImageInput();
+      };
+      document.body.appendChild(this._imageInputRef);
+
+      setTimeout(() => {
+        this._imageInputRef.click();
+      }, 50);
+    } else {
+      this.removeImageInput();
+    }
+  }
+
+  private removeImageInput(): void {
+    this._imageInputRef?.remove();
+    this._imageInputRef = null;
+    this._imageInputPos = null;
+  }
+
   private addText(
     specifiedText: string,
     position: Konva.Vector2d,
@@ -1037,7 +1180,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): Konva.Rect | void {
+  ): IMarkupRectangle | void {
     if (!position) return;
 
     const konvaRectangle = new KonvaRectangle({
@@ -1051,7 +1194,7 @@ export class KonvaMarkup implements IMarkup {
 
     const obj = konvaRectangle.ref();
     this._konvaLayer.add(obj);
-    return obj;
+    return konvaRectangle;
   }
 
   private addEllipse(
@@ -1060,7 +1203,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): Konva.Ellipse | void {
+  ): IMarkupEllipse | void {
     if (!position) return;
 
     const konvaEllipse = new KonvaEllipse({
@@ -1073,7 +1216,7 @@ export class KonvaMarkup implements IMarkup {
 
     const obj = konvaEllipse.ref();
     this._konvaLayer.add(obj);
-    return obj;
+    return konvaEllipse;
   }
 
   private addArrow(
@@ -1081,7 +1224,7 @@ export class KonvaMarkup implements IMarkup {
     end: { x: number; y: number },
     color?: string,
     id?: string
-  ): Konva.Arrow | void {
+  ): IMarkupArrow | void {
     if (!start || !end) return;
 
     const konvaArrow = new KonvaArrow({
@@ -1093,7 +1236,7 @@ export class KonvaMarkup implements IMarkup {
 
     const obj = konvaArrow.ref();
     this._konvaLayer.add(obj);
-    return obj;
+    return konvaArrow;
   }
 
   private addCloud(
@@ -1103,7 +1246,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): Konva.Shape | void {
+  ): IMarkupCloud | void {
     if (!position || !width || !height) return;
 
     const konvaCloud = new KonvaCloud({
@@ -1117,28 +1260,40 @@ export class KonvaMarkup implements IMarkup {
 
     const obj = konvaCloud.ref();
     this._konvaLayer.add(obj);
-    return obj;
+    return konvaCloud;
   }
 
   private addImage(
     position: { x: number; y: number },
     src: string,
-    width: number,
-    height: number,
+    width?: number,
+    height?: number,
     id?: string
-  ): Konva.Image | void {
-    if (!position || !width || !height) return;
+  ): void {
+    if (!position) return;
 
-    const konvaImage = new KonvaImage({
-      position,
-      src,
-      width,
-      height,
-      id,
-    });
+    if (src) {
+      const konvaImage = new KonvaImage({
+        position,
+        src,
+        width,
+        height,
+        id,
+      });
 
-    const obj = konvaImage.ref();
-    this._konvaLayer.add(obj);
-    return obj;
+      const obj = konvaImage.ref();
+      this._konvaLayer.add(obj);
+
+      const trNodes = this._konvaTransformer.nodes();
+      if (trNodes.length > 0) {
+        // in case of edit - remove old Image placeholder object
+        trNodes[0].destroy();
+        this._konvaTransformer.nodes([]);
+      }
+    }
+
+    this.removeImageInput();
+
+    return;
   }
 }

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

@@ -68,6 +68,10 @@ export class VisualizeMarkup implements IMarkup {
     this._viewer.update();
   }
 
+  colorizeSelectedMarkups(r = 255, g = 0, b = 0): void {
+    throw new Error("Not implemented yet");
+  }
+
   setViewpoint(viewpoint: IViewpoint): void {
     function getLogicalPoint3dAsArray(point3d) {
       return [point3d.x, point3d.y, point3d.z];