Tables reintroduced, resize guard modified

Author: vojtatom

README.md

@@ -36,16 +36,19 @@ The project is in active development. The roadmap is as follows:
 -   [ ] Loading points and lines from SHP
 -   [ ] Extract Utils to separate SDK form metacity editors
 
-### v0.3.0 - 👨‍💻 In progress
+### v0.3.2 - 👨‍💻 In progress
 
--   [x] Auto setup shading based on height
--   [ ] Resize guard update graphics (The "Oops" message is pretty lame)
 -   [ ] Projecting models onto models (2D onto 3D) - ✨WIP https://github.com/vojtatom/geometry
--   [ ] JSON metadata for nodes in hierarchy
-    -   [ ] Assign metadata to model nodes
 -   [ ] Project export
 -   [ ] Styling???
 
+### v0.2.1 - ✅ Released
+
+-   [x] Auto setup shading based on height
+-   [x] JSON metadata for nodes in hierarchy
+    -   [x] Assign metadata to model nodes
+-   [x] Resize guard update graphics (The "Oops" message is pretty lame)
+
 ### v0.2.0 - ✅ Released
 
 -   [x] Infrastructure for the built-in viewer (vite setup, etc.)

package.json

@@ -5,7 +5,7 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "tsc && vite build",
+        "build": "tsc && vite build --emptyOutDir",
         "preview": "vite preview"
     },
     "dependencies": {

studio/src/assets/cat.gif

@@ -37,6 +37,15 @@ body,
     }
 }
 
