@inweb/markup 25.7.5 → 25.7.7

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/IMarkupArrow.d.ts

@@ -1,8 +1,9 @@
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 /**
  * Arrow Markup object
  */
-export interface IMarkupArrow extends IMarkupObject {
+export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
     /**
      * Get points of current Arrow
      *

package/lib/markup/IMarkupCloud.d.ts

@@ -1,8 +1,9 @@
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 /**
  * Cloud Markup object
  */
-export interface IMarkupCloud extends IMarkupObject {
+export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
     /**
      * Get position of the Cloud
      */

package/lib/markup/IMarkupEllipse.d.ts

@@ -1,8 +1,9 @@
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 /**
  * Ellipse Markup object
  */
-export interface IMarkupEllipse extends IMarkupObject {
+export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
     /**
      * Get position of the Ellipse
      */

package/lib/markup/IMarkupLine.d.ts

@@ -1,4 +1,5 @@
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 /**
  * Type of the markup line.
  */
@@ -6,7 +7,7 @@ export type MarkupLineType = "solid" | "dot" | "dash";
 /**
  * Line Markup object
  */
-export interface IMarkupLine extends IMarkupObject {
+export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
     /**
      * Get points of the Line
      */

package/lib/markup/IMarkupRectangle.d.ts

@@ -1,8 +1,9 @@
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 /**
  * Rectangle Markup object
  */
-export interface IMarkupRectangle extends IMarkupObject {
+export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
     /**
      * Get position of the Rectangle
      */

package/lib/markup/IMarkupText.d.ts

@@ -1,8 +1,9 @@
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 /**
  * Text Markup object
  */
-export interface IMarkupText extends IMarkupObject {
+export interface IMarkupText extends IMarkupObject, IMarkupColorable {
     /**
      * Get Text value
      */

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

@@ -1,6 +1,5 @@
 import { IMarkupArrow } from "../IMarkupArrow";
-import { IMarkupColorable } from "../IMarkupColorable";
-export declare class KonvaArrow implements IMarkupArrow, IMarkupColorable {
+export declare class KonvaArrow implements IMarkupArrow {
     private _ref;
     constructor(params: {
         start: {

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

@@ -1,6 +1,5 @@
-import { IMarkupColorable } from "../IMarkupColorable";
 import { IMarkupCloud } from "../IMarkupCloud";
-export declare class KonvaCloud implements IMarkupCloud, IMarkupColorable {
+export declare class KonvaCloud implements IMarkupCloud {
     private _ref;
     constructor(params: {
         position: {

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

@@ -1,6 +1,5 @@
 import { IMarkupEllipse } from "../IMarkupEllipse";
-import { IMarkupColorable } from "../IMarkupColorable";
-export declare class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
+export declare class KonvaEllipse implements IMarkupEllipse {
     private _ref;
     constructor(params: {
         position: {

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

@@ -1,6 +1,5 @@
 import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
-import { IMarkupColorable } from "../IMarkupColorable";
-export declare class KonvaLine implements IMarkupLine, IMarkupColorable {
+export declare class KonvaLine implements IMarkupLine {
     private _ref;
     constructor(params: {
         points: {

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;
@@ -30,7 +30,7 @@ export declare class KonvaMarkup implements IMarkup {
     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;

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

@@ -1,6 +1,5 @@
 import { IMarkupRectangle } from "../IMarkupRectangle";
-import { IMarkupColorable } from "../IMarkupColorable";
-export declare class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
+export declare class KonvaRectangle implements IMarkupRectangle {
     private _ref;
     constructor(params: {
         position: {

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

@@ -1,6 +1,5 @@
 import { IMarkupText } from "../IMarkupText";
-import { IMarkupColorable } from "../IMarkupColorable";
-export declare class KonvaText implements IMarkupText, IMarkupColorable {
+export declare class KonvaText implements IMarkupText {
     private _ref;
     private readonly TEXT_FONT_FAMILY;
     constructor(params: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.7.5",
+  "version": "25.7.7",
   "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.5",
-    "@inweb/viewer-core": "~25.7.5"
+    "@inweb/eventemitter2": "~25.7.7",
+    "@inweb/viewer-core": "~25.7.7"
   },
   "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/IMarkupArrow.ts

@@ -22,11 +22,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
  * Arrow Markup object
  */
-export interface IMarkupArrow extends IMarkupObject {
+export interface IMarkupArrow extends IMarkupObject, IMarkupColorable {
   /**
    * Get points of current Arrow
    *

package/src/markup/IMarkupCloud.ts

@@ -22,11 +22,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
  * Cloud Markup object
  */
-export interface IMarkupCloud extends IMarkupObject {
+export interface IMarkupCloud extends IMarkupObject, IMarkupColorable {
   /**
    * Get position of the Cloud
    */

package/src/markup/IMarkupEllipse.ts

@@ -22,11 +22,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
  * Ellipse Markup object
  */
-export interface IMarkupEllipse extends IMarkupObject {
+export interface IMarkupEllipse extends IMarkupObject, IMarkupColorable {
   /**
    * Get position of the Ellipse
    */

package/src/markup/IMarkupLine.ts

@@ -22,6 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
  * Type of the markup line.
@@ -31,7 +32,7 @@ export type MarkupLineType = "solid" | "dot" | "dash";
 /**
  * Line Markup object
  */
-export interface IMarkupLine extends IMarkupObject {
+export interface IMarkupLine extends IMarkupObject, IMarkupColorable {
   /**
    * Get points of the Line
    */

package/src/markup/IMarkupRectangle.ts

@@ -22,11 +22,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
  * Rectangle Markup object
  */
-export interface IMarkupRectangle extends IMarkupObject {
+export interface IMarkupRectangle extends IMarkupObject, IMarkupColorable {
   /**
    * Get position of the Rectangle
    */

package/src/markup/IMarkupText.ts

@@ -22,11 +22,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { IMarkupObject } from "./IMarkupObject";
+import { IMarkupColorable } from "./IMarkupColorable";
 
 /**
  * Text Markup object
  */
-export interface IMarkupText extends IMarkupObject {
+export interface IMarkupText extends IMarkupObject, IMarkupColorable {
   /**
    * Get Text value
    */

package/src/markup/Konva/KonvaArrow.ts

@@ -23,9 +23,8 @@
 
 import Konva from "konva";
 import { IMarkupArrow } from "../IMarkupArrow";
-import { IMarkupColorable } from "../IMarkupColorable";
 
-export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
+export class KonvaArrow implements IMarkupArrow {
   private _ref: Konva.Arrow;
 
   constructor(

package/src/markup/Konva/KonvaCloud.ts

@@ -1,8 +1,7 @@
 import Konva from "konva";
-import { IMarkupColorable } from "../IMarkupColorable";
 import { IMarkupCloud } from "../IMarkupCloud";
 
-export class KonvaCloud implements IMarkupCloud, IMarkupColorable {
+export class KonvaCloud implements IMarkupCloud {
   private _ref: Konva.Shape;
 
   constructor(

package/src/markup/Konva/KonvaEllipse.ts

@@ -1,8 +1,7 @@
 import Konva from "konva";
 import { IMarkupEllipse } from "../IMarkupEllipse";
-import { IMarkupColorable } from "../IMarkupColorable";
 
-export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
+export class KonvaEllipse implements IMarkupEllipse {
   private _ref: Konva.Ellipse;
 
   constructor(

package/src/markup/Konva/KonvaLine.ts

@@ -1,6 +1,5 @@
 import Konva from "konva";
 import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
-import { IMarkupColorable } from "../IMarkupColorable";
 
 const LineTypeSpecs = new Map<string, number[]>([
   ["solid", []],
@@ -8,7 +7,7 @@ const LineTypeSpecs = new Map<string, number[]>([
   ["dash", [30, 30]],
 ]);
 
-export class KonvaLine implements IMarkupLine, IMarkupColorable {
+export class KonvaLine implements IMarkupLine {
   private _ref: Konva.Line;
 
   constructor(

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);
@@ -111,8 +111,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 +123,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,7 +134,7 @@ 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._markupColor.setColor(255, 0, 0);
@@ -142,9 +142,9 @@ export class KonvaMarkup implements IMarkup {
     this.initializeKonva();
     this.resize();
 
-    this._canvasEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
-
     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);
@@ -162,14 +162,14 @@ export class KonvaMarkup implements IMarkup {
       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._markupContainer.remove();
     this._markupContainer = undefined;
 
-    this._canvasOriginal = undefined;
+    this._container = undefined;
     this._viewer = undefined;
     this._worldTransformer = undefined;
 
@@ -180,7 +180,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)
@@ -201,8 +201,8 @@ export class KonvaMarkup implements IMarkup {
   };
 
   resize = () => {
-    this._konvaStage?.width(this._canvasOriginal.clientWidth);
-    this._konvaStage?.height(this._canvasOriginal.clientHeight);
+    this._konvaStage?.width(this._container.clientWidth);
+    this._konvaStage?.height(this._container.clientHeight);
   };
 
   pan = (event: PanEvent) => {
@@ -482,8 +482,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 +920,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);
   }
 

package/src/markup/Konva/KonvaRectangle.ts

@@ -1,8 +1,7 @@
 import Konva from "konva";
 import { IMarkupRectangle } from "../IMarkupRectangle";
-import { IMarkupColorable } from "../IMarkupColorable";
 
-export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
+export class KonvaRectangle implements IMarkupRectangle {
   private _ref: Konva.Rect;
 
   constructor(

package/src/markup/Konva/KonvaText.ts

@@ -1,8 +1,7 @@
 import Konva from "konva";
 import { IMarkupText } from "../IMarkupText";
-import { IMarkupColorable } from "../IMarkupColorable";
 
-export class KonvaText implements IMarkupText, IMarkupColorable {
+export class KonvaText implements IMarkupText {
   private _ref: Konva.Text;
   private readonly TEXT_FONT_FAMILY = "Calibri";