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

added Edge Reconnection

Browse Source
This commit is contained in:
peterkogo
2025-04-11 15:32:07 +02:00
parent d94f3f490a
commit a3e3055186
17 changed files with 314 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
View File

@@ -5,38 +5,21 @@
type EdgeProps,
EdgeLabelRenderer,
useSvelteFlow,
MarkerType
MarkerType,
EdgeReconnectAnchor
} from '@xyflow/svelte';
type $$Props = EdgeProps;
interface Props {
id?: $$Props['id'];
style?: $$Props['style'];
markerEnd?: $$Props['markerEnd'];
sourceX: $$Props['sourceX'];
sourceY: $$Props['sourceY'];
sourcePosition: $$Props['sourcePosition'];
targetX: $$Props['targetX'];
targetY: $$Props['targetY'];
targetPosition: $$Props['targetPosition'];
[key: string]: any;
}
let {
id = '',
style = undefined,
markerEnd = undefined,
style,
markerEnd,
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
...rest
}: Props = $props();
rest;
selected
}: EdgeProps = $props();
let [edgePath, labelX, labelY] = $derived(
getBezierPath({
@@ -50,42 +33,61 @@
);
const { updateEdge } = useSvelteFlow();
let reconnecting = $state(false);
</script>
<BaseEdge path={edgePath} {markerEnd} {style} />
<EdgeLabelRenderer>
<div
class="edgeButtonContainer nodrag nopan"
style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
>
<button
class="edgeButton"
onclick={(event) => {
event.stopPropagation();
updateEdge('e5-6', {
markerEnd: {
type: MarkerType.Arrow,
color: '#FFCC00',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20,
strokeWidth: 2
},
markerStart: {
type: MarkerType.ArrowClosed,
color: '#FFCC00',
orient: 'auto-start-reverse',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20
}
});
}}
{#if !reconnecting}
<BaseEdge path={edgePath} {markerEnd} {style} />
<EdgeLabelRenderer>
<div
class="edgeButtonContainer nodrag nopan"
style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
>
×
</button>
</div>
</EdgeLabelRenderer>
<button
class="edgeButton"
onclick={(event) => {
event.stopPropagation();
updateEdge('e5-6', {
markerEnd: {
type: MarkerType.Arrow,
color: '#FFCC00',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20,
strokeWidth: 2
},
markerStart: {
type: MarkerType.ArrowClosed,
color: '#FFCC00',
orient: 'auto-start-reverse',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20
}
});
}}
>
×
</button>
</div>
</EdgeLabelRenderer>
{/if}
{#if selected}
<EdgeReconnectAnchor
bind:reconnecting
type="source"
position={{ x: sourceX, y: sourceY }}
asDomNode
/>
<EdgeReconnectAnchor
bind:reconnecting
type="target"
position={{ x: targetX, y: targetY }}
asDomNode
/>
{/if}
<style>
.edgeButtonContainer {

54
examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte
View File

@@ -1,57 +1,7 @@
<script lang="ts">
import { BezierEdge, type EdgeProps } from '@xyflow/svelte';
type $$Props = EdgeProps;
interface Props {
label?: $$Props['label'];
labelStyle?: $$Props['labelStyle'];
style?: $$Props['style'];
markerStart?: $$Props['markerStart'];
markerEnd?: $$Props['markerEnd'];
interactionWidth?: $$Props['interactionWidth'];
sourceX: $$Props['sourceX'];
sourceY: $$Props['sourceY'];
sourcePosition: $$Props['sourcePosition'];
targetX: $$Props['targetX'];
targetY: $$Props['targetY'];
targetPosition: $$Props['targetPosition'];
[key: string]: any
}
let {
label = undefined,
labelStyle = undefined,
style = undefined,
markerStart = undefined,
markerEnd = undefined,
interactionWidth = undefined,
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
...rest
}: Props = $props();
rest;
let { ...props }: EdgeProps = $props();
</script>
<BezierEdge
{sourceX}
{sourceY}
{sourcePosition}
{targetX}
{targetY}
{targetPosition}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{style}
{interactionWidth}
pathOptions={{ curvature: 1 }}
/>
<BezierEdge {...props} pathOptions={{ curvature: 1 }} />