@preference-sl/pref-viewer 2.11.0-beta.19 → 2.11.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.11.0-beta.19",
+    "version": "2.11.0-beta.20",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-animation-controller.js

@@ -150,11 +150,8 @@ export default class BabylonJSAnimationController {
         }
         this.hideMenu();
         this.#animatedNodes = [];
+        this.#openingAnimations.forEach((openingAnimation) => openingAnimation.dispose());
         this.#openingAnimations = [];
-        const observer = this.#scene.onPointerObservable._observers.find((observer) => observer.callback.name.includes("#onAnimationPointerObservable"));
-        if (observer) {
-            this.#scene.onPointerObservable.remove(observer);
-        }
     }
 
     /**

package/src/babylonjs-animation-opening-menu.js

@@ -78,6 +78,10 @@ export default class OpeningAnimationMenu {
         repeatOff: `<svg id="repeat-off" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.73,19H7V22L3,18L7,14V17H13.73L7,10.27V11H5V8.27L2,5.27M17,13H19V17.18L17,15.18V13M17,5V2L21,6L17,10V7H8.82L6.82,5H17Z"/></svg>`,
     };
 
+    #handler = {
+        onSliderInput: null,
+    };
+
     /**
      * Constructs the OpeningAnimationMenu and initializes the menu UI.
      * @param {string} name - The name of the animation.
@@ -154,7 +158,8 @@ export default class OpeningAnimationMenu {
         this.#slider.setAttribute("step", "0.01");
         this.#slider.setAttribute("value", this.#animationProgress.toString());
         this.#slider.classList.add("animation-menu-slider");
-        this.#slider.addEventListener("input", this.#onSliderInput.bind(this));
+        this.#handler.onSliderInput = this.#onSliderInput.bind(this);
+        this.#slider.addEventListener("input", this.#handler.onSliderInput);
 
         this.#containerMain.appendChild(this.#slider);
     }
@@ -327,6 +332,7 @@ export default class OpeningAnimationMenu {
      * @returns {void}
      */
     dispose() {
+        this.#slider.removeEventListener("input", this.#handler.onSliderInput);
         if (this.isVisible) {
             this.#containerMain.remove();
         }

package/src/babylonjs-animation-opening.js

@@ -12,6 +12,7 @@ import OpeningAnimationMenu from "./babylonjs-animation-opening-menu.js";
  *  - Manages the animation control menu (OpeningAnimationMenu) and its callbacks.
  *
  * Public Methods:
+ *  - dispose(): Disposes the OpeningAnimation instance and releases all associated resources.
  *  - isAnimationForNode(node): Checks if the animation affects the given node.
  *  - playOpen(): Starts the opening animation.
  *  - playClose(): Starts the closing animation.
@@ -48,20 +49,26 @@ export default class OpeningAnimation {
         closing: 4,
     };
 
+    name = "";
     #openAnimation = null;
     #closeAnimation = null;
-
     #nodes = [];
+    #menu = null;
+
     #state = OpeningAnimation.states.closed;
     #lastPausedFrame = 0;
     #startFrame = 0;
     #endFrame = 0;
     #speedRatio = 1.0;
     #loop = false;
-
-    #menu = null;
     #progressThreshold = 0.025;
 
+    #handlers = {
+        onOpened: null,
+        onClosed: null,
+        updateControlsSlider: null,
+    };
+
     /**
      * Creates a new OpeningAnimation instance for managing open/close animations of a model part.
      * @param {string} name - The identifier for this animation (e.g., door name).
@@ -85,8 +92,15 @@ export default class OpeningAnimation {
         this.#speedRatio = this.#openAnimation.speedRatio || 1.0;
 
         this.#getNodesFromAnimationGroups();
-        this.#openAnimation.onAnimationGroupEndObservable.add(this.#onOpened.bind(this));
-        this.#closeAnimation.onAnimationGroupEndObservable.add(this.#onClosed.bind(this));
+        this.#bindHandlers();
+        this.#openAnimation.onAnimationGroupEndObservable.add(this.#handlers.onOpened);
+        this.#closeAnimation.onAnimationGroupEndObservable.add(this.#handlers.onClosed);
+    }
+
+    #bindHandlers() {
+        this.#handlers.onOpened = this.#onOpened.bind(this);
+        this.#handlers.onClosed = this.#onClosed.bind(this);
+        this.#handlers.updateControlsSlider = this.#updateControlsSlider.bind(this);
     }
 
     /**
@@ -303,6 +317,25 @@ export default class OpeningAnimation {
      * ---------------------------
      */
 
