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

fix(perfomance): Edge updating too much

Browse Source 
* Edges update constantly even though options aren't really changing
This commit is contained in:
Braks
2021-08-17 22:13:24 +02:00
parent e0bc7e2c96
commit ece1fecbf8
2 changed files with 58 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/Edge.tsx
+52 -63
View File
@@ -1,10 +1,11 @@
import { computed, defineComponent, h, inject, PropType, ref } from 'vue'; import { computed, defineComponent, h, inject, PropType, ref, watchPostEffect } from 'vue';
import EdgeAnchor from './EdgeAnchor'; import EdgeAnchor from './EdgeAnchor';
import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types'; import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks'; import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils'; import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils';
import { isEdge } from '../../utils/graph'; import { isEdge } from '../../utils/graph';
import { onMouseDown } from '../Handle/handler'; import { onMouseDown } from '../Handle/handler';
import { controlledRef } from '@vueuse/core';
interface EdgeProps { interface EdgeProps {
edge: Edge; edge: Edge;
@@ -55,7 +56,15 @@ export default defineComponent({
setup(props) { setup(props) {
const store = inject<RevueFlowStore>('store')!; const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!; const hooks = inject<RevueFlowHooks>('hooks')!;
const nodes = computed(() => getSourceTargetNodes(props.edge, store.nodes)); const nodes = controlledRef(getSourceTargetNodes(props.edge, store.nodes), {
onBeforeChange: (value, oldValue) => {
if (JSON.stringify(value) === JSON.stringify(oldValue)) return false;
}
});
watchPostEffect(() => {
nodes.value = getSourceTargetNodes(props.edge, store.nodes);
});
hooks.connect.on((connection) => { hooks.connect.on((connection) => {
hooks.edgeUpdate.trigger({ edge: props.edge, connection }); hooks.edgeUpdate.trigger({ edge: props.edge, connection });
@@ -70,49 +79,32 @@ export default defineComponent({
} }
// when connection type is loose we can define all handles as sources // when connection type is loose we can define all handles as sources
const targetNodeHandles = () => const targetNodeHandles =
props.connectionMode === ConnectionMode.Strict props.connectionMode === ConnectionMode.Strict
? nodes.value.targetNode?.__rf.handleBounds.target ? nodes.value.targetNode?.__rf.handleBounds.target
: nodes.value.targetNode?.__rf.handleBounds.target || nodes.value.targetNode?.__rf.handleBounds.source; : nodes.value.targetNode?.__rf.handleBounds.target || nodes.value.targetNode?.__rf.handleBounds.source;
const sourceHandle = computed(
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
);
const targetHandle = computed(() => getHandle(targetNodeHandles(), props.edge.targetHandle || null));
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
const edgePositions = computed<{ const sourceHandle =
sourceX: number; nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null);
sourceY: number; const targetHandle = getHandle(targetNodeHandles, props.edge.targetHandle || null);
targetX: number; const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
targetY: number; const targetPosition = targetHandle ? targetHandle.position : Position.Top;
}>(() =>
getEdgePositions(
nodes.value.sourceNode as Node,
sourceHandle.value,
sourcePosition.value,
nodes.value.targetNode as Node,
targetHandle.value,
targetPosition.value
)
);
const isVisible = computed(() => { const isVisible = ({ sourceX, sourceY, targetX, targetY }: Record<string, number>) => {
return props.onlyRenderVisibleElements return props.onlyRenderVisibleElements
? edgePositions.value && ? isEdgeVisible({
isEdgeVisible({ sourcePos: { x: sourceX, y: sourceY },
sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY }, targetPos: { x: targetX, y: targetY },
targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY }, width: store.width || 0,
width: store.width || 0, height: store.height || 0,
height: store.height || 0, transform: store.transform
transform: store.transform })
})
: true; : true;
}); };
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false); const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
const edgeElement = computed<Edge>(() => { const edgeElement = () => {
const el: Edge = { const el: Edge = {
id: props.edge.id || '', id: props.edge.id || '',
source: props.edge.source, source: props.edge.source,
@@ -133,28 +125,28 @@ export default defineComponent({
} }
return el; return el;
}); };
const onEdgeClick = (event: MouseEvent) => { const onEdgeClick = (event: MouseEvent) => {
if (store.elementsSelectable) { if (store.elementsSelectable) {
store.unsetNodesSelection(); store.unsetNodesSelection();
store.addSelectedElements(edgeElement.value as any); store.addSelectedElements(edgeElement() as any);
} }
hooks.edgeClick.trigger({ event, edge: edgeElement.value }); hooks.edgeClick.trigger({ event, edge: edgeElement() });
}; };
const onEdgeContextMenu = (event: MouseEvent) => const onEdgeContextMenu = (event: MouseEvent) =>
hooks.edgeContextMenu.trigger({ hooks.edgeContextMenu.trigger({
event, event,
edge: edgeElement.value edge: edgeElement()
}); });
const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: edgeElement.value }); const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: edgeElement() });
const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: edgeElement.value }); const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: edgeElement() });
const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: edgeElement.value }); const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: edgeElement() });
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => { const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? props.edge.target : props.edge.source; const nodeId = isSourceHandle ? props.edge.target : props.edge.source;
@@ -162,7 +154,7 @@ export default defineComponent({
const isValidConnection = () => true; const isValidConnection = () => true;
const isTarget = isSourceHandle; const isTarget = isSourceHandle;
hooks.edgeUpdateStart.trigger({ event, edge: edgeElement.value }); hooks.edgeUpdateStart.trigger({ event, edge: edgeElement() });
onMouseDown( onMouseDown(
event, event,
store, store,
@@ -187,8 +179,16 @@ export default defineComponent({
const onEdgeUpdaterMouseEnter = () => (updating.value = true); const onEdgeUpdaterMouseEnter = () => (updating.value = true);
const onEdgeUpdaterMouseOut = () => (updating.value = false); const onEdgeUpdaterMouseOut = () => (updating.value = false);
return () => return () => {
!props.edge.isHidden && isVisible.value && edgePositions.value ? ( const { targetX, targetY, sourceX, sourceY } = getEdgePositions(
nodes.value.sourceNode as Node,
sourceHandle,
sourcePosition,
nodes.value.targetNode as Node,
targetHandle,
targetPosition
);
return !props.edge.isHidden && isVisible({ targetX, targetY, sourceX, sourceY }) ? (
<g <g
class={[ class={[
'revue-flow__edge', 'revue-flow__edge',
@@ -223,12 +223,10 @@ export default defineComponent({
data: props.edge.data, data: props.edge.data,
style: props.edge.style, style: props.edge.style,
arrowHeadType: props.edge.arrowHeadType, arrowHeadType: props.edge.arrowHeadType,
sourceX: edgePositions.value.sourceX, sourceX: sourceX,
sourceY: edgePositions.value.sourceY, sourceY: sourceY,
targetX: edgePositions.value.targetX, targetX: targetX,
targetY: edgePositions.value.targetY, targetY: targetY,
sourcePosition: sourcePosition.value,
targetPosition: targetPosition.value,
markerEndId: props.markerEndId, markerEndId: props.markerEndId,
sourceHandleId: props.edge.sourceHandle, sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle targetHandleId: props.edge.targetHandle
@@ -236,24 +234,15 @@ export default defineComponent({
{} {}
)} )}
<g onMousedown={onEdgeUpdaterSourceMouseDown} onMouseenter={onEdgeUpdaterMouseEnter} onMouseout={onEdgeUpdaterMouseOut}> <g onMousedown={onEdgeUpdaterSourceMouseDown} onMouseenter={onEdgeUpdaterMouseEnter} onMouseout={onEdgeUpdaterMouseOut}>
<EdgeAnchor <EdgeAnchor position={sourcePosition} centerX={sourceX} centerY={sourceY} radius={props.edgeUpdaterRadius} />
position={sourcePosition.value}
centerX={edgePositions.value.sourceX}
centerY={edgePositions.value.sourceY}
radius={props.edgeUpdaterRadius}
/>
</g> </g>
<g onMousedown={onEdgeUpdaterTargetMouseDown} onMouseenter={onEdgeUpdaterMouseEnter} onMouseout={onEdgeUpdaterMouseOut}> <g onMousedown={onEdgeUpdaterTargetMouseDown} onMouseenter={onEdgeUpdaterMouseEnter} onMouseout={onEdgeUpdaterMouseOut}>
<EdgeAnchor <EdgeAnchor position={sourcePosition} centerX={sourceX} centerY={sourceY} radius={props.edgeUpdaterRadius} />
position={sourcePosition.value}
centerX={edgePositions.value.sourceX}
centerY={edgePositions.value.sourceY}
radius={props.edgeUpdaterRadius}
/>
</g> </g>
</g> </g>
) : ( ) : (
'' ''
); );
};
} }
}); });
src/container/EdgeRenderer/index.tsx
+6 -11
View File
@@ -1,4 +1,4 @@
import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue'; import { CSSProperties, defineComponent, inject, PropType } from 'vue';
import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types'; import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types';
import ConnectionLine from '../../components/ConnectionLine'; import ConnectionLine from '../../components/ConnectionLine';
import MarkerDefinitions from './MarkerDefinitions'; import MarkerDefinitions from './MarkerDefinitions';
@@ -72,25 +72,20 @@ export default defineComponent({
setup(props) { setup(props) {
const store = inject<RevueFlowStore>('store')!; const store = inject<RevueFlowStore>('store')!;
const transformStyle = computed(() => {
return `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`;
});
const renderConnectionLine = computed(() => store.connectionNodeId && store.connectionHandleType);
return () => ( return () => (
<svg width={store.width} height={store.height} class="revue-flow__edges"> <svg width={store.width} height={store.height} class="revue-flow__edges">
<MarkerDefinitions color={props.arrowHeadColor as string} /> <MarkerDefinitions color={props.arrowHeadColor} />
<g transform={transformStyle.value}> <g transform={`translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`}>
{store.edges.map((edge) => ( {store.edges.map((edge, i) => (
<Edge <Edge
key={edge.id}
edge={edge} edge={edge}
type={props.edgeTypes[edge.type || 'default']} type={props.edgeTypes[edge.type || 'default']}
onlyRenderVisibleElements={props.onlyRenderVisibleElements} onlyRenderVisibleElements={props.onlyRenderVisibleElements}
markerEndId={props.markerEndId} markerEndId={props.markerEndId}
key={edge.id + i}
/> />
))} ))}
{renderConnectionLine.value && ( {store.connectionNodeId && store.connectionHandleType && (
<ConnectionLine <ConnectionLine
connectionLineStyle={props.connectionLineStyle} connectionLineStyle={props.connectionLineStyle}
connectionLineType={props.connectionLineType} connectionLineType={props.connectionLineType}