fix: too many re-render on edges and nodes

examples/EdgeTypes/EdgeTypesExample.vue

@@ -17,14 +17,14 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 <template>
   <Flow
     :elements="elements"
-    :only-render-visible-elements="true"
     :min-zoom="0.2"
+    :default-zoom="1.5"
     @load="onLoad"
     @elements-remove="onElementsRemove"
     @connect="onConnect"
   >
     <MiniMap />
     <Controls />
-    <Background />
+    <Background color="#aaa" :gap="8" />
   </Flow>
 </template>

src/components/Edges/Edge.vue

@@ -2,7 +2,7 @@
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils/graph'
-import { ConnectionMode, Dimensions, Edge, EdgeType, Elements, Position, Transform } from '~/types'
+import { ConnectionMode, Dimensions, Edge, EdgeType, Position, Transform } from '~/types'
 import { onMouseDown } from '~/components/Handle/utils'
 import { Hooks, Store } from '~/context'
 
@@ -12,18 +12,11 @@ interface EdgeProps {
   nodes: ReturnType<typeof getSourceTargetNodes>
   dimensions: Dimensions
   transform: Transform
-  selectedElements?: Elements
-  elementsSelectable?: boolean
-  onlyRenderVisibleElements?: boolean
-  connectionMode?: ConnectionMode
   markerEndId?: string
   edgeUpdaterRadius?: number
 }
 
-const props = withDefaults(defineProps<EdgeProps>(), {
+const props = withDefaults(defineProps<EdgeProps>(), {})
-  elementsSelectable: true,
-  onlyRenderVisibleElements: false,
-})
 
 const store = inject(Store)!
 const hooks = inject(Hooks)!
@@ -32,72 +25,48 @@ hooks.connect.on((connection) => {
   hooks.edgeUpdate.trigger({ edge: props.edge, connection })
 })
 
-if (!props.nodes.value.sourceNode) {
+if (!props.nodes.sourceNode) {
   console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`)
 }
 
-if (!props.nodes.value.targetNode) {
+if (!props.nodes.targetNode) {
   console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`)
 }
 
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles =
-  props.connectionMode === ConnectionMode.Strict
+  store.connectionMode === ConnectionMode.Strict
-    ? props.nodes.value.targetNode?.__rf.handleBounds.target
+    ? props.nodes.targetNode?.__rf.handleBounds.target
-    : props.nodes.value.targetNode?.__rf.handleBounds.target || props.nodes.value.targetNode?.__rf.handleBounds.source
+    : props.nodes.targetNode?.__rf.handleBounds.target || props.nodes.targetNode?.__rf.handleBounds.source
 
 const sourceHandle =
-  props.nodes.value.sourceNode &&
+  props.nodes.sourceNode && getHandle(props.nodes.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
-  getHandle(props.nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
 const targetHandle = getHandle(targetNodeHandles, props.edge.targetHandle || null)
 const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
 const targetPosition = targetHandle ? targetHandle.position : Position.Top
 
-const isSelected = computed(() => props.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false)
+const isSelected = store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false
-
-const edgeElement = computed(() => {
-  const el: Edge = {
-    id: props.edge.id || '',
-    source: props.edge.source,
-    target: props.edge.target,
-    type: props.edge.type,
-  }
-
-  if (props.edge.sourceHandle) {
-    el.sourceHandle = props.edge.sourceHandle
-  }
-
-  if (props.edge.targetHandle) {
-    el.targetHandle = props.edge.targetHandle
-  }
-
-  if (typeof props.edge.data !== 'undefined') {
-    el.data = props.edge.data
-  }
-
-  return el
-})
 
 const onEdgeClick = (event: MouseEvent) => {
-  if (props.elementsSelectable) {
+  if (store.elementsSelectable) {
     store.unsetNodesSelection()
-    store.addSelectedElements([edgeElement.value])
+    store.addSelectedElements([props.edge])
   }
 
-  hooks.edgeClick.trigger({ event, edge: edgeElement.value })
+  hooks.edgeClick.trigger({ event, edge: props.edge })
 }
 
 const onEdgeContextMenu = (event: MouseEvent) =>
   hooks.edgeContextMenu.trigger({
     event,
-    edge: edgeElement.value,
+    edge: props.edge,
   })
 
-const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: edgeElement.value })
+const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
 
-const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: edgeElement.value })
+const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: props.edge })
 
