fix: localize overflow in inspector in tools not globally

BabylonJS · Dec 18, 2024 · 492d24a · 492d24a
1 parent 7567c41
commit 492d24a
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/editor/src/editor/layout/inspector.tsx b/editor/src/editor/layout/inspector.tsx
@@ -9,6 +9,7 @@ import { Editor } from "../main";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/shadcn/ui/tabs";
 
+import { setInspectorSearch } from "./inspector/fields/field";
 import { IEditorInspectorImplementationProps } from "./inspector/inspector";
 
 import { EditorSceneInspector } from "./inspector/scene";
@@ -41,6 +42,7 @@ export interface IEditorInspectorProps {
 }
 
 export interface IEditorInspectorState {
+    search: string;
     editedObject: unknown | null;
 }
 
@@ -70,14 +72,15 @@ export class EditorInspector extends Component<IEditorInspectorProps, IEditorIns
         super(props);
 
         this.state = {
+            search: "",
             editedObject: null,
         };
     }
 
     public render(): ReactNode {
         return (
-            <div className="flex flex-col gap-2 w-full h-full p-2 text-foreground">
-                <Tabs defaultValue="entity" className="flex flex-col gap-2 w-full">
+            <div className="flex flex-col gap-2 w-full h-full p-2 text-foreground overflow-hidden">
+                <Tabs defaultValue="entity" className="flex flex-col gap-2 w-full h-full">
                     <TabsList className="w-full">
                         <TabsTrigger value="entity" className="flex gap-2 items-center w-full">
                             <FaCube className="w-4 h-4" /> Entity
@@ -91,16 +94,18 @@ export class EditorInspector extends Component<IEditorInspectorProps, IEditorIns
                     <input
                         type="text"
                         placeholder="Search..."
+                        value={this.state.search}
+                        onChange={(e) => this._handleSearchChanged(e.currentTarget.value)}
                         className="px-5 py-2 rounded-lg bg-primary-foreground outline-none w-full"
                     />
 
-                    <TabsContent value="entity">
+                    <TabsContent value="entity" className="w-full h-full overflow-auto">
                         <div className="flex flex-col gap-2 h-full">
                             {this._getContent()}
                         </div>
                     </TabsContent>
 
-                    <TabsContent value="decals">
+                    <TabsContent value="decals" className="w-full h-full overflow-auto">
                         <EditorDecalsInspector editor={this.props.editor} />
                     </TabsContent>
                 </Tabs>
@@ -140,4 +145,9 @@ export class EditorInspector extends Component<IEditorInspectorProps, IEditorIns
             />
         ));
     }
+
+    private _handleSearchChanged(search: string): void {
+        setInspectorSearch(search);
+        this.setState({ search });
+    }
 }
diff --git a/editor/src/editor/layout/inspector/decals/decals.tsx b/editor/src/editor/layout/inspector/decals/decals.tsx
@@ -1,14 +1,17 @@
 import { readJSON } from "fs-extra";
 import { extname } from "path/posix";
 
+import { Fade } from "react-awesome-reveal";
 import { Component, DragEvent, ReactNode } from "react";
 
+import { GiMaterialsScience } from "react-icons/gi";
 import { MdOutlineQuestionMark } from "react-icons/md";
 
 import { AbstractMesh, Mesh, Material, MeshBuilder, Vector2, Vector3, Tools } from "babylonjs";
 
 import { Editor } from "../../../main";
 
+import { isDarwin } from "../../../../tools/os";
 import { registerUndoRedo } from "../../../../tools/undoredo";
 import { UniqueNumber, waitNextAnimationFrame } from "../../../../tools/tools";
 import { setMeshMetadataNotSerializable, setMeshMetadataNotVisibleInGraph } from "../../../../tools/mesh/metadata";
@@ -70,12 +73,14 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
             <div className="flex flex-col gap-2 w-full h-full">
                 {this._getMaterialDragAndDropComponent()}
 
