@preference-sl/pref-viewer 2.18.0-beta.1 → 3.0.0-beta.0

package/src/pref-viewer-controls-presentation.js

@@ -0,0 +1,292 @@
+import { ViewerControlsPresentationStyles } from "./styles.js";
+
+/**
+ * Owns control presentation for one viewer surface, shared by its descendant overlays.
+ * Dialogs inherit the same density and size tokens as the render, playback and AR controls.
+ * Resolves explicit density or primary-pointer capability without using DPR or changing the page viewport.
+ * Publishes scoped CSS state and component dimensions; dispose before removing the owning surface.
+ * Observes the active SVG/Canvas widget size plus overlay geometry/visibility and reserves playback space only for horizontally overlapping AR actions.
+ * Moves render settings immediately left of the upper-right ViewCube when their normal right-side position is too low or intersects AR.
+ */
+export default class PrefViewerControlsPresentation {
+    #surface;
+    #getPreference;
+    #onChange;
+    #media;
+    #observer;
+    #mutationObserver;
+    #observedControls = new Set();
+    #layoutPending = false;
+    #style;
+    #disposed = false;
+    #key = "";
+
+    /**
+     * Creates presentation styles and subscribes once to capability and component-size changes.
+     * Shares the resize observer with overlay controls and watches their insertion and visibility changes.
+     * Missing browser APIs fall back to compact auto presentation and current measured dimensions.
+     * @param {HTMLElement} surface - Scoped ancestor of the controls; nested viewers inherit its CSS state.
+     * @param {function(): ?string} getPreference - Current controls-density attribute, read on every refresh.
+     * @param {function(): void} [onChange] - Geometry refresh callback; defaults to a no-op.
+     */
+    constructor(surface, getPreference, onChange = () => {}) {
+        this.#surface = surface;
+        this.#getPreference = getPreference;
+        this.#onChange = onChange;
+        const view = surface.ownerDocument.defaultView;
+        this.#style = surface.ownerDocument.createElement("style");
+        this.#style.textContent = ViewerControlsPresentationStyles;
+        surface.append(this.#style);
+        this.#media = view?.matchMedia?.("(pointer: coarse)");
+        if (this.#media?.addEventListener) {
+            this.#media.addEventListener("change", this.#onMediaChange);
+        } else {
+            this.#media?.addListener?.(this.#onMediaChange);
+        }
+        const Observer = view?.ResizeObserver ?? globalThis.ResizeObserver;
+        this.#observer = Observer ? new Observer(this.#onResize) : null;
+        if (view?.MutationObserver) {
+            this.#mutationObserver = new view.MutationObserver(this.#onControlsChanged);
+            this.#mutationObserver.observe(surface, {
+                subtree: true, childList: true, attributes: true,
+                attributeFilter: ["class", "style", "hidden", "visible"],
+            });
+        }
+        this.refresh();
+        this.#observer?.observe(surface);
+    }
+
+    /**
+     * Re-evaluates the attribute/capability and measures the surface without changing model or camera state.
+     * @returns {void} No-op after disposal; notifies the geometry owner only for effective changes.
+     */
+    refresh() {
+        this.#update(this.#surface.getBoundingClientRect());
+    }
+
+    /**
+     * Re-evaluates automatic presentation when the primary pointing device changes.
+     * @private
+     * @returns {void}
+     */
+    #onMediaChange = () => { this.refresh(); };
+
+    /**
+     * Consumes the owning surface's observed content size, including hidden-to-visible and iframe resizes.
+     * Overlay resize entries also refresh the conditional playback clearance.
+     * @private
+     * @param {ResizeObserverEntry[]} entries - Resize entries; unrelated entries are ignored.
+     * @returns {void}
+     */
+    #onResize = entries => {
+        const entry = entries.find(item => item.target === this.#surface);
+        if (entry) {
+            this.#update(entry.contentRect);
+        }
+        this.#scheduleLayout();
+    };
+
+    /**
+     * Schedules layout for inserted/removed overlays or changes affecting their visibility and dimensions.
+     * Tracks widget insertion/replacement plus settings/AR geometry, ignoring unrelated model/UI and SVG-polygon geometry mutations.
+     * @private
+     * @param {MutationRecord[]} records - Mutations within this presentation surface.
+     * @returns {void}
+     */
+    #onControlsChanged = records => {
+        const selector = ".pref-viewer-view-cube, .babylonVRicon, .animation-menu, .xr-button-overlay, pref-viewer-3d, pref-viewer-menu-3d, .menu-toggle";
+        if (records.some(record => record.target === this.#surface
+            || record.target.matches?.(selector)
+            || [...record.addedNodes, ...record.removedNodes].some(node => node.matches?.(selector) || node.querySelector?.(selector)))) {
+            this.#scheduleLayout();
+        }
+    };
+
+    /**
+     * Coalesces control mutations/resizes into one layout measurement after the current DOM update.
+     * @private
+     * @returns {void} Queued work becomes a no-op after disposal.
+     */
+    #scheduleLayout() {
+        if (this.#disposed || this.#layoutPending) {
+            return;
+        }
+        this.#layoutPending = true;
+        Promise.resolve().then(() => {
+            this.#layoutPending = false;
+            if (!this.#disposed) {
+                this.#layoutControls();
+            }
+        });
+    }
+
+    /**
+     * Measures visible AR actions and offsets centered playback only where their horizontal bounds intersect.
+     * Publishes the measured active SVG/Canvas cube width for side-menu placement; clears it when no cube is visible.
+     * Also updates render-menu side from its independent normal right-side position.
+     * Applies the same clearance rule in compact and comfortable presentation, using actual control dimensions.
+     * Uses CSS-pixel geometry in the menu's positioning container, including scaled embedding surfaces.
+     * Owns the playback-bottom property and control resize subscriptions until removal or disposal.
+     * @private
+     * @returns {void}
+     */
+    #layoutControls() {
+        const controls = new Set(this.#surface.querySelectorAll(".pref-viewer-view-cube, .babylonVRicon, .animation-menu, pref-viewer-menu-3d, pref-viewer-menu-3d .menu-toggle"));
+        for (const control of this.#observedControls) {
+            if (!controls.has(control)) {
+                this.#observer?.unobserve(control);
+                control.style.removeProperty("--pref-viewer-controls-playback-bottom");
+                control.removeAttribute("data-controls-menu-side");
+            }
+        }
+        for (const control of controls) {
+            if (!this.#observedControls.has(control)) {
+                this.#observer?.observe(control);
+            }
+        }
+        this.#observedControls = controls;
+        const view = this.#surface.ownerDocument.defaultView;
+        const cube = this.#surface.querySelector(".pref-viewer-view-cube:not([hidden])");
+        const cubeRect = cube?.getBoundingClientRect();
+        const surfaceRect = this.#surface.getBoundingClientRect();
+        const scale = this.#surface.clientWidth > 0 ? surfaceRect.width / this.#surface.clientWidth : 1;
+        const cubeSize = cubeRect?.width > 0 ? `${cubeRect.width / (scale || 1)}px` : null;
+        if (cubeSize) {
+            if (this.#surface.style.getPropertyValue("--pref-viewer-controls-cube-actual-size") !== cubeSize) {
+                this.#surface.style.setProperty("--pref-viewer-controls-cube-actual-size", cubeSize);
+            }
+        } else {
+            this.#surface.style.removeProperty("--pref-viewer-controls-cube-actual-size");
+        }
+        const tokens = view.getComputedStyle(this.#surface);
+        const edge = parseFloat(tokens.getPropertyValue("--pref-viewer-controls-edge-spacing")) || 16;
+        const gap = parseFloat(tokens.getPropertyValue("--pref-viewer-controls-overlay-gap")) || 12;
+        const buttons = [...controls].filter(control => control.matches(".babylonVRicon"))
+            .filter(control => view.getComputedStyle(control).visibility !== "hidden" && view.getComputedStyle(control).opacity !== "0")
+            .map(control => control.getBoundingClientRect()).filter(rect => rect.width > 0 && rect.height > 0);
+        for (const menu of [...controls].filter(control => control.matches(".animation-menu"))) {
+            const rect = menu.getBoundingClientRect();
+            const container = menu.offsetParent ?? this.#surface;
+            const containerRect = container.getBoundingClientRect();
+            const scale = container.clientWidth > 0 ? containerRect.width / container.clientWidth : 1;
+            let bottom = edge;
+            if (rect.width > 0) {
+                for (const button of buttons) {
+                    if (rect.right + gap * scale > button.left && rect.left - gap * scale < button.right) {
+                        bottom = Math.max(bottom, (containerRect.bottom - button.top) / (scale || 1) + gap);
+                    }
+                }
+            }
+            const value = `${bottom}px`;
+            if (menu.style.getPropertyValue("--pref-viewer-controls-playback-bottom") !== value) {
+                menu.style.setProperty("--pref-viewer-controls-playback-bottom", value);
+            }
+        }
+        this.#layoutRenderMenus(controls, buttons, edge, gap);
+    }
+
+    /**
+     * Chooses settings alignment from the normal right-side rectangle, independently of its current placement beside the cube.
+     * Moves the trigger/panel to the upper right, immediately left of the cube, when it cannot fit below the cube or intersects visible AR clearance.
+     * Comparing a stable right-side candidate prevents resize/mutation feedback from oscillating between sides.
+     * @private
+     * @param {Set<HTMLElement>} controls - Currently observed overlay elements, including settings hosts/triggers.
+     * @param {DOMRect[]} buttons - Nonempty visible AR rectangles in viewport CSS coordinates.
+     * @param {number} edge - Normal component edge spacing in unscaled CSS pixels.
+     * @param {number} gap - Minimum gap between trigger and AR, in unscaled CSS pixels.
+     * @returns {void} Publishes only an owned beside-cube attribute; stylesheet owns positioning and panel alignment.
+     */
+    #layoutRenderMenus(controls, buttons, edge, gap) {
+        const view = this.#surface.ownerDocument.defaultView;
+        const surface = this.#surface.getBoundingClientRect();
+        const scaleX = this.#surface.clientWidth > 0 ? surface.width / this.#surface.clientWidth : 1;
+        const scaleY = this.#surface.clientHeight > 0 ? surface.height / this.#surface.clientHeight : 1;
+        for (const menu of [...controls].filter(control => control.matches("pref-viewer-menu-3d"))) {
+            const toggle = menu.querySelector(".menu-toggle");
+            const rect = toggle?.getBoundingClientRect();
+            let moveBesideCube = false;
+            if (rect?.width > 0 && rect.height > 0 && surface.width > 0 && surface.height > 0 && scaleX > 0 && scaleY > 0) {
+                const style = view.getComputedStyle(menu);
+                const margin = parseFloat(style.getPropertyValue("--toggle-margin")) || edge;
+                const top = parseFloat(style.getPropertyValue("--pref-viewer-render-menu-top")) || margin;
+                const right = surface.right - margin * scaleX;
+                const candidate = { right, left: right - rect.width, top: surface.top + top * scaleY,
+                    bottom: surface.top + top * scaleY + rect.height };
+                moveBesideCube = candidate.bottom + margin * scaleY > surface.bottom
+                    || buttons.some(button => candidate.left < button.right + gap * scaleX
+                        && candidate.right > button.left - gap * scaleX
+                        && candidate.top < button.bottom + gap * scaleY
+                        && candidate.bottom > button.top - gap * scaleY);
+            }
+            if (moveBesideCube) {
+                if (menu.getAttribute("data-controls-menu-side") !== "beside-cube") {
+                    menu.setAttribute("data-controls-menu-side", "beside-cube");
+                }
+            } else {
+                menu.removeAttribute("data-controls-menu-side");
+            }
+        }
+    }
+
+    /**
+     * Publishes density, touch capability, narrow layout and measured dimensions on this surface only.
+     * Invalid or missing preferences use auto; explicit density never overrides actual touch availability.
+     * @private
+     * @param {{width: number, height: number}} rect - Current dimensions in CSS pixels.
+     * @returns {void}
+     */
+    #update(rect) {
+        if (this.#disposed) {
+            return;
+        }
+        this.#scheduleLayout();
+        const preference = this.#getPreference();
+        const touch = this.#media?.matches === true;
+        const density = ["compact", "comfortable"].includes(preference) ? preference : touch ? "comfortable" : "compact";
+        const width = Math.max(0, Math.round(rect.width || this.#surface.clientWidth || 0));
+        const height = Math.max(0, Math.round(rect.height || this.#surface.clientHeight || 0));
+        const narrow = width > 0 && width < 480;
+        const key = `${density},${touch},${width},${height}`;
+        if (key === this.#key) {
+            return;
+        }
+        this.#key = key;
+        this.#surface.dataset.controlsDensity = density;
+        this.#surface.dataset.controlsTouch = String(touch);
+        this.#surface.dataset.controlsNarrow = String(narrow);
+        this.#surface.style.setProperty("--pref-viewer-controls-height", `${height}px`);
+        this.#surface.style.setProperty("--pref-viewer-controls-width", `${width}px`);
+        this.#onChange();
+    }
+
+    /**
+     * Releases media/resize subscriptions and removes only this instance's presentation state/styles.
+     * Disconnects control mutations and removes owned playback offsets/settings-side attributes from observed overlays.
+     * @returns {void} Idempotent; queued observer callbacks cannot change the detached surface.
+     */
+    dispose() {
+        if (this.#disposed) {
+            return;
+        }
+        this.#disposed = true;
+        this.#observer?.disconnect();
+        this.#mutationObserver?.disconnect();
+        for (const control of this.#observedControls) {
+            control.style.removeProperty("--pref-viewer-controls-playback-bottom");
+            control.removeAttribute("data-controls-menu-side");
+        }
+        this.#observedControls.clear();
+        if (this.#media?.removeEventListener) {
+            this.#media.removeEventListener("change", this.#onMediaChange);
+        } else {
+            this.#media?.removeListener?.(this.#onMediaChange);
+        }
+        this.#style.remove();
+        for (const name of ["data-controls-density", "data-controls-touch", "data-controls-narrow"]) {
+            this.#surface.removeAttribute(name);
+        }
+        this.#surface.style.removeProperty("--pref-viewer-controls-height");
+        this.#surface.style.removeProperty("--pref-viewer-controls-width");
+        this.#surface.style.removeProperty("--pref-viewer-controls-cube-actual-size");
+    }
+}

package/src/pref-viewer-dialog.js

@@ -6,6 +6,8 @@ import { PrefViewerDialogStyles } from "./styles.js";
  * Overview:
  *  - Provides a modal dialog overlay for user interactions such as downloads or confirmations.
  *  - Handles DOM creation, styling, and open/close logic.
+ *  - Owns temporary touch feedback for dynamic controls, including associated radio/checkbox labels.
+ *    Releases press state/listeners on completion, cancellation, blur, content replacement or removal.
  *  - Ensures dialog content is centered and styled appropriately.
  *  - Automatically focuses the canvas when closed for improved accessibility.
  *
@@ -28,6 +30,68 @@ export default class PrefViewerDialog extends HTMLElement {
     #content = null;
     #footer = null;
 
+    #touchPressedControl = null;
+    #touchPointerId = null;
+
+    /**
+     * Marks an enabled control during touch-down without relying on delayed native :active styling.
+     * Resolves nested or for-associated labels to their input; ignores labels pointing outside this dialog.
+     * Pointer input also clears owned keyboard modality; a second touch clears feedback.
+     * Native clicks, selection, text entry, ranges and scrolling stay untouched.
+     * @param {PointerEvent} event - Pointer down bubbling from dynamic dialog content or footer.
+     * @returns {void}
+     */
+    #onTouchPress = event => {
+        this.removeAttribute("data-keyboard-navigation");
+        if (event.pointerType !== "touch") {
+            return;
+        }
+        if (this.#touchPressedControl) {
+            this.#clearTouchPress();
+            return;
+        }
+        const target = event.target.closest?.('button, input, select, textarea, label, a[href]');
+        const control = target?.matches("label") ? target.control : target;
+        if (!control || !this.contains(control) || control.matches(':disabled, [type="hidden"], [aria-disabled="true"]')) {
+            return;
+        }
+        this.#touchPressedControl = control;
+        this.#touchPointerId = event.pointerId;
+        control.setAttribute("data-touch-pressed", "");
+    };
+
+    /**
+     * Clears feedback when the owning finger finishes or is cancelled, even outside this dialog.
+     * @param {PointerEvent} event - Document-level pointer completion.
+     * @returns {void}
+     */
+    #onTouchRelease = event => {
+        if (event.pointerId === this.#touchPointerId) {
+            this.#clearTouchPress();
+        }
+    };
+
+    /**
+     * Removes only owned press state on completion, blur, content replacement or teardown.
+     * @returns {void} Idempotent; preserves values, focus and native control behavior.
+     */
+    #clearTouchPress = () => {
+        this.#touchPressedControl?.removeAttribute("data-touch-pressed");
+        this.#touchPressedControl = null;
+        this.#touchPointerId = null;
+    };
+
+    /**
+     * Keeps keyboard focus visible where mobile WebKit does not expose :focus-visible for radio arrow navigation.
+     * @param {KeyboardEvent} event - Navigation key bubbling from a dialog control; native handling is preserved.
+     * @returns {void} Publishes scoped modality only for Tab and arrow keys; pointer input resets it.
+     */
+    #onKeyboardNavigation = event => {
+        if (event.key === "Tab" || event.key.startsWith("Arrow")) {
+            this.setAttribute("data-keyboard-navigation", "");
+        }
+    };
+
     #handles = {
         onBackdropClick: null,
     };
