From 9055f0bf5f6b7529c6c252ef2e3b48ba1aba34a3 Mon Sep 17 00:00:00 2001 From: Carolina Date: Tue, 6 Dec 2022 17:40:28 -0300 Subject: [PATCH 1/5] starting --- .../src/HtmlTwin/htmlTwinHostComponent.tsx | 63 +++++++++++++++---- 1 file changed, 52 insertions(+), 11 deletions(-) diff --git a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx index 7a0759ed917..0859fca584f 100644 --- a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx +++ b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx @@ -25,6 +25,7 @@ export class HTMLTwinHostComponent extends React.Component addGUIObservers(control)); - } + // // If the node has GUI, add observer to the controls + // if (this._isGUI(node)) { + // const curMesh = node as AbstractMesh; + // const adt = curMesh.material?.getActiveTextures()[0] as AdvancedDynamicTexture; + // const guiRoot = adt.getChildren(); + // guiRoot.forEach((control) => addGUIObservers(control)); + // } }; // observe add node and deal with new nodes @@ -123,6 +124,19 @@ export class HTMLTwinHostComponent extends React.Component { + if (newTexture instanceof AdvancedDynamicTexture) { + updateA11yTree(); + newTexture.getChildren().forEach((control) => { + addGUIObservers(control); + }); + } + }) + ); + } // observe remove node if (!this._observersMap.has(scene.onMeshRemovedObservable)) { this._observersMap.set(scene.onMeshRemovedObservable, scene.onMeshRemovedObservable.add(updateA11yTree)); @@ -130,11 +144,22 @@ export class HTMLTwinHostComponent extends React.Component { addNodeObservers(node); }); + + scene.textures.forEach((texture) => { + if (texture instanceof AdvancedDynamicTexture) { + texture.getChildren().forEach((control) => { + addGUIObservers(control); + }); + } + }); } componentWillUnmount() { @@ -170,8 +195,23 @@ export class HTMLTwinHostComponent extends React.Component { + if (control) { + guiRootNodes.push(control); + } + }); + } + } + + const a11yGuiTreeItems = this._getHTMLTwinItemsFromGUI(guiRootNodes); + + return [...a11yNodeTreeItems, ...a11yGuiTreeItems]; } private _getHTMLTwinItemsFromNodes(rootItems: Node[]): HTMLTwinItem[] { @@ -187,13 +227,14 @@ export class HTMLTwinHostComponent extends React.Component Date: Wed, 7 Dec 2022 13:57:07 -0300 Subject: [PATCH 2/5] HTMLTwinRenderer renders fullscreen ADT items --- .../src/HtmlTwin/htmlTwinHostComponent.tsx | 89 +++++++++++-------- 1 file changed, 52 insertions(+), 37 deletions(-) diff --git a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx index 0859fca584f..0a95a2beb9b 100644 --- a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx +++ b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx @@ -12,6 +12,7 @@ import { Button } from "gui/2D/controls/button"; import { Container } from "gui/2D/controls/container"; import type { Control } from "gui/2D/controls/control"; import type { Node } from "core/node"; +import type { BaseTexture } from "core/Materials/Textures/baseTexture"; interface IHTMLTwinHostComponentProps { scene: Scene; @@ -25,22 +26,27 @@ export class HTMLTwinHostComponent extends React.Component, prevState: Readonly, snapshot?: any): void { + // 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(); + } + } + + /** + * Adds observables to update the tree if any of the scene's nodes or GUI controls change. + */ + _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: () => void = () => { - const a11yTreeItems = this._updateHTMLTwinItems(); - this.setState({ - a11yTreeItems: a11yTreeItems, - }); + this._updateHTMLTwinItems(); }; const addGUIObservers = (control: Control) => { @@ -96,13 +102,13 @@ export class HTMLTwinHostComponent extends React.Component addGUIObservers(control)); - // } + // If the node has GUI, add observer to the controls + if (this._isMeshGUI(node)) { + const curMesh = node as AbstractMesh; + const adt = curMesh.material?.getActiveTextures()[0] as AdvancedDynamicTexture; + const guiRoot = adt.getChildren(); + guiRoot.forEach((control) => addGUIObservers(control)); + } }; // observe add node and deal with new nodes @@ -128,10 +134,15 @@ export class HTMLTwinHostComponent extends React.Component { - if (newTexture instanceof AdvancedDynamicTexture) { - updateA11yTree(); - newTexture.getChildren().forEach((control) => { - addGUIObservers(control); + if (this._isFullscreenGUI(newTexture)) { + const advTexture = newTexture as AdvancedDynamicTexture; + setTimeout(() => { + advTexture.onLoadObservable.addOnce(() => { + updateA11yTree(); + advTexture.getChildren().forEach((control) => { + addGUIObservers(control); + }); + }); }); } }) @@ -154,12 +165,17 @@ export class HTMLTwinHostComponent extends React.Component { - if (texture instanceof AdvancedDynamicTexture) { - texture.getChildren().forEach((control) => { + if (this._isFullscreenGUI(texture)) { + (texture as AdvancedDynamicTexture).getChildren().forEach((control) => { addGUIObservers(control); }); } }); + }; + + componentDidMount() { + this._addSceneObservers(); + this._updateHTMLTwinItems(); } componentWillUnmount() { @@ -185,7 +201,7 @@ export class HTMLTwinHostComponent extends React.Component { - if (control) { - guiRootNodes.push(control); - } - }); + if (this._isFullscreenGUI(texture) && texture.isReady()) { + guiRootNodes.push((texture as AdvancedDynamicTexture).rootContainer); } } - const a11yGuiTreeItems = this._getHTMLTwinItemsFromGUI(guiRootNodes); - return [...a11yNodeTreeItems, ...a11yGuiTreeItems]; + this.setState({ + a11yTreeItems: [...a11yNodeTreeItems, ...a11yGuiTreeItems], + }); } private _getHTMLTwinItemsFromNodes(rootItems: Node[]): HTMLTwinItem[] { @@ -227,14 +239,13 @@ export class HTMLTwinHostComponent extends React.Component Date: Thu, 8 Dec 2022 09:18:32 -0300 Subject: [PATCH 3/5] Review changes --- .../src/HtmlTwin/htmlTwinHostComponent.tsx | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx index 0a95a2beb9b..022621922e2 100644 --- a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx +++ b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx @@ -135,15 +135,21 @@ export class HTMLTwinHostComponent extends React.Component { if (this._isFullscreenGUI(newTexture)) { - const advTexture = newTexture as AdvancedDynamicTexture; - setTimeout(() => { - advTexture.onLoadObservable.addOnce(() => { - updateA11yTree(); - advTexture.getChildren().forEach((control) => { - addGUIObservers(control); + if (newTexture.isReady()) { + updateA11yTree(); + newTexture.getChildren().forEach((control) => { + addGUIObservers(control); + }); + } else { + setTimeout(() => { + newTexture.onLoadObservable.addOnce(() => { + updateA11yTree(); + newTexture.getChildren().forEach((control) => { + addGUIObservers(control); + }); }); }); - }); + } } }) ); @@ -166,7 +172,7 @@ export class HTMLTwinHostComponent extends React.Component { if (this._isFullscreenGUI(texture)) { - (texture as AdvancedDynamicTexture).getChildren().forEach((control) => { + texture.getChildren().forEach((control) => { addGUIObservers(control); }); } @@ -216,7 +222,7 @@ export class HTMLTwinHostComponent extends React.Component Date: Thu, 8 Dec 2022 16:28:42 -0300 Subject: [PATCH 4/5] Address review --- .../src/HtmlTwin/htmlTwinHostComponent.tsx | 52 ++++++++----------- 1 file changed, 23 insertions(+), 29 deletions(-) diff --git a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx index 022621922e2..4257dc5b0c5 100644 --- a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx +++ b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx @@ -45,7 +45,7 @@ export class HTMLTwinHostComponent extends React.Component void = () => { + const updateA11yTree = () => { this._updateHTMLTwinItems(); }; @@ -111,45 +111,39 @@ export class HTMLTwinHostComponent extends React.Component { + updateA11yTree(); + addNodeObservers(node); + }; + + const _updateAndAddTexture = (texture: AdvancedDynamicTexture) => { + 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((newNode) => { - updateA11yTree(); - addNodeObservers(newNode); - }) - ); + this._observersMap.set(scene.onNewMeshAddedObservable, scene.onNewMeshAddedObservable.add(_updateAndAddNode)); } if (!this._observersMap.has(scene.onNewTransformNodeAddedObservable)) { - this._observersMap.set( - scene.onNewTransformNodeAddedObservable, - scene.onNewTransformNodeAddedObservable.add((newNode) => { - updateA11yTree(); - addNodeObservers(newNode); - }) - ); + this._observersMap.set(scene.onNewTransformNodeAddedObservable, scene.onNewTransformNodeAddedObservable.add(_updateAndAddNode)); } if (!this._observersMap.has(scene.onNewTextureAddedObservable)) { this._observersMap.set( scene.onNewTextureAddedObservable, scene.onNewTextureAddedObservable.add((newTexture) => { if (this._isFullscreenGUI(newTexture)) { - if (newTexture.isReady()) { - updateA11yTree(); - newTexture.getChildren().forEach((control) => { - addGUIObservers(control); - }); - } else { - setTimeout(() => { + setTimeout(() => { + if (newTexture.isReady()) { + _updateAndAddTexture(newTexture); + } else { newTexture.onLoadObservable.addOnce(() => { - updateA11yTree(); - newTexture.getChildren().forEach((control) => { - addGUIObservers(control); - }); + _updateAndAddTexture(newTexture); }); - }); - } + } + }); } }) ); @@ -284,7 +278,7 @@ export class HTMLTwinHostComponent extends React.Component Date: Thu, 8 Dec 2022 16:30:23 -0300 Subject: [PATCH 5/5] Save an allocation --- .../accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx index 4257dc5b0c5..8ab7fe333bb 100644 --- a/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx +++ b/packages/tools/accessibility/src/HtmlTwin/htmlTwinHostComponent.tsx @@ -210,7 +210,7 @@ export class HTMLTwinHostComponent extends React.Component