+    /**
+     * Disposes the OpeningAnimation instance and releases all associated resources.
+     * @public
+     * @returns {void}
+     */
+    dispose() {
+        this.hideControls();
+        if (this.#openAnimation) {
+            this.#openAnimation.onAnimationGroupEndObservable.removeCallback(this.#handlers.onOpened);
+            this.#openAnimation = null;
+        }
+        if (this.#closeAnimation) {
+            this.#closeAnimation.onAnimationGroupEndObservable.removeCallback(this.#handlers.onClosed);
+            this.#closeAnimation = null;
+        }
+        this.#nodes = [];
+        this.name = "";
+    }
+
     /**
      * Checks if the animation affects the given node.
      * @param {string} node - Node identifier.
@@ -452,7 +485,7 @@ export default class OpeningAnimation {
         this.#menu = new OpeningAnimationMenu(this.name, canvas, this.#state, this.#getProgress(), this.#loop, controlCallbacks);
 
         // Attach to Babylon.js scene render loop for real-time updates
-        this.#openAnimation._scene.onBeforeRenderObservable.add(this.#updateControlsSlider.bind(this));
+        this.#openAnimation._scene.onBeforeRenderObservable.add(this.#handlers.updateControlsSlider);
     }
 
     /**
@@ -463,7 +496,7 @@ export default class OpeningAnimation {
         if (!this.isControlsVisible()) {
             return;
         }
-        this.#openAnimation._scene.onBeforeRenderObservable.removeCallback(this.#updateControlsSlider.bind(this));
+        this.#openAnimation?._scene?.onBeforeRenderObservable.removeCallback(this.#handlers.updateControlsSlider);
         this.#menu.dispose();
         this.#menu = null;
     }

package/src/babylonjs-controller.js

@@ -48,6 +48,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - downloadUSDZ(content): Downloads the current scene, model, or environment as a USDZ file.
  *
  * Private Methods (using ECMAScript private fields):
+ *  - #bindHandlers(): Pre-binds reusable event handlers to preserve stable references.
  *  - #configureDracoCompression(): Sets up Draco mesh compression.
  *  - #renderLoop(): Babylon.js render loop callback.
  *  - #addStylesToARButton(): Styles AR button.
@@ -112,6 +113,12 @@ export default class BabylonJSController {
     #gltfResolver = null; // GLTFResolver instance
     #babylonJSAnimationController = null; // AnimationController instance
 
+    #handlers = {
+        onKeyUp: null,
+        onPointerObservable: null,
+        renderLoop: null,
+    };
+
     /**
      * Constructs a new BabylonJSController instance.
      * Initializes the canvas, asset containers, and options for the Babylon.js scene.
@@ -134,6 +141,18 @@ export default class BabylonJSController {
             };
         });
         this.#options = options;
+        this.#bindHandlers();
+    }
+
+    /**
+     * Pre-binds reusable event handlers to preserve stable references.
+     * @private
+     * @returns {void}
+     */
+    #bindHandlers() {
+        this.#handlers.onKeyUp = this.#onKeyUp.bind(this);
+        this.#handlers.onPointerObservable = this.#onPointerObservable.bind(this);
+        this.#handlers.renderLoop = this.#renderLoop.bind(this);
     }
 
     /**
@@ -446,10 +465,10 @@ export default class BabylonJSController {
      */
     #enableInteraction() {
         if (this.#canvas) {
-            this.#canvas.addEventListener("keyup", this.#onKeyUp.bind(this));
+            this.#canvas.addEventListener("keyup", this.#handlers.onKeyUp);
         }
         if (this.#scene) {
-            this.#scene.onPointerObservable.add(this.#onPointerObservable.bind(this));
+            this.#scene.onPointerObservable.add(this.#handlers.onPointerObservable);
         }
     }
 
