Merge branch 'master' into node-cluster-position

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 4.19.4 - 10/17/24
+- [chore] Add ability to customise Label font size and offset #285
+
 # 4.19.3 - 8/20/24
 - [fix] fixed labelType none still shows label when hovering over node
 - [chore] replace react-use-gesture to @use-gesture/react #257

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reagraph",
-  "version": "4.19.3",
+  "version": "4.19.4",
   "description": "WebGL Node-based Graph for React",
   "scripts": {
     "build": "vite build --mode library",

src/useGraph.ts

@@ -65,6 +65,7 @@ export const useGraph = ({
   const camera = useThree(state => state.camera) as PerspectiveCamera;
   const dragRef = useRef<DragReferences>(drags);
 
+  // Calculate the visible entities
   const { visibleEdges, visibleNodes } = useMemo(
     () =>
       getVisibleEntities({
@@ -138,6 +139,7 @@ export const useGraph = ({
   }, [drags, clusterAttribute, updateLayout]);
 
   useEffect(() => {
+    // When the camera position/zoom changes, update the label visibility
     const nodes = stateNodes.map(node => ({
       ...node,
       labelVisible: calcLabelVisibility({
@@ -148,10 +150,12 @@ export const useGraph = ({
       })('node', node?.size)
     }));
 
+    // Determine if the label visibility has changed
     const isVisibilityUpdated = nodes.some(
       (node, i) => node.labelVisible !== stateNodes[i].labelVisible
     );
 
+    // Update the nodes if the label visibility has changed
     if (isVisibilityUpdated) {
       setNodes(nodes);
     }

src/utils/cluster.ts

@@ -22,7 +22,13 @@ export function buildClusterGroups(
 }
 
 export interface CalculateClustersInput {
+  /**
+   * The nodes to calculate clusters for.
+   */
   nodes: InternalGraphNode[];
+  /**
+   * The attribute to use for clustering.
+   */
   clusterAttribute?: string;
 }
 
@@ -45,6 +51,11 @@ export interface ClusterGroup {
 
 /**
  * Builds the cluster map.
+ *
+ * This function:
+ *  - Builds the cluster groups
+ *  - Calculates the center position of each cluster group
+ *  - Creates a cluster object for each group
  */
 export function calculateClusters({
   nodes,