Merge pull request #4 from MetacityTools/dev

Refactoring

Author: vojtatom

README.md

@@ -21,3 +21,44 @@ Currently:
 -   SHP (Polygons and MultiPatch only)
 -   IFC
 -   GLTF (triangles only)
+
+## Roadmap
+
+-   [x] Grid in the background
+-   [x] Translucent models to see wirefame in the background
+-   [x] Snap vertices
+-   [x] Translation - scale - rotate
+-   [x] Split models
+-   [x] Hide models
+-   [x] Delete model
+-   [x] Loading SHP - _needs our own library to load, noone supports multipatch_
+-   [x] BVH build into worker
+-   [x] Loading screen + Add chicken
+-   [x] Add React Context
+-   [x] Tabs in sidepanel
+-   [x] Redesign
+-   [x] Sidepanel view settings
+-   [x] Intro screen
+-   [x] Selecting alignment for loaded models
+-   [x] Worker pool for loading
+-   [x] Status - counter, update global loading status
+-   [x] Reading metadata from IFC files - inspeciton of metadata?
+-   [x] CI na githubu autodeploy
+-   [x] Uniforms copy on model add
+-   [x] Rotate Splash screen bug
+-   [ ] Loading points and lines from SHP
+-   [ ] Loading GeoJSON
+-   [ ] Project export
+-   [ ] Project import
+-   [ ] Allow labeling geometry
+-   [ ] delete selected submodel
+-   [ ] merge submodels
+
+### Backlog
+
+-   [ ] IFC metadata loading (memory-efficiency???)
+-   [ ] BVH
+-   [ ] remesh models - intersection of triangles
+-   [ ] delete submodel - _for now as (split + delete)_
+-   [ ] frustum culling
+-   [ ] rectangular select

package.json

@@ -1,7 +1,7 @@
 {
     "name": "metacity-studio",
     "private": true,
-    "version": "0.0.3",
+    "version": "0.0.4",
     "type": "module",
     "scripts": {
         "dev": "vite",

src/Components/Editor/Utils/Canvas.tsx src/Components/Editor/Canvas.tsxsrc/Components/Editor/Utils/Canvas.tsx renamed to src/Components/Editor/Canvas.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { GridModel } from '@utils/models/GridModel';
+import { GridModel } from '@utils/models/models/GridModel';
 
 import * as GL from '@bananagl/bananagl';
 

src/Components/Editor/Utils/Context.tsx src/Components/Editor/Context.tsxsrc/Components/Editor/Utils/Context.tsx renamed to src/Components/Editor/Context.tsx

@@ -1,7 +1,7 @@
 import { vec3 } from 'gl-matrix';
 import React from 'react';
 
-import { EditorModel } from '@utils/models/EditorModel';
+import { EditorModel } from '@utils/models/models/EditorModel';
 
 import * as GL from '@bananagl/bananagl';
 
@@ -15,7 +15,7 @@ export const EditorContext = React.createContext<{
     models: EditorModel[];
     setModels: React.Dispatch<React.SetStateAction<EditorModel[]>>;
     selectedModel: EditorModel | null;
-    setSelectedModel: React.Dispatch<React.SetStateAction<EditorModel | null>>;
+    selectModel: (model: EditorModel | null) => void;
     camTargetZ: number;
     setCamTargetZ: React.Dispatch<React.SetStateAction<number>>;
     minShade: number;
@@ -28,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 }) {
@@ -37,7 +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);
-    console.log('rendering context');
+    const [selectedSubmodels, setSelectedSubmodels] = React.useState<number[]>([]);
 
     const [camTargetZ, setCamTargetZ] = React.useState<number>(0);
     const [minShade, setMinShade] = React.useState<number>(0);
@@ -46,6 +48,51 @@ export function ContextComponent(props: { children: React.ReactNode }) {
     const [globalShift, setGlobalShift] = React.useState<vec3 | null>(null);
     const [loadingStatus, setLoadingStatus] = React.useState<string>('');
 
+    const selectModel = (model: EditorModel | null) => {
+        setSelectedModel((prev) => {
+            if (prev !== null && prev !== model) prev.selected = false;
+            if (model !== null && prev !== model) model.selected = true;
+            if (model === null || prev !== model) selection.clearSelection();
+            return model;
+        });
+    };
+
+    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[];
+            setModels(copy);
+            if (selectedModel !== null && !copy.includes(selectedModel)) setSelectedModel(null);
+        };
+
+        scene.onChange = onChange;
+
+        return () => {
+            scene.removeChange = onChange;
+        };
+    }, [scene, selectedModel]);
+
+    React.useEffect(() => {
+        renderer.onInit = () => {
+            const controls = renderer.window.controls;
+            controls.onPick = (m: GL.Pickable) => {
+                const model = m as EditorModel;
+                selectModel(model);
+            };
+        };
+    }, [renderer]);
+
     return (
         <EditorContext.Provider
             value={{
@@ -58,7 +105,7 @@ export function ContextComponent(props: { children: React.ReactNode }) {
                 models,
                 setModels,
                 selectedModel,
-                setSelectedModel,
+                selectModel,
                 camTargetZ,
                 setCamTargetZ,
                 minShade,
@@ -71,6 +118,8 @@ export function ContextComponent(props: { children: React.ReactNode }) {
                 setGlobalShift,
                 loadingStatus,
                 setLoadingStatus,
+                selectedSubmodels,
+                setSelectedSubmodels,
             }}
         >
             {props.children}

src/Components/Editor/Editor.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 
 import { SizeGuard } from '@elements/SizeGuard';
 
-import { SidePanel } from './SidePanel';
-import { Canvas } from './Utils/Canvas';
-import { ContextComponent } from './Utils/Context';
+import { Canvas } from './Canvas';
+import { ContextComponent } from './Context';
+import { SidePanel } from './SidePanel/SidePanel';
 import { ProcessingScreen } from './Utils/Processing';
 import { SpashScreen } from './Utils/Splash';
-import { ViewControls } from './ViewControls';
+import { ViewControls } from './ViewControls/ViewControls';
 
 export function ModelEditor() {
     return (

src/Components/Editor/SidePanel.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { ModelData } from 'types';
 
 import { load } from '@utils/formats/loader';
 import { CoordinateMode, addEditorModels } from '@utils/models/addEditorModel';
+import { ModelData } from '@utils/types';
 
-import { EditorContext } from '@components/Editor/Utils/Context';
+import { EditorContext } from '@components/Editor/Context';
 
-import { ImportDialog } from './Actions/ImportDialog';
+import { ImportDialog } from './ImportDialog';
 import { Vitals } from './Vitals';
 
 export function ActionMenu() {
@@ -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 = '';
@@ -39,19 +39,17 @@ export function ActionMenu() {
         setProcessing(true);
         setImportOpen(false);
         const shift = await addEditorModels(
-            selectedModels,
-            selection,
-            scene,
-            mode,
-            globalShift,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
+            {
+                modelData: importedModels,
+                selection: selection,
+                scene: scene,
+                coordMode: mode,
+                globalShift: globalShift,
+            },
             setLoadingStatus
         );
         setProcessing(false);
-        setSelectedModels([]);
+        setImportedModels([]);
         setGlobalShift(shift);
     };
 
@@ -70,7 +68,6 @@ export function ActionMenu() {
                 id="modelInputFiles"
                 multiple
             />
-
             <Vitals scenes={[scene]} renderer={renderer} />
             <ImportDialog isOpen={importOpen} onClose={handleModelsAdded} />
         </div>