@inweb/markup 25.7.10 → 25.8.0

package/src/markup/Konva/KonvaMarkup.ts

@@ -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,
   },
 };
 
@@ -202,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) => {
@@ -217,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 } {
@@ -229,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);
     });
   }
 
@@ -295,115 +294,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));
-    });
-
-    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));
+    Object.keys(MarkupMode2Konva).forEach((type) => {
+      const konvaShape = MarkupMode2Konva[type];
+      this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
     });
-
-    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[]) {
@@ -474,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);