@inweb/markup 25.7.4 → 25.7.5

package/lib/markup/IMarkup.d.ts

@@ -3,19 +3,9 @@ import { IViewpoint } from "@inweb/viewer-core";
 import { IWorldTransform } from "./IWorldTransform";
 import { IMarkupObject } from "./IMarkupObject";
 /**
- * Defines type of markup object. For `VisualizeJS` markup only the `Line` and `Text` markup
- * objects are supported.
+ * Markup edit mode. Matches the type of markup object being created or object selecting mode.
  */
-export declare enum MarkupMode {
-    SelectMarkup = "SelectMarkup",
-    Line = "Line",
-    Text = "Text",
-    Rectangle = "Rectangle",
-    Ellipse = "Ellipse",
-    Arrow = "Arrow",
-    Image = "Image",
-    Cloud = "Cloud"
-}
+export type MarkupMode = "SelectMarkup" | "Line" | "Text" | "Rectangle" | "Ellipse" | "Arrow" | "Image" | "Cloud";
 /**
  * 2D markup core interface.
  */

package/package.json

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

package/src/markup/IMarkup.ts

@@ -27,19 +27,9 @@ import { IWorldTransform } from "./IWorldTransform";
 import { IMarkupObject } from "./IMarkupObject";
 
 /**
- * Defines type of markup object. For `VisualizeJS` markup only the `Line` and `Text` markup
- * objects are supported.
+ * Markup edit mode. Matches the type of markup object being created or object selecting mode.
  */
