Merge pull request #9 from MetacityTools/dev

Release version 0.1.0

Author: vojtatom

README.md

@@ -1,36 +1,64 @@
-# 🏡 Metacity Studio
+# 🏡 [Metacity Studio](https://studio.metacity.cc)
 
 ![Screenshot](src/assets/splash/screen.png)
 
 Metacity Studio is an online tool for integrating and visualizing spatial and tabular data.
 
-## How does it work?
-
-Open the app, upload your data, see what's there. That's it.
+Running at [studio.metacity.cc](https://studio.metacity.cc)
 
-The application is front-end only, all the data processing is done in the browser.
+## How does it work?
 
-It may seem crazy, mangling large datasets in the browser, computing geometry and on top of that, rendering it all in a 3D environment.
+Prepare urban visualizations online. Load your data, align it, and export it for viewing online.
 
-Only time will tell if this is a good idea.
+-   works best with small to medium-sized datasets
+-   allows yout to connect 3D models and tabular data
 
 ## What formats can you load in?
 
 Currently:
 
--   SHP (Polygons and MultiPatch only)
+-   SHP (Polygons and MultiPatch only for now)
 -   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
+The project is in active development. The roadmap is as follows:
+
+### v0.1.2
+
+-   [ ] Connect tabular data
+-   [ ] Project export
+-   [ ] Project import
+
+### v0.1.1
+
+-   [ ] Baking/Transforming models to Table-like format
+-   [ ] Allow labeling geometry
+
+### v0.1.0 - 👨‍💻 In progress
+
+-   [x] Rectangular select
+-   [x] Merge submodels
+-   [x] Delete selected submodel
+-   [x] Context Help
+
+### v0.0.4 - ✅ Released
+
+-   [x] Removed IFC metadata loading to optimize memory usage
+
+### v0.0.3 - ✅ Released
+
+-   [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
+
+### v0.0.2 - ✅ Released
+
 -   [x] Loading SHP - _needs our own library to load, noone supports multipatch_
 -   [x] BVH build into worker
 -   [x] Loading screen + Add chicken
@@ -39,26 +67,22 @@ Currently:
 -   [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
+### v0.0.1 - ✅ Released
 
--   [ ] IFC metadata loading (memory-efficiency???)
--   [ ] BVH
--   [ ] remesh models - intersection of triangles
--   [ ] delete submodel - _for now as (split + delete)_
--   [ ] frustum culling
--   [ ] rectangular select
+-   [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
+
+## Backlog
+
+-   [ ] Merge whole models
+-   [ ] Loading points and lines from SHP
+-   [ ] Loading GeoJSON
+-   [ ] Loading IFC metadata loading (memory-efficiency???)
+-   [ ] Remesh models - intersection of triangles
+-   [ ] Frustum culling

package.json

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

src/Components/Editor/Canvas/Canvas.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { EditorModel } from '@utils/models/models/EditorModel';
+
+import * as GL from '@bananagl/bananagl';
+
+import { EditorContext } from '../Context';
+
+function primitiveIndicesToSubmodelIndices(object: EditorModel, indices: number[]) {
+    const submodel = object.attributes.getAttribute('submodel') as GL.Attribute;
+    const submodelIds = submodel.buffer.getView(Uint32Array);
+    const submodelIDs = new Set<number>();
+    for (const idx of indices) submodelIDs.add(submodelIds[idx * 3]);
+    return Array.from(submodelIDs);
+}
+
+function selectionFlags(multiselect: boolean, shiftKey: boolean) {
+    let toggle = false;
+    let extend = false;
+
+    if (multiselect) {
+        if (shiftKey) extend = true;
+        else toggle = true;
+    } else if (shiftKey) toggle = true;
+    return { toggle, extend };
+}
+
+export function Canvas(props: { canvasRef: React.RefObject<HTMLCanvasElement> }) {
+    const ctx = React.useContext(EditorContext);
+
+    function handlePick(object: EditorModel, indices: number | number[], shiftKey: boolean) {
+        const multiselect = Array.isArray(indices);
+        const arrIdxs = multiselect ? indices : [indices];
+        const submodelIDs = primitiveIndicesToSubmodelIndices(object, arrIdxs);
+        let { toggle, extend } = selectionFlags(multiselect, shiftKey);
+        ctx.select(object as EditorModel, submodelIDs, toggle, extend);
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+        event.preventDefault();
+    };
+
+    React.useEffect(() => {
+        const canvas = props.canvasRef.current;
+        if (!canvas) return;
+        canvas.addEventListener('wheel', handleWheel);
+        return () => {
+            canvas.removeEventListener('wheel', handleWheel);
+        };
+    }, [props.canvasRef]);
+
+    return (
+        <canvas
+            ref={props.canvasRef}
+            key="canvas"
+            tabIndex={1000}
+            className="w-full h-full outline-none"
+            onPointerDown={(e) => {
+                ctx.renderer.windowNullable?.controls?.pointerDown(e.nativeEvent);
+            }}
+            onPointerMove={(e) => {
+                ctx.renderer.windowNullable?.controls?.pointerMove(e.nativeEvent);
+            }}
+            onPointerUp={(e) => {
+                const selection = ctx.renderer.windowNullable?.controls?.pointerUp(e.nativeEvent);
+                const shift = ctx.renderer.windowNullable?.controls?.keyboard.keyMap.shift ?? false;
+                if (selection)
+                    handlePick(selection.object as EditorModel, selection.primitiveIndices, shift);
+            }}
+            onWheel={(e) => {
+                ctx.renderer.windowNullable?.controls?.wheel(e.nativeEvent);
+            }}
+            onPointerOut={(e) => {
+                ctx.renderer.windowNullable?.controls?.pointerOut(e.nativeEvent);
+            }}
+            onContextMenu={(e) => {
+                ctx.renderer.windowNullable?.controls?.contextMenu(e.nativeEvent);
+            }}
+        />
+    );
+}

src/Components/Editor/Canvas.tsx …mponents/Editor/Canvas/CanvasWrapper.tsxsrc/Components/Editor/Canvas.tsx renamed to src/Components/Editor/Canvas/CanvasWrapper.tsx src/Components/Editor/Canvas.tsx renamed to src/Components/Editor/Canvas/CanvasWrapper.tsx

@@ -4,14 +4,14 @@ import { GridModel } from '@utils/models/models/GridModel';
 
 import * as GL from '@bananagl/bananagl';
 
-import { EditorContext } from './Context';
+import { EditorContext } from '../Context';
+import { Canvas } from './Canvas';
 
-export function Canvas() {
+export function CanvasWrapper() {
     const canvasRef = React.useRef<HTMLCanvasElement>(null);
     const ctx = React.useContext(EditorContext);
 
     React.useEffect(() => {
-        if (!ctx) return;
         const { renderer, scene } = ctx;
 
         if (canvasRef.current && renderer) {
@@ -35,23 +35,25 @@ export function Canvas() {
             scene.add(grid);
             renderer.clearColor = [1, 1, 1, 1];
 
+            const down = (e: KeyboardEvent) => {
+                renderer.window.controls.keydown(e);
+            };
+
+            const up = (e: KeyboardEvent) => {
+                renderer.window.controls.keyup(e);
+            };
+
+            document.addEventListener('keydown', down);
+            document.addEventListener('keyup', up);
+
             return () => {
+                document.removeEventListener('keydown', down);
+                document.removeEventListener('keyup', up);
                 GL.unmountRenderer(renderer);
                 scene.remove(grid);
             };
         }
-    }, [ctx?.renderer, ctx?.scene]);
-
-    return (
-        <canvas
-            ref={canvasRef}
-            key="canvas"
-            tabIndex={1000}
-            style={{
-                width: '100%',
-                height: '100%',
-                outline: 'none',
-            }}
-        />
-    );
+    }, [ctx.renderer, ctx.scene]);
+
+    return <Canvas canvasRef={canvasRef} />;
 }