alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into perf/noderenderer-minimap

Browse Source
This commit is contained in:
moklick
2023-12-13 16:32:02 +01:00
parent d4484be0c3 58ad111ec3
commit 99a422f9f1
101 changed files with 2671 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+2 -2
View File
@@ -6,7 +6,7 @@
import { errorMessages, getMarkerId } from '@xyflow/system';
import { useStore } from '$lib/store';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import { BezierEdgeInternal } from '$lib/components/edges';
import type { EdgeLayouted, Edge } from '$lib/types';
import { get } from 'svelte/store';
@@ -57,7 +57,7 @@
edgecontextmenu: { edge: Edge; event: MouseEvent };
}>();
$: edgeComponent = $edgeTypes[type!] || BezierEdge;
$: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal;
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
$: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
packages/svelte/src/lib/components/Handle/Handle.svelte
+42 -23
View File
@@ -1,17 +1,18 @@
<script lang="ts">
import { getContext, createEventDispatcher } from 'svelte';
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import cc from 'classcat';
import {
Position,
XYHandle,
isMouseEvent,
type Connection,
type HandleType
areConnectionMapsEqual,
handleConnectionChange
} from '@xyflow/system';
import { useStore } from '$lib/store';
import type { HandleComponentProps } from '$lib/types';
import type { Writable } from 'svelte/store';
type $$Props = HandleComponentProps;
@@ -20,6 +21,8 @@
export let position: $$Props['position'] = Position.Top;
export let style: $$Props['style'] = undefined;
export let isConnectable: $$Props['isConnectable'] = undefined;
export let onconnect: $$Props['onconnect'] = undefined;
export let ondisconnect: $$Props['ondisconnect'] = undefined;
// export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
// export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
@@ -32,18 +35,6 @@
$: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
const handleId = id || null;
const dispatch = createEventDispatcher<{
connect: { connection: Connection };
connectstart: {
event: MouseEvent | TouchEvent;
nodeId: string | null;
handleId: string | null;
handleType: HandleType | null;
};
connectend: {
event: MouseEvent | TouchEvent;
};
}>();
const store = useStore();
const {
@@ -55,10 +46,16 @@
isValidConnection,
lib,
addEdge,
onedgecreate,
panBy,
cancelConnection,
updateConnection,
autoPanOnConnect
autoPanOnConnect,
edges,
connectionLookup,
onconnect: onConnectAction,
onconnectstart: onConnectStartAction,
onconnectend: onConnectEndAction
} = store;
function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -80,28 +77,50 @@
cancelConnection,
panBy,
onConnect: (connection) => {
addEdge(connection);
const edge = $onedgecreate ? $onedgecreate(connection) : connection;
// @todo: should we change/ improve the stuff we are passing here?
// instead of source/target we could pass fromNodeId, fromHandleId, etc
dispatch('connect', { connection });
if (!edge) {
return;
}
addEdge(edge);
$onConnectAction?.(connection);
},
onConnectStart: (event, startParams) => {
dispatch('connectstart', {
event,
$onConnectStartAction?.(event, {
nodeId: startParams.nodeId,
handleId: startParams.handleId,
handleType: startParams.handleType
});
},
onConnectEnd: (event) => {
dispatch('connectend', { event });
$onConnectEndAction?.(event);
},
getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom]
});
}
}
let prevConnections: Map<string, Connection> | null = null;
let connections: Map<string, Connection> | undefined;
$: if (onconnect || ondisconnect) {
// connectionLookup is not reactive, so we use edges to get notified about updates
$edges;
connections = $connectionLookup.get(`${nodeId}-${type}-${id || null}`);
}
$: {
if (prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
const _connections = connections ?? new Map();
handleConnectionChange(prevConnections, _connections, ondisconnect);
handleConnectionChange(_connections, prevConnections, onconnect);
}
prevConnections = connections ?? new Map();
}
// @todo implement connectablestart, connectableend
</script>
packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+23 -12
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut';
import { isInputDOMNode, isMacOs } from '@xyflow/system';
import { useStore } from '$lib/store';
import type { KeyHandlerProps } from './types';
import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
import { isMacOs } from '@xyflow/system';
type $$Props = KeyHandlerProps;
@@ -23,7 +23,7 @@
} = useStore();
function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
return typeof key === 'object';
return key !== null && typeof key === 'object';
}
function getModifier(key?: KeyDefinition | null): ShortcutModifierDefinition {
@@ -71,16 +71,19 @@
trigger: [
{
...selectionKeyDefinition,
callback: () => selectionKeyDefinition.key && selectionKeyPressed.set(true)
enabled: selectionKeyDefinition.key !== null,
callback: () => selectionKeyPressed.set(true)
}
],
type: 'keydown'
}}
use:shortcut={{
trigger: [
{
...selectionKeyDefinition,
callback: () => selectionKeyDefinition.key && selectionKeyPressed.set(false)
enabled: selectionKeyDefinition.key !== null,
callback: () => selectionKeyPressed.set(false)
}
],
type: 'keyup'
@@ -89,7 +92,8 @@
trigger: [
{
...multiSelectionKeyDefinition,
callback: () => multiSelectionKeyDefinition.key && multiselectionKeyPressed.set(true)
enabled: multiSelectionKeyDefinition.key !== null,
callback: () => multiselectionKeyPressed.set(true)
}
],
type: 'keydown'
@@ -98,7 +102,8 @@
trigger: [
{
...multiSelectionKeyDefinition,
callback: () => multiSelectionKeyDefinition.key && multiselectionKeyPressed.set(false)
enabled: multiSelectionKeyDefinition.key !== null,
callback: () => multiselectionKeyPressed.set(false)
}
],
type: 'keyup'
@@ -107,7 +112,8 @@
trigger: [
{
...deleteKeyDefinition,
callback: () => deleteKeyDefinition.key && deleteKeyPressed.set(true)
enabled: deleteKeyDefinition.key !== null,
callback: (detail) => !isInputDOMNode(detail.originalEvent) && deleteKeyPressed.set(true)
}
],
type: 'keydown'
@@ -116,7 +122,8 @@
trigger: [
{
...deleteKeyDefinition,
callback: () => deleteKeyDefinition.key && deleteKeyPressed.set(false)
enabled: deleteKeyDefinition.key !== null,
callback: () => deleteKeyPressed.set(false)
}
],
type: 'keyup'
@@ -125,7 +132,8 @@
trigger: [
{
...panActivationKeyDefinition,
callback: () => panActivationKeyDefinition.key && panActivationKeyPressed.set(true)
enabled: panActivationKeyDefinition.key !== null,
callback: () => panActivationKeyPressed.set(true)
}
],
type: 'keydown'
@@ -134,7 +142,8 @@
trigger: [
{
...panActivationKeyDefinition,
callback: () => panActivationKeyDefinition.key && panActivationKeyPressed.set(false)
enabled: panActivationKeyDefinition.key !== null,
callback: () => panActivationKeyPressed.set(false)
}
],
type: 'keyup'
@@ -143,7 +152,8 @@
trigger: [
{
...zoomActivationKeyDefinition,
callback: () => zoomActivationKeyDefinition.key && zoomActivationKeyPressed.set(true)
enabled: zoomActivationKeyDefinition.key !== null,
callback: () => zoomActivationKeyPressed.set(true)
}
],
type: 'keydown'
@@ -152,7 +162,8 @@
trigger: [
{
...zoomActivationKeyDefinition,
callback: () => zoomActivationKeyDefinition.key && zoomActivationKeyPressed.set(false)
enabled: zoomActivationKeyDefinition.key !== null,
callback: () => zoomActivationKeyPressed.set(false)
}
],
type: 'keyup'
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
-3
View File
@@ -194,9 +194,6 @@
positionAbsolute={{ x: positionX, y: positionY }}
{width}
{height}
on:connectstart
on:connect
on:connectend
/>
</div>
{/if}
packages/svelte/src/lib/components/edges/BezierEdge.svelte
+33 -15
View File
@@ -1,30 +1,48 @@
<script lang="ts">
import { getBezierPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { BezierEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = BezierEdgeProps;
export let id: $$Props['id'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let pathOptions: $$Props['pathOptions'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
$: [path, labelX, labelY] = getBezierPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
curvature: pathOptions?.curvature
});
</script>
<BaseEdge
{id}
{path}
{labelX}
{labelY}
id={$$props.id}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
+63
View File
@@ -0,0 +1,63 @@
<script lang="ts">
import { getBezierPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition
});
// hopefully with Svelte5, we don't need this kind of workaround anymore
id;
source;
target;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+34 -15
View File
@@ -1,30 +1,49 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { SmoothStepEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = SmoothStepEdgeProps;
export let id: $$Props['id'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let pathOptions: $$Props['pathOptions'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
borderRadius: pathOptions?.borderRadius,
offset: pathOptions?.offset
});
</script>
<BaseEdge
{id}
{path}
{labelX}
{labelY}
id={$$props.id}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
+63
View File
@@ -0,0 +1,63 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition
});
id;
source;
target;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/StepEdge.svelte
+34 -16
View File
@@ -1,31 +1,49 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { StepEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = StepEdgeProps;
export let id: $$Props['id'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let pathOptions: $$Props['pathOptions'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition,
borderRadius: 0
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
borderRadius: 0,
offset: pathOptions?.offset
});
</script>
<BaseEdge
{id}
{path}
{labelX}
{labelY}
id={$$props.id}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
+64
View File
@@ -0,0 +1,64 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let data: $$Props['data'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
borderRadius: 0
});
id;
source;
target;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/StraightEdge.svelte
+27 -13
View File
@@ -1,28 +1,42 @@
<script lang="ts">
import { getStraightPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { StraightEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = StraightEdgeProps;
export let id: $$Props['id'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
$: [path, labelX, labelY] = getStraightPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY
sourceX,
sourceY,
targetX,
targetY
});
</script>
<BaseEdge
{id}
{path}
{labelX}
{labelY}
id={$$props.id}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
+63
View File
@@ -0,0 +1,63 @@
<script lang="ts">
import { getStraightPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getStraightPath({
sourceX,
sourceY,
targetX,
targetY
});
id;
source;
target;
animated;
selected;
data;
sourcePosition;
targetPosition;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>
packages/svelte/src/lib/components/edges/index.ts
+14 -1
View File
@@ -1,4 +1,17 @@
// We distinguish between internal and exported edges
// The internal edges are used directly like custom edges and always get an id, source and target props
// If you import an edge from the library, the id is optional and source and target are not used at all
// @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
// both are quite similar, it's just about 1-2 props that are different
export { default as BezierEdge } from './BezierEdge.svelte';
export { default as StraightEdge } from './StraightEdge.svelte';
export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
export { default as StraightEdge } from './StraightEdge.svelte';
export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
export { default as StepEdge } from './StepEdge.svelte';
export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';
packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+2 -2
View File
@@ -37,6 +37,6 @@
isConnectable;
</script>
<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
<Handle type="target" position={targetPosition} />
{data?.label}
<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />
<Handle type="source" position={sourcePosition} />
packages/svelte/src/lib/components/nodes/InputNode.svelte
+1 -1
View File
@@ -39,4 +39,4 @@
</script>
{data?.label}
<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />
<Handle type="source" position={sourcePosition} />
packages/svelte/src/lib/components/nodes/OutputNode.svelte
+1 -1
View File
@@ -36,4 +36,4 @@
</script>
{data?.label}
<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
<Handle type="target" position={targetPosition} />
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
-3
View File
@@ -83,9 +83,6 @@
on:nodemouseenter
on:nodemousemove
on:nodemouseleave
on:connectstart
on:connect
on:connectend
on:nodedrag
on:nodedragstart
on:nodedragstop
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+9 -4
View File
@@ -71,12 +71,16 @@
export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
export let onerror: $$Props['onerror'] = undefined;
export let ondelete: $$Props['ondelete'] = undefined;
export let onedgecreate: $$Props['onedgecreate'] = undefined;
export let attributionPosition: $$Props['attributionPosition'] = undefined;
export let proOptions: $$Props['proOptions'] = undefined;
export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let colorMode: $$Props['colorMode'] = 'light';
export let onconnect: $$Props['onconnect'] = undefined;
export let onconnectstart: $$Props['onconnectstart'] = undefined;
export let onconnectend: $$Props['onconnectend'] = undefined;
export let defaultMarkerColor = '#b1b1b7';
@@ -149,8 +153,12 @@
autoPanOnNodeDrag,
onerror,
ondelete,
onedgecreate,
connectionMode,
nodeDragThreshold
nodeDragThreshold,
onconnect,
onconnectstart,
onconnectend
};
updateStoreByKeys(store, updatableProps);
@@ -215,9 +223,6 @@
on:nodemouseenter
on:nodemousemove
on:nodemouseleave
on:connectstart
on:connect
on:connectend
on:nodedragstart
on:nodedrag
on:nodedragstop
packages/svelte/src/lib/container/SvelteFlow/types.ts
+12 -2
View File
@@ -15,7 +15,10 @@ import type {
ConnectionMode,
PanelPosition,
ProOptions,
ColorMode
ColorMode,
OnConnect,
OnConnectStart,
OnConnectEnd
} from '@xyflow/system';
import type {
@@ -26,7 +29,8 @@ import type {
EdgeTypes,
DefaultEdgeOptions,
FitViewOptions,
OnDelete
OnDelete,
OnEdgeCreate
} from '$lib/types';
import type { Writable } from 'svelte/store';
@@ -89,4 +93,10 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
onMoveEnd?: OnMoveEnd;
onerror?: OnError;
ondelete?: OnDelete;
onedgecreate?: OnEdgeCreate;
onconnect?: OnConnect;
onconnectstart?: OnConnectStart;
onconnectend?: OnConnectEnd;
};
packages/svelte/src/lib/container/SvelteFlow/utils.ts
+4
View File
@@ -64,7 +64,11 @@ export type UpdatableStoreProps = {
connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
onerror?: UnwrapWritable<SvelteFlowStore['onerror']>;
ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>;
onedgecreate?: UnwrapWritable<SvelteFlowStore['onedgecreate']>;
nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>;
onconnect?: UnwrapWritable<SvelteFlowStore['onconnect']>;
onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
};
export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
packages/svelte/src/lib/hooks/useHandleConnections.ts
+30
View File
@@ -0,0 +1,30 @@
import { derived } from 'svelte/store';
import { areConnectionMapsEqual, type Connection, type HandleType } from '@xyflow/system';
import { useStore } from '$lib/store';
export type useHandleConnectionsParams = {
nodeId: string;
type: HandleType;
id?: string | null;
};
const initialConnections: Connection[] = [];
export function useHandleConnections({ nodeId, type, id = null }: useHandleConnectionsParams) {
const { edges, connectionLookup } = useStore();
let prevConnections: Map<string, Connection> | undefined = undefined;
return derived(
[edges, connectionLookup],
([, connectionLookup], set) => {
const nextConnections = connectionLookup.get(`${nodeId}-${type}-${id || null}`);
if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
prevConnections = nextConnections;
set(Array.from(prevConnections?.values() || []));
}
},
initialConnections
);
}
packages/svelte/src/lib/hooks/useNodesData.ts
+64
View File
@@ -0,0 +1,64 @@
import { derived, type Readable } from 'svelte/store';
import type { Node } from '$lib/types';
import { useStore } from '$lib/store';
function areNodesDataEqual(a: Node['data'][] | null, b: Node['data'][] | null) {
if ((!a && !b) || (!a?.length && !b?.length)) {
true;
}
if (!a || !b || a.length !== b.length) {
return false;
}
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}
export function useNodesData<NodeType extends Node = Node>(
nodeId: string
): Readable<NodeType['data'] | null>;
export function useNodesData<NodeType extends Node = Node>(
nodeIds: string[]
): Readable<NodeType['data'][]>;
export function useNodesData<NodeType extends Node = Node>(
nodeIds: string[],
guard: (node: Node) => node is NodeType
): Readable<NodeType['data'][]>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useNodesData(nodeIds: any): any {
const { nodes, nodeLookup } = useStore();
let prevNodesData: (Node['data'] | null)[] | null = null;
return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
let nextNodesData: (Node['data'] | null)[] | null = null;
const nodeIdArray = Array.isArray(nodeIds);
if (!nodeIdArray) {
nextNodesData = [nodeLookup.get(nodeIds)?.data || null];
} else {
const data = [];
for (const nodeId of nodeIds) {
const nodeData = nodeLookup.get(nodeId)?.data;
if (nodeData) {
data.push(nodeData);
}
}
nextNodesData = data;
}
if (!areNodesDataEqual(nextNodesData, prevNodesData)) {
prevNodesData = nextNodesData;
set(nodeIdArray ? nextNodesData : nextNodesData[0]);
}
});
}
packages/svelte/src/lib/hooks/useSvelteFlow.ts
+41 -30
View File
@@ -1,7 +1,5 @@
import { get, type Writable } from 'svelte/store';
import {
getIncomersBase,
getOutgoersBase,
getOverlappingArea,
isRectObject,
nodeToRect,
@@ -20,6 +18,7 @@ import {
import { useStore } from '$lib/store';
import type { Edge, FitViewOptions, Node } from '$lib/types';
import { isNode } from '$lib/utils';
export function useSvelteFlow(): {
zoomIn: ZoomInOut;
@@ -48,9 +47,16 @@ export function useSvelteFlow(): {
screenToFlowPosition: (position: XYPosition) => XYPosition;
flowToScreenPosition: (position: XYPosition) => XYPosition;
viewport: Writable<Viewport>;
getConnectedEdges: (id: string | (Node | { id: Node['id'] })[]) => Edge[];
getIncomers: (node: string | Node | { id: Node['id'] }) => Node[];
getOutgoers: (node: string | Node | { id: Node['id'] }) => Node[];
updateNode: (
id: string,
nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
options?: { replace: boolean }
) => void;
updateNodeData: (
id: string,
dataUpdate: object | ((node: Node) => object),
options?: { replace: boolean }
) => void;
toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
} {
const {
@@ -84,6 +90,24 @@ export function useSvelteFlow(): {
return [nodeRect, node, isRect];
};
const updateNode = (
id: string,
nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
options: { replace: boolean } = { replace: false }
) => {
nodes.update((nds) =>
nds.map((node) => {
if (node.id === id) {
const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
}
return node;
})
);
};
return {
zoomIn,
zoomOut,
@@ -136,12 +160,12 @@ export function useSvelteFlow(): {
) => {
const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
if (!nodeRect || !node) {
if (!nodeRect) {
return [];
}
return (nodesToIntersect || get(nodes)).filter((n) => {
if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) {
if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
return false;
}
@@ -232,29 +256,6 @@ export function useSvelteFlow(): {
y: rendererPosition.y + domY
};
},
getConnectedEdges: (node) => {
const nodeIds = new Set();
if (typeof node === 'string') {
nodeIds.add(node);
} else if (node.length >= 1) {
node.forEach((n) => {
nodeIds.add(n.id);
});
}
return get(edges).filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
},
getIncomers: (node) => {
const _node = typeof node === 'string' ? { id: node } : node;
return getIncomersBase(_node, get(nodes), get(edges));
},
getOutgoers: (node) => {
const _node = typeof node === 'string' ? { id: node } : node;
return getOutgoersBase(_node, get(nodes), get(edges));
},
toObject: () => {
return {
nodes: get(nodes).map((node) => ({
@@ -268,6 +269,16 @@ export function useSvelteFlow(): {
viewport: { ...get(viewport) }
};
},
updateNode,
updateNodeData: (id, dataUpdate, options) => {
updateNode(id, (node) => {
const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
return options?.replace
? { ...node, data: nextData }
: { ...node, data: { ...node.data, ...nextData } };
});
},
viewport
};
}
packages/svelte/src/lib/index.ts
+13 -2
View File
@@ -7,7 +7,7 @@ export * from '$lib/container/Panel';
export * from '$lib/components/SvelteFlowProvider';
export * from '$lib/components/EdgeLabelRenderer';
export * from '$lib/components/BaseEdge';
export * from '$lib/components/edges';
export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
export * from '$lib/components/Handle';
// plugins
@@ -27,9 +27,20 @@ export * from '$lib/hooks/useSvelteFlow';
export * from '$lib/hooks/useUpdateNodeInternals';
export * from '$lib/hooks/useConnection';
export * from '$lib/hooks/useNodesEdges';
export * from '$lib/hooks/useHandleConnections';
export * from '$lib/hooks/useNodesData';
// types
export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';
export type {
Edge,
EdgeProps,
BezierEdgeProps,
SmoothStepEdgeProps,
StepEdgeProps,
StraightEdgeProps,
EdgeTypes,
DefaultEdgeOptions
} from '$lib/types/edges';
export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes';
export type { SvelteFlowStore } from '$lib/store/types';
packages/svelte/src/lib/plugins/Background/Background.svelte
+2 -2
View File
@@ -45,8 +45,8 @@
<svg
class={cc(['svelte-flow__background', className])}
data-testid="svelte-flow__background"
style:--background-color-props={bgColor}
style:--background-pattern-color-props={patternColor}
style:--xy-background-color-props={bgColor}
style:--xy-background-pattern-color-props={patternColor}
>
<pattern
id={patternId}
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+5 -5
View File
@@ -15,11 +15,11 @@
type="button"
on:click
class={cc(['svelte-flow__controls-button', className])}
style:--controls-button-background-color-props={bgColor}
style:--controls-button-background-color-hover-props={bgColorHover}
style:--controls-button-color-props={color}
style:--controls-button-color-hover-props={colorHover}
style:--controls-button-border-color-props={borderColor}
style:--xy-controls-button-background-color-props={bgColor}
style:--xy-controls-button-background-color-hover-props={bgColorHover}
style:--xy-controls-button-color-props={color}
style:--xy-controls-button-color-hover-props={colorHover}
style:--xy-controls-button-border-color-props={borderColor}
{...$$restProps}
>
<slot class="button-svg" />
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+4 -4
View File
@@ -94,10 +94,10 @@
viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
role="img"
aria-labelledby={labelledBy}
style:--minimap-background-color-props={bgColor}
style:--minimap-mask-color-props={maskColor}
style:--minimap-mask-stroke-color-props={maskStrokeColor}
style:--minimap-mask-stroke-width-props={maskStrokeWidth}
style:--xy-minimap-background-color-props={bgColor}
style:--xy-minimap-mask-color-props={maskColor}
style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth}
use:interactive={{
panZoom: $panZoom,
viewport,
packages/svelte/src/lib/store/index.ts
+13 -8
View File
@@ -192,15 +192,20 @@ export function createStore({
}
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
const nodeIdsToUnselect = (params?.nodes ? params.nodes : get(store.nodes)).map(
(item) => item.id
);
const edgeIdsToUnselect = (params?.edges ? params.edges : get(store.edges)).map(
(item) => item.id
);
const selectedNodeIds = (params?.nodes ? params.nodes : get(store.nodes))
.filter((node) => node.selected)
.map((node) => node.id);
const selectedEdgeIds = (params?.edges ? params.edges : get(store.edges))
.filter((edge) => edge.selected)
.map((edge) => edge.id);
store.nodes.update((ns) => ns.map(resetSelectedItem(nodeIdsToUnselect)));
store.edges.update((es) => es.map(resetSelectedItem(edgeIdsToUnselect)));
if (selectedNodeIds.length) {
store.nodes.update((ns) => ns.map(resetSelectedItem(selectedNodeIds)));
}
if (selectedEdgeIds.length) {
store.edges.update((es) => es.map(resetSelectedItem(selectedEdgeIds)));
}
}
store.deleteKeyPressed.subscribe((deleteKeyPressed) => {
packages/svelte/src/lib/store/initial-store.ts
+29 -13
View File
@@ -17,17 +17,26 @@ import {
type Viewport,
adoptUserProvidedNodes,
getNodesBounds,
getViewportForBounds
getViewportForBounds,
updateConnectionLookup,
type ConnectionLookup,
type OnConnect,
type OnConnectStart,
type OnConnectEnd
} from '@xyflow/system';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import InputNode from '$lib/components/nodes/InputNode.svelte';
import OutputNode from '$lib/components/nodes/OutputNode.svelte';
import GroupNode from '$lib/components/nodes/GroupNode.svelte';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
import StepEdge from '$lib/components/edges/StepEdge.svelte';
import {
BezierEdgeInternal,
SmoothStepEdgeInternal,
StraightEdgeInternal,
StepEdgeInternal
} from '$lib/components/edges';
import type {
NodeTypes,
EdgeTypes,
@@ -35,7 +44,8 @@ import type {
Node,
Edge,
FitViewOptions,
OnDelete
OnDelete,
OnEdgeCreate
} from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -48,10 +58,10 @@ export const initialNodeTypes = {
};
export const initialEdgeTypes = {
straight: StraightEdge,
smoothstep: SmoothStepEdge,
default: BezierEdge,
step: StepEdge
straight: StraightEdgeInternal,
smoothstep: SmoothStepEdgeInternal,
default: BezierEdgeInternal,
step: StepEdgeInternal
};
export const getInitialStore = ({
@@ -67,11 +77,12 @@ export const getInitialStore = ({
height?: number;
fitView?: boolean;
}) => {
const nodeLookup = new Map<string, Node>();
const nodeLookup = new Map();
const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
nodeOrigin: [0, 0],
elevateNodesOnSelect: false
});
const connectionLookup = updateConnectionLookup(new Map(), edges);
let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -86,8 +97,9 @@ export const getInitialStore = ({
nodes: createNodesStore(nextNodes, nodeLookup),
nodeLookup: readable<Map<string, Node>>(nodeLookup),
visibleNodes: readable<Node[]>([]),
edges: createEdgesStore(edges),
edges: createEdgesStore(edges, connectionLookup),
edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
connectionLookup: readable<ConnectionLookup>(connectionLookup),
height: writable<number>(500),
width: writable<number>(500),
minZoom: writable<number>(0.5),
@@ -130,6 +142,10 @@ export const getInitialStore = ({
lib: readable<string>('svelte'),
onlyRenderVisibleElements: writable<boolean>(false),
onerror: writable<OnError>(devWarn),
ondelete: writable<OnDelete>(undefined)
ondelete: writable<OnDelete>(undefined),
onedgecreate: writable<OnEdgeCreate>(undefined),
onconnect: writable<OnConnect>(undefined),
onconnectstart: writable<OnConnectStart>(undefined),
onconnectend: writable<OnConnectEnd>(undefined)
};
};
packages/svelte/src/lib/store/utils.ts
+13 -1
View File
@@ -6,7 +6,15 @@ import {
type Writable,
get
} from 'svelte/store';
import { adoptUserProvidedNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
import {
adoptUserProvidedNodes,
updateConnectionLookup,
type Viewport,
type PanZoomInstance,
type Viewport,
type PanZoomInstance,
type ConnectionLookup
} from '@xyflow/system';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
@@ -168,6 +176,7 @@ export const createNodesStore = (
export const createEdgesStore = (
edges: Edge[],
connectionLookup: ConnectionLookup,
defaultOptions?: DefaultEdgeOptions
): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
const { subscribe, set, update } = writable<Edge[]>([]);
@@ -176,6 +185,9 @@ export const createEdgesStore = (
const _set: typeof set = (eds: Edge[]) => {
const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
updateConnectionLookup(connectionLookup, nextEdges);
value = nextEdges;
set(value);
};
packages/svelte/src/lib/types/edges.ts
+30 -2
View File
@@ -5,7 +5,9 @@ import type {
BezierPathOptions,
DefaultEdgeOptionsBase,
EdgePosition,
SmoothStepPathOptions
SmoothStepPathOptions,
Optional,
StepPathOptions
} from '@xyflow/system';
import type { Node } from '$lib/types';
@@ -29,6 +31,7 @@ type BezierEdgeType<T> = DefaultEdge<T> & {
type StepEdgeType<T> = DefaultEdge<T> & {
type: 'step';
pathOptions?: StepPathOptions;
};
export type Edge<T = any> =
@@ -37,7 +40,7 @@ export type Edge<T = any> =
| BezierEdgeType<T>
| StepEdgeType<T>;
export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
EdgePosition & {
markerStart?: string;
markerEnd?: string;
@@ -45,6 +48,31 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
targetHandleId?: string | null;
};
export type EdgeComponentProps<T = any> = Optional<
Omit<
EdgeProps<T>,
'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data'
>,
'id'
>;
export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: BezierPathOptions;
};
export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: SmoothStepPathOptions;
};
export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: StepPathOptions;
};
export type StraightEdgeProps<T = any> = Omit<
EdgeComponentProps<T>,
'sourcePosition' | 'targetPosition'
>;
export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;
packages/svelte/src/lib/types/general.ts
+5 -1
View File
@@ -4,7 +4,8 @@ import type {
HandleType,
Position,
XYPosition,
ConnectingHandle
ConnectingHandle,
Connection
} from '@xyflow/system';
import type { Node } from './nodes';
@@ -30,8 +31,11 @@ export type HandleComponentProps = {
isConnectable?: boolean;
isConnectableStart?: boolean;
isConnectableEnd?: boolean;
onconnect?: (connections: Connection[]) => void;
ondisconnect?: (connections: Connection[]) => void;
};
export type FitViewOptions = FitViewOptionsBase<Node>;
export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;
packages/svelte/src/lib/utils/index.ts
+2 -2
View File
@@ -10,8 +10,8 @@ import {
import type { Edge, Node } from '$lib/types';
export const isNode = isNodeBase<Node, Edge>;
export const isEdge = isEdgeBase<Node, Edge>;
export const isNode = isNodeBase<Node>;
export const isEdge = isEdgeBase<Edge>;
export const getOutgoers = getOutgoersBase<Node, Edge>;
export const getIncomers = getIncomersBase<Node, Edge>;
export const addEdge = addEdgeBase<Edge>;