add svelte version

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

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

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