@@ -460,10 +479,10 @@ export default class BabylonJSController {
      */
     #disableInteraction() {
         if (this.#canvas) {
-            this.#canvas.removeEventListener("keyup", this.#onKeyUp.bind(this));
+            this.#canvas.removeEventListener("keyup", this.#handlers.onKeyUp);
         }
         if (this.#scene !== null) {
-            this.#scene.onPointerObservable.removeCallback(this.#onPointerObservable.bind(this));
+            this.#scene.onPointerObservable.removeCallback(this.#handlers.onPointerObservable);
         }
     }
 
@@ -855,7 +874,7 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #stopRender() {
-        this.#engine.stopRenderLoop(this.#renderLoop.bind(this));
+        this.#engine.stopRenderLoop(this.#handlers.renderLoop);
     }
     /**
      * Starts the Babylon.js render loop for the current scene.
@@ -865,7 +884,7 @@ export default class BabylonJSController {
      */
     async #startRender() {
         await this.#scene.whenReadyAsync();
-        this.#engine.runRenderLoop(this.#renderLoop.bind(this));
+        this.#engine.runRenderLoop(this.#handlers.renderLoop);
     }
 
     /**

package/src/file-storage.js

@@ -174,7 +174,12 @@ export class FileStorage {
             xhr.onload = () => {
                 if (xhr.status === 200) {
                     const blob = xhr.response;
-                    const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    const lastModified = xhr.getResponseHeader("Last-Modified");
+                    let timeStamp = null;
+                    if (lastModified) {
+                        const parsed = new Date(lastModified);
+                        timeStamp = Number.isNaN(parsed.valueOf()) ? null : parsed.toISOString();
+                    }
                     file = { blob: blob, timeStamp: timeStamp };
                     resolve(file);
                 } else {
@@ -204,7 +209,11 @@ export class FileStorage {
             xhr.responseType = "blob";
             xhr.onload = () => {
                 if (xhr.status === 200) {
-                    timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    const lastModified = xhr.getResponseHeader("Last-Modified");
+                    if (lastModified) {
+                        const parsed = new Date(lastModified);
+                        timeStamp = Number.isNaN(parsed.valueOf()) ? null : parsed.toISOString();
+                    }
                     resolve(timeStamp);
                 } else {
                     resolve(timeStamp);

package/src/panzoom-controller.js

@@ -2,59 +2,67 @@
 import Panzoom from "@panzoom/panzoom/dist/panzoom.es.js";
 
 /**
- * PanzoomController - Encapsulates the logic for managing pan and zoom interactions on a given DOM element.
+ * PanzoomController - Encapsulates logic for managing pan and zoom interactions on a DOM element using the Panzoom library.
  *
- * Responsibilities:
- *  - Provides an interface to enable, disable, and control pan/zoom interactions.
- *  - Manages event listeners for mouse, keyboard, and touch interactions.
- *  - Tracks the current pan/zoom state and invokes a callback when the state changes.
- *  - Supports zooming in/out, panning, resetting, and mouse wheel zoom.
+ * Summary:
+ *  Provides a high-level API to enable, disable, and control pan/zoom interactions for SVG or other DOM content.
+ *  Manages event listeners for mouse, keyboard, and touch interactions, and tracks the current pan/zoom state.
+ *  Supports zooming in/out, panning, resetting, and mouse wheel zoom, with customizable options and callbacks.
+ *
+ * Key Responsibilities:
+ *  - Initializes and manages a Panzoom instance for a wrapper element.
+ *  - Handles enabling/disabling pan/zoom and related event listeners.
+ *  - Tracks and exposes the current pan/zoom state.
+ *  - Supports keyboard shortcuts, mouse wheel zoom, and context menu prevention.
+ *  - Provides methods for panning, zooming, and resetting the view.
+ *  - Invokes a callback when the pan/zoom state changes.
  *
  * Usage:
- *  - Instantiate the controller with a DOM element and optional configuration:
- *      const controller = new PanzoomController(wrapperElement, options, stateChangeCallback);
- *  - Use public methods like `enable()`, `zoomIn()`, `pan(x, y)`, etc., to control interactions.
- *  - Call `disable()` to remove all event listeners and destroy the Panzoom instance.
+ *  - Instantiate: const controller = new PanzoomController(wrapperElement, options, stateChangeCallback);
+ *  - Enable pan/zoom: controller.enable();
+ *  - Enable events: controller.enableEvents();
+ *  - Control view: controller.pan(x, y), controller.zoomIn(), controller.zoomOut(), controller.reset();
+ *  - Disable pan/zoom and events: controller.disable(), controller.disableEvents();
  *
  * Constructor Parameters:
- *  - `wrapper` (HTMLElement): The DOM element to apply pan/zoom interactions to.
- *  - `options` (object): Configuration options for Panzoom (e.g., minScale, maxScale, step).
- *  - `changedCallback` (function): Optional callback invoked when the pan/zoom state changes.
+ *  - wrapper (HTMLElement): The DOM element to apply pan/zoom interactions to.
+ *  - options (object): Configuration options for Panzoom (e.g., minScale, maxScale, step).
+ *  - changedCallback (function): Optional callback invoked when the pan/zoom state changes.
  *
  * Public Methods:
- *  - `enable()`: Enables the Panzoom instance and initializes it if not already enabled.
- *  - `disable()`: Disables the Panzoom instance and removes all event listeners.
- *  - `enableEvents()`: Attaches all required event listeners for interactions.
- *  - `disableEvents()`: Removes all previously attached event listeners.
- *  - `pan(x, y)`: Pans the view to the specified coordinates.
- *  - `reset()`: Resets pan and zoom to fit the entire content within the available space.
- *  - `zoomIn(focal?)`: Zooms in by one step, optionally centered on a focal point.
- *  - `zoomOut(focal?)`: Zooms out by one step, optionally centered on a focal point.
+ *  - enable(): Enables the Panzoom instance and initializes it if not already enabled.
+ *  - disable(): Disables the Panzoom instance and removes all event listeners.
+ *  - enableEvents(): Attaches all required event listeners for interactions.
+ *  - disableEvents(): Removes all previously attached event listeners.
+ *  - pan(x, y): Pans the view to the specified coordinates.
+ *  - reset(): Resets pan and zoom to fit the entire content within the available space.
+ *  - zoomIn(focal?): Zooms in by one step, optionally centered on a focal point.
+ *  - zoomOut(focal?): Zooms out by one step, optionally centered on a focal point.
  *
  * Getters:
- *  - `panzoom`: Returns the current Panzoom instance or `null` if not initialized.
- *  - `state`: Returns the current pan/zoom state (e.g., moved, scaled, maximized, minimized).
+ *  - panzoom: Returns the current Panzoom instance or null if not initialized.
+ *  - state: Returns the current pan/zoom state (moved, scaled, maximized, minimized).
  *
  * Private Methods:
- *  - `#checkPanzoomState(transform)`: Updates the internal state and invokes the state change callback.
- *  - `#resetTransform()`: Resets the transform applied to the wrapper element.
- *  - `#setFocus()`: Sets focus on the parent element to enable keyboard interactions.
- *  - `#onPanzoomStart(e)`: Handles the start of a pan/zoom interaction.
- *  - `#onPanzoomChange(e)`: Handles changes in pan/zoom state.
- *  - `#onPanzoomEnd(e)`: Handles the end of a pan/zoom interaction.
- *  - `#onZoomWithWheel(e)`: Handles zoom interactions via the mouse wheel.
- *  - `#enableMouseWheelZoom()`: Enables zooming with the mouse wheel.
- *  - `#disableMouseWheelZoom()`: Disables zooming with the mouse wheel.
- *  - `#getDistanceBetweenPoints(point1, point2)`: Calculates the Euclidean distance between two points.
- *  - `#getPointFromEvent(e)`: Extracts client coordinates from a mouse or touch event.
+ *  - #bindHandlers(): Pre-binds reusable event handlers to preserve stable references.
+ *  - #checkPanzoomState(transform): Updates the internal state and invokes the state change callback.
+ *  - #resetTransform(): Resets the transform applied to the wrapper element.
+ *  - #setFocus(): Sets focus on the parent element to enable keyboard interactions.
+ *  - #onPanzoomStart(e): Handles the start of a pan/zoom interaction.
+ *  - #onPanzoomChange(e): Handles changes in pan/zoom state.
+ *  - #onPanzoomEnd(e): Handles the end of a pan/zoom interaction.
+ *  - #onZoomWithWheel(e): Handles zoom interactions via the mouse wheel.
+ *  - #enableMouseWheelZoom(): Enables zooming with the mouse wheel.
+ *  - #disableMouseWheelZoom(): Disables zooming with the mouse wheel.
+ *  - #getDistanceBetweenPoints(point1, point2): Calculates the Euclidean distance between two points.
+ *  - #getPointFromEvent(e): Extracts client coordinates from a mouse or touch event.
  *
  * Notes:
  *  - Designed to work with the Panzoom library for managing pan/zoom interactions.
- *  - Provides a clean separation of concerns by encapsulating all pan/zoom logic in a single class.
+ *  - Encapsulates all pan/zoom logic in a single class for clean separation of concerns.
  *  - Can be extended or customized by overriding methods or providing additional options.
  */
 export default class PanzoomController {
-    #changedCallback = null;
     #interactionOptions = {
         clickThreshold: 6, // Threshold to avoid false clicks on elements when panning or zooming
     };
