add svelte version
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user