@@ -42,21 +106,34 @@ export default class PrefViewerDialog extends HTMLElement {
     
     /**
      * Called when the element is inserted into the DOM.
-     * Sets up the dialog's DOM structure and styles.
+     * Sets up the dialog's DOM structure/styles and subscribes to transient touch feedback.
+     * Owns keyboard navigation feedback and document completion/window blur listeners until disconnection.
      * @returns {void}
      */
-   connectedCallback() {
+    connectedCallback() {
         this.#handles.onBackdropClick = this.#onBackdropClick.bind(this);
         this.#createDOMElements();
+        this.addEventListener("pointerdown", this.#onTouchPress);
+        this.addEventListener("keydown", this.#onKeyboardNavigation);
+        this.ownerDocument.addEventListener("pointerup", this.#onTouchRelease);
+        this.ownerDocument.addEventListener("pointercancel", this.#onTouchRelease);
+        this.ownerDocument.defaultView?.addEventListener("blur", this.#clearTouchPress);
     }
 
     /**
      * Called when the element is removed from the DOM.
-     * Cleans up resources and event listeners.
+     * Cleans up backdrop and touch listeners, including document/window subscriptions and owned press state.
      * @returns {void}
      */
     disconnectedCallback() {
         this.removeEventListener("click", this.#handles.onBackdropClick);
+        this.removeEventListener("pointerdown", this.#onTouchPress);
+        this.removeEventListener("keydown", this.#onKeyboardNavigation);
+        this.removeAttribute("data-keyboard-navigation");
+        this.ownerDocument.removeEventListener("pointerup", this.#onTouchRelease);
+        this.ownerDocument.removeEventListener("pointercancel", this.#onTouchRelease);
+        this.ownerDocument.defaultView?.removeEventListener("blur", this.#clearTouchPress);
+        this.#clearTouchPress();
     }
 
     /**
@@ -98,10 +175,10 @@ export default class PrefViewerDialog extends HTMLElement {
     }
 
     /**
-     * Opens the dialog and sets its header, content, and footer.
-     * @param {string} title - The dialog title to display in the header.
-     * @param {string} content - The HTML content to display in the dialog body.
-     * @param {string} footer - The HTML content to display in the dialog footer (e.g., action buttons).
+     * Opens the dialog and replaces its header, content, and footer, clearing press/keyboard feedback on replaced controls.
+     * @param {string} [title=""] - The dialog title to display in the header.
+     * @param {string} [content=""] - The HTML content to display in the dialog body.
+     * @param {string} [footer=""] - The HTML content to display in the dialog footer (e.g., action buttons).
      * @returns {boolean} True if the dialog was opened, false if no content was provided.
      */
     open(title = "", content = "", footer = "") {
@@ -112,6 +189,8 @@ export default class PrefViewerDialog extends HTMLElement {
             return false;
         }
 
+        this.#clearTouchPress();
+        this.removeAttribute("data-keyboard-navigation");
         if (title === "") {
             this.#header.style.display = "none";
         }