Fix/map ux interactions (#75)

Co-authored-by: Raphael Paul Laude <[email protected]>
districtr · Sep 4, 2024 · e369348 · e369348
1 parent 0870642
commit e369348
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 81 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -24,7 +24,7 @@
     "idb-keyval": "^6.2.1",
     "lodash": "^4.17.21",
     "maplibre-gl": "^4.4.1",
-    "next": "^14.2.5",
+    "next": "^14.2.7",
     "pmtiles": "^3.0.7",
     "react": "^18",
     "react-dom": "^18",

diff --git a/app/src/app/components/sidebar/BrushSizeSelector.tsx b/app/src/app/components/sidebar/BrushSizeSelector.tsx
@@ -0,0 +1,28 @@
+import { Slider, Flex } from "@radix-ui/themes";
+import { useMapStore } from "../../store/mapStore";
+
+export function BrushSizeSelector() {
+  const { brushSize, setBrushSize } = useMapStore((state) => ({
+    brushSize: state.brushSize,
+    setBrushSize: state.setBrushSize,
+  }));
+
+  const handleChangeEnd = (value: Array<number>) => {
+    console.log("the final value size is", value);
+    setBrushSize(value.length ? value[0] : 0);
+  };
+
+  return (
+    <Flex direction="row" gap="4" maxWidth="300px" style={{alignItems:'center'}}>
+        <h4>Brush Size</h4>
+      <Slider
+        defaultValue={[brushSize]}
+        size="2"
+        onValueChange={handleChangeEnd}
+        min={1}
+        max={100}
+      />
+      {brushSize}
+    </Flex>
+  );
+}
diff --git a/app/src/app/components/sidebar/Sidebar.tsx b/app/src/app/components/sidebar/Sidebar.tsx
@@ -8,6 +8,7 @@ import { useMapStore } from "@/app/store/mapStore";
 import { Tabs, Text } from "@radix-ui/themes";
 import Layers from "./Layers";
 import PaintByCounty from "./PaintByCounty";
+import { BrushSizeSelector } from "./BrushSizeSelector";
 
 export default function SidebarComponent() {
   const { activeTool } = useMapStore((state) => ({
@@ -25,14 +26,19 @@ export default function SidebarComponent() {
         </Heading>
         <GerryDBViewSelector />
         <MapModeSelector />
-        {activeTool === "brush" ? <ColorPicker /> : null}
+        {activeTool === "brush" ? (
+          <div>
+            <ColorPicker />
+            <BrushSizeSelector />
+            <PaintByCounty />{" "}
+          </div>
+        ) : null}
         <ResetMapButton />
-        <PaintByCounty />
         <Tabs.Root defaultValue="layers">
           <Tabs.List>
-            <Tabs.Trigger value="population">Population</Tabs.Trigger>
-            <Tabs.Trigger value="layers">Data layers</Tabs.Trigger>
-            <Tabs.Trigger value="evaluation">Evaluation</Tabs.Trigger>
+            <Tabs.Trigger value="population"> Population </Tabs.Trigger>
+            <Tabs.Trigger value="layers"> Data layers </Tabs.Trigger>
+            <Tabs.Trigger value="evaluation"> Evaluation </Tabs.Trigger>
           </Tabs.List>
           <Box pt="3">
             <Tabs.Content value="population">
@@ -42,7 +48,7 @@ export default function SidebarComponent() {
               <Layers />
             </Tabs.Content>
             <Tabs.Content value="evaluation">
-              <Text size="2">Unimplemented</Text>
+              <Text size="2"> Unimplemented </Text>
             </Tabs.Content>
           </Box>
         </Tabs.Root>

diff --git a/app/src/app/constants/layers.ts b/app/src/app/constants/layers.ts
@@ -70,22 +70,40 @@ export function getBlocksHoverLayerSpecification(
     },
     paint: {
       "fill-opacity": [
-        "case",
-        // if not hovered and not assigned a zone, be 0.8
+        "case",            
+        // zone is selected and hover is true and hover is not null
         [
           "all",
-          ["boolean", ["feature-state", "hover"], false],
-          ["boolean", ["feature-state", "zone"], false],
+          // @ts-ignore
+          ["!", ["==", ["feature-state", "zone"], null]], //< desired behavior but typerror
+          [
+            "all",
+            // @ts-ignore
+            ["!", ["==", ["feature-state", "hover"], null]], //< desired behavior but typerror
+            ["boolean", ["feature-state", "hover"], true],
+          ]
         ],
-        0.8,
-        // if not hovered, be 0.8
-        ["boolean", ["feature-state", "hover"], false],
-        0.8,
-        // if not assigned a zone, be 0.8
+        0.9,
+        // zone is selected and hover is false, and hover is not null
+        [
+          "all",
+          // @ts-ignore
+          ["!", ["==", ["feature-state", "zone"], null]], //< desired behavior but typerror
+          [
+            "all",
+            // @ts-ignore
+            ["!", ["==", ["feature-state", "hover"], null]], //< desired behavior but typerror
+            ["boolean", ["feature-state", "hover"], false],
+          ]
+        ],
+        0.7,
+        // zone is selected, fallback, regardless of hover state
         // @ts-ignore
         ["!", ["==", ["feature-state", "zone"], null]], //< desired behavior but typerror
-        0.8,
-        0.2,
+        0.7,
+        // hover is true, fallback, regardless of zone state
+        ["boolean", ["feature-state", "hover"], false], 0.6,
+        0.2
       ],
       "fill-color": ZONE_ASSIGNMENT_STYLE || "#000000",
     },