Use the texture picker for map properties in the materials modal

Map-type properties of an <a-material> now use TextureWidget, opening
the textures modal stacked on top of the materials modal. Modal gains
stacking awareness: only the topmost open modal reacts to ESC and
outside clicks, so interacting with the textures modal no longer
closes the materials modal beneath it. ModalTextures is rendered after
ModalMaterials so it paints on top, and material swatches refresh when
textures finish loading.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: vincentfretin

src/components/Main.js

@@ -240,17 +240,19 @@ export default class Main extends React.Component {
           isOpen={this.state.isModalSponsorOpen}
           onClose={this.onCloseModalSponsor}
         />
-        <ModalTextures
-          isOpen={this.state.isModalTexturesOpen}
-          selectedTexture={this.state.selectedTexture}
-          onClose={this.onModalTextureOnClose}
-        />
         <ModalMaterials
           isOpen={this.state.isModalMaterialsOpen}
           selectedMaterial={this.state.selectedMaterial}
           pickEnabled={!!this.state.materialOnClose}
           onClose={this.onModalMaterialsClose}
         />
+        {/* Rendered after ModalMaterials so it stacks on top when the textures
+            modal is opened from a map property in the materials modal. */}
+        <ModalTextures
+          isOpen={this.state.isModalTexturesOpen}
+          selectedTexture={this.state.selectedTexture}
+          onClose={this.onModalTextureOnClose}
+        />
       </div>
     );
   }

src/components/modals/Modal.js

@@ -31,6 +31,7 @@ export default class Modal extends React.Component {
   handleGlobalKeydown = (event) => {
     if (
       this.state.isOpen &&
+      this.isTopmostModal() &&
       (event.keyCode === 27 ||
         (this.props.extraCloseKeyCode &&
           event.keyCode === this.props.extraCloseKeyCode))
@@ -42,6 +43,16 @@ export default class Modal extends React.Component {
     }
   };
 
+  // Modals can be stacked (e.g., the textures modal opened from the materials
+  // modal); only the topmost open modal should react to ESC or outside clicks.
+  isTopmostModal = () => {
+    const openModals = document.querySelectorAll('.modal:not(.hide)');
+    return (
+      openModals.length > 0 &&
+      openModals[openModals.length - 1].contains(this.self.current)
+    );
+  };
+
   shouldClickDismiss = (event) => {
     var target = event.target;
     // This piece of code isolates targets which are fake clicked by things
@@ -52,6 +63,10 @@ export default class Modal extends React.Component {
     if (target === this.self.current || this.self.current.contains(target)) {
       return false;
     }
+    // Don't dismiss when interacting with another modal stacked on top.
+    if (!this.isTopmostModal()) {
+      return false;
+    }
     return true;
   };
 

src/components/modals/ModalMaterials.js

@@ -7,6 +7,7 @@ import ColorWidget from '../widgets/ColorWidget';
 import InputWidget from '../widgets/InputWidget';
 import NumberWidget from '../widgets/NumberWidget';
 import SelectWidget from '../widgets/SelectWidget';
+import TextureWidget from '../widgets/TextureWidget';
 import Vec2Widget from '../widgets/Vec2Widget';
 
 /**
@@ -41,6 +42,21 @@ export default class ModalMaterials extends React.Component {
     return null;
   }
 
+  componentDidMount() {
+    // Textures load asynchronously; refresh swatches and widgets when they do.
+    document.addEventListener('materialtextureloaded', this.onTextureLoaded);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('materialtextureloaded', this.onTextureLoaded);
+  }
+
+  onTextureLoaded = () => {
+    if (this.state.isOpen) {
+      this.forceUpdate();
+    }
+  };
+
   componentDidUpdate(prevProps) {
     if (this.props.isOpen && !prevProps.isOpen) {
       this.refresh();
@@ -174,16 +190,8 @@ export default class ModalMaterials extends React.Component {
     } else if (propDef.oneOf && propDef.oneOf.length > 0) {
       widget = <SelectWidget {...widgetProps} options={propDef.oneOf} />;
     } else if (propDef.type === 'map') {
-      // Commit on blur; a partial URL or selector is not worth loading.
-      widget = (
-        <InputWidget
-          id={id}
-          name={key}
-          onBlur={onChange}
-          value={value}
-          schema={propDef}
-        />
-      );
+      // Opens the textures modal, stacked on top of this one.
+      widget = <TextureWidget {...widgetProps} />;
     } else {
       switch (propDef.type) {
         case 'number': {