Remove default hotkeys

docs/Hotkeys.mdx

@@ -4,35 +4,94 @@ import { Meta } from '@storybook/blocks';
 
 # Hotkeys
 
-Under the hood the library uses [reakeys](https://github.com/reaviz/reakeys) for
-binding hotkeys.
+### We recommend using [reakeys](https://github.com/reaviz/reakeys) for binding hotkeys.
 
-### Camera Controls
+There are a few examples below of how to bind hotkeys via `reakeys`.
+Follow these steps to bind hotkeys using Reakeys:
+
+### 1. Import `useHotkeys` hook from `reakeys`.
 
 ```ts
-{
-  name: 'Zoom In',
-  keys: 'mod+shift+i'
-},
-{
-  name: 'Zoom Out',
-  keys: 'mod+shift+o'
-},
-{
-  name: 'Center',
-  keys: ['mod+shift+c']
-}
+import { useHotkeys } from 'reakeys';
+```
+
+### 2. Create a ref for the graph.
+
+```tsx
+const graphRef = useRef<GraphCanvasRef | null>(null);
+
+return <GraphCanvas ref={graphRef} />;
 ```
 
-### Selection
+### 3. Bind Hotkeys to the Graph:
 
 ```ts
-{
-  name: 'Select All',
-  keys: 'mod+a',
-},
-{
-  name: 'Deselect Selections',
-  keys: 'escape'
-}
+useHotkeys([
+  {
+    name: 'Zoom In',
+    keys: 'shift+i',
+    category: 'Graph',
+    callback: event => {
+      event.preventDefault();
+      graphRef.current?.zoomIn();
+    }
+  },
+  {
+    name: 'Zoom Out',
+    keys: 'shift+o',
+    category: 'Graph',
+    callback: event => {
+      event.preventDefault();
+      graphRef.current?.zoomOut();
+    }
+  },
+  {
+    name: 'Center',
+    category: 'Graph',
+    keys: 'mod+shift+c',
+    action: 'keydown',
+    callback: event => {
+      event.preventDefault();
+      graphRef.current?.centerGraph(nodeIds);
+    }
+  }
+]);
 ```
+
+### 4. Bind Hotkeys to Selection Actions:
+
+```ts
+const { clearSelections, setSelections } = useSelection({
+  ref: graphRef,
+  nodes,
+  edges,
+  pathSelectionType: 'all'
+});
+
+useHotkeys([
+  {
+    name: 'Select All',
+    keys: 'mod+a',
+    action: 'keydown',
+    category: 'Graph',
+    description: 'Select all nodes and edges',
+    callback: event => {
+      event.preventDefault();
+      setSelections(nodes.map(node => node.id));
+    }
+  },
+  {
+    name: 'Deselect Selections',
+    category: 'Graph',
+    description: 'Deselect selected nodes and edges',
+    keys: 'escape',
+    action: 'keydown',
+    callback: event => {
+      event.preventDefault();
+      clearSelections();
+    }
+  }
+]);
+```
+
+#### Note: You can bind any available Graph actions to hotkeys via reference.

docs/demos/MultiSelection.story.tsx

@@ -63,8 +63,19 @@ export const ModifierKey = () => {
 
   return (
     <>
-      <div style={{ zIndex: 9, position: 'absolute', top: 0, right: 0, background: 'rgba(0, 0, 0, .5)', color: 'white' }}>
-        <h3 style={{ margin: 5 }}>Hold Command/CTRL and Click to Select Multiples</h3>
+      <div
+        style={{
+          zIndex: 9,
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          background: 'rgba(0, 0, 0, .5)',
+          color: 'white'
+        }}
+      >
+        <h3 style={{ margin: 5 }}>
+          Hold Command/CTRL and Click to Select Multiples
+        </h3>
       </div>
       <GraphCanvas
         ref={graphRef}

package.json

@@ -69,7 +69,6 @@
     "graphology-metrics": "^2.1.0",
     "graphology-shortest-path": "^2.0.2",
     "hold-event": "^0.2.0",
-    "reakeys": "^2.0.6",
     "three": "^0.154.0",
     "three-stdlib": "^2.23.13",
     "zustand": "4.3.9"

src/CameraControls/CameraControls.tsx

@@ -8,7 +8,8 @@ import React, {
   useImperativeHandle,
   useMemo,
   ReactNode,
-  useState
+  useState,
+  useLayoutEffect
 } from 'react';
 import { useThree, useFrame, extend } from '@react-three/fiber';
 import {
@@ -29,7 +30,6 @@ import {
   CameraControlsContext,
   CameraControlsContextProps
 } from './useCameraControls';
-import { useHotkeys } from 'reakeys';
 import * as holdEvent from 'hold-event';
 import { useStore } from '../store';
 
@@ -126,6 +126,7 @@ export const CameraControls: FC<
     const setPanning = useStore(state => state.setPanning);
     const isDragging = useStore(state => state.draggingIds.length > 0);
     const cameraSpeedRef = useRef(0);
+    const [controlMounted, setControlMounted] = useState<boolean>(false);
 
     useFrame((_state, delta) => {
       if (cameraRef.current?.enabled) {
@@ -304,31 +305,6 @@ export const CameraControls: FC<
       }
     }, [isDragging, mode]);
 
-    useHotkeys([
-      {
-        name: 'Zoom In',
-        disabled,
-        category: 'Graph',
-        keys: 'mod+shift+i',
-        action: 'keydown',
-        callback: event => {
-          event.preventDefault();
-          zoomIn();
-        }
-      },
-      {
-        name: 'Zoom Out',
-        category: 'Graph',
-        disabled,
-        keys: 'mod+shift+o',
-        action: 'keydown',
-        callback: event => {
-          event.preventDefault();
-          zoomOut();
-        }
-      }
-    ]);
-
     const values = useMemo(
       () => ({
         controls: cameraRef.current,
@@ -360,7 +336,12 @@ export const CameraControls: FC<
     return (
       <CameraControlsContext.Provider value={values}>
         <threeCameraControls
-          ref={cameraRef}
+          ref={controls => {
+            cameraRef.current = controls;
+            if (!controlMounted) {
+              setControlMounted(true);
+            }
+          }}
           args={[camera, gl.domElement]}
           smoothTime={0.1}
           minDistance={minDistance}

src/CameraControls/useCenterGraph.ts

@@ -2,7 +2,6 @@ import { useThree } from '@react-three/fiber';
 import { useCameraControls } from './useCameraControls';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Vector3, Box3, PerspectiveCamera } from 'three';
-import { useHotkeys } from 'reakeys';
 import { getLayoutCenter } from '../utils/layout';
 import { InternalGraphNode } from '../types';
 import { useStore } from '../store';
@@ -244,16 +243,5 @@ export const useCenterGraph = ({
     load();
   }, [controls, centerNodes, nodes, animated, camera, fitNodesInView]);
 
-  useHotkeys([
-    {
-      name: 'Center',
-      disabled,
-      category: 'Graph',
-      keys: ['mod+shift+c'],
-      action: 'keydown',
-      callback: () => centerNodes(nodes)
-    }
-  ]);
-
   return { centerNodes, centerNodesById, fitNodesInViewById, isCentered };
 };

src/selection/useSelection.ts

@@ -6,7 +6,6 @@ import React, {
   useState
 } from 'react';
 import { GraphCanvasRef } from '../GraphCanvas';
-import { useHotkeys } from 'reakeys';
 import { GraphEdge, GraphNode } from '../types';
 import { findPath } from '../utils/paths';
 import { getAdjacents, PathSelectionTypes } from './utils';
@@ -48,11 +47,6 @@ export interface SelectionProps {
    */
   disabled?: boolean;
 
-  /**
-   * Hotkey types
-   */
-  hotkeys?: HotkeyTypes[];
-
   /**
    * Whether to focus on select or not.
    */
@@ -160,7 +154,6 @@ export const useSelection = ({
   pathHoverType = 'out',
   pathSelectionType = 'direct',
   ref,
-  hotkeys = ['selectAll', 'deselect', 'delete'],
   disabled,
   onSelection
 }: SelectionProps): SelectionResult => {
@@ -410,41 +403,6 @@ export const useSelection = ({
     }
   }, [internalSelections, pathSelectionType, ref]);
 
-  useHotkeys([
-    {
-      name: 'Select All',
-      keys: 'mod+a',
-      action: 'keydown',
-      disabled: !hotkeys.includes('selectAll'),
-      category: 'Graph',
-      description: 'Select all nodes and edges',
-      callback: event => {
-        event.preventDefault();
-
-        if (!disabled && type !== 'single') {
-          const next = nodes.map(n => n.id);
-          onSelection?.(next);
-          setInternalSelections(next);
-        }
-      }
-    },
-    {
-      name: 'Deselect Selections',
-      category: 'Graph',
-      disabled: !hotkeys.includes('deselect'),
-      description: 'Deselect selected nodes and edges',
-      keys: 'escape',
-      action: 'keydown',
-      callback: event => {
-        if (!disabled) {
-          event.preventDefault();
-          onSelection?.([]);
-          setInternalSelections([]);
-        }
-      }
-    }
-  ]);
-
   const joinedActives = useMemo(
     () => [...internalActives, ...internalHovers],
     [internalActives, internalHovers]