@xyo-network/react-map 2.64.0 → 2.64.1

package/dist/browser/Components/MapBoxHeat.js

@@ -1,11 +1,156 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/Components/MapBoxHeat.tsx
 import { FlexCol } from "@xylabs/react-flexbox";
-import { MapBox } from "./MapBox";
-import { MapSettingsBox } from "./MapSettingsComponents";
-const MapboxHeatFlexBox = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
+
+// src/Components/MapBox.tsx
+import "mapbox-gl/dist/mapbox-gl.css";
+import { Map } from "mapbox-gl";
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+
+// src/hooks/useDynamicMapResize.tsx
+import { useEffect, useMemo, useState } from "react";
+var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
+  const [dependenciesReady, setDependenciesReady] = useState(false);
+  const resizer = useMemo(
+    () => new ResizeObserver(() => {
+      const width = mapContainerRef.current?.getBoundingClientRect().width;
+      if (width && mapCanvasRef.current) {
+        mapCanvasRef.current.style.width = `${width}px`;
+        setTimeout(() => mapInstance?.resize());
+      }
+    }),
+    [mapCanvasRef, mapContainerRef, mapInstance]
+  );
+  useEffect(() => {
+    const dependenciesReady2 = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
+    setDependenciesReady(dependenciesReady2);
+  }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
+  useEffect(() => {
+    if (dependenciesReady) {
+      if (mapContainerRef.current) {
+        resizer.observe(mapContainerRef.current);
+      }
+      return () => {
+        resizer.disconnect();
+      };
+    }
+  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
+};
+
+// src/Contexts/MapBoxInstance/Context.ts
+import { createContext } from "react";
+var MapBoxInstanceContext = createContext({});
+
+// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
+import { assertEx } from "@xylabs/assert";
+import { useContext } from "react";
+var useMapBoxInstance = () => {
+  const context = useContext(MapBoxInstanceContext);
+  assertEx("map" in context, "useMapBoxInstance must be used within a MapBoxInstanceContext");
+  return context;
+};
+
+// src/Contexts/MapSettings/Context.ts
+import { createContext as createContext2 } from "react";
+var MapSettingsContext = createContext2({});
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+import { useContext as useContext2 } from "react";
+var useMapSettings = () => {
+  const context = useContext2(MapSettingsContext);
+  return context;
+};
+
+// src/Components/MapBox.tsx
+import { jsx } from "react/jsx-runtime";
+var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = useState2();
+  const mapContainerRef = useRef(null);
+  const mapCanvasRef = useRef(null);
+  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
+  const { mapSettings } = useMapSettings();
+  const activeResize = mapSettings?.dynamicMapResize.value;
+  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
+  useEffect2(() => {
+    if (mapSettings?.preferDark?.value === true) {
+      map?.setStyle(`mapbox://styles/${"mapbox/dark-v10" /* Dark */}`);
+    } else {
+      map?.setStyle(`mapbox://styles/${darkMode ? "mapbox/dark-v10" /* Dark */ : "mapbox/light-v10" /* Light */}`);
+    }
+  }, [map, darkMode, mapSettings]);
+  useEffect2(() => {
+    const map2 = new Map({
+      accessToken,
+      center: [0, 0],
+      container: mapContainerRef.current ?? "",
+      style: `mapbox://styles/${"mapbox/light-v10" /* Light */}`,
+      zoom,
+      ...options
+    });
+    setMapBoxInstance?.(map2);
+    setMap(map2);
+    mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
+    console.log("Created Map");
+    return () => {
+      console.log("Removing Map");
+      map2.remove();
+    };
+  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => mapContainerRef.current = el,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
+    }
+  );
+};
+
+// src/Components/MapSettingsComponents/Setting.tsx
+import { FormControlLabel, Switch } from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MapSettingSwitch = ({ developerMode, field, ...props }) => {
+  const { mapSettings, setMapSettings } = useMapSettings();
+  const setting = mapSettings?.[field];
+  const onLocalChange = (event) => {
+    if (setting) {
+      setMapSettings?.((previous) => {
+        previous[setting.field].value = event.target.checked;
+        return { ...previous };
+      });
+    }
+  };
+  if (setting?.devMode && developerMode === false) {
+    return null;
+  }
+  return setting?.hidden ? null : /* @__PURE__ */ jsx2(FormControlLabel, { label: setting?.label, control: /* @__PURE__ */ jsx2(Switch, { checked: setting?.value, onChange: onLocalChange, ...props }) });
+};
+
+// src/Components/MapSettingsComponents/SettingsBox.tsx
+import { Paper, Stack } from "@mui/material";
+import { FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import { useAppSettings } from "@xyo-network/react-app-settings";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MapSettingsBox = ({ developerMode, ...props }) => {
+  const { mapSettings } = useMapSettings();
+  const { developerMode: devModeFromContext } = useAppSettings();
+  const resolveDeveloperMode = developerMode ?? devModeFromContext;
+  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ jsx3(FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ jsx3(FlexRow, { paddingX: 2, children: /* @__PURE__ */ jsx3(Paper, { children: /* @__PURE__ */ jsx3(Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
+    return /* @__PURE__ */ jsx3(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
+  }) }) }) }) }) : null;
+};
+
+// src/Components/MapBoxHeat.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var MapboxHeatFlexBox = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
   return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
-    /* @__PURE__ */ jsx(MapBox, { accessToken, options: mapBoxOptions, zoom }),
-    /* @__PURE__ */ jsx(MapSettingsBox, { developerMode }),
+    /* @__PURE__ */ jsx4(MapBox, { accessToken, options: mapBoxOptions, zoom }),
+    /* @__PURE__ */ jsx4(MapSettingsBox, { developerMode }),
     legend,
     children
   ] });

