@inweb/markup 26.4.1 → 26.5.0

package/lib/markup/IMarkupEllipse.d.ts

@@ -52,7 +52,22 @@ export interface IMarkupEllipseParams {
         y: number;
     };
     /**
-     * Screen radius of the ellipse along the X and Y axes.
+     * Screen coordinates of the center point (position) of the ellipse.
+     */
+    position2?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Screen coordinates of the center point (position) of the ellipse.
+     */
+    position3?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Screen radius of the ellipse along the X and Y axes. Ignored if {@link position2} and
+     * {@link position3} is defined.
      *
      * @default 25
      */

package/lib/markup/IMarkupImage.d.ts

@@ -56,21 +56,29 @@ export interface IMarkupImageParams {
         x: number;
         y: number;
     };
+    /**
+     * Screen coordinates of the bottom-right point (position) of the image. Specify 0 to set widt and
+     * height of the source image.
+     */
+    position2?: {
+        x: number;
+        y: number;
+    };
     /**
      * Image source as a base64-encoded
      * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL}.
      */
     src?: string;
     /**
-     * Width of the image. The original image is scaled to this width. Specify 0 to set width of the source
-     * image.
+     * Deprecated. Width of the image. The original image is scaled to this width. Specify 0 to set width
+     * of the source image. Ignored if {@link position2} is defined.
      *
      * @default 0
      */
     width?: number;
     /**
-     * Height of the image. The original image is scaled to this height. Specify 0 to set height of the
-     * source image.
+     * Deprecated. Height of the image. The original image is scaled to this height. Specify 0 to set
+     * height of the source image. Ignored if {@link position2} is defined.
      *
      * @default 0
      */

package/lib/markup/IMarkupRectangle.d.ts

@@ -59,13 +59,13 @@ export interface IMarkupRectangleParams {
         y: number;
     };
     /**
-     * Width of the rectangle.
+     * Width of the rectangle. Ignored if {@link position2} is defined.
      *
      * @default 200
      */
     width?: number;
     /**
-     * Height of the rectangle.
+     * Height of the rectangle. Ignored if {@link position2} is defined.
      *
      * @default 200
      */

package/lib/markup/Utils.d.ts

