expose min/max distance

src/CameraControls/CameraControls.tsx

@@ -90,14 +90,27 @@ export interface CameraControlsProps {
    * Whether the controls are enabled.
    */
   disabled?: boolean;
+
+  /**
+   * The maximum distance for the camera.
+   */
+  maxDistance?: number;
+
+  /**
+   * The minimum distance for the camera.
+   */
+  minDistance?: number;
 }
 
 export type CameraControlsRef = CameraControlsContextProps;
 
 export const CameraControls: FC<
   CameraControlsProps & { ref?: Ref<CameraControlsRef> }
 > = forwardRef(
-  ({ mode, children, animated, disabled }, ref: Ref<CameraControlsRef>) => {
+  (
+    { mode, children, animated, disabled, minDistance, maxDistance },
+    ref: Ref<CameraControlsRef>
+  ) => {
     const cameraRef = useRef<ThreeCameraControls | null>(null);
     const camera = useThree(state => state.camera);
     const gl = useThree(state => state.gl);
@@ -302,9 +315,9 @@ export const CameraControls: FC<
           ref={cameraRef}
           args={[camera, gl.domElement]}
           smoothTime={0.1}
-          minDistance={1000}
+          minDistance={minDistance}
           dollyToCursor
-          maxDistance={50000}
+          maxDistance={maxDistance}
         />
         {children}
       </CameraControlsContext.Provider>
@@ -313,5 +326,7 @@ export const CameraControls: FC<
 );
 
 CameraControls.defaultProps = {
-  mode: 'rotate'
+  mode: 'rotate',
+  minDistance: 1000,
+  maxDistance: 50000
 };

src/GraphCanvas.tsx

@@ -34,15 +34,30 @@ export interface GraphCanvasProps extends Omit<GraphSceneProps, 'theme'> {
   cameraMode?: CameraMode;
 
   /**
-   * When the canvas was clicked but didn't hit a node/edge.
+   * The maximum distance for the camera. Default is 50000.
    */
-  onCanvasClick?: (event: MouseEvent) => void;
+  maxDistance?: number;
+
+  /**
+   * The minimum distance for the camera. Default is 1000.
+   */
+  minDistance?: number;
 
   /**
    * The type of lasso selection.
    */
   lassoType?: LassoType;
 
+  /**
+   * Children to render in the canvas. Useful for things like lights.
+   */
+  children?: ReactNode;
+
+  /**
+   * Ability to extend Cavas gl options. For example { preserveDrawingBuffer: true }
+   */
+  glOptions?: Object;
+
   /**
    * When the canvas had a lasso selection.
    */
@@ -54,14 +69,9 @@ export interface GraphCanvasProps extends Omit<GraphSceneProps, 'theme'> {
   onLassoEnd?: (selections: string[]) => void;
 
   /**
-   * Children to render in the canvas. Useful for things like lights.
-   */
-  children?: ReactNode;
-
-  /**
-   * Ability to extend Cavas gl options. For example { preserveDrawingBuffer: true }
+   * When the canvas was clicked but didn't hit a node/edge.
    */
-  glOptions?: Object;
+  onCanvasClick?: (event: MouseEvent) => void;
 }
 
 export type GraphCanvasRef = Omit<GraphSceneRef, 'graph' | 'renderScene'> &
@@ -104,6 +114,8 @@ export const GraphCanvas: FC<GraphCanvasProps & { ref?: Ref<GraphCanvasRef> }> =
         children,
         nodes,
         theme,
+        minDistance,
+        maxDistance,
         onCanvasClick,
         animated,
         disabled,
@@ -182,6 +194,8 @@ export const GraphCanvas: FC<GraphCanvasProps & { ref?: Ref<GraphCanvasRef> }> =
                 mode={cameraMode}
                 ref={controlsRef}
                 disabled={disabled}
+                minDistance={minDistance}
+                maxDistance={maxDistance}
                 animated={animated}
               >
                 <Lasso