@inweb/viewer-visualize 25.4.4 → 25.4.7

package/dist/viewer-visualize.js

@@ -3023,12 +3023,41 @@
         }
     }
 
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    /**
+     * Version of the markup support. Old = "Visualize", New = "Konva"
+     */
     var MarkupType;
     (function (MarkupType) {
         MarkupType[MarkupType["Unknown"] = 0] = "Unknown";
         MarkupType["Konva"] = "Konva";
         MarkupType["Visualize"] = "Visualize";
     })(MarkupType || (MarkupType = {}));
+    /**
+     * Defines type of markup object. For old Visualize markup ({@link MarkupType}) only "Line" and
+     * "Text" markup objects are supported.
+     */
     var MarkupMode;
     (function (MarkupMode) {
         MarkupMode["Line"] = "Line";
@@ -14465,6 +14494,28 @@
     var libExports = lib$1.exports;
     var Konva = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
     class MarkupColor {
         /**
          * Color in #000000 format
@@ -14472,12 +14523,29 @@
         get HexColor() {
             return "#" + this._hex;
         }
+        /**
+         * Color as object with r,g,b properties
+         */
         get RGB() {
             return { r: this.R, g: this.G, b: this.B };
         }
+        /**
+         * Create an instance of Color
+         *
+         * @param r - Red color in [0,255] range
+         * @param g - Green color in [0,255] range
+         * @param b - Blue color in [0,255] range
+         */
         constructor(r, g, b) {
             this.setColor(r, g, b);
         }
+        /**
+         * Set Color for current instance
+         *
+         * @param r - Red color in [0,255] range
+         * @param g - Green color in [0,255] range
+         * @param b - Blue color in [0,255] range
+         */
         setColor(r, g, b) {
             this.R = r;
             this.G = g;
@@ -14520,6 +14588,11 @@
                 strokeScaleEnabled: false,
                 dash: LineTypeSpecs.get(params.type) || [],
             });
+            this._ref.on("transform", (e) => {
+                const attrs = e.target.attrs;
+                if (attrs.rotation !== this.getRotation())
+                    this.setRotation(attrs.rotation);
+            });
             this._ref.id(this._ref._id.toString());
         }
         ref() {
@@ -14616,6 +14689,20 @@
                 draggable: true,
                 rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0,
             });
