@preference-sl/pref-viewer 2.16.2 → 2.17.0-beta.1

package/src/pref-viewer.js

@@ -1,6 +1,6 @@
 import PrefViewerTask from "./pref-viewer-task.js";
 import { PREF_VIEWER_STYLES_STORAGE_KEY, PrefViewerStyles, PrefViewerStyleVariables } from "./styles.js";
-import { DEFAULT_LOCALE, resolveLocale, setLocale, SUPPORTED_LOCALES } from "./localization/i18n.js";
+import I18n from "./localization/i18n.js";
 
 /**
  * PrefViewer - Custom Web Component for immersive 2D/3D product visualization with localization, persistence, and download tooling.
@@ -23,13 +23,14 @@ import { DEFAULT_LOCALE, resolveLocale, setLocale, SUPPORTED_LOCALES } from "./l
  *  - Listen for `pref-viewer-initialized`, `pref-viewer-loading`, `pref-viewer-loaded`, `pref-viewer-error`, `pref-viewer-3d-loaded`, `pref-viewer-2d-loaded`, and `pref-viewer-2d-viewport-changed` to integrate with surrounding UX.
  *
  * Reactive Attributes:
- *  - config: Configuration descriptor that can bundle model/scene/materials/drawing/culture hints.
+ *  - config: Configuration descriptor with assets, culture/styles and optional boolean showRenderMenu/showViewCube flags.
  *  - model / scene / materials / drawing: Independent asset entry points (URLs, Base64, indexed data) for each subsystem.
  *  - options: JSON describing render toggles (AA, SSAO, IBL, shadows), animation menu, highlight, lighting, and misc viewer knobs.
- *  - culture: Locale identifier (RFC-5646 style) that resolves against `SUPPORTED_LOCALES` before applying.
+ *  - culture: Locale identifier (RFC-5646 style) that resolves against `I18n.SUPPORTED_LOCALES` before applying.
  *  - mode: Switches between `2d` and `3d`, automatically hiding/showing the relevant subcomponents and menu states.
  *  - show-model / show-scene: Boolean flags to toggle visibility without reloading the underlying resources.
  *  - show-render-menu: Boolean flag to show or hide the render-settings menu (default: true).
+ *  - show-view-cube: Enables the 3D orientation overlay unless "false"; visible cubes position the render menu below their measured height.
  *  - styles: JSON style overrides. Currently supports `colorPrimary`, persisted in localStorage and exposed as `--pref-viewer-color-primary`.
  *
  * Public Methods (selection):
@@ -66,6 +67,7 @@ import { DEFAULT_LOCALE, resolveLocale, setLocale, SUPPORTED_LOCALES } from "./l
  *  - Legacy `scene-*` and `drawing-*` aliases are still emitted alongside their modern equivalents for backward compatibility.
  *
  * Notes:
+ *  - Stores the cube layout handler and subscribes only for active 3D cube layout; open dialogs render above viewer overlays.
  *  - Internally wires PrefViewerMenu3D hover/apply events to PrefViewer3D render settings, ensuring persisted toggles stay in sync with BabylonJSController.
  *  - Cleans up dialogs, listeners, and subcomponents on disconnect to prevent leaks when frameworks mount/unmount the custom element.
  *  - Uses localStorage-backed culture persistence and attribute reflection safeguards to keep templates, menu, and global i18n aligned.
@@ -93,8 +95,8 @@ export default class PrefViewer extends HTMLElement {
 
     // Localization/culture management
     #CULTURE_STORAGE_KEY = "pref-viewer/culture";
-    #cultureInitial = DEFAULT_LOCALE;
-    #cultureList = SUPPORTED_LOCALES;
+    #cultureInitial = I18n.DEFAULT_LOCALE;
+    #cultureList = I18n.SUPPORTED_LOCALES;
     #culture = "";
     #cultureSuppressAttribute = false;
 
@@ -115,11 +117,13 @@ export default class PrefViewer extends HTMLElement {
     #handlers = {
         on2DZoomChanged: null,
         on2DElementClick: null,
+        on3DElementClick: null,
         onMenuApply: null,
         onViewerHoverStart: null,
         onViewerHoverEnd: null,
         on3DSceneLoaded: null,
         on3DSceneError: null,
+        onViewCubeLayout: null,
     };
 
     /**
@@ -132,9 +136,9 @@ export default class PrefViewer extends HTMLElement {
         this.attachShadow({ mode: "open" });
         const storedCulture = this.#cultureReadPersisted();
         if (storedCulture) {
-            this.#culture = resolveLocale(storedCulture);
+            this.#culture = I18n.resolveLocale(storedCulture);
         } else {
-            this.#culture = setLocale(this.#cultureInitial);
+            this.#culture = I18n.setLocale(this.#cultureInitial);
         }
 
         this.#applyStyles(this.#stylesReadPersisted(), { persist: false, applyCssVariables: false });
@@ -146,21 +150,26 @@ export default class PrefViewer extends HTMLElement {
      * @returns {string[]} Array of attribute names to observe.
      */
     static get observedAttributes() {
-        return ["config", "culture", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene", "show-render-menu", "styles"];
+        return ["config", "culture", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene", "show-render-menu", "show-view-cube", "styles"];
     }
 
     /**
      * Observes changes to specific attributes and triggers corresponding actions.
      * Loads configuration, drawing, model, scene, materials, or options when their attributes change.
      * Toggles model or scene visibility when "show-model" or "show-scene" attributes change, recreates the 3D menu when "show-render-menu" changes, and queues style overrides when "styles" changes.
+     * "show-view-cube" synchronizes lazy cube activation and conditional layout subscription before forwarding the attribute.
      * @public
      * @param {string} name - The name of the changed attribute.
-     * @param {*} _old - The previous value of the attribute (unused).
-     * @param {*} value - The new value of the attribute.
+     * @param {string|null} _old - The previous attribute value.
+     * @param {string|null} value - The new attribute value; null when removed.
      * @returns {void}
      */
     attributeChangedCallback(name, _old, value) {
         switch (name) {
+            case "show-view-cube":
+                this.#setViewCubeLayoutSubscription(this.#mode === "3d" && value !== "false");
+                this.#component3D?.setAttribute("show-view-cube", value === "false" ? "false" : "true");
+                break;
             case "config":
                 this.loadConfig(value);
                 break;
@@ -227,6 +236,7 @@ export default class PrefViewer extends HTMLElement {
     /**
      * Called when the element is inserted into the DOM.
      * Initializes the 3D and 2D viewer components and starts processing tasks.
+     * Restores the primary animation-highlight color after creating the 3D component and menu.
      * @public
      * @returns {void|boolean} Returns false if initialization fails; otherwise void.
      */
@@ -236,6 +246,7 @@ export default class PrefViewer extends HTMLElement {
         this.#createComponent3D();
         this.#createComponent2D();
         this.#createMenu3D();
+        this.#applyRenderSettings({ highlightColor: this.#styles.colorPrimary, persist: false });
 
         this.setMode(this.getAttribute("mode") ?? this.#mode);
 
@@ -252,7 +263,8 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Called when the element is removed from the DOM.
+     * Removes stored child/menu/dialog listeners and subcomponents when detached.
+     * Unsubscribes the cube layout handler before the 3D component and its overlay are torn down.
      * @public
      * @returns {void}
      */
@@ -270,8 +282,10 @@ export default class PrefViewer extends HTMLElement {
             this.#component2D.remove();
         }
         if (this.#component3D) {
+            this.#component3D.removeEventListener("pref-viewer-3d-element-click", this.#handlers.on3DElementClick);
             this.#component3D.removeEventListener("pref-viewer-3d-loaded", this.#handlers.on3DSceneLoaded);
             this.#component3D.removeEventListener("pref-viewer-3d-error", this.#handlers.on3DSceneError);
+            this.#component3D.removeEventListener("view-cube-layout", this.#handlers.onViewCubeLayout);
             this.#component3D.remove();
         }
         if (this.#menu3D) {
@@ -302,8 +316,7 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Creates and appends the 2D viewer component to the shadow DOM.
-     * Sets the "visible" attribute to true by default.
+     * Creates and appends the 2D viewer component, initially hidden, to the shadow DOM.
      * @private
      * @returns {void}
      */
@@ -318,14 +331,45 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Creates and appends the 3D viewer component to the shadow DOM.
-     * Sets the "visible" attribute to true by default.
+     * Subscribes before cube activation so its first layout is received.
+     * Removes the subscription and menu overrides when the cube is inactive or the mode is 2D.
+     * @private
+     * @param {boolean} enabled - Whether cube layout updates are needed.
+     * @returns {void}
+     */
+    #setViewCubeLayoutSubscription(enabled) {
+        if (!this.#component3D || !this.#handlers.onViewCubeLayout) {
+            return;
+        }
+        this.#component3D.removeEventListener("view-cube-layout", this.#handlers.onViewCubeLayout);
+        if (enabled) {
+            this.#component3D.addEventListener("view-cube-layout", this.#handlers.onViewCubeLayout);
+        } else {
+            this.#wrapper?.style.removeProperty("--pref-viewer-render-menu-top");
+            this.#wrapper?.style.removeProperty("--pref-viewer-viewport-height");
+        }
+    }
+    /**
+     * Creates and appends the 3D viewer component to the shadow DOM, initially hidden.
+     * Forwards show-view-cube, stores its layout handler in #handlers and subscribes before activation
+     * so the first measured layout positions the render menu correctly.
      * @private
      * @returns {void}
      */
     #createComponent3D() {
+        this.#handlers.on3DElementClick = this.#on3DElementClick.bind(this);
         this.#component3D = document.createElement("pref-viewer-3d");
         this.#component3D.setAttribute("visible", "false");
+        this.#component3D.setAttribute("show-view-cube", this.getAttribute("show-view-cube") === "false" ? "false" : "true");
+        this.#handlers.onViewCubeLayout = (event) => {
+            if (event.detail.offset > 0) {
+                this.#wrapper.style.setProperty("--pref-viewer-render-menu-top", `${event.detail.offset}px`);
+            } else {
+                this.#wrapper.style.removeProperty("--pref-viewer-render-menu-top");
+            }
+            this.#wrapper.style.setProperty("--pref-viewer-viewport-height", `${event.detail.height}px`);
+        };
+        this.#setViewCubeLayoutSubscription(this.getAttribute("show-view-cube") !== "false" && (this.getAttribute("mode") ?? this.#mode) === "3d");
 
         this.#handlers.on3DSceneLoaded = () => {
             this.#menu3DSyncSettings();
@@ -334,6 +378,7 @@ export default class PrefViewer extends HTMLElement {
         this.#handlers.on3DSceneError = () => {
             this.#menu3D?.setApplying(false, true);
         };
+        this.#component3D.addEventListener("pref-viewer-3d-element-click", this.#handlers.on3DElementClick);
         this.#component3D.addEventListener("pref-viewer-3d-loaded", this.#handlers.on3DSceneLoaded);
         this.#component3D.addEventListener("pref-viewer-3d-error", this.#handlers.on3DSceneError);
         this.#wrapper.appendChild(this.#component3D);
@@ -609,7 +654,8 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Resolves the requested culture, updates internal/global state, and persists the selection.
+     * Resolves culture, updates internal/global state and menu/cube labels, and persists the selection.
+     * Refreshes only an existing cube; a culture change does not activate an inactive overlay.
      * @private
      * @param {string} [cultureId] - Desired locale to activate.
      * @param {object} [options] - Extra flags for the update.
@@ -626,15 +672,16 @@ export default class PrefViewer extends HTMLElement {
             return changed;
         }
         const { reflectAttribute = false } = options;
-        const resolved = resolveLocale(cultureId);
+        const resolved = I18n.resolveLocale(cultureId);
         changed = resolved !== this.#culture;
         if (reflectAttribute) {
             this.#cultureReflectAttribute(resolved);
         }
         if (changed) {
             this.#culture = resolved;
-            setLocale(resolved);
+            I18n.setLocale(resolved);
             this.#menu3D?.setCulture?.(resolved);
+            this.#component3D?.refreshViewCube?.();
             this.#culturePersist(resolved);
         }
         return changed;
@@ -739,6 +786,7 @@ export default class PrefViewer extends HTMLElement {
 
         this.removeAttribute("loading-3d");
         this.setAttribute("loaded-3d", "");
+        this.#applySelectionStateTo3D();
 
         this.#dispatchPrefViewerEvent("pref-viewer-3d-loaded", detail ?? {});
         this.#dispatchPrefViewerEvent("scene-loaded", detail ?? {}); // Legacy event for backward compatibility
@@ -850,12 +898,23 @@ export default class PrefViewer extends HTMLElement {
         this.notifyElementClick(event.detail?.ids ?? []);
     }
 
+    /**
+     * Forwards semantic click ids from the encapsulated 3D component through the root event contract.
+     * @private
+     * @param {CustomEvent<{ids: string[]}>} event - Internal 3D model click event.
+     * @returns {void}
+     */
+    #on3DElementClick(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.
      * @private
      * @param {CustomEvent} event - Menu event containing the `settings` payload.
-     * @returns {void}
+     * @returns {Promise<void>}
      */
     async #onMenuApply(event) {
         event.stopPropagation();
@@ -867,13 +926,24 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Processes a configuration object by loading it into the 3D component.
+     * Applies optional boolean overlay flags through their attributes, then loads the queued 3D configuration.
+     * Explicit flags override the current attributes; omitted/non-boolean values preserve their state.
      * Dispatches loading events and processes the next task when finished.
      * @private
      * @param {object} config - The configuration object to process.
-     * @returns {void}
+     * @param {boolean} [config.showRenderMenu] - Reflects render-menu visibility before loading assets; non-booleans are ignored.
+     * @param {boolean} [config.showViewCube] - Reflects cube activation before loading assets; non-booleans are ignored.
+     * @returns {Promise<void>} Resolves after the load attempt and advances the task queue.
      */
     async #processConfig(config) {
+        for (const [property, attribute] of [["showRenderMenu", "show-render-menu"], ["showViewCube", "show-view-cube"]]) {
+            if (typeof config[property] === "boolean") {
+                const value = String(config[property]);
+                if (this.getAttribute(attribute) !== value) {
+                    this.setAttribute(attribute, value);
+                }
+            }
+        }
         if (!this.#component3D) {
             this.#processNextTask();
             return;
@@ -912,7 +982,7 @@ export default class PrefViewer extends HTMLElement {
      * Processes the next task when finished.
      * @private
      * @param {object} drawing - The drawing object to process.
-     * @returns {void}
+     * @returns {Promise<void>}
      */
     async #processDrawing(drawing) {
         if (!this.#component2D) {
@@ -974,7 +1044,7 @@ export default class PrefViewer extends HTMLElement {
      * Dispatches loading events and processes the next task.
      * @private
      * @param {object} options - The options object to process.
-     * @returns {void}
+     * @returns {Promise<void>}
      */
     async #processOptions(options) {
         if (!this.#component3D) {
@@ -996,14 +1066,20 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Processes queued style overrides and advances the task queue.
+     * Applies queued styles and synchronizes animation-opening highlight color without reloading assets.
+     * Waits for render settings/menu synchronization before advancing the task queue.
      * @private
      * @param {object} styles - Style overrides to apply.
-     * @returns {void}
+     * @returns {Promise<void>} Resolves after style/highlight synchronization and queue advancement.
      */
-    #processStyles(styles) {
-        this.#applyStyles(styles);
-        this.#processNextTask();
+    async #processStyles(styles) {
+        try {
+            if (this.#applyStyles(styles)) {
+                await this.#applyRenderSettings({ highlightColor: this.#styles.colorPrimary });
+            }
+        } finally {
+            this.#processNextTask();
+        }
     }
 
     /**
@@ -1069,7 +1145,7 @@ export default class PrefViewer extends HTMLElement {
      * Non-string and empty-string results are filtered out.
      * @private
      * @param {Array<string|{id?: string, Id?: string}>} value - Array of id-like items to normalize.
-     * @returns {string[]} Deduplicated, non-empty string ids.
+     * @returns {string[]} Non-empty string ids, preserving input order and duplicate occurrences.
      */
     #normalizeIdList(value) {
         if (!Array.isArray(value)) {
@@ -1120,11 +1196,31 @@ 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. */
+    /** Apply the current semantic snapshot to the 2D renderer when available. * @returns {void}
+     */
     #applySelectionStateTo2D() {
         this.#component2D?.applySelectionState?.(this.getSelectionState());
     }
 
+    /**
+     * Applies the current semantic snapshot to the 3D renderer when available.
+     * @private
+     * @returns {void}
+     */
+    #applySelectionStateTo3D() {
+        this.#component3D?.applySelectionState?.(this.getSelectionState());
+    }
+
+    /**
+     * Synchronizes the current semantic selection snapshot with both renderers.
+     * @private
+     * @returns {void}
+     */
+    #applySelectionState() {
+        this.#applySelectionStateTo2D();
+        this.#applySelectionStateTo3D();
+    }
+
     /**
      * Dispatches a `pref-viewer-3d-turnable-changed` event carrying the current turnable snapshot.
      * Called after `startTurnable`, `stopTurnable`, or `toggleTurnable` mutates the internal state.
@@ -1259,10 +1355,15 @@ export default class PrefViewer extends HTMLElement {
 
     /**
      * Loads a configuration object or JSON string and adds it to the task queue.
-     * If the config contains a drawing, adds a drawing task as well.
+     * Queues supplied styles/culture before the configuration and a supplied drawing afterward.
+     * Boolean showRenderMenu/showViewCube flags apply when that config task is processed, before its 3D load.
+     * Omitted/non-boolean flags preserve current attributes; equal values do not recreate the menu.
      * @public
-     * @param {object|string} config - Configuration object or JSON string.
-     * @returns {boolean|void} Returns false if config is invalid; otherwise void.
+     * @param {object|string} config - Configuration object or JSON string; overlay flags apply in queue order.
+     * @param {boolean} [config.showRenderMenu] - Sets show-render-menu when explicitly boolean.
+     * @param {boolean} [config.showViewCube] - Sets show-view-cube when explicitly boolean.
+     * @returns {false|void} Returns false for an absent/falsy payload; otherwise queues the configuration.
+     * @throws {SyntaxError} If a supplied JSON string cannot be parsed.
      */
     loadConfig(config) {
         config = typeof config === "string" ? JSON.parse(config) : config;
@@ -1357,7 +1458,8 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Sets the viewer mode to "2d" or "3d" and updates component visibility accordingly.
+     * Sets the viewer mode and component/menu visibility; updates the conditional cube layout subscription
+     * before showing 3D or releasing its overlay in 2D.
      * @public
      * @param {string} [mode=this.#mode] - The mode to set ("2d" or "3d").
      * @returns {void}
@@ -1369,6 +1471,7 @@ export default class PrefViewer extends HTMLElement {
             mode = this.#mode;
         }
         this.#mode = mode;
+        this.#setViewCubeLayoutSubscription(mode === "3d" && this.getAttribute("show-view-cube") !== "false");
         if (mode === "2d") {
             this.#component3D?.hide();
             this.#component2D?.show();
@@ -1401,7 +1504,8 @@ export default class PrefViewer extends HTMLElement {
 
     /**
      * Sets supported PrefViewer style variables from an object or JSON string and adds them to the task queue.
-     * Currently supports `colorPrimary`, which updates `PrefViewerStyleVariables.colorPrimary`, applies the host CSS custom property, and persists the value in localStorage.
+     * Currently supports `colorPrimary`, which updates `PrefViewerStyleVariables.colorPrimary`, applies the host CSS custom property,
+     * synchronizes animation-opening highlight color (including active highlights), and persists the value in localStorage.
      * @public
      * @param {object|string} styles - Style overrides object or JSON string.
      * @returns {boolean|void} Returns false if styles are invalid; otherwise void.
@@ -1437,7 +1541,7 @@ export default class PrefViewer extends HTMLElement {
      */
     setSelectableElements(elements = []) {
         this.#selectionState.selectableIds = this.#normalizeIdList(elements);
-        this.#applySelectionStateTo2D();
+        this.#applySelectionState();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1452,7 +1556,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.#applySelectionState();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1468,7 +1572,7 @@ export default class PrefViewer extends HTMLElement {
         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.#applySelectionState();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1481,7 +1585,7 @@ export default class PrefViewer extends HTMLElement {
     clearSelectedElements() {
         this.#selectionState.selectedIds = [];
         this.#selectionState.selectedItems = [];
-        this.#applySelectionStateTo2D();
+        this.#applySelectionState();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1493,7 +1597,7 @@ export default class PrefViewer extends HTMLElement {
      */
     clearSelectableElements() {
         this.#selectionState.selectableIds = [];
-        this.#applySelectionStateTo2D();
+        this.#applySelectionState();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1509,7 +1613,7 @@ export default class PrefViewer extends HTMLElement {
             selectedIds: [],
             selectedItems: [],
         };
-        this.#applySelectionStateTo2D();
+        this.#applySelectionState();
         this.#emitSelectionStateChanged();
         return this.getSelectionState();
     }
@@ -1575,7 +1679,7 @@ export default class PrefViewer extends HTMLElement {
      * Remove every SVG node previously added through appendSvgNode.
      * @public
      * @returns {void}
-     * */
+     */
     removeAppendedSvgNodes() {
         this.#component2D?.removeAppendedSvgNodes?.();
     }
@@ -1635,10 +1739,12 @@ export default class PrefViewer extends HTMLElement {
      * @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 {HTMLElement} The created dialog element.
+     * @returns {HTMLElement|null} The dialog element if opening succeeds; otherwise null.
      * @description
      * If a dialog is already open, it is closed before opening the new one.
      * The dialog is appended to the viewer's shadow DOM and returned for further manipulation.
+     * Shared dialog styles place its modal backdrop above the render menu and ViewCube.
+     * Background pointer input is intercepted; backdrop dismissal does not also activate a covered control.
      */
     openDialog(title, content, footer) {
         if (this.#dialog && this.#dialog.hasAttribute("open")) {
@@ -1811,9 +1917,14 @@ export default class PrefViewer extends HTMLElement {
      */
 
     /**
-     * Accepts a config object or JSON string and forwards it to `loadConfig()`.
+     * Accepts a config object or JSON string and forwards it to `loadConfig()` in the existing task queue.
+     * Includes optional boolean showRenderMenu/showViewCube flags with the same precedence and omission rules.
+     * Supplied styles/culture and drawing retain the loadConfig ordering.
      * @public
      * @param {object|string} value - Configuration payload or serialized JSON.
+     * @param {boolean} [value.showRenderMenu] - Optional render-menu visibility for an object payload.
+     * @param {boolean} [value.showViewCube] - Optional cube visibility for an object payload.
+     * @throws {SyntaxError} If a supplied JSON string cannot be parsed.
      */
     set config(value) {
         this.loadConfig(value);