@@ -0,0 +1,7 @@
+export declare function getDistanceIn2D(p1: {
+    x: number;
+    y: number;
+}, p2: {
+    x: number;
+    y: number;
+}): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "26.4.1",
+  "version": "26.5.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": "~26.4.1",
-    "@inweb/viewer-core": "~26.4.1"
+    "@inweb/eventemitter2": "~26.5.0",
+    "@inweb/viewer-core": "~26.5.0"
   },
   "devDependencies": {
     "konva": "^9.3.18"

package/src/markup/IMarkupEllipse.ts

@@ -79,7 +79,18 @@ export interface IMarkupEllipseParams {
   position?: { x: number; y: number };
 
   /**
-   * Screen radius of the ellipse along the X and Y axes.
+   * Screen coordinates of the center point (position) of the ellipse.
+   */
+  position2?: { x: number; y: number };
+
+  /**
+   * Screen coordinates of the center point (position) of the ellipse.
+   */
+  position3?: { x: number; y: number };
+
+  /**
+   * Screen radius of the ellipse along the X and Y axes. Ignored if {@link position2} and
+   * {@link position3} is defined.
    *
    * @default 25
    */

package/src/markup/IMarkupImage.ts

@@ -83,6 +83,12 @@ export interface IMarkupImageParams {
    */
   position?: { x: number; y: number };
 
+  /**
+   * Screen coordinates of the bottom-right point (position) of the image. Specify 0 to set widt and
+   * height of the source image.
+   */
+  position2?: { x: number; y: number };
+
   /**
    * Image source as a base64-encoded
    * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL}.
@@ -90,16 +96,16 @@ export interface IMarkupImageParams {
   src?: string;
 
   /**
-   * Width of the image. The original image is scaled to this width. Specify 0 to set width of the source
-   * image.
+   * Deprecated. Width of the image. The original image is scaled to this width. Specify 0 to set width
+   * of the source image. Ignored if {@link position2} is defined.
    *
    * @default 0
    */
   width?: number;
 
   /**
-   * Height of the image. The original image is scaled to this height. Specify 0 to set height of the
-   * source image.
+   * Deprecated. Height of the image. The original image is scaled to this height. Specify 0 to set
+   * height of the source image. Ignored if {@link position2} is defined.
    *
    * @default 0
    */

package/src/markup/IMarkupRectangle.ts

@@ -84,14 +84,14 @@ export interface IMarkupRectangleParams {
   position2?: { x: number; y: number };
 
   /**
-   * Width of the rectangle.
+   * Width of the rectangle. Ignored if {@link position2} is defined.
    *
    * @default 200
    */
   width?: number;
 
   /**
-   * Height of the rectangle.
+   * Height of the rectangle. Ignored if {@link position2} is defined.
    *
    * @default 200
    */

package/src/markup/Konva/KonvaCloud.ts

@@ -53,8 +53,8 @@ export class KonvaCloud implements IMarkupCloud {
     if (!params) params = {};
     if (!params.position) params.position = { x: 0, y: 0 };
     if (params.position2) {
-      params.width = params.position.x - params.position2.x;
-      params.height = params.position.y - params.position2.y;
+      params.width = params.position2.x - params.position.x;
+      params.height = params.position2.y - params.position.y;
     } else {
       if (!params.width || !params.height) {
         params.position2 = { x: 200, y: 200 };
@@ -252,6 +252,9 @@ export class KonvaCloud implements IMarkupCloud {
   setPosition(x: number, y: number): void {
     this._ref.position({ x, y });
     this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
+    const rightLowerPoint = { x: x + this._ref.width(), y: y + this._ref.y() };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
   }
 
   getWidth(): number {

package/src/markup/Konva/KonvaEllipse.ts

@@ -25,6 +25,7 @@ import Konva from "konva";
 import { IMarkupEllipse, IMarkupEllipseParams } from "../IMarkupEllipse";
 import { IWorldTransform } from "../IWorldTransform";
 import { WorldTransform } from "../WorldTransform";
+import * as utils from "../Utils";
 
 export class KonvaEllipse implements IMarkupEllipse {
   private _ref: Konva.Ellipse;
@@ -60,7 +61,13 @@ export class KonvaEllipse implements IMarkupEllipse {
 
     if (!params) params = {};
     if (!params.position) params.position = { x: 0, y: 0 };
-    if (!params.radius) params.radius = { x: 25, y: 25 };
+    if (params.position2) {
+      params.radius.x = utils.getDistanceIn2D(params.position, params.position2);
+      if (params.position3) params.radius.y = utils.getDistanceIn2D(params.position, params.position3);
+      else params.radius.x = params.radius.y;
+    } else {
+      if (!params.radius) params.radius = { x: 25, y: 25 };
+    }
 
     this._ref = new Konva.Ellipse({
       stroke: params.color ?? "#ff0000",

package/src/markup/Konva/KonvaImage.ts

@@ -52,9 +52,17 @@ export class KonvaImage implements IMarkupImage {
           : this._ref.height() / this._ref.width();
 
       const wcsStart = this._ref.getAttr("wcsStart");
+      const wcsEnd = this._ref.getAttr("wcsEnd");
       if (!wcsStart) {
         this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
       }
+      if (!wcsEnd) {
+        const rightBottomPoint = { x: ref.x() + ref.width(), y: ref.y() + ref.height() };
+        this._ref.setAttr(
+          "wcsEnd",
+          this._worldTransformer.screenToWorld({ x: rightBottomPoint.x, y: rightBottomPoint.y })
+        );
+      }
 
       return;
     }
@@ -62,6 +70,10 @@ export class KonvaImage implements IMarkupImage {
     if (!params) params = {};
     if (!params.position) params.position = { x: 0, y: 0 };
     if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
+    if (params.position2) {
+      params.width = params.position2.x - params.position.x;
+      params.height = params.position2.y - params.position.y;
+    }
 
     this._canvasImage = new Image();
 
@@ -91,6 +103,12 @@ export class KonvaImage implements IMarkupImage {
             this._ref.width(params.maxHeight / this._ratio);
             this._ref.height(params.maxHeight);
           }
+
+          const wcsEnd = this._worldTransformer.screenToWorld({
+            x: params.position.x + this._ref.width(),
+            y: params.position.y + this._ref.height(),
+          });
+          this._ref.setAttr("wcsEnd", wcsEnd);
         }
       }
     };
@@ -150,12 +168,20 @@ export class KonvaImage implements IMarkupImage {
       const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
       const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
       this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
+      this._ref.setAttr(
+        "wcsEnd",
+        this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() })
+      );
     });
 
     this._ref.on("dragend", (e) => {
       const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
       const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
       this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
+      this._ref.setAttr(
+        "wcsEnd",
+        this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() })
+      );
     });
 
     this._ref.id(this._ref._id.toString());
@@ -176,6 +202,10 @@ export class KonvaImage implements IMarkupImage {
   setWidth(w: number): void {
     this._ref.width(w);
     this._ref.height(w * this._ratio);
+
+    const rightLowerPoint = { x: this._ref.x() + w, y: this._ref.y() + this._ref.height() };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
   }
 
   getHeight(): number {
@@ -185,6 +215,10 @@ export class KonvaImage implements IMarkupImage {
   setHeight(h: number): void {
     this._ref.height(h);
     this._ref.width(h / this._ratio);
+
+    const rightLowerPoint = { x: this._ref.x() + this._ref.width(), y: this._ref.y() + h };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
   }
 
   ref() {
@@ -231,15 +265,22 @@ export class KonvaImage implements IMarkupImage {
   setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
     this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
+    const rightLowerPoint = { x: x + this._ref.width(), y: y + this._ref.y() };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
   }
 
   updateScreenCoordinates(): void {
     let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+    let screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
 
     let invert = this._ref.getStage().getAbsoluteTransform().copy();
     invert = invert.invert();
     const positionStart = invert.point(screenPositionStart);
+    const positionEnd = invert.point(screenPositionEnd);
 
     this._ref.position({ x: positionStart.x, y: positionStart.y });
+    this._ref.width(Math.abs(positionEnd.x - positionStart.x));
+    this._ref.height(Math.abs(positionEnd.y - positionStart.y));
   }
 }

package/src/markup/Konva/KonvaMarkup.ts

@@ -306,12 +306,23 @@ export class KonvaMarkup implements IMarkup {
 
     viewpoint.rectangles?.forEach((rect: IRectangle) => {
       const screenPoint = this._worldTransformer.worldToScreen(rect.position);
-      this.addRectangle(screenPoint, null, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+      const screenPoint2 = rect.position2 ? this._worldTransformer.worldToScreen(rect.position2) : null;
+      this.addRectangle(screenPoint, screenPoint2, 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);
+      const screenPoint2 = ellipse.position2 ? this._worldTransformer.worldToScreen(ellipse.position2) : null;
+      const screenPoint3 = ellipse.position3 ? this._worldTransformer.worldToScreen(ellipse.position3) : null;
+      this.addEllipse(
+        screenPoint,
+        screenPoint2,
+        screenPoint3,
+        ellipse.radius,
+        ellipse.line_width,
+        ellipse.color,
+        ellipse.id
+      );
     });
 
     viewpoint.arrows?.forEach((arrow: IArrow) => {
@@ -322,12 +333,14 @@ export class KonvaMarkup implements IMarkup {
 
     viewpoint.clouds?.forEach((cloud: ICloud) => {
       const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
-      this.addCloud(screenPoint, null, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+      const screenPoint2 = cloud.position2 ? this._worldTransformer.worldToScreen(cloud.position2) : null;
+      this.addCloud(screenPoint, screenPoint2, 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);
+      const screenPoint2 = image.position2 ? this._worldTransformer.worldToScreen(image.position2) : null;
+      this.addImage(screenPoint, screenPoint2, image.src, image.width, image.height, image.id);
     });
   }
 
@@ -515,7 +528,7 @@ export class KonvaMarkup implements IMarkup {
           if (this._markupMode === "Rectangle") {
             this.addRectangle({ x: startX, y: startY }, null, dX, dY);
           } else if (this._markupMode === "Ellipse") {
-            this.addEllipse({ x: startX, y: startY }, { x: dX / 2, y: dY / 2 });
+            this.addEllipse({ x: startX, y: startY }, null, null, { x: dX / 2, y: dY / 2 });
           } else if (this._markupMode === "Arrow") {
             this.addArrow(
               { x: mouseDownPos.x, y: mouseDownPos.y },
@@ -563,7 +576,7 @@ export class KonvaMarkup implements IMarkup {
           lastObj.setPosition(startX, startY);
           lastObj.setRadiusX(dX);
           lastObj.setRadiusY(dY);
-        } else lastObj = this.addEllipse({ x: startX, y: startY }, { x: dX, y: dY });
+        } else lastObj = this.addEllipse({ x: startX, y: startY }, null, null, { x: dX, y: dY });
       } else if (this._markupMode === "Cloud") {
         if (lastObj) {
           lastObj.setPosition(startX, startY);
@@ -590,6 +603,7 @@ export class KonvaMarkup implements IMarkup {
           if (this._imageInputRef && this._imageInputRef.value)
             this.addImage(
               { x: this._imageInputPos.x, y: this._imageInputPos.y },
+              null,
               this._imageInputRef.value,
               0,
               0,
@@ -625,7 +639,7 @@ export class KonvaMarkup implements IMarkup {
       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);
+            this.addImage(this._imageInputPos, null, this._imageInputRef.value, 0, 0);
           else this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
           return;
         } else {
@@ -759,6 +773,7 @@ export class KonvaMarkup implements IMarkup {
       const rectangle: IRectangle = {
         id: shape.id(),
         position: wcsStart,
+        position2: wcsEnd,
         width: Math.abs(screenStart.x - screenEnd.x),
         height: Math.abs(screenStart.y - screenEnd.y),
         line_width: shape.getLineWidth(),
@@ -776,6 +791,8 @@ export class KonvaMarkup implements IMarkup {
 
     this.konvaLayerFind("Ellipse").forEach((ref) => {
       const wcsPosition = ref.getAttr("wcsPosition");
+      const wcsPosition2 = ref.getAttr("wcsRadiusX");
+      const wcsPosition3 = ref.getAttr("wcsRadiusY");
       const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
       const scale = stageAbsoluteTransform.getMatrix()[0];
 
@@ -783,6 +800,8 @@ export class KonvaMarkup implements IMarkup {
       const ellipse: IEllipse = {
         id: shape.id(),
         position: wcsPosition,
+        position2: wcsPosition2,
+        position3: wcsPosition3,
         radius: {
           x: ref.getRadiusX() * scale,
           y: ref.getRadiusY() * scale,
@@ -824,6 +843,7 @@ export class KonvaMarkup implements IMarkup {
 
     this.konvaLayerFind("Image").forEach((ref) => {
       const wcsStart = ref.getAttr("wcsStart");
+      const wcsEnd = ref.getAttr("wcsEnd");
       const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
       const scale = stageAbsoluteTransform.getMatrix()[0];
 
@@ -831,6 +851,7 @@ export class KonvaMarkup implements IMarkup {
       const image: IImage = {
         id: shape.id(),
         position: wcsStart,
+        position2: wcsEnd,
         src: shape.getSrc(),
         width: shape.getWidth() * scale,
         height: shape.getHeight() * scale,
@@ -855,6 +876,7 @@ export class KonvaMarkup implements IMarkup {
       const cloud: ICloud = {
         id: shape.id(),
         position: wcsStart,
+        position2: wcsEnd,
         width: Math.abs(screenStart.x - screenEnd.x),
         height: Math.abs(screenStart.y - screenEnd.y),
         line_width: shape.getLineWidth(),
@@ -980,7 +1002,7 @@ export class KonvaMarkup implements IMarkup {
       this._imageInputRef.onchange = async (event) => {
         const file = (event.target as HTMLInputElement).files[0];
         const base64 = await convertBase64(file);
-        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, base64.toString(), 0, 0);
+        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, base64.toString(), 0, 0);
       };
       this._imageInputRef.oncancel = (event) => {
         this.removeImageInput();
@@ -1074,6 +1096,8 @@ export class KonvaMarkup implements IMarkup {
 
   private addEllipse(
     position: Konva.Vector2d,
+    position2: Konva.Vector2d,
+    position3: Konva.Vector2d,
     radius: Konva.Vector2d,
     lineWidth?: number,
     color?: string,
@@ -1084,6 +1108,8 @@ export class KonvaMarkup implements IMarkup {
     const konvaEllipse = new KonvaEllipse(
       {
         position,
+        position2,
+        position3,
         radius,
         lineWidth,
         color: color || this._markupColor.asHex(),
@@ -1146,6 +1172,7 @@ export class KonvaMarkup implements IMarkup {
 
   private addImage(
     position: Konva.Vector2d,
+    position2: Konva.Vector2d,
     src: string,
     width?: number,
     height?: number,
@@ -1162,6 +1189,7 @@ export class KonvaMarkup implements IMarkup {
     const konvaImage = new KonvaImage(
       {
         position,
+        position2,
         src,
         width,
         height,

package/src/markup/Konva/KonvaRectangle.ts

@@ -54,8 +54,8 @@ export class KonvaRectangle implements IMarkupRectangle {
     if (!params) params = {};
     if (!params.position) params.position = { x: 0, y: 0 };
     if (params.position2) {
-      params.width = params.position.x - params.position2.x;
-      params.height = params.position.y - params.position2.y;
+      params.width = params.position2.x - params.position.x;
+      params.height = params.position2.y - params.position.y;
     } else {
       if (!params.width || !params.height) {
         params.position2 = { x: 200, y: 200 };
@@ -167,6 +167,9 @@ export class KonvaRectangle implements IMarkupRectangle {
   setPosition(x: number, y: number): void {
     this._ref.setPosition({ x, y });
     this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
+    const rightLowerPoint = { x: x + this._ref.width(), y: y + this._ref.y() };
+    const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
+    this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
   }
 
   ref() {

package/src/markup/Utils.ts

@@ -0,0 +1,3 @@
+export function getDistanceIn2D(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}