@preference-sl/pref-viewer 2.16.0-beta.14 → 2.16.0-beta.19

package/src/pref-viewer.js

@@ -45,6 +45,7 @@ import { DEFAULT_LOCALE, resolveLocale, setLocale, SUPPORTED_LOCALES } from "./l
  *  - clearSelectedElements / clearSelectableElements / clearSelectionState: Reset selection state fully or partially.
  *  - getSelectionState: Return a snapshot of the current selection.
  *  - notifyElementClick: Forward a host-side element click into the viewer event stream.
+ *  - appendSvgNode / removeAppendedSvgNodes: Manage host-provided SVG nodes through the root facade.
  *  - startTurnable / stopTurnable / toggleTurnable / getTurnableState: Control and inspect the auto-rotate state.
  *  - getAnimations / playAnimation / setAnimationProgress / setAnimationLoop: Inspect and control named glTF animations.
  *  - getDebugInfo: Return a diagnostic snapshot of the active 3D runtime.
@@ -61,7 +62,7 @@ import { DEFAULT_LOCALE, resolveLocale, setLocale, SUPPORTED_LOCALES } from "./l
  *  - `pref-viewer-2d-viewport-changed`: proxies pan/zoom delta from the 2D controller.
  *  - `pref-viewer-selection-state-changed`: emitted whenever the selectable or selected element sets change.
  *  - `pref-viewer-3d-turnable-changed`: emitted after the auto-rotate state starts, stops, or is toggled.
- *  - `pref-viewer-element-click`: emitted when the host forwards an element click via `notifyElementClick`.
+ *  - `pref-viewer-element-click`: emitted with `{ ids: string[] }` for 2D or host-forwarded semantic clicks.
  *  - Legacy `scene-*` and `drawing-*` aliases are still emitted alongside their modern equivalents for backward compatibility.
  *
  * Notes:
