@inweb/markup 25.8.1 → 25.8.3

package/package.json

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

package/src/markup/Konva/KonvaMarkup.ts

@@ -23,12 +23,22 @@
 
 import Konva from "konva";
 import { IEventEmitter } from "@inweb/eventemitter2";
-import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
+import {
+  ChangeActiveDraggerEvent,
+  IArrow,
+  ICloud,
+  IEllipse,
+  IImage,
+  ILine,
+  IRectangle,
+  IText,
+  IViewpoint,
+  PanEvent,
+} from "@inweb/viewer-core";
 
 import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
-import { IMarkupColorable } from "../IMarkupColorable";
 import { MarkupLineType } from "../IMarkupLine";
 import { MarkupColor } from "./MarkupColor";
 import { WorldTransform } from "../WorldTransform";
@@ -235,49 +245,73 @@ export class KonvaMarkup implements IMarkup {
 
   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();
+    this.getObjects().filter((obj: any) => obj.setColor?.(hexColor));
   }
 
   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(hexColor);
-    });
+    this.getSelectedObjects().filter((obj: any) => obj.setColor?.(hexColor));
   }
 
   setViewpoint(viewpoint: IViewpoint): void {
-    const markupColor = viewpoint.custom_fields.markup_color || { r: 255, g: 0, b: 0 };
+    const markupColor = viewpoint.custom_fields?.markup_color || { r: 255, g: 0, b: 0 };
     this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
 
-    this.loadMarkup(viewpoint);
+    viewpoint.lines?.forEach((line: ILine) => {
+      const linePoints = [];
+      line.points.forEach((point) => {
+        const screenPoint = this._worldTransformer.worldToScreen(point);
+        linePoints.push(screenPoint.x);
+        linePoints.push(screenPoint.y);
+      });
+      this.addLine(linePoints, line.color, line.type as MarkupLineType, line.width, line.id);
+    });
+
+    viewpoint.texts?.forEach((text: IText) => {
+      const screenPoint = this._worldTransformer.worldToScreen(text.position);
+      this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
+    });
+
+    viewpoint.rectangles?.forEach((rect: IRectangle) => {
+      const screenPoint = this._worldTransformer.worldToScreen(rect.position);
+      this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+    });
+
+    viewpoint.ellipses?.forEach((ellipse: IEllipse) => {
+      const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
+      this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+    });
+
+    viewpoint.arrows?.forEach((arrow: IArrow) => {
+      const startPoint = this._worldTransformer.worldToScreen(arrow.start);
+      const endPoint = this._worldTransformer.worldToScreen(arrow.end);
+      this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
+    });
+
+    viewpoint.clouds?.forEach((cloud: ICloud) => {
+      const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
+      this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+    });
+
+    viewpoint.images?.forEach((image: IImage) => {
+      const screenPoint = this._worldTransformer.worldToScreen(image.position);
+      this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+    });
   }
 
   getViewpoint(): IViewpoint {
-    const viewpoint: IViewpoint = {
-      lines: [],
-      texts: [],
-      arrows: [],
-      clouds: [],
-      ellipses: [],
-      images: [],
-      rectangles: [],
-    };
-
-    viewpoint.snapshot = {
-      data: this.combineMarkupWithDrawing(),
-    };
-
-    viewpoint.custom_fields = {
-      markup_color: this.getMarkupColor(),
-    };
-
-    this.fillViewpointShapes(viewpoint);
+    const viewpoint: IViewpoint = {};
+
+    viewpoint.lines = this.getMarkupLines();
+    viewpoint.texts = this.getMarkupTexts();
+    viewpoint.arrows = this.getMarkupArrows();
+    viewpoint.clouds = this.getMarkupClouds();
+    viewpoint.ellipses = this.getMarkupEllipses();
+    viewpoint.images = this.getMarkupImages();
+    viewpoint.rectangles = this.getMarkupRectangles();
+
+    viewpoint.custom_fields = { markup_color: this.getMarkupColor() };
+    viewpoint.snapshot = { data: this.combineMarkupWithDrawing() };
 
     viewpoint.description = new Date().toDateString();
     return viewpoint;
@@ -339,57 +373,6 @@ export class KonvaMarkup implements IMarkup {
     this._konvaTransformer.nodes([]);
   }
 
-  private fillViewpointShapes(viewpoint) {
-    const markupLines = this.getMarkupLines();
-    if (markupLines && markupLines.length > 0) {
-      markupLines?.forEach((line) => {
-        viewpoint.lines.push(line);
-      });
-    }
-
-    const markupTexts = this.getMarkupTexts();
-    if (markupTexts && markupTexts.length > 0) {
-      markupTexts?.forEach((text) => {
-        viewpoint.texts.push(text);
-      });
-    }
-
-    const markupRectangles = this.getMarkupRectangles();
-    if (markupRectangles && markupRectangles.length > 0) {
-      markupRectangles?.forEach((rectangle) => {
-        viewpoint.rectangles.push(rectangle);
-      });
-    }
-
-    const markupEllipses = this.getMarkupEllipses();
-    if (markupEllipses && markupEllipses.length > 0) {
-      markupEllipses?.forEach((ellipse) => {
-        viewpoint.ellipses.push(ellipse);
-      });
-    }
-
-    const markupArrows = this.getMarkupArrows();
-    if (markupArrows && markupArrows.length > 0) {
-      markupArrows?.forEach((arrow) => {
-        viewpoint.arrows.push(arrow);
-      });
-    }
-
-    const markupImages = this.getMarkupImages();
-    if (markupImages && markupImages.length > 0) {
-      markupImages?.forEach((image) => {
-        viewpoint.images.push(image);
-      });
-    }
-
-    const markupClouds = this.getMarkupClouds();
-    if (markupClouds && markupClouds.length > 0) {
-      markupClouds?.forEach((cloud) => {
-        viewpoint.clouds.push(cloud);
-      });
-    }
-  }
-
   private addObject(object: IMarkupObject): void {
     this._konvaLayer.add(object.ref());
   }
@@ -640,13 +623,15 @@ export class KonvaMarkup implements IMarkup {
     this._konvaStage = undefined;
   }
 
-  private getMarkupLines() {
+  private getMarkupLines(): Array<ILine> {
     const lines = [];
-    this.konvaLayerFind("Line").forEach((line) => {
-      const linePoints = line.points();
+
+    this.konvaLayerFind("Line").forEach((ref) => {
+      const linePoints = ref.points();
       if (!linePoints) return;
+
       const worldPoints = [];
-      const absoluteTransform = line.getAbsoluteTransform();
+      const absoluteTransform = ref.getAbsoluteTransform();
       for (let i = 0; i < linePoints.length; i += 2) {
         // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
         // https://stackoverflow.com/a/57641487 - check answer's comments
@@ -656,33 +641,33 @@ export class KonvaMarkup implements IMarkup {
         worldPoints.push(worldPoint);
       }
 
-      const konvaLine = new KonvaLine(null, line);
-      lines.push({
+      const konvaLine = new KonvaLine(null, ref);
+      const line: ILine = {
         id: konvaLine.id(),
         points: worldPoints,
         color: konvaLine.getColor() || "#ff0000",
         type: konvaLine.getLineType() || this.lineType,
         width: konvaLine.getLineWidth() || this.lineWidth,
-      });
+      };
+
+      lines.push(line);
     });
 
     return lines;
   }
 
-  private getMarkupTexts() {
+  private getMarkupTexts(): Array<IText> {
     const texts = [];
 
     const textSize = 0.02;
     const textScale = this._worldTransformer.getScale();
 
-    this.konvaLayerFind("Text").forEach((text) => {
-      if (!text) return;
-
-      const position = { x: text.x(), y: text.y() };
+    this.konvaLayerFind("Text").forEach((ref) => {
+      const position = { x: ref.x(), y: ref.y() };
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaText(null, text);
-      texts.push({
+      const shape = new KonvaText(null, ref);
+      const text: IText = {
         id: shape.id(),
         position: worldPoint,
         text: shape.getText(),
@@ -690,156 +675,129 @@ export class KonvaMarkup implements IMarkup {
         angle: shape.getRotation(),
         color: shape.getColor(),
         font_size: shape.getFontSize(),
-      });
+      };
+
+      texts.push(text);
     });
 
     return texts;
   }
 
-  private getMarkupRectangles() {
+  private getMarkupRectangles(): Array<IRectangle> {
     const rectangles = [];
-    this.konvaLayerFind("Rectangle").forEach((rect) => {
-      const position = rect.position();
+
+    this.konvaLayerFind("Rectangle").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaRectangle(null, rect);
-      rectangles.push({
+      const shape = new KonvaRectangle(null, ref);
+      const rectangle: IRectangle = {
         id: shape.id(),
         position: worldPoint,
         width: shape.getWidth(),
         height: shape.getHeigth(),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
-      });
+      };
+
+      rectangles.push(rectangle);
     });
 
     return rectangles;
   }
 
-  private getMarkupEllipses() {
+  private getMarkupEllipses(): Array<IEllipse> {
     const ellipses = [];
-    this.konvaLayerFind("Ellipse").forEach((ellipse) => {
-      const position = ellipse.position();
+
+    this.konvaLayerFind("Ellipse").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaEllipse(null, ellipse);
-      ellipses.push({
+      const shape = new KonvaEllipse(null, ref);
+      const ellipse: IEllipse = {
         id: shape.id(),
         position: worldPoint,
-        radius: { x: ellipse.getRadiusX(), y: ellipse.getRadiusY() },
+        radius: { x: ref.getRadiusX(), y: ref.getRadiusY() },
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
-      });
+      };
+
+      ellipses.push(ellipse);
     });
 
     return ellipses;
   }
 
-  private getMarkupArrows() {
+  private getMarkupArrows(): Array<IArrow> {
     const arrows = [];
-    this.konvaLayerFind("Arrow").forEach((arrow) => {
+
+    this.konvaLayerFind("Arrow").forEach((ref) => {
       // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-      const absoluteTransform = arrow.getAbsoluteTransform();
+      const absoluteTransform = ref.getAbsoluteTransform();
 
-      const atStartPoint = absoluteTransform.point({ x: arrow.points()[0], y: arrow.points()[1] });
+      const atStartPoint = absoluteTransform.point({ x: ref.points()[0], y: ref.points()[1] });
       const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
 
-      const atEndPoint = absoluteTransform.point({ x: arrow.points()[2], y: arrow.points()[3] });
+      const atEndPoint = absoluteTransform.point({ x: ref.points()[2], y: ref.points()[3] });
       const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
 
-      const shape = new KonvaArrow(null, arrow);
-      arrows.push({
+      const shape = new KonvaArrow(null, ref);
+      const arrow: IArrow = {
         id: shape.id(),
         start: worldStartPoint,
         end: worldEndPoint,
         color: shape.getColor(),
-      });
+      };
+
+      arrows.push(arrow);
     });
 
     return arrows;
   }
 
-  private getMarkupImages() {
+  private getMarkupImages(): Array<IImage> {
     const images = [];
-    this.konvaLayerFind("Image").forEach((image) => {
-      const position = image.position();
+
+    this.konvaLayerFind("Image").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaImage(null, image);
-      images.push({
+      const shape = new KonvaImage(null, ref);
+      const image: IImage = {
         id: shape.id(),
         position: worldPoint,
         src: shape.getSrc(),
         width: shape.getWidth(),
         height: shape.getHeight(),
-      });
+      };
+
+      images.push(image);
     });
 
     return images;
   }
 
-  private getMarkupClouds() {
+  private getMarkupClouds(): Array<ICloud> {
     const clouds = [];
-    this.konvaLayerFind("Cloud").forEach((cloud) => {
-      const position = cloud.position();
+
+    this.konvaLayerFind("Cloud").forEach((ref) => {
+      const position = ref.position();
       const worldPoint = this._worldTransformer.screenToWorld(position);
 
-      const shape = new KonvaCloud(null, cloud);
-      clouds.push({
+      const shape = new KonvaCloud(null, ref);
+      const cloud: ICloud = {
         id: shape.id(),
         position: worldPoint,
         width: shape.getWidth(),
         height: shape.getHeigth(),
         line_width: shape.getLineWidth(),
         color: shape.getColor(),
-      });
-    });
-
-    return clouds;
-  }
-
-  private loadMarkup(viewpoint: IViewpoint) {
-    viewpoint.lines?.forEach((vpLine) => {
-      const linePoints = [];
-      vpLine.points.forEach((point) => {
-        const screenPoint = this._worldTransformer.worldToScreen(point);
-        linePoints.push(screenPoint.x);
-        linePoints.push(screenPoint.y);
-      });
-
-      this.addLine(linePoints, vpLine.color, vpLine.type as MarkupLineType, vpLine.width, vpLine.id);
-    });
-
-    viewpoint.texts?.forEach((vpText) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpText.position);
-      this.addText(vpText.text, screenPoint, vpText.angle, vpText.color, vpText.text_size, vpText.font_size, vpText.id);
-    });
-
-    viewpoint.rectangles?.forEach((vpRect) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpRect.position);
-      this.addRectangle(screenPoint, vpRect.width, vpRect.height, vpRect.line_width, vpRect.color, vpRect.id);
-    });
-
-    viewpoint.ellipses?.forEach((vpEllipse) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpEllipse.position);
-      this.addEllipse(screenPoint, vpEllipse.radius, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
-    });
-
-    viewpoint.arrows?.forEach((vpArrow) => {
-      const startPoint = this._worldTransformer.worldToScreen(vpArrow.start);
-      const endPoint = this._worldTransformer.worldToScreen(vpArrow.end);
-      this.addArrow(startPoint, endPoint, vpArrow.color, vpArrow.id);
-    });
+      };
 
-    viewpoint.clouds?.forEach((vpCloud) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpCloud.position);
-      this.addCloud(screenPoint, vpCloud.width, vpCloud.height, vpCloud.line_width, vpCloud.color, vpCloud.id);
+      clouds.push(cloud);
     });
 
-    viewpoint.images?.forEach((vpImage) => {
-      const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
-      this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
-    });
+    return clouds;
   }
 
   private combineMarkupWithDrawing() {
@@ -878,8 +836,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaLine.ref();
-    this._konvaLayer.add(obj);
+    this._konvaLayer.add(konvaLine.ref());
     return konvaLine;
   }
 
@@ -976,6 +933,8 @@ export class KonvaMarkup implements IMarkup {
     fontSize?: number,
     id?: string
   ): KonvaText | void {
+    if (!specifiedText) return;
+
     const trNodes = this._konvaTransformer.nodes();
     if (trNodes.length > 0) {
       // in case of edit - remove old Konva.Text object
@@ -985,28 +944,25 @@ export class KonvaMarkup implements IMarkup {
 
     this.removeTextInput();
 
-    if (specifiedText) {
-      const tolerance = 1.0e-6;
-
-      // in case we have old viewpoint without font_size
-      if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
-        const size = 0.02;
-        const scale = this._worldTransformer.getScale();
-        fontSize = textSize / (scale.y / size) / 34;
-      }
+    // in case we have old viewpoint without font_size
+    const tolerance = 1.0e-6;
+    if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+      const size = 0.02;
+      const scale = this._worldTransformer.getScale();
+      fontSize = textSize / (scale.y / size) / 34;
+    }
 
-      const konvaText = new KonvaText({
-        position: { x: position.x, y: position.y },
-        text: specifiedText,
-        rotation: angle,
-        fontSize: fontSize || this.fontSize,
-        color: color || this._markupColor.HexColor,
-        id,
-      });
+    const konvaText = new KonvaText({
+      position: { x: position.x, y: position.y },
+      text: specifiedText,
+      rotation: angle,
+      fontSize: fontSize || this.fontSize,
+      color: color || this._markupColor.HexColor,
+      id,
+    });
 
-      this._konvaLayer.add(konvaText.ref());
-      return konvaText;
-    }
+    this._konvaLayer.add(konvaText.ref());
+    return konvaText;
   }
 
   private addRectangle(
@@ -1028,8 +984,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaRectangle.ref();
-    this._konvaLayer.add(obj);
+    this._konvaLayer.add(konvaRectangle.ref());
     return konvaRectangle;
   }
 
@@ -1050,8 +1005,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaEllipse.ref();
-    this._konvaLayer.add(obj);
+    this._konvaLayer.add(konvaEllipse.ref());
     return konvaEllipse;
   }
 
@@ -1070,8 +1024,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaArrow.ref();
-    this._konvaLayer.add(obj);
+    this._konvaLayer.add(konvaArrow.ref());
     return konvaArrow;
   }
 
@@ -1094,8 +1047,7 @@ export class KonvaMarkup implements IMarkup {
       id,
     });
 
-    const obj = konvaCloud.ref();
-    this._konvaLayer.add(obj);
+    this._konvaLayer.add(konvaCloud.ref());
     return konvaCloud;
   }
 
@@ -1106,32 +1058,26 @@ export class KonvaMarkup implements IMarkup {
     height?: number,
     id?: string
   ): KonvaImage | void {
-    if (!position) return;
+    if (!position || !src) return;
 
-    let konvaImage: KonvaImage;
-
-    if (src) {
-      konvaImage = new KonvaImage({
-        position,
-        src,
-        width,
-        height,
-        id,
-      });
-
-      const obj = konvaImage.ref();
-      this._konvaLayer.add(obj);
-
-      const trNodes = this._konvaTransformer.nodes();
-      if (trNodes.length > 0) {
-        // in case of edit - remove old Image placeholder object
-        trNodes[0].destroy();
-        this._konvaTransformer.nodes([]);
-      }
+    const trNodes = this._konvaTransformer.nodes();
+    if (trNodes.length > 0) {
+      // in case of edit - remove old Image placeholder object
+      trNodes[0].destroy();
+      this._konvaTransformer.nodes([]);
     }
 
     this.removeImageInput();
 
+    const konvaImage = new KonvaImage({
+      position,
+      src,
+      width,
+      height,
+      id,
+    });
+
+    this._konvaLayer.add(konvaImage.ref());
     return konvaImage;
   }
 }

package/src/markup/WorldTransform.ts

@@ -21,7 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-export class WorldTransform {
+import { IWorldTransform } from "./IWorldTransform";
+
+export class WorldTransform implements IWorldTransform {
   screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
     return { x: position.x, y: position.y, z: 0 };
   }