alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: too many re-render on edges and nodes

Browse Source
This commit is contained in:
Braks
2021-10-20 09:23:00 +02:00
parent fede792a37
commit 17f2517ab4
7 changed files with 57 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/EdgeTypes/EdgeTypesExample.vue
View File

@@ -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>

84
src/components/Edges/Edge.vue
View File

@@ -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,

42
src/components/Nodes/Node.vue
View File

@@ -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"

16
src/container/EdgeRenderer/EdgeRenderer.vue
View File

@@ -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

11
src/container/EdgeRenderer/utils.ts
View File

@@ -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)
}

2
src/container/Flow/Flow.vue
View File

@@ -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"

7
src/container/NodeRenderer/NodeRenderer.vue
View File

@@ -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"