added tabs and file restructure

2025-07-24 08:52:20 -07:00
parent 0ca419a093
commit 1d5b00448b
13 changed files with 184 additions and 89 deletions
@@ -0,0 +1,60 @@
+// This component defines a generic Widget that can be dynamically resized and 
+// dragged inside the canvas
+// Content not included, must be populated using custom charts plots and notifications
+
+import { useState } from 'react';
+import GridLayout, { WidthProvider } from 'react-grid-layout';
+import Widget from '../../components/Widget.jsx';
+import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
+
+export default function WidgetCanvas() {
+    // Define widgets initial position and size
+    // TODO Add dynamic adding/deleting of widgets via options button 
+    const recipe = useSlotRecipe({ key: "widget" });
+    const styles = recipe(); // using root recipe for widget below
+    const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
+
+    const [layout, setLayout] = useState([
+        { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+        { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+        { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
+    ]);
+
+    const onLayoutChange = (newLayout) => { 
+        setLayout(newLayout);
+        console.log('Updated layout:', newLayout)
+    };
+
+    // don't allow text highlighting when dragging
+    const handleDragStart = () => {
+        document.body.style.userSelect = "none";
+    };
+    // allow text highlighting all other times
+    const handleDragStop = () => {
+        document.body.style.userSelect = "";
+    };
+
+    return (
+        <chakra.div width="100%">
+            <ResponsiveGridLayout
+                className="layout"
+                layout={layout}
+                cols={12} // Total columns in grid
+                rowHeight={30} //Height of a single row in px
+                isBounded={true} // Total width of the grid
+                margin={[10, 10]} // [horizontal, vertical] gap
+                onLayoutChange={onLayoutChange}
+                draggableHandle=".widget-handle" // Make only the header draggable
+                onDragStart={handleDragStart}
+                onDragStop={handleDragStop}
+            >
+                {layout.map((item) => (
+                    // this flex wrapper allows the widget to shrink down to the header size, no less
+                    <Flex key={item.i} css={styles.root} height="100%" >
+                        <Widget title="VDAP Widget" />
+                    </Flex>
+                ))}
+            </ResponsiveGridLayout>
+        </chakra.div>
+    );
+}