@inweb/markup 25.7.10 → 25.8.1

package/lib/markup/WorldTransform.d.ts

@@ -0,0 +1,23 @@
+export declare class WorldTransform {
+    screenToWorld(position: {
+        x: number;
+        y: number;
+    }): {
+        x: number;
+        y: number;
+        z: number;
+    };
+    worldToScreen(position: {
+        x: number;
+        y: number;
+        z: number;
+    }): {
+        x: number;
+        y: number;
+    };
+    getScale(): {
+        x: number;
+        y: number;
+        z: number;
+    };
+}

package/package.json

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

package/src/markup/Konva/KonvaMarkup.ts

@@ -31,6 +31,7 @@ import { IMarkupObject } from "../IMarkupObject";
 import { IMarkupColorable } from "../IMarkupColorable";
 import { MarkupLineType } from "../IMarkupLine";
 import { MarkupColor } from "./MarkupColor";
+import { WorldTransform } from "../WorldTransform";
 import { KonvaLine } from "./KonvaLine";
 import { KonvaText } from "./KonvaText";
 import { KonvaRectangle } from "./KonvaRectangle";
@@ -46,31 +47,37 @@ const MarkupMode2Konva = {
   },
   Line: {
     name: "Line",
-    initializer: (ref: any) => new KonvaLine(null, ref),
+    initializer: (ref: any, params = null) => new KonvaLine(params, ref),
+    zIndex: 1,
   },
   Text: {
     name: "Text",
-    initializer: (ref: any) => new KonvaText(null, ref),
+    initializer: (ref: any, params = null) => new KonvaText(params, ref),
   },
   Rectangle: {
     name: "Rect",
-    initializer: (ref: any) => new KonvaRectangle(null, ref),
+    initializer: (ref: any, params = null) => new KonvaRectangle(params, ref),
+    zIndex: 1,
   },
   Ellipse: {
     name: "Ellipse",
-    initializer: (ref: any) => new KonvaEllipse(null, ref),
+    initializer: (ref: any, params = null) => new KonvaEllipse(params, ref),
+    zIndex: 1,
   },
   Arrow: {
     name: "Arrow",
-    initializer: (ref: any) => new KonvaArrow(null, ref),
+    initializer: (ref: any, params = null) => new KonvaArrow(params, ref),
+    zIndex: 1,
   },
   Image: {
     name: "Image",
-    initializer: (ref: any) => new KonvaImage(null, ref),
+    initializer: (ref: any, params = null) => new KonvaImage(params, ref),
+    zIndex: 0,
   },
   Cloud: {
     name: "Cloud",
     initializer: (ref: any) => new KonvaCloud(null, ref),
+    zIndex: 1,
   },
 };
 
@@ -117,7 +124,7 @@ export class KonvaMarkup implements IMarkup {
       );
 
     this._viewer = viewer;
-    this._worldTransformer = worldTransformer;
+    this._worldTransformer = worldTransformer ?? new WorldTransform();
     this._container = container;
     this._pointerEvents = pointerEvents ?? [];
 
