map editor improvements

Author: mattbruv

map-o-matic-v2/src/App.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Anchor, AppShell, Burger, Button, Flex, Group, Modal, NavLink, NumberInput, ScrollArea, Stack, Switch, Text } from '@mantine/core'
+import { ActionIcon, Anchor, AppShell, Burger, Button, Flex, Grid, Group, MantineStyleProp, Modal, NavLink, NumberInput, rem, ScrollArea, Stack, Switch, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { IconApple, IconCamera, IconGraph, IconImageInPicture, IconMap, IconSchema, IconSettings, IconWorld } from '@tabler/icons-react';
 import { Link, Route, Routes } from 'react-router-dom';
@@ -96,6 +96,22 @@ function App() {
 
   const [noticeOpened, noticeCallbacks] = useDisclosure(false);
 
+  const GRID_HEIGHT = "calc(100vh - 68px)"
+  const GRID_LEFT: MantineStyleProp = {
+    //backgroundColor: "blue",
+    overflowY: "auto",
+    minHeight: GRID_HEIGHT,
+    maxHeight: GRID_HEIGHT,
+    padding: "1rem"
+  }
+  const GRID_RIGHT: MantineStyleProp = {
+    // backgroundColor: "red",
+    padding: "2px",
+    // overflowY: "auto",
+    minHeight: GRID_HEIGHT,
+    maxHeight: GRID_HEIGHT
+  }
+
   return (
     <>
       <MapOMaticContext.Provider value={mapOMatic}>
@@ -106,7 +122,6 @@ function App() {
             breakpoint: "sm",
             collapsed: { desktop: !navOpened },
           }}
-          padding="md"
         >
           <AppShell.Header>
             <Group h="100%" px="md">
@@ -179,8 +194,8 @@ function App() {
           </AppShell.Navbar>
           <AppShell.Main>
             <Notice close={noticeCallbacks.close} open={noticeCallbacks.open} opened={noticeOpened} />
-            <Flex style={{ height: '85vh' }}> {/* Full height container */}
-              <ScrollArea style={{ width: '50%', height: '100%' }}> {/* Left pane */}
+            <Grid align="stretch" gutter={{ base: 0 }}>
+              <Grid.Col span={6} style={GRID_LEFT}>
                 <Routes>
                   <Route path='/' element={<ProjectPage />} />
                   <Route path='/project' element={<ProjectPage />} />
@@ -189,11 +204,12 @@ function App() {
                   <Route path='/images' element={<Images />} />
                   <Route path='/event-graph' element={<EventGraph />} />
                 </Routes>
-              </ScrollArea>
-              <ScrollArea style={{ width: '50%', height: '100%' }}> {/* Right pane */}
+
+              </Grid.Col>
+              <Grid.Col span={6} style={GRID_RIGHT}>
                 <RendererPage />
-              </ScrollArea>
-            </Flex>
+              </Grid.Col>
+            </Grid>
           </AppShell.Main>
         </AppShell >
       </MapOMaticContext.Provider >

map-o-matic-v2/src/EventGraph.tsx

@@ -190,7 +190,7 @@ function EventGraph() {
         <>
             <div
                 ref={containerRef}
-                style={{ width: '600px', height: '600px', border: '1px solid black' }}
+                style={{ width: '100%', height: '100%' }}
             />
         </>
     )

map-o-matic-v2/src/GlobalActions.tsx

@@ -11,6 +11,7 @@ function GlobalActions() {
     const mapBorderCount = project.maps.filter(x => x.render.showMapBorder === true).length
     const mapGridCount = project.maps.filter(x => x.render.showMapGrid === true).length
     const mapCollisionCount = project.maps.filter(x => x.render.showCollision === true).length
+    const mapMoveBoxCount = project.maps.filter(x => x.render.showMoveBoxes === true).length
 
     function toggleGrids(event: ChangeEvent<HTMLInputElement>): void {
         updateProject(produce(project, draft => {
@@ -30,8 +31,14 @@ function GlobalActions() {
         }))
     }
 
+    function toggleMoveBoxes(event: ChangeEvent<HTMLInputElement>): void {
+        updateProject(produce(project, draft => {
+            draft.maps.forEach(x => x.render.showMoveBoxes = event.target.checked)
+        }))
+    }
+
     return (<>
-        <div>
+        <Group>
             <Stack gap={"xs"}>
                 <Checkbox
                     onChange={toggleGrids}
@@ -52,7 +59,15 @@ function GlobalActions() {
                     label="Show Collisions"
                 />
             </Stack>
-        </div>
+            <Stack gap={"xs"} justify={"flex-start"}>
+                <Checkbox
+                    onChange={toggleMoveBoxes}
+                    checked={mapMoveBoxCount === totalMaps}
+                    indeterminate={mapMoveBoxCount > 0 && mapMoveBoxCount < totalMaps}
+                    label="Show Move Bounds"
+                />
+            </Stack>
+        </Group>
     </>)
 }