Enable marker to move around using <PointerInteraction />

src/lib/interactions/PointerInteraction.tsx

@@ -1,12 +1,46 @@
 import OlPointerInteraction from 'ol/interaction/Pointer';
 import { useEffect } from 'react';
+import { Coordinate } from 'ol/coordinate';
+import { FeatureLike } from 'ol/Feature';
+import MapBrowserEvent from 'ol/MapBrowserEvent';
+import { Geometry } from 'ol/geom'
 import { useMap } from '../Map';
 
 export function PointerInteraction(props) {
   const map = useMap();
 
+  let coordinate: Coordinate;
+  let feature: FeatureLike;
+
+  function handleDownEvent(evt: MapBrowserEvent<UIEvent>) {
+    const _feature = evt.map.forEachFeatureAtPixel(evt.pixel, feature => feature);
+    _feature && ([coordinate, feature] = [evt.coordinate, _feature]);
+    return !!feature; // `true` to start the drag sequence.
+  }
+
+  function handleDragEvent(evt: MapBrowserEvent<UIEvent>) {
+    const geometry = feature.getGeometry() as Geometry;
+    const deltaX = evt.coordinate[0] - coordinate[0];
+    const deltaY = evt.coordinate[1] - coordinate[1];
+    geometry.translate(deltaX, deltaY);
+    coordinate = evt.coordinate;
+  }
+
+  function handleMoveEvent(evt: MapBrowserEvent<UIEvent>) {
+    const feature = evt.map.forEachFeatureAtPixel(evt.pixel, feature => feature);
+    const element = evt.map.getTargetElement();
+    element.style.cursor = feature ? 'pointer' : '';
+  }
+
+  function handleUpEvent() {
+    coordinate = null;
+    feature = null;
+    return false; // return `false` to stop the drag sequence
+  }
+
   useEffect(() => {
     if (!map) return;
+    props = {...{handleDownEvent, handleMoveEvent, handleUpEvent, handleDragEvent}, ...props };
     const interaction = new OlPointerInteraction(props);
     map.addInteraction(interaction);
   }, [map]);

src/stories/Marker/Marker.mdx

@@ -26,6 +26,7 @@ https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html
           addOnClick={true} 
           removeOnClick={true} 
         />
+        <PointerInteraction /> {/* Enable marker move */}
       </Map>
     );
   }

src/stories/Marker/Marker.stories.tsx

@@ -1,7 +1,7 @@
 import { OSM } from 'ol/source';
 import { useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Map, TileLayer, View, Marker } from '../../lib';
+import { Map, TileLayer, View, Marker, PointerInteraction } from '../../lib';
 
 export default { title: 'Marker' } as Meta;
 declare let window:any;
@@ -15,6 +15,7 @@ export const Primary: StoryObj<any> = {
         <TileLayer source={new OSM()} />
         <View center={[0,0]} zoom={4}/>
         <Marker lonLat={[0,0]} char="A" color="blue" addOnClick={true} removeOnClick={true} />
+        <PointerInteraction /> {/* Enable marker move */}
       </Map>
     );
   }

src/stories/interactions/PointerInteraction/PointerInteraction.mdx

@@ -51,45 +51,12 @@ export default function(props) {
     'fill-color': [0, 0, 255, 0.5],
   }
 
-  let coordinate: Coordinate;
-  let feature: FeatureLike;
-
-  function handleDownEvent(evt: MapBrowserEvent<UIEvent>) {
-    const _feature = evt.map.forEachFeatureAtPixel(evt.pixel, feature => feature);
-    _feature && ([coordinate, feature] = [evt.coordinate, _feature]);
-    return !!feature; // `true` to start the drag sequence.
-  }
-
-  function handleDragEvent(evt: MapBrowserEvent<UIEvent>) {
-    const geometry = feature.getGeometry() as Geometry;
-    const deltaX = evt.coordinate[0] - coordinate[0];
-    const deltaY = evt.coordinate[1] - coordinate[1];
-    geometry.translate(deltaX, deltaY);
-    coordinate = evt.coordinate;
-  }
-
-  function handleMoveEvent(evt: MapBrowserEvent<UIEvent>) {
-    const feature = evt.map.forEachFeatureAtPixel(evt.pixel, feature => feature);
-    const element = evt.map.getTargetElement();
-    element.style.cursor = feature ? 'pointer' : '';
-  }
-
-  function handleUpEvent() {
-    coordinate = null;
-    feature = null;
-    return false; // return `false` to stop the drag sequence
-  }
-
   return (
     <Map>
       <TileLayer source={new OSM()} />
       <VectorLayer source={source} style={style} />
       <View center={[0, 0]} zoom={2}/>
-      <PointerInteraction
-        handleDownEvent={handleDownEvent}
-        handleDragEvent={handleDragEvent}
-        handleMoveEvent={handleMoveEvent}
-        handleUpEvent={handleUpEvent} />
+      <PointerInteraction />
     </Map>
   );
 }

src/stories/interactions/PointerInteraction/PointerInteraction.stories.tsx

@@ -36,45 +36,12 @@ export const Primary = {
       'fill-color': [0, 0, 255, 0.5],
     }
 
-    let coordinate: Coordinate;
-    let feature: FeatureLike;
-
-    function handleDownEvent(evt: MapBrowserEvent<UIEvent>) {
-      const _feature = evt.map.forEachFeatureAtPixel(evt.pixel, feature => feature);
-      _feature && ([coordinate, feature] = [evt.coordinate, _feature]);
-      return !!feature; // `true` to start the drag sequence.
-    }
-
-    function handleDragEvent(evt: MapBrowserEvent<UIEvent>) {
-      const geometry = feature.getGeometry() as Geometry;
-      const deltaX = evt.coordinate[0] - coordinate[0];
-      const deltaY = evt.coordinate[1] - coordinate[1];
-      geometry.translate(deltaX, deltaY);
-      coordinate = evt.coordinate;
-    }
-
-    function handleMoveEvent(evt: MapBrowserEvent<UIEvent>) {
-      const feature = evt.map.forEachFeatureAtPixel(evt.pixel, feature => feature);
-      const element = evt.map.getTargetElement();
-      element.style.cursor = feature ? 'pointer' : '';
-    }
-
-    function handleUpEvent() {
-      coordinate = null;
-      feature = null;
-      return false; // return `false` to stop the drag sequence
-    }
-
     return (
       <Map>
         <TileLayer source={new OSM()} />
         <VectorLayer source={source} style={style} />
         <View center={[0, 0]} zoom={2}/>
-        <PointerInteraction
-          handleDownEvent={handleDownEvent}
-          handleDragEvent={handleDragEvent}
-          handleMoveEvent={handleMoveEvent}
-          handleUpEvent={handleUpEvent} />
+        <PointerInteraction />
       </Map>
     );
   }