@preference-sl/pref-viewer 2.16.0-beta.9 → 2.16.1

package/src/localization/translations.js

@@ -3,18 +3,12 @@ export const translations = {
         prefViewer: {
             menu3d: {
                 title: "3D render settings",
-                subtitle: "Toggle visual effects on or off.",
-                pendingLabel: "Pending changes",
+                subtitle: "Modify the visual effects.",
                 actions: {
-                    apply: "Apply",
-                    applying: "Applying...",
                     play: "Play",
                     pause: "Pause",
                 },
-                status: {
-                    error: "Couldn't apply the changes.",
-                },
-                switches: {
+                features: {
                     antiAliasingEnabled: {
                         label: "Antialiasing",
                         helper: "Softens jagged edges and lines.",
@@ -70,18 +64,12 @@ export const translations = {
         prefViewer: {
             menu3d: {
                 title: "Ajustes de render 3D",
-                subtitle: "Activa o desactiva los efectos visuales.",
-                pendingLabel: "Pendiente de aplicar",
+                subtitle: "Modifica los efectos visuales.",
                 actions: {
-                    apply: "Aplicar",
-                    applying: "Aplicando...",
                     play: "Reproducir",
                     pause: "Pausar",
                 },
-                status: {
-                    error: "No se pudo aplicar los cambios.",
-                },
-                switches: {
+                features: {
                     antiAliasingEnabled: {
                         label: "Antialiasing",
                         helper: "Suaviza aristas y líneas.",
@@ -100,7 +88,7 @@ export const translations = {
                     },
                     highlightEnabled: {
                         label: "Resaltado",
-                        helper: "Resaltar elementos animados al pasar el ratón.",
+                        helper: "Resalta elementos animados al pasar el ratón.",
                     },
                     highlightColor: {
                         label: "Color de resaltado",

package/src/material-utils.js

@@ -0,0 +1,72 @@
+import { PBRMaterial } from "@babylonjs/core";
+
+/**
+ * Utilities for classifying and tagging PBR materials by their transparency/transmission mode.
+ * Used by BabylonJSController at load time and by pref-viewer-3d for render-order decisions.
+ */
+
+const PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY = "prefViewerSimplifiedTransmission";
+
+/**
+ * Tags a PBR material as having been converted from physical KHR_materials_transmission to simple
+ * alpha blending. The tag is stored in `mat.metadata` under an internal key so that downstream
+ * render-order passes can still identify these materials as transparent candidates even after
+ * their `subSurface.isRefractionEnabled` flag has been cleared.
+ *
+ * Returns the same material instance (or the original value when `mat` is falsy) so calls can be
+ * chained.
+ * @param {import("@babylonjs/core").PBRMaterial|null|undefined} mat - Material to tag.
+ * @returns {import("@babylonjs/core").PBRMaterial|null|undefined} The same `mat` value that was passed in.
+ */
+export function markPrefViewerSimplifiedTransmissionMaterial(mat) {
+    if (!mat) {
+        return mat;
+    }
+            
+    mat.metadata = {
+        ...(mat.metadata ?? {}),
+        [PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY]: true,
+    };
+    return mat;
+}
+
+/**
+ * Returns true when the material uses Babylon.js physical glass rendering — i.e. either
+ * KHR_materials_transmission (refraction) or KHR_materials_translucency is active.
+ *
+ * This is intentionally narrower than `isPrefViewerTransparentRenderOrderMaterial`: it only
+ * matches full physical transmission, not plain alpha blending or simplified environment glass.
+ * @param {import("@babylonjs/core").Material|null|undefined} mat - Material to test.
+ * @returns {boolean}
+ */
+export function isPrefViewerPhysicalGlassMaterial(mat) {
+    return Boolean(mat?.subSurface?.isRefractionEnabled || mat?.subSurface?.isTranslucencyEnabled);
+}
+
+/**
+ * Returns true when a material should be placed in the transparent rendering group (renderingGroupId=1).
+ *
+ * A material qualifies when any of the following is true:
+ * - It is a physical glass material (KHR_materials_transmission / translucency).
+ * - It has been tagged as simplified environment transmission via `markPrefViewerSimplifiedTransmissionMaterial`.
+ * - Its effective alpha is below 1, its `transparencyMode` is alpha-blend or alpha-test-and-blend,
+ *   or it self-reports as needing blending/testing through the Babylon.js material API.
+ * @param {import("@babylonjs/core").Material|null|undefined} mat - Material to test.
+ * @returns {boolean}
+ */
+export function isPrefViewerTransparentRenderOrderMaterial(mat) {
+    if (!mat) {
+        return false;
+    }
+    const isTransmissive = isPrefViewerPhysicalGlassMaterial(mat);
+    const isSimplifiedTransmission = mat.metadata?.[PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY] === true;
+    const alpha = typeof mat.alpha === "number" ? mat.alpha : 1;
+    const isAlphaBlended =
+        alpha < 1 ||
+        mat.transparencyMode === PBRMaterial.PBRMATERIAL_ALPHABLEND ||
+        mat.transparencyMode === PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND ||
+        mat.needAlphaBlending?.() === true ||
+        mat.needAlphaTesting?.() === true;
+
+    return Boolean(isTransmissive || isSimplifiedTransmission || isAlphaBlended);
+}

package/src/panzoom-controller.js

@@ -27,6 +27,7 @@ import Panzoom from "@panzoom/panzoom/dist/panzoom.es.js";
  *  - 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.
+ *  - clickCallback (function): Optional callback invoked with the original event after a gesture is classified as a click.
  *
  * Public Methods:
  *  - enable(): Enables the Panzoom instance and initializes it if not already enabled.
@@ -40,7 +41,7 @@ import Panzoom from "@panzoom/panzoom/dist/panzoom.es.js";
  *
  * Getters:
  *  - panzoom: Returns the current Panzoom instance or null if not initialized.
- *  - state: Returns the current pan/zoom state (moved, scaled, maximized, minimized).
+ *  - state: Returns the current pan/zoom transform and semantic state.
  *
  * Private Methods:
  *  - #bindHandlers(): Pre-binds reusable event handlers to preserve stable references.
@@ -81,6 +82,9 @@ export default class PanzoomController {
         totalCounter: 0,
     };
     #state = {
+        x: 0,
+        y: 0,
+        scale: 1,
         moved: false,
         scaled: false,
         maximized: false,
@@ -89,6 +93,7 @@ export default class PanzoomController {
     #wrapper = null;
     
     #changedCallback = null;
+    #clickCallback = null;
     #handlers = {
         panzoomStart: null,
         panzoomChange: null,
@@ -100,10 +105,11 @@ export default class PanzoomController {
         wheel: null,
     };
     
-    constructor(wrapper = null, options = {}, changedCallback = null) {
+    constructor(wrapper = null, options = {}, changedCallback = null, clickCallback = null) {
         this.#wrapper = wrapper;
         Object.assign(this.#options, options);
         this.#changedCallback = changedCallback;
+        this.#clickCallback = clickCallback;
         this.#bindHandlers();
     }
 
@@ -145,7 +151,7 @@ export default class PanzoomController {
      * @returns {{x:number,y:number}|null} Point or null if coordinates not present.
      */
     #getPointFromEvent(e) {
-        if (e.clientX && e.clientY) {
+        if (Number.isFinite(e?.clientX) && Number.isFinite(e?.clientY)) {
             return {
                 x: e.clientX,
                 y: e.clientY,
@@ -155,6 +161,13 @@ export default class PanzoomController {
         }
     }
 
+    /** Reset transient pointer data after a completed or interrupted gesture. */
+    #resetPointerEvents() {
+        this.#pointerEvents.lastPointerDownPosition = null;
+        this.#pointerEvents.partialCounter = 0;
+        this.#pointerEvents.totalCounter = 0;
+    }
+
     /**
      * Update internal pan/zoom state and emit a custom event with current values.
      * If a changed callback is defined, it is invoked with the updated state object.
@@ -164,6 +177,9 @@ export default class PanzoomController {
      */
     #checkPanzoomState(transform) {
         this.#state = {
+            x: transform.x,
+            y: transform.y,
+            scale: transform.scale,
             moved: transform.x !== 0 || transform.y !== 0,
             scaled: transform.scale !== 1,
             maximized: transform.scale === this.#options.maxScale,
@@ -252,7 +268,6 @@ export default class PanzoomController {
      * @private
      * @param {CustomEvent} e - Panzoom custom event with originalEvent property.
      * @returns {void}
-     * @todo Implement selection/click logic.
      */
     #onPanzoomEnd(e) {
         this.#pointerEvents.partialCounter--;
@@ -260,21 +275,21 @@ export default class PanzoomController {
         if (this.#pointerEvents.partialCounter > 0) {
             return;
         } else if (this.#pointerEvents.totalCounter > 1) {
-            this.#pointerEvents.partialCounter = 0;
-            this.#pointerEvents.totalCounter = 0;
+            this.#resetPointerEvents();
             return;
         }
 
-        this.#pointerEvents.partialCounter = 0;
-        this.#pointerEvents.totalCounter = 0;
-
-        const originalEvent = e.detail.originalEvent;
+        const originalEvent = e?.detail?.originalEvent;
+        if (!originalEvent) {
+            this.#resetPointerEvents();
+            return;
+        }
         const point = this.#getPointFromEvent(originalEvent);
         const distance = this.#getDistanceBetweenPoints(point, this.#pointerEvents.lastPointerDownPosition);
 
         let proceedToPick = true;
 
-        if (!point || distance > this.#interactionOptions.clickThreshold) {
+        if (!point || !this.#pointerEvents.lastPointerDownPosition || distance > this.#interactionOptions.clickThreshold) {
             proceedToPick = false;
         }
 
@@ -282,7 +297,7 @@ export default class PanzoomController {
             proceedToPick = false;
         }
 
-        this.#pointerEvents.lastPointerDownPosition = null;
+        this.#resetPointerEvents();
 
         if (!proceedToPick) {
             return;
@@ -292,7 +307,9 @@ export default class PanzoomController {
             return;
         }
 
-        // Selection/click logic can be implemented here.
+        if (typeof this.#clickCallback === "function") {
+            this.#clickCallback(originalEvent);
+        }
     }
 
     /**
@@ -302,7 +319,7 @@ export default class PanzoomController {
      * @returns {void}
      */
     #onPanzoomStart(e) {
-        const originalEvent = e.detail.originalEvent;
+        const originalEvent = e?.detail?.originalEvent;
         this.#pointerEvents.partialCounter++;
         this.#pointerEvents.totalCounter++;
         this.#pointerEvents.lastPointerDownPosition = this.#getPointFromEvent(originalEvent);
@@ -421,13 +438,15 @@ export default class PanzoomController {
         if (!this.#wrapper) {
             return;
         }
+        this.#disableMouseWheelZoom();
+        this.#resetPointerEvents();
         this.#wrapper.parentElement.removeAttribute("tabindex");
         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("focus", this.#handlers.focus, true);
+        this.#wrapper.parentElement.removeEventListener("blur", this.#handlers.blur, true);
         this.#wrapper.parentElement.removeEventListener("contextmenu", this.#handlers.contextMenu);
     }
 
@@ -523,7 +542,7 @@ export default class PanzoomController {
     /**
      * Returns the current pan/zoom state.
      * @public
-     * @returns {object} The state object: { moved, scaled, maximized, minimized }.
+     * @returns {object} The state object: { x, y, scale, moved, scaled, maximized, minimized }.
      */
     get state() {
         return this.#state;