fix: too many re-render on edges and nodes

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>(), {
-  elementsSelectable: true,
-  onlyRenderVisibleElements: false,
-})
+const props = withDefaults(defineProps<EdgeProps>(), {})
 
 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
-    ? props.nodes.value.targetNode?.__rf.handleBounds.target
-    : props.nodes.value.targetNode?.__rf.handleBounds.target || props.nodes.value.targetNode?.__rf.handleBounds.source
+  store.connectionMode === ConnectionMode.Strict
+    ? props.nodes.targetNode?.__rf.handleBounds.target
+    : props.nodes.targetNode?.__rf.handleBounds.target || props.nodes.targetNode?.__rf.handleBounds.source
 
 const sourceHandle =
-  props.nodes.value.sourceNode &&
-  getHandle(props.nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
+  props.nodes.sourceNode && getHandle(props.nodes.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 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 isSelected = store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false
 
 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 = () => {
-  if (props.node.__rf.isDragging) {
-    return
-  }
+const onMouseEnterHandler = () =>
+  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
 
-  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 = () => {
-  if (props.node.__rf.isDragging) {
-    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 onMouseLeaveHandler = () =>
+  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.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]"
-    :grid="store.snapToGrid ? store.snapGrid : undefined"
+    :scale="props.scale"
+    :grid="props.snapGrid"
     :enable-user-select-hack="false"
     @start="onDragStart"
     @move="onDrag"