Merge pull request #465 from terrestris/ol-hooks

feat: add some ol related hooks

package.json

@@ -40,7 +40,8 @@
   },
   "dependencies": {
     "@terrestris/base-util": "^1.0.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "ol": "^8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",
@@ -66,10 +67,10 @@
     "jest-fetch-mock": "^3.0.3",
     "less": "^4.1.1",
     "np": "^7.5.0",
-    "regenerator-runtime": "^0.13.7",
-    "rimraf": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.1.0",
+    "regenerator-runtime": "^0.13.7",
+    "rimraf": "^3.0.2",
     "ts-jest": "^26.5.6",
     "typescript": "^4.2.4"
   }

src/contexts/MapContext.tsx

@@ -0,0 +1,5 @@
+import OlMap from 'ol/Map';
+import React from 'react';
+
+const MapContext = React.createContext<OlMap|null>(null);
+export default MapContext;

src/hooks/useMap.ts

@@ -0,0 +1,13 @@
+import {
+  useContext
+} from 'react';
+
+import OlMap from 'ol/Map';
+
+import MapContext from '../contexts/MapContext';
+
+export const useMap = (): (OlMap | undefined) => {
+  return useContext(MapContext);
+};
+
+export default useMap;

src/hooks/useOlInteraction.ts

@@ -0,0 +1,60 @@
+import {
+  DependencyList,
+  useEffect,
+  useState
+} from 'react';
+
+import {
+  isNil
+} from 'lodash';
+
+import {
+  Interaction
+} from 'ol/interaction';
+
+import useMap from './useMap';
+
+/**
+ * This hook adds an interaction to the map and removes/updates it if the dependency array changes.
+ * It accepts an optional active parameter that toggles the active state of the interaction. If it is undefined the
+ * active state will not get changed.
+ * @param constructor returns an interaction to be added to the map, will be called again, if the interaction needs
+ * to be updated
+ * @param dependencies
+ * @param active
+ */
+export const useOlInteraction = <InteractionType extends Interaction> (
+  constructor: () => InteractionType|undefined,
+  dependencies: DependencyList,
+  active?: undefined|boolean
+): InteractionType|undefined => {
+  const map = useMap();
+  const [interaction, setInteraction] = useState<InteractionType>();
+  useEffect(() => {
+    if (!map) {
+      return undefined;
+    }
+
+    const newInteraction = constructor();
+    if (!newInteraction) {
+      return undefined;
+    }
+
+    setInteraction(newInteraction);
+    map.addInteraction(newInteraction);
+
+    return () => {
+      map.removeInteraction(newInteraction);
+      setInteraction(undefined);
+    };
+  }, [...dependencies, map]);
+
+  useEffect(() => {
+    if (!interaction || isNil(active)) {
+      return;
+    }
+    interaction.setActive(active);
+  }, [interaction, active]);
+
+  return interaction;
+};

src/hooks/useOlLayer.ts

@@ -0,0 +1,58 @@
+import {
+  DependencyList,
+  useEffect,
+  useState
+} from 'react';
+
+import {
+  isNil
+} from 'lodash';
+import BaseLayer from 'ol/layer/Base';
+
+import useMap from './useMap';
+
+/**
+ * This hook adds a layer to the map and removes/updates it if the dependency array changes.
+ * It accepts an optional visible parameter that toggles the visible state of the layer. If it is undefined the
+ * visible state will not get changed.
+ * @param constructor returns a layer to be added to the map, will be called again, if the layer needs
+ * to be updated
+ * @param dependencies
+ * @param visible
+ */
+export const useOlLayer = <LayerType extends BaseLayer>(
+  constructor: () => LayerType|undefined,
+  dependencies: DependencyList,
+  visible?: undefined|boolean
+): LayerType|undefined => {
+  const map = useMap();
+  const [layer, setLayer] = useState<LayerType>();
+  useEffect(() => {
+    if (!map) {
+      return undefined;
+    }
+
+    const newLayer = constructor();
+
+    if (!newLayer) {
+      return undefined;
+    }
+
+    map.addLayer(newLayer);
+    setLayer(newLayer);
+    return () => {
+      map.removeLayer(newLayer);
+      setLayer(undefined);
+    };
+  }, [map, ...dependencies]);
+
+  useEffect(() => {
+    if (!layer || isNil(visible)) {
+      return;
+    }
+
+    layer.setVisible(visible);
+  }, [layer, visible]);
+
+  return layer;
+};

src/hooks/useOlListener.ts

@@ -0,0 +1,40 @@
+import {
+  DependencyList,
+  useEffect
+} from 'react';
+
+import {
+  Observable
+} from 'ol';
+import {
+  EventsKey
+} from 'ol/events';
+import {
+  unByKey
+} from 'ol/Observable';
+
+/**
+ * This hook unregisters listeners if the dependency array changes
+ */
+export const useOlListener = <ObservableType extends Observable>(
+  observable: ObservableType|ObservableType[]|undefined,
+  observe: (o: ObservableType) => EventsKey|EventsKey[],
+  dependencies: DependencyList,
+  active?: boolean
+): void => {
+  useEffect(() => {
+    if (!observable || active === false) {
+      return undefined;
+    }
+    const observables = Array.isArray(observable) ? observable : [observable];
+    const keys: EventsKey[] = observables.flatMap(o => {
+      const k = observe(o);
+      return Array.isArray(k) ? k : [k];
+    });
+    return () => {
+      for (const key of keys) {
+        unByKey(key);
+      }
+    };
+  }, [observable, active, ...dependencies]);
+};

src/hooks/usePermalink/index.ts

@@ -0,0 +1,33 @@
+import {
+  useEffect,
+  useRef
+} from 'react';
+
+import OlInteractionLink from 'ol/interaction/Link';
+
+import OlMap from 'ol/Map';
+
+export const usePermalink = (map: OlMap|undefined) => {
+  const linkInteractionRef = useRef<OlInteractionLink>();
+
+  useEffect(() => {
+    if (!map) {
+      return undefined;
+    }
+
+    if (!linkInteractionRef.current) {
+      linkInteractionRef.current = new OlInteractionLink({
+        params: ['x', 'y', 'z', 'r']
+      });
+      map.addInteraction(linkInteractionRef.current);
+    }
+
+    return () => {
+      if (linkInteractionRef.current) {
+        map.removeInteraction(linkInteractionRef.current);
+      }
+    };
+  }, [map]);
+};
+
+export default usePermalink;