@@ -113,6 +114,7 @@ export default class PrefViewer extends HTMLElement {
     // Event handlers
     #handlers = {
         on2DZoomChanged: null,
+        on2DElementClick: null,
         onMenuApply: null,
         onViewerHoverStart: null,
         onViewerHoverEnd: null,
@@ -264,6 +266,7 @@ export default class PrefViewer extends HTMLElement {
         }
         if (this.#component2D) {
             this.#component2D.removeEventListener("pref-viewer-2d-viewport-changed", this.#handlers.on2DZoomChanged);
+            this.#component2D.removeEventListener("pref-viewer-2d-element-click", this.#handlers.on2DElementClick);
             this.#component2D.remove();
         }
         if (this.#component3D) {
@@ -306,9 +309,11 @@ export default class PrefViewer extends HTMLElement {
      */
     #createComponent2D() {
         this.#handlers.on2DZoomChanged = this.#on2DZoomChanged.bind(this);
+        this.#handlers.on2DElementClick = this.#on2DElementClick.bind(this);
         this.#component2D = document.createElement("pref-viewer-2d");
         this.#component2D.setAttribute("visible", "false");
         this.#component2D.addEventListener("pref-viewer-2d-viewport-changed", this.#handlers.on2DZoomChanged);
+        this.#component2D.addEventListener("pref-viewer-2d-element-click", this.#handlers.on2DElementClick);
         this.#wrapper.appendChild(this.#component2D);
     }
 
@@ -794,6 +799,8 @@ export default class PrefViewer extends HTMLElement {
         this.removeAttribute("loading-2d");
         this.setAttribute("loaded-2d", "");
 
+        this.#applySelectionStateTo2D();
+
         this.#dispatchPrefViewerEvent("pref-viewer-2d-loaded", detail ?? {});
         this.#dispatchPrefViewerEvent("drawing-loaded", detail ?? {}); // Legacy event for backward compatibility
         this.#dispatchPrefViewerEvent("pref-viewer-loaded", { result: detail ?? null });
@@ -832,6 +839,17 @@ export default class PrefViewer extends HTMLElement {
         this.#dispatchPrefViewerEvent("pref-viewer-2d-viewport-changed", detail);
     }
 
+    /**
+     * Proxy semantic click ids from the encapsulated 2D component.
+     * @private
+     * @param {CustomEvent} event - Internal component event.
+     * @returns {void}
+     */
+    #on2DElementClick(event) {
+        event.stopPropagation();
+        this.notifyElementClick(event.detail?.ids ?? []);
+    }
+
     /**
      * Handles the custom "pref-viewer-3d-render-settings-change-requested" event emitted by the menu component.
      * Forwards the requested settings to the render-application pipeline.
@@ -1102,6 +1120,11 @@ export default class PrefViewer extends HTMLElement {
         this.#dispatchPrefViewerEvent("pref-viewer-selection-state-changed", this.getSelectionState());
     }
 
+    /** Apply the current semantic snapshot to the 2D renderer when available. */
+    #applySelectionStateTo2D() {
+        this.#component2D?.applySelectionState?.(this.getSelectionState());
+    }
+
     /**
      * Dispatches a `pref-viewer-3d-turnable-changed` event carrying the current turnable snapshot.
      * Called after `startTurnable`, `stopTurnable`, or `toggleTurnable` mutates the internal state.
@@ -1407,13 +1430,14 @@ export default class PrefViewer extends HTMLElement {
 
     /**
      * Defines the elements that the host application considers selectable.
-     * This method stores the contract state; visual selection rendering is handled by host-specific follow-up work.
+     * The normalized state is rendered by the 2D component as non-destructive yellow SVG clones.
      * @public
      * @param {Array<string|{id?: string, Id?: string}>} elements - Element ids or objects containing id/Id.
      * @returns {object} Current selection state.
      */
     setSelectableElements(elements = []) {
         this.#selectionState.selectableIds = this.#normalizeIdList(elements);
+        this.#applySelectionStateTo2D();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1428,6 +1452,7 @@ export default class PrefViewer extends HTMLElement {
         const selectedItems = this.#normalizeSelectionItems(elements);
         this.#selectionState.selectedItems = selectedItems;
         this.#selectionState.selectedIds = selectedItems.map((item) => item.id);
+        this.#applySelectionStateTo2D();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1435,12 +1460,16 @@ export default class PrefViewer extends HTMLElement {
     /**
      * Applies a complete host selection state in one call.
      * @public
-     * @param {{selectableIds?: string[], selectables?: string[], selectedItems?: object[], selectedIds?: string[], selected?: string[]}} state - Selection state with selectableIds/selectables and selectedItems/selectedIds/selected.
+     * @param {{selectableIds?: Array<string|object>, selectables?: Array<string|object>, selectedItems?: Array<string|object>, selectedIds?: Array<string|object>, selected?: Array<string|object>}} state - Selection state with selectableIds/selectables and selectedItems/selectedIds/selected.
      * @returns {object} Current selection state.
      */
     applySelectionState(state = {}) {
         this.#selectionState.selectableIds = this.#normalizeIdList(state.selectableIds ?? state.selectables ?? []);
-        this.setSelectedElements(state.selectedItems ?? state.selectedIds ?? state.selected ?? []);
+        const selectedItems = this.#normalizeSelectionItems(state.selectedItems ?? state.selectedIds ?? state.selected ?? []);
+        this.#selectionState.selectedItems = selectedItems;
+        this.#selectionState.selectedIds = selectedItems.map((item) => item.id);
+        this.#applySelectionStateTo2D();
+        this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
 
@@ -1452,6 +1481,7 @@ export default class PrefViewer extends HTMLElement {
     clearSelectedElements() {
         this.#selectionState.selectedIds = [];
         this.#selectionState.selectedItems = [];
+        this.#applySelectionStateTo2D();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1463,6 +1493,7 @@ export default class PrefViewer extends HTMLElement {
      */
     clearSelectableElements() {
         this.#selectionState.selectableIds = [];
+        this.#applySelectionStateTo2D();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1478,6 +1509,7 @@ export default class PrefViewer extends HTMLElement {
             selectedIds: [],
             selectedItems: [],
         };
+        this.#applySelectionStateTo2D();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1499,17 +1531,53 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Contract hook for host-driven element click forwarding.
-     * Internal 2D/3D hit-testing can call this once it exposes stable element ids.
+     * Publishes host-forwarded semantic ids through the same exact event contract as 2D hit-testing.
      * @public
-     * @param {object|string} element - Element id or detail object.
+     * @param {object|string|Array<object|string>} element - Element id, descriptor, collection, or `{ ids }` detail.
      * @returns {void}
      */
     notifyElementClick(element) {
-        const detail = typeof element === "string" ? { id: element } : { ...(element ?? {}) };
-        this.#dispatchPrefViewerEvent("pref-viewer-element-click", {
-            element: detail,
-        });
+        let candidates;
+        if (Array.isArray(element)) {
+            candidates = element;
+        } else if (Array.isArray(element?.ids)) {
+            candidates = element.ids;
+        } else {
+            candidates = [element?.element ?? element];
+        }
+        const ids = candidates
+            .map((candidate) => typeof candidate === "string" ? candidate : (candidate?.id ?? candidate?.Id))
+            .filter((id) => typeof id === "string" && id.length > 0);
+        if (ids.length === 0) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("pref-viewer-element-click", {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: { ids },
+        }));
+    }
+
+    /**
+     * Add a host-owned SVG node through the public root facade.
+     * @public
+     * @param {string} id - Owner id.
+     * @param {string} svgId - Stable selector/id.
+     * @param {SVGElement} svg - SVG node.
+     * @returns {boolean} True when appended.
+     */
+    appendSvgNode(id, svgId, svg) {
+        return this.#component2D?.appendSvgNode?.(id, svgId, svg) ?? false;
+    }
+
+    /**
+     * Remove every SVG node previously added through appendSvgNode.
+     * @public
+     * @returns {void}
+     * */
+    removeAppendedSvgNodes() {
+        this.#component2D?.removeAppendedSvgNodes?.();
     }
 
     /**

package/src/styles.js

@@ -206,6 +206,12 @@ export const PrefViewerMenu3DStyles = `
         top: var(--toggle-margin);
         right: var(--toggle-margin);
         z-index: 1200;
+        /* The closed panel keeps its place in the flex column (opacity:0, not display:none), so
+           this host spans the panel's full 300px x 70vh even when only the toggle is showing.
+           Left clickable, that empty space is an invisible catcher over the right edge of the
+           viewer: it swallowed the XR entry button and orbiting alike. The toggle and the panel
+           each flip back to auto when they become usable, so nothing else is needed. */
+        pointer-events: none;
 
         font-family: var(--font-family);
     }