fix: too many re-render on edges and nodes

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -4,7 +4,7 @@ import { getSourceTargetNodes } from './utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 import Edge from '~/components/Edges/Edge.vue'
 import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
-import { ConnectionLineType, ConnectionMode, CustomConnectionLine, Dimensions, EdgeType, Transform } from '~/types'
+import { ConnectionLineType, CustomConnectionLine, Dimensions, EdgeType, Transform } from '~/types'
 import { Store } from '~/context'
 
 interface EdgeRendererProps {
@@ -14,19 +14,17 @@ interface EdgeRendererProps {
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
   customConnectionLine?: CustomConnectionLine
-  connectionMode?: ConnectionMode
   arrowHeadColor?: string
   markerEndId?: string
-  onlyRenderVisibleElements?: boolean
+  edgeUpdaterRadius?: number
 }
 
 const props = withDefaults(defineProps<EdgeRendererProps>(), {
   transform: () => [0, 0, 1],
   arrowHeadColor: '#b1b1b7',
   dimensions: () => ({ width: 0, height: 0 }),
-  onlyRenderVisibleElements: false,
-  connectionMode: ConnectionMode.Strict,
   connectionLineType: ConnectionLineType.Bezier,
+  edgeUpdaterRadius: 10,
 })
 
 const store = inject(Store)!
@@ -35,6 +33,9 @@ const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connect
 const connectionLineVisible = computed(
   () => store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType,
 )
+onRenderTracked((e) => {
+  console.log('edge-renderer', e)
+})
 </script>
 <template>
   <svg :width="props.dimensions.width" :height="props.dimensions.height" class="revue-flow__edges">
@@ -42,15 +43,16 @@ const connectionLineVisible = computed(
     <g
       :transform="props.transform.length && `translate(${props.transform[0]},${props.transform[1]}) scale(${props.transform[2]})`"
     >
-      <template v-for="(edge, i) of store.edges" :key="`edge-${i}`">
+      <template v-for="edge of store.edges" :key="edge.id">
         <Edge
+          v-if="!edge.isHidden"
           :edge="edge"
           :nodes="getSourceTargetNodes(edge, store.nodes)"
           :type="props.edgeTypes[edge.type || 'default']"
           :dimensions="props.dimensions"
           :transform="props.transform"
-          :only-render-visible-elements="props.onlyRenderVisibleElements"
           :marker-end-id="props.markerEndId"
+          :edge-updater-radius="props.edgeUpdaterRadius"
         />
       </template>
       <ConnectionLine

src/container/EdgeRenderer/utils.ts

@@ -1,7 +1,6 @@
-import { Ref } from 'vue'
-import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '~/components/Edges'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
 import { rectToBox } from '~/utils/graph'
-import { Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge, EdgeType } from '~/types'
+import { Edge, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
 
 export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
   const standardTypes: Record<string, EdgeType> = {
@@ -142,8 +141,8 @@ type SourceTargetNode = {
   targetNode: Node
 }
 
-export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): Ref<SourceTargetNode> => {
-  const sourceTargetNode: SourceTargetNode = nodes.reduce(
+export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
+  return nodes.reduce(
     (res, node) => {
       if (node.id === edge.source) {
         res.sourceNode = node
@@ -155,6 +154,4 @@ export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): Ref<SourceTarge
     },
     { sourceNode: null, targetNode: null } as any,
   )
-
-  return ref(sourceTargetNode)
 }

src/container/Flow/Flow.vue

@@ -171,10 +171,8 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
             :connection-line-type="props.connectionLineType"
             :connection-line-style="props.connectionLineStyle"
             :custom-connection-line="props.customConnectionLine"
-            :connection-mode="props.connectionMode"
             :arrow-head-color="props.arrowHeadColor"
             :marker-end-id="props.markerEndId"
-            :only-render-visible-elements="props.onlyRenderVisibleElements"
             :edge-types="edgeTypes"
             :transform="transform"
             :dimensions="dimensions"

src/container/NodeRenderer/NodeRenderer.vue

@@ -44,17 +44,22 @@ const type = (node: TNode) => {
 }
 
 const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id === nodeId)
+onRenderTracked((e) => {
+  console.log('node-renderer', e)
+})
 </script>
 <template>
   <div
     class="revue-flow__nodes"
     :style="{ transform: `translate(${props.transform[0]}px,${props.transform[1]}px) scale(${props.transform[2]})` }"
   >
-    <template v-for="(node, i) of getNodes" :key="`node-${i}`">
+    <template v-for="node of getNodes" :key="node.id">
       <Node
+        v-if="!node.isHidden"
         :node="node"
         :type="type(node)"
         :scale="props.transform[2]"
+        :snap-grid="store.snapToGrid ? store.snapGrid : undefined"
         :selected="selected(node.id)"
         :selectable="node.selectable || store.elementsSelectable"
         :connectable="node.connectable || store.nodesConnectable"