@inweb/viewer-three 26.9.1 → 26.9.3

package/dist/viewer-three.js

@@ -17,14 +17,14 @@
             });
         }
         registerCommandAlias(id, alias) {
-            this.registerCommand(alias, ((viewer, ...args) => this.executeCommand(id, viewer, ...args)));
+            this.registerCommand(alias, (viewer, ...args) => this.executeCommand(id, viewer, ...args));
         }
         getCommand(id) {
             return this._commands.get(id);
         }
         getCommands() {
             const map = new Map;
-            this._commands.forEach(((value, key) => map.set(key, value)));
+            this._commands.forEach((value, key) => map.set(key, value));
             return map;
         }
         executeCommand(id, viewer, ...args) {
@@ -39,7 +39,7 @@
             }
             const {handler: handler, thisArg: thisArg} = command;
             const result = handler.apply(thisArg, [ viewer, ...args ]);
-            viewer === null || viewer === undefined ? undefined : viewer.emit({
+            viewer === null || viewer === void 0 ? void 0 : viewer.emit({
                 type: "command",
                 data: id,
                 args: args
@@ -75,11 +75,11 @@
         }
         registerDraggerAlias(name, alias) {
             const provider = this._providers.get(name);
-            if (provider) this.registerDragger(alias, (viewer => provider(viewer)));
+            if (provider) this.registerDragger(alias, viewer => provider(viewer));
         }
         getDraggers() {
             const map = new Map;
-            this._providers.forEach(((value, key) => map.set(key, value)));
+            this._providers.forEach((value, key) => map.set(key, value));
             return map;
         }
         createDragger(name, viewer) {
@@ -118,11 +118,11 @@
         }
         registerComponentAlias(name, alias) {
             const provider = this._providers.get(name);
-            if (provider) this.registerComponent(alias, (viewer => provider(viewer)));
+            if (provider) this.registerComponent(alias, viewer => provider(viewer));
         }
         getComponents() {
             const map = new Map;
-            this._providers.forEach(((value, key) => map.set(key, value)));
+            this._providers.forEach((value, key) => map.set(key, value));
             return map;
         }
         createComponent(name, viewer) {
@@ -177,18 +177,18 @@
         }
         getLoaders() {
             const map = new Map;
-            this._providers.forEach(((value, key) => map.set(key, value)));
+            this._providers.forEach((value, key) => map.set(key, value));
             return map;
         }
         createLoader(viewer, file, format) {
             let result = null;
-            this._providers.forEach(((provider, key) => {
+            this._providers.forEach((provider, key) => {
                 const loader = provider(viewer);
                 if (loader.isSupport(file, format)) {
                     result = loader;
                     result.name = key;
                 }
-            }));
+            });
             return result;
         }
     }
@@ -292,10 +292,10 @@
         resetToDefaults(fields) {
             if (fields !== undefined) {
                 const defaults = Options.defaults();
-                const resetData = fields.reduce(((acc, field) => {
+                const resetData = fields.reduce((acc, field) => {
                     acc[field] = defaults[field];
                     return acc;
-                }), {});
+                }, {});
                 this.data = {
                     ...this.data,
                     ...resetData
@@ -529,7 +529,7 @@
      * @type {ConstantsMouse}
      * @constant
      */
-    const MOUSE = { ROTATE: 0, DOLLY: 1, PAN: 2 };
+    const MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
 
     /**
      * Represents touch interaction types in context of controls.
@@ -57787,34 +57787,34 @@
 
     		// near
 
-    		setPoint( 'n1', pointMap, geometry, _camera$1, -1, -1, nearZ );
-    		setPoint( 'n2', pointMap, geometry, _camera$1, w, -1, nearZ );
-    		setPoint( 'n3', pointMap, geometry, _camera$1, -1, h, nearZ );
+    		setPoint( 'n1', pointMap, geometry, _camera$1, - w, - h, nearZ );
+    		setPoint( 'n2', pointMap, geometry, _camera$1, w, - h, nearZ );
+    		setPoint( 'n3', pointMap, geometry, _camera$1, - w, h, nearZ );
     		setPoint( 'n4', pointMap, geometry, _camera$1, w, h, nearZ );
 
     		// far
 
-    		setPoint( 'f1', pointMap, geometry, _camera$1, -1, -1, farZ );
-    		setPoint( 'f2', pointMap, geometry, _camera$1, w, -1, farZ );
-    		setPoint( 'f3', pointMap, geometry, _camera$1, -1, h, farZ );
+    		setPoint( 'f1', pointMap, geometry, _camera$1, - w, - h, farZ );
+    		setPoint( 'f2', pointMap, geometry, _camera$1, w, - h, farZ );
+    		setPoint( 'f3', pointMap, geometry, _camera$1, - w, h, farZ );
     		setPoint( 'f4', pointMap, geometry, _camera$1, w, h, farZ );
 
     		// up
 
     		setPoint( 'u1', pointMap, geometry, _camera$1, w * 0.7, h * 1.1, nearZ );
-    		setPoint( 'u2', pointMap, geometry, _camera$1, -1 * 0.7, h * 1.1, nearZ );
+    		setPoint( 'u2', pointMap, geometry, _camera$1, - w * 0.7, h * 1.1, nearZ );
     		setPoint( 'u3', pointMap, geometry, _camera$1, 0, h * 2, nearZ );
 
     		// cross
 
-    		setPoint( 'cf1', pointMap, geometry, _camera$1, -1, 0, farZ );
+    		setPoint( 'cf1', pointMap, geometry, _camera$1, - w, 0, farZ );
     		setPoint( 'cf2', pointMap, geometry, _camera$1, w, 0, farZ );
-    		setPoint( 'cf3', pointMap, geometry, _camera$1, 0, -1, farZ );
+    		setPoint( 'cf3', pointMap, geometry, _camera$1, 0, - h, farZ );
     		setPoint( 'cf4', pointMap, geometry, _camera$1, 0, h, farZ );
 
-    		setPoint( 'cn1', pointMap, geometry, _camera$1, -1, 0, nearZ );
+    		setPoint( 'cn1', pointMap, geometry, _camera$1, - w, 0, nearZ );
     		setPoint( 'cn2', pointMap, geometry, _camera$1, w, 0, nearZ );
-    		setPoint( 'cn3', pointMap, geometry, _camera$1, 0, -1, nearZ );
+    		setPoint( 'cn3', pointMap, geometry, _camera$1, 0, - h, nearZ );
     		setPoint( 'cn4', pointMap, geometry, _camera$1, 0, h, nearZ );
 
     		geometry.getAttribute( 'position' ).needsUpdate = true;
@@ -80902,6 +80902,12 @@ void main() {
                 this.viewer.target.copy(this.orbit.target);
                 this.viewer.update();
                 switch (this.orbit.state) {
+                    case STATE.ROTATE:
+                    case STATE.TOUCH_ROTATE:
+                        this.viewer.emitEvent({
+                            type: "orbit",
+                        });
+                        break;
                     case STATE.PAN:
                     case STATE.TOUCH_PAN:
                         this.viewer.emitEvent({
@@ -80921,6 +80927,7 @@ void main() {
                         });
                         break;
                 }
+                this.viewer.emitEvent({ type: "changecamera" });
                 this.changed = true;
             };
             this.stopContextMenu = (event) => {
@@ -81548,6 +81555,320 @@ void main() {
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
     class WalkControls extends Controls {
+        constructor(camera, canvas, groundObjects, viewer) {
+            super(camera, canvas);
+            this.EYE_HEIGHT = 1.7;
+            this.FAILING_DISTANCE = 2;
+            this.GROUND_FOLLOWING_SPEED = 0.05;
+            this.LOOK_SPEED = 0.1;
+            this.WALK_SPEED_DELIMITER = 4;
+            this.WHEEL_SPEED_DELIMITER = 15000;
+            this.movementSpeed = 0.1;
+            this.multiplier = 3;
+            this.moveWheel = 0;
+            this.mouseDragOn = false;
+            this.onPointerDown = (event) => {
+                if (event.button !== 0)
+                    return;
+                this.domElement.setPointerCapture(event.pointerId);
+                this.downPosition.set(event.clientX, event.clientY);
+                this.quaternion.copy(this.object.quaternion);
+                this.mouseDragOn = true;
+            };
+            this.onPointerMove = (event) => {
+                if (!this.mouseDragOn)
+                    return;
+                const movePosition = new Vector2(event.clientX, event.clientY);
+                if (this.downPosition.distanceTo(movePosition) === 0)
+                    return;
+                this.rotateDelta.copy(this.downPosition).sub(movePosition);
+                this.rotateCamera(this.rotateDelta);
+                this.dispatchEvent({ type: "change" });
+            };
+            this.onPointerUp = (event) => {
+                this.domElement.releasePointerCapture(event.pointerId);
+                this.mouseDragOn = false;
+            };
+            this.onPointerCancel = (event) => {
+                this.domElement.dispatchEvent(new PointerEvent("pointerup", event));
+            };
+            this.onWheel = (event) => {
+                this.moveWheel = event.deltaY;
+                this.update();
+            };
+            this.onKeyDown = (event) => {
+                switch (event.code) {
+                    case "NumpadSubtract":
+                    case "Minus":
+                        if (this.multiplier > 1) {
+                            this.multiplier = this.multiplier - 1;
+                            this.dispatchEvent({ type: "walkspeedchange", data: this.multiplier });
+                        }
+                        break;
+                    case "NumpadAdd":
+                    case "Equal":
+                        if (this.multiplier < 10) {
+                            this.multiplier = this.multiplier + 1;
+                            this.dispatchEvent({ type: "walkspeedchange", data: this.multiplier });
+                        }
+                        break;
+                    case "ArrowLeft":
+                    case "ArrowRight":
+                    case "ArrowUp":
+                    case "ArrowDown":
+                    case "KeyW":
+                    case "KeyS":
+                    case "KeyA":
+                    case "KeyD":
+                    case "KeyQ":
+                    case "KeyE":
+                        this.moveKeys.add(event.code);
+                        this.update();
+                        break;
+                }
+            };
+            this.onKeyUp = (event) => {
+                if (this.moveKeys.delete(event.code))
+                    this.update();
+            };
+            this.initHighlighter = () => {
+                this.highlighter = this.viewer.getComponent("HighlighterComponent");
+            };
+            this.camera = camera;
+            this.viewer = viewer;
+            this.groundObjects = groundObjects;
+            this.raycaster = new Raycaster();
+            this.raycaster.near = 0;
+            this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
+            this.moveKeys = new Set();
+            this.moveClock = new Clock();
+            this.quaternion = camera.quaternion.clone();
+            this.downPosition = new Vector2(0, 0);
+            this.rotateDelta = new Vector2(0, 0);
+            this.domElement.addEventListener("pointerdown", this.onPointerDown);
+            this.domElement.addEventListener("pointermove", this.onPointerMove);
+            this.domElement.addEventListener("pointerup", this.onPointerUp);
+            this.domElement.addEventListener("pointercancel", this.onPointerCancel);
+            this.domElement.addEventListener("wheel", this.onWheel);
+            window.addEventListener("keydown", this.onKeyDown);
+            window.addEventListener("keyup", this.onKeyUp);
+        }
+        dispose() {
+            this.domElement.removeEventListener("pointerdown", this.onPointerDown);
+            this.domElement.removeEventListener("pointermove", this.onPointerMove);
+            this.domElement.removeEventListener("pointerup", this.onPointerUp);
+            this.domElement.removeEventListener("pointercancel", this.onPointerCancel);
+            this.domElement.removeEventListener("wheel", this.onWheel);
+            window.removeEventListener("keydown", this.onKeyDown);
+            window.removeEventListener("keyup", this.onKeyUp);
+            super.dispose();
+        }
+        updateGroundFollowing() {
+            this.raycaster.set(this.object.position, new Vector3(0, -1, 0));
+            this.raycaster.params = this.raycaster.params = {
+                Mesh: {},
+                Line: { threshold: 0 },
+                Line2: { threshold: 0 },
+                LOD: { threshold: 0 },
+                Points: { threshold: 0 },
+                Sprite: { threshold: 0 },
+            };
+            let intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+            if (intersects.length > 0) {
+                const groundY = intersects[0].point.y;
+                const targetY = groundY + this.EYE_HEIGHT;
+                // Smoothly interpolate the camera's y position to the target height
+                this.object.position.y = MathUtils.lerp(this.object.position.y, targetY, this.GROUND_FOLLOWING_SPEED);
+                // Only for debug
+                // const model = this.viewer.models[0];
+                // const handles = model.getHandlesByObjects(intersects[0].object);
+                // const objects = model.getObjectsByHandles(handles);
+                // this.viewer.clearSelected();
+                // this.select(objects, model);
+            }
+        }
+        select(objects, model) {
+            if (!model) {
+                this.viewer.models.forEach((model) => this.select(objects, model));
+                return;
+            }
+            if (!Array.isArray(objects))
+                objects = [objects];
+            if (!objects.length)
+                return;
+            model.showOriginalObjects(objects);
+            this.highlighter.highlight(objects);
+            objects.forEach((object) => this.viewer.selected.push(object));
+            objects.forEach((object) => (object.isSelected = true));
+        }
+        update() {
+            let moved = false;
+            let upgradeGroundFollowing = false;
+            const forward = new Vector3();
+            const sideways = new Vector3();
+            if (this.moveKeys.size > 0) {
+                upgradeGroundFollowing = true;
+                const timeDelta = this.moveClock.getDelta();
+                const moveDelta = (timeDelta * this.multiplier * this.movementSpeed) / this.WALK_SPEED_DELIMITER;
+                this.object.getWorldDirection(forward);
+                forward.y = 0;
+                forward.normalize();
+                sideways.setFromMatrixColumn(this.object.matrix, 0);
+                sideways.y = 0;
+                sideways.normalize();
+                if (this.moveKeys.has("KeyW")) {
+                    this.object.position.addScaledVector(forward, moveDelta);
+                }
+                if (this.moveKeys.has("KeyS")) {
+                    this.object.position.addScaledVector(forward, -moveDelta);
+                }
+                if (this.moveKeys.has("KeyA")) {
+                    this.object.position.addScaledVector(sideways, -moveDelta);
+                }
+                if (this.moveKeys.has("KeyD")) {
+                    this.object.position.addScaledVector(sideways, moveDelta);
+                }
+                if (this.moveKeys.has("KeyQ")) {
+                    this.object.translateY(moveDelta);
+                    upgradeGroundFollowing = false;
+                }
+                if (this.moveKeys.has("KeyE")) {
+                    this.object.translateY(-moveDelta);
+                    upgradeGroundFollowing = false;
+                }
+                const lookDelta = this.LOOK_SPEED + (this.multiplier - 1);
+                if (this.moveKeys.has("ArrowUp"))
+                    this.rotateCamera(this.rotateDelta.add(new Vector2(0, -lookDelta / 2)));
+                if (this.moveKeys.has("ArrowDown"))
+                    this.rotateCamera(this.rotateDelta.add(new Vector2(0, lookDelta / 2)));
+                if (this.moveKeys.has("ArrowLeft"))
+                    this.rotateCamera(this.rotateDelta.add(new Vector2(lookDelta, 0)));
+                if (this.moveKeys.has("ArrowRight"))
+                    this.rotateCamera(this.rotateDelta.add(new Vector2(-lookDelta, 0)));
+                this.moveWheel = 0;
+                moved = true;
+            }
+            if (this.moveWheel !== 0) {
+                const moveDelta = (this.moveWheel * this.multiplier * this.movementSpeed) / this.WHEEL_SPEED_DELIMITER;
+                this.object.getWorldDirection(forward);
+                forward.y = 0;
+                forward.normalize();
+                this.object.position.addScaledVector(forward, -moveDelta);
+                this.moveWheel += -1 * Math.sign(this.moveWheel);
+                moved = true;
+            }
+            if (upgradeGroundFollowing)
+                this.updateGroundFollowing();
+            if (moved) {
+                this.dispatchEvent({ type: "change" });
+            }
+            if (this.moveKeys.size === 0 && this.moveWheel === 0) {
+                this.moveClock.stop();
+                this.moveClock.autoStart = true;
+            }
+        }
+        rotateCamera(delta) {
+            const rotateX = (Math.PI * delta.x) / this.domElement.clientWidth;
+            const rotateY = (Math.PI * delta.y) / this.domElement.clientHeight;
+            const xRotation = new Quaternion();
+            xRotation.setFromAxisAngle(this.object.up, rotateX);
+            const yRotation = new Quaternion();
+            yRotation.setFromAxisAngle(new Vector3(1, 0, 0), rotateY);
+            const quaternion = this.quaternion.clone();
+            quaternion.premultiply(xRotation).multiply(yRotation).normalize();
+            this.object.setRotationFromQuaternion(quaternion);
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, 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-2025 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 WalkDragger {
+        constructor(viewer) {
+            this.updateControls = () => {
+                const size = this.viewer.extents.getSize(new Vector3());
+                this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+            };
+            this.controlsChange = () => {
+                this.viewer.update();
+                this.viewer.emitEvent({ type: "changecamera" });
+            };
+            this.walkspeedChange = (event) => {
+                this.viewer.emitEvent(event);
+            };
+            this.viewerRender = () => {
+                this.controls.update();
+            };
+            this.viewerZoom = () => {
+                this.controls.rotateDelta.set(0, 0);
+            };
+            const meshOnlyGround = [];
+            viewer.models[0].getObjects().forEach((obj) => {
+                obj.traverse((child) => {
+                    if (child instanceof Mesh) {
+                        meshOnlyGround.push(child);
+                    }
+                });
+            });
+            this.controls = new WalkControls(viewer.camera, viewer.canvas, meshOnlyGround, viewer);
+            this.controls.addEventListener("change", this.controlsChange);
+            this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
+            this.viewer = viewer;
+            this.viewer.on("render", this.viewerRender);
+            this.viewer.on("zoom", this.viewerZoom);
+            this.updateControls();
+        }
+        dispose() {
+            this.viewer.off("render", this.viewerRender);
+            this.viewer.off("zoom", this.viewerZoom);
+            this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
+            this.controls.removeEventListener("change", this.controlsChange);
+            this.controls.dispose();
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, 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-2025 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 FlyControls extends Controls {
         constructor(camera, canvas) {
             super(camera, canvas);
             this.movementSpeed = 0.2;
@@ -81590,14 +81911,14 @@ void main() {
                     case "Minus":
                         if (this.multiplier > 1) {
                             this.multiplier = this.multiplier - 1;
-                            this.dispatchEvent({ type: "walkspeedchange", data: this.multiplier });
+                            this.dispatchEvent({ type: "flyspeedchange", data: this.multiplier });
                         }
                         break;
                     case "NumpadAdd":
                     case "Equal":
                         if (this.multiplier < 10) {
                             this.multiplier = this.multiplier + 1;
-                            this.dispatchEvent({ type: "walkspeedchange", data: this.multiplier });
+                            this.dispatchEvent({ type: "flyspeedchange", data: this.multiplier });
                         }
                         break;
                     case "ArrowLeft":
@@ -81716,7 +82037,7 @@ void main() {
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    class WalkDragger {
+    class FlyDragger {
         constructor(viewer) {
             this.updateControls = () => {
                 const size = this.viewer.extents.getSize(new Vector3());
@@ -81724,8 +82045,9 @@ void main() {
             };
             this.controlsChange = () => {
                 this.viewer.update();
+                this.viewer.emitEvent({ type: "changecamera" });
             };
-            this.walkspeedChange = (event) => {
+            this.flyspeedChange = (event) => {
                 this.viewer.emitEvent(event);
             };
             this.viewerRender = () => {
@@ -81734,9 +82056,9 @@ void main() {
             this.viewerZoom = () => {
                 this.controls.rotateDelta.set(0, 0);
             };
-            this.controls = new WalkControls(viewer.camera, viewer.canvas);
+            this.controls = new FlyControls(viewer.camera, viewer.canvas);
             this.controls.addEventListener("change", this.controlsChange);
-            this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
+            this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
             this.viewer = viewer;
             this.viewer.on("render", this.viewerRender);
             this.viewer.on("zoom", this.viewerZoom);
@@ -81745,7 +82067,7 @@ void main() {
         dispose() {
             this.viewer.off("render", this.viewerRender);
             this.viewer.off("zoom", this.viewerZoom);
-            this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
+            this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
             this.controls.removeEventListener("change", this.controlsChange);
             this.controls.dispose();
         }
@@ -81856,6 +82178,7 @@ void main() {
     draggers.registerDragger("CuttingPlaneYAxis", (viewer) => new CuttingPlaneYAxisDragger(viewer));
     draggers.registerDragger("CuttingPlaneZAxis", (viewer) => new CuttingPlaneZAxisDragger(viewer));
     draggers.registerDragger("Walk", (viewer) => new WalkDragger(viewer));
+    draggers.registerDragger("Fly", (viewer) => new FlyDragger(viewer));
 
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
@@ -82529,7 +82852,7 @@ void main() {
         const objects = [];
         viewer.scene.traverseVisible((child) => {
             var _a;
-            if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle))
+            if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle))
                 objects.push(child);
         });
         const extents = objects.reduce((result, object) => result.expandByObject(object), new Box3());
@@ -82805,7 +83128,7 @@ void main() {
                 const extents = new Box3();
                 this.viewer.models.forEach((model) => model.getExtents(extents));
                 this.viewer.extents.copy(extents);
-                extents.getCenter(this.viewer.target);
+                this.viewer.extents.getCenter(this.viewer.target);
             };
             this.viewer = viewer;
             this.viewer.addEventListener("databasechunk", this.syncExtents);
@@ -82972,21 +83295,7 @@ void main() {
                 const { width, height } = entries[0].contentRect;
                 if (!width || !height)
                     return; // <- invisible viewer, or viewer with parent removed
-                const camera = this.viewer.camera;
-                const aspect = width / height;
-                if (camera.isPerspectiveCamera) {
-                    camera.aspect = aspect;
-                    camera.updateProjectionMatrix();
-                }
-                if (camera.isOrthographicCamera) {
-                    camera.left = camera.bottom * aspect;
-                    camera.right = camera.top * aspect;
-                    camera.updateProjectionMatrix();
-                }
-                this.viewer.renderer.setSize(width, height, true);
-                this.viewer.composer.setSize(width, height);
-                this.viewer.update(true);
-                this.viewer.emitEvent({ type: "resize", width, height });
+                this.viewer.setSize(width, height);
             };
             this.viewer = viewer;
             this.resizeObserver = new ResizeObserver(this.resizeViewer);
@@ -84307,9 +84616,9 @@ void main() {
         }
         viewerResize(event) {
             var _a, _b, _c;
-            (_a = this.renderTarget) === null || _a === undefined ? undefined : _a.setSize(event.width, event.height);
-            (_b = this.edgesMaterial) === null || _b === undefined ? undefined : _b.resolution.set(event.width, event.height);
-            (_c = this.lineGlowMaterial) === null || _c === undefined ? undefined : _c.resolution.set(event.width, event.height);
+            (_a = this.renderTarget) === null || _a === void 0 ? void 0 : _a.setSize(event.width, event.height);
+            (_b = this.edgesMaterial) === null || _b === void 0 ? void 0 : _b.resolution.set(event.width, event.height);
+            (_c = this.lineGlowMaterial) === null || _c === void 0 ? void 0 : _c.resolution.set(event.width, event.height);
         }
     }
 
@@ -84466,9 +84775,9 @@ void main() {
             this.size = 160;
             this.orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
             this.orthoCamera.position.set(0, 0, 2);
-            const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#aa0000" });
-            const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00aa00" });
-            const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000aa" });
+            const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#dd0000" });
+            const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00dd00" });
+            const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000dd" });
             const spriteRed = this.getSpriteMaterial(matRed.color, "X");
             const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");
             const spriteBlue = this.getSpriteMaterial(matBlue.color, "Z");
@@ -89916,7 +90225,7 @@ void main() {
                     .replace(this.resourcePath, "")
                     .replace(/^(\.?\/)/, "");
                 const dataURL = this.dataURLs.get(key);
-                return dataURL !== null && dataURL !== undefined ? dataURL : url;
+                return dataURL !== null && dataURL !== void 0 ? dataURL : url;
             });
         }
         dispose() {
@@ -90257,13 +90566,26 @@ void main() {
     };
 
     const GL_CONSTANTS = {
+      FLOAT: 5126,
+      //FLOAT_MAT2: 35674,
+      FLOAT_MAT3: 35675,
+      FLOAT_MAT4: 35676,
+      FLOAT_VEC2: 35664,
+      FLOAT_VEC3: 35665,
+      FLOAT_VEC4: 35666,
+      LINEAR: 9729,
+      REPEAT: 10497,
+      SAMPLER_2D: 35678,
       POINTS: 0,
       LINES: 1,
       LINE_LOOP: 2,
       LINE_STRIP: 3,
       TRIANGLES: 4,
       TRIANGLE_STRIP: 5,
-      TRIANGLE_FAN: 6};
+      TRIANGLE_FAN: 6,
+      UNSIGNED_BYTE: 5121,
+      UNSIGNED_SHORT: 5123,
+    };
 
     const MAX_GAP = 128 * 1024; // 128 KB
     const MAX_CHUNK = 30 * 1024 * 1024; // 100 MB
@@ -95304,7 +95626,7 @@ void main() {
         }
         removeEventListener(type, listener) {
             if (this._listeners[type] === undefined) return this;
-            const listeners = this._listeners[type].filter((x => x !== listener));
+            const listeners = this._listeners[type].filter(x => x !== listener);
             if (listeners.length !== 0) this._listeners[type] = listeners; else delete this._listeners[type];
             return this;
         }
@@ -95315,7 +95637,7 @@ void main() {
         emitEvent(event) {
             if (this._listeners[event.type] === undefined) return false;
             const invoke = this._listeners[event.type].slice();
-            invoke.forEach((listener => listener.call(this, event)));
+            invoke.forEach(listener => listener.call(this, event));
             return true;
         }
         on(type, listener) {
@@ -95353,7 +95675,7 @@ void main() {
     	hasRequiredGlobal = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports._registerNode = exports.Konva = exports.glob = undefined;
+    		exports._registerNode = exports.Konva = exports.glob = void 0;
     		const PI_OVER_180 = Math.PI / 180;
     		function detectBrowser() {
     		    return (typeof window !== 'undefined' &&
@@ -95369,7 +95691,7 @@ void main() {
     		            : {};
     		exports.Konva = {
     		    _global: exports.glob,
-    		    version: '9.3.18',
+    		    version: '9.3.22',
     		    isBrowser: detectBrowser(),
     		    isUnminified: /param/.test(function (param) { }.toString()),
     		    dblClickWindow: 400,
@@ -95401,7 +95723,7 @@ void main() {
     		    },
     		    isTransforming() {
     		        var _a;
-    		        return (_a = exports.Konva['Transformer']) === null || _a === undefined ? undefined : _a.isTransforming();
+    		        return (_a = exports.Konva['Transformer']) === null || _a === void 0 ? void 0 : _a.isTransforming();
     		    },
     		    isDragReady() {
     		        return !!exports.Konva['DD'].node;
@@ -95430,7 +95752,7 @@ void main() {
     	hasRequiredUtil = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.Util = exports.Transform = undefined;
+    		exports.Util = exports.Transform = void 0;
     		const Global_1 = requireGlobal();
     		class Transform {
     		    constructor(m = [1, 0, 0, 1, 0, 0]) {
@@ -96239,343 +96561,6 @@ void main() {
 
     var Node = {};
 
-    var Factory = {};
-
-    var Validators = {};
-
-    var hasRequiredValidators;
-
-    function requireValidators () {
-    	if (hasRequiredValidators) return Validators;
-    	hasRequiredValidators = 1;
-    	Object.defineProperty(Validators, "__esModule", { value: true });
-    	Validators.RGBComponent = RGBComponent;
-    	Validators.alphaComponent = alphaComponent;
-    	Validators.getNumberValidator = getNumberValidator;
-    	Validators.getNumberOrArrayOfNumbersValidator = getNumberOrArrayOfNumbersValidator;
-    	Validators.getNumberOrAutoValidator = getNumberOrAutoValidator;
-    	Validators.getStringValidator = getStringValidator;
-    	Validators.getStringOrGradientValidator = getStringOrGradientValidator;
-    	Validators.getFunctionValidator = getFunctionValidator;
-    	Validators.getNumberArrayValidator = getNumberArrayValidator;
-    	Validators.getBooleanValidator = getBooleanValidator;
-    	Validators.getComponentValidator = getComponentValidator;
-    	const Global_1 = requireGlobal();
-    	const Util_1 = requireUtil();
-    	function _formatValue(val) {
-    	    if (Util_1.Util._isString(val)) {
-    	        return '"' + val + '"';
-    	    }
-    	    if (Object.prototype.toString.call(val) === '[object Number]') {
-    	        return val;
-    	    }
-    	    if (Util_1.Util._isBoolean(val)) {
-    	        return val;
-    	    }
-    	    return Object.prototype.toString.call(val);
-    	}
-    	function RGBComponent(val) {
-    	    if (val > 255) {
-    	        return 255;
-    	    }
-    	    else if (val < 0) {
-    	        return 0;
-    	    }
-    	    return Math.round(val);
-    	}
-    	function alphaComponent(val) {
-    	    if (val > 1) {
-    	        return 1;
-    	    }
-    	    else if (val < 0.0001) {
-    	        return 0.0001;
-    	    }
-    	    return val;
-    	}
-    	function getNumberValidator() {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            if (!Util_1.Util._isNumber(val)) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a number.');
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getNumberOrArrayOfNumbersValidator(noOfElements) {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            let isNumber = Util_1.Util._isNumber(val);
-    	            let isValidArray = Util_1.Util._isArray(val) && val.length == noOfElements;
-    	            if (!isNumber && !isValidArray) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a number or Array<number>(' +
-    	                    noOfElements +
-    	                    ')');
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getNumberOrAutoValidator() {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            var isNumber = Util_1.Util._isNumber(val);
-    	            var isAuto = val === 'auto';
-    	            if (!(isNumber || isAuto)) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a number or "auto".');
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getStringValidator() {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            if (!Util_1.Util._isString(val)) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a string.');
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getStringOrGradientValidator() {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            const isString = Util_1.Util._isString(val);
-    	            const isGradient = Object.prototype.toString.call(val) === '[object CanvasGradient]' ||
-    	                (val && val['addColorStop']);
-    	            if (!(isString || isGradient)) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a string or a native gradient.');
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getFunctionValidator() {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            if (!Util_1.Util._isFunction(val)) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a function.');
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getNumberArrayValidator() {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            const TypedArray = Int8Array ? Object.getPrototypeOf(Int8Array) : null;
-    	            if (TypedArray && val instanceof TypedArray) {
-    	                return val;
-    	            }
-    	            if (!Util_1.Util._isArray(val)) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a array of numbers.');
-    	            }
-    	            else {
-    	                val.forEach(function (item) {
-    	                    if (!Util_1.Util._isNumber(item)) {
-    	                        Util_1.Util.warn('"' +
-    	                            attr +
-    	                            '" attribute has non numeric element ' +
-    	                            item +
-    	                            '. Make sure that all elements are numbers.');
-    	                    }
-    	                });
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getBooleanValidator() {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            var isBool = val === true || val === false;
-    	            if (!isBool) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be a boolean.');
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	function getComponentValidator(components) {
-    	    if (Global_1.Konva.isUnminified) {
-    	        return function (val, attr) {
-    	            if (val === undefined || val === null) {
-    	                return val;
-    	            }
-    	            if (!Util_1.Util.isObject(val)) {
-    	                Util_1.Util.warn(_formatValue(val) +
-    	                    ' is a not valid value for "' +
-    	                    attr +
-    	                    '" attribute. The value should be an object with properties ' +
-    	                    components);
-    	            }
-    	            return val;
-    	        };
-    	    }
-    	}
-    	return Validators;
-    }
-
-    var hasRequiredFactory;
-
-    function requireFactory () {
-    	if (hasRequiredFactory) return Factory;
-    	hasRequiredFactory = 1;
-    	(function (exports) {
-    		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.Factory = undefined;
-    		const Util_1 = requireUtil();
-    		const Validators_1 = requireValidators();
-    		const GET = 'get';
-    		const SET = 'set';
-    		exports.Factory = {
-    		    addGetterSetter(constructor, attr, def, validator, after) {
-    		        exports.Factory.addGetter(constructor, attr, def);
-    		        exports.Factory.addSetter(constructor, attr, validator, after);
-    		        exports.Factory.addOverloadedGetterSetter(constructor, attr);
-    		    },
-    		    addGetter(constructor, attr, def) {
-    		        var method = GET + Util_1.Util._capitalize(attr);
-    		        constructor.prototype[method] =
-    		            constructor.prototype[method] ||
-    		                function () {
-    		                    const val = this.attrs[attr];
-    		                    return val === undefined ? def : val;
-    		                };
-    		    },
-    		    addSetter(constructor, attr, validator, after) {
-    		        var method = SET + Util_1.Util._capitalize(attr);
-    		        if (!constructor.prototype[method]) {
-    		            exports.Factory.overWriteSetter(constructor, attr, validator, after);
-    		        }
-    		    },
-    		    overWriteSetter(constructor, attr, validator, after) {
-    		        var method = SET + Util_1.Util._capitalize(attr);
-    		        constructor.prototype[method] = function (val) {
-    		            if (validator && val !== undefined && val !== null) {
-    		                val = validator.call(this, val, attr);
-    		            }
-    		            this._setAttr(attr, val);
-    		            if (after) {
-    		                after.call(this);
-    		            }
-    		            return this;
-    		        };
-    		    },
-    		    addComponentsGetterSetter(constructor, attr, components, validator, after) {
-    		        const len = components.length, capitalize = Util_1.Util._capitalize, getter = GET + capitalize(attr), setter = SET + capitalize(attr);
-    		        constructor.prototype[getter] = function () {
-    		            const ret = {};
-    		            for (let n = 0; n < len; n++) {
-    		                const component = components[n];
-    		                ret[component] = this.getAttr(attr + capitalize(component));
-    		            }
-    		            return ret;
-    		        };
-    		        const basicValidator = (0, Validators_1.getComponentValidator)(components);
-    		        constructor.prototype[setter] = function (val) {
-    		            const oldVal = this.attrs[attr];
-    		            if (validator) {
-    		                val = validator.call(this, val, attr);
-    		            }
-    		            if (basicValidator) {
-    		                basicValidator.call(this, val, attr);
-    		            }
-    		            for (const key in val) {
-    		                if (!val.hasOwnProperty(key)) {
-    		                    continue;
-    		                }
-    		                this._setAttr(attr + capitalize(key), val[key]);
-    		            }
-    		            if (!val) {
-    		                components.forEach((component) => {
-    		                    this._setAttr(attr + capitalize(component), undefined);
-    		                });
-    		            }
-    		            this._fireChangeEvent(attr, oldVal, val);
-    		            if (after) {
-    		                after.call(this);
-    		            }
-    		            return this;
-    		        };
-    		        exports.Factory.addOverloadedGetterSetter(constructor, attr);
-    		    },
-    		    addOverloadedGetterSetter(constructor, attr) {
-    		        var capitalizedAttr = Util_1.Util._capitalize(attr), setter = SET + capitalizedAttr, getter = GET + capitalizedAttr;
-    		        constructor.prototype[attr] = function () {
-    		            if (arguments.length) {
-    		                this[setter](arguments[0]);
-    		                return this;
-    		            }
-    		            return this[getter]();
-    		        };
-    		    },
-    		    addDeprecatedGetterSetter(constructor, attr, def, validator) {
-    		        Util_1.Util.error('Adding deprecated ' + attr);
-    		        const method = GET + Util_1.Util._capitalize(attr);
-    		        const message = attr +
-    		            ' property is deprecated and will be removed soon. Look at Konva change log for more information.';
-    		        constructor.prototype[method] = function () {
-    		            Util_1.Util.error(message);
-    		            const val = this.attrs[attr];
-    		            return val === undefined ? def : val;
-    		        };
-    		        exports.Factory.addSetter(constructor, attr, validator, function () {
-    		            Util_1.Util.error(message);
-    		        });
-    		        exports.Factory.addOverloadedGetterSetter(constructor, attr);
-    		    },
-    		    backCompat(constructor, methods) {
-    		        Util_1.Util.each(methods, function (oldMethodName, newMethodName) {
-    		            const method = constructor.prototype[newMethodName];
-    		            const oldGetter = GET + Util_1.Util._capitalize(oldMethodName);
-    		            const oldSetter = SET + Util_1.Util._capitalize(oldMethodName);
-    		            function deprecated() {
-    		                method.apply(this, arguments);
-    		                Util_1.Util.error('"' +
-    		                    oldMethodName +
-    		                    '" method is deprecated and will be removed soon. Use ""' +
-    		                    newMethodName +
-    		                    '" instead.');
-    		            }
-    		            constructor.prototype[oldMethodName] = deprecated;
-    		            constructor.prototype[oldGetter] = deprecated;
-    		            constructor.prototype[oldSetter] = deprecated;
-    		        });
-    		    },
-    		    afterSetFilter() {
-    		        this._filterUpToDate = false;
-    		    },
-    		}; 
-    	} (Factory));
-    	return Factory;
-    }
-
     var Canvas = {};
 
     var Context = {};
@@ -96586,7 +96571,7 @@ void main() {
     	if (hasRequiredContext) return Context;
     	hasRequiredContext = 1;
     	Object.defineProperty(Context, "__esModule", { value: true });
-    	Context.HitContext = Context.SceneContext = Context.Context = undefined;
+    	Context.HitContext = Context.SceneContext = Context.Context = void 0;
     	const Util_1 = requireUtil();
     	const Global_1 = requireGlobal();
     	function simplifyArray(arr) {
@@ -97075,7 +97060,7 @@ void main() {
     	    }
     	    _applyShadow(shape) {
     	        var _a, _b, _c;
-    	        const color = (_a = shape.getShadowRGBA()) !== null && _a !== undefined ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== undefined ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== undefined ? _c : {
+    	        const color = (_a = shape.getShadowRGBA()) !== null && _a !== void 0 ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== void 0 ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== void 0 ? _c : {
     	            x: 0,
     	            y: 0,
     	        }, scale = shape.getAbsoluteScale(), ratio = this.canvas.getPixelRatio(), scaleX = scale.x * ratio, scaleY = scale.y * ratio;
@@ -97134,12 +97119,10 @@ void main() {
     	if (hasRequiredCanvas) return Canvas;
     	hasRequiredCanvas = 1;
     	Object.defineProperty(Canvas, "__esModule", { value: true });
-    	Canvas.HitCanvas = Canvas.SceneCanvas = Canvas.Canvas = undefined;
+    	Canvas.HitCanvas = Canvas.SceneCanvas = Canvas.Canvas = void 0;
     	const Util_1 = requireUtil();
     	const Context_1 = requireContext();
     	const Global_1 = requireGlobal();
-    	const Factory_1 = requireFactory();
-    	const Validators_1 = requireValidators();
     	let _pixelRatio;
     	function getDevicePixelRatio() {
     	    if (_pixelRatio) {
@@ -97228,7 +97211,6 @@ void main() {
     	    }
     	};
     	Canvas.Canvas = Canvas$1;
-    	Factory_1.Factory.addGetterSetter(Canvas$1, 'pixelRatio', undefined, (0, Validators_1.getNumberValidator)());
     	class SceneCanvas extends Canvas$1 {
     	    constructor(config = { width: 0, height: 0, willReadFrequently: false }) {
     	        super(config);
@@ -97260,7 +97242,7 @@ void main() {
     	hasRequiredDragAndDrop = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.DD = undefined;
+    		exports.DD = void 0;
     		const Global_1 = requireGlobal();
     		const Util_1 = requireUtil();
     		exports.DD = {
@@ -97375,20 +97357,357 @@ void main() {
     	return DragAndDrop;
     }
 
+    var Factory = {};
+
+    var Validators = {};
+
+    var hasRequiredValidators;
+
+    function requireValidators () {
+    	if (hasRequiredValidators) return Validators;
+    	hasRequiredValidators = 1;
+    	Object.defineProperty(Validators, "__esModule", { value: true });
+    	Validators.RGBComponent = RGBComponent;
+    	Validators.alphaComponent = alphaComponent;
+    	Validators.getNumberValidator = getNumberValidator;
+    	Validators.getNumberOrArrayOfNumbersValidator = getNumberOrArrayOfNumbersValidator;
+    	Validators.getNumberOrAutoValidator = getNumberOrAutoValidator;
+    	Validators.getStringValidator = getStringValidator;
+    	Validators.getStringOrGradientValidator = getStringOrGradientValidator;
+    	Validators.getFunctionValidator = getFunctionValidator;
+    	Validators.getNumberArrayValidator = getNumberArrayValidator;
+    	Validators.getBooleanValidator = getBooleanValidator;
+    	Validators.getComponentValidator = getComponentValidator;
+    	const Global_1 = requireGlobal();
+    	const Util_1 = requireUtil();
+    	function _formatValue(val) {
+    	    if (Util_1.Util._isString(val)) {
+    	        return '"' + val + '"';
+    	    }
+    	    if (Object.prototype.toString.call(val) === '[object Number]') {
+    	        return val;
+    	    }
+    	    if (Util_1.Util._isBoolean(val)) {
+    	        return val;
+    	    }
+    	    return Object.prototype.toString.call(val);
+    	}
+    	function RGBComponent(val) {
+    	    if (val > 255) {
+    	        return 255;
+    	    }
+    	    else if (val < 0) {
+    	        return 0;
+    	    }
+    	    return Math.round(val);
+    	}
+    	function alphaComponent(val) {
+    	    if (val > 1) {
+    	        return 1;
+    	    }
+    	    else if (val < 0.0001) {
+    	        return 0.0001;
+    	    }
+    	    return val;
+    	}
+    	function getNumberValidator() {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            if (!Util_1.Util._isNumber(val)) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a number.');
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getNumberOrArrayOfNumbersValidator(noOfElements) {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            let isNumber = Util_1.Util._isNumber(val);
+    	            let isValidArray = Util_1.Util._isArray(val) && val.length == noOfElements;
+    	            if (!isNumber && !isValidArray) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a number or Array<number>(' +
+    	                    noOfElements +
+    	                    ')');
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getNumberOrAutoValidator() {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            const isNumber = Util_1.Util._isNumber(val);
+    	            const isAuto = val === 'auto';
+    	            if (!(isNumber || isAuto)) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a number or "auto".');
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getStringValidator() {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            if (!Util_1.Util._isString(val)) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a string.');
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getStringOrGradientValidator() {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            const isString = Util_1.Util._isString(val);
+    	            const isGradient = Object.prototype.toString.call(val) === '[object CanvasGradient]' ||
+    	                (val && val['addColorStop']);
+    	            if (!(isString || isGradient)) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a string or a native gradient.');
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getFunctionValidator() {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            if (!Util_1.Util._isFunction(val)) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a function.');
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getNumberArrayValidator() {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            const TypedArray = Int8Array ? Object.getPrototypeOf(Int8Array) : null;
+    	            if (TypedArray && val instanceof TypedArray) {
+    	                return val;
+    	            }
+    	            if (!Util_1.Util._isArray(val)) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a array of numbers.');
+    	            }
+    	            else {
+    	                val.forEach(function (item) {
+    	                    if (!Util_1.Util._isNumber(item)) {
+    	                        Util_1.Util.warn('"' +
+    	                            attr +
+    	                            '" attribute has non numeric element ' +
+    	                            item +
+    	                            '. Make sure that all elements are numbers.');
+    	                    }
+    	                });
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getBooleanValidator() {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            const isBool = val === true || val === false;
+    	            if (!isBool) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be a boolean.');
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	function getComponentValidator(components) {
+    	    if (Global_1.Konva.isUnminified) {
+    	        return function (val, attr) {
+    	            if (val === undefined || val === null) {
+    	                return val;
+    	            }
+    	            if (!Util_1.Util.isObject(val)) {
+    	                Util_1.Util.warn(_formatValue(val) +
+    	                    ' is a not valid value for "' +
+    	                    attr +
+    	                    '" attribute. The value should be an object with properties ' +
+    	                    components);
+    	            }
+    	            return val;
+    	        };
+    	    }
+    	}
+    	return Validators;
+    }
+
+    var hasRequiredFactory;
+
+    function requireFactory () {
+    	if (hasRequiredFactory) return Factory;
+    	hasRequiredFactory = 1;
+    	(function (exports) {
+    		Object.defineProperty(exports, "__esModule", { value: true });
+    		exports.Factory = void 0;
+    		const Util_1 = requireUtil();
+    		const Validators_1 = requireValidators();
+    		const GET = 'get';
+    		const SET = 'set';
+    		exports.Factory = {
+    		    addGetterSetter(constructor, attr, def, validator, after) {
+    		        exports.Factory.addGetter(constructor, attr, def);
+    		        exports.Factory.addSetter(constructor, attr, validator, after);
+    		        exports.Factory.addOverloadedGetterSetter(constructor, attr);
+    		    },
+    		    addGetter(constructor, attr, def) {
+    		        const method = GET + Util_1.Util._capitalize(attr);
+    		        constructor.prototype[method] =
+    		            constructor.prototype[method] ||
+    		                function () {
+    		                    const val = this.attrs[attr];
+    		                    return val === undefined ? def : val;
+    		                };
+    		    },
+    		    addSetter(constructor, attr, validator, after) {
+    		        const method = SET + Util_1.Util._capitalize(attr);
+    		        if (!constructor.prototype[method]) {
+    		            exports.Factory.overWriteSetter(constructor, attr, validator, after);
+    		        }
+    		    },
+    		    overWriteSetter(constructor, attr, validator, after) {
+    		        const method = SET + Util_1.Util._capitalize(attr);
+    		        constructor.prototype[method] = function (val) {
+    		            if (validator && val !== undefined && val !== null) {
+    		                val = validator.call(this, val, attr);
+    		            }
+    		            this._setAttr(attr, val);
+    		            if (after) {
+    		                after.call(this);
+    		            }
+    		            return this;
+    		        };
+    		    },
+    		    addComponentsGetterSetter(constructor, attr, components, validator, after) {
+    		        const len = components.length, capitalize = Util_1.Util._capitalize, getter = GET + capitalize(attr), setter = SET + capitalize(attr);
+    		        constructor.prototype[getter] = function () {
+    		            const ret = {};
+    		            for (let n = 0; n < len; n++) {
+    		                const component = components[n];
+    		                ret[component] = this.getAttr(attr + capitalize(component));
+    		            }
+    		            return ret;
+    		        };
+    		        const basicValidator = (0, Validators_1.getComponentValidator)(components);
+    		        constructor.prototype[setter] = function (val) {
+    		            const oldVal = this.attrs[attr];
+    		            if (validator) {
+    		                val = validator.call(this, val, attr);
+    		            }
+    		            if (basicValidator) {
+    		                basicValidator.call(this, val, attr);
+    		            }
+    		            for (const key in val) {
+    		                if (!val.hasOwnProperty(key)) {
+    		                    continue;
+    		                }
+    		                this._setAttr(attr + capitalize(key), val[key]);
+    		            }
+    		            if (!val) {
+    		                components.forEach((component) => {
+    		                    this._setAttr(attr + capitalize(component), undefined);
+    		                });
+    		            }
+    		            this._fireChangeEvent(attr, oldVal, val);
+    		            if (after) {
+    		                after.call(this);
+    		            }
+    		            return this;
+    		        };
+    		        exports.Factory.addOverloadedGetterSetter(constructor, attr);
+    		    },
+    		    addOverloadedGetterSetter(constructor, attr) {
+    		        const capitalizedAttr = Util_1.Util._capitalize(attr), setter = SET + capitalizedAttr, getter = GET + capitalizedAttr;
+    		        constructor.prototype[attr] = function () {
+    		            if (arguments.length) {
+    		                this[setter](arguments[0]);
+    		                return this;
+    		            }
+    		            return this[getter]();
+    		        };
+    		    },
+    		    addDeprecatedGetterSetter(constructor, attr, def, validator) {
+    		        Util_1.Util.error('Adding deprecated ' + attr);
+    		        const method = GET + Util_1.Util._capitalize(attr);
+    		        const message = attr +
+    		            ' property is deprecated and will be removed soon. Look at Konva change log for more information.';
+    		        constructor.prototype[method] = function () {
+    		            Util_1.Util.error(message);
+    		            const val = this.attrs[attr];
+    		            return val === undefined ? def : val;
+    		        };
+    		        exports.Factory.addSetter(constructor, attr, validator, function () {
+    		            Util_1.Util.error(message);
+    		        });
+    		        exports.Factory.addOverloadedGetterSetter(constructor, attr);
+    		    },
+    		    backCompat(constructor, methods) {
+    		        Util_1.Util.each(methods, function (oldMethodName, newMethodName) {
+    		            const method = constructor.prototype[newMethodName];
+    		            const oldGetter = GET + Util_1.Util._capitalize(oldMethodName);
+    		            const oldSetter = SET + Util_1.Util._capitalize(oldMethodName);
+    		            function deprecated() {
+    		                method.apply(this, arguments);
+    		                Util_1.Util.error('"' +
+    		                    oldMethodName +
+    		                    '" method is deprecated and will be removed soon. Use ""' +
+    		                    newMethodName +
+    		                    '" instead.');
+    		            }
+    		            constructor.prototype[oldMethodName] = deprecated;
+    		            constructor.prototype[oldGetter] = deprecated;
+    		            constructor.prototype[oldSetter] = deprecated;
+    		        });
+    		    },
+    		    afterSetFilter() {
+    		        this._filterUpToDate = false;
+    		    },
+    		}; 
+    	} (Factory));
+    	return Factory;
+    }
+
     var hasRequiredNode;
 
     function requireNode () {
     	if (hasRequiredNode) return Node;
     	hasRequiredNode = 1;
     	Object.defineProperty(Node, "__esModule", { value: true });
-    	Node.Node = undefined;
-    	const Util_1 = requireUtil();
-    	const Factory_1 = requireFactory();
+    	Node.Node = void 0;
     	const Canvas_1 = requireCanvas();
-    	const Global_1 = requireGlobal();
     	const DragAndDrop_1 = requireDragAndDrop();
+    	const Factory_1 = requireFactory();
+    	const Global_1 = requireGlobal();
+    	const Util_1 = requireUtil();
     	const Validators_1 = requireValidators();
-    	const ABSOLUTE_OPACITY = 'absoluteOpacity', ALL_LISTENERS = 'allEventListeners', ABSOLUTE_TRANSFORM = 'absoluteTransform', ABSOLUTE_SCALE = 'absoluteScale', CANVAS = 'canvas', CHANGE = 'Change', CHILDREN = 'children', KONVA = 'konva', LISTENING = 'listening', MOUSEENTER = 'mouseenter', MOUSELEAVE = 'mouseleave', SET = 'set', SHAPE = 'Shape', SPACE = ' ', STAGE = 'stage', TRANSFORM = 'transform', UPPER_STAGE = 'Stage', VISIBLE = 'visible', TRANSFORM_CHANGE_STR = [
+    	const ABSOLUTE_OPACITY = 'absoluteOpacity', ALL_LISTENERS = 'allEventListeners', ABSOLUTE_TRANSFORM = 'absoluteTransform', ABSOLUTE_SCALE = 'absoluteScale', CANVAS = 'canvas', CHANGE = 'Change', CHILDREN = 'children', KONVA = 'konva', LISTENING = 'listening', MOUSEENTER = 'mouseenter', MOUSELEAVE = 'mouseleave', POINTERENTER = 'pointerenter', POINTERLEAVE = 'pointerleave', TOUCHENTER = 'touchenter', TOUCHLEAVE = 'touchleave', SET = 'set', SHAPE = 'Shape', SPACE = ' ', STAGE = 'stage', TRANSFORM = 'transform', UPPER_STAGE = 'Stage', VISIBLE = 'visible', TRANSFORM_CHANGE_STR = [
     	    'xChange.konva',
     	    'yChange.konva',
     	    'scaleXChange.konva',
@@ -97467,8 +97786,8 @@ void main() {
     	    }
     	    clearCache() {
     	        if (this._cache.has(CANVAS)) {
-    	            const { scene, filter, hit } = this._cache.get(CANVAS);
-    	            Util_1.Util.releaseCanvas(scene, filter, hit);
+    	            const { scene, filter, hit, buffer } = this._cache.get(CANVAS);
+    	            Util_1.Util.releaseCanvas(scene, filter, hit, buffer);
     	            this._cache.delete(CANVAS);
     	        }
     	        this._clearSelfAndDescendantCache();
@@ -97512,6 +97831,11 @@ void main() {
     	            width: width,
     	            height: height,
     	        }), sceneContext = cachedSceneCanvas.getContext(), hitContext = cachedHitCanvas.getContext();
+    	        const bufferCanvas = new Canvas_1.SceneCanvas({
+    	            width: cachedSceneCanvas.width / cachedSceneCanvas.pixelRatio + Math.abs(x),
+    	            height: cachedSceneCanvas.height / cachedSceneCanvas.pixelRatio + Math.abs(y),
+    	            pixelRatio: cachedSceneCanvas.pixelRatio,
+    	        }), bufferContext = bufferCanvas.getContext();
     	        cachedHitCanvas.isCache = true;
     	        cachedSceneCanvas.isCache = true;
     	        this._cache.delete(CANVAS);
@@ -97522,12 +97846,16 @@ void main() {
     	        }
     	        sceneContext.save();
     	        hitContext.save();
+    	        bufferContext.save();
     	        sceneContext.translate(-x, -y);
     	        hitContext.translate(-x, -y);
+    	        bufferContext.translate(-x, -y);
+    	        bufferCanvas.x = x;
+    	        bufferCanvas.y = y;
     	        this._isUnderCache = true;
     	        this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
     	        this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
-    	        this.drawScene(cachedSceneCanvas, this);
+    	        this.drawScene(cachedSceneCanvas, this, bufferCanvas);
     	        this.drawHit(cachedHitCanvas, this);
     	        this._isUnderCache = false;
     	        sceneContext.restore();
@@ -97546,6 +97874,7 @@ void main() {
     	            scene: cachedSceneCanvas,
     	            filter: cachedFilterCanvas,
     	            hit: cachedHitCanvas,
+    	            buffer: bufferCanvas,
     	            x: x,
     	            y: y,
     	        });
@@ -97638,23 +97967,22 @@ void main() {
     	        return sceneCanvas;
     	    }
     	    on(evtStr, handler) {
-    	        this._cache && this._cache.delete(ALL_LISTENERS);
+    	        if (this._cache) {
+    	            this._cache.delete(ALL_LISTENERS);
+    	        }
     	        if (arguments.length === 3) {
     	            return this._delegate.apply(this, arguments);
     	        }
-    	        let events = evtStr.split(SPACE), len = events.length, n, event, parts, baseEvent, name;
-    	        for (n = 0; n < len; n++) {
-    	            event = events[n];
-    	            parts = event.split('.');
-    	            baseEvent = parts[0];
-    	            name = parts[1] || '';
+    	        const events = evtStr.split(SPACE);
+    	        for (let n = 0; n < events.length; n++) {
+    	            const event = events[n];
+    	            const parts = event.split('.');
+    	            const baseEvent = parts[0];
+    	            const name = parts[1] || '';
     	            if (!this.eventListeners[baseEvent]) {
     	                this.eventListeners[baseEvent] = [];
     	            }
-    	            this.eventListeners[baseEvent].push({
-    	                name: name,
-    	                handler: handler,
-    	            });
+    	            this.eventListeners[baseEvent].push({ name, handler });
     	        }
     	        return this;
     	    }
@@ -98286,7 +98614,7 @@ void main() {
     	        var _a, _b;
     	        const m = this._cache.get(TRANSFORM) || new Util_1.Transform();
     	        m.reset();
-    	        const x = this.x(), y = this.y(), rotation = Global_1.Konva.getAngle(this.rotation()), scaleX = (_a = this.attrs.scaleX) !== null && _a !== undefined ? _a : 1, scaleY = (_b = this.attrs.scaleY) !== null && _b !== undefined ? _b : 1, skewX = this.attrs.skewX || 0, skewY = this.attrs.skewY || 0, offsetX = this.attrs.offsetX || 0, offsetY = this.attrs.offsetY || 0;
+    	        const x = this.x(), y = this.y(), rotation = Global_1.Konva.getAngle(this.rotation()), scaleX = (_a = this.attrs.scaleX) !== null && _a !== void 0 ? _a : 1, scaleY = (_b = this.attrs.scaleY) !== null && _b !== void 0 ? _b : 1, skewX = this.attrs.skewX || 0, skewY = this.attrs.skewY || 0, offsetX = this.attrs.offsetX || 0, offsetY = this.attrs.offsetY || 0;
     	        if (x !== 0 || y !== 0) {
     	            m.translate(x, y);
     	        }
@@ -98488,7 +98816,7 @@ void main() {
     	    _requestDraw() {
     	        if (Global_1.Konva.autoDrawEnabled) {
     	            const drawNode = this.getLayer() || this.getStage();
-    	            drawNode === null || drawNode === undefined ? undefined : drawNode.batchDraw();
+    	            drawNode === null || drawNode === void 0 ? void 0 : drawNode.batchDraw();
     	        }
     	    }
     	    _setAttr(key, val) {
@@ -98522,14 +98850,22 @@ void main() {
     	        if (evt && this.nodeType === SHAPE) {
     	            evt.target = this;
     	        }
-    	        const shouldStop = (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
+    	        const nonBubbling = [
+    	            MOUSEENTER,
+    	            MOUSELEAVE,
+    	            POINTERENTER,
+    	            POINTERLEAVE,
+    	            TOUCHENTER,
+    	            TOUCHLEAVE,
+    	        ];
+    	        const shouldStop = nonBubbling.indexOf(eventType) !== -1 &&
     	            ((compareShape &&
     	                (this === compareShape ||
     	                    (this.isAncestorOf && this.isAncestorOf(compareShape)))) ||
     	                (this.nodeType === 'Stage' && !compareShape));
     	        if (!shouldStop) {
     	            this._fire(eventType, evt);
-    	            const stopBubble = (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
+    	            const stopBubble = nonBubbling.indexOf(eventType) !== -1 &&
     	                compareShape &&
     	                compareShape.isAncestorOf &&
     	                compareShape.isAncestorOf(this) &&
@@ -98549,13 +98885,13 @@ void main() {
     	    }
     	    _getProtoListeners(eventType) {
     	        var _a, _b, _c;
-    	        const allListeners = (_a = this._cache.get(ALL_LISTENERS)) !== null && _a !== undefined ? _a : {};
-    	        let events = allListeners === null || allListeners === undefined ? undefined : allListeners[eventType];
+    	        const allListeners = (_a = this._cache.get(ALL_LISTENERS)) !== null && _a !== void 0 ? _a : {};
+    	        let events = allListeners === null || allListeners === void 0 ? void 0 : allListeners[eventType];
     	        if (events === undefined) {
     	            events = [];
     	            let obj = Object.getPrototypeOf(this);
     	            while (obj) {
-    	                const hierarchyEvents = (_c = (_b = obj.eventListeners) === null || _b === undefined ? undefined : _b[eventType]) !== null && _c !== undefined ? _c : [];
+    	                const hierarchyEvents = (_c = (_b = obj.eventListeners) === null || _b === void 0 ? void 0 : _b[eventType]) !== null && _c !== void 0 ? _c : [];
     	                events.push(...hierarchyEvents);
     	                obj = Object.getPrototypeOf(obj);
     	            }
@@ -98570,13 +98906,13 @@ void main() {
     	        evt.type = eventType;
     	        const topListeners = this._getProtoListeners(eventType);
     	        if (topListeners) {
-    	            for (var i = 0; i < topListeners.length; i++) {
+    	            for (let i = 0; i < topListeners.length; i++) {
     	                topListeners[i].handler.call(this, evt);
     	            }
     	        }
     	        const selfListeners = this.eventListeners[eventType];
     	        if (selfListeners) {
-    	            for (var i = 0; i < selfListeners.length; i++) {
+    	            for (let i = 0; i < selfListeners.length; i++) {
     	                selfListeners[i].handler.call(this, evt);
     	            }
     	        }
@@ -98821,7 +99157,7 @@ void main() {
     	if (hasRequiredContainer) return Container;
     	hasRequiredContainer = 1;
     	Object.defineProperty(Container, "__esModule", { value: true });
-    	Container.Container = undefined;
+    	Container.Container = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -98831,17 +99167,11 @@ void main() {
     	        this.children = [];
     	    }
     	    getChildren(filterFunc) {
-    	        if (!filterFunc) {
-    	            return this.children || [];
-    	        }
     	        const children = this.children || [];
-    	        const results = [];
-    	        children.forEach(function (child) {
-    	            if (filterFunc(child)) {
-    	                results.push(child);
-    	            }
-    	        });
-    	        return results;
+    	        if (filterFunc) {
+    	            return children.filter(filterFunc);
+    	        }
+    	        return children;
     	    }
     	    hasChildren() {
     	        return this.getChildren().length > 0;
@@ -98978,13 +99308,13 @@ void main() {
     	        if (this.isCached()) {
     	            return;
     	        }
-    	        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (node) {
+    	        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (node) {
     	            node._clearSelfAndDescendantCache(attr);
     	        });
     	    }
     	    _setChildrenIndices() {
     	        var _a;
-    	        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (child, n) {
+    	        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child, n) {
     	            child.index = n;
     	        });
     	        this._requestDraw();
@@ -99055,7 +99385,7 @@ void main() {
     	            context.save();
     	            context._applyGlobalCompositeOperation(this);
     	        }
-    	        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (child) {
+    	        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
     	            child[drawMethod](canvas, top, bufferCanvas);
     	        });
     	        if (hasComposition) {
@@ -99077,7 +99407,7 @@ void main() {
     	            height: 0,
     	        };
     	        const that = this;
-    	        (_a = this.children) === null || _a === undefined ? undefined : _a.forEach(function (child) {
+    	        (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
     	            if (!child.visible()) {
     	                return;
     	            }
@@ -99209,7 +99539,7 @@ void main() {
     	hasRequiredStage = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.Stage = exports.stages = undefined;
+    		exports.Stage = exports.stages = void 0;
     		const Util_1 = requireUtil();
     		const Factory_1 = requireFactory();
     		const Container_1 = requireContainer();
@@ -99235,6 +99565,7 @@ void main() {
     		    [POINTERMOVE, '_pointermove'],
     		    [POINTERUP, '_pointerup'],
     		    [POINTERCANCEL, '_pointercancel'],
+    		    [POINTERLEAVE, '_pointerleave'],
     		    [LOSTPOINTERCAPTURE, '_lostpointercapture'],
     		];
     		const EVENTS_MAP = {
@@ -99336,12 +99667,12 @@ void main() {
     		    }
     		    setContainer(container) {
     		        if (typeof container === STRING) {
+    		            let id;
     		            if (container.charAt(0) === '.') {
     		                const className = container.slice(1);
     		                container = document.getElementsByClassName(className)[0];
     		            }
     		            else {
-    		                var id;
     		                if (container.charAt(0) !== '#') {
     		                    id = container;
     		                }
@@ -99926,7 +100257,7 @@ void main() {
     	hasRequiredShape = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.Shape = exports.shapes = undefined;
+    		exports.Shape = exports.shapes = void 0;
     		const Global_1 = requireGlobal();
     		const Util_1 = requireUtil();
     		const Factory_1 = requireFactory();
@@ -100159,7 +100490,7 @@ void main() {
     		    }
     		    _useBufferCanvas(forceFill) {
     		        var _a;
-    		        const perfectDrawEnabled = (_a = this.attrs.perfectDrawEnabled) !== null && _a !== undefined ? _a : true;
+    		        const perfectDrawEnabled = (_a = this.attrs.perfectDrawEnabled) !== null && _a !== void 0 ? _a : true;
     		        if (!perfectDrawEnabled) {
     		            return false;
     		        }
@@ -100244,8 +100575,8 @@ void main() {
     		    }
     		    drawScene(can, top, bufferCanvas) {
     		        const layer = this.getLayer();
-    		        let canvas = can || layer.getCanvas(), context = canvas.getContext(), cachedCanvas = this._getCanvasCache(), drawFunc = this.getSceneFunc(), hasShadow = this.hasShadow(), stage, bufferContext;
-    		        const skipBuffer = canvas.isCache;
+    		        const canvas = can || layer.getCanvas(), context = canvas.getContext(), cachedCanvas = this._getCanvasCache(), drawFunc = this.getSceneFunc(), hasShadow = this.hasShadow();
+    		        let stage;
     		        const cachingSelf = top === this;
     		        if (!this.isVisible() && !cachingSelf) {
     		            return this;
@@ -100262,14 +100593,14 @@ void main() {
     		            return this;
     		        }
     		        context.save();
-    		        if (this._useBufferCanvas() && !skipBuffer) {
+    		        if (this._useBufferCanvas() && true) {
     		            stage = this.getStage();
     		            const bc = bufferCanvas || stage.bufferCanvas;
-    		            bufferContext = bc.getContext();
+    		            const bufferContext = bc.getContext();
     		            bufferContext.clear();
     		            bufferContext.save();
     		            bufferContext._applyLineJoin(this);
-    		            var o = this.getAbsoluteTransform(top).getMatrix();
+    		            const o = this.getAbsoluteTransform(top).getMatrix();
     		            bufferContext.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
     		            drawFunc.call(this, bufferContext, this);
     		            bufferContext.restore();
@@ -100279,12 +100610,12 @@ void main() {
     		            }
     		            context._applyOpacity(this);
     		            context._applyGlobalCompositeOperation(this);
-    		            context.drawImage(bc._canvas, 0, 0, bc.width / ratio, bc.height / ratio);
+    		            context.drawImage(bc._canvas, bc.x || 0, bc.y || 0, bc.width / ratio, bc.height / ratio);
     		        }
     		        else {
     		            context._applyLineJoin(this);
     		            if (!cachingSelf) {
-    		                var o = this.getAbsoluteTransform(top).getMatrix();
+    		                const o = this.getAbsoluteTransform(top).getMatrix();
     		                context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
     		                context._applyOpacity(this);
     		                context._applyGlobalCompositeOperation(this);
@@ -100479,7 +100810,7 @@ void main() {
     	if (hasRequiredLayer) return Layer;
     	hasRequiredLayer = 1;
     	Object.defineProperty(Layer, "__esModule", { value: true });
-    	Layer.Layer = undefined;
+    	Layer.Layer = void 0;
     	const Util_1 = requireUtil();
     	const Container_1 = requireContainer();
     	const Node_1 = requireNode();
@@ -100724,7 +101055,7 @@ void main() {
     	        }
     	        return {};
     	    }
-    	    drawScene(can, top) {
+    	    drawScene(can, top, bufferCanvas) {
     	        const layer = this.getLayer(), canvas = can || (layer && layer.getCanvas());
     	        this._fire(BEFORE_DRAW, {
     	            node: this,
@@ -100732,7 +101063,7 @@ void main() {
     	        if (this.clearBeforeDraw()) {
     	            canvas.getContext().clear();
     	        }
-    	        Container_1.Container.prototype.drawScene.call(this, canvas, top);
+    	        Container_1.Container.prototype.drawScene.call(this, canvas, top, bufferCanvas);
     	        this._fire(DRAW, {
     	            node: this,
     	        });
@@ -100797,7 +101128,7 @@ void main() {
     	if (hasRequiredFastLayer) return FastLayer;
     	hasRequiredFastLayer = 1;
     	Object.defineProperty(FastLayer, "__esModule", { value: true });
-    	FastLayer.FastLayer = undefined;
+    	FastLayer.FastLayer = void 0;
     	const Util_1 = requireUtil();
     	const Layer_1 = requireLayer();
     	const Global_1 = requireGlobal();
@@ -100822,7 +101153,7 @@ void main() {
     	if (hasRequiredGroup) return Group;
     	hasRequiredGroup = 1;
     	Object.defineProperty(Group, "__esModule", { value: true });
-    	Group.Group = undefined;
+    	Group.Group = void 0;
     	const Util_1 = requireUtil();
     	const Container_1 = requireContainer();
     	const Global_1 = requireGlobal();
@@ -100848,7 +101179,7 @@ void main() {
     	if (hasRequiredAnimation) return Animation;
     	hasRequiredAnimation = 1;
     	Object.defineProperty(Animation, "__esModule", { value: true });
-    	Animation.Animation = undefined;
+    	Animation.Animation = void 0;
     	const Global_1 = requireGlobal();
     	const Util_1 = requireUtil();
     	const now = (function () {
@@ -101004,7 +101335,7 @@ void main() {
     	hasRequiredTween = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.Easings = exports.Tween = undefined;
+    		exports.Easings = exports.Tween = void 0;
     		const Util_1 = requireUtil();
     		const Animation_1 = requireAnimation();
     		const Node_1 = requireNode();
@@ -101360,10 +101691,21 @@ void main() {
     		    destroy() {
     		        const nodeId = this.node._id, thisId = this._id, attrs = Tween.tweens[nodeId];
     		        this.pause();
+    		        if (this.anim) {
+    		            this.anim.stop();
+    		        }
     		        for (const key in attrs) {
     		            delete Tween.tweens[nodeId][key];
     		        }
     		        delete Tween.attrs[nodeId][thisId];
+    		        if (Tween.tweens[nodeId]) {
+    		            if (Object.keys(Tween.tweens[nodeId]).length === 0) {
+    		                delete Tween.tweens[nodeId];
+    		            }
+    		            if (Object.keys(Tween.attrs[nodeId]).length === 0) {
+    		                delete Tween.attrs[nodeId];
+    		            }
+    		        }
     		    }
     		}
     		exports.Tween = Tween;
@@ -101537,7 +101879,7 @@ void main() {
     	hasRequired_CoreInternals = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.Konva = undefined;
+    		exports.Konva = void 0;
     		const Global_1 = requireGlobal();
     		const Util_1 = requireUtil();
     		const Node_1 = requireNode();
@@ -101584,7 +101926,7 @@ void main() {
     	if (hasRequiredArc) return Arc;
     	hasRequiredArc = 1;
     	Object.defineProperty(Arc, "__esModule", { value: true });
-    	Arc.Arc = undefined;
+    	Arc.Arc = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Global_1 = requireGlobal();
@@ -101635,7 +101977,12 @@ void main() {
     	Arc.Arc = Arc$1;
     	Arc$1.prototype._centroid = true;
     	Arc$1.prototype.className = 'Arc';
-    	Arc$1.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+    	Arc$1.prototype._attrsAffectingSize = [
+    	    'innerRadius',
+    	    'outerRadius',
+    	    'angle',
+    	    'clockwise',
+    	];
     	(0, Global_2._registerNode)(Arc$1);
     	Factory_1.Factory.addGetterSetter(Arc$1, 'innerRadius', 0, (0, Validators_1.getNumberValidator)());
     	Factory_1.Factory.addGetterSetter(Arc$1, 'outerRadius', 0, (0, Validators_1.getNumberValidator)());
@@ -101654,7 +102001,7 @@ void main() {
     	if (hasRequiredLine) return Line;
     	hasRequiredLine = 1;
     	Object.defineProperty(Line, "__esModule", { value: true });
-    	Line.Line = undefined;
+    	Line.Line = void 0;
     	const Factory_1 = requireFactory();
     	const Global_1 = requireGlobal();
     	const Shape_1 = requireShape();
@@ -101687,15 +102034,16 @@ void main() {
     	        });
     	    }
     	    _sceneFunc(context) {
-    	        let points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier(), tp, len, n;
+    	        const points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier();
     	        if (!length) {
     	            return;
     	        }
+    	        let n = 0;
     	        context.beginPath();
     	        context.moveTo(points[0], points[1]);
     	        if (tension !== 0 && length > 4) {
-    	            tp = this.getTensionPoints();
-    	            len = tp.length;
+    	            const tp = this.getTensionPoints();
+    	            const len = tp.length;
     	            n = closed ? 0 : 4;
     	            if (!closed) {
     	                context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
@@ -101825,7 +102173,7 @@ void main() {
     	hasRequiredBezierFunctions = 1;
     	(function (exports) {
     		Object.defineProperty(exports, "__esModule", { value: true });
-    		exports.t2length = exports.getQuadraticArcLength = exports.getCubicArcLength = exports.binomialCoefficients = exports.cValues = exports.tValues = undefined;
+    		exports.t2length = exports.getQuadraticArcLength = exports.getCubicArcLength = exports.binomialCoefficients = exports.cValues = exports.tValues = void 0;
     		exports.tValues = [
     		    [],
     		    [],
@@ -102623,10 +102971,10 @@ void main() {
     	if (hasRequiredPath) return Path;
     	hasRequiredPath = 1;
     	Object.defineProperty(Path, "__esModule", { value: true });
-    	Path.Path = undefined;
+    	Path.Path = void 0;
     	const Factory_1 = requireFactory();
-    	const Shape_1 = requireShape();
     	const Global_1 = requireGlobal();
+    	const Shape_1 = requireShape();
     	const BezierFunctions_1 = requireBezierFunctions();
     	let Path$1 = class Path extends Shape_1.Shape {
     	    constructor(config) {
@@ -102663,10 +103011,10 @@ void main() {
     	                    context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
     	                    break;
     	                case 'A':
-    	                    var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7];
-    	                    var r = rx > ry ? rx : ry;
-    	                    var scaleX = rx > ry ? 1 : rx / ry;
-    	                    var scaleY = rx > ry ? ry / rx : 1;
+    	                    const cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7];
+    	                    const r = rx > ry ? rx : ry;
+    	                    const scaleX = rx > ry ? 1 : rx / ry;
+    	                    const scaleY = rx > ry ? ry / rx : 1;
     	                    context.translate(cx, cy);
     	                    context.rotate(psi);
     	                    context.scale(scaleX, scaleY);
@@ -102779,11 +103127,20 @@ void main() {
     	            };
     	        }
     	        if (length < 0.01) {
-    	            points = dataArray[i].points.slice(0, 2);
-    	            return {
-    	                x: points[0],
-    	                y: points[1],
-    	            };
+    	            const cmd = dataArray[i].command;
+    	            if (cmd === 'M') {
+    	                points = dataArray[i].points.slice(0, 2);
+    	                return {
+    	                    x: points[0],
+    	                    y: points[1],
+    	                };
+    	            }
+    	            else {
+    	                return {
+    	                    x: dataArray[i].start.x,
+    	                    y: dataArray[i].start.y,
+    	                };
+    	            }
     	        }
     	        const cp = dataArray[i];
     	        const p = cp.points;
@@ -102799,15 +103156,16 @@ void main() {
     	                    return (0, BezierFunctions_1.getQuadraticArcLength)([cp.start.x, p[0], p[2]], [cp.start.y, p[1], p[3]], i);
     	                }), cp.start.x, cp.start.y, p[0], p[1], p[2], p[3]);
     	            case 'A':
-    	                var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6];
+    	                const cx = p[0], cy = p[1], rx = p[2], ry = p[3], dTheta = p[5], psi = p[6];
+    	                let theta = p[4];
     	                theta += (dTheta * length) / cp.pathLength;
     	                return Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
     	        }
     	        return null;
     	    }
     	    static getPointOnLine(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
-    	        fromX = fromX !== null && fromX !== undefined ? fromX : P1x;
-    	        fromY = fromY !== null && fromY !== undefined ? fromY : P1y;
+    	        fromX = fromX !== null && fromX !== void 0 ? fromX : P1x;
+    	        fromY = fromY !== null && fromY !== void 0 ? fromY : P1y;
     	        const len = this.getLineLength(P1x, P1y, P2x, P2y);
     	        if (len < 1e-10) {
     	            return { x: P1x, y: P1y };
@@ -102845,10 +103203,7 @@ void main() {
     	        }
     	        const x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
     	        const y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
-    	        return {
-    	            x: x,
-    	            y: y,
-    	        };
+    	        return { x, y };
     	    }
     	    static getPointOnQuadraticBezier(pct, P1x, P1y, P2x, P2y, P3x, P3y) {
     	        function QB1(t) {
@@ -102862,10 +103217,7 @@ void main() {
     	        }
     	        const x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
     	        const y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
-    	        return {
-    	            x: x,
-    	            y: y,
-    	        };
+    	        return { x, y };
     	    }
     	    static getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi) {
     	        const cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
@@ -102906,7 +103258,7 @@ void main() {
     	            'A',
     	        ];
     	        cs = cs.replace(new RegExp(' ', 'g'), ',');
-    	        for (var n = 0; n < cc.length; n++) {
+    	        for (let n = 0; n < cc.length; n++) {
     	            cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
     	        }
     	        const arr = cs.split('|');
@@ -102916,7 +103268,7 @@ void main() {
     	        let cpy = 0;
     	        const re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
     	        let match;
-    	        for (n = 1; n < arr.length; n++) {
+    	        for (let n = 1; n < arr.length; n++) {
     	            let str = arr[n];
     	            let c = str.charAt(0);
     	            str = str.slice(1);
@@ -102945,8 +103297,8 @@ void main() {
     	                let cmd = '';
     	                let points = [];
     	                const startX = cpx, startY = cpy;
-    	                var prevCmd, ctlPtx, ctlPty;
-    	                var rx, ry, psi, fa, fs, x1, y1;
+    	                let prevCmd, ctlPtx, ctlPty;
+    	                let rx, ry, psi, fa, fs, x1, y1;
     	                switch (c) {
     	                    case 'l':
     	                        cpx += p.shift();
@@ -102960,8 +103312,8 @@ void main() {
     	                        points.push(cpx, cpy);
     	                        break;
     	                    case 'm':
-    	                        var dx = p.shift();
-    	                        var dy = p.shift();
+    	                        const dx = p.shift();
+    	                        const dy = p.shift();
     	                        cpx += dx;
     	                        cpy += dy;
     	                        cmd = 'M';
@@ -103144,10 +103496,10 @@ void main() {
     	                return (0, BezierFunctions_1.getQuadraticArcLength)([x, points[0], points[2]], [y, points[1], points[3]], 1);
     	            case 'A':
     	                len = 0.0;
-    	                var start = points[4];
-    	                var dTheta = points[5];
-    	                var end = points[4] + dTheta;
-    	                var inc = Math.PI / 180.0;
+    	                const start = points[4];
+    	                const dTheta = points[5];
+    	                const end = points[4] + dTheta;
+    	                let inc = Math.PI / 180.0;
     	                if (Math.abs(start - end) < inc) {
     	                    inc = Math.abs(start - end);
     	                }
@@ -103236,7 +103588,7 @@ void main() {
     	if (hasRequiredArrow) return Arrow;
     	hasRequiredArrow = 1;
     	Object.defineProperty(Arrow, "__esModule", { value: true });
-    	Arrow.Arrow = undefined;
+    	Arrow.Arrow = void 0;
     	const Factory_1 = requireFactory();
     	const Line_1 = requireLine();
     	const Validators_1 = requireValidators();
@@ -103348,7 +103700,7 @@ void main() {
     	if (hasRequiredCircle) return Circle;
     	hasRequiredCircle = 1;
     	Object.defineProperty(Circle, "__esModule", { value: true });
-    	Circle.Circle = undefined;
+    	Circle.Circle = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Validators_1 = requireValidators();
@@ -103394,7 +103746,7 @@ void main() {
     	if (hasRequiredEllipse) return Ellipse;
     	hasRequiredEllipse = 1;
     	Object.defineProperty(Ellipse, "__esModule", { value: true });
-    	Ellipse.Ellipse = undefined;
+    	Ellipse.Ellipse = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Validators_1 = requireValidators();
@@ -103444,7 +103796,7 @@ void main() {
     	if (hasRequiredImage) return Image$1;
     	hasRequiredImage = 1;
     	Object.defineProperty(Image$1, "__esModule", { value: true });
-    	Image$1.Image = undefined;
+    	Image$1.Image = void 0;
     	const Util_1 = requireUtil();
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
@@ -103453,7 +103805,11 @@ void main() {
     	class Image extends Shape_1.Shape {
     	    constructor(attrs) {
     	        super(attrs);
-    	        this.on('imageChange.konva', () => {
+    	        this._loadListener = () => {
+    	            this._requestDraw();
+    	        };
+    	        this.on('imageChange.konva', (props) => {
+    	            this._removeImageLoad(props.oldVal);
     	            this._setImageLoad();
     	        });
     	        this._setImageLoad();
@@ -103467,11 +103823,19 @@ void main() {
     	            return;
     	        }
     	        if (image && image['addEventListener']) {
-    	            image['addEventListener']('load', () => {
-    	                this._requestDraw();
-    	            });
+    	            image['addEventListener']('load', this._loadListener);
+    	        }
+    	    }
+    	    _removeImageLoad(image) {
+    	        if (image && image['removeEventListener']) {
+    	            image['removeEventListener']('load', this._loadListener);
     	        }
     	    }
+    	    destroy() {
+    	        this._removeImageLoad(this.image());
+    	        super.destroy();
+    	        return this;
+    	    }
     	    _useBufferCanvas() {
     	        const hasCornerRadius = !!this.cornerRadius();
     	        const hasShadow = this.hasShadow();
@@ -103535,11 +103899,11 @@ void main() {
     	    }
     	    getWidth() {
     	        var _a, _b;
-    	        return (_a = this.attrs.width) !== null && _a !== undefined ? _a : (_b = this.image()) === null || _b === undefined ? undefined : _b.width;
+    	        return (_a = this.attrs.width) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.width;
     	    }
     	    getHeight() {
     	        var _a, _b;
-    	        return (_a = this.attrs.height) !== null && _a !== undefined ? _a : (_b = this.image()) === null || _b === undefined ? undefined : _b.height;
+    	        return (_a = this.attrs.height) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.height;
     	    }
     	    static fromURL(url, callback, onError = null) {
     	        const img = Util_1.Util.createImageElement();
@@ -103575,7 +103939,7 @@ void main() {
     	if (hasRequiredLabel) return Label;
     	hasRequiredLabel = 1;
     	Object.defineProperty(Label, "__esModule", { value: true });
-    	Label.Tag = Label.Label = undefined;
+    	Label.Tag = Label.Label = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Group_1 = requireGroup();
@@ -103762,7 +104126,7 @@ void main() {
     	if (hasRequiredRect) return Rect;
     	hasRequiredRect = 1;
     	Object.defineProperty(Rect, "__esModule", { value: true });
-    	Rect.Rect = undefined;
+    	Rect.Rect = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Global_1 = requireGlobal();
@@ -103797,7 +104161,7 @@ void main() {
     	if (hasRequiredRegularPolygon) return RegularPolygon;
     	hasRequiredRegularPolygon = 1;
     	Object.defineProperty(RegularPolygon, "__esModule", { value: true });
-    	RegularPolygon.RegularPolygon = undefined;
+    	RegularPolygon.RegularPolygon = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Validators_1 = requireValidators();
@@ -103875,7 +104239,7 @@ void main() {
     	if (hasRequiredRing) return Ring;
     	hasRequiredRing = 1;
     	Object.defineProperty(Ring, "__esModule", { value: true });
-    	Ring.Ring = undefined;
+    	Ring.Ring = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Validators_1 = requireValidators();
@@ -103921,7 +104285,7 @@ void main() {
     	if (hasRequiredSprite) return Sprite;
     	hasRequiredSprite = 1;
     	Object.defineProperty(Sprite, "__esModule", { value: true });
-    	Sprite.Sprite = undefined;
+    	Sprite.Sprite = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Animation_1 = requireAnimation();
@@ -104042,7 +104406,7 @@ void main() {
     	if (hasRequiredStar) return Star;
     	hasRequiredStar = 1;
     	Object.defineProperty(Star, "__esModule", { value: true });
-    	Star.Star = undefined;
+    	Star.Star = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Validators_1 = requireValidators();
@@ -104093,7 +104457,7 @@ void main() {
     	if (hasRequiredText) return Text;
     	hasRequiredText = 1;
     	Object.defineProperty(Text, "__esModule", { value: true });
-    	Text.Text = undefined;
+    	Text.Text = void 0;
     	Text.stringToArray = stringToArray;
     	const Util_1 = requireUtil();
     	const Factory_1 = requireFactory();
@@ -104206,8 +104570,6 @@ void main() {
     	                (metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2 +
     	                    lineHeightPx / 2;
     	        }
-    	        var lineTranslateX = 0;
-    	        var lineTranslateY = 0;
     	        if (direction === RTL) {
     	            context.setAttr('direction', direction);
     	        }
@@ -104222,9 +104584,9 @@ void main() {
     	        }
     	        context.translate(padding, alignY + padding);
     	        for (n = 0; n < textArrLen; n++) {
-    	            var lineTranslateX = 0;
-    	            var lineTranslateY = 0;
-    	            var obj = textArr[n], text = obj.text, width = obj.width, lastLine = obj.lastInParagraph, spacesNumber, lineWidth;
+    	            let lineTranslateX = 0;
+    	            let lineTranslateY = 0;
+    	            const obj = textArr[n], text = obj.text, width = obj.width, lastLine = obj.lastInParagraph;
     	            context.save();
     	            if (align === RIGHT) {
     	                lineTranslateX += totalWidth - width - padding * 2;
@@ -104241,9 +104603,7 @@ void main() {
     	                const x = lineTranslateX;
     	                const y = translateY + lineTranslateY + yOffset;
     	                context.moveTo(x, y);
-    	                spacesNumber = text.split(' ').length - 1;
-    	                lineWidth =
-    	                    align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
+    	                const lineWidth = align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
     	                context.lineTo(x + Math.round(lineWidth), y);
     	                context.lineWidth = fontSize / 15;
     	                const gradient = this._getLinearGradient();
@@ -104256,9 +104616,7 @@ void main() {
     	                context.beginPath();
     	                const yOffset = Global_1.Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
     	                context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
-    	                spacesNumber = text.split(' ').length - 1;
-    	                lineWidth =
-    	                    align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
+    	                const lineWidth = align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
     	                context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + yOffset);
     	                context.lineWidth = fontSize / 15;
     	                const gradient = this._getLinearGradient();
@@ -104267,7 +104625,7 @@ void main() {
     	                context.restore();
     	            }
     	            if (direction !== RTL && (letterSpacing !== 0 || align === JUSTIFY)) {
-    	                spacesNumber = text.split(' ').length - 1;
+    	                const spacesNumber = text.split(' ').length - 1;
     	                const array = stringToArray(text);
     	                for (let li = 0; li < array.length; li++) {
     	                    const letter = array[li];
@@ -104339,17 +104697,17 @@ void main() {
     	        _context.restore();
     	        const scaleFactor = fontSize / 100;
     	        return {
-    	            actualBoundingBoxAscent: (_a = metrics.actualBoundingBoxAscent) !== null && _a !== undefined ? _a : 71.58203125 * scaleFactor,
-    	            actualBoundingBoxDescent: (_b = metrics.actualBoundingBoxDescent) !== null && _b !== undefined ? _b : 0,
-    	            actualBoundingBoxLeft: (_c = metrics.actualBoundingBoxLeft) !== null && _c !== undefined ? _c : -7.421875 * scaleFactor,
-    	            actualBoundingBoxRight: (_d = metrics.actualBoundingBoxRight) !== null && _d !== undefined ? _d : 75.732421875 * scaleFactor,
-    	            alphabeticBaseline: (_e = metrics.alphabeticBaseline) !== null && _e !== undefined ? _e : 0,
-    	            emHeightAscent: (_f = metrics.emHeightAscent) !== null && _f !== undefined ? _f : 100 * scaleFactor,
-    	            emHeightDescent: (_g = metrics.emHeightDescent) !== null && _g !== undefined ? _g : -20 * scaleFactor,
-    	            fontBoundingBoxAscent: (_h = metrics.fontBoundingBoxAscent) !== null && _h !== undefined ? _h : 91 * scaleFactor,
-    	            fontBoundingBoxDescent: (_j = metrics.fontBoundingBoxDescent) !== null && _j !== undefined ? _j : 21 * scaleFactor,
-    	            hangingBaseline: (_k = metrics.hangingBaseline) !== null && _k !== undefined ? _k : 72.80000305175781 * scaleFactor,
-    	            ideographicBaseline: (_l = metrics.ideographicBaseline) !== null && _l !== undefined ? _l : -21 * scaleFactor,
+    	            actualBoundingBoxAscent: (_a = metrics.actualBoundingBoxAscent) !== null && _a !== void 0 ? _a : 71.58203125 * scaleFactor,
+    	            actualBoundingBoxDescent: (_b = metrics.actualBoundingBoxDescent) !== null && _b !== void 0 ? _b : 0,
+    	            actualBoundingBoxLeft: (_c = metrics.actualBoundingBoxLeft) !== null && _c !== void 0 ? _c : -7.421875 * scaleFactor,
+    	            actualBoundingBoxRight: (_d = metrics.actualBoundingBoxRight) !== null && _d !== void 0 ? _d : 75.732421875 * scaleFactor,
+    	            alphabeticBaseline: (_e = metrics.alphabeticBaseline) !== null && _e !== void 0 ? _e : 0,
+    	            emHeightAscent: (_f = metrics.emHeightAscent) !== null && _f !== void 0 ? _f : 100 * scaleFactor,
+    	            emHeightDescent: (_g = metrics.emHeightDescent) !== null && _g !== void 0 ? _g : -20 * scaleFactor,
+    	            fontBoundingBoxAscent: (_h = metrics.fontBoundingBoxAscent) !== null && _h !== void 0 ? _h : 91 * scaleFactor,
+    	            fontBoundingBoxDescent: (_j = metrics.fontBoundingBoxDescent) !== null && _j !== void 0 ? _j : 21 * scaleFactor,
+    	            hangingBaseline: (_k = metrics.hangingBaseline) !== null && _k !== void 0 ? _k : 72.80000305175781 * scaleFactor,
+    	            ideographicBaseline: (_l = metrics.ideographicBaseline) !== null && _l !== void 0 ? _l : -21 * scaleFactor,
     	            width: metrics.width,
     	            height: fontSize,
     	        };
@@ -104393,8 +104751,14 @@ void main() {
     	                while (line.length > 0) {
     	                    let low = 0, high = stringToArray(line).length, match = '', matchWidth = 0;
     	                    while (low < high) {
-    	                        const mid = (low + high) >>> 1, lineArray = stringToArray(line), substr = lineArray.slice(0, mid + 1).join(''), substrWidth = this._getTextWidth(substr) + additionalWidth;
-    	                        if (substrWidth <= maxWidth) {
+    	                        const mid = (low + high) >>> 1, lineArray = stringToArray(line), substr = lineArray.slice(0, mid + 1).join(''), substrWidth = this._getTextWidth(substr);
+    	                        const shouldConsiderEllipsis = shouldAddEllipsis &&
+    	                            fixedHeight &&
+    	                            currentHeightPx + lineHeightPx > maxHeightPx;
+    	                        const effectiveWidth = shouldConsiderEllipsis
+    	                            ? substrWidth + additionalWidth
+    	                            : substrWidth;
+    	                        if (effectiveWidth <= maxWidth) {
     	                            low = mid + 1;
     	                            match = substr;
     	                            matchWidth = substrWidth;
@@ -104541,7 +104905,7 @@ void main() {
     	if (hasRequiredTextPath) return TextPath;
     	hasRequiredTextPath = 1;
     	Object.defineProperty(TextPath, "__esModule", { value: true });
-    	TextPath.TextPath = undefined;
+    	TextPath.TextPath = void 0;
     	const Util_1 = requireUtil();
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
@@ -104791,7 +105155,7 @@ void main() {
     	if (hasRequiredTransformer) return Transformer;
     	hasRequiredTransformer = 1;
     	Object.defineProperty(Transformer, "__esModule", { value: true });
-    	Transformer.Transformer = undefined;
+    	Transformer.Transformer = void 0;
     	const Util_1 = requireUtil();
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
@@ -104988,10 +105352,12 @@ void main() {
     	                    this.update();
     	                }
     	            };
-    	            const additionalEvents = node._attrsAffectingSize
-    	                .map((prop) => prop + 'Change.' + this._getEventNamespace())
-    	                .join(' ');
-    	            node.on(additionalEvents, onChange);
+    	            if (node._attrsAffectingSize.length) {
+    	                const additionalEvents = node._attrsAffectingSize
+    	                    .map((prop) => prop + 'Change.' + this._getEventNamespace())
+    	                    .join(' ');
+    	                node.on(additionalEvents, onChange);
+    	            }
     	            node.on(TRANSFORM_CHANGE_STR.map((e) => e + `.${this._getEventNamespace()}`).join(' '), onChange);
     	            node.on(`absoluteTransformChange.${this._getEventNamespace()}`, onChange);
     	            this._proxyDrag(node);
@@ -105310,10 +105676,10 @@ void main() {
     	        else {
     	            keepProportion = this.keepRatio() || e.shiftKey;
     	        }
-    	        var centeredScaling = this.centeredScaling() || e.altKey;
+    	        let centeredScaling = this.centeredScaling() || e.altKey;
     	        if (this._movingAnchorName === 'top-left') {
     	            if (keepProportion) {
-    	                var comparePoint = centeredScaling
+    	                const comparePoint = centeredScaling
     	                    ? {
     	                        x: this.width() / 2,
     	                        y: this.height() / 2,
@@ -105324,8 +105690,8 @@ void main() {
     	                    };
     	                newHypotenuse = Math.sqrt(Math.pow(comparePoint.x - anchorNode.x(), 2) +
     	                    Math.pow(comparePoint.y - anchorNode.y(), 2));
-    	                var reverseX = this.findOne('.top-left').x() > comparePoint.x ? -1 : 1;
-    	                var reverseY = this.findOne('.top-left').y() > comparePoint.y ? -1 : 1;
+    	                const reverseX = this.findOne('.top-left').x() > comparePoint.x ? -1 : 1;
+    	                const reverseY = this.findOne('.top-left').y() > comparePoint.y ? -1 : 1;
     	                x = newHypotenuse * this.cos * reverseX;
     	                y = newHypotenuse * this.sin * reverseY;
     	                this.findOne('.top-left').x(comparePoint.x - x);
@@ -105337,7 +105703,7 @@ void main() {
     	        }
     	        else if (this._movingAnchorName === 'top-right') {
     	            if (keepProportion) {
-    	                var comparePoint = centeredScaling
+    	                const comparePoint = centeredScaling
     	                    ? {
     	                        x: this.width() / 2,
     	                        y: this.height() / 2,
@@ -105348,8 +105714,8 @@ void main() {
     	                    };
     	                newHypotenuse = Math.sqrt(Math.pow(anchorNode.x() - comparePoint.x, 2) +
     	                    Math.pow(comparePoint.y - anchorNode.y(), 2));
-    	                var reverseX = this.findOne('.top-right').x() < comparePoint.x ? -1 : 1;
-    	                var reverseY = this.findOne('.top-right').y() > comparePoint.y ? -1 : 1;
+    	                const reverseX = this.findOne('.top-right').x() < comparePoint.x ? -1 : 1;
+    	                const reverseY = this.findOne('.top-right').y() > comparePoint.y ? -1 : 1;
     	                x = newHypotenuse * this.cos * reverseX;
     	                y = newHypotenuse * this.sin * reverseY;
     	                this.findOne('.top-right').x(comparePoint.x + x);
@@ -105367,7 +105733,7 @@ void main() {
     	        }
     	        else if (this._movingAnchorName === 'bottom-left') {
     	            if (keepProportion) {
-    	                var comparePoint = centeredScaling
+    	                const comparePoint = centeredScaling
     	                    ? {
     	                        x: this.width() / 2,
     	                        y: this.height() / 2,
@@ -105378,8 +105744,8 @@ void main() {
     	                    };
     	                newHypotenuse = Math.sqrt(Math.pow(comparePoint.x - anchorNode.x(), 2) +
     	                    Math.pow(anchorNode.y() - comparePoint.y, 2));
-    	                var reverseX = comparePoint.x < anchorNode.x() ? -1 : 1;
-    	                var reverseY = anchorNode.y() < comparePoint.y ? -1 : 1;
+    	                const reverseX = comparePoint.x < anchorNode.x() ? -1 : 1;
+    	                const reverseY = anchorNode.y() < comparePoint.y ? -1 : 1;
     	                x = newHypotenuse * this.cos * reverseX;
     	                y = newHypotenuse * this.sin * reverseY;
     	                anchorNode.x(comparePoint.x - x);
@@ -105394,7 +105760,7 @@ void main() {
     	        }
     	        else if (this._movingAnchorName === 'bottom-right') {
     	            if (keepProportion) {
-    	                var comparePoint = centeredScaling
+    	                const comparePoint = centeredScaling
     	                    ? {
     	                        x: this.width() / 2,
     	                        y: this.height() / 2,
@@ -105405,8 +105771,8 @@ void main() {
     	                    };
     	                newHypotenuse = Math.sqrt(Math.pow(anchorNode.x() - comparePoint.x, 2) +
     	                    Math.pow(anchorNode.y() - comparePoint.y, 2));
-    	                var reverseX = this.findOne('.bottom-right').x() < comparePoint.x ? -1 : 1;
-    	                var reverseY = this.findOne('.bottom-right').y() < comparePoint.y ? -1 : 1;
+    	                const reverseX = this.findOne('.bottom-right').x() < comparePoint.x ? -1 : 1;
+    	                const reverseY = this.findOne('.bottom-right').y() < comparePoint.y ? -1 : 1;
     	                x = newHypotenuse * this.cos * reverseX;
     	                y = newHypotenuse * this.sin * reverseY;
     	                this.findOne('.bottom-right').x(comparePoint.x + x);
@@ -105417,7 +105783,7 @@ void main() {
     	            console.error(new Error('Wrong position argument of selection resizer: ' +
     	                this._movingAnchorName));
     	        }
-    	        var centeredScaling = this.centeredScaling() || e.altKey;
+    	        centeredScaling = this.centeredScaling() || e.altKey;
     	        if (centeredScaling) {
     	            const topLeft = this.findOne('.top-left');
     	            const bottomRight = this.findOne('.bottom-right');
@@ -105466,12 +105832,12 @@ void main() {
     	            const node = this.getNode();
     	            activeTransformersCount--;
     	            this._fire('transformend', { evt: e, target: node });
-    	            (_a = this.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
+    	            (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
     	            if (node) {
     	                this._nodes.forEach((target) => {
     	                    var _a;
     	                    target._fire('transformend', { evt: e, target });
-    	                    (_a = target.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
+    	                    (_a = target.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
     	                });
     	            }
     	            this._movingAnchorName = null;
@@ -105584,7 +105950,7 @@ void main() {
     	                .multiply(localTransform);
     	            const attrs = newLocalTransform.decompose();
     	            node.setAttrs(attrs);
-    	            (_a = node.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
+    	            (_a = node.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
     	        });
     	        this.rotation(Util_1.Util._getRotation(newAttrs.rotation));
     	        this._nodes.forEach((node) => {
@@ -105699,7 +106065,7 @@ void main() {
     	                styleFunc(node);
     	            });
     	        }
-    	        (_a = this.getLayer()) === null || _a === undefined ? undefined : _a.batchDraw();
+    	        (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
     	    }
     	    isTransforming() {
     	        return this._transforming;
@@ -105806,7 +106172,7 @@ void main() {
     	if (hasRequiredWedge) return Wedge;
     	hasRequiredWedge = 1;
     	Object.defineProperty(Wedge, "__esModule", { value: true });
-    	Wedge.Wedge = undefined;
+    	Wedge.Wedge = void 0;
     	const Factory_1 = requireFactory();
     	const Shape_1 = requireShape();
     	const Global_1 = requireGlobal();
@@ -105857,7 +106223,7 @@ void main() {
     	if (hasRequiredBlur) return Blur;
     	hasRequiredBlur = 1;
     	Object.defineProperty(Blur, "__esModule", { value: true });
-    	Blur.Blur = undefined;
+    	Blur.Blur = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -105905,10 +106271,10 @@ void main() {
     	];
     	function filterGaussBlurRGBA(imageData, radius) {
     	    const pixels = imageData.data, width = imageData.width, height = imageData.height;
-    	    let x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs;
+    	    let p, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs;
     	    const div = radius + radius + 1, widthMinus1 = width - 1, heightMinus1 = height - 1, radiusPlus1 = radius + 1, sumFactor = (radiusPlus1 * (radiusPlus1 + 1)) / 2, stackStart = new BlurStack(), mul_sum = mul_table[radius], shg_sum = shg_table[radius];
     	    let stackEnd = null, stack = stackStart, stackIn = null, stackOut = null;
-    	    for (i = 1; i < div; i++) {
+    	    for (let i = 1; i < div; i++) {
     	        stack = stack.next = new BlurStack();
     	        if (i === radiusPlus1) {
     	            stackEnd = stack;
@@ -105916,7 +106282,7 @@ void main() {
     	    }
     	    stack.next = stackStart;
     	    yw = yi = 0;
-    	    for (y = 0; y < height; y++) {
+    	    for (let y = 0; y < height; y++) {
     	        r_in_sum =
     	            g_in_sum =
     	                b_in_sum =
@@ -105935,14 +106301,14 @@ void main() {
     	        b_sum += sumFactor * pb;
     	        a_sum += sumFactor * pa;
     	        stack = stackStart;
-    	        for (i = 0; i < radiusPlus1; i++) {
+    	        for (let i = 0; i < radiusPlus1; i++) {
     	            stack.r = pr;
     	            stack.g = pg;
     	            stack.b = pb;
     	            stack.a = pa;
     	            stack = stack.next;
     	        }
-    	        for (i = 1; i < radiusPlus1; i++) {
+    	        for (let i = 1; i < radiusPlus1; i++) {
     	            p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
     	            r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
     	            g_sum += (stack.g = pg = pixels[p + 1]) * rbs;
@@ -105956,7 +106322,7 @@ void main() {
     	        }
     	        stackIn = stackStart;
     	        stackOut = stackEnd;
-    	        for (x = 0; x < width; x++) {
+    	        for (let x = 0; x < width; x++) {
     	            pixels[yi + 3] = pa = (a_sum * mul_sum) >> shg_sum;
     	            if (pa !== 0) {
     	                pa = 255 / pa;
@@ -105998,7 +106364,7 @@ void main() {
     	        }
     	        yw += width;
     	    }
-    	    for (x = 0; x < width; x++) {
+    	    for (let x = 0; x < width; x++) {
     	        g_in_sum =
     	            b_in_sum =
     	                a_in_sum =
@@ -106018,15 +106384,15 @@ void main() {
     	        b_sum += sumFactor * pb;
     	        a_sum += sumFactor * pa;
     	        stack = stackStart;
-    	        for (i = 0; i < radiusPlus1; i++) {
+    	        for (let i = 0; i < radiusPlus1; i++) {
     	            stack.r = pr;
     	            stack.g = pg;
     	            stack.b = pb;
     	            stack.a = pa;
     	            stack = stack.next;
     	        }
-    	        yp = width;
-    	        for (i = 1; i <= radius; i++) {
+    	        let yp = width;
+    	        for (let i = 1; i <= radius; i++) {
     	            yi = (yp + x) << 2;
     	            r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
     	            g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;
@@ -106044,7 +106410,7 @@ void main() {
     	        yi = x;
     	        stackIn = stackStart;
     	        stackOut = stackEnd;
-    	        for (y = 0; y < height; y++) {
+    	        for (let y = 0; y < height; y++) {
     	            p = yi << 2;
     	            pixels[p + 3] = pa = (a_sum * mul_sum) >> shg_sum;
     	            if (pa > 0) {
@@ -106105,7 +106471,7 @@ void main() {
     	if (hasRequiredBrighten) return Brighten;
     	hasRequiredBrighten = 1;
     	Object.defineProperty(Brighten, "__esModule", { value: true });
-    	Brighten.Brighten = undefined;
+    	Brighten.Brighten = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106130,7 +106496,7 @@ void main() {
     	if (hasRequiredContrast) return Contrast;
     	hasRequiredContrast = 1;
     	Object.defineProperty(Contrast, "__esModule", { value: true });
-    	Contrast.Contrast = undefined;
+    	Contrast.Contrast = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106178,7 +106544,7 @@ void main() {
     	if (hasRequiredEmboss) return Emboss;
     	hasRequiredEmboss = 1;
     	Object.defineProperty(Emboss, "__esModule", { value: true });
-    	Emboss.Emboss = undefined;
+    	Emboss.Emboss = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Util_1 = requireUtil();
@@ -106294,7 +106660,7 @@ void main() {
     	if (hasRequiredEnhance) return Enhance;
     	hasRequiredEnhance = 1;
     	Object.defineProperty(Enhance, "__esModule", { value: true });
-    	Enhance.Enhance = undefined;
+    	Enhance.Enhance = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106352,7 +106718,7 @@ void main() {
     	        bMax = 255;
     	        bMin = 0;
     	    }
-    	    let rMid, rGoalMax, rGoalMin, gMid, gGoalMax, gGoalMin, bMid, bGoalMax, bGoalMin;
+    	    let rGoalMax, rGoalMin, gGoalMax, gGoalMin, bGoalMax, bGoalMin;
     	    if (enhanceAmount > 0) {
     	        rGoalMax = rMax + enhanceAmount * (255 - rMax);
     	        rGoalMin = rMin - enhanceAmount * (rMin - 0);
@@ -106362,13 +106728,13 @@ void main() {
     	        bGoalMin = bMin - enhanceAmount * (bMin - 0);
     	    }
     	    else {
-    	        rMid = (rMax + rMin) * 0.5;
+    	        const rMid = (rMax + rMin) * 0.5;
     	        rGoalMax = rMax + enhanceAmount * (rMax - rMid);
     	        rGoalMin = rMin + enhanceAmount * (rMin - rMid);
-    	        gMid = (gMax + gMin) * 0.5;
+    	        const gMid = (gMax + gMin) * 0.5;
     	        gGoalMax = gMax + enhanceAmount * (gMax - gMid);
     	        gGoalMin = gMin + enhanceAmount * (gMin - gMid);
-    	        bMid = (bMax + bMin) * 0.5;
+    	        const bMid = (bMax + bMin) * 0.5;
     	        bGoalMax = bMax + enhanceAmount * (bMax - bMid);
     	        bGoalMin = bMin + enhanceAmount * (bMin - bMid);
     	    }
@@ -106391,7 +106757,7 @@ void main() {
     	if (hasRequiredGrayscale) return Grayscale;
     	hasRequiredGrayscale = 1;
     	Object.defineProperty(Grayscale, "__esModule", { value: true });
-    	Grayscale.Grayscale = undefined;
+    	Grayscale.Grayscale = void 0;
     	const Grayscale$1 = function (imageData) {
     	    const data = imageData.data, len = data.length;
     	    for (let i = 0; i < len; i += 4) {
@@ -106413,7 +106779,7 @@ void main() {
     	if (hasRequiredHSL) return HSL;
     	hasRequiredHSL = 1;
     	Object.defineProperty(HSL, "__esModule", { value: true });
-    	HSL.HSL = undefined;
+    	HSL.HSL = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106450,7 +106816,7 @@ void main() {
     	if (hasRequiredHSV) return HSV;
     	hasRequiredHSV = 1;
     	Object.defineProperty(HSV, "__esModule", { value: true });
-    	HSV.HSV = undefined;
+    	HSV.HSV = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106460,12 +106826,11 @@ void main() {
     	    const rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw, rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw, rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
     	    const gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw, gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw, gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
     	    const br = 0.299 * v - 0.3 * vsu + 1.25 * vsw, bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw, bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
-    	    let r, g, b, a;
     	    for (let i = 0; i < nPixels; i += 4) {
-    	        r = data[i + 0];
-    	        g = data[i + 1];
-    	        b = data[i + 2];
-    	        a = data[i + 3];
+    	        const r = data[i + 0];
+    	        const g = data[i + 1];
+    	        const b = data[i + 2];
+    	        const a = data[i + 3];
     	        data[i + 0] = rr * r + rg * g + rb * b;
     	        data[i + 1] = gr * r + gg * g + gb * b;
     	        data[i + 2] = br * r + bg * g + bb * b;
@@ -106487,7 +106852,7 @@ void main() {
     	if (hasRequiredInvert) return Invert;
     	hasRequiredInvert = 1;
     	Object.defineProperty(Invert, "__esModule", { value: true });
-    	Invert.Invert = undefined;
+    	Invert.Invert = void 0;
     	const Invert$1 = function (imageData) {
     	    const data = imageData.data, len = data.length;
     	    for (let i = 0; i < len; i += 4) {
@@ -106508,7 +106873,7 @@ void main() {
     	if (hasRequiredKaleidoscope) return Kaleidoscope;
     	hasRequiredKaleidoscope = 1;
     	Object.defineProperty(Kaleidoscope, "__esModule", { value: true });
-    	Kaleidoscope.Kaleidoscope = undefined;
+    	Kaleidoscope.Kaleidoscope = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Util_1 = requireUtil();
@@ -106654,7 +107019,7 @@ void main() {
     	if (hasRequiredMask) return Mask;
     	hasRequiredMask = 1;
     	Object.defineProperty(Mask, "__esModule", { value: true });
-    	Mask.Mask = undefined;
+    	Mask.Mask = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106808,7 +107173,7 @@ void main() {
     	if (hasRequiredNoise) return Noise;
     	hasRequiredNoise = 1;
     	Object.defineProperty(Noise, "__esModule", { value: true });
-    	Noise.Noise = undefined;
+    	Noise.Noise = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106833,37 +107198,37 @@ void main() {
     	if (hasRequiredPixelate) return Pixelate;
     	hasRequiredPixelate = 1;
     	Object.defineProperty(Pixelate, "__esModule", { value: true });
-    	Pixelate.Pixelate = undefined;
+    	Pixelate.Pixelate = void 0;
     	const Factory_1 = requireFactory();
     	const Util_1 = requireUtil();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
     	const Pixelate$1 = function (imageData) {
-    	    let pixelSize = Math.ceil(this.pixelSize()), width = imageData.width, height = imageData.height, x, y, i, red, green, blue, alpha, nBinsX = Math.ceil(width / pixelSize), nBinsY = Math.ceil(height / pixelSize), xBinStart, xBinEnd, yBinStart, yBinEnd, xBin, yBin, pixelsInBin, data = imageData.data;
+    	    let pixelSize = Math.ceil(this.pixelSize()), width = imageData.width, height = imageData.height, nBinsX = Math.ceil(width / pixelSize), nBinsY = Math.ceil(height / pixelSize), data = imageData.data;
     	    if (pixelSize <= 0) {
     	        Util_1.Util.error('pixelSize value can not be <= 0');
     	        return;
     	    }
-    	    for (xBin = 0; xBin < nBinsX; xBin += 1) {
-    	        for (yBin = 0; yBin < nBinsY; yBin += 1) {
-    	            red = 0;
-    	            green = 0;
-    	            blue = 0;
-    	            alpha = 0;
-    	            xBinStart = xBin * pixelSize;
-    	            xBinEnd = xBinStart + pixelSize;
-    	            yBinStart = yBin * pixelSize;
-    	            yBinEnd = yBinStart + pixelSize;
-    	            pixelsInBin = 0;
-    	            for (x = xBinStart; x < xBinEnd; x += 1) {
+    	    for (let xBin = 0; xBin < nBinsX; xBin += 1) {
+    	        for (let yBin = 0; yBin < nBinsY; yBin += 1) {
+    	            let red = 0;
+    	            let green = 0;
+    	            let blue = 0;
+    	            let alpha = 0;
+    	            const xBinStart = xBin * pixelSize;
+    	            const xBinEnd = xBinStart + pixelSize;
+    	            const yBinStart = yBin * pixelSize;
+    	            const yBinEnd = yBinStart + pixelSize;
+    	            let pixelsInBin = 0;
+    	            for (let x = xBinStart; x < xBinEnd; x += 1) {
     	                if (x >= width) {
     	                    continue;
     	                }
-    	                for (y = yBinStart; y < yBinEnd; y += 1) {
+    	                for (let y = yBinStart; y < yBinEnd; y += 1) {
     	                    if (y >= height) {
     	                        continue;
     	                    }
-    	                    i = (width * y + x) * 4;
+    	                    const i = (width * y + x) * 4;
     	                    red += data[i + 0];
     	                    green += data[i + 1];
     	                    blue += data[i + 2];
@@ -106875,15 +107240,15 @@ void main() {
     	            green = green / pixelsInBin;
     	            blue = blue / pixelsInBin;
     	            alpha = alpha / pixelsInBin;
-    	            for (x = xBinStart; x < xBinEnd; x += 1) {
+    	            for (let x = xBinStart; x < xBinEnd; x += 1) {
     	                if (x >= width) {
     	                    continue;
     	                }
-    	                for (y = yBinStart; y < yBinEnd; y += 1) {
+    	                for (let y = yBinStart; y < yBinEnd; y += 1) {
     	                    if (y >= height) {
     	                        continue;
     	                    }
-    	                    i = (width * y + x) * 4;
+    	                    const i = (width * y + x) * 4;
     	                    data[i + 0] = red;
     	                    data[i + 1] = green;
     	                    data[i + 2] = blue;
@@ -106906,7 +107271,7 @@ void main() {
     	if (hasRequiredPosterize) return Posterize;
     	hasRequiredPosterize = 1;
     	Object.defineProperty(Posterize, "__esModule", { value: true });
-    	Posterize.Posterize = undefined;
+    	Posterize.Posterize = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106929,7 +107294,7 @@ void main() {
     	if (hasRequiredRGB) return RGB;
     	hasRequiredRGB = 1;
     	Object.defineProperty(RGB, "__esModule", { value: true });
-    	RGB.RGB = undefined;
+    	RGB.RGB = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -106980,7 +107345,7 @@ void main() {
     	if (hasRequiredRGBA) return RGBA;
     	hasRequiredRGBA = 1;
     	Object.defineProperty(RGBA, "__esModule", { value: true });
-    	RGBA.RGBA = undefined;
+    	RGBA.RGBA = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -107042,7 +107407,7 @@ void main() {
     	if (hasRequiredSepia) return Sepia;
     	hasRequiredSepia = 1;
     	Object.defineProperty(Sepia, "__esModule", { value: true });
-    	Sepia.Sepia = undefined;
+    	Sepia.Sepia = void 0;
     	const Sepia$1 = function (imageData) {
     	    const data = imageData.data, nPixels = data.length;
     	    for (let i = 0; i < nPixels; i += 4) {
@@ -107066,7 +107431,7 @@ void main() {
     	if (hasRequiredSolarize) return Solarize;
     	hasRequiredSolarize = 1;
     	Object.defineProperty(Solarize, "__esModule", { value: true });
-    	Solarize.Solarize = undefined;
+    	Solarize.Solarize = void 0;
     	const Solarize$1 = function (imageData) {
     	    const data = imageData.data, w = imageData.width, h = imageData.height, w4 = w * 4;
     	    let y = h;
@@ -107105,7 +107470,7 @@ void main() {
     	if (hasRequiredThreshold) return Threshold;
     	hasRequiredThreshold = 1;
     	Object.defineProperty(Threshold, "__esModule", { value: true });
-    	Threshold.Threshold = undefined;
+    	Threshold.Threshold = void 0;
     	const Factory_1 = requireFactory();
     	const Node_1 = requireNode();
     	const Validators_1 = requireValidators();
@@ -107126,7 +107491,7 @@ void main() {
     	if (hasRequired_FullInternals) return _FullInternals;
     	hasRequired_FullInternals = 1;
     	Object.defineProperty(_FullInternals, "__esModule", { value: true });
-    	_FullInternals.Konva = undefined;
+    	_FullInternals.Konva = void 0;
     	const _CoreInternals_1 = require_CoreInternals();
     	const Arc_1 = requireArc();
     	const Arrow_1 = requireArrow();
@@ -107314,7 +107679,7 @@ void main() {
             } ];
             const konvaPoints = [];
             const wcsPoints = [];
-            params.points.forEach((point => {
+            params.points.forEach(point => {
                 konvaPoints.push(point.x, point.y);
                 const wcsPoint = this._worldTransformer.screenToWorld({
                     x: point.x,
@@ -107325,10 +107690,10 @@ void main() {
                     y: wcsPoint.y,
                     z: wcsPoint.z
                 });
-            }));
+            });
             this._ref = new Konva.Line({
-                stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
-                strokeWidth: (_b = params.width) !== null && _b !== undefined ? _b : 4,
+                stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+                strokeWidth: (_b = params.width) !== null && _b !== void 0 ? _b : 4,
                 globalCompositeOperation: "source-over",
                 lineCap: "round",
                 lineJoin: "round",
@@ -107338,11 +107703,11 @@ void main() {
                 dash: LineTypeSpecs.get(params.type) || []
             });
             this._ref.setAttr("wcsPoints", wcsPoints);
-            this._ref.on("transform", (e => {
+            this._ref.on("transform", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
-            }));
-            this._ref.on("transformend", (() => {
+            });
+            this._ref.on("transformend", () => {
                 const absoluteTransform = this._ref.getAbsoluteTransform();
                 const wcsPoints = [];
                 const points = this._ref.points();
@@ -107363,8 +107728,8 @@ void main() {
                     });
                 }
                 this._ref.setAttr("wcsPoints", wcsPoints);
-            }));
-            this._ref.on("dragend", (() => {
+            });
+            this._ref.on("dragend", () => {
                 const absoluteTransform = this._ref.getAbsoluteTransform();
                 const wcsPoints = [];
                 const points = this._ref.points();
@@ -107385,7 +107750,7 @@ void main() {
                     });
                 }
                 this._ref.setAttr("wcsPoints", wcsPoints);
-            }));
+            });
             this._ref.id(this._ref._id.toString());
         }
         ref() {
@@ -107456,11 +107821,11 @@ void main() {
         addPoints(points) {
             let newPoints = this._ref.points();
             const wcsPoints = this._ref.getAttr("wcsPoints");
-            points.forEach((point => {
+            points.forEach(point => {
                 newPoints = newPoints.concat([ point.x, point.y ]);
                 const wcsPoint = this._worldTransformer.screenToWorld(point);
                 wcsPoints.push(wcsPoint);
-            }));
+            });
             this._ref.points(newPoints);
         }
         updateScreenCoordinates() {
@@ -107468,7 +107833,7 @@ void main() {
             const points = [];
             let invert = this._ref.getAbsoluteTransform().copy();
             invert = invert.invert();
-            wcsPoints.forEach((point => {
+            wcsPoints.forEach(point => {
                 let screenPoint = this._worldTransformer.worldToScreen(point);
                 screenPoint = invert.point({
                     x: screenPoint.x,
@@ -107476,7 +107841,7 @@ void main() {
                 });
                 points.push(screenPoint.x);
                 points.push(screenPoint.y);
-            }));
+            });
             this._ref.points([]);
             this._ref.points(points);
             this._ref.clearCache();
@@ -107509,19 +107874,19 @@ void main() {
                 x: params.position.x,
                 y: params.position.y,
                 text: params.text,
-                fontSize: (_a = params.fontSize) !== null && _a !== undefined ? _a : 34,
+                fontSize: (_a = params.fontSize) !== null && _a !== void 0 ? _a : 34,
                 fontFamily: this.TEXT_FONT_FAMILY,
-                fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
+                fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
                 align: "left",
                 draggable: true,
-                rotation: (_c = params.rotation) !== null && _c !== undefined ? _c : 0
+                rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
             });
             this._ref.width(this._ref.getTextWidth());
             this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
                 x: params.position.x,
                 y: params.position.y
             }));
-            this._ref.on("transform", (e => {
+            this._ref.on("transform", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
                 const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
@@ -107543,8 +107908,8 @@ void main() {
                     x: 1,
                     y: 1
                 });
-            }));
-            this._ref.on("transformend", (e => {
+            });
+            this._ref.on("transformend", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
@@ -107553,15 +107918,15 @@ void main() {
                     y: this._ref.y()
                 });
                 this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
-            }));
-            this._ref.on("dragend", (() => {
+            });
+            this._ref.on("dragend", () => {
                 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.id(this._ref._id.toString());
         }
         ref() {
@@ -107685,15 +108050,15 @@ void main() {
                 }
             }
             this._ref = new Konva.Rect({
-                stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
-                strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
+                stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+                strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
                 globalCompositeOperation: "source-over",
                 lineCap: "round",
                 lineJoin: "round",
                 x: params.position.x,
                 y: params.position.y,
-                width: (_c = params.width) !== null && _c !== undefined ? _c : 200,
-                height: (_d = params.height) !== null && _d !== undefined ? _d : 200,
+                width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
+                height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
                 draggable: true,
                 strokeScaleEnabled: false
             });
@@ -107705,7 +108070,7 @@ void main() {
                 x: params.position2.x,
                 y: params.position2.y
             }));
-            this._ref.on("transform", (e => {
+            this._ref.on("transform", e => {
                 const attrs = e.target.attrs;
                 const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
                 const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
@@ -107727,8 +108092,8 @@ void main() {
                     x: 1,
                     y: 1
                 });
-            }));
-            this._ref.on("transformend", (e => {
+            });
+            this._ref.on("transformend", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
@@ -107741,8 +108106,8 @@ void main() {
                     x: position.x + this._ref.width(),
                     y: position.y + this._ref.height()
                 }));
-            }));
-            this._ref.on("dragend", (() => {
+            });
+            this._ref.on("dragend", () => {
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
                 const position = absoluteTransform.point({
                     x: this._ref.x(),
@@ -107753,7 +108118,7 @@ void main() {
                     x: position.x + this._ref.width(),
                     y: position.y + this._ref.height()
                 }));
-            }));
+            });
             this._ref.id(this._ref._id.toString());
         }
         getPosition() {
@@ -107894,7 +108259,7 @@ void main() {
                 y: 0
             };
             if (params.position2) {
-                (_a = params.radius) !== null && _a !== undefined ? _a : params.radius = {
+                (_a = params.radius) !== null && _a !== void 0 ? _a : params.radius = {
                     x: 0,
                     y: 0
                 };
@@ -107907,8 +108272,8 @@ void main() {
                 };
             }
             this._ref = new Konva.Ellipse({
-                stroke: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
-                strokeWidth: (_c = params.lineWidth) !== null && _c !== undefined ? _c : 4,
+                stroke: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+                strokeWidth: (_c = params.lineWidth) !== null && _c !== void 0 ? _c : 4,
                 globalCompositeOperation: "source-over",
                 lineCap: "round",
                 lineJoin: "round",
@@ -107931,7 +108296,7 @@ void main() {
                 x: this._ref.x(),
                 y: this._ref.y() + params.radius.y
             }));
-            this._ref.on("transform", (e => {
+            this._ref.on("transform", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
                 const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
@@ -107966,8 +108331,8 @@ void main() {
                     x: 1,
                     y: 1
                 });
-            }));
-            this._ref.on("transformend", (() => {
+            });
+            this._ref.on("transformend", () => {
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
                 const position = absoluteTransform.point({
                     x: this._ref.x(),
@@ -107984,8 +108349,8 @@ void main() {
                     y: this._ref.y() + this._ref.radiusY()
                 });
                 this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
-            }));
-            this._ref.on("dragend", (() => {
+            });
+            this._ref.on("dragend", () => {
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
                 const position = absoluteTransform.point({
                     x: this._ref.x(),
@@ -108002,7 +108367,7 @@ void main() {
                     y: this._ref.y() + this._ref.radiusY()
                 });
                 this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
-            }));
+            });
             this._ref.id(this._ref._id.toString());
         }
         getPosition() {
@@ -108127,8 +108492,8 @@ void main() {
                 y: 100
             };
             this._ref = new Konva.Arrow({
-                stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
-                fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
+                stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+                fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
                 strokeWidth: 4,
                 globalCompositeOperation: "source-over",
                 lineCap: "round",
@@ -108145,7 +108510,7 @@ void main() {
                 x: params.end.x,
                 y: params.end.y
             }));
-            this._ref.on("transformend", (e => {
+            this._ref.on("transformend", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
                 const points = this._ref.points();
@@ -108160,8 +108525,8 @@ void main() {
                 });
                 this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
                 this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
-            }));
-            this._ref.on("dragend", (e => {
+            });
+            this._ref.on("dragend", e => {
                 const points = this._ref.points();
                 const absoluteTransform = e.target.getAbsoluteTransform();
                 const transformStart = absoluteTransform.point({
@@ -108174,7 +108539,7 @@ void main() {
                 });
                 this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
                 this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
-            }));
+            });
             this._ref.id(this._ref._id.toString());
         }
         ref() {
@@ -108361,15 +108726,15 @@ void main() {
                 x: params.position.x,
                 y: params.position.y,
                 image: this._canvasImage,
-                width: (_a = params.width) !== null && _a !== undefined ? _a : 0,
-                height: (_b = params.height) !== null && _b !== undefined ? _b : 0,
+                width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
+                height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
                 draggable: true
             });
             this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
                 x: params.position.x,
                 y: params.position.y
             }));
-            this._ref.on("transform", (e => {
+            this._ref.on("transform", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
                 const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
@@ -108398,8 +108763,8 @@ void main() {
                     x: 1,
                     y: 1
                 });
-            }));
-            this._ref.on("transformend", (() => {
+            });
+            this._ref.on("transformend", () => {
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
                 const position = absoluteTransform.point({
                     x: this._ref.x(),
@@ -108410,8 +108775,8 @@ void main() {
                     x: position.x + this._ref.width(),
                     y: position.y + this._ref.height()
                 }));
-            }));
-            this._ref.on("dragend", (() => {
+            });
+            this._ref.on("dragend", () => {
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
                 const position = absoluteTransform.point({
                     x: this._ref.x(),
@@ -108422,7 +108787,7 @@ void main() {
                     x: position.x + this._ref.width(),
                     y: position.y + this._ref.height()
                 }));
-            }));
+            });
             this._ref.id(this._ref._id.toString());
         }
         getSrc() {
@@ -108576,10 +108941,10 @@ void main() {
             this._ref = new Konva.Shape({
                 x: params.position.x,
                 y: params.position.y,
-                width: (_a = params.width) !== null && _a !== undefined ? _a : 200,
-                height: (_b = params.height) !== null && _b !== undefined ? _b : 200,
-                stroke: (_c = params.color) !== null && _c !== undefined ? _c : "#ff0000",
-                strokeWidth: (_d = params.lineWidth) !== null && _d !== undefined ? _d : 4,
+                width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
+                height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
+                stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
+                strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 4,
                 draggable: true,
                 strokeScaleEnabled: false,
                 globalCompositeOperation: "source-over",
@@ -108665,7 +109030,7 @@ void main() {
                 x: params.position2.x,
                 y: params.position2.y
             }));
-            this._ref.on("transform", (e => {
+            this._ref.on("transform", e => {
                 const attrs = e.target.attrs;
                 const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
                 const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
@@ -108685,8 +109050,8 @@ void main() {
                     x: 1,
                     y: 1
                 });
-            }));
-            this._ref.on("transformend", (e => {
+            });
+            this._ref.on("transformend", e => {
                 const attrs = e.target.attrs;
                 if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
@@ -108699,8 +109064,8 @@ void main() {
                     x: position.x + this._ref.width(),
                     y: position.y + this._ref.height()
                 }));
-            }));
-            this._ref.on("dragend", (() => {
+            });
+            this._ref.on("dragend", () => {
                 const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
                 const position = absoluteTransform.point({
                     x: this._ref.x(),
@@ -108711,7 +109076,7 @@ void main() {
                     x: position.x + this._ref.width(),
                     y: position.y + this._ref.height()
                 }));
-            }));
+            });
             this._ref.getSelfRect = () => ({
                 x: 0 - ARC_RADIUS,
                 y: 0 - ARC_RADIUS,
@@ -108860,10 +109225,10 @@ void main() {
             if (timeout) {
                 clearTimeout(timeout);
             }
-            timeout = setTimeout((() => {
+            timeout = setTimeout(() => {
                 timeout = null;
                 func(...args);
-            }), wait);
+            }, wait);
         };
     }
 
@@ -108876,7 +109241,7 @@ void main() {
             this.fontSize = 34;
             this.changeActiveDragger = event => {
                 const draggerName = event.data;
-                this._markupContainer.className = this._container.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
+                this._markupContainer.className = this._container.className.split(" ").filter(x => !x.startsWith("oda-cursor-")).filter(x => x).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
                 this.removeTextInput();
                 this.removeImageInput();
                 this.enableEditMode(draggerName);
@@ -108888,9 +109253,9 @@ void main() {
                 if (!this._konvaStage) return;
                 this._konvaStage.width(width);
                 this._konvaStage.height(height);
-                this.getObjects().forEach((markupObject => {
+                this.getObjects().forEach(markupObject => {
                     markupObject.updateScreenCoordinates();
-                }));
+                });
             };
             this.resizeViewer = event => {
                 const {width: width, height: height} = event;
@@ -108898,19 +109263,19 @@ void main() {
                 if (!this._konvaStage) return;
                 this._konvaStage.width(width);
                 this._konvaStage.height(height);
-                this.getObjects().forEach((markupObject => {
+                this.getObjects().forEach(markupObject => {
                     markupObject.updateScreenCoordinates();
-                }));
+                });
             };
             this.pan = () => {
-                this.getObjects().forEach((markupObject => {
+                this.getObjects().forEach(markupObject => {
                     markupObject.updateScreenCoordinates();
-                }));
+                });
             };
             this.zoomAt = () => {
-                this.getObjects().forEach((markupObject => {
+                this.getObjects().forEach(markupObject => {
                     markupObject.updateScreenCoordinates();
-                }));
+                });
             };
             this.redirectToViewer = event => {
                 if (this._viewer) this._viewer.emit(event);
@@ -108925,7 +109290,7 @@ void main() {
         initialize(container, containerEvents, viewer, worldTransformer) {
             if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
             this._viewer = viewer;
-            this._worldTransformer = worldTransformer !== null && worldTransformer !== undefined ? worldTransformer : new WorldTransform;
+            this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
             this._container = container;
             this._markupContainer = document.createElement("div");
             this._markupContainer.id = "markup-container";
@@ -108953,9 +109318,9 @@ void main() {
                 this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
             }
             this.destroyKonva();
-            (_a = this._resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
+            (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             this._resizeObserver = undefined;
-            (_b = this._markupContainer) === null || _b === undefined ? undefined : _b.remove();
+            (_b = this._markupContainer) === null || _b === void 0 ? void 0 : _b.remove();
             this._markupContainer = undefined;
             this._container = undefined;
             this._viewer = undefined;
@@ -108967,7 +109332,7 @@ void main() {
             this.removeTextInput();
             this.removeImageInput();
             this.clearSelected();
-            this.getObjects().forEach((obj => obj.delete()));
+            this.getObjects().forEach(obj => obj.delete());
         }
         getMarkupColor() {
             return this._markupColor.asRGB();
@@ -108986,17 +109351,17 @@ void main() {
         colorizeAllMarkup(r, g, b) {
             this.setMarkupColor(r, g, b);
             const hexColor = new MarkupColor(r, g, b).asHex();
-            this.getObjects().filter((obj => {
+            this.getObjects().filter(obj => {
                 var _a;
-                return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor);
-            }));
+                return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
+            });
         }
         colorizeSelectedMarkups(r, g, b) {
             const hexColor = new MarkupColor(r, g, b).asHex();
-            this.getSelectedObjects().filter((obj => {
+            this.getSelectedObjects().filter(obj => {
                 var _a;
-                return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor);
-            }));
+                return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
+            });
         }
         setViewpoint(viewpoint) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -109011,51 +109376,51 @@ void main() {
                 x: 0,
                 y: 0
             });
-            const markupColor = ((_a = viewpoint.custom_fields) === null || _a === undefined ? undefined : _a.markup_color) || {
+            const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
                 r: 255,
                 g: 0,
                 b: 0
             };
             this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
-            (_b = viewpoint.lines) === null || _b === undefined ? undefined : _b.forEach((line => {
+            (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach(line => {
                 const linePoints = [];
-                line.points.forEach((point => {
+                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, line.width, line.id);
-            }));
-            (_c = viewpoint.texts) === null || _c === undefined ? undefined : _c.forEach((text => {
+            });
+            (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach(text => {
                 const screenPoint = this._worldTransformer.worldToScreen(text.position);
                 this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
-            }));
-            (_d = viewpoint.rectangles) === null || _d === undefined ? undefined : _d.forEach((rect => {
+            });
+            (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach(rect => {
                 const screenPoint = this._worldTransformer.worldToScreen(rect.position);
                 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);
-            }));
-            (_e = viewpoint.ellipses) === null || _e === undefined ? undefined : _e.forEach((ellipse => {
+            });
+            (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach(ellipse => {
                 const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
                 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);
-            }));
-            (_f = viewpoint.arrows) === null || _f === undefined ? undefined : _f.forEach((arrow => {
+            });
+            (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach(arrow => {
                 const startPoint = this._worldTransformer.worldToScreen(arrow.start);
                 const endPoint = this._worldTransformer.worldToScreen(arrow.end);
                 this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
-            }));
-            (_g = viewpoint.clouds) === null || _g === undefined ? undefined : _g.forEach((cloud => {
+            });
+            (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach(cloud => {
                 const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
                 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);
-            }));
-            (_h = viewpoint.images) === null || _h === undefined ? undefined : _h.forEach((image => {
+            });
+            (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach(image => {
                 const screenPoint = this._worldTransformer.worldToScreen(image.position);
                 const screenPoint2 = image.position2 ? this._worldTransformer.worldToScreen(image.position2) : null;
                 this.addImage(screenPoint, screenPoint2, image.src, image.width, image.height, image.id);
-            }));
+            });
         }
         getViewpoint(viewpoint) {
             if (!viewpoint) viewpoint = {};
@@ -109097,23 +109462,23 @@ void main() {
         }
         getObjects() {
             const objects = [];
-            Object.keys(MarkupMode2Konva).forEach((type => {
+            Object.keys(MarkupMode2Konva).forEach(type => {
                 const konvaShape = MarkupMode2Konva[type];
-                this.konvaLayerFind(type).forEach((ref => objects.push(konvaShape.initializer(ref, null, this._worldTransformer))));
-            }));
+                this.konvaLayerFind(type).forEach(ref => objects.push(konvaShape.initializer(ref, null, this._worldTransformer)));
+            });
             return objects;
         }
         getSelectedObjects() {
             if (!this._konvaTransformer) return [];
-            return this._konvaTransformer.nodes().map((ref => {
+            return this._konvaTransformer.nodes().map(ref => {
                 const name = ref.className;
-                const konvaShape = Object.values(MarkupMode2Konva).find((shape => shape.name === name));
+                const konvaShape = Object.values(MarkupMode2Konva).find(shape => shape.name === name);
                 return konvaShape ? konvaShape.initializer(ref, null, this._worldTransformer) : null;
-            })).filter((x => x));
+            }).filter(x => x);
         }
         selectObjects(objects) {
             if (!this._konvaTransformer) return;
-            const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x => x.ref())));
+            const selectedObjs = this._konvaTransformer.nodes().concat(objects.map(x => x.ref()));
             this._konvaTransformer.nodes(selectedObjs);
         }
         clearSelected() {
@@ -109126,7 +109491,7 @@ void main() {
             if (!this._konvaLayer) return [];
             const konvaShape = MarkupMode2Konva[type];
             if (!konvaShape || !konvaShape.initializer) return [];
-            return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer || ref.parent === this._groupImages || ref.parent === this._groupGeometry || ref.parent === this._groupTexts));
+            return this._konvaLayer.find(konvaShape.name).filter(ref => ref.parent === this._konvaLayer || ref.parent === this._groupImages || ref.parent === this._groupGeometry || ref.parent === this._groupTexts);
         }
         initializeKonva() {
             const stage = new Konva.Stage({
@@ -109157,7 +109522,7 @@ void main() {
             let lastLine;
             let mouseDownPos;
             let lastObj;
-            stage.on("mousedown touchstart", (e => {
+            stage.on("mousedown touchstart", e => {
                 if (!this._markupIsActive || e.target !== stage || this._markupMode === "Text" || this._markupMode === "Image") return;
                 if (e.target === stage && transformer.nodes().length > 0) {
                     transformer.nodes([]);
@@ -109165,12 +109530,12 @@ void main() {
                 }
                 const pos = this.getRelativePointerPosition(stage);
                 mouseDownPos = pos;
-                isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some((m => m === this._markupMode));
+                isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some(m => m === this._markupMode);
                 if (this._markupMode === "Line") {
                     lastLine = this.addLine([ pos.x, pos.y, pos.x, pos.y ]);
                 }
-            }));
-            stage.on("mouseup touchend", (() => {
+            });
+            stage.on("mouseup touchend", () => {
                 if (!this._markupIsActive) return;
                 if (isPaint) {
                     const pos = this.getRelativePointerPosition(stage);
@@ -109211,8 +109576,8 @@ void main() {
                 }
                 lastObj = undefined;
                 isPaint = false;
-            }));
-            stage.on("mousemove touchmove", (() => {
+            });
+            stage.on("mousemove touchmove", () => {
                 if (!this._markupIsActive) return;
                 if (!isPaint) {
                     return;
@@ -109267,8 +109632,8 @@ void main() {
                         y: startY
                     }, null, dX, dY);
                 }
-            }));
-            stage.on("click tap", (e => {
+            });
+            stage.on("click tap", e => {
                 if (!this._markupIsActive) return;
                 if (e.target === stage) {
                     if (this._markupMode === "Text") {
@@ -109310,7 +109675,7 @@ void main() {
                         this.removeImageInput();
                     }
                 }
-                if (transformer.nodes().filter((x => x.className === "Cloud" || x.className === "Image")).length > 0 || e.target.className === "Cloud" || e.target.className === "Image") {
+                if (transformer.nodes().filter(x => x.className === "Cloud" || x.className === "Image").length > 0 || e.target.className === "Cloud" || e.target.className === "Image") {
                     transformer.rotateEnabled(false);
                 } else {
                     transformer.rotateEnabled(true);
@@ -109327,26 +109692,26 @@ void main() {
                     const nodes = transformer.nodes().concat([ e.target ]);
                     transformer.nodes(nodes);
                 }
-            }));
+            });
             const container = stage.container();
             container.tabIndex = 1;
             container.focus();
-            container.addEventListener("keydown", (e => {
+            container.addEventListener("keydown", e => {
                 if (!this._markupIsActive) return;
                 if (e.code === "Delete") {
-                    this.getSelectedObjects().forEach((obj => obj.delete()));
+                    this.getSelectedObjects().forEach(obj => obj.delete());
                     this.clearSelected();
                     return;
                 }
                 e.preventDefault();
-            }));
+            });
         }
         destroyKonva() {
             var _a;
             this.removeTextInput();
             this.removeImageInput();
             this.clearOverlay();
-            (_a = this._konvaStage) === null || _a === undefined ? undefined : _a.destroy();
+            (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
             this._groupImages = undefined;
             this._groupGeometry = undefined;
             this._groupTexts = undefined;
@@ -109356,7 +109721,7 @@ void main() {
         }
         getMarkupLines() {
             const lines = [];
-            this.konvaLayerFind("Line").forEach((ref => {
+            this.konvaLayerFind("Line").forEach(ref => {
                 const wcsPoints = ref.getAttr("wcsPoints");
                 if (!wcsPoints) return;
                 const konvaLine = new KonvaLine(null, ref, this._worldTransformer);
@@ -109368,12 +109733,12 @@ void main() {
                     width: konvaLine.getLineWidth() || this.lineWidth
                 };
                 lines.push(line);
-            }));
+            });
             return lines;
         }
         getMarkupTexts() {
             const texts = [];
-            this.konvaLayerFind("Text").forEach((ref => {
+            this.konvaLayerFind("Text").forEach(ref => {
                 const textSize = .02;
                 const textScale = this._worldTransformer.getScale();
                 const wcsPosition = ref.getAttr("wcsStart");
@@ -109389,12 +109754,12 @@ void main() {
                     font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0]
                 };
                 texts.push(text);
-            }));
+            });
             return texts;
         }
         getMarkupRectangles() {
             const rectangles = [];
-            this.konvaLayerFind("Rectangle").forEach((ref => {
+            this.konvaLayerFind("Rectangle").forEach(ref => {
                 const wcsStart = ref.getAttr("wcsStart");
                 const wcsEnd = ref.getAttr("wcsEnd");
                 const screenStart = this._worldTransformer.worldToScreen(wcsStart);
@@ -109410,12 +109775,12 @@ void main() {
                     color: shape.getColor()
                 };
                 rectangles.push(rectangle);
-            }));
+            });
             return rectangles;
         }
         getMarkupEllipses() {
             const ellipses = [];
-            this.konvaLayerFind("Ellipse").forEach((ref => {
+            this.konvaLayerFind("Ellipse").forEach(ref => {
                 const wcsPosition = ref.getAttr("wcsPosition");
                 const wcsPosition2 = ref.getAttr("wcsRadiusX");
                 const wcsPosition3 = ref.getAttr("wcsRadiusY");
@@ -109435,12 +109800,12 @@ void main() {
                     color: shape.getColor()
                 };
                 ellipses.push(ellipse);
-            }));
+            });
             return ellipses;
         }
         getMarkupArrows() {
             const arrows = [];
-            this.konvaLayerFind("Arrow").forEach((ref => {
+            this.konvaLayerFind("Arrow").forEach(ref => {
                 const wcsStart = ref.getAttr("wcsStart");
                 const wcsEnd = ref.getAttr("wcsEnd");
                 const shape = new KonvaArrow(null, ref, this._worldTransformer);
@@ -109451,12 +109816,12 @@ void main() {
                     color: shape.getColor()
                 };
                 arrows.push(arrow);
-            }));
+            });
             return arrows;
         }
         getMarkupImages() {
             const images = [];
-            this.konvaLayerFind("Image").forEach((ref => {
+            this.konvaLayerFind("Image").forEach(ref => {
                 const wcsStart = ref.getAttr("wcsStart");
                 const wcsEnd = ref.getAttr("wcsEnd");
                 const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
@@ -109471,12 +109836,12 @@ void main() {
                     height: shape.getHeight() * scale
                 };
                 images.push(image);
-            }));
+            });
             return images;
         }
         getMarkupClouds() {
             const clouds = [];
-            this.konvaLayerFind("Cloud").forEach((ref => {
+            this.konvaLayerFind("Cloud").forEach(ref => {
                 const wcsStart = ref.getAttr("wcsStart");
                 const wcsEnd = ref.getAttr("wcsEnd");
                 const screenStart = this._worldTransformer.worldToScreen(wcsStart);
@@ -109492,7 +109857,7 @@ void main() {
                     color: shape.getColor()
                 };
                 clouds.push(cloud);
-            }));
+            });
             return clouds;
         }
         combineMarkupWithDrawing() {
@@ -109553,23 +109918,23 @@ void main() {
                 };
                 if (text) this._textInputRef.value = text;
                 document.body.appendChild(this._textInputRef);
-                setTimeout((() => {
+                setTimeout(() => {
                     this._textInputRef.focus();
-                }), 50);
+                }, 50);
             } else {
                 this.removeTextInput();
             }
         }
         removeTextInput() {
             var _a;
-            (_a = this._textInputRef) === null || _a === undefined ? undefined : _a.remove();
+            (_a = this._textInputRef) === null || _a === void 0 ? void 0 : _a.remove();
             this._textInputRef = null;
             this._textInputPos = null;
             this._textInputAngle = 0;
         }
         createImageInput(pos) {
             if (!this._imageInputRef) {
-                const convertBase64 = file => new Promise(((resolve, reject) => {
+                const convertBase64 = file => new Promise((resolve, reject) => {
                     const fileReader = new FileReader;
                     fileReader.readAsDataURL(file);
                     fileReader.onload = () => {
@@ -109578,7 +109943,7 @@ void main() {
                     fileReader.onerror = error => {
                         reject(error);
                     };
-                }));
+                });
                 this._imageInputPos = pos;
                 this._imageInputRef = document.createElement("input");
                 this._imageInputRef.style.display = "none";
@@ -109596,23 +109961,23 @@ void main() {
                     this.removeImageInput();
                 };
                 document.body.appendChild(this._imageInputRef);
-                setTimeout((() => {
+                setTimeout(() => {
                     this._imageInputRef.click();
-                }), 50);
+                }, 50);
             } else {
                 this.removeImageInput();
             }
         }
         removeImageInput() {
             var _a;
-            (_a = this._imageInputRef) === null || _a === undefined ? undefined : _a.remove();
+            (_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
             this._imageInputRef = null;
             this._imageInputPos = null;
         }
         addText(text, position, angle, color, textSize, fontSize, id) {
             var _a;
             if (!text) return;
-            (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
+            (_a = this.getSelectedObjects().shift()) === null || _a === void 0 ? void 0 : _a.delete();
             this.clearSelected();
             this.removeTextInput();
             const tolerance = 1e-6;
@@ -109691,7 +110056,7 @@ void main() {
         addImage(position, position2, src, width, height, id) {
             var _a;
             if (!position || !src) return;
-            (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
+            (_a = this.getSelectedObjects().shift()) === null || _a === void 0 ? void 0 : _a.delete();
             this.clearSelected();
             this.removeImageInput();
             const konvaImage = new KonvaImage({
@@ -109793,7 +110158,7 @@ void main() {
             this.target = new Vector3();
             this._activeDragger = null;
             this._components = [];
-            this.renderTime = 0;
+            this._renderTime = 0;
             this.render = this.render.bind(this);
             this.update = this.update.bind(this);
             this._markup = new KonvaMarkup();
@@ -109857,6 +110222,7 @@ void main() {
             this.composer.addPass(this.fxaaPass);
             this.composer.addPass(this.ssaaRenderPass);
             this.composer.addPass(this.outputPass);
+            this.composer.setSize(width, height);
             this.canvas = canvas;
             this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
             this._markup.initialize(this.canvas, this.canvasEvents, this, this);
@@ -109865,8 +110231,8 @@ void main() {
             }
             this.syncOptions();
             this.syncOverlay();
-            this.renderTime = performance.now();
-            this.render(this.renderTime);
+            this._renderTime = performance.now();
+            this.render(this._renderTime);
             if (typeof onProgress === "function")
                 onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded: 1, total: 1 }));
             this.emitEvent({ type: "initializeprogress", data: 1, loaded: 1, total: 1 });
@@ -109918,8 +110284,27 @@ void main() {
         isInitialized() {
             return !!this.renderer;
         }
+        setSize(width, height, updateStyle = true) {
+            if (!this.renderer)
+                return;
+            const camera = this.camera;
+            const aspect = width / height;
+            if (camera.isPerspectiveCamera) {
+                camera.aspect = aspect;
+                camera.updateProjectionMatrix();
+            }
+            if (camera.isOrthographicCamera) {
+                camera.left = camera.bottom * aspect;
+                camera.right = camera.top * aspect;
+                camera.updateProjectionMatrix();
+            }
+            this.renderer.setSize(width, height, updateStyle);
+            this.composer.setSize(width, height);
+            this.update(true);
+            this.emitEvent({ type: "resize", width, height });
+        }
         update(force = false) {
-            this.renderNeeded = true;
+            this._renderNeeded = true;
             if (force)
                 this.render();
             this.emitEvent({ type: "update", data: force });
@@ -109928,13 +110313,13 @@ void main() {
             var _a, _b;
             if (!this.renderer)
                 return;
-            if (!(this.renderNeeded || force))
+            if (!this._renderNeeded && !force)
                 return;
             if (!time)
                 time = performance.now();
-            const deltaTime = (time - this.renderTime) / 1000;
-            this.renderTime = time;
-            this.renderNeeded = false;
+            const deltaTime = (time - this._renderTime) / 1000;
+            this._renderTime = time;
+            this._renderNeeded = false;
             if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
                 this.renderer.render(this.scene, this.camera);
                 this.renderer.render(this.helpers, this.camera);
@@ -109942,7 +110327,7 @@ void main() {
             else {
                 this.composer.render(deltaTime);
             }
-            (_b = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
+            (_b = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.emitEvent({ type: "render", time, deltaTime });
         }
         loadReferences(model) {
@@ -110161,7 +110546,7 @@ void main() {
                     newDragger = draggers.createDragger(name, this);
                     if (newDragger) {
                         this._activeDragger = newDragger;
-                        (_b = (_a = this._activeDragger).initialize) === null || _b === undefined ? undefined : _b.call(_a);
+                        (_b = (_a = this._activeDragger).initialize) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
                 }
                 const canvas = this.canvas;
@@ -110266,7 +110651,7 @@ void main() {
                 }
             };
             const setClippingPlanes = (clipping_planes) => {
-                clipping_planes === null || clipping_planes === undefined ? undefined : clipping_planes.forEach((clipping_plane) => {
+                clipping_planes === null || clipping_planes === void 0 ? void 0 : clipping_planes.forEach((clipping_plane) => {
                     const plane = new Plane();
                     plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
                     this.renderer.clippingPlanes.push(plane);
@@ -110276,7 +110661,7 @@ void main() {
                 if (selection)
                     this.setSelected(selection.map((component) => component.handle));
             };
-            const draggerName = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.name;
+            const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
             this.setActiveDragger();
             this.clearSlices();
             this.clearOverlay();
@@ -110288,7 +110673,7 @@ void main() {
             setClippingPlanes(viewpoint.clipping_planes);
             setSelection(viewpoint.selection);
             this._markup.setViewpoint(viewpoint);
-            this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === undefined ? undefined : _b.camera_target) !== null && _c !== undefined ? _c : this.target);
+            this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.camera_target) !== null && _c !== void 0 ? _c : this.target);
             this.setActiveDragger(draggerName);
             this.emitEvent({ type: "drawviewpoint", data: viewpoint });
             this.update();