From 9158c26742c50bc00cbdfb81ff3987e01e943268 Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Fri, 17 Nov 2023 12:46:56 +0530
Subject: [PATCH 1/3] fix name not displaying in material editor

---
 packages/client-core/i18n/en/editor.json      |  78 ++++----
 .../components/materials/MaterialEditor.tsx   | 189 +++++++++---------
 2 files changed, 138 insertions(+), 129 deletions(-)

diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
index 17a608e5e6a..37867829efb 100755
--- a/packages/client-core/i18n/en/editor.json
+++ b/packages/client-core/i18n/en/editor.json
@@ -115,7 +115,7 @@
       "lbl-toggleTransformSpace": "[Z] Toggle Transform Space"
     },
     "transformPivot": {
-      "toggleTransformPivot" : "[X] Toggle Transform Pivot",
+      "toggleTransformPivot": "[X] Toggle Transform Pivot",
       "lbl-selection": "Selection",
       "info-selection": "The center pivot of the final asset you selected in the sequence.",
       "lbl-center": "Center",
@@ -150,15 +150,15 @@
       "users": "Users",
       "user": "User"
     },
-    "render-settings":{
+    "render-settings": {
       "lbl": "Render Settings",
       "info": "How you view materials in the Engine",
-      "lbl-usePostProcessing":"Use Post Processing",
-      "info-usePostProcessing":"Enables post processing",
-      "lbl-shadowMapResolution":"Shadow Map Resolution",
-      "info-shadowMapResolution":"Set shadowmap resolution",
-      "lbl-renderMode":"Render Mode",
-      "info-renderMode":"Choose render mode"
+      "lbl-usePostProcessing": "Use Post Processing",
+      "info-usePostProcessing": "Enables post processing",
+      "lbl-shadowMapResolution": "Shadow Map Resolution",
+      "info-shadowMapResolution": "Set shadowmap resolution",
+      "lbl-renderMode": "Render Mode",
+      "info-renderMode": "Choose render mode"
     },
     "grid": {
       "info-toggleGridVisibility": "Toggle Grid Visibility",
@@ -181,10 +181,6 @@
       "info": "Takes a screenshot of your scene at the current view."
     }
   },