@@ -202,10 +209,7 @@ export class KonvaMarkup implements IMarkup {
   pan = (event: PanEvent) => {
     const dX = event.dX / window.devicePixelRatio;
     const dY = event.dY / window.devicePixelRatio;
-
-    Object.keys(MarkupMode2Konva).forEach((mode) =>
-      this.konvaLayerFind(mode).forEach((ref) => ref.move({ x: dX, y: dY }))
-    );
+    this.getObjects().forEach((obj) => obj.ref().move({ x: dX, y: dY }));
   };
 
   redirectToViewer = (event: any) => {
@@ -217,8 +221,8 @@ export class KonvaMarkup implements IMarkup {
   clearOverlay(): void {
     this.removeTextInput();
     this.removeImageInput();
-    this._konvaTransformer.nodes([]);
-    Object.keys(MarkupMode2Konva).forEach((mode) => this.konvaLayerFind(mode).forEach((ref) => ref.destroy()));
+    this.clearSelected();
+    this.getObjects().forEach((obj) => obj.ref().destroy());
   }
 
   getMarkupColor(): { r: number; g: number; b: number } {
@@ -229,25 +233,21 @@ export class KonvaMarkup implements IMarkup {
     this._markupColor.setColor(r, g, b);
   }
 
-  colorizeAllMarkup(r = 255, g = 0, b = 0): void {
-    const hex = new MarkupColor(r, g, b).HexColor;
-    Object.keys(MarkupMode2Konva).forEach((mode) => {
-      this.konvaLayerFind(mode).forEach((ref) => {
-        const konvaShape = MarkupMode2Konva[mode];
-        const konvaObj = konvaShape.initializer(ref);
-        if (konvaObj.setColor) konvaObj.setColor(hex);
-      });
+  colorizeAllMarkup(r: number, g: number, b: number): void {
+    const hexColor = new MarkupColor(r, g, b).HexColor;
+    this.getObjects().forEach((obj) => {
+      const colorable = obj as unknown as IMarkupColorable;
+      if (colorable && colorable.setColor) colorable.setColor(hexColor);
     });
 
     this._konvaLayer.draw();
   }
 
   colorizeSelectedMarkups(r: number, g: number, b: number): void {
+    const hexColor = new MarkupColor(r, g, b).HexColor;
     this.getSelectedObjects().forEach((obj) => {
       const colorable = obj as unknown as IMarkupColorable;
-      if (colorable && colorable.setColor) {
-        colorable.setColor(new MarkupColor(r, g, b).HexColor);
-      }
+      if (colorable && colorable.setColor) colorable.setColor(hexColor);
     });
   }
 
@@ -295,115 +295,39 @@ export class KonvaMarkup implements IMarkup {
   }
 
   createObject(type: string, params: any): IMarkupObject {
-    let object = null;
-    let zIndex = this._zIndex;
-
-    // TODO: factory?
-    switch (type.toLocaleLowerCase()) {
-      case "line":
-        object = new KonvaLine(params);
-        zIndex = 1;
-        break;
-      case "text":
-        object = new KonvaText(params);
-        break;
-      case "rectangle":
-        object = new KonvaRectangle(params);
-        zIndex = 1;
-        break;
-      case "ellipse":
-        object = new KonvaEllipse(params);
-        zIndex = 1;
-        break;
-      case "arrow":
-        object = new KonvaArrow(params);
-        break;
-      case "image":
-        object = new KonvaImage(params);
-        zIndex = 0;
-        break;
-      case "cloud":
-        object = new KonvaCloud(params);
-        zIndex = 1;
-        break;
-      default:
-        throw new Error("Markup CreateObject - unsupported type has been detected.");
-    }
+    const konvaShape = MarkupMode2Konva[type];
+    if (!konvaShape || !konvaShape.initializer)
+      throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
 
+    const object = konvaShape.initializer(null, params);
     this.addObject(object);
 
-    // Set zIndex only when shape has been added to Layer else we will get "Konva warning: Node has no parent. zIndex parameter is ignored."
-    object.setZIndex(zIndex);
+    // Set zIndex only when shape has been added to Layer else we will get
+    // "Konva warning: Node has no parent. zIndex parameter is ignored."
+    object.setZIndex(konvaShape.zIndex ?? this._zIndex);
     this._zIndex++;
+
     return object;
   }
 
   getObjects(): IMarkupObject[] {
     const objects = [];
-    this.konvaLayerFind("Line").forEach((line) => {
-      objects.push(new KonvaLine(null, line));
+    Object.keys(MarkupMode2Konva).forEach((type) => {
+      const konvaShape = MarkupMode2Konva[type];
+      this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
     });
-
-    this.konvaLayerFind("Text").forEach((text) => {
-      objects.push(new KonvaText(null, text));
-    });
-
-    this.konvaLayerFind("Rectangle").forEach((rectangle) => {
-      objects.push(new KonvaRectangle(null, rectangle));
-    });
-
-    this.konvaLayerFind("Ellipse").forEach((ellipse) => {
-      objects.push(new KonvaEllipse(null, ellipse));
-    });
-
-    this.konvaLayerFind("Arrow").forEach((arrow) => {
-      objects.push(new KonvaArrow(null, arrow));
-    });
-
-    this.konvaLayerFind("Image").forEach((image) => {
-      objects.push(new KonvaImage(null, image));
-    });
-
-    this.konvaLayerFind("Cloud").forEach((cloud) => {
-      objects.push(new KonvaCloud(null, cloud));
-    });
-
     return objects;
   }
 
   getSelectedObjects(): IMarkupObject[] {
-    const objects = [];
-
-    this._konvaTransformer.nodes().forEach((obj) => {
-      const konvaShapeName = obj.className;
-      switch (konvaShapeName) {
-        case "Line":
-          objects.push(new KonvaLine(null, obj));
-          break;
-        case "Text":
-          objects.push(new KonvaText(null, obj));
-          break;
-        case "Rect":
-          objects.push(new KonvaRectangle(null, obj));
-          break;
-        case "Ellipse":
-          objects.push(new KonvaEllipse(null, obj));
-          break;
-        case "Arrow":
-          objects.push(new KonvaArrow(null, obj));
-          break;
-        case "Image":
-          objects.push(new KonvaImage(null, obj));
-          break;
-        case "Cloud":
-          objects.push(new KonvaCloud(null, obj));
-          break;
-        default:
-          break;
-      }
-    });
-
-    return objects;
+    return this._konvaTransformer
+      .nodes()
+      .map((ref) => {
+        const name = ref.className;
+        const konvaShape = Object.values(MarkupMode2Konva).find((shape) => shape.name === name);
+        return konvaShape ? konvaShape.initializer(ref) : null;
+      })
+      .filter((x) => x);
   }
 
   selectObjects(objects: IMarkupObject[]) {
@@ -415,10 +339,6 @@ export class KonvaMarkup implements IMarkup {
     this._konvaTransformer.nodes([]);
   }
 
-  private getPoint3dFromArray(array) {
-    return { x: array[0], y: array[1], z: array[2] };
-  }
-
   private fillViewpointShapes(viewpoint) {
     const markupLines = this.getMarkupLines();
     if (markupLines && markupLines.length > 0) {
@@ -474,8 +394,8 @@ export class KonvaMarkup implements IMarkup {
     this._konvaLayer.add(object.ref());
   }
 
-  private konvaLayerFind(markupShape: string): any {
-    const konvaShape = MarkupMode2Konva[markupShape];
+  private konvaLayerFind(type: string): any {
+    const konvaShape = MarkupMode2Konva[type];
     if (konvaShape && konvaShape.initializer) {
       // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from layer.
       return this._konvaLayer.find(konvaShape.name).filter((ref) => ref.parent === this._konvaLayer);
@@ -739,7 +659,7 @@ export class KonvaMarkup implements IMarkup {
       const konvaLine = new KonvaLine(null, line);
       lines.push({
         id: konvaLine.id(),
-        points: worldPoints.map((p) => this.getPoint3dFromArray(p)),
+        points: worldPoints,
         color: konvaLine.getColor() || "#ff0000",
         type: konvaLine.getLineType() || this.lineType,
         width: konvaLine.getLineWidth() || this.lineWidth,
@@ -758,15 +678,13 @@ export class KonvaMarkup implements IMarkup {
     this.konvaLayerFind("Text").forEach((text) => {
       if (!text) return;
 
-      const position = this._worldTransformer.screenToWorld({
-        x: text.x(),
-        y: text.y(),
-      });
+      const position = { x: text.x(), y: text.y() };
+      const worldPoint = this._worldTransformer.screenToWorld(position);
 
       const shape = new KonvaText(null, text);
       texts.push({
         id: shape.id(),
-        position: this.getPoint3dFromArray(position),
+        position: worldPoint,
         text: shape.getText(),
         text_size: textSize * textScale.y,
         angle: shape.getRotation(),
@@ -787,7 +705,7 @@ export class KonvaMarkup implements IMarkup {
       const shape = new KonvaRectangle(null, rect);
       rectangles.push({
         id: shape.id(),
-        position: this.getPoint3dFromArray(worldPoint),
+        position: worldPoint,
         width: shape.getWidth(),
         height: shape.getHeigth(),
         line_width: shape.getLineWidth(),
@@ -807,7 +725,7 @@ export class KonvaMarkup implements IMarkup {
       const shape = new KonvaEllipse(null, ellipse);
       ellipses.push({
         id: shape.id(),
-        position: this.getPoint3dFromArray(worldPoint),
+        position: worldPoint,
         radius: { x: ellipse.getRadiusX(), y: ellipse.getRadiusY() },
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
@@ -832,8 +750,8 @@ export class KonvaMarkup implements IMarkup {
       const shape = new KonvaArrow(null, arrow);
       arrows.push({
         id: shape.id(),
-        start: this.getPoint3dFromArray(worldStartPoint),
-        end: this.getPoint3dFromArray(worldEndPoint),
+        start: worldStartPoint,
+        end: worldEndPoint,
         color: shape.getColor(),
       });
     });
@@ -850,7 +768,7 @@ export class KonvaMarkup implements IMarkup {
       const shape = new KonvaImage(null, image);
       images.push({
         id: shape.id(),
-        position: this.getPoint3dFromArray(worldPoint),
+        position: worldPoint,
         src: shape.getSrc(),
         width: shape.getWidth(),
         height: shape.getHeight(),
@@ -869,7 +787,7 @@ export class KonvaMarkup implements IMarkup {
       const shape = new KonvaCloud(null, cloud);
       clouds.push({
         id: shape.id(),
-        position: this.getPoint3dFromArray(worldPoint),
+        position: worldPoint,
         width: shape.getWidth(),
         height: shape.getHeigth(),
         line_width: shape.getLineWidth(),

package/src/markup/WorldTransform.ts

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+export class WorldTransform {
+  screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
+    return { x: position.x, y: position.y, z: 0 };
+  }
+
+  worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
+    return { x: position.x, y: position.y };
+  }
+
+  getScale(): { x: number; y: number; z: number } {
+    return { x: 1, y: 1, z: 1 };
+  }
+}