handle non shattering maps

app/src/app/store/mapRenderSubs.ts

@@ -9,7 +9,6 @@ import {
 import {
   ColorZoneAssignmentsState,
   colorZoneAssignments,
-  getMap,
   shallowCompareArray,
 } from "../utils/helpers";
 import { useMapStore as _useMapStore, MapStore } from "./mapStore";
@@ -26,29 +25,35 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
         mapStore.addVisibleLayerIds([BLOCK_LAYER_ID, BLOCK_HOVER_LAYER_ID]);
       }
     },
-    { equalityFn: shallowCompareArray }
+    { equalityFn: shallowCompareArray },
   );
 
-  const _shatterMapSideEffectRender = useMapStore.subscribe<[MapStore['shatterIds'], MapStore['mapRef'], MapStore['mapRenderingState']]>(
+  const _shatterMapSideEffectRender = useMapStore.subscribe<
+    [MapStore["shatterIds"], MapStore["mapRef"], MapStore["mapRenderingState"]]
+  >(
     (state) => [state.shatterIds, state.mapRef, state.mapRenderingState],
     ([shatterIds, mapRef, mapRenderingState]) => {
       const state = useMapStore.getState();
       const setMapLock = state.setMapLock;
 
-      if (!mapRef?.current || mapRenderingState !== 'loaded') {
+      if (!mapRef?.current || mapRenderingState !== "loaded") {
         return;
       }
 
-      [...PARENT_LAYERS, ...CHILD_LAYERS].forEach((layerId) =>
-        mapRef.current?.setFilter(layerId, getLayerFilter(layerId, shatterIds))
+      const layersToFilter = PARENT_LAYERS;
+
+      if (state.mapDocument?.child_layer) layersToFilter.push(...CHILD_LAYERS);
+
+      layersToFilter.forEach((layerId) =>
+        mapRef.current?.setFilter(layerId, getLayerFilter(layerId, shatterIds)),
       );
 
       mapRef.current.once("render", () => {
         setMapLock(false);
         console.log(`Unlocked at`, performance.now());
       });
     },
-    { equalityFn: shallowCompareArray }
+    { equalityFn: shallowCompareArray },
   );
 
   const _hoverMapSideEffectRender = useMapStore.subscribe(
@@ -67,7 +72,7 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
       hoverFeatures.forEach((feature) => {
         mapRef.current?.setFeatureState(feature, { hover: true });
       });
-    }
+    },
   );
 
   const _zoneAssignmentMapSideEffectRender =
@@ -81,7 +86,7 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
         state.mapRenderingState,
       ],
       (curr, prev) => colorZoneAssignments(curr, prev),
