Hide labels based off distance from camera

src/CameraControls/useCenterGraph.ts

@@ -1,6 +1,6 @@
 import { useThree } from '@react-three/fiber';
 import { useCameraControls } from './useCameraControls';
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Vector3, Box3, PerspectiveCamera } from 'three';
 import { useHotkeys } from 'reakeys';
 import { getLayoutCenter } from '../utils/layout';
@@ -34,13 +34,19 @@ export interface CenterGraphOutput {
    * If no ids are provided, the graph is centered on all nodes.
    */
   centerNodesById: (ids?: string[]) => void;
+
+  /**
+   * Whether the graph is centered or not.
+   */
+  isCentered?: boolean;
 }
 
 export const useCenterGraph = ({
   animated,
   disabled
 }: CenterGraphInput): CenterGraphOutput => {
   const nodes = useStore(state => state.nodes);
+  const [isCentered, setIsCentered] = useState<boolean>(false);
   const invalidate = useThree(state => state.invalidate);
   const { controls } = useCameraControls();
   const camera = useThree(state => state.camera) as PerspectiveCamera;
@@ -72,6 +78,10 @@ export const useCenterGraph = ({
         );
         await controls.setTarget(x, y, z, animated);
 
+        if (!isCentered) {
+          setIsCentered(true);
+        }
+
         invalidate();
       }
     },
@@ -126,5 +136,5 @@ export const useCenterGraph = ({
     }
   ]);
 
-  return { centerNodes, centerNodesById };
+  return { centerNodes, centerNodesById, isCentered };
 };

src/GraphScene.tsx

@@ -298,7 +298,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
       const clusters = useStore(state => [...state.clusters.values()]);
 
       // Center the graph on the nodes
-      const { centerNodesById } = useCenterGraph({
+      const { centerNodesById, isCentered } = useCenterGraph({
         animated,
         disabled
       });
@@ -429,11 +429,13 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
       );
 
       return (
-        <Fragment>
-          {nodeComponents}
-          {edgeComponents}
-          {clusterComponents}
-        </Fragment>
+        isCentered && (
+          <Fragment>
+            {nodeComponents}
+            {edgeComponents}
+            {clusterComponents}
+          </Fragment>
+        )
       );
     }
   );

src/useGraph.ts

@@ -1,12 +1,14 @@
 import { useRef, useCallback, useEffect, useMemo } from 'react';
+import { useThree } from '@react-three/fiber';
+import { PerspectiveCamera } from 'three';
 import { SizingType } from './sizing';
 import {
   LayoutTypes,
   layoutProvider,
   LayoutStrategy,
   LayoutOverrides
 } from './layout';
-import { LabelVisibilityType } from './utils/visibility';
+import { LabelVisibilityType, calcLabelVisibility } from './utils/visibility';
 import { tick } from './layout/layoutUtils';
 import { GraphEdge, GraphNode } from './types';
 import { buildGraph, transformGraph } from './utils/graph';
@@ -51,6 +53,7 @@ export const useGraph = ({
   const setClusters = useStore(state => state.setClusters);
   const stateCollapsedNodeIds = useStore(state => state.collapsedNodeIds);
   const setEdges = useStore(state => state.setEdges);
+  const stateNodes = useStore(state => state.nodes);
   const setNodes = useStore(state => state.setNodes);
   const setSelections = useStore(state => state.setSelections);
   const setActives = useStore(state => state.setActives);
@@ -59,6 +62,7 @@ export const useGraph = ({
   const setCollapsedNodeIds = useStore(state => state.setCollapsedNodeIds);
   const layoutMounted = useRef<boolean>(false);
   const layout = useRef<LayoutStrategy | null>(null);
+  const camera = useThree(state => state.camera) as PerspectiveCamera;
 
   const { visibleEdges, visibleNodes } = useMemo(
     () =>
@@ -132,6 +136,26 @@ export const useGraph = ({
     ]
   );
 
+  useEffect(() => {
+    const nodes = stateNodes.map(node => ({
+      ...node,
+      labelVisible: calcLabelVisibility({
+        nodeCount: stateNodes?.length,
+        labelType,
+        camera,
+        nodePosition: node?.position
+      })('node', node?.size)
+    }));
+
+    const isVisibilityUpdated = nodes.some(
+      (node, i) => node.labelVisible !== stateNodes[i].labelVisible
+    );
+
+    if (isVisibilityUpdated) {
+      setNodes(nodes);
+    }
+  }, [camera, camera.zoom, camera.position.z, setNodes, stateNodes, labelType]);
+
   useEffect(() => {
     // Let's set the store selections so its easier to access
     if (layoutMounted.current) {

src/utils/graph.ts

@@ -78,7 +78,7 @@ export function transformGraph({
   });
 
   const nodeCount = graph.nodes().length;
-  const checkVisibility = calcLabelVisibility(nodeCount, labelType);
+  const checkVisibility = calcLabelVisibility({ nodeCount, labelType });
 
   graph.forEachNode((id, node) => {
     const position = layout.getNodePosition(id);

src/utils/visibility.ts

@@ -1,21 +1,39 @@
+import { PerspectiveCamera } from 'three';
 import { EdgeLabelPosition } from '../symbols';
 
 const NODE_THRESHOLD = 20;
 
 export type LabelVisibilityType = 'all' | 'auto' | 'none' | 'nodes' | 'edges';
 
-export function calcLabelVisibility(
-  nodeCount: number,
-  type: LabelVisibilityType
-) {
+interface CalcLabelVisibilityArgs {
+  nodeCount: number;
+  nodePosition?: { x: number; y: number; z: number };
+  labelType: LabelVisibilityType;
+  camera?: PerspectiveCamera;
+}
+
+export function calcLabelVisibility({
+  nodeCount,
+  nodePosition,
+  labelType,
+  camera
+}: CalcLabelVisibilityArgs) {
   return (shape: 'node' | 'edge', size: number) => {
-    if (type === 'all') {
+    if (
+      camera &&
+      nodePosition &&
+      camera?.position?.z / camera?.zoom - nodePosition?.z > 6000
+    ) {
+      return false;
+    }
+
+    if (labelType === 'all') {
       return true;
-    } else if (type === 'nodes' && shape === 'node') {
+    } else if (labelType === 'nodes' && shape === 'node') {
       return true;
-    } else if (type === 'edges' && shape === 'edge') {
+    } else if (labelType === 'edges' && shape === 'edge') {
       return true;
-    } else if (type === 'auto' && shape === 'node') {
+    } else if (labelType === 'auto' && shape === 'node') {
       if (nodeCount <= NODE_THRESHOLD) {
         return true;
       } else {