babylonjs-accessibility 5.36.0 → 5.37.0

package/babylon.accessibility.max.js

@@ -31244,91 +31244,130 @@ class HTMLTwinHostComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
     constructor(props) {
         super(props);
         this._observersMap = new Map();
-        const a11yTreeItems = this._updateHTMLTwinItems();
-        this.state = {
-            a11yTreeItems: a11yTreeItems,
-        };
-    }
-    componentDidMount() {
-        const scene = this.props.scene;
-        // Find all a11y entities in the scene, assemble the a11y forest (a11yTreeItems), and update React state to let React update DOM.
-        const updateA11yTree = () => {
-            const a11yTreeItems = this._updateHTMLTwinItems();
-            this.setState({
-                a11yTreeItems: a11yTreeItems,
-            });
-        };
-        const addGUIObservers = (control) => {
-            // observe isVisible changed
-            if (!this._observersMap.has(control.onIsVisibleChangedObservable)) {
-                this._observersMap.set(control.onIsVisibleChangedObservable, control.onIsVisibleChangedObservable.add(updateA11yTree));
-            }
-            if (!this._observersMap.has(control.onAccessibilityTagChangedObservable)) {
-                this._observersMap.set(control.onAccessibilityTagChangedObservable, control.onAccessibilityTagChangedObservable.add(updateA11yTree));
-            }
-            if (control instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Container) {
-                const container = control;
-                // observe add control and deal with new controls
-                if (!this._observersMap.has(container.onControlAddedObservable)) {
-                    this._observersMap.set(container.onControlAddedObservable, container.onControlAddedObservable.add((newControl) => {
-                        if (newControl) {
-                            // deal with the new added control
-                            addGUIObservers(newControl);
-                        }
-                        updateA11yTree();
-                    }));
+        /**
+         * Adds observables to update the tree if any of the scene's nodes or GUI controls change.
+         */
+        this._addSceneObservers = () => {
+            const scene = this.props.scene;
+            // Find all a11y entities in the scene, assemble the a11y forest (a11yTreeItems), and update React state to let React update DOM.
+            const updateA11yTree = () => {
+                this._updateHTMLTwinItems();
+            };
+            const addGUIObservers = (control) => {
+                // observe isVisible changed
+                if (!this._observersMap.has(control.onIsVisibleChangedObservable)) {
+                    this._observersMap.set(control.onIsVisibleChangedObservable, control.onIsVisibleChangedObservable.add(updateA11yTree));
+                }
+                if (!this._observersMap.has(control.onAccessibilityTagChangedObservable)) {
+                    this._observersMap.set(control.onAccessibilityTagChangedObservable, control.onAccessibilityTagChangedObservable.add(updateA11yTree));
+                }
+                if (control instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Container) {
+                    const container = control;
+                    // observe add control and deal with new controls
+                    if (!this._observersMap.has(container.onControlAddedObservable)) {
+                        this._observersMap.set(container.onControlAddedObservable, container.onControlAddedObservable.add((newControl) => {
+                            if (newControl) {
+                                // deal with the new added control
+                                addGUIObservers(newControl);
+                            }
+                            updateA11yTree();
+                        }));
+                    }
+                    // observe remove control
+                    if (!this._observersMap.has(container.onControlRemovedObservable)) {
+                        this._observersMap.set(container.onControlRemovedObservable, container.onControlRemovedObservable.add((removedControl) => {
+                            updateA11yTree();
+                        }));
+                    }
+                    // deal with children
+                    control._children.forEach((child) => {
+                        addGUIObservers(child);
+                    });
                 }
-                // observe remove control
-                if (!this._observersMap.has(container.onControlRemovedObservable)) {
-                    this._observersMap.set(container.onControlRemovedObservable, container.onControlRemovedObservable.add((removedControl) => {
-                        updateA11yTree();
-                    }));
+            };
+            const addNodeObservers = (node) => {
+                if (!this._observersMap.has(node.onEnabledStateChangedObservable)) {
+                    this._observersMap.set(node.onEnabledStateChangedObservable, node.onEnabledStateChangedObservable.add(updateA11yTree));
                 }
-                // deal with children
-                control._children.forEach((child) => {
-                    addGUIObservers(child);
+                if (!this._observersMap.has(node.onAccessibilityTagChangedObservable)) {
+                    this._observersMap.set(node.onAccessibilityTagChangedObservable, node.onAccessibilityTagChangedObservable.add(updateA11yTree));
+                }
+                // If the node has GUI, add observer to the controls
+                if (this._isMeshGUI(node)) {
+                    const curMesh = node;
+                    const adt = curMesh.material?.getActiveTextures()[0];
+                    const guiRoot = adt.getChildren();
+                    guiRoot.forEach((control) => addGUIObservers(control));
+                }
+            };
+            const _updateAndAddNode = (node) => {
+                updateA11yTree();
+                addNodeObservers(node);
+            };
+            const _updateAndAddTexture = (texture) => {
+                updateA11yTree();
+                texture.getChildren().forEach((control) => {
+                    addGUIObservers(control);
                 });
+            };
+            // observe add node and deal with new nodes
+            if (!this._observersMap.has(scene.onNewMeshAddedObservable)) {
+                this._observersMap.set(scene.onNewMeshAddedObservable, scene.onNewMeshAddedObservable.add(_updateAndAddNode));
             }
-        };
-        const addNodeObservers = (node) => {
-            if (!this._observersMap.has(node.onEnabledStateChangedObservable)) {
-                this._observersMap.set(node.onEnabledStateChangedObservable, node.onEnabledStateChangedObservable.add(updateA11yTree));
+            if (!this._observersMap.has(scene.onNewTransformNodeAddedObservable)) {
+                this._observersMap.set(scene.onNewTransformNodeAddedObservable, scene.onNewTransformNodeAddedObservable.add(_updateAndAddNode));
             }
-            if (!this._observersMap.has(node.onAccessibilityTagChangedObservable)) {
-                this._observersMap.set(node.onAccessibilityTagChangedObservable, node.onAccessibilityTagChangedObservable.add(updateA11yTree));
+            if (!this._observersMap.has(scene.onNewTextureAddedObservable)) {
+                this._observersMap.set(scene.onNewTextureAddedObservable, scene.onNewTextureAddedObservable.add((newTexture) => {
+                    if (this._isFullscreenGUI(newTexture)) {
+                        setTimeout(() => {
+                            if (newTexture.isReady()) {
+                                _updateAndAddTexture(newTexture);
+                            }
+                            else {
+                                newTexture.onLoadObservable.addOnce(() => {
+                                    _updateAndAddTexture(newTexture);
+                                });
+                            }
+                        });
+                    }
+                }));
             }
-            // If the node has GUI, add observer to the controls
-            if (this._isGUI(node)) {
-                const curMesh = node;
-                const adt = curMesh.material?.getActiveTextures()[0];
-                const guiRoot = adt.getChildren();
-                guiRoot.forEach((control) => addGUIObservers(control));
+            // observe remove node
+            if (!this._observersMap.has(scene.onMeshRemovedObservable)) {
+                this._observersMap.set(scene.onMeshRemovedObservable, scene.onMeshRemovedObservable.add(updateA11yTree));
+            }
+            if (!this._observersMap.has(scene.onTransformNodeRemovedObservable)) {
+                this._observersMap.set(scene.onTransformNodeRemovedObservable, scene.onTransformNodeRemovedObservable.add(updateA11yTree));
+            }
+            if (!this._observersMap.has(scene.onTextureRemovedObservable)) {
+                this._observersMap.set(scene.onTextureRemovedObservable, scene.onTextureRemovedObservable.add(updateA11yTree));
             }
+            // observe node enabled changed
+            scene.getNodes().forEach((node) => {
+                addNodeObservers(node);
+            });
+            scene.textures.forEach((texture) => {
+                if (this._isFullscreenGUI(texture)) {
+                    texture.getChildren().forEach((control) => {
+                        addGUIObservers(control);
+                    });
+                }
+            });
         };
-        // observe add node and deal with new nodes
-        if (!this._observersMap.has(scene.onNewMeshAddedObservable)) {
-            this._observersMap.set(scene.onNewMeshAddedObservable, scene.onNewMeshAddedObservable.add((newNode) => {
-                updateA11yTree();
-                addNodeObservers(newNode);
-            }));
-        }
-        if (!this._observersMap.has(scene.onNewTransformNodeAddedObservable)) {
-            this._observersMap.set(scene.onNewTransformNodeAddedObservable, scene.onNewTransformNodeAddedObservable.add((newNode) => {
-                updateA11yTree();
-                addNodeObservers(newNode);
-            }));
-        }
-        // observe remove node
-        if (!this._observersMap.has(scene.onMeshRemovedObservable)) {
-            this._observersMap.set(scene.onMeshRemovedObservable, scene.onMeshRemovedObservable.add(updateA11yTree));
-        }
-        if (!this._observersMap.has(scene.onTransformNodeRemovedObservable)) {
-            this._observersMap.set(scene.onTransformNodeRemovedObservable, scene.onTransformNodeRemovedObservable.add(updateA11yTree));
+        this.state = { a11yTreeItems: [] };
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        // If we changed scenes, we have to re-attach observers to the new scene.
+        if (prevProps.scene !== this.props.scene) {
+            this._observersMap.clear();
+            this._addSceneObservers();
+            this._updateHTMLTwinItems();
         }
-        // observe node enabled changed
-        scene.getNodes().forEach((node) => {
-            addNodeObservers(node);
-        });
+    }
+    componentDidMount() {
+        this._addSceneObservers();
+        this._updateHTMLTwinItems();
     }
     componentWillUnmount() {
         this._observersMap.forEach((observer, observable) => {
@@ -31351,7 +31390,20 @@ class HTMLTwinHostComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             }
         }
         const a11yTreeItems = this._getHTMLTwinItemsFromNodes(rootNodes);
-        return a11yTreeItems;
+        // Get GUI twin tree nodes
+        const guiRootNodes = [];
+        for (const texture of this.props.scene.textures) {
+            if (this._isFullscreenGUI(texture) && texture.isReady()) {
+                guiRootNodes.push(texture.rootContainer);
+            }
+        }
+        const a11yGuiTreeItems = this._getHTMLTwinItemsFromGUI(guiRootNodes);
+        for (const guiItem of a11yGuiTreeItems) {
+            a11yTreeItems.push(guiItem);
+        }
+        this.setState({
+            a11yTreeItems,
+        });
     }
     _getHTMLTwinItemsFromNodes(rootItems) {
         if (!rootItems || rootItems.length === 0) {
@@ -31364,7 +31416,7 @@ class HTMLTwinHostComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             if (!curNode.isEnabled()) {
                 continue;
             }
-            if (this._isGUI(curNode)) {
+            if (this._isMeshGUI(curNode)) {
                 // if node texture is GUI, add that as a a11y GUI item (renders differently)
                 const curMesh = curNode;
                 const adt = curMesh.material?.getActiveTextures()[0];
@@ -31401,7 +31453,10 @@ class HTMLTwinHostComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
         return result;
     }
-    _isGUI(node) {
+    _isFullscreenGUI(texture) {
+        return texture.getClassName() === "AdvancedDynamicTexture" && !!(texture.layer && !texture.layer.isBackground);
+    }
+    _isMeshGUI(node) {
         let isGUI = false;
         if (node instanceof core_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_5__.AbstractMesh) {
             const curMesh = node;