+            this._ref.on("transform", (e) => {
+                const attrs = e.target.attrs;
+                if (attrs.rotation !== this.getRotation())
+                    this.setRotation(attrs.rotation);
+                const newWidth = this._ref.width() * attrs.scaleX;
+                const newHeight = this._ref.height() * attrs.scaleY;
+                if (Math.abs(attrs.scaleX - 1) > 10e-6) {
+                    this.setFontSize(Math.round((this.getFontSize() * newWidth) / this._ref.width()));
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this.setFontSize(Math.round((this.getFontSize() * newHeight) / this._ref.height()));
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         ref() {
@@ -14694,6 +14781,20 @@
                 draggable: true,
                 strokeScaleEnabled: false,
             });
+            this._ref.on("transform", (e) => {
+                const attrs = e.target.attrs;
+                if (attrs.rotation !== this.getRotation())
+                    this.setRotation(attrs.rotation);
+                const newWidth = this._ref.width() * attrs.scaleX;
+                const newHeight = this._ref.height() * attrs.scaleY;
+                if (Math.abs(attrs.scaleX - 1) > 10e-6) {
+                    this.setWidth(newWidth);
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this.setHeight(newHeight);
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         getPosition() {
@@ -14778,6 +14879,20 @@
                 draggable: true,
                 strokeScaleEnabled: false,
             });
+            this._ref.on("transform", (e) => {
+                const attrs = e.target.attrs;
+                if (attrs.rotation !== this.getRotation())
+                    this.setRotation(attrs.rotation);
+                const newRadiusX = this._ref.radiusX() * attrs.scaleX;
+                const newRadiusY = this._ref.radiusY() * attrs.scaleY;
+                if (Math.abs(attrs.scaleX - 1) > 10e-6) {
+                    this.setRadiusX(newRadiusX);
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this.setRadiusY(newRadiusY);
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         getPosition() {
@@ -14790,13 +14905,13 @@
             return this._ref.radiusX();
         }
         setRadiusX(r) {
-            this._ref.radius({ x: r, y: this._ref.radiusY() });
+            this._ref.radiusX(r);
         }
         getRadiusY() {
             return this._ref.radiusY();
         }
         setRadiusY(r) {
-            this._ref.radius({ x: this._ref.radiusX(), y: r });
+            this._ref.radiusY(r);
         }
         getLineWidth() {
             return this._ref.strokeWidth();
@@ -14840,6 +14955,7 @@
         }
     }
 
+    ///////////////////////////////////////////////////////////////////////////////
     class KonvaArrow {
         constructor(params, ref = null) {
             var _a, _b;
@@ -14860,6 +14976,11 @@
                 draggable: true,
                 strokeScaleEnabled: false,
             });
+            this._ref.on("transform", (e) => {
+                const attrs = e.target.attrs;
+                if (attrs.rotation !== this.getRotation())
+                    this.setRotation(attrs.rotation);
+            });
             this._ref.id(this._ref._id.toString());
         }
         ref() {
@@ -14879,6 +15000,7 @@
         }
         setColor(hex) {
             this._ref.stroke(hex);
+            this._ref.fill(hex);
         }
         getRotation() {
             return this._ref.rotation();
@@ -14957,6 +15079,20 @@
                 this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
             };
             this._canvasImage.src = params.src;
+            this._ref.on("transform", (e) => {
+                const attrs = e.target.attrs;
+                if (attrs.rotation !== this.getRotation())
+                    this.setRotation(attrs.rotation);
+                const newWidth = this._ref.width() * attrs.scaleX;
+                const newHeight = this._ref.height() * attrs.scaleY;
+                if (Math.abs(attrs.scaleX - 1) > 10e-6) {
+                    this.setWidth(newWidth);
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this.setHeight(newHeight);
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         getSrc() {
@@ -14991,13 +15127,6 @@
         type() {
             return "image";
         }
-        // we can break Liskov Substitution Principle, need to use separate IColorable
-        // getColor(): string {
-        //   return this._ref.fill();
-        // }
-        // setColor(hex: string) {
-        //   this._ref.fill(hex);
-        // }
         getRotation() {
             return this._ref.rotation();
         }
@@ -15093,19 +15222,21 @@
             this._ref.className = "Cloud";
             this._ref.on("transform", (e) => {
                 const attrs = e.target.attrs;
-                const minWidth = 100;
-                const minHeight = 100;
+                if (attrs.rotation !== this.getRotation())
+                    this.setRotation(attrs.rotation);
                 const newWidth = this._ref.width() * attrs.scaleX;
                 const newHeight = this._ref.height() * attrs.scaleY;
+                const minWidth = 100;
+                const minHeight = 100;
                 if (newWidth < minWidth || newHeight < minHeight) {
                     this._ref.scale({ x: 1, y: 1 });
                     return;
                 }
                 if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-                    this._ref.width(newWidth);
+                    this.setWidth(newWidth);
                 }
                 if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-                    this._ref.height(newHeight);
+                    this.setHeight(newHeight);
                 }
                 this._ref.scale({ x: 1, y: 1 });
             });
@@ -15179,6 +15310,7 @@
         }
     }
 
+    ///////////////////////////////////////////////////////////////////////////////
     // move to separate class and create factory with enum?
     const MarkupMode2Konva = new Map([
         [
@@ -15391,7 +15523,7 @@
             let object;
             let zIndex = this._zIndex;
             // TODO: factory?
-            switch (type) {
+            switch (type.toLocaleLowerCase()) {
                 case "line":
                     object = new KonvaLine(params);
                     zIndex = 1;
@@ -16160,8 +16292,9 @@
         addImage(position, src, width, height, id) {
             if (!position)
                 return;
+            let konvaImage;
             if (src) {
-                const konvaImage = new KonvaImage({
+                konvaImage = new KonvaImage({
                     position,
                     src,
                     width,
@@ -16178,7 +16311,7 @@
                 }
             }
             this.removeImageInput();
-            return;
+            return konvaImage;
         }
     }
 
@@ -16462,9 +16595,6 @@
             viewpoint.description = new Date().toDateString();
             return viewpoint;
         }
-        getLayer() {
-            throw new Error("Not implemented yet");
-        }
         createObject(type, params) {
             throw new Error("Not implemented yet");
         }
@@ -16482,7 +16612,14 @@
         }
     }
 
+    ///////////////////////////////////////////////////////////////////////////////
     class MarkupFactory {
+        /**
+         * Initialize {@link IMarkup} instance
+         *
+         * @param markupType - Specifies version of the markup support. Two variants of markup
+         *   support are implemented: old "Visualize" and new "Konva". Default is "Konva". {@link MarkupType}
+         */
         static createMarkup(markupType) {
             let markup;
             switch (markupType) {
@@ -16526,6 +16663,8 @@
          * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If
          *   the auto-update is disabled, you need to update the `VisualizeJS` viewer and the active
          *   dragger manually using the `update` event. Default is `true`.
+         * @param params.markupType - Specifies version of the markup support. Two variants of markup
+         *   support are implemented: old "Visualize" and new "Konva". Default is "Konva". {@link MarkupType}
          */
         constructor(client, params = {}) {
             var _a, _b;