package/dist/browser/Components/MapBoxHeat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Components/MapBoxHeat.tsx"],"sourcesContent":["import { FlexCol } from '@xylabs/react-flexbox'\n\nimport { MapboxFlexBoxProps } from '../lib'\nimport { MapBox } from './MapBox'\nimport { MapSettingsBox } from './MapSettingsComponents'\n\nexport const MapboxHeatFlexBox: React.FC<MapboxFlexBoxProps> = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <MapBox accessToken={accessToken} options={mapBoxOptions} zoom={zoom} />\n      <MapSettingsBox developerMode={developerMode} />\n      {legend}\n      {children}\n    </FlexCol>\n  )\n}\n"],"mappings":"AAQI,SACE,KADF;AARJ,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,MAAM,oBAAkD,CAAC,EAAE,aAAa,UAAU,eAAe,MAAM,QAAQ,eAAe,GAAG,MAAM,MAAM;AAClJ,SACE,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,UAAO,aAA0B,SAAS,eAAe,MAAY;AAAA,IACtE,oBAAC,kBAAe,eAA8B;AAAA,IAC7C;AAAA,IACA;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/Components/MapBoxHeat.tsx","../../../src/Components/MapBox.tsx","../../../src/hooks/useDynamicMapResize.tsx","../../../src/Contexts/MapBoxInstance/Context.ts","../../../src/Contexts/MapBoxInstance/useMapBoxInstance.tsx","../../../src/Contexts/MapSettings/Context.ts","../../../src/Contexts/MapSettings/useMapSettings.tsx","../../../src/Components/MapSettingsComponents/Setting.tsx","../../../src/Components/MapSettingsComponents/SettingsBox.tsx"],"sourcesContent":["import { FlexCol } from '@xylabs/react-flexbox'\n\nimport { MapboxFlexBoxProps } from '../lib'\nimport { MapBox } from './MapBox'\nimport { MapSettingsBox } from './MapSettingsComponents'\n\nexport const MapboxHeatFlexBox: React.FC<MapboxFlexBoxProps> = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <MapBox accessToken={accessToken} options={mapBoxOptions} zoom={zoom} />\n      <MapSettingsBox developerMode={developerMode} />\n      {legend}\n      {children}\n    </FlexCol>\n  )\n}\n","// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n","import { Map } from 'mapbox-gl'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\n/**\n * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2\n */\nexport const useDynamicMapResize = (\n  mapContainerRef: MutableRefObject<HTMLDivElement | null>,\n  mapCanvasRef: MutableRefObject<HTMLCanvasElement | null>,\n  mapInstance?: Map,\n  active = true,\n) => {\n  const [dependenciesReady, setDependenciesReady] = useState(false)\n\n  const resizer = useMemo(\n    () =>\n      new ResizeObserver(() => {\n        const width = mapContainerRef.current?.getBoundingClientRect().width\n        if (width && mapCanvasRef.current) {\n          mapCanvasRef.current.style.width = `${width}px`\n          // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)\n          // likely because it lets mapbox resize once when the event loop is ready?\n          setTimeout(() => mapInstance?.resize())\n        }\n      }),\n    [mapCanvasRef, mapContainerRef, mapInstance],\n  )\n\n  useEffect(() => {\n    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)\n    setDependenciesReady(dependenciesReady)\n  }, [active, mapCanvasRef, mapContainerRef, mapInstance])\n\n  useEffect(() => {\n    if (dependenciesReady) {\n      if (mapContainerRef.current) {\n        resizer.observe(mapContainerRef.current)\n      }\n\n      return () => {\n        resizer.disconnect()\n      }\n    }\n  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer])\n}\n","import { createContext } from 'react'\n\nimport { MapBoxInstanceState } from './State'\n\nconst MapBoxInstanceContext = createContext<MapBoxInstanceState>({})\n\nexport { MapBoxInstanceContext }\n","import { assertEx } from '@xylabs/assert'\nimport { useContext } from 'react'\n\nimport { MapBoxInstanceContext } from './Context'\n\nconst useMapBoxInstance = () => {\n  const context = useContext(MapBoxInstanceContext)\n  assertEx('map' in context, 'useMapBoxInstance must be used within a MapBoxInstanceContext')\n\n  return context\n}\n\nexport { useMapBoxInstance }\n","import { createContext } from 'react'\n\nimport { MapSettingsState } from './State'\n\nconst MapSettingsContext = createContext<MapSettingsState>({})\n\nexport { MapSettingsContext }\n","import { useContext } from 'react'\n\nimport { MapSettingsContext } from './Context'\n\nconst useMapSettings = () => {\n  const context = useContext(MapSettingsContext)\n\n  return context\n}\n\nexport { useMapSettings }\n","import { FormControlLabel, Switch, SwitchProps } from '@mui/material'\n\nimport { useMapSettings } from '../../Contexts'\n\nexport interface MapSettingSwitchProps extends SwitchProps {\n  developerMode?: boolean\n  field: string\n}\n\nexport const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {\n  const { mapSettings, setMapSettings } = useMapSettings()\n  const setting = mapSettings?.[field]\n\n  const onLocalChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (setting) {\n      setMapSettings?.((previous) => {\n        previous[setting.field].value = event.target.checked\n        return { ...previous }\n      })\n    }\n  }\n\n  if (setting?.devMode && developerMode === false) {\n    return null\n  }\n\n  return setting?.hidden ? null : (\n    <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />\n  )\n}\n","import { Paper, Stack } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useAppSettings } from '@xyo-network/react-app-settings'\n\nimport { useMapSettings } from '../../Contexts'\nimport { MapSettingSwitch } from './Setting'\n\nexport interface MapSettingsBoxProps extends FlexBoxProps {\n  developerMode?: boolean\n}\n\nexport const MapSettingsBox: React.FC<MapSettingsBoxProps> = ({ developerMode, ...props }) => {\n  const { mapSettings } = useMapSettings()\n  const { developerMode: devModeFromContext } = useAppSettings()\n  const resolveDeveloperMode = developerMode ?? devModeFromContext\n\n  return mapSettings && resolveDeveloperMode ? (\n    <FlexGrowRow bottom={36} left={10} position=\"absolute\" {...props}>\n      <FlexRow paddingX={2}>\n        <Paper>\n          <Stack direction=\"row\" spacing={1} marginX={1}>\n            {Object.keys(mapSettings).map((key, index) => {\n              return <MapSettingSwitch key={index} field={mapSettings[key].field} developerMode={developerMode} />\n            })}\n          </Stack>\n        </Paper>\n      </FlexRow>\n    </FlexGrowRow>\n  ) : null\n}\n"],"mappings":"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","names":["useEffect","useState","dependenciesReady","createContext","useContext","useContext","useState","useEffect","map","jsx","jsx","jsx"]}

package/dist/browser/Components/MapBoxPoints.js

@@ -1,12 +1,205 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/Components/MapBoxPoints.tsx
 import { Alert } from "@mui/material";
 import { FlexCol } from "@xylabs/react-flexbox";