-  "materialProperties": {
-    "title": "Material",
-    "info": "Access and edit detailed information about materials in the scene."
-  },
   "properties": {
     "title": "Properties",
     "info": "Propeties let you access and edit detailed information about objects in the scene.",
@@ -247,7 +243,21 @@
       "name": "Mesh",
       "description": "A mesh is a collection of vertices, edges, and faces that describe the shape of a 3D object.",
       "geometryEditor": "Geometry Editor",
-      "materialEditor": "Material Editor"
+      "materialEditor": "Material Editor",
+      "material": {
+        "name": "Name",
+        "source": "Source",
+        "type": "Type:",
+        "path": "Path:",
+        "prototype": "Prototype",
+        "loading": "Loading...",
+        "addPlugin": "Add Plugin",
+        "plugin": "Plugin"
+      },
+      "materialProperties": {
+        "title": "Material",
+        "info": "Access and edit detailed information about materials in the scene."
+      }
     },
     "audio": {
       "name": "Positional Audio",
@@ -339,7 +349,7 @@
     "map": {
       "description": "3D geospatial map of e.g. a city."
     },
-    "shadow":{
+    "shadow": {
       "name": "Shadows",
       "description": "Shadow properties for the model",
       "lbl-castShadow": "Cast Shadow",
@@ -506,11 +516,11 @@
       "transparent": "Transparent",
       "world-space": "Use World Space",
       "burst": {
-        "time":"Burst Time",
-        "count":"Burst Count",
-        "cycle":"Burst Cycle",
-        "interval":"Burst Interval",
-        "probability":"Burst Probability"
+        "time": "Burst Time",
+        "count": "Burst Count",
+        "cycle": "Burst Cycle",
+        "interval": "Burst Interval",
+        "probability": "Burst Probability"
       }
     },
     "clouds": {
@@ -584,7 +594,7 @@
       "lbl-reload": "Restage",
       "lbl-options": "Options",
       "samplingMode": "Sampling Mode",
-      "sampling": { 
+      "sampling": {
         "properties": "Sampling Properties",
         "heightMap": "Height Map",
         "heightMapStrength": "Height Map Strength",
@@ -772,20 +782,20 @@
       "lbl-args": "Args",
       "error-url": "Error Loading Script From URL"
     },
-    "primitiveGeometry":{
+    "primitiveGeometry": {
       "name": "Primitive Geometry",
-      "description":"3D models of Basic Geometry shapes",
+      "description": "3D models of Basic Geometry shapes",
       "lbl-geometryType": "Geometry Type",
       "lbl-box": "Box",
-      "lbl-sphere":"Sphere",
-      "lbl-cylinder":"Cylinder",
-      "lbl-capsule":"Capsule",
-      "lbl-plane":"Plane",
-      "lbl-circle":"Circle",
-      "lbl-ring":"Ring",
-      "lbl-torus":"Torus",
-      "lbl-polyhedron":"Polyhedron",
-      "lbl-torusknot":"Torus Knot"
+      "lbl-sphere": "Sphere",
+      "lbl-cylinder": "Cylinder",
+      "lbl-capsule": "Capsule",
+      "lbl-plane": "Plane",
+      "lbl-circle": "Circle",
+      "lbl-ring": "Ring",
+      "lbl-torus": "Torus",
+      "lbl-polyhedron": "Polyhedron",
+      "lbl-torusknot": "Torus Knot"
     },
     "portal": {
       "lbl-portal": "Linked Portal",
@@ -881,9 +891,9 @@
         "spline-track": "Creates a spline track.",
         "spline": "Create and customize curves.",
         "envmap": "Add environment map to your scene",
-        "postprocessing":"Add postprocessing effects to your scene",
-        "primitive-geometry":"Add basic Geometry to the scene",
-        "link":"Add clickable Link to entity to route to different webpage",
+        "postprocessing": "Add postprocessing effects to your scene",
+        "primitive-geometry": "Add basic Geometry to the scene",
+        "link": "Add clickable Link to entity to route to different webpage",
         "dynamic-load": "Load entities dynamically"
       }
     },
diff --git a/packages/editor/src/components/materials/MaterialEditor.tsx b/packages/editor/src/components/materials/MaterialEditor.tsx
index 80ee57da8d5..a88fda11717 100644
--- a/packages/editor/src/components/materials/MaterialEditor.tsx
+++ b/packages/editor/src/components/materials/MaterialEditor.tsx
@@ -37,7 +37,7 @@ import {
   materialFromId
 } from '@etherealengine/engine/src/renderer/materials/functions/MaterialLibraryFunctions'
 import { removeMaterialPlugin } from '@etherealengine/engine/src/renderer/materials/functions/MaterialPluginFunctions'
-import { State, getMutableState, none, useState } from '@etherealengine/hyperflux'
+import { State, getMutableState, none, useHookstate } from '@etherealengine/hyperflux'
 import MaterialLibraryIcon from '@mui/icons-material/Yard'
 
 import { Box, Divider, Stack } from '@mui/material'
@@ -67,17 +67,19 @@ const toBlobs = (thumbnails: Record<string, ThumbnailData>): Record<string, stri
 }
 
 export function MaterialEditor(props: { materialID: string }) {
+  const { t } = useTranslation()
   const { materialID } = props
-  const materialLibrary = useState(getMutableState(MaterialLibraryState))
+  const materialLibrary = useHookstate(getMutableState(MaterialLibraryState))
   const materialComponent = materialLibrary.materials[materialID]
   const prototypeComponent = materialLibrary.prototypes.value[materialComponent.prototype.value]
   const material = materialFromId(materialID).material
-  const loadingData = useState(false)
+  const loadingData = useHookstate(false)
   const prototypes = Object.values(materialLibrary.prototypes.value).map((prototype) => ({
     label: prototype.prototypeId,
     value: prototype.prototypeId
   }))
-  const thumbnails = useState<Record<string, ThumbnailData>>({})
+  const thumbnails = useHookstate<Record<string, ThumbnailData>>({})
+  const selectedPlugin = useHookstate('vegetation')
 
   const createThumbnail = async (field: string, texture: Texture) => {
     if (texture?.isTexture) {
@@ -145,26 +147,29 @@ export function MaterialEditor(props: { materialID: string }) {
     checkThumbs()
   }, [materialComponent.parameters, materialComponent.material])
 
-  const selectedPlugin = useState('vegetation')
-
   return (
     <div>
-      <InputGroup name="Name" label="Name">
-        <StringInput value={materialComponent.material.name.value} onChange={materialComponent.material.name.set} />
+      <InputGroup name="Name" label={t('editor:properties.mesh.material.name')}>
+        <StringInput
+          value={materialComponent.material.name.value}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            materialComponent.material.name.set(event.target.value)
+          }
+        />
       </InputGroup>
-      <InputGroup name="Source" label="Source">
+      <InputGroup name="Source" label={t('editor:properties.mesh.material.source')}>
         <div className={styles.contentContainer}>
           <Box className="Box" sx={{ padding: '8px', overflow: 'scroll' }}>
             <Stack className="Stack" spacing={2} direction="column" alignContent={'center'}>
               <Stack className="Stack" spacing={2} direction="row" alignContent={'flex-start'}>
                 <div>
-                  <label>Type:</label>
+                  <label>{t('editor:properties.mesh.material.type')}</label>
                 </div>
                 <div>{materialComponent.src.type.value}</div>
               </Stack>
               <Stack className="Stack" spacing={2} direction="row">
                 <div>
-                  <label>Path:</label>
+                  <label>{t('editor:properties.mesh.material.path')}</label>
                 </div>
                 <div>{materialComponent.src.value.path}</div>
               </Stack>
@@ -174,7 +179,7 @@ export function MaterialEditor(props: { materialID: string }) {
       </InputGroup>
       <br />
       {!loadingData.value && (
-        <InputGroup name="Prototype" label="Prototype">
+        <InputGroup name="Prototype" label={t('editor:properties.mesh.material.prototype')}>
           <SelectInput
             value={materialComponent.prototype.value}
             options={prototypes}
@@ -188,87 +193,81 @@ export function MaterialEditor(props: { materialID: string }) {
       )}
       <Divider className={styles.divider} />
       <br />
-      {loadingData.value && <div>Loading...</div>}
-      {!loadingData.value && (
-        <>
-          <ParameterInput
-            entity={material.uuid}
-            values={materialComponent.parameters.value}
-            onChange={(k) => async (val) => {
-              let prop
-              if (prototypeComponent.arguments[k].type === 'texture' && typeof val === 'string') {
-                if (val) {
-                  prop = await AssetLoader.loadAsync(val)
-                } else {
-                  prop = null
-                }
-              } else {
-                prop = val
-              }
-              EditorControlFunctions.modifyMaterial(
-                [materialID],
-                entryId(materialComponent.value, LibraryEntryType.MATERIAL),
-                [{ [k]: prop }]
-              )
-              materialComponent.parameters[k].set(prop)
-            }}
-            defaults={prototypeComponent.arguments}
-            thumbnails={toBlobs(thumbnails.value)}
-          />
-          <br />
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              border: '1px solid #fff',
-              borderRadius: '4px',
-              padding: '4px'
-            }}
-          >
-            <SelectInput
-              value={selectedPlugin.value}
-              options={Object.keys(materialLibrary.plugins.value).map((key) => ({ label: key, value: key }))}
-              onChange={selectedPlugin.set}
-            />
-            <Button
-              onClick={() => {
-                materialComponent.plugins.set(materialComponent.plugins.value.concat(selectedPlugin.value))
-              }}
-            >
-              Add Plugin
-            </Button>
-          </div>
-          <PaginatedList
-            list={materialComponent.plugins}
-            element={(plugin: State<string>) => {
-              return (
-                <div className={styles.contentContainer}>
-                  <InputGroup name="Plugin" label="Plugin">
-                    <SelectInput
-                      value={plugin.value}
-                      options={Object.keys(materialLibrary.plugins.value).map((key) => ({ label: key, value: key }))}
-                      onChange={plugin.set}
-                    />
-                  </InputGroup>
-                  <Button
-                    onClick={() => {
-                      removeMaterialPlugin(material, plugin.value)
-                      materialComponent.plugins.set(
-                        materialComponent.plugins.value.filter((val) => val !== plugin.value)
-                      )
-                    }}
-                    style={{ backgroundColor: '#f00' }}
-                  >
-                    x
-                  </Button>
-                </div>
-              )
-            }}
-          />
-        </>
-      )}
+      {loadingData.value && <div>{t('editor:properties.mesh.material.loading')}</div>}
+      <ParameterInput
+        entity={material.uuid}
+        values={materialComponent.parameters.value}
+        onChange={(k) => async (val) => {
+          let prop
+          if (prototypeComponent.arguments[k].type === 'texture' && typeof val === 'string') {
+            if (val) {
+              prop = await AssetLoader.loadAsync(val)
+            } else {
+              prop = null
+            }
+          } else {
+            prop = val
+          }
+          EditorControlFunctions.modifyMaterial(
+            [materialID],
+            entryId(materialComponent.value, LibraryEntryType.MATERIAL),
+            [{ [k]: prop }]
+          )
+          materialComponent.parameters[k].set(prop)
+        }}
+        defaults={prototypeComponent.arguments}
+        thumbnails={toBlobs(thumbnails.value)}
+      />
+      <br />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          border: '1px solid #fff',
+          borderRadius: '4px',
+          padding: '4px'
+        }}
+      >
+        <SelectInput
+          value={selectedPlugin.value}
+          options={Object.keys(materialLibrary.plugins.value).map((key) => ({ label: key, value: key }))}
+          onChange={selectedPlugin.set}
+        />
+        <Button
+          onClick={() => {
+            materialComponent.plugins.set(materialComponent.plugins.value.concat(selectedPlugin.value))
+          }}
+        >
+          {t('editor:properties.mesh.material.addPlugin')}
+        </Button>
+      </div>
+      <PaginatedList
+        list={materialComponent.plugins}
+        element={(plugin: State<string>) => {
+          return (
+            <div className={styles.contentContainer}>
+              <InputGroup name="Plugin" label={t('editor:properties.mesh.material.plugin')}>
+                <SelectInput
+                  value={plugin.value}
+                  options={Object.keys(materialLibrary.plugins.value).map((key) => ({ label: key, value: key }))}
+                  onChange={plugin.set}
+                />
+              </InputGroup>
+              <Button
+                onClick={() => {
+                  removeMaterialPlugin(material, plugin.value)
+                  materialComponent.plugins.set(materialComponent.plugins.value.filter((val) => val !== plugin.value))
+                }}
+                style={{ backgroundColor: '#f00' }}
+              >
+                x
+              </Button>
+            </div>
+          )
+        }}
+      />
     </div>
   )
 }
@@ -281,8 +280,8 @@ export const MaterialPropertyTitle = () => {
       <PanelDragContainer>
         <PanelIcon as={MaterialLibraryIcon} size={12} />
         <PanelTitle>
-          <InfoTooltip title={t('editor:materialProperties.info')}>
-            <span>{t('editor:materialProperties.title')}</span>
+          <InfoTooltip title={t('editor:properties.mesh.materialProperties.info')}>
+            <span>{t('editor:properties.mesh.materialProperties.title')}</span>
           </InfoTooltip>
         </PanelTitle>
       </PanelDragContainer>

From 847b3eaf68879eed30aba4168233869365691f9b Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Fri, 17 Nov 2023 12:47:28 +0530
Subject: [PATCH 2/3] fix scrubbers inside texture preview overflowing

---
 packages/editor/src/components/inputs/ImagePreviewInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor/src/components/inputs/ImagePreviewInput.tsx b/packages/editor/src/components/inputs/ImagePreviewInput.tsx
index 8adf97fb8a4..290a942444a 100644
--- a/packages/editor/src/components/inputs/ImagePreviewInput.tsx
+++ b/packages/editor/src/components/inputs/ImagePreviewInput.tsx
@@ -32,7 +32,6 @@ import InputGroup from './InputGroup'
 import { StringInputProps } from './StringInput'
 
 const imageContainerStyle = {
-  display: 'flex',
   width: '100%',
   borderRadius: '4px',
   border: 'solid',

From 31687f32f3ffe315b32d77c0d3e01546ad04c54b Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Fri, 17 Nov 2023 14:19:47 +0530
Subject: [PATCH 3/3] do not show loading indicator

---
 .../components/materials/MaterialEditor.tsx   | 43 ++++++-------------
 1 file changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/editor/src/components/materials/MaterialEditor.tsx b/packages/editor/src/components/materials/MaterialEditor.tsx
index a88fda11717..9a1ed487655 100644
--- a/packages/editor/src/components/materials/MaterialEditor.tsx
+++ b/packages/editor/src/components/materials/MaterialEditor.tsx
@@ -73,7 +73,6 @@ export function MaterialEditor(props: { materialID: string }) {
   const materialComponent = materialLibrary.materials[materialID]
   const prototypeComponent = materialLibrary.prototypes.value[materialComponent.prototype.value]
   const material = materialFromId(materialID).material
-  const loadingData = useHookstate(false)
   const prototypes = Object.values(materialLibrary.prototypes.value).map((prototype) => ({
     label: prototype.prototypeId,
     value: prototype.prototypeId
@@ -116,7 +115,6 @@ export function MaterialEditor(props: { materialID: string }) {
         thumbnails[k].set(none)
       }
     })
-    loadingData.set(true)
     await Promise.all(
       Object.entries(material).map(async ([field, texture]: [string, Texture]) => {
         if (texture?.isTexture) {
@@ -125,7 +123,6 @@ export function MaterialEditor(props: { materialID: string }) {
         }
       })
     )
-    loadingData.set(false)
   }
 
   const clearThumbs = useCallback(async () => {
@@ -134,21 +131,11 @@ export function MaterialEditor(props: { materialID: string }) {
   }, [])
 
   useEffect(() => {
-    loadingData.set(true)
-    clearThumbs()
-      .then(createThumbnails)
-      .then(() => {
-        loadingData.set(false)
-      })
+    clearThumbs().then(createThumbnails).then(checkThumbs)
   }, [materialComponent.prototype, materialComponent.material.uuid])
 
-  useEffect(() => {
-    if (loadingData.value) return
-    checkThumbs()
-  }, [materialComponent.parameters, materialComponent.material])
-
   return (
-    <div>
+    <div style={{ position: 'relative' }}>
       <InputGroup name="Name" label={t('editor:properties.mesh.material.name')}>
         <StringInput
           value={materialComponent.material.name.value}
@@ -178,22 +165,18 @@ export function MaterialEditor(props: { materialID: string }) {
         </div>
       </InputGroup>
       <br />
-      {!loadingData.value && (
-        <InputGroup name="Prototype" label={t('editor:properties.mesh.material.prototype')}>
-          <SelectInput
-            value={materialComponent.prototype.value}
-            options={prototypes}
-            onChange={(protoId) => {
-              const nuMat = changeMaterialPrototype(material, protoId)
-              materialComponent.set(materialFromId(nuMat!.uuid))
-              // prototypeComponent = prototypeFromId(materialComponent.prototype.value)
-            }}
-          />
-        </InputGroup>
-      )}
+      <InputGroup name="Prototype" label={t('editor:properties.mesh.material.prototype')}>
+        <SelectInput
+          value={materialComponent.prototype.value}
+          options={prototypes}
+          onChange={(protoId) => {
+            const nuMat = changeMaterialPrototype(material, protoId)
+            materialComponent.set(materialFromId(nuMat!.uuid))
+            // prototypeComponent = prototypeFromId(materialComponent.prototype.value)
+          }}
+        />
+      </InputGroup>
       <Divider className={styles.divider} />
-      <br />
-      {loadingData.value && <div>{t('editor:properties.mesh.material.loading')}</div>}
       <ParameterInput
         entity={material.uuid}
         values={materialComponent.parameters.value}