@inweb/markup 26.4.0 → 26.4.2

package/lib/markup/IMarkupArrow.d.ts

@@ -5,14 +5,14 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
     /**
-     * Returns the coordinales of the start and end points of arrow.
+     * Returns the coordinates of the start and end points of arrow.
      */
     getPoints(): {
         x: number;
         y: number;
     }[];
     /**
-     * Sets the coordinales of the start and end points of the arrow.
+     * Sets the coordinates of the start and end points of the arrow.
      *
      * @param {{ x: number; y: number }} points - Array of points.
      */
@@ -21,25 +21,25 @@ export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
         y: number;
     }[]): void;
     /**
-     * Returns the coordinales of the start point of arrow.
+     * Returns the coordinates of the start point of arrow.
      */
     getStartPoint(): {
         x: number;
         y: number;
     };
     /**
-     * Sets the coordinales of the start point of the arrow.
+     * Sets the coordinates of the start point of the arrow.
      */
     setStartPoint(x: number, y: number): void;
     /**
-     * Returns the coordinales of the end point of arrow.
+     * Returns the coordinates of the end point of arrow.
      */
     getEndPoint(): {
         x: number;
         y: number;
     };
     /**
-     * Sets the coordinales of the end point of the arrow.
+     * Sets the coordinates of the end point of the arrow.
      */
     setEndPoint(x: number, y: number): void;
 }