-      { equalityFn: shallowCompareArray }
+      { equalityFn: shallowCompareArray },
     );
 
   return [

app/src/app/utils/events/mapEvents.ts

@@ -7,31 +7,51 @@ import type {
   MapLayerMouseEvent,
   MapLayerTouchEvent,
 } from "maplibre-gl";
-import { useMapStore } from "@/app/store/mapStore";
+import { useMapStore } from "@store/mapStore";
 import { MutableRefObject } from "react";
 import { SelectMapFeatures, SelectZoneAssignmentFeatures } from "./handlers";
-import { ResetMapSelectState } from "@/app/utils/events/handlers";
-import { INTERACTIVE_LAYERS } from "@/app/constants/layers";
+import { ResetMapSelectState } from "@utils/events/handlers";
+import {
+  INTERACTIVE_LAYERS,
+  BLOCK_HOVER_LAYER_ID,
+  BLOCK_LAYER_ID,
+  BLOCK_LAYER_ID_CHILD,
+} from "@constants/layers";
 
 /*
 MapEvent handling; these functions are called by the event listeners in the MapComponent
 */
 
+/**
+
+*/
+function getLayerIdsToPaint(child_layer: string | undefined | null) {
+  return child_layer
+    ? [BLOCK_LAYER_ID, BLOCK_LAYER_ID_CHILD]
+    : [BLOCK_LAYER_ID];
+}
+
 /**
  * What happens when the map is clicked on; incomplete implementation
  * @param e - MapLayerMouseEvent | MapLayerTouchEvent, the event object
  * @param map - MutableRefObject<Map | null>, the maplibre map instance
  */
 export const handleMapClick = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {
   const mapStore = useMapStore.getState();
   const activeTool = mapStore.activeTool;
   const sourceLayer = mapStore.mapDocument?.parent_layer;
 
   if (activeTool === "brush" || activeTool === "eraser") {
-    const selectedFeatures = mapStore.paintFunction(map, e, mapStore.brushSize);
+    const paintLayers = getLayerIdsToPaint(mapStore.mapDocument?.child_layer);
+    const selectedFeatures = mapStore.paintFunction(
+      map,
+      e,
+      mapStore.brushSize,
+      paintLayers,
+    );
 
     if (sourceLayer) {
       // select on both the map object and the store
@@ -46,7 +66,7 @@ export const handleMapClick = (
 
 export const handleMapMouseUp = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {
   const mapStore = useMapStore.getState();
   const activeTool = mapStore.activeTool;
@@ -61,7 +81,7 @@ export const handleMapMouseUp = (
 
 export const handleMapMouseDown = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {
   const mapStore = useMapStore.getState();
   const activeTool = mapStore.activeTool;
@@ -78,17 +98,17 @@ export const handleMapMouseDown = (
 
 export const handleMapMouseEnter = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {};
 
 export const handleMapMouseOver = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {};
 
 export const handleMapMouseLeave = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {
   const mapStore = useMapStore.getState();
   const activeTool = mapStore.activeTool;
@@ -99,21 +119,27 @@ export const handleMapMouseLeave = (
 
 export const handleMapMouseOut = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
-) => {
-};
+  map: MutableRefObject<MapLibreMap | null>,
+) => {};
 
 export const handleMapMouseMove = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {
   const mapStore = useMapStore.getState();
   const activeTool = mapStore.activeTool;
   const setHoverFeatures = mapStore.setHoverFeatures;
   const isPainting = mapStore.isPainting;
   const sourceLayer = mapStore.mapDocument?.parent_layer;
-  const selectedFeatures = mapStore.paintFunction(map, e, mapStore.brushSize);
-  const isBrushingTool = sourceLayer && ["brush", "eraser"].includes(activeTool)
+  const paintLayers = getLayerIdsToPaint(mapStore.mapDocument?.child_layer);
+  const selectedFeatures = mapStore.paintFunction(
+    map,
+    e,
+    mapStore.brushSize,
+    paintLayers,
+  );
+  const isBrushingTool =
+    sourceLayer && ["brush", "eraser"].includes(activeTool);
   if (isBrushingTool) {
     setHoverFeatures(selectedFeatures);
   }
@@ -127,7 +153,7 @@ export const handleMapMouseMove = (
 
 export const handleMapZoom = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {};
 
 export const handleMapIdle = () => {};
@@ -136,11 +162,11 @@ export const handleMapMoveEnd = () => {};
 
 export const handleMapZoomEnd = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {};
 
 export const handleResetMapSelectState = (
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {
   const mapStore = useMapStore.getState();
   const sourceLayer = mapStore.mapDocument?.parent_layer;
@@ -153,23 +179,21 @@ export const handleResetMapSelectState = (
 
 export const handleMapContextMenu = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  map: MutableRefObject<MapLibreMap | null>
+  map: MutableRefObject<MapLibreMap | null>,
 ) => {
   const mapStore = useMapStore.getState();
-  if (mapStore.activeTool !== 'pan') {
-    return
+  if (mapStore.activeTool !== "pan") {
+    return;
   }
   e.preventDefault();
   const setHoverFeatures = mapStore.setHoverFeatures;
   const sourceLayer = mapStore.mapDocument?.parent_layer;
   // Selects from the hover layers instead of the points
   // Otherwise, its hard to select precisely
-  const selectedFeatures = mapStore.paintFunction(
-    map,
-    e,
-    0,
-    INTERACTIVE_LAYERS
-  );
+  const paintLayers = mapStore.mapDocument?.child_layer
+    ? INTERACTIVE_LAYERS
+    : [BLOCK_HOVER_LAYER_ID];
+  const selectedFeatures = mapStore.paintFunction(map, e, 0, paintLayers);
   if (!selectedFeatures?.length || !map.current || !sourceLayer) return;
 
   setHoverFeatures(selectedFeatures.slice(0, 1));

app/src/app/utils/helpers.ts

@@ -31,7 +31,7 @@ export type PaintEventHandler = (
   map: React.MutableRefObject<Map | null>,
   e: MapLayerMouseEvent | MapLayerTouchEvent,
   brushSize: number,
-  layers?: string[]
+  layers?: string[],
 ) => MapGeoJSONFeature[] | undefined;
 
 /**
@@ -60,7 +60,7 @@ export type ContextMenuState = {
  */
 export const boxAroundPoint = (
   e: MapLayerMouseEvent | MapLayerTouchEvent,
-  radius: number
+  radius: number,
 ): [PointLike, PointLike] => {
   return [
     [e.point.x - radius, e.point.y - radius],
@@ -80,7 +80,7 @@ export const getFeaturesInBbox = (
   map: MutableRefObject<Map | null>,
   e: MapLayerMouseEvent | MapLayerTouchEvent,
   brushSize: number,
-  layers: string[] = [BLOCK_LAYER_ID, BLOCK_LAYER_ID_CHILD]
+  layers: string[] = [BLOCK_LAYER_ID],
 ): MapGeoJSONFeature[] | undefined => {
   const bbox = boxAroundPoint(e, brushSize);
 
@@ -99,7 +99,7 @@ export const getFeaturesIntersectingCounties = (
   map: MutableRefObject<Map | null>,
   e: MapLayerMouseEvent | MapLayerTouchEvent,
   brushSize: number,
-  layers: string[] = [BLOCK_LAYER_ID, BLOCK_LAYER_ID_CHILD]
+  layers: string[] = [BLOCK_LAYER_ID],
 ): MapGeoJSONFeature[] | undefined => {
   if (!map.current) return;
 
@@ -142,7 +142,7 @@ export const getFeaturesIntersectingCounties = (
  * @returns [PointLike, PointLike] - An array containing the SW and NE corners of the bounding box
  */
 const getBoundingBoxFromFeatures = (
-  features: MapGeoJSONFeature[]
+  features: MapGeoJSONFeature[],
 ): [LngLatLike, LngLatLike] | null => {
   if (!features || features.length === 0) {
     return null;
@@ -178,14 +178,14 @@ const getBoundingBoxFromFeatures = (
  */
 export const mousePos = (
   map: MutableRefObject<Map | null>,
-  e: MapLayerMouseEvent | MapLayerTouchEvent
+  e: MapLayerMouseEvent | MapLayerTouchEvent,
 ) => {
   const canvas = map.current?.getCanvasContainer();
   if (!canvas) return new Point(0, 0);
   const rect = canvas.getBoundingClientRect();
   return new Point(
     e.point.x - rect.left - canvas.clientLeft,
-    e.point.y - rect.top - canvas.clientTop
+    e.point.y - rect.top - canvas.clientTop,
   );
 };
 
@@ -208,7 +208,7 @@ export interface LayerVisibility {
  */
 export function toggleLayerVisibility(
   mapRef: MutableRefObject<maplibregl.Map | null>,
-  layerIds: string[]
+  layerIds: string[],
 ): LayerVisibility[] {
   const activeLayerIds = getVisibleLayers(mapRef)?.map((layer) => layer.id);
   if (!activeLayerIds) return [];
@@ -242,17 +242,22 @@ export type ColorZoneAssignmentsState = [
   MapStore["mapRef"],
   MapStore["shatterIds"],
   MapStore["appLoadingState"],
-  MapStore["mapRenderingState"]
+  MapStore["mapRenderingState"],
 ];
 
-export const getMap = (_mapRef?: MapStore['mapRef']) => {
-  const mapRef = _mapRef || useMapStore.getState().mapRef
-  if (mapRef?.current && mapRef.current?.getStyle().layers.findIndex((layer) => layer.id === BLOCK_HOVER_LAYER_ID) !== -1) {
-    return null
+export const getMap = (_mapRef?: MapStore["mapRef"]) => {
+  const mapRef = _mapRef || useMapStore.getState().mapRef;
+  if (
+    mapRef?.current &&
+    mapRef.current
+      ?.getStyle()
+      .layers.findIndex((layer) => layer.id === BLOCK_HOVER_LAYER_ID) !== -1
+  ) {
+    return null;
   }
 
-  return mapRef as MutableRefObject<maplibregl.Map>
-}
+  return mapRef as MutableRefObject<maplibregl.Map>;
+};
 
 /**
  * Assigns colors to zones on the map based on the current zone assignments.
@@ -275,7 +280,7 @@ export const getMap = (_mapRef?: MapStore['mapRef']) => {
  */
 export const colorZoneAssignments = (
   state: ColorZoneAssignmentsState,
-  previousState?: ColorZoneAssignmentsState
+  previousState?: ColorZoneAssignmentsState,
 ) => {
   const [
     zoneAssignments,
@@ -326,7 +331,7 @@ export const colorZoneAssignments = (
       {
         selected: true,
         zone,
-      }
+      },
     );
   });
 };
@@ -355,7 +360,7 @@ export const colorZoneAssignmentTriggers = [
 export const setZones = (
   zoneAssignments: MapStore["zoneAssignments"],
   parent: string,
-  children: Set<string>
+  children: Set<string>,
 ) => {
   const zone = zoneAssignments.get(parent);
   if (zone) {