feat(utils): add vanilla drag and panzoom (#3108)

* refactor(panzoom): create vanilla helper

* feat(svelte): add interaction example

* refactor(panzoom): cleanup

* Update function-runner.ts

* refactor(panzoom): cleanup

* refactor(panzoom): rename functions

* feat(utils): add vanilla drag helper (#3107)

* feat(utils): add vanilla drag helper

* refactor(drag): cleanup

* refactor(drag): cleanup

* chore(packages): cleanup

* refactor(panzoom): cleanup and simplify

packages/core/src/components/Nodes/wrapNode.tsx

@@ -40,7 +40,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     isSelectable,
     isConnectable,
     isFocusable,
-    selectNodesOnDrag,
     sourcePosition,
     targetPosition,
     hidden,
@@ -69,6 +68,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     const onContextMenuHandler = getMouseHandler(id, store.getState, onContextMenu);
     const onDoubleClickHandler = getMouseHandler(id, store.getState, onDoubleClick);
     const onSelectNodeHandler = (event: MouseEvent) => {
+      const { selectNodesOnDrag } = store.getState();
       if (isSelectable && (!selectNodesOnDrag || !isDraggable)) {
         // this handler gets called within the drag start event when selectNodesOnDrag=true
         handleNodeClick({
@@ -154,7 +154,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
       handleSelector: dragHandle,
       nodeId: id,
       isSelectable,
-      selectNodesOnDrag,
     });
 
     if (hidden) {

packages/core/src/components/StoreUpdater/index.tsx

@@ -44,6 +44,9 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStart'
   | 'onSelectionDrag'
   | 'onSelectionDragStop'
+  | 'onMove'
+  | 'onMoveStart'
+  | 'onMoveEnd'
   | 'noPanClassName'
   | 'nodeOrigin'
   | 'elevateNodesOnSelect'
@@ -52,6 +55,7 @@ type StoreUpdaterProps = Pick<
   | 'onError'
   | 'connectionRadius'
   | 'isValidConnection'
+  | 'selectNodesOnDrag'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -124,6 +128,9 @@ const StoreUpdater = ({
   onSelectionDrag,
   onSelectionDragStart,
   onSelectionDragStop,
+  onMoveStart,
+  onMove,
+  onMoveEnd,
   noPanClassName,
   nodeOrigin,
   rfId,
@@ -132,6 +139,7 @@ const StoreUpdater = ({
   onError,
   connectionRadius,
   isValidConnection,
+  selectNodesOnDrag,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -183,6 +191,9 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onSelectionDrag', onSelectionDrag, store.setState);
   useDirectStoreUpdater('onSelectionDragStart', onSelectionDragStart, store.setState);
   useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
+  useDirectStoreUpdater('onMove', onMove, store.setState);
+  useDirectStoreUpdater('onMoveStart', onMoveStart, store.setState);
+  useDirectStoreUpdater('onMoveEnd', onMoveEnd, store.setState);
   useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
   useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
   useDirectStoreUpdater('rfId', rfId, store.setState);
@@ -191,6 +202,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onError', onError, store.setState);
   useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
   useDirectStoreUpdater('isValidConnection', isValidConnection, store.setState);
+  useDirectStoreUpdater('selectNodesOnDrag', selectNodesOnDrag, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);