-import { useCallback, useEffect, useState } from "react";
-import { useMapBoxInstance, useMapSettings } from "../Contexts";
-import { MapPoints } from "../MapBoxClasses";
-import { MapBox } from "./MapBox";
-import { MapSettingsBox } from "./MapSettingsComponents";
-const MapboxPointsFlexBox = ({
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/hooks/useDynamicMapResize.tsx
+import { useEffect, useMemo, useState } from "react";
+var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
+  const [dependenciesReady, setDependenciesReady] = useState(false);
+  const resizer = useMemo(
+    () => new ResizeObserver(() => {
+      const width = mapContainerRef.current?.getBoundingClientRect().width;
+      if (width && mapCanvasRef.current) {
+        mapCanvasRef.current.style.width = `${width}px`;
+        setTimeout(() => mapInstance?.resize());
+      }
+    }),
+    [mapCanvasRef, mapContainerRef, mapInstance]
+  );
+  useEffect(() => {
+    const dependenciesReady2 = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
+    setDependenciesReady(dependenciesReady2);
+  }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
+  useEffect(() => {
+    if (dependenciesReady) {
+      if (mapContainerRef.current) {
+        resizer.observe(mapContainerRef.current);
+      }
+      return () => {
+        resizer.disconnect();
+      };
+    }
+  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
+};
+
+// src/MapBoxClasses/MapBase.ts
+import { assertEx } from "@xylabs/assert";
+import { GeoJson } from "@xyo-network/sdk-geo";
+var MapBase = class {
+  _config;
+  constructor(config) {
+    this._config = { requestLocation: true, zoom: 2, ...config };
+  }
+  get isMapReady() {
+    return !!this._config.map;
+  }
+  initializeMapSource(layer) {
+    const getSource = () => {
+      const featuresCollection = GeoJson.featureCollection(this._config.features);
+      return GeoJson.featuresSource(featuresCollection);
+    };
+    const existingSource = this._config.map.getSource(layer.source);
+    const source = getSource();
+    if (existingSource) {
+      existingSource.setData(assertEx(source.data));
+    } else {
+      this._config.map.addSource(layer.source, source);
+    }
+    layer.update(this._config.map, true);
+    return this;
+  }
+};
+
+// src/MapBoxClasses/MapPoints.ts
+import { LngLatBounds } from "mapbox-gl";
+var MapPoints = class extends MapBase {
+  config;
+  constructor(config) {
+    super(config);
+    this.config = config;
+  }
+  initialMapPositioning(options, initialBounds) {
+    let bounds;
+    if (initialBounds) {
+      bounds = initialBounds;
+    } else {
+      bounds = new LngLatBounds();
+      this.config.features.forEach((feature) => {
+        bounds.extend(feature.geometry.coordinates);
+      });
+    }
+    this.config.map.setCenter(bounds.getCenter());
+    this.config.map.fitBounds(bounds, options);
+    return this.config.map;
+  }
+};
+
+// src/Contexts/MapBoxInstance/Context.ts
+import { createContext } from "react";
+var MapBoxInstanceContext = createContext({});
+
+// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
+import { assertEx as assertEx2 } from "@xylabs/assert";
+import { useContext } from "react";
+var useMapBoxInstance = () => {
+  const context = useContext(MapBoxInstanceContext);
+  assertEx2("map" in context, "useMapBoxInstance must be used within a MapBoxInstanceContext");
+  return context;
+};
+
+// src/Contexts/MapSettings/Context.ts
+import { createContext as createContext2 } from "react";
+var MapSettingsContext = createContext2({});
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+import { useContext as useContext2 } from "react";
+var useMapSettings = () => {
+  const context = useContext2(MapSettingsContext);
+  return context;
+};
+
+// src/Components/MapBox.tsx
+import "mapbox-gl/dist/mapbox-gl.css";
+import { Map } from "mapbox-gl";
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = useState2();
+  const mapContainerRef = useRef(null);
+  const mapCanvasRef = useRef(null);
+  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
+  const { mapSettings } = useMapSettings();
+  const activeResize = mapSettings?.dynamicMapResize.value;
+  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
+  useEffect2(() => {
+    if (mapSettings?.preferDark?.value === true) {
+      map?.setStyle(`mapbox://styles/${"mapbox/dark-v10" /* Dark */}`);
+    } else {
+      map?.setStyle(`mapbox://styles/${darkMode ? "mapbox/dark-v10" /* Dark */ : "mapbox/light-v10" /* Light */}`);
+    }
+  }, [map, darkMode, mapSettings]);
+  useEffect2(() => {
+    const map2 = new Map({
+      accessToken,
+      center: [0, 0],
+      container: mapContainerRef.current ?? "",
+      style: `mapbox://styles/${"mapbox/light-v10" /* Light */}`,
+      zoom,
+      ...options
+    });
+    setMapBoxInstance?.(map2);
+    setMap(map2);
+    mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
+    console.log("Created Map");
+    return () => {
+      console.log("Removing Map");
+      map2.remove();
+    };
+  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => mapContainerRef.current = el,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
+    }
+  );
+};
+
+// src/Components/MapSettingsComponents/Setting.tsx
+import { FormControlLabel, Switch } from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MapSettingSwitch = ({ developerMode, field, ...props }) => {
+  const { mapSettings, setMapSettings } = useMapSettings();
+  const setting = mapSettings?.[field];
+  const onLocalChange = (event) => {
+    if (setting) {
+      setMapSettings?.((previous) => {
+        previous[setting.field].value = event.target.checked;
+        return { ...previous };
+      });
+    }
+  };
+  if (setting?.devMode && developerMode === false) {
+    return null;
+  }
+  return setting?.hidden ? null : /* @__PURE__ */ jsx2(FormControlLabel, { label: setting?.label, control: /* @__PURE__ */ jsx2(Switch, { checked: setting?.value, onChange: onLocalChange, ...props }) });
+};
+
+// src/Components/MapSettingsComponents/SettingsBox.tsx
+import { Paper, Stack } from "@mui/material";
+import { FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import { useAppSettings } from "@xyo-network/react-app-settings";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MapSettingsBox = ({ developerMode, ...props }) => {
+  const { mapSettings } = useMapSettings();
+  const { developerMode: devModeFromContext } = useAppSettings();
+  const resolveDeveloperMode = developerMode ?? devModeFromContext;
+  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ jsx3(FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ jsx3(FlexRow, { paddingX: 2, children: /* @__PURE__ */ jsx3(Paper, { children: /* @__PURE__ */ jsx3(Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
+    return /* @__PURE__ */ jsx3(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
+  }) }) }) }) }) : null;
+};
+
+// src/Components/MapBoxPoints.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var MapboxPointsFlexBox = ({
   accessToken,
   features,
   fitToPointsPadding = 20,
@@ -14,7 +207,7 @@ const MapboxPointsFlexBox = ({
   zoom,
   ...props
 }) => {
-  const [mapPoints, setMapPoints] = useState();
+  const [mapPoints, setMapPoints] = useState3();
   const { mapSettings } = useMapSettings();
   const { map, mapInitialized } = useMapBoxInstance();
   const customFitToBoundsOptions = (zoom2) => {
@@ -44,21 +237,21 @@ const MapboxPointsFlexBox = ({
     mapPoints?.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) });
     updateFeatures();
   }, [mapPoints, fitToPointsPadding, updateFeatures, zoom]);
