@inweb/markup 25.8.0 → 25.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.8.0",
+  "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.8.0",
-    "@inweb/viewer-core": "~25.8.0"
+    "@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";
@@ -123,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 ?? [];
 
@@ -338,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) {
@@ -662,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,
@@ -681,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(),
@@ -710,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(),
@@ -730,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(),
@@ -755,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(),
       });
     });
@@ -773,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(),
@@ -792,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 };
+  }
+}