@preference-sl/pref-viewer 2.11.0-beta.9 → 2.11.0

package/src/panzoom-controller.js

@@ -1,59 +1,67 @@
-import "@panzoom/panzoom";
-
+// Explicitly target the ESM bundle so esbuild (platform=node) picks up the default export.
+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.
+ *
+ * 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.
  *
- * 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.
+ * 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
     };
@@ -79,11 +87,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);
     }
 
     /**
@@ -294,7 +331,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);
     }
 
     /**
@@ -309,7 +346,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);
     }
 
     /**
@@ -363,13 +400,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();
     }
@@ -385,13 +422,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

@@ -1,5 +1,6 @@
 import SVGResolver from "./svg-resolver.js";
 import PanzoomController from "./panzoom-controller.js";
+import { PrefViewer2DStyles } from "./styles.js";
 
 /**
  * PrefViewer2D - Custom element for rendering and interacting with 2D SVG content.
@@ -46,7 +47,7 @@ import PanzoomController from "./panzoom-controller.js";
  * Notes on extensibility
  *  - Modeled for easy addition of other input sources or interaction modes (e.g., selection callbacks).
  */
-export class PrefViewer2D extends HTMLElement {
+export default class PrefViewer2D extends HTMLElement {
     // State flags
     #isInitialized = false;
     #isLoaded = false;
@@ -68,6 +69,10 @@ export 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.
@@ -114,6 +119,7 @@ export 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() {
@@ -127,6 +133,7 @@ export 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() {
@@ -143,8 +150,9 @@ export class PrefViewer2D extends HTMLElement {
     #createDOMElements() {
         this.#wrapper = document.createElement("div");
         this.append(this.#wrapper);
+        
         const style = document.createElement("style");
-        style.textContent = `@import "../src/css/pref-viewer-2d.css";`;
+        style.textContent = PrefViewer2DStyles;
         this.append(style);
     }
 
@@ -166,7 +174,8 @@ export 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);
     }
 
     /**
@@ -349,6 +358,9 @@ export 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-data.js

@@ -46,7 +46,7 @@ export class ContainerData {
         this.update.pending = true;
         this.update.storage = storage;
         this.update.success = false;
-        this.update.show = show !== undefined ? show : this.update.show;
+        this.update.show = show !== undefined ? show : this.update.show !== null ? this.update.show : this.show;
     }
     setPendingCacheData(size = 0, timeStamp = null) {
         this.update.size = size;
@@ -62,7 +62,7 @@ export class ContainerData {
         return this.visible === true;
     }
     get mustBeShown() {
-        return this.show === true;
+        return this.update.show !== null ? this.update.show === true : this.show === true;
     }
 }
 
@@ -152,6 +152,7 @@ export class CameraData {
         if (success) {
             this.update.success = true;
             this.value = this.update.value;
+            this.locked = this.update.locked;
         } else {
             this.update.success = false;
         }

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

@@ -1,5 +1,6 @@
 import { CameraData, ContainerData, MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSController from "./babylonjs-controller.js";
+import { PrefViewer3DStyles } from "./styles.js";
 
 /**
  * PrefViewer3D - Custom Web Component for interactive 3D visualization and configuration.
@@ -56,7 +57,7 @@ import BabylonJSController from "./babylonjs-controller.js";
  *  - Designed for extensibility and integration in product configurators and visualization tools.
  *  - All resource management and rendering operations are performed asynchronously for performance.
  */
-export class PrefViewer3D extends HTMLElement {
+export default class PrefViewer3D extends HTMLElement {
     // State flags
     #isInitialized = false;
     #isLoaded = false;
@@ -129,6 +130,7 @@ export 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() {
@@ -136,11 +138,13 @@ export 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() {
@@ -157,10 +161,12 @@ export class PrefViewer3D extends HTMLElement {
     #createDOMElements() {
         this.#wrapper = document.createElement("div");
         this.append(this.#wrapper);
+
         this.#canvas = document.createElement("canvas");
         this.#wrapper.appendChild(this.#canvas);
+
         const style = document.createElement("style");
-        style.textContent = `@import "../src/css/pref-viewer-3d.css";`;
+        style.textContent = PrefViewer3DStyles;
         this.append(style);
     }
 
@@ -418,7 +424,7 @@ export class PrefViewer3D extends HTMLElement {
             tried: toSetDetail,
             success: settedDetail,
         };
-        
+
         const customEventOptions = {
             bubbles: true,
             cancelable: true,
@@ -460,6 +466,7 @@ export class PrefViewer3D extends HTMLElement {
     show() {
         this.#isVisible = true;
         this.setAttribute("visible", "true");
+        this.#canvas.focus();
     }
 
     /**
@@ -697,4 +704,4 @@ export class PrefViewer3D extends HTMLElement {
     get isVisible() {
         return this.#isVisible;
     }
-}
+}

package/src/pref-viewer-dialog.js

@@ -1,3 +1,5 @@
+import { PrefViewerDialogStyles } from "./styles.js";
+
 /**
  * PrefViewerDialog - Custom Web Component for displaying modal dialogs in PrefViewer.
  *
@@ -20,12 +22,16 @@
  *  - close(): Hides and removes the dialog, refocuses the canvas if available.
  *  - #createDOMElements(): Creates the dialog structure and applies styles.
  */
-export class PrefViewerDialog extends HTMLElement {
+export default class PrefViewerDialog extends HTMLElement {
     #wrapper = null;
     #header = null;
     #content = null;
     #footer = null;
 
+    #handles = {
+        onBackdropClick: null,
+    };
+
     /**
      * Initializes the custom dialog element.
      * Only calls super(); heavy initialization is deferred to connectedCallback.
@@ -33,13 +39,14 @@ export 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();
     }
 
@@ -49,7 +56,7 @@ export class PrefViewerDialog extends HTMLElement {
      * @returns {void}
      */
     disconnectedCallback() {
-        this.removeEventListener("click", this.#closeOnBackdropClick.bind(this));
+        this.removeEventListener("click", this.#handles.onBackdropClick);
     }
 
     /**
@@ -68,17 +75,17 @@ export class PrefViewerDialog extends HTMLElement {
         this.append(this.#wrapper);
 
         const style = document.createElement("style");
-        style.textContent = `@import "../src/css/pref-viewer-dialog.css";`;
+        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();
         }
@@ -118,6 +125,7 @@ export class PrefViewerDialog extends HTMLElement {
      * @returns {void}
      */
     close() {
+        this.removeEventListener("click", this.#handles.onBackdropClick);
         this.removeAttribute("open");
         const parent = this.getRootNode().host;
         if (parent) {
@@ -131,7 +139,6 @@ export class PrefViewerDialog extends HTMLElement {
                     component2D.focus();
                 }
             }
-
         }
         this.#wrapper = this.#header = this.#content = this.#footer = null;
         this.remove();

package/src/pref-viewer-task.js

@@ -18,7 +18,7 @@
  *  - Validates the type (case-insensitive) and throws a TypeError if invalid.
  *  - Freezes the instance to prevent further modification.
  */
-export class PrefViewerTask {
+export default class PrefViewerTask {
     static Types = Object.freeze({
         Config: "config",
         Drawing: "drawing",