@@ -80,11 +88,40 @@ export default class PanzoomController {
         minimized: false,
     };
     #wrapper = null;
-
+    
+    #changedCallback = null;
+    #handlers = {
+        panzoomStart: null,
+        panzoomChange: null,
+        panzoomEnd: null,
+        keyUp: null,
+        focus: null,
+        blur: null,
+        contextMenu: null,
+        wheel: null,
+    };
+    
     constructor(wrapper = null, options = {}, changedCallback = null) {
         this.#wrapper = wrapper;
         Object.assign(this.#options, options);
         this.#changedCallback = changedCallback;
+        this.#bindHandlers();
+    }
+
+    /**
+     * Pre-binds reusable event handlers to preserve stable references.
+     * @private
+     * @returns {void}
+     */
+    #bindHandlers() {
+        this.#handlers.panzoomStart = this.#onPanzoomStart.bind(this);
+        this.#handlers.panzoomChange = this.#onPanzoomChange.bind(this);
+        this.#handlers.panzoomEnd = this.#onPanzoomEnd.bind(this);
+        this.#handlers.keyUp = this.#onKeyUp.bind(this);
+        this.#handlers.focus = this.#enableMouseWheelZoom.bind(this);
+        this.#handlers.blur = this.#disableMouseWheelZoom.bind(this);
+        this.#handlers.contextMenu = this.#onContextMenu.bind(this);
+        this.#handlers.wheel = this.#onZoomWithWheel.bind(this);
     }
 
     /**
@@ -295,7 +332,7 @@ export default class PanzoomController {
         if (!this.#panzoom) {
             return;
         }
-        this.#wrapper.parentElement.removeEventListener("wheel", this.#onZoomWithWheel.bind(this));
+        this.#wrapper.parentElement.removeEventListener("wheel", this.#handlers.wheel);
     }
 
     /**
@@ -310,7 +347,7 @@ export default class PanzoomController {
             return;
         }
         this.#disableMouseWheelZoom();
-        this.#wrapper.parentElement.addEventListener("wheel", this.#onZoomWithWheel.bind(this));
+        this.#wrapper.parentElement.addEventListener("wheel", this.#handlers.wheel);
     }
 
     /**
@@ -364,13 +401,13 @@ export default class PanzoomController {
 
         this.disableEvents();
 
-        this.#wrapper.addEventListener("panzoomstart", this.#onPanzoomStart.bind(this));
-        this.#wrapper.addEventListener("panzoomchange", this.#onPanzoomChange.bind(this));
-        this.#wrapper.addEventListener("panzoomend", this.#onPanzoomEnd.bind(this));
-        this.#wrapper.parentElement.addEventListener("keyup", this.#onKeyUp.bind(this));
-        this.#wrapper.parentElement.addEventListener("focus", this.#enableMouseWheelZoom.bind(this), true);
-        this.#wrapper.parentElement.addEventListener("blur", this.#disableMouseWheelZoom.bind(this), true);
-        this.#wrapper.parentElement.addEventListener("contextmenu", this.#onContextMenu);
+        this.#wrapper.addEventListener("panzoomstart", this.#handlers.panzoomStart);
+        this.#wrapper.addEventListener("panzoomchange", this.#handlers.panzoomChange);
+        this.#wrapper.addEventListener("panzoomend", this.#handlers.panzoomEnd);
+        this.#wrapper.parentElement.addEventListener("keyup", this.#handlers.keyUp);
+        this.#wrapper.parentElement.addEventListener("focus", this.#handlers.focus, true);
+        this.#wrapper.parentElement.addEventListener("blur", this.#handlers.blur, true);
+        this.#wrapper.parentElement.addEventListener("contextmenu", this.#handlers.contextMenu);
         this.#wrapper.parentElement.setAttribute("tabindex", 0);
         this.#setFocus();
     }
@@ -386,13 +423,13 @@ export default class PanzoomController {
             return;
         }
         this.#wrapper.parentElement.removeAttribute("tabindex");
-        this.#wrapper.removeEventListener("panzoomstart", this.#onPanzoomStart.bind(this));
-        this.#wrapper.removeEventListener("panzoomchange", this.#onPanzoomChange.bind(this));
-        this.#wrapper.removeEventListener("panzoomend", this.#onPanzoomEnd.bind(this));
-        this.#wrapper.parentElement.removeEventListener("keyup", this.#onKeyUp.bind(this));
-        this.#wrapper.parentElement.removeEventListener("focus", this.#enableMouseWheelZoom.bind(this));
-        this.#wrapper.parentElement.removeEventListener("blur", this.#disableMouseWheelZoom.bind(this));
-        this.#wrapper.parentElement.removeEventListener("contextmenu", this.#onContextMenu);
+        this.#wrapper.removeEventListener("panzoomstart", this.#handlers.panzoomStart);
+        this.#wrapper.removeEventListener("panzoomchange", this.#handlers.panzoomChange);
+        this.#wrapper.removeEventListener("panzoomend", this.#handlers.panzoomEnd);
+        this.#wrapper.parentElement.removeEventListener("keyup", this.#handlers.keyUp);
+        this.#wrapper.parentElement.removeEventListener("focus", this.#handlers.focus);
+        this.#wrapper.parentElement.removeEventListener("blur", this.#handlers.blur);
+        this.#wrapper.parentElement.removeEventListener("contextmenu", this.#handlers.contextMenu);
     }
 
     /**

package/src/pref-viewer-2d.js

@@ -69,6 +69,10 @@ export default class PrefViewer2D extends HTMLElement {
     #wrapper = null; // Panzoom element
     #panzoomController = null; // PanzoomController instance
 
+    #handlers = {
+        onPanzoomChanged: null,
+    };
+
     /**
      * Create a new instance of the 2D viewer component.
      * The constructor only calls super(); heavy initialization happens in connectedCallback.
@@ -115,6 +119,7 @@ export default class PrefViewer2D extends HTMLElement {
     /**
      * Called when the element is inserted into the DOM.
      * Sets up DOM nodes, initial visibility and starts loading the SVG if provided.
+     * @public
      * @returns {void}
      */
     connectedCallback() {
@@ -128,6 +133,7 @@ export default class PrefViewer2D extends HTMLElement {
     /**
      * Called when the element is removed from the DOM.
      * Disables the PanzoomController to clean up event listeners and resources.
+     * @public
      * @returns {void}
      */
     disconnectedCallback() {
@@ -168,7 +174,8 @@ export default class PrefViewer2D extends HTMLElement {
      * @returns {void}
      */
     #initializePanzoom() {
-        this.#panzoomController = new PanzoomController(this.#wrapper, undefined, this.#onPanzoomChanged.bind(this));
+        this.#handlers.onPanzoomChanged = this.#onPanzoomChanged.bind(this);
+        this.#panzoomController = new PanzoomController(this.#wrapper, undefined, this.#handlers.onPanzoomChanged);
     }
 
     /**
@@ -351,6 +358,9 @@ export default class PrefViewer2D extends HTMLElement {
      * - Resolves to { success: true, error: null } when the SVG was accepted and the component has started rendering.
      */
     async load(svgConfig) {
+        if (!this.#svgResolver) {
+            this.#svgResolver = new SVGResolver(this.#svg);
+        }
         if (!svgConfig || !(await this.#svgResolver.getSVG(svgConfig))) {
             const errorDetail = this.#onError();
             return { success: false, ...errorDetail };

package/src/pref-viewer-3d.js

@@ -130,6 +130,7 @@ export default class PrefViewer3D extends HTMLElement {
      * Called when the element is added to the DOM.
      * Creates the DOM structure, sets initial visibility, initializes component data, and sets up the BabylonJSController.
      * Performs heavy initialization tasks required for the 3D viewer.
+     * @public
      * @returns {void}
      */
     connectedCallback() {
@@ -137,11 +138,13 @@ export default class PrefViewer3D extends HTMLElement {
         this.#setInitialVisibility();
         this.#initializeData();
         this.#initializeBabylonJS();
+        this.#isInitialized = true;
     }
 
     /**
      * Called when the element is removed from the DOM.
      * Disables the BabylonJSController to clean up resources and event listeners associated with the 3D viewer.
+     * @public
      * @returns {void}
      */
     disconnectedCallback() {

package/src/pref-viewer-dialog.js

@@ -28,6 +28,10 @@ export default class PrefViewerDialog extends HTMLElement {
     #content = null;
     #footer = null;
 
+    #handles = {
+        onBackdropClick: null,
+    };
+
     /**
      * Initializes the custom dialog element.
      * Only calls super(); heavy initialization is deferred to connectedCallback.
@@ -35,13 +39,14 @@ export default class PrefViewerDialog extends HTMLElement {
     constructor() {
         super();
     }
-
+    
     /**
      * Called when the element is inserted into the DOM.
      * Sets up the dialog's DOM structure and styles.
      * @returns {void}
-     */
-    connectedCallback() {
+    */
+   connectedCallback() {
+        this.#handles.onBackdropClick = this.#onBackdropClick.bind(this);
         this.#createDOMElements();
     }
 
@@ -51,7 +56,7 @@ export default class PrefViewerDialog extends HTMLElement {
      * @returns {void}
      */
     disconnectedCallback() {
-        this.removeEventListener("click", this.#closeOnBackdropClick.bind(this));
+        this.removeEventListener("click", this.#handles.onBackdropClick);
     }
 
     /**
@@ -73,14 +78,14 @@ export default class PrefViewerDialog extends HTMLElement {
         style.textContent = PrefViewerDialogStyles;
         this.append(style);
 
-        this.addEventListener("click", this.#closeOnBackdropClick.bind(this));
+        this.addEventListener("click", this.#handles.onBackdropClick);
 
         this.#header = this.#wrapper.querySelector(".dialog-header");
         this.#content = this.#wrapper.querySelector(".dialog-content");
         this.#footer = this.#wrapper.querySelector(".dialog-footer");
     }
 
-    #closeOnBackdropClick(event) {
+    #onBackdropClick(event) {
         if (event.target === this) {
             this.close();
         }
@@ -120,6 +125,7 @@ export default class PrefViewerDialog extends HTMLElement {
      * @returns {void}
      */
     close() {
+        this.removeEventListener("click", this.#handles.onBackdropClick);
         this.removeAttribute("open");
         const parent = this.getRootNode().host;
         if (parent) {

package/src/pref-viewer.js

@@ -87,6 +87,10 @@ export default class PrefViewer extends HTMLElement {
     #component3D = null;
     #dialog = null;
 
+    #handlers = {
+        on2DZoomChanged: null,
+    };
+
     /**
      * Creates a new PrefViewer instance and attaches a shadow DOM.
      * Initializes internal state and component references.
@@ -185,6 +189,24 @@ export default class PrefViewer extends HTMLElement {
         this.#processNextTask();
     }
 
+    /**
+     * Called when the element is removed from the DOM.
+     * @public
+     * @returns {void}
+     */
+    disconnectedCallback() {
+        if (this.#dialog) {
+            this.#dialog?.remove();
+        }
+        if (this.#component2D) {
+            this.#component2D.removeEventListener("drawing-zoom-changed", this.#handlers.on2DZoomChanged);
+            this.#component2D.remove();
+        }
+        if (this.#component3D) {
+            this.#component3D.remove();
+        }
+    }
+
     /**
      * Creates and appends the 2D viewer component to the shadow DOM.
      * Sets the "visible" attribute to true by default.
@@ -192,9 +214,10 @@ export default class PrefViewer extends HTMLElement {
      * @returns {void}
      */
     #createComponent2D() {
+        this.#handlers.on2DZoomChanged = this.#on2DZoomChanged.bind(this);
         this.#component2D = document.createElement("pref-viewer-2d");
         this.#component2D.setAttribute("visible", "false");
-        this.#component2D.addEventListener("drawing-zoom-changed", this.#on2DZoomChanged.bind(this));
+        this.#component2D.addEventListener("drawing-zoom-changed", this.#handlers.on2DZoomChanged);
         this.#wrapper.appendChild(this.#component2D);
     }