-  useEffect(() => {
+  useEffect3(() => {
     if (map && features?.length) {
       setMapPoints(new MapPoints({ features, map, zoom }));
     }
   }, [map, features, zoom]);
-  useEffect(() => {
+  useEffect3(() => {
     if (mapInitialized) {
       updateMapSetup();
       reInitializeMap();
     }
   }, [mapInitialized, reInitializeMap, updateMapSetup]);
-  return /* @__PURE__ */ jsx(FlexCol, { alignItems: "stretch", id: "xyo-mapbox-wrap", ...props, children: features ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(MapBox, { accessToken, zoom }),
-    /* @__PURE__ */ jsx(MapSettingsBox, {})
-  ] }) : /* @__PURE__ */ jsx(Alert, { severity: "error", children: "No data to show" }) });
+  return /* @__PURE__ */ jsx4(FlexCol, { alignItems: "stretch", id: "xyo-mapbox-wrap", ...props, children: features ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx4(MapBox, { accessToken, zoom }),
+    /* @__PURE__ */ jsx4(MapSettingsBox, {})
+  ] }) : /* @__PURE__ */ jsx4(Alert, { severity: "error", children: "No data to show" }) });
 };
 export {
   MapboxPointsFlexBox

package/dist/browser/Components/MapBoxPoints.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Components/MapBoxPoints.tsx"],"sourcesContent":["import { Alert } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { Feature, Point } from 'geojson'\nimport { FitBoundsOptions } from 'mapbox-gl'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { MapboxFlexBoxProps } from '../lib'\nimport { MapPoints } from '../MapBoxClasses'\nimport { MapBox } from './MapBox'\nimport { MapSettingsBox } from './MapSettingsComponents'\n\nexport interface MapboxPointsFlexBoxProps extends MapboxFlexBoxProps {\n  accessToken: string\n  features?: Feature<Point>[]\n}\n\nexport const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({\n  accessToken,\n  features,\n  fitToPointsPadding = 20,\n  layers,\n  zoom,\n  ...props\n}) => {\n  const [mapPoints, setMapPoints] = useState<MapPoints>()\n  const { mapSettings } = useMapSettings()\n  const { map, mapInitialized } = useMapBoxInstance()\n\n  /**\n   * Needed because of a bug in mapbox taking undefined values for the config options of fitToBounds\n   * see - https://github.com/mapbox/mapbox-gl-js/issues/10013\n   */\n  const customFitToBoundsOptions = (zoom?: number): FitBoundsOptions => {\n    if (zoom !== undefined) {\n      return {\n        maxZoom: zoom,\n      }\n    }\n    return {}\n  }\n\n  const updateFeatures = useCallback(() => {\n    if (mapPoints?.isMapReady && features?.length) {\n      layers?.forEach((layer) => {\n        mapPoints.initializeMapSource(layer)\n      })\n    }\n  }, [mapPoints, features, layers])\n\n  const updateMapSetup = useCallback(() => {\n    const { fitToPoints } = mapSettings || {}\n\n    if (mapPoints && map) {\n      if (fitToPoints?.value === true) {\n        mapPoints.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) })\n      }\n    }\n  }, [mapSettings, mapPoints, map, fitToPointsPadding, zoom])\n\n  const reInitializeMap = useCallback(() => {\n    mapPoints?.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) })\n    updateFeatures()\n  }, [mapPoints, fitToPointsPadding, updateFeatures, zoom])\n\n  useEffect(() => {\n    if (map && features?.length) {\n      setMapPoints(new MapPoints({ features, map, zoom }))\n    }\n  }, [map, features, zoom])\n\n  useEffect(() => {\n    if (mapInitialized) {\n      updateMapSetup()\n      reInitializeMap()\n    }\n  }, [mapInitialized, reInitializeMap, updateMapSetup])\n\n  return (\n    <FlexCol alignItems=\"stretch\" id=\"xyo-mapbox-wrap\" {...props}>\n      {features ? (\n        <>\n          <MapBox accessToken={accessToken} zoom={zoom} />\n          <MapSettingsBox />\n        </>\n      ) : (\n        <Alert severity=\"error\">No data to show</Alert>\n      )}\n    </FlexCol>\n  )\n}\n"],"mappings":"AAiFQ,mBACE,KADF;AAjFR,SAAS,aAAa;AACtB,SAAS,eAAe;AAGxB,SAAS,aAAa,WAAW,gBAAgB;AAEjD,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAOxB,MAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB;AACtD,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,KAAK,eAAe,IAAI,kBAAkB;AAMlD,QAAM,2BAA2B,CAACA,UAAoC;AACpE,QAAIA,UAAS,QAAW;AACtB,aAAO;AAAA,QACL,SAASA;AAAA,MACX;AAAA,IACF;AACA,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,WAAW,cAAc,UAAU,QAAQ;AAC7C,cAAQ,QAAQ,CAAC,UAAU;AACzB,kBAAU,oBAAoB,KAAK;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,MAAM,CAAC;AAEhC,QAAM,iBAAiB,YAAY,MAAM;AACvC,UAAM,EAAE,YAAY,IAAI,eAAe,CAAC;AAExC,QAAI,aAAa,KAAK;AACpB,UAAI,aAAa,UAAU,MAAM;AAC/B,kBAAU,sBAAsB,EAAE,SAAS,oBAAoB,GAAG,yBAAyB,IAAI,EAAE,CAAC;AAAA,MACpG;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,KAAK,oBAAoB,IAAI,CAAC;AAE1D,QAAM,kBAAkB,YAAY,MAAM;AACxC,eAAW,sBAAsB,EAAE,SAAS,oBAAoB,GAAG,yBAAyB,IAAI,EAAE,CAAC;AACnG,mBAAe;AAAA,EACjB,GAAG,CAAC,WAAW,oBAAoB,gBAAgB,IAAI,CAAC;AAExD,YAAU,MAAM;AACd,QAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAa,IAAI,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,IAAI,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,qBAAe;AACf,sBAAgB;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,gBAAgB,iBAAiB,cAAc,CAAC;AAEpD,SACE,oBAAC,WAAQ,YAAW,WAAU,IAAG,mBAAmB,GAAG,OACpD,qBACC,iCACE;AAAA,wBAAC,UAAO,aAA0B,MAAY;AAAA,IAC9C,oBAAC,kBAAe;AAAA,KAClB,IAEA,oBAAC,SAAM,UAAS,SAAQ,6BAAe,GAE3C;AAEJ;","names":["zoom"]}
+{"version":3,"sources":["../../../src/Components/MapBoxPoints.tsx","../../../src/hooks/useDynamicMapResize.tsx","../../../src/MapBoxClasses/MapBase.ts","../../../src/MapBoxClasses/MapPoints.ts","../../../src/Contexts/MapBoxInstance/Context.ts","../../../src/Contexts/MapBoxInstance/useMapBoxInstance.tsx","../../../src/Contexts/MapSettings/Context.ts","../../../src/Contexts/MapSettings/useMapSettings.tsx","../../../src/Components/MapBox.tsx","../../../src/Components/MapSettingsComponents/Setting.tsx","../../../src/Components/MapSettingsComponents/SettingsBox.tsx"],"sourcesContent":["import { Alert } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { Feature, Point } from 'geojson'\nimport { FitBoundsOptions } from 'mapbox-gl'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { MapboxFlexBoxProps } from '../lib'\nimport { MapPoints } from '../MapBoxClasses'\nimport { MapBox } from './MapBox'\nimport { MapSettingsBox } from './MapSettingsComponents'\n\nexport interface MapboxPointsFlexBoxProps extends MapboxFlexBoxProps {\n  accessToken: string\n  features?: Feature<Point>[]\n}\n\nexport const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({\n  accessToken,\n  features,\n  fitToPointsPadding = 20,\n  layers,\n  zoom,\n  ...props\n}) => {\n  const [mapPoints, setMapPoints] = useState<MapPoints>()\n  const { mapSettings } = useMapSettings()\n  const { map, mapInitialized } = useMapBoxInstance()\n\n  /**\n   * Needed because of a bug in mapbox taking undefined values for the config options of fitToBounds\n   * see - https://github.com/mapbox/mapbox-gl-js/issues/10013\n   */\n  const customFitToBoundsOptions = (zoom?: number): FitBoundsOptions => {\n    if (zoom !== undefined) {\n      return {\n        maxZoom: zoom,\n      }\n    }\n    return {}\n  }\n\n  const updateFeatures = useCallback(() => {\n    if (mapPoints?.isMapReady && features?.length) {\n      layers?.forEach((layer) => {\n        mapPoints.initializeMapSource(layer)\n      })\n    }\n  }, [mapPoints, features, layers])\n\n  const updateMapSetup = useCallback(() => {\n    const { fitToPoints } = mapSettings || {}\n\n    if (mapPoints && map) {\n      if (fitToPoints?.value === true) {\n        mapPoints.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) })\n      }\n    }\n  }, [mapSettings, mapPoints, map, fitToPointsPadding, zoom])\n\n  const reInitializeMap = useCallback(() => {\n    mapPoints?.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) })\n    updateFeatures()\n  }, [mapPoints, fitToPointsPadding, updateFeatures, zoom])\n\n  useEffect(() => {\n    if (map && features?.length) {\n      setMapPoints(new MapPoints({ features, map, zoom }))\n    }\n  }, [map, features, zoom])\n\n  useEffect(() => {\n    if (mapInitialized) {\n      updateMapSetup()\n      reInitializeMap()\n    }\n  }, [mapInitialized, reInitializeMap, updateMapSetup])\n\n  return (\n    <FlexCol alignItems=\"stretch\" id=\"xyo-mapbox-wrap\" {...props}>\n      {features ? (\n        <>\n          <MapBox accessToken={accessToken} zoom={zoom} />\n          <MapSettingsBox />\n        </>\n      ) : (\n        <Alert severity=\"error\">No data to show</Alert>\n      )}\n    </FlexCol>\n  )\n}\n","import { Map } from 'mapbox-gl'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\n/**\n * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2\n */\nexport const useDynamicMapResize = (\n  mapContainerRef: MutableRefObject<HTMLDivElement | null>,\n  mapCanvasRef: MutableRefObject<HTMLCanvasElement | null>,\n  mapInstance?: Map,\n  active = true,\n) => {\n  const [dependenciesReady, setDependenciesReady] = useState(false)\n\n  const resizer = useMemo(\n    () =>\n      new ResizeObserver(() => {\n        const width = mapContainerRef.current?.getBoundingClientRect().width\n        if (width && mapCanvasRef.current) {\n          mapCanvasRef.current.style.width = `${width}px`\n          // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)\n          // likely because it lets mapbox resize once when the event loop is ready?\n          setTimeout(() => mapInstance?.resize())\n        }\n      }),\n    [mapCanvasRef, mapContainerRef, mapInstance],\n  )\n\n  useEffect(() => {\n    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)\n    setDependenciesReady(dependenciesReady)\n  }, [active, mapCanvasRef, mapContainerRef, mapInstance])\n\n  useEffect(() => {\n    if (dependenciesReady) {\n      if (mapContainerRef.current) {\n        resizer.observe(mapContainerRef.current)\n      }\n\n      return () => {\n        resizer.disconnect()\n      }\n    }\n  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer])\n}\n","import { assertEx } from '@xylabs/assert'\nimport { GeoJson } from '@xyo-network/sdk-geo'\nimport { Feature, Geometry } from 'geojson'\n// eslint-disable-next-line no-restricted-imports\nimport { GeoJSONSource, Map } from 'mapbox-gl'\n\nimport { MapLayer } from '../Layers'\n\nexport interface MapBaseConfig<T extends Geometry> {\n  features: Feature<T>[]\n  map: Map\n  requestLocation?: boolean\n  zoom?: number\n}\n\nexport abstract class MapBase<T extends Geometry> {\n  private _config: MapBaseConfig<T>\n\n  constructor(config: MapBaseConfig<T>) {\n    this._config = { requestLocation: true, zoom: 2, ...config }\n  }\n\n  get isMapReady() {\n    return !!this._config.map\n  }\n\n  initializeMapSource(layer: MapLayer) {\n    const getSource = () => {\n      const featuresCollection = GeoJson.featureCollection(this._config.features)\n      return GeoJson.featuresSource(featuresCollection)\n    }\n\n    const existingSource = this._config.map.getSource(layer.source as string) as GeoJSONSource\n    const source = getSource()\n    if (existingSource) {\n      existingSource.setData(assertEx(source.data as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>))\n    } else {\n      this._config.map.addSource(layer.source as string, source)\n    }\n    layer.update(this._config.map, true)\n\n    return this\n  }\n}\n","import { Feature, Point } from 'geojson'\n// eslint-disable-next-line no-restricted-imports\nimport { FitBoundsOptions, LngLatBounds } from 'mapbox-gl'\n\nimport { MapBase, MapBaseConfig } from './MapBase'\n\nexport interface MapPointsConfig extends MapBaseConfig<Point> {\n  features: Feature<Point>[]\n}\n\nexport class MapPoints extends MapBase<Point> {\n  private config: MapPointsConfig\n\n  constructor(config: MapPointsConfig) {\n    super(config)\n    this.config = config\n  }\n\n  initialMapPositioning(options: FitBoundsOptions, initialBounds?: LngLatBounds) {\n    let bounds: LngLatBounds\n\n    if (initialBounds) {\n      bounds = initialBounds\n    } else {\n      bounds = new LngLatBounds()\n\n      this.config.features.forEach((feature: Feature<Point>) => {\n        bounds.extend(feature.geometry.coordinates as [number, number])\n      })\n    }\n\n    this.config.map.setCenter(bounds.getCenter())\n    this.config.map.fitBounds(bounds, options)\n\n    return this.config.map\n  }\n}\n","import { createContext } from 'react'\n\nimport { MapBoxInstanceState } from './State'\n\nconst MapBoxInstanceContext = createContext<MapBoxInstanceState>({})\n\nexport { MapBoxInstanceContext }\n","import { assertEx } from '@xylabs/assert'\nimport { useContext } from 'react'\n\nimport { MapBoxInstanceContext } from './Context'\n\nconst useMapBoxInstance = () => {\n  const context = useContext(MapBoxInstanceContext)\n  assertEx('map' in context, 'useMapBoxInstance must be used within a MapBoxInstanceContext')\n\n  return context\n}\n\nexport { useMapBoxInstance }\n","import { createContext } from 'react'\n\nimport { MapSettingsState } from './State'\n\nconst MapSettingsContext = createContext<MapSettingsState>({})\n\nexport { MapSettingsContext }\n","import { useContext } from 'react'\n\nimport { MapSettingsContext } from './Context'\n\nconst useMapSettings = () => {\n  const context = useContext(MapSettingsContext)\n\n  return context\n}\n\nexport { useMapSettings }\n","// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n","import { FormControlLabel, Switch, SwitchProps } from '@mui/material'\n\nimport { useMapSettings } from '../../Contexts'\n\nexport interface MapSettingSwitchProps extends SwitchProps {\n  developerMode?: boolean\n  field: string\n}\n\nexport const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {\n  const { mapSettings, setMapSettings } = useMapSettings()\n  const setting = mapSettings?.[field]\n\n  const onLocalChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (setting) {\n      setMapSettings?.((previous) => {\n        previous[setting.field].value = event.target.checked\n        return { ...previous }\n      })\n    }\n  }\n\n  if (setting?.devMode && developerMode === false) {\n    return null\n  }\n\n  return setting?.hidden ? null : (\n    <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />\n  )\n}\n","import { Paper, Stack } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useAppSettings } from '@xyo-network/react-app-settings'\n\nimport { useMapSettings } from '../../Contexts'\nimport { MapSettingSwitch } from './Setting'\n\nexport interface MapSettingsBoxProps extends FlexBoxProps {\n  developerMode?: boolean\n}\n\nexport const MapSettingsBox: React.FC<MapSettingsBoxProps> = ({ developerMode, ...props }) => {\n  const { mapSettings } = useMapSettings()\n  const { developerMode: devModeFromContext } = useAppSettings()\n  const resolveDeveloperMode = developerMode ?? devModeFromContext\n\n  return mapSettings && resolveDeveloperMode ? (\n    <FlexGrowRow bottom={36} left={10} position=\"absolute\" {...props}>\n      <FlexRow paddingX={2}>\n        <Paper>\n          <Stack direction=\"row\" spacing={1} marginX={1}>\n            {Object.keys(mapSettings).map((key, index) => {\n              return <MapSettingSwitch key={index} field={mapSettings[key].field} developerMode={developerMode} />\n            })}\n          </Stack>\n        </Paper>\n      </FlexRow>\n    </FlexGrowRow>\n  ) : null\n}\n"],"mappings":";AAAA,SAAS,aAAa;AACtB,SAAS,eAAe;AAGxB,SAAS,aAAa,aAAAA,YAAW,YAAAC,iBAAgB;;;ACHjD,SAA2B,WAAW,SAAS,gBAAgB;AAKxD,IAAM,sBAAsB,CACjC,iBACA,cACA,aACA,SAAS,SACN;AACH,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAEhE,QAAM,UAAU;AAAA,IACd,MACE,IAAI,eAAe,MAAM;AACvB,YAAM,QAAQ,gBAAgB,SAAS,sBAAsB,EAAE;AAC/D,UAAI,SAAS,aAAa,SAAS;AACjC,qBAAa,QAAQ,MAAM,QAAQ,GAAG,KAAK;AAG3C,mBAAW,MAAM,aAAa,OAAO,CAAC;AAAA,MACxC;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,iBAAiB,WAAW;AAAA,EAC7C;AAEA,YAAU,MAAM;AACd,UAAMC,qBAAoB,CAAC,EAAE,UAAU,eAAe,iBAAiB,WAAW,aAAa;AAC/F,yBAAqBA,kBAAiB;AAAA,EACxC,GAAG,CAAC,QAAQ,cAAc,iBAAiB,WAAW,CAAC;AAEvD,YAAU,MAAM;AACd,QAAI,mBAAmB;AACrB,UAAI,gBAAgB,SAAS;AAC3B,gBAAQ,QAAQ,gBAAgB,OAAO;AAAA,MACzC;AAEA,aAAO,MAAM;AACX,gBAAQ,WAAW;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,mBAAmB,cAAc,iBAAiB,aAAa,OAAO,CAAC;AACrF;;;AC5CA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAcjB,IAAe,UAAf,MAA2C;AAAA,EACxC;AAAA,EAER,YAAY,QAA0B;AACpC,SAAK,UAAU,EAAE,iBAAiB,MAAM,MAAM,GAAG,GAAG,OAAO;AAAA,EAC7D;AAAA,EAEA,IAAI,aAAa;AACf,WAAO,CAAC,CAAC,KAAK,QAAQ;AAAA,EACxB;AAAA,EAEA,oBAAoB,OAAiB;AACnC,UAAM,YAAY,MAAM;AACtB,YAAM,qBAAqB,QAAQ,kBAAkB,KAAK,QAAQ,QAAQ;AAC1E,aAAO,QAAQ,eAAe,kBAAkB;AAAA,IAClD;AAEA,UAAM,iBAAiB,KAAK,QAAQ,IAAI,UAAU,MAAM,MAAgB;AACxE,UAAM,SAAS,UAAU;AACzB,QAAI,gBAAgB;AAClB,qBAAe,QAAQ,SAAS,OAAO,IAAuF,CAAC;AAAA,IACjI,OAAO;AACL,WAAK,QAAQ,IAAI,UAAU,MAAM,QAAkB,MAAM;AAAA,IAC3D;AACA,UAAM,OAAO,KAAK,QAAQ,KAAK,IAAI;AAEnC,WAAO;AAAA,EACT;AACF;;;ACzCA,SAA2B,oBAAoB;AAQxC,IAAM,YAAN,cAAwB,QAAe;AAAA,EACpC;AAAA,EAER,YAAY,QAAyB;AACnC,UAAM,MAAM;AACZ,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,sBAAsB,SAA2B,eAA8B;AAC7E,QAAI;AAEJ,QAAI,eAAe;AACjB,eAAS;AAAA,IACX,OAAO;AACL,eAAS,IAAI,aAAa;AAE1B,WAAK,OAAO,SAAS,QAAQ,CAAC,YAA4B;AACxD,eAAO,OAAO,QAAQ,SAAS,WAA+B;AAAA,MAChE,CAAC;AAAA,IACH;AAEA,SAAK,OAAO,IAAI,UAAU,OAAO,UAAU,CAAC;AAC5C,SAAK,OAAO,IAAI,UAAU,QAAQ,OAAO;AAEzC,WAAO,KAAK,OAAO;AAAA,EACrB;AACF;;;ACpCA,SAAS,qBAAqB;AAI9B,IAAM,wBAAwB,cAAmC,CAAC,CAAC;;;ACJnE,SAAS,YAAAC,iBAAgB;AACzB,SAAS,kBAAkB;AAI3B,IAAM,oBAAoB,MAAM;AAC9B,QAAM,UAAU,WAAW,qBAAqB;AAChD,EAAAC,UAAS,SAAS,SAAS,+DAA+D;AAE1F,SAAO;AACT;;;ACVA,SAAS,iBAAAC,sBAAqB;AAI9B,IAAM,qBAAqBA,eAAgC,CAAC,CAAC;;;ACJ7D,SAAS,cAAAC,mBAAkB;AAI3B,IAAM,iBAAiB,MAAM;AAC3B,QAAM,UAAUC,YAAW,kBAAkB;AAE7C,SAAO;AACT;;;ACPA,OAAO;AAEP,SAAS,WAA0B;AACnC,SAAS,aAAAC,YAAW,QAAQ,YAAAC,iBAAgB;AAyDxC;AA5CG,IAAM,SAAgC,CAAC,EAAE,aAAa,WAAW,OAAO,SAAS,OAAO,GAAG,GAAG,MAAM,MAAM;AAC/G,QAAM,CAAC,KAAK,MAAM,IAAIC,UAAc;AACpC,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAiC,IAAI;AAC1D,QAAM,EAAE,mBAAmB,KAAK,YAAY,IAAI,kBAAkB;AAClE,QAAM,EAAE,YAAY,IAAI,eAAe;AAEvC,QAAM,eAAe,aAAa,iBAAiB;AACnD,sBAAoB,iBAAiB,cAAc,aAAa,YAAY;AAE5E,EAAAC,WAAU,MAAM;AACd,QAAI,aAAa,YAAY,UAAU,MAAM;AAC3C,WAAK,SAAS,+CAAgC,EAAE;AAAA,IAClD,OAAO;AACL,WAAK,SAAS,mBAAmB,wEAAyC,EAAE;AAAA,IAC9E;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,WAAW,CAAC;AAE/B,EAAAA,WAAU,MAAM;AACd,UAAMC,OAAM,IAAI,IAAI;AAAA,MAClB;AAAA,MACA,QAAQ,CAAC,GAAG,CAAC;AAAA,MACb,WAAW,gBAAgB,WAAW;AAAA,MACtC,OAAO,iDAAiC;AAAA,MACxC;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAGD,wBAAoBA,IAAG;AACvB,WAAOA,IAAG;AAGV,iBAAa,UAAU,SAAS,cAAc,kBAAkB;AAEhE,YAAQ,IAAI,aAAa;AAEzB,WAAO,MAAM;AACX,cAAQ,IAAI,cAAc;AAC1B,MAAAA,KAAI,OAAO;AAAA,IACb;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,SAAS,MAAM,mBAAmB,WAAW,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,CAAC,OAAQ,gBAAgB,UAAU;AAAA,MACxC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,GAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;;;ACzEA,SAAS,kBAAkB,cAA2B;AA2BA,gBAAAC,YAAA;AAlB/C,IAAM,mBAAoD,CAAC,EAAE,eAAe,OAAO,GAAG,MAAM,MAAM;AACvG,QAAM,EAAE,aAAa,eAAe,IAAI,eAAe;AACvD,QAAM,UAAU,cAAc,KAAK;AAEnC,QAAM,gBAAgB,CAAC,UAA+C;AACpE,QAAI,SAAS;AACX,uBAAiB,CAAC,aAAa;AAC7B,iBAAS,QAAQ,KAAK,EAAE,QAAQ,MAAM,OAAO;AAC7C,eAAO,EAAE,GAAG,SAAS;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,SAAS,WAAW,kBAAkB,OAAO;AAC/C,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,SAAS,OACvB,gBAAAA,KAAC,oBAAiB,OAAO,SAAS,OAAO,SAAS,gBAAAA,KAAC,UAAO,SAAS,SAAS,OAAO,UAAU,eAAgB,GAAG,OAAO,GAAI;AAE/H;;;AC7BA,SAAS,OAAO,aAAa;AAC7B,SAAuB,aAAa,eAAe;AACnD,SAAS,sBAAsB;AAoBV,gBAAAC,YAAA;AAXd,IAAM,iBAAgD,CAAC,EAAE,eAAe,GAAG,MAAM,MAAM;AAC5F,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,eAAe,mBAAmB,IAAI,eAAe;AAC7D,QAAM,uBAAuB,iBAAiB;AAE9C,SAAO,eAAe,uBACpB,gBAAAA,KAAC,eAAY,QAAQ,IAAI,MAAM,IAAI,UAAS,YAAY,GAAG,OACzD,0BAAAA,KAAC,WAAQ,UAAU,GACjB,0BAAAA,KAAC,SACC,0BAAAA,KAAC,SAAM,WAAU,OAAM,SAAS,GAAG,SAAS,GACzC,iBAAO,KAAK,WAAW,EAAE,IAAI,CAAC,KAAK,UAAU;AAC5C,WAAO,gBAAAA,KAAC,oBAA6B,OAAO,YAAY,GAAG,EAAE,OAAO,iBAAtC,KAAoE;AAAA,EACpG,CAAC,GACH,GACF,GACF,GACF,IACE;AACN;;;AVoDQ,mBACE,OAAAC,MADF;AAhED,IAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAIC,UAAoB;AACtD,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,KAAK,eAAe,IAAI,kBAAkB;AAMlD,QAAM,2BAA2B,CAACC,UAAoC;AACpE,QAAIA,UAAS,QAAW;AACtB,aAAO;AAAA,QACL,SAASA;AAAA,MACX;AAAA,IACF;AACA,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,WAAW,cAAc,UAAU,QAAQ;AAC7C,cAAQ,QAAQ,CAAC,UAAU;AACzB,kBAAU,oBAAoB,KAAK;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,MAAM,CAAC;AAEhC,QAAM,iBAAiB,YAAY,MAAM;AACvC,UAAM,EAAE,YAAY,IAAI,eAAe,CAAC;AAExC,QAAI,aAAa,KAAK;AACpB,UAAI,aAAa,UAAU,MAAM;AAC/B,kBAAU,sBAAsB,EAAE,SAAS,oBAAoB,GAAG,yBAAyB,IAAI,EAAE,CAAC;AAAA,MACpG;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,KAAK,oBAAoB,IAAI,CAAC;AAE1D,QAAM,kBAAkB,YAAY,MAAM;AACxC,eAAW,sBAAsB,EAAE,SAAS,oBAAoB,GAAG,yBAAyB,IAAI,EAAE,CAAC;AACnG,mBAAe;AAAA,EACjB,GAAG,CAAC,WAAW,oBAAoB,gBAAgB,IAAI,CAAC;AAExD,EAAAC,WAAU,MAAM;AACd,QAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAa,IAAI,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,IAAI,CAAC;AAExB,EAAAA,WAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,qBAAe;AACf,sBAAgB;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,gBAAgB,iBAAiB,cAAc,CAAC;AAEpD,SACE,gBAAAH,KAAC,WAAQ,YAAW,WAAU,IAAG,mBAAmB,GAAG,OACpD,qBACC,iCACE;AAAA,oBAAAA,KAAC,UAAO,aAA0B,MAAY;AAAA,IAC9C,gBAAAA,KAAC,kBAAe;AAAA,KAClB,IAEA,gBAAAA,KAAC,SAAM,UAAS,SAAQ,6BAAe,GAE3C;AAEJ;","names":["useEffect","useState","dependenciesReady","assertEx","assertEx","createContext","useContext","useContext","useEffect","useState","useState","useEffect","map","jsx","jsx","jsx","useState","zoom","useEffect"]}