-export enum MarkupMode {
-  SelectMarkup = "SelectMarkup",
-  Line = "Line",
-  Text = "Text",
-  Rectangle = "Rectangle",
-  Ellipse = "Ellipse",
-  Arrow = "Arrow",
-  Image = "Image",
-  Cloud = "Cloud",
-}
+export type MarkupMode = "SelectMarkup" | "Line" | "Text" | "Rectangle" | "Ellipse" | "Arrow" | "Image" | "Cloud";
 
 /**
  * 2D markup core interface.

package/src/markup/Konva/KonvaMarkup.ts

@@ -25,7 +25,7 @@ import Konva from "konva";
 import { IEventEmitter } from "@inweb/eventemitter2";
 import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
 
-import { IMarkup, MarkupMode } from "../IMarkup";
+import { IMarkup } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { MarkupColor } from "./MarkupColor";
 import { IMarkupObject } from "../IMarkupObject";
@@ -45,84 +45,40 @@ import { IMarkupCloud } from "../IMarkupCloud";
 import { IMarkupImage } from "../IMarkupImage";
 import { IMarkupText } from "../IMarkupText";
 
-class KonvaShape {
-  name: string;
-  initializer: (ref: any) => any;
-}
-
-// move to separate class and create factory with enum?
-const MarkupMode2Konva = new Map<MarkupMode, KonvaShape>([
-  [
-    MarkupMode.SelectMarkup,
-    {
-      name: "SelectMarkup",
-      initializer: () => {},
-    },
-  ],
-  [
-    MarkupMode.Line,
-    {
-      name: "Line",
-      initializer: (ref) => {
-        return new KonvaLine(null, ref);
-      },
-    },
-  ],
-  [
-    MarkupMode.Text,
-    {
-      name: "Text",
-      initializer: (ref) => {
-        return new KonvaText(null, ref);
-      },
-    },
-  ],
-  [
-    MarkupMode.Rectangle,
-    {
-      name: "Rect",
-      initializer: (ref) => {
-        return new KonvaRectangle(null, ref);
-      },
-    },
-  ],
-  [
-    MarkupMode.Ellipse,
-    {
-      name: "Ellipse",
-      initializer: (ref) => {
-        return new KonvaEllipse(null, ref);
-      },
-    },
-  ],
-  [
-    MarkupMode.Arrow,
-    {
-      name: "Arrow",
-      initializer: (ref) => {
-        return new KonvaArrow(null, ref);
-      },
-    },
-  ],
-  [
-    MarkupMode.Image,
-    {
-      name: "Image",
-      initializer: (ref) => {
-        return new KonvaImage(null, ref);
-      },
-    },
-  ],
-  [
-    MarkupMode.Cloud,
-    {
-      name: "Cloud",
-      initializer: (ref) => {
-        return new KonvaCloud(null, ref);
-      },
-    },
-  ],
-]);
+const MarkupMode2Konva = {
+  SelectMarkup: {
+    name: "SelectMarkup",
+    initializer: null,
+  },
+  Line: {
+    name: "Line",
+    initializer: (ref: any) => new KonvaLine(null, ref),
+  },
+  Text: {
+    name: "Text",
+    initializer: (ref: any) => new KonvaText(null, ref),
+  },
+  Rectangle: {
+    name: "Rect",
+    initializer: (ref: any) => new KonvaRectangle(null, ref),
+  },
+  Ellipse: {
+    name: "Ellipse",
+    initializer: (ref: any) => new KonvaEllipse(null, ref),
+  },
+  Arrow: {
+    name: "Arrow",
+    initializer: (ref: any) => new KonvaArrow(null, ref),
+  },
+  Image: {
+    name: "Image",
+    initializer: (ref: any) => new KonvaImage(null, ref),
+  },
+  Cloud: {
+    name: "Cloud",
+    initializer: (ref: any) => new KonvaCloud(null, ref),
+  },
+};
 
 /**
  * 2D markup core.
@@ -134,7 +90,7 @@ export class KonvaMarkup implements IMarkup {
   private _canvasOriginal: HTMLCanvasElement;
   private _canvasEvents: string[];
   private _markupIsActive = false;
-  private _markupMode: MarkupMode;
+  private _markupMode: string;
   private _markupColor = new MarkupColor(255, 0, 0);
   private _konvaStage: Konva.Stage;
   private _konvaLayer: Konva.Layer;
@@ -234,10 +190,9 @@ export class KonvaMarkup implements IMarkup {
     this.removeTextInput();
     this.removeImageInput();
 
-    const markupMode = MarkupMode[draggerName];
-    const konvaMode = MarkupMode2Konva.get(markupMode);
-    if (konvaMode) {
-      this._markupMode = markupMode;
+    const konvaShape = MarkupMode2Konva[draggerName];
+    if (konvaShape) {
+      this._markupMode = draggerName;
       this._markupIsActive = true;
     } else {
       this._markupIsActive = false;
@@ -254,7 +209,9 @@ export class KonvaMarkup implements IMarkup {
     const dX = event.dX / window.devicePixelRatio;
     const dY = event.dY / window.devicePixelRatio;
 
-    Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.move({ x: dX, y: dY })));
+    Object.keys(MarkupMode2Konva).forEach((mode) =>
+      this.konvaLayerFind(mode).forEach((ref) => ref.move({ x: dX, y: dY }))
+    );
   };
 
   redirectToViewer = (event: any) => {
@@ -267,7 +224,7 @@ export class KonvaMarkup implements IMarkup {
     this.removeTextInput();
     this.removeImageInput();
     this._konvaTransformer.nodes([]);
-    Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.destroy()));
+    Object.keys(MarkupMode2Konva).forEach((mode) => this.konvaLayerFind(mode).forEach((ref) => ref.destroy()));
   }
 
   getMarkupColor(): { r: number; g: number; b: number } {
@@ -280,10 +237,11 @@ export class KonvaMarkup implements IMarkup {
 
   colorizeAllMarkup(r = 255, g = 0, b = 0): void {
     const hex = new MarkupColor(r, g, b).HexColor;
-    Object.values(MarkupMode).forEach((mode) => {
-      this.konvaLayerFind(mode).forEach((x) => {
-        const konvaObj = MarkupMode2Konva.get(mode)?.initializer(x);
-        if (konvaObj && konvaObj.setColor) konvaObj.setColor(hex);
+    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);
       });
     });
 
@@ -377,31 +335,31 @@ export class KonvaMarkup implements IMarkup {
 
   getObjects(): IMarkupObject[] {
     const objects = [];
-    this.konvaLayerFind(MarkupMode.Line).forEach((line) => {
+    this.konvaLayerFind("Line").forEach((line) => {
       objects.push(new KonvaLine(null, line));
     });
 
-    this.konvaLayerFind(MarkupMode.Text).forEach((text) => {
+    this.konvaLayerFind("Text").forEach((text) => {
       objects.push(new KonvaText(null, text));
     });
 
-    this.konvaLayerFind(MarkupMode.Rectangle).forEach((rectangle) => {
+    this.konvaLayerFind("Rectangle").forEach((rectangle) => {
       objects.push(new KonvaRectangle(null, rectangle));
     });
 
-    this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse) => {
+    this.konvaLayerFind("Ellipse").forEach((ellipse) => {
       objects.push(new KonvaEllipse(null, ellipse));
     });
 
-    this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow) => {
+    this.konvaLayerFind("Arrow").forEach((arrow) => {
       objects.push(new KonvaArrow(null, arrow));
     });
 
-    this.konvaLayerFind(MarkupMode.Image).forEach((image) => {
+    this.konvaLayerFind("Image").forEach((image) => {
       objects.push(new KonvaImage(null, image));
     });
 
-    this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud) => {
+    this.konvaLayerFind("Cloud").forEach((cloud) => {
       objects.push(new KonvaCloud(null, cloud));
     });
 
@@ -511,12 +469,11 @@ export class KonvaMarkup implements IMarkup {
     this._konvaLayer.add(object.ref());
   }
 
-  private konvaLayerFind(markupShape: MarkupMode): any {
-    const konvaShape = MarkupMode2Konva.get(markupShape);
-    if (konvaShape) {
-      // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from Layer.
-      const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x) => x.parent instanceof Konva.Layer);
-      return konvaShapes;
+  private konvaLayerFind(markupShape: string): any {
+    const konvaShape = MarkupMode2Konva[markupShape];
+    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);
     }
     return [];
   }
@@ -549,12 +506,7 @@ export class KonvaMarkup implements IMarkup {
 
     stage.on("mousedown touchstart", (e) => {
       // do nothing if we mousedown on any shape
-      if (
-        !this._markupIsActive ||
-        e.target !== stage ||
-        this._markupMode === MarkupMode.Text ||
-        this._markupMode === MarkupMode.Image
-      )
+      if (!this._markupIsActive || e.target !== stage || this._markupMode === "Text" || this._markupMode === "Image")
         return;
 
       if (e.target === stage && transformer.nodes().length > 0) {
@@ -565,10 +517,8 @@ export class KonvaMarkup implements IMarkup {
       const pos = stage.getPointerPosition();
       mouseDownPos = pos;
 
-      isPaint = [MarkupMode.Arrow, MarkupMode.Cloud, MarkupMode.Ellipse, MarkupMode.Line, MarkupMode.Rectangle].some(
-        (m) => m === this._markupMode
-      );
-      if (this._markupMode === MarkupMode.Line) {
+      isPaint = ["Arrow", "Cloud", "Ellipse", "Line", "Rectangle"].some((m) => m === this._markupMode);
+      if (this._markupMode === "Line") {
         // add point twice, so we have some drawings even on a simple click
         lastLine = this.addLine([pos.x, pos.y, pos.x, pos.y]);
       }
@@ -585,16 +535,16 @@ export class KonvaMarkup implements IMarkup {
         const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
         const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
         if (defParams) {
-          if (this._markupMode === MarkupMode.Rectangle) {
+          if (this._markupMode === "Rectangle") {
             this.addRectangle({ x: startX, y: startY }, dX, dY);
-          } else if (this._markupMode === MarkupMode.Ellipse) {
+          } else if (this._markupMode === "Ellipse") {
             this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
-          } else if (this._markupMode === MarkupMode.Arrow) {
+          } else if (this._markupMode === "Arrow") {
             this.addArrow(
               { x: mouseDownPos.x, y: mouseDownPos.y },
               { x: defParams ? mouseDownPos.x + 200 : pos.x, y: defParams ? startY : pos.y }
             );
-          } else if (this._markupMode === MarkupMode.Cloud) {
+          } else if (this._markupMode === "Cloud") {
             this.addCloud({ x: startX, y: startY }, Math.max(100, dX), Math.max(100, dY));
           }
         }
@@ -620,24 +570,24 @@ export class KonvaMarkup implements IMarkup {
       const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
       const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
 
-      if (this._markupMode === MarkupMode.Line) {
+      if (this._markupMode === "Line") {
         lastLine.addPoints([{ x: pos.x, y: pos.y }]);
-      } else if (this._markupMode === MarkupMode.Arrow) {
+      } else if (this._markupMode === "Arrow") {
         if (lastObj) lastObj.setEndPoint(pos.x, pos.y);
         else lastObj = this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: pos.x, y: pos.y });
-      } else if (this._markupMode === MarkupMode.Rectangle) {
+      } else if (this._markupMode === "Rectangle") {
         if (lastObj) {
           lastObj.setPosition(startX, startY);
           lastObj.setWidth(dX);
           lastObj.setHeight(dY);
         } else lastObj = this.addRectangle({ x: startX, y: startY }, dX, dY);
-      } else if (this._markupMode === MarkupMode.Ellipse) {
+      } else if (this._markupMode === "Ellipse") {
         if (lastObj) {
           lastObj.setPosition(startX, startY);
           lastObj.setRadiusX(dX);
           lastObj.setRadiusY(dY);
         } else lastObj = this.addEllipse({ x: startX, y: startY }, { x: dX, y: dY });
-      } else if (this._markupMode === MarkupMode.Cloud) {
+      } else if (this._markupMode === "Cloud") {
         if (lastObj) {
           lastObj.setPosition(startX, startY);
           lastObj.setWidth(Math.max(100, dX));
@@ -652,14 +602,14 @@ export class KonvaMarkup implements IMarkup {
 
       // if click on empty area - remove all selections
       if (e.target === stage) {
-        if (this._markupMode === MarkupMode.Text) {
+        if (this._markupMode === "Text") {
           if (this._textInputRef && this._textInputRef.value)
             this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
           else if (transformer.nodes().length === 0) {
             const pos = stage.getPointerPosition();
             this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
           }
-        } else if (this._markupMode === MarkupMode.Image) {
+        } else if (this._markupMode === "Image") {
           if (this._imageInputRef && this._imageInputRef.value)
             this.addImage(
               { x: this._imageInputPos.x, y: this._imageInputPos.y },
@@ -677,7 +627,7 @@ export class KonvaMarkup implements IMarkup {
         return;
       }
 
-      if (this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.SelectMarkup) {
+      if (this._markupMode === "Text" || this._markupMode === "SelectMarkup") {
         if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
           if (this._textInputRef && this._textInputRef.value)
             this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
@@ -695,7 +645,7 @@ export class KonvaMarkup implements IMarkup {
         }
       }
 
-      if (this._markupMode === MarkupMode.Image || this._markupMode === MarkupMode.SelectMarkup) {
+      if (this._markupMode === "Image" || this._markupMode === "SelectMarkup") {
         if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
           if (this._imageInputRef && this._imageInputRef.value)
             this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0);
@@ -767,7 +717,7 @@ export class KonvaMarkup implements IMarkup {
 
   private getMarkupLines() {
     const lines = [];
-    this.konvaLayerFind(MarkupMode.Line).forEach((line) => {
+    this.konvaLayerFind("Line").forEach((line) => {
       const linePoints = line.points();
       if (!linePoints) return;
       const worldPoints = [];
@@ -800,7 +750,7 @@ export class KonvaMarkup implements IMarkup {
     const textSize = 0.02;
     const textScale = this._worldTransformer.getScale();
 
-    this.konvaLayerFind(MarkupMode.Text).forEach((text) => {
+    this.konvaLayerFind("Text").forEach((text) => {
       if (!text) return;
 
       const position = this._worldTransformer.screenToWorld({
@@ -825,7 +775,7 @@ export class KonvaMarkup implements IMarkup {
 
   private getMarkupRectangles() {
     const rectangles = [];
-    this.konvaLayerFind(MarkupMode.Rectangle).forEach((rect) => {
+    this.konvaLayerFind("Rectangle").forEach((rect) => {
       const position = rect.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
@@ -845,7 +795,7 @@ export class KonvaMarkup implements IMarkup {
 
   private getMarkupEllipses() {
     const ellipses = [];
-    this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse) => {
+    this.konvaLayerFind("Ellipse").forEach((ellipse) => {
       const position = ellipse.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
@@ -864,7 +814,7 @@ export class KonvaMarkup implements IMarkup {
 
   private getMarkupArrows() {
     const arrows = [];
-    this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow) => {
+    this.konvaLayerFind("Arrow").forEach((arrow) => {
       // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
       const absoluteTransform = arrow.getAbsoluteTransform();
 
@@ -888,7 +838,7 @@ export class KonvaMarkup implements IMarkup {
 
   private getMarkupImages() {
     const images = [];
-    this.konvaLayerFind(MarkupMode.Image).forEach((image) => {
+    this.konvaLayerFind("Image").forEach((image) => {
       const position = image.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
@@ -907,7 +857,7 @@ export class KonvaMarkup implements IMarkup {
 
   private getMarkupClouds() {
     const clouds = [];
-    this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud) => {
+    this.konvaLayerFind("Cloud").forEach((cloud) => {
       const position = cloud.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);