@inweb/markup 25.7.7 → 25.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.7.7",
+  "version": "25.7.9",
   "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.7",
-    "@inweb/viewer-core": "~25.7.7"
+    "@inweb/eventemitter2": "~25.7.9",
+    "@inweb/viewer-core": "~25.7.9"
   },
   "devDependencies": {
     "canvas": "^2.11.2",

package/src/markup/Konva/KonvaMarkup.ts

@@ -27,9 +27,10 @@ import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-co
 
 import { IMarkup } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
-import { MarkupColor } from "./MarkupColor";
 import { IMarkupObject } from "../IMarkupObject";
 import { IMarkupColorable } from "../IMarkupColorable";
+import { MarkupLineType } from "../IMarkupLine";
+import { MarkupColor } from "./MarkupColor";
 import { KonvaLine } from "./KonvaLine";
 import { KonvaText } from "./KonvaText";
 import { KonvaRectangle } from "./KonvaRectangle";
@@ -37,13 +38,6 @@ import { KonvaEllipse } from "./KonvaEllipse";
 import { KonvaArrow } from "./KonvaArrow";
 import { KonvaImage } from "./KonvaImage";
 import { KonvaCloud } from "./KonvaCloud";
-import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
-import { IMarkupArrow } from "../IMarkupArrow";
-import { IMarkupEllipse } from "../IMarkupEllipse";
-import { IMarkupRectangle } from "../IMarkupRectangle";
-import { IMarkupCloud } from "../IMarkupCloud";
-import { IMarkupImage } from "../IMarkupImage";
-import { IMarkupText } from "../IMarkupText";
 
 const MarkupMode2Konva = {
   SelectMarkup: {
@@ -102,6 +96,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";
@@ -137,15 +132,15 @@ export class KonvaMarkup implements IMarkup {
     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();
 
     if (this._viewer) {
       this._pointerEvents.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);
     }
@@ -159,13 +154,15 @@ 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._pointerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
 
     this.destroyKonva();
 
+    this._resizeObserver.disconnect();
+    this._resizeObserver = undefined;
+
     this._markupContainer.remove();
     this._markupContainer = undefined;
 
@@ -200,9 +197,13 @@ export class KonvaMarkup implements IMarkup {
     }
   };
 
-  resize = () => {
-    this._konvaStage?.width(this._container.clientWidth);
-    this._konvaStage?.height(this._container.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) => {
@@ -939,8 +940,9 @@ export class KonvaMarkup implements IMarkup {
     type?: MarkupLineType,
     width?: number,
     id?: string
-  ): IMarkupLine | void {
+  ): KonvaLine | 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] });
@@ -1051,7 +1053,7 @@ export class KonvaMarkup implements IMarkup {
     textSize?: number,
     fontSize?: number,
     id?: string
-  ): IMarkupText | void {
+  ): KonvaText | void {
     const trNodes = this._konvaTransformer.nodes();
     if (trNodes.length > 0) {
       // in case of edit - remove old Konva.Text object
@@ -1092,7 +1094,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): IMarkupRectangle | void {
+  ): KonvaRectangle | void {
     if (!position) return;
 
     const konvaRectangle = new KonvaRectangle({
@@ -1115,7 +1117,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): IMarkupEllipse | void {
+  ): KonvaEllipse | void {
     if (!position) return;
 
     const konvaEllipse = new KonvaEllipse({
@@ -1136,7 +1138,7 @@ export class KonvaMarkup implements IMarkup {
     end: { x: number; y: number },
     color?: string,
     id?: string
-  ): IMarkupArrow | void {
+  ): KonvaArrow | void {
     if (!start || !end) return;
 
     const konvaArrow = new KonvaArrow({
@@ -1158,7 +1160,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): IMarkupCloud | void {
+  ): KonvaCloud | void {
     if (!position || !width || !height) return;
 
     const konvaCloud = new KonvaCloud({
@@ -1181,10 +1183,10 @@ export class KonvaMarkup implements IMarkup {
     width?: number,
     height?: number,
     id?: string
-  ): IMarkupImage | void {
+  ): KonvaImage | void {
     if (!position) return;
 
-    let konvaImage: IMarkupImage;
+    let konvaImage: KonvaImage;
 
     if (src) {
       konvaImage = new KonvaImage({