package/dist/browser/Components/MapSettingsComponents/Setting.js

@@ -1,7 +1,20 @@
-import { jsx } from "react/jsx-runtime";
+// src/Components/MapSettingsComponents/Setting.tsx
 import { FormControlLabel, Switch } from "@mui/material";
-import { useMapSettings } from "../../Contexts";
-const MapSettingSwitch = ({ developerMode, field, ...props }) => {
+
+// src/Contexts/MapSettings/Context.ts
+import { createContext } from "react";
+var MapSettingsContext = createContext({});
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+import { useContext } from "react";
+var useMapSettings = () => {
+  const context = useContext(MapSettingsContext);
+  return context;
+};
+
+// src/Components/MapSettingsComponents/Setting.tsx
+import { jsx } from "react/jsx-runtime";
+var MapSettingSwitch = ({ developerMode, field, ...props }) => {
   const { mapSettings, setMapSettings } = useMapSettings();
   const setting = mapSettings?.[field];
   const onLocalChange = (event) => {

package/dist/browser/Components/MapSettingsComponents/Setting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Components/MapSettingsComponents/Setting.tsx"],"sourcesContent":["import { FormControlLabel, Switch, SwitchProps } from '@mui/material'\n\nimport { useMapSettings } from '../../Contexts'\n\nexport interface MapSettingSwitchProps extends SwitchProps {\n  developerMode?: boolean\n  field: string\n}\n\nexport const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {\n  const { mapSettings, setMapSettings } = useMapSettings()\n  const setting = mapSettings?.[field]\n\n  const onLocalChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (setting) {\n      setMapSettings?.((previous) => {\n        previous[setting.field].value = event.target.checked\n        return { ...previous }\n      })\n    }\n  }\n\n  if (setting?.devMode && developerMode === false) {\n    return null\n  }\n\n  return setting?.hidden ? null : (\n    <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />\n  )\n}\n"],"mappings":"AA2BsD;AA3BtD,SAAS,kBAAkB,cAA2B;AAEtD,SAAS,sBAAsB;AAOxB,MAAM,mBAAoD,CAAC,EAAE,eAAe,OAAO,GAAG,MAAM,MAAM;AACvG,QAAM,EAAE,aAAa,eAAe,IAAI,eAAe;AACvD,QAAM,UAAU,cAAc,KAAK;AAEnC,QAAM,gBAAgB,CAAC,UAA+C;AACpE,QAAI,SAAS;AACX,uBAAiB,CAAC,aAAa;AAC7B,iBAAS,QAAQ,KAAK,EAAE,QAAQ,MAAM,OAAO;AAC7C,eAAO,EAAE,GAAG,SAAS;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,SAAS,WAAW,kBAAkB,OAAO;AAC/C,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,SAAS,OACvB,oBAAC,oBAAiB,OAAO,SAAS,OAAO,SAAS,oBAAC,UAAO,SAAS,SAAS,OAAO,UAAU,eAAgB,GAAG,OAAO,GAAI;AAE/H;","names":[]}
+{"version":3,"sources":["../../../../src/Components/MapSettingsComponents/Setting.tsx","../../../../src/Contexts/MapSettings/Context.ts","../../../../src/Contexts/MapSettings/useMapSettings.tsx"],"sourcesContent":["import { FormControlLabel, Switch, SwitchProps } from '@mui/material'\n\nimport { useMapSettings } from '../../Contexts'\n\nexport interface MapSettingSwitchProps extends SwitchProps {\n  developerMode?: boolean\n  field: string\n}\n\nexport const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {\n  const { mapSettings, setMapSettings } = useMapSettings()\n  const setting = mapSettings?.[field]\n\n  const onLocalChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (setting) {\n      setMapSettings?.((previous) => {\n        previous[setting.field].value = event.target.checked\n        return { ...previous }\n      })\n    }\n  }\n\n  if (setting?.devMode && developerMode === false) {\n    return null\n  }\n\n  return setting?.hidden ? null : (\n    <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />\n  )\n}\n","import { createContext } from 'react'\n\nimport { MapSettingsState } from './State'\n\nconst MapSettingsContext = createContext<MapSettingsState>({})\n\nexport { MapSettingsContext }\n","import { useContext } from 'react'\n\nimport { MapSettingsContext } from './Context'\n\nconst useMapSettings = () => {\n  const context = useContext(MapSettingsContext)\n\n  return context\n}\n\nexport { useMapSettings }\n"],"mappings":";AAAA,SAAS,kBAAkB,cAA2B;;;ACAtD,SAAS,qBAAqB;AAI9B,IAAM,qBAAqB,cAAgC,CAAC,CAAC;;;ACJ7D,SAAS,kBAAkB;AAI3B,IAAM,iBAAiB,MAAM;AAC3B,QAAM,UAAU,WAAW,kBAAkB;AAE7C,SAAO;AACT;;;AFmBsD;AAlB/C,IAAM,mBAAoD,CAAC,EAAE,eAAe,OAAO,GAAG,MAAM,MAAM;AACvG,QAAM,EAAE,aAAa,eAAe,IAAI,eAAe;AACvD,QAAM,UAAU,cAAc,KAAK;AAEnC,QAAM,gBAAgB,CAAC,UAA+C;AACpE,QAAI,SAAS;AACX,uBAAiB,CAAC,aAAa;AAC7B,iBAAS,QAAQ,KAAK,EAAE,QAAQ,MAAM,OAAO;AAC7C,eAAO,EAAE,GAAG,SAAS;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,SAAS,WAAW,kBAAkB,OAAO;AAC/C,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,SAAS,OACvB,oBAAC,oBAAiB,OAAO,SAAS,OAAO,SAAS,oBAAC,UAAO,SAAS,SAAS,OAAO,UAAU,eAAgB,GAAG,OAAO,GAAI;AAE/H;","names":[]}

package/dist/browser/Components/MapSettingsComponents/SettingsBox.js

@@ -1,15 +1,47 @@
-import { jsx } from "react/jsx-runtime";
+// src/Components/MapSettingsComponents/SettingsBox.tsx
 import { Paper, Stack } from "@mui/material";
 import { FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
 import { useAppSettings } from "@xyo-network/react-app-settings";
-import { useMapSettings } from "../../Contexts";
-import { MapSettingSwitch } from "./Setting";
-const MapSettingsBox = ({ developerMode, ...props }) => {
+
+// src/Contexts/MapSettings/Context.ts
+import { createContext } from "react";
+var MapSettingsContext = createContext({});
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+import { useContext } from "react";
+var useMapSettings = () => {
+  const context = useContext(MapSettingsContext);
+  return context;
+};
+
+// src/Components/MapSettingsComponents/Setting.tsx
+import { FormControlLabel, Switch } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var MapSettingSwitch = ({ developerMode, field, ...props }) => {
+  const { mapSettings, setMapSettings } = useMapSettings();
+  const setting = mapSettings?.[field];
+  const onLocalChange = (event) => {
+    if (setting) {
+      setMapSettings?.((previous) => {
+        previous[setting.field].value = event.target.checked;
+        return { ...previous };
+      });
+    }
+  };
+  if (setting?.devMode && developerMode === false) {
+    return null;
+  }
+  return setting?.hidden ? null : /* @__PURE__ */ jsx(FormControlLabel, { label: setting?.label, control: /* @__PURE__ */ jsx(Switch, { checked: setting?.value, onChange: onLocalChange, ...props }) });
+};
+
+// src/Components/MapSettingsComponents/SettingsBox.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MapSettingsBox = ({ developerMode, ...props }) => {
   const { mapSettings } = useMapSettings();
   const { developerMode: devModeFromContext } = useAppSettings();
   const resolveDeveloperMode = developerMode ?? devModeFromContext;
-  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ jsx(FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ jsx(FlexRow, { paddingX: 2, children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
-    return /* @__PURE__ */ jsx(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
+  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ jsx2(FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ jsx2(FlexRow, { paddingX: 2, children: /* @__PURE__ */ jsx2(Paper, { children: /* @__PURE__ */ jsx2(Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
+    return /* @__PURE__ */ jsx2(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
   }) }) }) }) }) : null;
 };
 export {

package/dist/browser/Components/MapSettingsComponents/SettingsBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Components/MapSettingsComponents/SettingsBox.tsx"],"sourcesContent":["import { Paper, Stack } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useAppSettings } from '@xyo-network/react-app-settings'\n\nimport { useMapSettings } from '../../Contexts'\nimport { MapSettingSwitch } from './Setting'\n\nexport interface MapSettingsBoxProps extends FlexBoxProps {\n  developerMode?: boolean\n}\n\nexport const MapSettingsBox: React.FC<MapSettingsBoxProps> = ({ developerMode, ...props }) => {\n  const { mapSettings } = useMapSettings()\n  const { developerMode: devModeFromContext } = useAppSettings()\n  const resolveDeveloperMode = developerMode ?? devModeFromContext\n\n  return mapSettings && resolveDeveloperMode ? (\n    <FlexGrowRow bottom={36} left={10} position=\"absolute\" {...props}>\n      <FlexRow paddingX={2}>\n        <Paper>\n          <Stack direction=\"row\" spacing={1} marginX={1}>\n            {Object.keys(mapSettings).map((key, index) => {\n              return <MapSettingSwitch key={index} field={mapSettings[key].field} developerMode={developerMode} />\n            })}\n          </Stack>\n        </Paper>\n      </FlexRow>\n    </FlexGrowRow>\n  ) : null\n}\n"],"mappings":"AAsBqB;AAtBrB,SAAS,OAAO,aAAa;AAC7B,SAAuB,aAAa,eAAe;AACnD,SAAS,sBAAsB;AAE/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAM1B,MAAM,iBAAgD,CAAC,EAAE,eAAe,GAAG,MAAM,MAAM;AAC5F,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,eAAe,mBAAmB,IAAI,eAAe;AAC7D,QAAM,uBAAuB,iBAAiB;AAE9C,SAAO,eAAe,uBACpB,oBAAC,eAAY,QAAQ,IAAI,MAAM,IAAI,UAAS,YAAY,GAAG,OACzD,8BAAC,WAAQ,UAAU,GACjB,8BAAC,SACC,8BAAC,SAAM,WAAU,OAAM,SAAS,GAAG,SAAS,GACzC,iBAAO,KAAK,WAAW,EAAE,IAAI,CAAC,KAAK,UAAU;AAC5C,WAAO,oBAAC,oBAA6B,OAAO,YAAY,GAAG,EAAE,OAAO,iBAAtC,KAAoE;AAAA,EACpG,CAAC,GACH,GACF,GACF,GACF,IACE;AACN;","names":[]}
+{"version":3,"sources":["../../../../src/Components/MapSettingsComponents/SettingsBox.tsx","../../../../src/Contexts/MapSettings/Context.ts","../../../../src/Contexts/MapSettings/useMapSettings.tsx","../../../../src/Components/MapSettingsComponents/Setting.tsx"],"sourcesContent":["import { Paper, Stack } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useAppSettings } from '@xyo-network/react-app-settings'\n\nimport { useMapSettings } from '../../Contexts'\nimport { MapSettingSwitch } from './Setting'\n\nexport interface MapSettingsBoxProps extends FlexBoxProps {\n  developerMode?: boolean\n}\n\nexport const MapSettingsBox: React.FC<MapSettingsBoxProps> = ({ developerMode, ...props }) => {\n  const { mapSettings } = useMapSettings()\n  const { developerMode: devModeFromContext } = useAppSettings()\n  const resolveDeveloperMode = developerMode ?? devModeFromContext\n\n  return mapSettings && resolveDeveloperMode ? (\n    <FlexGrowRow bottom={36} left={10} position=\"absolute\" {...props}>\n      <FlexRow paddingX={2}>\n        <Paper>\n          <Stack direction=\"row\" spacing={1} marginX={1}>\n            {Object.keys(mapSettings).map((key, index) => {\n              return <MapSettingSwitch key={index} field={mapSettings[key].field} developerMode={developerMode} />\n            })}\n          </Stack>\n        </Paper>\n      </FlexRow>\n    </FlexGrowRow>\n  ) : null\n}\n","import { createContext } from 'react'\n\nimport { MapSettingsState } from './State'\n\nconst MapSettingsContext = createContext<MapSettingsState>({})\n\nexport { MapSettingsContext }\n","import { useContext } from 'react'\n\nimport { MapSettingsContext } from './Context'\n\nconst useMapSettings = () => {\n  const context = useContext(MapSettingsContext)\n\n  return context\n}\n\nexport { useMapSettings }\n","import { FormControlLabel, Switch, SwitchProps } from '@mui/material'\n\nimport { useMapSettings } from '../../Contexts'\n\nexport interface MapSettingSwitchProps extends SwitchProps {\n  developerMode?: boolean\n  field: string\n}\n\nexport const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {\n  const { mapSettings, setMapSettings } = useMapSettings()\n  const setting = mapSettings?.[field]\n\n  const onLocalChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (setting) {\n      setMapSettings?.((previous) => {\n        previous[setting.field].value = event.target.checked\n        return { ...previous }\n      })\n    }\n  }\n\n  if (setting?.devMode && developerMode === false) {\n    return null\n  }\n\n  return setting?.hidden ? null : (\n    <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />\n  )\n}\n"],"mappings":";AAAA,SAAS,OAAO,aAAa;AAC7B,SAAuB,aAAa,eAAe;AACnD,SAAS,sBAAsB;;;ACF/B,SAAS,qBAAqB;AAI9B,IAAM,qBAAqB,cAAgC,CAAC,CAAC;;;ACJ7D,SAAS,kBAAkB;AAI3B,IAAM,iBAAiB,MAAM;AAC3B,QAAM,UAAU,WAAW,kBAAkB;AAE7C,SAAO;AACT;;;ACRA,SAAS,kBAAkB,cAA2B;AA2BA;AAlB/C,IAAM,mBAAoD,CAAC,EAAE,eAAe,OAAO,GAAG,MAAM,MAAM;AACvG,QAAM,EAAE,aAAa,eAAe,IAAI,eAAe;AACvD,QAAM,UAAU,cAAc,KAAK;AAEnC,QAAM,gBAAgB,CAAC,UAA+C;AACpE,QAAI,SAAS;AACX,uBAAiB,CAAC,aAAa;AAC7B,iBAAS,QAAQ,KAAK,EAAE,QAAQ,MAAM,OAAO;AAC7C,eAAO,EAAE,GAAG,SAAS;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,SAAS,WAAW,kBAAkB,OAAO;AAC/C,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,SAAS,OACvB,oBAAC,oBAAiB,OAAO,SAAS,OAAO,SAAS,oBAAC,UAAO,SAAS,SAAS,OAAO,UAAU,eAAgB,GAAG,OAAO,GAAI;AAE/H;;;AHPqB,gBAAAA,YAAA;AAXd,IAAM,iBAAgD,CAAC,EAAE,eAAe,GAAG,MAAM,MAAM;AAC5F,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,eAAe,mBAAmB,IAAI,eAAe;AAC7D,QAAM,uBAAuB,iBAAiB;AAE9C,SAAO,eAAe,uBACpB,gBAAAA,KAAC,eAAY,QAAQ,IAAI,MAAM,IAAI,UAAS,YAAY,GAAG,OACzD,0BAAAA,KAAC,WAAQ,UAAU,GACjB,0BAAAA,KAAC,SACC,0BAAAA,KAAC,SAAM,WAAU,OAAM,SAAS,GAAG,SAAS,GACzC,iBAAO,KAAK,WAAW,EAAE,IAAI,CAAC,KAAK,UAAU;AAC5C,WAAO,gBAAAA,KAAC,oBAA6B,OAAO,YAAY,GAAG,EAAE,OAAO,iBAAtC,KAAoE;AAAA,EACpG,CAAC,GACH,GACF,GACF,GACF,IACE;AACN;","names":["jsx"]}