-const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: edgeElement.value })
+const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
 
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const nodeId = isSourceHandle ? props.edge.target : props.edge.source
@@ -105,7 +74,7 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const isValidConnection = () => true
   const isTarget = isSourceHandle
 
-  hooks.edgeUpdateStart.trigger({ event, edge: edgeElement.value })
+  hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
   handleId &&
     onMouseDown(event, store, hooks, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source')
 }
@@ -121,18 +90,8 @@ const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
 const updating = ref<boolean>(false)
 const onEdgeUpdaterMouseEnter = () => (updating.value = true)
 const onEdgeUpdaterMouseOut = () => (updating.value = false)
-const edgePos = computed(() =>
-  getEdgePositions(
-    props.nodes.value.sourceNode,
-    sourceHandle,
-    sourcePosition,
-    props.nodes.value.targetNode,
-    targetHandle,
-    targetPosition,
-  ),
-)
 const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof getEdgePositions>) => {
-  return props.onlyRenderVisibleElements
+  return store.onlyRenderVisibleElements
     ? isEdgeVisible({
         sourcePos: { x: sourceX, y: sourceY },
         targetPos: { x: targetX, y: targetY },
@@ -142,6 +101,9 @@ const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof get
       })
     : true
 }
+const edgePos = computed(() =>
+  getEdgePositions(props.nodes.sourceNode, sourceHandle, sourcePosition, props.nodes.targetNode, targetHandle, targetPosition),
+)
 const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
 </script>
 <template>
@@ -151,7 +113,7 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
       'revue-flow__edge',
       `revue-flow__edge-${props.type.name || 'default'}`,
       {
-        selected: isSelected.value,
+        selected: isSelected,
         animated: props.edge.animated,
         inactive: !store.elementsSelectable,
         updating: updating.value,
@@ -169,7 +131,7 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
         id: props.edge.id,
         source: props.edge.source,
         target: props.edge.target,
-        selected: isSelected.value,
+        selected: isSelected,
         animated: props.edge.animated,
         label: props.edge.label,
         labelStyle: props.edge.labelStyle,

src/components/Nodes/Node.vue

@@ -1,16 +1,18 @@
 <script lang="ts" setup>
 import { DraggableEventListener } from '@braks/revue-draggable'
-import { Node, NodeDimensionUpdate, NodeType } from '~/types'
+import { Node, NodeDimensionUpdate, NodeType, SnapGrid } from '~/types'
 import { Hooks, Store } from '~/context'
 
 interface NodeProps {
   node: Node
   type: NodeType
+  scale?: number
   selected?: boolean
   draggable?: boolean
   selectable?: boolean
   connectable?: boolean
   selectNodesOnDrag?: boolean
+  snapGrid?: SnapGrid
 }
 
 const props = withDefaults(defineProps<NodeProps>(), {
@@ -19,6 +21,7 @@ const props = withDefaults(defineProps<NodeProps>(), {
   selectable: true,
   connectable: true,
   selectNodesOnDrag: true,
+  scale: 1,
 })
 
 const store = inject(Store)!
@@ -27,34 +30,16 @@ provide('NodeIdContext', props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const onMouseEnterHandler = () => {
+const onMouseEnterHandler = () =>
-  if (props.node.__rf.isDragging) {
+  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
-    return
-  }
 
-  return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node })
+const onMouseMoveHandler = () =>
-}
+  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
 
-const onMouseMoveHandler = () => {
+const onMouseLeaveHandler = () =>
-  if (props.node.__rf.isDragging) {
+  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
-    return
-  }
-
-  return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node })
-}
-
-const onMouseLeaveHandler = () => {
-  if (props.node.__rf.isDragging) {
-    return
-  }
-
-  return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node })
-}
-
-const onContextMenuHandler = () => {
-  return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
-}
 
+const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
 const onSelectNodeHandler = (event: MouseEvent) => {
   if (!props.draggable) {
     const n = props.node
@@ -145,11 +130,10 @@ onMounted(() => {
 
 <template>
   <DraggableCore
-    v-if="!props.node.isHidden"
     cancel=".nodrag"
     :disabled="!props.draggable"
-    :scale="store.transform[2]"
+    :scale="props.scale"
-    :grid="store.snapToGrid ? store.snapGrid : undefined"
+    :grid="props.snapGrid"
     :enable-user-select-hack="false"
     @start="onDragStart"
     @move="onDrag"

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, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
-import { BezierEdge, StepEdge, SmoothStepEdge, 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> => {
+export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
-  const sourceTargetNode: SourceTargetNode = nodes.reduce(
+  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"