feat(wrapper): add onSelectionChange handler

src/components/NodesSelection/index.tsx

@@ -50,9 +50,11 @@ export default memo(() => {
     };
     const offsetX: number = scaledClient.x - position.x - tx;
     const offsetY: number = scaledClient.y - position.y - ty;
-    const selectedNodes = (state.selectedElements.filter(isNode) as Node[]).map(
-      (selectedNode) => state.nodes.find((node) => node.id === selectedNode.id)! as Node
-    );
+    const selectedNodes = state.selectedElements
+      ? (state.selectedElements.filter(isNode) as Node[]).map(
+          (selectedNode) => state.nodes.find((node) => node.id === selectedNode.id)! as Node
+        )
+      : [];
 
     const nextStartPositions = getStartPositions(selectedNodes);
 
@@ -68,14 +70,16 @@ export default memo(() => {
       y: evt.clientY / tScale,
     };
 
-    (state.selectedElements.filter(isNode) as Node[]).forEach((node) => {
-      const pos: XYPosition = {
-        x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tx,
-        y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - ty,
-      };
+    if (state.selectedElements) {
+      (state.selectedElements.filter(isNode) as Node[]).forEach((node) => {
+        const pos: XYPosition = {
+          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tx,
+          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - ty,
+        };
 
-      updateNodePos({ id: node.id, pos });
-    });
+        updateNodePos({ id: node.id, pos });
+      });
+    }
   };
 
   return (

src/components/SelectionListener/index.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { Elements } from '../../types';
+import { useStoreState } from '../../store/hooks';
+
+interface SelectionListenerProps {
+  onSelectionChange: (elements: Elements | null) => void;
+}
+
+// This is just a helper component for calling the onSelectionChange listener.
+// As soon as easy-peasy has implemented the effectOn hook, we can remove this compeonent
+// and use the hook instead. https://github.com/ctrlplusb/easy-peasy/pull/459
+
+export default ({ onSelectionChange }: SelectionListenerProps) => {
+  const selectedElements = useStoreState((s) => s.selectedElements);
+
+  useEffect(() => {
+    onSelectionChange(selectedElements);
+  }, [selectedElements]);
+
+  return null;
+};