@@ -48,14 +48,14 @@ export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupArrowParams {
     /**
-     * Coordinales of the start point of arrow.
+     * Screen coordinates of the start point of arrow.
      */
     start?: {
         x: number;
         y: number;
     };
     /**
-     * Coordinales of the end point of arrow.
+     * Screen coordinates of the end point of arrow.
      */
     end?: {
         x: number;

package/lib/markup/IMarkupCloud.d.ts

@@ -5,14 +5,14 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
     /**
-     * Returns the coordinates of the top-left point (position) of the cloud.
+     * Returns the screen coordinates of the top-left point (position) of the cloud.
      */
     getPosition(): {
         x: number;
         y: number;
     };
     /**
-     * Sets the coordinates of the top-left point (position) of the cloud.
+     * Sets the screen coordinates of the top-left point (position) of the cloud.
      */
     setPosition(x: number, y: number): void;
     /**
@@ -45,20 +45,27 @@ export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupCloudParams {
     /**
-     * Coordinates of the top-left point (position) of the cloud.
+     * Screen coordinates of the top-left point of the cloud.
      */
     position?: {
         x: number;
         y: number;
     };
     /**
-     * Width of the cloud.
+     * Screen coordinates of the bottom-right point of the cloud.
+     */
+    position2?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Screen width of the cloud. Ignored if {@link position2} is defined.
      *
      * @default 200
      */
     width?: number;
     /**
-     * Height of the cloud.
+     * Screen height of the cloud. Ignored if {@link position2} is defined.
      *
      * @default 200
      */

package/lib/markup/IMarkupEllipse.d.ts

@@ -5,14 +5,14 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
     /**
-     * Returns the coordinates of the center point (position) of the ellipse.
+     * Returns the screen coordinates of the center point (position) of the ellipse.
      */
     getPosition(): {
         x: number;
         y: number;
     };
     /**
-     * Sets the coordinates of the top-left point (position) of the ellipse.
+     * Sets the screen coordinates of the top-left point (position) of the ellipse.
      */
     setPosition(x: number, y: number): void;
     /**
@@ -45,14 +45,14 @@ export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupEllipseParams {
     /**
-     * Coordinates of the center point (position) of the ellipse.
+     * Screen coordinates of the center point (position) of the ellipse.
      */
     position?: {
         x: number;
         y: number;
     };
     /**
-     * Radius of the ellipse along the X and Y axes.
+     * Screen radius of the ellipse along the X and Y axes.
      *
      * @default 25
      */

package/lib/markup/IMarkupImage.d.ts

@@ -4,14 +4,14 @@ import { IMarkupObject } from "./IMarkupObject";
  */
 export interface IMarkupImage extends IMarkupObject {
     /**
-     * Returns the coordinates of the top-left point (position) of the image.
+     * Returns the screen coordinates of the top-left point (position) of the image.
      */
     getPosition(): {
         x: number;
         y: number;
     };
     /**
-     * Sets the coordinates of the top-left point (position) of the image.
+     * Sets the screen coordinates of the top-left point (position) of the image.
      */
     setPosition(x: number, y: number): void;
     /**
@@ -50,7 +50,7 @@ export interface IMarkupImage extends IMarkupObject {
  */
 export interface IMarkupImageParams {
     /**
-     * Coordinates of the top-left point (position) of the image.
+     * Screen coordinates of the top-left point (position) of the image.
      */
     position?: {
         x: number;

package/lib/markup/IMarkupLine.d.ts

@@ -9,7 +9,7 @@ export type MarkupLineType = "solid" | "dot" | "dash";
  */
 export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
     /**
-     * Returns the coordinates of the line points as a flat array [x1, y1, x2, y2, ...].
+     * Returns the screen coordinates of the line points as a flat array [x1, y1, x2, y2, ...].
      */
     getPoints(): number[];
     /**
@@ -45,7 +45,7 @@ export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupLineParams {
     /**
-     * Array of line points.
+     * Array of screen points of the line.
      */
     points?: {
         x: number;

package/lib/markup/IMarkupObject.d.ts

@@ -50,6 +50,10 @@ export interface IMarkupObject {
      * @param zIndex - An integer value of Z-Index.
      */
     setZIndex(zIndex: number): void;
+    /**
+     * Update current screen coordinates with internal WCS-based. Only for resize.
+     */
+    updateScreenCoordinates(): void;
     /**
      * Deletes the current object.
      */

package/lib/markup/IMarkupRectangle.d.ts

@@ -5,14 +5,14 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
     /**
-     * Returns the coordinates of the top-left point (position) of the rectangle.
+     * Returns the screen coordinates of the top-left point (position) of the rectangle.
      */
     getPosition(): {
         x: number;
         y: number;
     };
     /**
-     * Sets the coordinates of the top-left point (position) of the rectangle.
+     * Sets the screen coordinates of the top-left point (position) of the rectangle.
      */
     setPosition(x: number, y: number): void;
     /**
@@ -45,12 +45,19 @@ export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupRectangleParams {
     /**
-     * Coordinates of the top-left point (position) of the rectangle.
+     * Screen coordinates of the top-left point (position) of the rectangle.
      */
     position?: {
         x: number;
         y: number;
     };
+    /**
+     * Screen coordinates of the bottom-right point (position) of the rectangle.
+     */
+    position2?: {
+        x: number;
+        y: number;
+    };
     /**
      * Width of the rectangle.
      *

package/lib/markup/IMarkupText.d.ts

@@ -13,14 +13,14 @@ export interface IMarkupText extends IMarkupObject, IMarkupColorable {
      */
     setText(text: string): void;
     /**
-     * Returns the coordinates of the top-left point (position) of the text.
+     * Returns the screen coordinates of the top-left point (position) of the text.
      */
     getPosition(): {
         x: number;
         y: number;
     };
     /**
-     * Sets the coordinates of the top-left point (position) of the text.
+     * Sets the screen coordinates of the top-left point (position) of the text.
      */
     setPosition(x: number, y: number): void;
     /**
@@ -37,7 +37,7 @@ export interface IMarkupText extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupTextParams {
     /**
-     * Coordinates of the top-left point (position) of the text.
+     * Screen coordinates of the top-left point (position) of the text.
      */
     position?: {
         x: number;

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

@@ -1,7 +1,9 @@
 import { IMarkupArrow, IMarkupArrowParams } from "../IMarkupArrow";
+import { WorldTransform } from "../WorldTransform";
 export declare class KonvaArrow implements IMarkupArrow {
     private _ref;
-    constructor(params: IMarkupArrowParams, ref?: any);
+    private _worldTransformer;
+    constructor(params: IMarkupArrowParams, ref?: any, worldTransformer?: WorldTransform);
     ref(): import("konva/lib/shapes/Arrow").Arrow;
     id(): string;
     enableMouseEditing(value: boolean): void;
@@ -31,4 +33,5 @@ export declare class KonvaArrow implements IMarkupArrow {
         y: number;
     };
     setEndPoint(x: number, y: number): void;
+    updateScreenCoordinates(): void;
 }

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

@@ -1,7 +1,9 @@
 import { IMarkupCloud, IMarkupCloudParams } from "../IMarkupCloud";
+import { WorldTransform } from "../WorldTransform";
 export declare class KonvaCloud implements IMarkupCloud {
     private _ref;
-    constructor(params: IMarkupCloudParams, ref?: any);
+    private _worldTransformer;
+    constructor(params: IMarkupCloudParams, ref?: any, worldTransformer?: WorldTransform);
     ref(): import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig>;
     id(): string;
     enableMouseEditing(value: boolean): void;
@@ -21,4 +23,5 @@ export declare class KonvaCloud implements IMarkupCloud {
     setHeight(h: number): void;
     getLineWidth(): number;
     setLineWidth(size: number): void;
+    updateScreenCoordinates(): void;
 }

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

@@ -1,7 +1,9 @@
 import { IMarkupEllipse, IMarkupEllipseParams } from "../IMarkupEllipse";
+import { WorldTransform } from "../WorldTransform";
 export declare class KonvaEllipse implements IMarkupEllipse {
     private _ref;
-    constructor(params: IMarkupEllipseParams, ref?: any);
+    private _worldTransformer;
+    constructor(params: IMarkupEllipseParams, ref?: any, worldTransformer?: WorldTransform);
     getPosition(): {
         x: number;
         y: number;
@@ -24,4 +26,5 @@ export declare class KonvaEllipse implements IMarkupEllipse {
     getZIndex(): number;
     setZIndex(zIndex: number): void;
     delete(): void;
+    updateScreenCoordinates(): void;
 }

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

@@ -1,4 +1,5 @@
 import { IMarkupImage, IMarkupImageParams } from "../IMarkupImage";
+import { WorldTransform } from "../WorldTransform";
 export declare class KonvaImage implements IMarkupImage {
     private _ref;
     private _canvasImage;
@@ -6,7 +7,8 @@ export declare class KonvaImage implements IMarkupImage {
     private readonly EPSILON;
     private readonly BASE64_HEADER_START;
     private readonly BASE64_NOT_FOUND;
-    constructor(params: IMarkupImageParams, ref?: any);
+    private _worldTransformer;
+    constructor(params: IMarkupImageParams, ref?: any, worldTransformer?: WorldTransform);
     getSrc(): string;
     setSrc(src: any): void;
     getWidth(): number;
@@ -27,4 +29,5 @@ export declare class KonvaImage implements IMarkupImage {
         y: number;
     };
     setPosition(x: number, y: number): void;
+    updateScreenCoordinates(): void;
 }

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

@@ -1,7 +1,9 @@
 import { IMarkupLine, IMarkupLineParams } from "../IMarkupLine";
+import { WorldTransform } from "../WorldTransform";
 export declare class KonvaLine implements IMarkupLine {
     private _ref;
-    constructor(params: IMarkupLineParams, ref?: any);
+    private _worldTransformer;
+    constructor(params: IMarkupLineParams, ref?: any, worldTransformer?: WorldTransform);
     ref(): import("konva/lib/shapes/Line").Line<import("konva/lib/shapes/Line").LineConfig>;
     id(): string;
     enableMouseEditing(value: boolean): void;
@@ -22,4 +24,5 @@ export declare class KonvaLine implements IMarkupLine {
         x: number;
         y: number;
     }]): void;
+    updateScreenCoordinates(): void;
 }

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

@@ -1,5 +1,5 @@
 import { IEventEmitter } from "@inweb/eventemitter2";
-import { ChangeActiveDraggerEvent, IViewpoint, PanEvent, ZoomAtEvent } from "@inweb/viewer-core";
+import { ChangeActiveDraggerEvent, IViewpoint, PanEvent, ZoomAtEvent, ResizeEvent } from "@inweb/viewer-core";
 import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
@@ -11,7 +11,6 @@ export declare class KonvaMarkup implements IMarkup {
     private _viewer;
     private _worldTransformer;
     private _container;
-    private _containerEvents;
     private _markupIsActive;
     private _markupMode;
     private _markupColor;
@@ -35,6 +34,7 @@ export declare class KonvaMarkup implements IMarkup {
     dispose(): void;
     changeActiveDragger: (event: ChangeActiveDraggerEvent) => void;
     resizeContainer: (entries: ResizeObserverEntry[]) => void;
+    resizeViewer: (event: ResizeEvent) => void;
     pan: (event: PanEvent) => void;
     zoomAt: (event: ZoomAtEvent) => void;
     redirectToViewer: (event: any) => void;

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

@@ -1,7 +1,9 @@
 import { IMarkupRectangle, IMarkupRectangleParams } from "../IMarkupRectangle";
+import { WorldTransform } from "../WorldTransform";
 export declare class KonvaRectangle implements IMarkupRectangle {
     private _ref;
-    constructor(params: IMarkupRectangleParams, ref?: any);
+    private _worldTransformer;
+    constructor(params: IMarkupRectangleParams, ref?: any, worldTransformer?: WorldTransform);
     getPosition(): {
         x: number;
         y: number;
@@ -24,4 +26,5 @@ export declare class KonvaRectangle implements IMarkupRectangle {
     delete(): void;
     setLineWidth(size: number): void;
     getLineWidth(): number;
+    updateScreenCoordinates(): void;
 }

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

@@ -1,8 +1,10 @@
 import { IMarkupText, IMarkupTextParams } from "../IMarkupText";
+import { WorldTransform } from "../WorldTransform";
 export declare class KonvaText implements IMarkupText {
     private _ref;
+    private _worldTransformer;
     private readonly TEXT_FONT_FAMILY;
-    constructor(params: IMarkupTextParams, ref?: any);
+    constructor(params: IMarkupTextParams, ref?: any, worldTransformer?: WorldTransform);
     ref(): import("konva/lib/shapes/Text").Text;
     id(): string;
     enableMouseEditing(value: boolean): void;
@@ -23,4 +25,5 @@ export declare class KonvaText implements IMarkupText {
     setPosition(x: number, y: number): void;
     getFontSize(): number;
     setFontSize(size: number): void;
+    updateScreenCoordinates(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "26.4.0",
+  "version": "26.4.2",
   "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": "~26.4.0",
-    "@inweb/viewer-core": "~26.4.0"
+    "@inweb/eventemitter2": "~26.4.2",
+    "@inweb/viewer-core": "~26.4.2"
   },
   "devDependencies": {
     "konva": "^9.3.18"

package/src/markup/IMarkupArrow.ts

@@ -29,34 +29,34 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
   /**
-   * Returns the coordinales of the start and end points of arrow.
+   * Returns the coordinates of the start and end points of arrow.
    */
   getPoints(): { x: number; y: number }[];
 
   /**
-   * Sets the coordinales of the start and end points of the arrow.
+   * Sets the coordinates of the start and end points of the arrow.
    *
    * @param {{ x: number; y: number }} points - Array of points.
    */
   setPoints(points: { x: number; y: number }[]): void;
 
   /**
-   * Returns the coordinales of the start point of arrow.
+   * Returns the coordinates of the start point of arrow.
    */
   getStartPoint(): { x: number; y: number };
 
   /**
-   * Sets the coordinales of the start point of the arrow.
+   * Sets the coordinates of the start point of the arrow.
    */
   setStartPoint(x: number, y: number): void;
 
   /**
-   * Returns the coordinales of the end point of arrow.
+   * Returns the coordinates of the end point of arrow.
    */
   getEndPoint(): { x: number; y: number };
 
   /**
-   * Sets the coordinales of the end point of the arrow.
+   * Sets the coordinates of the end point of the arrow.
    */
   setEndPoint(x: number, y: number): void;
 }
@@ -66,12 +66,12 @@ export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupArrowParams {
   /**
-   * Coordinales of the start point of arrow.
+   * Screen coordinates of the start point of arrow.
    */
   start?: { x: number; y: number };
 
   /**
-   * Coordinales of the end point of arrow.
+   * Screen coordinates of the end point of arrow.
    */
   end?: { x: number; y: number };
 

package/src/markup/IMarkupCloud.ts

@@ -29,12 +29,12 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
   /**
-   * Returns the coordinates of the top-left point (position) of the cloud.
+   * Returns the screen coordinates of the top-left point (position) of the cloud.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Sets the coordinates of the top-left point (position) of the cloud.
+   * Sets the screen coordinates of the top-left point (position) of the cloud.
    */
   setPosition(x: number, y: number): void;
 
@@ -74,19 +74,24 @@ export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupCloudParams {
   /**
-   * Coordinates of the top-left point (position) of the cloud.
+   * Screen coordinates of the top-left point of the cloud.
    */
   position?: { x: number; y: number };
 
   /**
-   * Width of the cloud.
+   * Screen coordinates of the bottom-right point of the cloud.
+   */
+  position2?: { x: number; y: number };
+
+  /**
+   * Screen width of the cloud. Ignored if {@link position2} is defined.
    *
    * @default 200
    */
   width?: number;
 
   /**
-   * Height of the cloud.
+   * Screen height of the cloud. Ignored if {@link position2} is defined.
    *
    * @default 200
    */

package/src/markup/IMarkupEllipse.ts

@@ -29,12 +29,12 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
   /**
-   * Returns the coordinates of the center point (position) of the ellipse.
+   * Returns the screen coordinates of the center point (position) of the ellipse.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Sets the coordinates of the top-left point (position) of the ellipse.
+   * Sets the screen coordinates of the top-left point (position) of the ellipse.
    */
   setPosition(x: number, y: number): void;
 
@@ -74,12 +74,12 @@ export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupEllipseParams {
   /**
-   * Coordinates of the center point (position) of the ellipse.
+   * Screen coordinates of the center point (position) of the ellipse.
    */
   position?: { x: number; y: number };
 
   /**
-   * Radius of the ellipse along the X and Y axes.
+   * Screen radius of the ellipse along the X and Y axes.
    *
    * @default 25
    */

package/src/markup/IMarkupImage.ts

@@ -28,12 +28,12 @@ import { IMarkupObject } from "./IMarkupObject";
  */
 export interface IMarkupImage extends IMarkupObject {
   /**
-   * Returns the coordinates of the top-left point (position) of the image.
+   * Returns the screen coordinates of the top-left point (position) of the image.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Sets the coordinates of the top-left point (position) of the image.
+   * Sets the screen coordinates of the top-left point (position) of the image.
    */
   setPosition(x: number, y: number): void;
 
@@ -79,7 +79,7 @@ export interface IMarkupImage extends IMarkupObject {
  */
 export interface IMarkupImageParams {
   /**
-   * Coordinates of the top-left point (position) of the image.
+   * Screen coordinates of the top-left point (position) of the image.
    */
   position?: { x: number; y: number };
 

package/src/markup/IMarkupLine.ts

@@ -34,7 +34,7 @@ export type MarkupLineType = "solid" | "dot" | "dash";
  */
 export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
   /**
-   * Returns the coordinates of the line points as a flat array [x1, y1, x2, y2, ...].
+   * Returns the screen coordinates of the line points as a flat array [x1, y1, x2, y2, ...].
    */
   getPoints(): number[];
 
@@ -73,7 +73,7 @@ export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupLineParams {
   /**
-   * Array of line points.
+   * Array of screen points of the line.
    */
   points?: { x: number; y: number }[];
 

package/src/markup/IMarkupObject.ts

@@ -81,6 +81,11 @@ export interface IMarkupObject {
    */
   setZIndex(zIndex: number): void;
 
+  /**
+   * Update current screen coordinates with internal WCS-based. Only for resize.
+   */
+  updateScreenCoordinates(): void;
+
   /**
    * Deletes the current object.
    */

package/src/markup/IMarkupRectangle.ts

@@ -29,12 +29,12 @@ import { IMarkupColorable } from "./IMarkupColorable";
  */
 export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
-   * Returns the coordinates of the top-left point (position) of the rectangle.
+   * Returns the screen coordinates of the top-left point (position) of the rectangle.
    */
   getPosition(): { x: number; y: number };
 
   /**
-   * Sets the coordinates of the top-left point (position) of the rectangle.
+   * Sets the screen coordinates of the top-left point (position) of the rectangle.
    */
   setPosition(x: number, y: number): void;
 
@@ -74,10 +74,15 @@ export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
  */
 export interface IMarkupRectangleParams {
   /**
-   * Coordinates of the top-left point (position) of the rectangle.
+   * Screen coordinates of the top-left point (position) of the rectangle.
    */
   position?: { x: number; y: number };
 
+  /**
+   * Screen coordinates of the bottom-right point (position) of the rectangle.
+   */
+  position2?: { x: number; y: number };
+
   /**
    * Width of the rectangle.
    *