-                <EditorInspectorSectionField title="Options">
-                    <EditorInspectorNumberField object={decalsConfiguration.size} property="x" step={1} label="Width" noUndoRedo onChange={() => this._handleUpdateCurrentDecalMesh()} />
-                    <EditorInspectorNumberField object={decalsConfiguration.size} property="y" step={1} label="Height" noUndoRedo onChange={() => this._handleUpdateCurrentDecalMesh()} />
+                {this.state.material &&
+                    <EditorInspectorSectionField title="Options">
+                        <EditorInspectorNumberField object={decalsConfiguration.size} property="x" step={1} label="Width" noUndoRedo onChange={() => this._handleUpdateCurrentDecalMesh()} />
+                        <EditorInspectorNumberField object={decalsConfiguration.size} property="y" step={1} label="Height" noUndoRedo onChange={() => this._handleUpdateCurrentDecalMesh()} />
 
-                    <EditorInspectorNumberField object={decalsConfiguration} property="angle" asDegrees step={0.1} label="Angle" noUndoRedo onChange={() => this._handleUpdateCurrentDecalMesh()} />
-                </EditorInspectorSectionField>
+                        <EditorInspectorNumberField object={decalsConfiguration} property="angle" asDegrees step={0.1} label="Angle" noUndoRedo onChange={() => this._handleUpdateCurrentDecalMesh()} />
+                    </EditorInspectorSectionField>
+                }
             </div>
         );
     }
@@ -157,20 +162,32 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
                 <div
                     className={`
                         flex justify-center items-center w-24 h-24 rounded-lg
-                        ${decalsConfiguration.materialPath ? "" : "bg-accent"}
+                        ${decalsConfiguration.materialPath ? "bg-secondary" : "bg-accent"}
+                        transition-all duration-300 ease-in-out
                     `}
                 >
                     {!decalsConfiguration.materialPath &&
                         <MdOutlineQuestionMark className="w-8 h-8" />
                     }
+
+                    {decalsConfiguration.materialPath &&
+                        <GiMaterialsScience className="w-8 h-8" />
+                    }
                 </div>
 
                 <div className="flex flex-1 flex-col gap-2 justify-center items-center">
                     <div className="text-xl font-semibold text-center w-full">
-                        No material set
+                        {this.state.material?.name ?? "No material set"}
                     </div>
                     <div className="font-thin">
-                        Drag and drop a material asset here.
+                        {this.state.material
+                            ? (
+                                <Fade className="text-center">
+                                    {`${isDarwin() ? "Cmd" : "Ctrl"} + Click in the preview panel to place the decal.`}
+                                </Fade>
+                            )
+                            : "Drag and drop a material asset here."
+                        }
                     </div>
                 </div>
             </div>
@@ -247,6 +264,8 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
 
         this._decalMesh = MeshBuilder.CreateDecal("decal", EditorDecalsInspector._lastPickedMesh, {
             localMode: true,
+            captureUVS: false,
+            cullBackFaces: true,
             size: decalsConfiguration.size,
             angle: decalsConfiguration.angle,
             position: EditorDecalsInspector._lastPickPosition,
@@ -316,6 +335,9 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
             });
 
             this.props.editor.layout.graph.refresh();
+            waitNextAnimationFrame().then(() => {
+                this.props.editor.layout.graph.setSelectedNode(decalMesh);
+            });
         }
 
         this._decalMesh = null;

diff --git a/editor/src/editor/layout/inspector/fields/field.ts b/editor/src/editor/layout/inspector/fields/field.ts
@@ -9,3 +9,15 @@ export interface IEditorInspectorFieldProps<T = any> {
 
     noUndoRedo?: boolean;
 }
+
+let inspectorSearch = "";
+
+/**
+ * Sets the new search value used to filter fields in inspector.
+ * @param search defines the new search value to filter fields in inspector.
+ */
+export function setInspectorSearch(search: string) {
+    inspectorSearch = search;
+}
+
+// TODO: implement filter of fields in inspector.
diff --git a/editor/src/editor/layout/inspector/fields/switch.tsx b/editor/src/editor/layout/inspector/fields/switch.tsx
@@ -39,7 +39,7 @@ export function EditorInspectorSwitchField(props: IEditorInspectorSwitchFieldPro
             <div className="flex justify-end w-14 my-auto">
                 <Switch
                     checked={value}
-                    className="mt-3"
+                    className="mt-2"
                     onChange={(ev) => {
                         setValue(ev.currentTarget.checked);
                         setInspectorEffectivePropertyValue(props.object, props.property, ev.currentTarget.checked);