+@layer components {
+    .disable-blur {
+        -webkit-image-rendering: pixelated;
+        -moz-image-rendering: pixelated;
+        -o-image-rendering: pixelated;
+        image-rendering: pixelated;
+    }
+}
+
 @layer components {
     input[type='range'] {
         @apply appearance-none bg-transparent cursor-pointer outline-none;

studio/src/assets/cat2.gif

@@ -1,21 +1,15 @@
-import React from 'react';
 import { TbCircuitGround } from 'react-icons/tb';
 
-import { useActiveView, useCameraZ, useRenderer } from '@utils/utils';
+import { useCameraZ } from '@utils/utils';
 
 import { Range } from '@elements/Range';
 import { Widget, WidgetDescription, WidgetLine, WidgetTitle } from '@elements/Widgets';
 
 export function CameraGroundWidget() {
-    const renderer = useRenderer();
-    const activeView = useActiveView();
     const [camTargetZ, setCamTargetZ] = useCameraZ();
 
     const updateCamTargetZ = (value: number) => {
         if (isNaN(value)) return;
-
-        const view = renderer.views[activeView].view;
-        view.camera.z = value;
         setCamTargetZ(value);
     };
 
@@ -30,7 +24,9 @@ export function CameraGroundWidget() {
             <WidgetLine>
                 <WidgetDescription>Set Ground Level for the camera</WidgetDescription>
             </WidgetLine>
-            <WidgetLine className="py-2 px-4">Camera ground is at {camTargetZ}</WidgetLine>
+            <WidgetLine className="py-2 px-4">
+                Camera ground is at {camTargetZ.toFixed(2)}
+            </WidgetLine>
             <WidgetLine className="px-4 mb-4">
                 <Range min={-1000} max={1000} value={camTargetZ} onChange={updateCamTargetZ} />
             </WidgetLine>

studio/src/assets/index.css

@@ -9,6 +9,10 @@ interface TablesContextProps {
     setNodeToMove: React.Dispatch<React.SetStateAction<Node | undefined>>;
     nodeToLink: Node | undefined;
     setNodeToLink: React.Dispatch<React.SetStateAction<Node | undefined>>;
+    tables: Tables;
+    setTables: React.Dispatch<React.SetStateAction<Tables>>;
+    activeSheet: number;
+    setActiveSheet: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const context = React.createContext<TablesContextProps>({} as TablesContextProps);
@@ -19,7 +23,6 @@ export function TablesContext(props: { children: React.ReactNode }) {
     const [nodeToLink, setNodeToLink] = React.useState<Node | undefined>();
     const [tables, setTables] = React.useState<Tables>(new Tables([]));
     const [activeSheet, setActiveSheet] = React.useState<number>(0);
-    const [activeRows, setActiveRows] = React.useState<Set<number>>(new Set<number>());
 
     React.useEffect(() => {
         graph.addChangeListener(() => {
@@ -38,6 +41,10 @@ export function TablesContext(props: { children: React.ReactNode }) {
                 setNodeToMove,
                 nodeToLink,
                 setNodeToLink,
+                tables,
+                setTables,
+                activeSheet,
+                setActiveSheet,
             }}
         >
             {props.children}
@@ -93,3 +100,33 @@ export function useLinkingNode(): [Node | undefined, (node: Node | undefined) =>
 
     return [ctx.nodeToLink, updateNodeToLink];
 }
+
+export function useTables(): [Tables, React.Dispatch<React.SetStateAction<Tables>>] {
+    const ctx = React.useContext(context);
+    return [ctx.tables, ctx.setTables];
+}
+
+export function useSheets(): [(content: string) => void, (index: number) => void] {
+    const ctx = React.useContext(context);
+    const addSheet = (content: string) => {
+        ctx.setTables(ctx.tables.addSheet(content));
+    };
+
+    const removeSheet = (index: number) => {
+        ctx.setTables(ctx.tables.removeSheet(index));
+    };
+
+    return [addSheet, removeSheet];
+}
+
+export function useActiveSheet(): [number, React.Dispatch<React.SetStateAction<number>>] {
+    const ctx = React.useContext(context);
+    return [ctx.activeSheet, ctx.setActiveSheet];
+}
+
+export function useRowTypes(): (sheet: number, row: number, rowType: string) => void {
+    const ctx = React.useContext(context);
+    return (sheet: number, row: number, rowType: string) => {
+        ctx.setTables(ctx.tables.setSheetRowType(sheet, row, rowType as any));
+    };
+}

studio/src/components/Editor/Canvas/WidgetCameraGround.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BsFillStopFill } from 'react-icons/bs';
 import { FiDelete } from 'react-icons/fi';
 import { MdDriveFileMoveRtl, MdOutlineDriveFileMove } from 'react-icons/md';
-import { VscSymbolInterface } from 'react-icons/vsc';
+import { VscJson } from 'react-icons/vsc';
 
 import { EditorModel, GroupNode as GroupNodeClass, deleteGroup } from '@utils/utils';
 import { useSelection } from '@utils/utils';
@@ -32,7 +32,7 @@ export function GroupNode(props: GroupNodeProps) {
     const [graph] = useGraph();
     const [nodeToMove, updateNodeToMove] = useMovingNode();
     const [nodeToLink, updateNodeToLink] = useLinkingNode();
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = React.useState(true);
 
     const isSelected = React.useMemo(() => node.selected(submodels), [node, submodels]);
     const isLinking = React.useMemo(() => node === nodeToLink, [node, nodeToLink]);
@@ -118,7 +118,7 @@ export function GroupNode(props: GroupNodeProps) {
                         onClick={handleLink}
                         title="Link to selected rows in table"
                     >
-                        <VscSymbolInterface />
+                        <VscJson />
                     </HierarchyButton>
                 </If>
             </HierarchyNodeRow>

studio/src/components/Editor/Context/TableContext.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BsFillStopFill } from 'react-icons/bs';
 import { MdOutlineDriveFileMove } from 'react-icons/md';
-import { VscSymbolInterface } from 'react-icons/vsc';
+import { VscJson, VscSymbolInterface } from 'react-icons/vsc';
 
 import { EditorModel, ModelNode as ModelNodeClass } from '@utils/utils';
 import { useSelection } from '@utils/utils';
@@ -73,7 +73,7 @@ export function ModelNode(props: ModelNodeProps) {
                         onClick={handleLink}
                         title="Link to selected rows in table"
                     >
-                        <VscSymbolInterface />
+                        <VscJson />
                     </HierarchyButton>
                 </If>
             </HierarchyNodeRow>

studio/src/components/Editor/SidePanel/Table/Hierarchy/NodeGroup.tsx

@@ -1,17 +1,47 @@
+import { AiOutlineCheckCircle, AiOutlineClockCircle, AiOutlineCloseCircle } from 'react-icons/ai';
+
 import { useRenderer, useScene } from '@utils/utils';
 
 import { Vitals } from '@editor/Utils/Vitals';
 
 import { Button } from '@elements/Button';
 
-export function MetaMenu() {
+export function MetaMenu(props: { status?: 'editing' | 'saved' | 'failed' }) {
     const renderer = useRenderer();
     const scene = useScene();
 
     return (
         <div className="flex flex-row p-4 w-full space-x-2 border-b items-center">
             <Button>Export</Button>
+            {props.status == 'editing' && <Editing />}
+            {props.status == 'saved' && <Saved />}
+            {props.status == 'failed' && <Failed />}
             <Vitals scenes={[scene]} renderer={renderer} />
         </div>
     );
 }
+
+function Saved() {
+    return (
+        <div className="text-blue-500 flex flex-row items-center px-2">
+            <AiOutlineCheckCircle className="text-xl mr-2" /> Saved
+        </div>
+    );
+}
+
+function Failed() {
+    return (
+        <div className="text-red-500 flex flex-row items-center px-2">
+            <AiOutlineCloseCircle className="text-xl mr-2" /> Failed
+        </div>
+    );
+}
+
+function Editing() {
+    return (
+        <div className="text-neutral-500 flex flex-row items-center px-2">
+            <AiOutlineClockCircle className="text-xl mr-2" />
+            Idle
+        </div>
+    );
+}