@inweb/markup 25.7.6 → 25.7.8

package/lib/markup/IMarkup.d.ts

@@ -23,21 +23,22 @@ export interface IMarkup {
      */
     fontSize: number;
     /**
-     * Start method to init Markup support for the Viewer instance.
+     * Initializes the markup instance.
      *
-     * @param canvas -
-     *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement}
-     *   used to operate on.
-     * @param canvasEvents - List of `canvas` events that the markup should redirect to the `viewer`.
-     * @param viewer - `Viewer` instance viewer that receives `canvas` events.
-     * @param worldTransformer - Transformer of screen space into world space and vice versa. If
-     *   a transformer is defined, viewpoint objects will be stored in world coordinates,
-     *   otherwise in screen coordinates.
-     */
-    initialize(canvas: HTMLCanvasElement, canvasEvents: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
-    /**
-     * Releases all resources allocated by this `Markup` instance. Call this method before
-     * release the `Markup` instance.
+     * @param container - Container element used to operate on. This is usually a `canvas` or
+     *   `div` on top of which the markup is drawn. If the `container` is an element of type
+     *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement},
+     *   its content will be combined with the markup in the viewpoint snapshot.
+     * @param pointerEvents - List of pointing device events that the markup should redirect to
+     *   the `viewer`.
+     * @param viewer - `Viewer` instance that receives pointing device events.
+     * @param worldTransformer - Transformer of screen space into the `viewer` world space and
+     *   vice versa. If a transformer is defined, viewpoint objects will be stored in world
+     *   coordinates, otherwise in screen coordinates.
+     */
+    initialize(container: HTMLElement, pointerEvents?: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
+    /**
+     * Releases all resources allocated by this markup instance.
      */
     dispose(): void;
     /**

package/lib/markup/Konva/KonvaMarkup.d.ts

@@ -11,8 +11,8 @@ export declare class KonvaMarkup implements IMarkup {
     private _isInitialized;
     private _viewer;
     private _worldTransformer;
-    private _canvasOriginal;
-    private _canvasEvents;
+    private _container;
+    private _pointerEvents;
     private _markupIsActive;
     private _markupMode;
     private _markupColor;
@@ -25,15 +25,16 @@ export declare class KonvaMarkup implements IMarkup {
     private _imageInputRef;
     private _imageInputPos;
     private _markupContainer;
+    private _resizeObserver;
     private _zIndex;
     private readonly _markupContainerName;
     lineWidth: number;
     lineType: MarkupLineType;
     fontSize: number;
-    initialize(canvas: HTMLCanvasElement, canvasEvents: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
+    initialize(container: HTMLElement, pointerEvents?: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
     dispose(): void;
     changeActiveDragger: (event: ChangeActiveDraggerEvent) => void;
-    resize: () => void;
+    resizeContainer: (entries: ResizeObserverEntry[]) => void;
     pan: (event: PanEvent) => void;
     redirectToViewer: (event: any) => void;
     syncOverlay(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.7.6",
+  "version": "25.7.8",
   "description": "JavaScript 2D markups",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -26,8 +26,8 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/eventemitter2": "~25.7.6",
-    "@inweb/viewer-core": "~25.7.6"
+    "@inweb/eventemitter2": "~25.7.8",
+    "@inweb/viewer-core": "~25.7.8"
   },
   "devDependencies": {
     "canvas": "^2.11.2",

package/src/markup/IMarkup.ts

@@ -51,27 +51,28 @@ export interface IMarkup {
   fontSize: number;
 
   /**
-   * Start method to init Markup support for the Viewer instance.
+   * Initializes the markup instance.
    *
-   * @param canvas -
-   *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement}
-   *   used to operate on.
-   * @param canvasEvents - List of `canvas` events that the markup should redirect to the `viewer`.
-   * @param viewer - `Viewer` instance viewer that receives `canvas` events.
-   * @param worldTransformer - Transformer of screen space into world space and vice versa. If
-   *   a transformer is defined, viewpoint objects will be stored in world coordinates,
-   *   otherwise in screen coordinates.
+   * @param container - Container element used to operate on. This is usually a `canvas` or
+   *   `div` on top of which the markup is drawn. If the `container` is an element of type
+   *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement},
+   *   its content will be combined with the markup in the viewpoint snapshot.
+   * @param pointerEvents - List of pointing device events that the markup should redirect to
+   *   the `viewer`.
+   * @param viewer - `Viewer` instance that receives pointing device events.
+   * @param worldTransformer - Transformer of screen space into the `viewer` world space and
+   *   vice versa. If a transformer is defined, viewpoint objects will be stored in world
+   *   coordinates, otherwise in screen coordinates.
    */
   initialize(
-    canvas: HTMLCanvasElement,
-    canvasEvents: string[],
+    container: HTMLElement,
+    pointerEvents?: string[],
     viewer?: IEventEmitter,
     worldTransformer?: IWorldTransform
   ): void;
 
   /**
-   * Releases all resources allocated by this `Markup` instance. Call this method before
-   * release the `Markup` instance.
+   * Releases all resources allocated by this markup instance.
    */
   dispose(): void;
 

package/src/markup/Konva/KonvaMarkup.ts

@@ -87,8 +87,8 @@ export class KonvaMarkup implements IMarkup {
   private _isInitialized = false;
   private _viewer: IEventEmitter;
   private _worldTransformer: IWorldTransform;
-  private _canvasOriginal: HTMLCanvasElement;
-  private _canvasEvents: string[];
+  private _container: HTMLElement;
+  private _pointerEvents: string[];
   private _markupIsActive = false;
   private _markupMode: string;
   private _markupColor = new MarkupColor(255, 0, 0);
@@ -102,6 +102,7 @@ export class KonvaMarkup implements IMarkup {
   private _imageInputRef: HTMLInputElement;
   private _imageInputPos: Konva.Vector2d;
   private _markupContainer: HTMLDivElement;
+  private _resizeObserver: ResizeObserver;
   private _zIndex = 1;
 
   private readonly _markupContainerName = "markupContainer";
@@ -111,8 +112,8 @@ export class KonvaMarkup implements IMarkup {
   public fontSize = 34;
 
   initialize(
-    canvas: HTMLCanvasElement,
-    canvasEvents: string[],
+    container: HTMLElement,
+    pointerEvents?: string[],
     viewer?: IEventEmitter,
     worldTransformer?: IWorldTransform
   ): void {
@@ -123,8 +124,8 @@ export class KonvaMarkup implements IMarkup {
 
     this._viewer = viewer;
     this._worldTransformer = worldTransformer;
-    this._canvasOriginal = canvas;
-    this._canvasEvents = canvasEvents ?? [];
+    this._container = container;
+    this._pointerEvents = pointerEvents ?? [];
 
     this._markupContainer = document.createElement("div");
     this._markupContainer.id = this._markupContainerName;
@@ -134,18 +135,18 @@ export class KonvaMarkup implements IMarkup {
     // to eliminate grey box during delete elements
     this._markupContainer.style.outline = "0px";
 
-    const parentDiv = this._canvasOriginal.parentElement;
+    const parentDiv = this._container.parentElement;
     parentDiv.appendChild(this._markupContainer);
 
+    this._resizeObserver = new ResizeObserver(this.resizeContainer);
+    this._resizeObserver.observe(parentDiv);
+
     this._markupColor.setColor(255, 0, 0);
 
     this.initializeKonva();
-    this.resize();
-
-    this._canvasEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
 
     if (this._viewer) {
-      this._viewer.addEventListener("resize", this.resize);
+      this._pointerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
       this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
       this._viewer.addEventListener("pan", this.pan);
     }
@@ -159,17 +160,19 @@ export class KonvaMarkup implements IMarkup {
     if (this._viewer) {
       this._viewer.removeEventListener("pan", this.pan);
       this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-      this._viewer.removeEventListener("resize", this.resize);
     }
 
-    this._canvasEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
+    this._pointerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
 
     this.destroyKonva();
 
+    this._resizeObserver.disconnect();
+    this._resizeObserver = undefined;
+
     this._markupContainer.remove();
     this._markupContainer = undefined;
 
-    this._canvasOriginal = undefined;
+    this._container = undefined;
     this._viewer = undefined;
     this._worldTransformer = undefined;
 
@@ -180,7 +183,7 @@ export class KonvaMarkup implements IMarkup {
   changeActiveDragger = (event: ChangeActiveDraggerEvent) => {
     const draggerName = event.data;
 
-    this._markupContainer.className = this._canvasOriginal.className
+    this._markupContainer.className = this._container.className
       .split(" ")
       .filter((x) => !x.startsWith("oda-cursor-"))
       .filter((x) => x)
@@ -200,9 +203,13 @@ export class KonvaMarkup implements IMarkup {
     }
   };
 
-  resize = () => {
-    this._konvaStage?.width(this._canvasOriginal.clientWidth);
-    this._konvaStage?.height(this._canvasOriginal.clientHeight);
+  resizeContainer = (entries: ResizeObserverEntry[]) => {
+    const { width, height } = entries[0].contentRect;
+
+    if (!width || !height) return; // <- invisible container, or container with parent removed
+
+    this._konvaStage?.width(width);
+    this._konvaStage?.height(height);
   };
 
   pan = (event: PanEvent) => {
@@ -482,8 +489,8 @@ export class KonvaMarkup implements IMarkup {
     // 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,
+      width: this._container.clientWidth,
+      height: this._container.clientHeight,
     });
     const stage = this._konvaStage;
     const layer = new Konva.Layer({ pixelRation: window.devicePixelRatio });
@@ -920,17 +927,16 @@ export class KonvaMarkup implements IMarkup {
   }
 
   private combineMarkupWithDrawing() {
-    const trNodes = this._konvaTransformer.nodes();
-    if (trNodes.length > 0) {
-      this._konvaTransformer.nodes([]);
-    }
+    this.clearSelected();
 
     const tempCanvas = document.createElement("canvas");
-    tempCanvas.height = this._canvasOriginal.height;
-    tempCanvas.width = this._canvasOriginal.width;
+    tempCanvas.width = this._konvaStage.width();
+    tempCanvas.height = this._konvaStage.height();
+
     const ctx = tempCanvas.getContext("2d");
-    ctx.drawImage(this._canvasOriginal, 0, 0);
+    if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
     ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
+
     return tempCanvas.toDataURL("image/jpeg", 0.25);
   }