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

add svelte version

Browse Source
This commit is contained in:
Alessandro
2025-10-13 16:10:47 +02:00
parent bb9fe4f830
commit 3204173b2c
12 changed files with 236 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/react/src/examples/EdgeToolbar/CustomEdge.tsx
View File

@@ -1,5 +1,4 @@
import { getBezierPath, BaseEdge, EdgeProps, useReactFlow } from '@xyflow/react';
import { EdgeToolbar } from '@xyflow/react';
export function CustomEdge({ id, data, ...props }: EdgeProps) {
@@ -13,7 +12,7 @@ export function CustomEdge({ id, data, ...props }: EdgeProps) {
return (
<>
<BaseEdge id={id} path={edgePath} />
<EdgeToolbar edgeId={id} labelX={labelX} labelY={labelY} isVisible>
<EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
<button onClick={deleteEdge}>Delete</button>
</EdgeToolbar>
</>

31
examples/react/src/examples/EdgeToolbar/index.tsx
View File

@@ -1,15 +1,14 @@
import {
ReactFlow,
MiniMap,
Background,
BackgroundVariant,
Controls,
Node,
Edge,
NodeTypes,
Position,
NodeOrigin,
EdgeTypes,
MiniMap,
Node,
NodeOrigin,
Position,
ReactFlow,
} from '@xyflow/react';
import { CustomEdge } from './CustomEdge';
@@ -28,13 +27,13 @@ const initialNodes: Node[] = [
{
id: '2',
data: { label: 'Node 2', toolbarPosition: Position.Top },
position: { x: 200, y: 0 },
position: { x: 100, y: 150 },
className: 'react-flow__node-default',
},
{
id: '3',
data: { label: 'Node 3', toolbarPosition: Position.Top },
position: { x: 100, y: 150 },
position: { x: 200, y: 0 },
className: 'react-flow__node-default',
},
];
@@ -47,20 +46,20 @@ const initialEdges: Edge[] = [
type: 'custom',
},
{
id: 'e2-3',
source: '2',
target: '3',
id: 'e3-2',
source: '3',
target: '2',
type: 'custom',
},
{
id: 'e3-1',
source: '3',
target: '1',
id: 'e1-3',
source: '1',
target: '3',
type: 'custom',
},
];
const defaultEdgeOptions = { zIndex: 0 };
// const defaultEdgeOptions = { zIndex: 0 };
const nodeOrigin: NodeOrigin = [0.5, 0.5];
export default function EdgeToolbarExample() {
@@ -72,7 +71,7 @@ export default function EdgeToolbarExample() {
minZoom={0.2}
maxZoom={4}
fitView
defaultEdgeOptions={defaultEdgeOptions}
// defaultEdgeOptions={defaultEdgeOptions}
edgeTypes={edgeTypes}
nodeOrigin={nodeOrigin}
>

1
examples/svelte/src/components/Header/Header.svelte
View File

@@ -13,6 +13,7 @@
'detached-handle',
'drag-n-drop',
'edges',
'edge-toolbar',
'figma',
'handle-connect',
'interaction',

62
examples/svelte/src/routes/examples/edge-toolbar/+page.svelte Normal file
View File

@@ -0,0 +1,62 @@
<script lang="ts">
import { Background, Position, SvelteFlow, type Edge, type Node } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
import CustomEdge from './CustomEdge.svelte';
const edgeTypes = {
custom: CustomEdge
};
const initialNodes: Node[] = [
{
id: '1',
data: { label: 'Node 1', toolbarPosition: Position.Top },
position: { x: 0, y: 0 },
class: 'svelte-flow__node-default'
},
{
id: '2',
data: { label: 'Node 2', toolbarPosition: Position.Top },
position: { x: 100, y: 150 },
class: 'svelte-flow__node-default'
},
{
id: '3',
data: { label: 'Node 3', toolbarPosition: Position.Top },
position: { x: 200, y: 0 },
class: 'svelte-flow__node-default'
}
];
const initialEdges: Edge[] = [
{
id: 'e1-2',
source: '1',
target: '2',
type: 'custom'
},
{
id: 'e3-2',
source: '3',
target: '2',
type: 'custom'
},
{
id: 'e1-3',
source: '1',
target: '3',
type: 'custom'
}
];
let nodes = $state.raw<Node[]>(initialNodes);
let edges = $state.raw<Edge[]>(initialEdges);
</script>
<div style="height: 100vh;">
<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
<Background />
</SvelteFlow>
</div>

26
examples/svelte/src/routes/examples/edge-toolbar/CustomEdge.svelte Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts">
import { getBezierPath, BaseEdge, type EdgeProps, useSvelteFlow } from '@xyflow/svelte';
import { EdgeToolbar } from '@xyflow/svelte';
const { deleteElements } = useSvelteFlow();
let { id, sourceX, sourceY, targetX, targetY }: EdgeProps = $props();
let [edgePath, labelX, labelY] = $derived(
getBezierPath({
sourceX,
sourceY,
targetX,
targetY
})
);
const deleteEdge = () => {
deleteElements({ edges: [{ id }] });
};
</script>
<BaseEdge {id} path={edgePath} />
<EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
<button onclick={deleteEdge}>Delete</button>
</EdgeToolbar>

35
packages/react/src/additional-components/EdgeToolbar/EdgeToolbar.tsx
View File

@@ -9,11 +9,32 @@ import { Edge, ReactFlowState } from '../../types';
import type { EdgeToolbarProps } from './types';
const storeSelector = (state: ReactFlowState) => ({
x: state.transform[0],
y: state.transform[1],
zoom: state.transform[2],
});
/**
* This component can render a toolbar or tooltip to one side of a custom edge. This
* toolbar doesn't scale with the viewport so that the content is always visible.
*
* @public
* @example
* ```jsx
* import { EdgeToolbar } from "@xyflow/react";
*
* export function CustomEdge({ id, data, ...props }: EdgeProps) {
* const [edgePath, labelX, labelY] = getBezierPath(props);
*
* return (
* <>
* <BaseEdge id={id} path={edgePath} />
* <EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
* <button onClick={() => {}}>Click me</button>
* </EdgeToolbar>
* </>
* );
* }
* ```
*/
export function EdgeToolbar({
edgeId,
x,
@@ -41,9 +62,6 @@ export function EdgeToolbar({
);
const edge = useStore(edgeSelector);
console.log('edge', edge, edgeId);
const { x, y, zoom } = useStore(storeSelector, shallow);
// if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
const isActive = typeof isVisible === 'boolean' ? isVisible : edge?.selected;
@@ -52,12 +70,11 @@ export function EdgeToolbar({
return null;
}
// TODO: how to get the bounds of an edge?
// const edgeRect = getInternalEdgesBounds(edge.source, edge.target);
// TODO: how to get the z-index of an edge?
const zIndex = edge.zIndex ?? 0 + 1;
const transform = getEdgeToolbarTransform(x, y, { x, y, zoom }, 120, offsetY);
const { zoom } = useStore(storeSelector, shallow);
const transform = getEdgeToolbarTransform(x, y, zoom, offsetX, offsetY);
console.log('transform', transform);
const wrapperStyle: CSSProperties = {
position: 'absolute',

9
packages/react/src/additional-components/EdgeToolbar/types.ts
View File

@@ -6,10 +6,9 @@ import type { Position, Align } from '@xyflow/system';
*/
export type EdgeToolbarProps = HTMLAttributes<HTMLDivElement> & {
/**
* By passing in an array of edge id's you can render a single tooltip for a group or collection
* of edges.
* An edge toolbar must be attached to an edge.
*/
edgeId?: string;
edgeId: string;
/** If `true`, edge toolbar is visible even if edge is not selected. */
isVisible?: boolean;
/**
@@ -41,9 +40,9 @@ export type EdgeToolbarProps = HTMLAttributes<HTMLDivElement> & {
/**
* The `offsetX` position of the edge label relative to the edge in pixels.
*/
offsetX: number;
offsetX?: number;
/**
* The `offsetY` position of the edge label relative to the edge in pixels.
*/
offsetY: number;
offsetY?: number;
};

1
packages/svelte/src/lib/index.ts
View File

@@ -22,6 +22,7 @@ export * from '$lib/plugins/Controls';
export * from '$lib/plugins/Background';
export * from '$lib/plugins/Minimap';
export * from '$lib/plugins/NodeToolbar';
export * from '$lib/plugins/EdgeToolbar';
export * from '$lib/plugins/NodeResizer';
// store

52
packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte Normal file
View File

@@ -0,0 +1,52 @@
<script lang="ts">
import { Position, getEdgeToolbarTransform, getNodeToolbarTransform } from '@xyflow/system';
import { getContext } from 'svelte';
import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
import { useStore } from '$lib/store';
import { EdgeLabel } from '$lib/components/EdgeLabel';
import type { InternalNode } from '$lib/types';
import type { EdgeToolbarProps } from './types';
let {
edgeId,
position = Position.Top,
align = 'center',
x,
y,
offsetX = 0,
offsetY = 0,
isVisible,
children,
...rest
}: EdgeToolbarProps = $props();
const store = useStore();
const edge = store.edgeLookup.get(edgeId ?? '');
// if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
let isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
let zIndex = (edge?.zIndex ?? 0) + 1;
const { zoom } = store.viewport;
const transform = getEdgeToolbarTransform(x, y, zoom, offsetX, offsetY);
</script>
{#if store.domNode && isActive}
<EdgeLabel>
<div
style:position="absolute"
style:transform
style:z-index={zIndex}
{...rest}
class="svelte-flow__edge-toolbar"
data-id={edgeId ?? ''}
>
{@render children?.()}
</div>
</EdgeLabel>
{/if}

2
packages/svelte/src/lib/plugins/EdgeToolbar/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as EdgeToolbar } from './EdgeToolbar.svelte';
export * from './types';

42
packages/svelte/src/lib/plugins/EdgeToolbar/types.ts Normal file
View File

@@ -0,0 +1,42 @@
import type { Position, Align } from '@xyflow/system';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
export type EdgeToolbarProps = {
/**
* An edge toolbar must be attached to an edge.
*/
edgeId: string;
/** If `true`, edge toolbar is visible even if edge is not selected. */
isVisible?: boolean;
/**
* TODO: What and how?? Needed?
* Position of the toolbar relative to the edge.
* @default Position.Top
* @example Position.TopLeft, Position.TopRight, Position.BottomLeft, Position.BottomRight
*/
position?: Position;
/**
* Align the toolbar relative to the edge.
* @default "center"
* @example Align.Start, Align.Center, Align.End
*/
align?: Align;
/**
* The `x` position of the edge label.
*/
x: number;
/**
* The `y` position of the edge label.
*/
y: number;
/**
* The `offsetX` position of the edge label relative to the edge in pixels.
*/
offsetX?: number;
/**
* The `offsetY` position of the edge label relative to the edge in pixels.
*/
offsetY?: number;
children?: Snippet;
} & HTMLAttributes<HTMLDivElement>;

10
packages/system/src/utils/edge-toolbar.ts
View File

@@ -1,12 +1,10 @@
import { type Viewport } from '..';
export function getEdgeToolbarTransform(
labelX: number,
labelY: number,
viewport: Viewport,
x: number,
y: number,
zoom: number,
offsetX: number = 0,
offsetY: number = 0
): string {
// Position the toolbar at the edge label center (scaling is handled by EdgeLabelRenderer)
return `translate(${labelX + offsetX}px, ${labelY + offsetY}px) translate(-50%, -50%) scale(${1 / viewport.zoom})`;
return `translate(${x + offsetX}px, ${y + offsetY}px) translate(-50%, -50%) scale(${1 / zoom})`;
}