[FEATURE] Implement onlyRenderVisibleElements

[thedanchez]

Right now Solid Flow does not support the onlyRenderVisibleElements feature. This was due to the discovery during benchmarking that the feature, in its original implementation directly taken from React/Svelte Flow, degraded rendering performance to unacceptable levels.

import {
  getNodesInside,
  type NodeLookup,
  type Transform,
} from "@xyflow/system";

import type { InternalNode, Node } from "../types";

export function getVisibleNodes<NodeType extends Node = Node>(
  nodeLookup: NodeLookup<InternalNode<NodeType>>,
  transform: Transform,
  width: number,
  height: number,
) {
  const visibleNodes = new Map<string, InternalNode<NodeType>>();
  getNodesInside(nodeLookup, { x: 0, y: 0, width: width, height: height }, transform, true).forEach(
    (node) => {
      visibleNodes.set(node.id, node);
    },
  );
  return visibleNodes;
}

const visibleNodesMap = createMemo<Map<string, InternalNode>>(() => {
  if (store.onlyRenderVisibleElements) {
    // This has very poor render performance
    return getVisibleNodes(nodeLookup, transform(), store.width ?? 0, store.height ?? 0);
  }
  return nodeLookup;
});

The key @xyflow/system call that makes this feature possible is getNodesInside. More work was effectively being done to calculate what is visible or not on the screen compared to doing no work at all and rendering everything. That additional work was the cause of the degradation hence the decision to not incorporate it into Solid Flow (yet) and as a consequence, puts us in a position to find alternative ways to optimally achieve the desired result.

@bigmistqke brought up some novel ideas/algorithms that could be worth exploring from the game development space such as Spatial Hash Grids. Incorporating something like that in a clever way could perhaps give us the performance we're looking for in a fine-grained context.