@inweb/markup 25.7.9 → 25.8.0

package/package.json

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

package/src/markup/IMarkup.ts

@@ -132,6 +132,14 @@ export interface IMarkup {
    */
   getViewpoint(): IViewpoint;
 
+  /**
+   * Enables mouse interactions to select or draw markups.
+   *
+   * @param mode - Edit mode. Matches the type of markup object being created or object
+   *   selecting mode. To exit edit mode provide this to `false`.
+   */
+  enableEditMode(mode: MarkupMode | false): this;
+
   /**
    * Create a Markup object.
    *

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 } from "../IMarkup";
+import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
 import { IMarkupColorable } from "../IMarkupColorable";
@@ -46,31 +46,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,
   },
 };
 
@@ -84,7 +90,7 @@ export class KonvaMarkup implements IMarkup {
   private _container: HTMLElement;
   private _pointerEvents: string[];
   private _markupIsActive = false;
-  private _markupMode: string;
+  private _markupMode: MarkupMode;
   private _markupColor = new MarkupColor(255, 0, 0);
   private _konvaStage: Konva.Stage;
   private _konvaLayer: Konva.Layer;
@@ -187,14 +193,7 @@ export class KonvaMarkup implements IMarkup {
     this.removeTextInput();
     this.removeImageInput();
 
-    const konvaShape = MarkupMode2Konva[draggerName];
-    if (konvaShape) {
-      this._markupMode = draggerName;
-      this._markupIsActive = true;
-    } else {
-      this._markupIsActive = false;
-      this._konvaTransformer.nodes([]);
-    }
+    this.enableEditMode(draggerName as MarkupMode);
   };
 
   resizeContainer = (entries: ResizeObserverEntry[]) => {
@@ -209,10 +208,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) => {
@@ -224,8 +220,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 } {
@@ -236,25 +232,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);
     });
   }
 
@@ -290,116 +282,51 @@ export class KonvaMarkup implements IMarkup {
     return viewpoint;
   }
 
-  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.");
+  enableEditMode(mode: MarkupMode | false): this {
+    if (!mode || !MarkupMode2Konva[mode]) {
+      this.clearSelected();
+      this._markupIsActive = false;
+    } else {
+      this._markupMode = mode;
+      this._markupIsActive = true;
     }
+    return this;
+  }
 
+  createObject(type: string, params: any): IMarkupObject {
+    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));
-    });
-
-    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));
+    Object.keys(MarkupMode2Konva).forEach((type) => {
+      const konvaShape = MarkupMode2Konva[type];
+      this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
     });
-
     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[]) {
@@ -470,8 +397,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);