refactor(edges): simplify edge rendering

2023-11-16 15:41:30 +01:00
parent b659443507
commit 08e61f3111
12 changed files with 275 additions and 318 deletions
@@ -0,0 +1,84 @@
+import { derived } from 'svelte/store';
+import { isEdgeVisible, getEdgePosition, adjustEdgeZIndex } from '@xyflow/system';
+
+import type { EdgeLayouted } from '$lib/types';
+import type { SvelteFlowStoreState } from './types';
+
+export function getVisibleEdges(store: SvelteFlowStoreState) {
+  const visibleEdges = derived(
+    [
+      store.edges,
+      store.nodes,
+      store.nodeLookup,
+      store.onlyRenderVisibleElements,
+      store.viewport,
+      store.width,
+      store.height
+    ],
+    ([edges, , nodeLookup, onlyRenderVisibleElements, viewport, width, height]) => {
+      const visibleEdges =
+        onlyRenderVisibleElements && width && height
+          ? edges.filter((edge) => {
+              const sourceNode = nodeLookup.get(edge.source);
+              const targetNode = nodeLookup.get(edge.target);
+
+              return (
+                sourceNode &&
+                targetNode &&
+                isEdgeVisible({
+                  sourceNode,
+                  targetNode,
+                  width,
+                  height,
+                  transform: [viewport.x, viewport.y, viewport.zoom]
+                })
+              );
+            })
+          : edges;
+
+      return visibleEdges;
+    }
+  );
+
+  return derived(
+    [
+      visibleEdges,
+      store.nodes,
+      store.nodeLookup,
+      store.connectionMode,
+      store.onlyRenderVisibleElements,
+      store.onerror
+    ],
+    ([visibleEdges, , nodeLookup, connectionMode, onlyRenderVisibleElements, onerror]) => {
+      const layoutedEdges = visibleEdges.reduce<EdgeLayouted[]>((res, edge) => {
+        const sourceNode = nodeLookup.get(edge.source);
+        const targetNode = nodeLookup.get(edge.target);
+
+        if (!sourceNode || !targetNode) {
+          return res;
+        }
+
+        const edgePosition = getEdgePosition({
+          id: edge.id,
+          sourceNode,
+          targetNode,
+          sourceHandle: edge.sourceHandle || null,
+          targetHandle: edge.targetHandle || null,
+          connectionMode,
+          onError: onerror
+        });
+
+        if (edgePosition) {
+          res.push({
+            ...adjustEdgeZIndex(edge, nodeLookup, onlyRenderVisibleElements),
+            ...edgePosition
+          });
+        }
+
+        return res;
+      }, []);
+
+      return layoutedEdges;
+    }
+  );
+}