[utils] Adds getNodesInViewport

packages/storybook/stories/utils/get-nodes-in-viewport.ts

@@ -0,0 +1,35 @@
+import { getNodesInViewport } from "@sigma/utils";
+import Graph from "graphology";
+import Sigma from "sigma";
+
+import data from "../_data/data.json";
+import { onStoryDown } from "../utils";
+
+export default () => {
+  const graph = new Graph();
+  graph.import(data);
+
+  // Retrieve some useful DOM elements
+  const container = document.getElementById("sigma-container") as HTMLElement;
+
+  // Instantiate sigma
+  const renderer = new Sigma(graph, container);
+
+  // Add buttons
+  const logsContainer = document.createElement("div");
+  logsContainer.style.position = "absolute";
+  logsContainer.style.left = "10px";
+  logsContainer.style.top = "10px";
+  document.body.append(logsContainer);
+
+  setInterval(() => {
+    const nodesInViewport = getNodesInViewport(renderer);
+    const count = nodesInViewport.length;
+    logsContainer.innerHTML =
+      count === 0 ? "No visible node" : count === 1 ? "One visible node" : `${count} visible nodes`;
+  }, 200);
+
+  onStoryDown(() => {
+    renderer?.kill();
+  });
+};

packages/storybook/stories/utils/stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 
 import FitViewportToNodesPlay from "./fit-viewport-to-nodes";
 import FitViewportToNodesSource from "./fit-viewport-to-nodes?raw";
+import GetNodesInViewportPlay from "./get-nodes-in-viewport";
+import GetNodesInViewportSource from "./get-nodes-in-viewport?raw";
 import template from "./index.html?raw";
 
 const meta: Meta = {
@@ -23,3 +25,15 @@ export const FitViewportToNodes: Story = {
     },
   },
 };
+
+export const GetNodesInViewport: Story = {
+  name: "Get nodes in viewport",
+  render: () => template,
+  play: GetNodesInViewportPlay,
+  args: {},
+  parameters: {
+    storySource: {
+      source: GetNodesInViewportSource,
+    },
+  },
+};

packages/utils/README.md

@@ -1,7 +1,13 @@
 # Sigma.js - Utils
 
-This package contains various utils functions to ease the use of [sigma.js](https://www.sigmajs.org/).
+This package contains various utils functions to ease the use of [sigma.js](https://www.sigmajs.org/), and expose some code snippets that are very useful, but are not important and complex enough to deserve their own package.
 
 ### `fitViewportToNodes` and `getCameraStateToFitViewportToNodes`
 
 These functions allow moving a sigma instance's camera so that it fits to a given group of nodes.
+
+### `getNodesInViewport`
+
+This function allows retrieving the list of nodes that are visible (even partially) in the current viewport.
+
+Please check the related [Storybook](https://github.com/jacomyal/sigma.js/tree/main/packages/storybook/stories/utils) for more advanced examples.

packages/utils/src/getNodesInViewport.ts

@@ -0,0 +1,18 @@
+import Sigma from "sigma";
+import { NodeDisplayData } from "sigma/types";
+
+/**
+ * This function takes a Sigma instance and returns the list of all nodes visible in the viewport.
+ *
+ * @param sigma A Sigma instance
+ */
+export function getNodesInViewport(sigma: Sigma): string[] {
+  const { width, height } = sigma.getDimensions();
+  const graph = sigma.getGraph();
+  return graph.filterNodes((_, attributes) => {
+    const data = attributes as NodeDisplayData;
+    const { x, y } = sigma.graphToViewport(data);
+    const size = sigma.scaleSize(data.size);
+    return x + size >= 0 && x - size <= width && y + size >= 0 && y - size <= height;
+  });
+}

packages/utils/src/index.ts

@@ -1 +1,2 @@
-export * from "./fitViewportToNodes.ts";
+export * from "./fitViewportToNodes";
+export * from "./getNodesInViewport";