Submodel selection Errors in Meta screen

Author: vojtatom

src/Components/Editor/Context.tsx

@@ -16,7 +16,6 @@ export const EditorContext = React.createContext<{
     setModels: React.Dispatch<React.SetStateAction<EditorModel[]>>;
     selectedModel: EditorModel | null;
     selectModel: (model: EditorModel | null) => void;
-    //setSelectedModel: React.Dispatch<React.SetStateAction<EditorModel | null>>;
     camTargetZ: number;
     setCamTargetZ: React.Dispatch<React.SetStateAction<number>>;
     minShade: number;
@@ -29,6 +28,8 @@ export const EditorContext = React.createContext<{
     setGlobalShift: React.Dispatch<React.SetStateAction<vec3 | null>>;
     loadingStatus: string;
     setLoadingStatus: React.Dispatch<React.SetStateAction<string>>;
+    selectedSubmodels: number[];
+    setSelectedSubmodels: React.Dispatch<React.SetStateAction<number[]>>;
 } | null>(null);
 
 export function ContextComponent(props: { children: React.ReactNode }) {
@@ -38,6 +39,7 @@ export function ContextComponent(props: { children: React.ReactNode }) {
     const [selection, setSelection] = React.useState(new GL.SelectionManager());
     const [models, setModels] = React.useState<EditorModel[]>([]);
     const [selectedModel, setSelectedModel] = React.useState<EditorModel | null>(null);
+    const [selectedSubmodels, setSelectedSubmodels] = React.useState<number[]>([]);
 
     const [camTargetZ, setCamTargetZ] = React.useState<number>(0);
     const [minShade, setMinShade] = React.useState<number>(0);
@@ -55,6 +57,18 @@ export function ContextComponent(props: { children: React.ReactNode }) {
         });
     };
 
+    React.useEffect(() => {
+        const onChange = () => {
+            setSelectedSubmodels(selection.selected.map((obj) => obj.identifier));
+        };
+
+        selection.onSelect = onChange;
+
+        return () => {
+            selection.removeOnSelect(onChange);
+        };
+    }, [selection, setSelectedSubmodels]);
+
     React.useEffect(() => {
         const onChange = () => {
             const copy = scene.objects.filter((obj) => obj instanceof EditorModel) as EditorModel[];
@@ -104,6 +118,8 @@ export function ContextComponent(props: { children: React.ReactNode }) {
                 setGlobalShift,
                 loadingStatus,
                 setLoadingStatus,
+                selectedSubmodels,
+                setSelectedSubmodels,
             }}
         >
             {props.children}

src/Components/Editor/SidePanel/Actions/Actions.tsx

@@ -23,12 +23,12 @@ export function ActionMenu() {
     } = ctx;
 
     const [importOpen, setImportOpen] = React.useState(false);
-    const [selectedModels, setSelectedModels] = React.useState<ModelData[]>([]);
+    const [importedModels, setImportedModels] = React.useState<ModelData[]>([]);
 
     const onModelsSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
         setProcessing(true);
         const models = await load(event, setLoadingStatus);
-        setSelectedModels(models);
+        setImportedModels(models);
         setImportOpen(true);
         setProcessing(false);
         event.target.value = '';
@@ -40,7 +40,7 @@ export function ActionMenu() {
         setImportOpen(false);
         const shift = await addEditorModels(
             {
-                modelData: selectedModels,
+                modelData: importedModels,
                 selection: selection,
                 scene: scene,
                 coordMode: mode,
@@ -49,7 +49,7 @@ export function ActionMenu() {
             setLoadingStatus
         );
         setProcessing(false);
-        setSelectedModels([]);
+        setImportedModels([]);
         setGlobalShift(shift);
     };
 

src/Components/Editor/SidePanel/PanelMeta/ModelMeta.tsx

@@ -9,29 +9,14 @@ import { EmptyDetailPanel, EmptyMetaPanel } from '@elements/Empty';
 export function ModelMetaPanel() {
     const ctx = React.useContext(EditorContext);
     if (!ctx) return null;
-    const { selectedModel, selection } = ctx;
-    const [selected, setSelected] = React.useState<number[]>(
-        selection.selected.map((obj) => obj.identifier)
-    );
-
-    React.useEffect(() => {
-        const onChange = () => {
-            setSelected(selection.selected.map((obj) => obj.identifier));
-        };
-
-        selection.onSelect = onChange;
-
-        return () => {
-            selection.removeOnSelect(onChange);
-        };
-    }, [selection]);
+    const { selectedModel, selectedSubmodels } = ctx;
 
     if (selectedModel === null) return <EmptyDetailPanel />;
-    if (selected.length === 0) return <EmptyMetaPanel />;
+    if (selectedSubmodels.length === 0) return <EmptyMetaPanel />;
 
     return (
         <div className="p-4 space-y-4">
-            {selected.map((id) => (
+            {selectedSubmodels.map((id) => (
                 <div key={id}>
                     <div className="text-2xl text-neutral-300">Part {id}</div>
                     <JsonView src={selectedModel.data[id]} />