164 lines
3.3 KiB
TypeScript
164 lines
3.3 KiB
TypeScript
import { MarkerType } from '@xyflow/react';
|
|
|
|
export default {
|
|
flowProps: {
|
|
fitView: true,
|
|
nodes: [
|
|
{
|
|
id: '1',
|
|
data: { label: '1' },
|
|
position: { x: 0, y: 0 },
|
|
type: 'input',
|
|
},
|
|
{
|
|
id: '2',
|
|
data: { label: '2' },
|
|
position: { x: -100, y: 100 },
|
|
},
|
|
{
|
|
id: '3',
|
|
data: { label: '3' },
|
|
position: { x: 100, y: 100 },
|
|
},
|
|
{
|
|
id: '4',
|
|
data: { label: '4' },
|
|
position: { x: -100, y: 200 },
|
|
},
|
|
{
|
|
id: '5',
|
|
data: { label: '5' },
|
|
position: { x: 100, y: 200 },
|
|
},
|
|
{
|
|
id: '6',
|
|
data: { label: '6' },
|
|
position: { x: -100, y: 300 },
|
|
},
|
|
{
|
|
id: '7',
|
|
data: { label: '7' },
|
|
position: { x: 100, y: 300 },
|
|
},
|
|
{
|
|
id: '8',
|
|
data: { label: '8' },
|
|
position: { x: -100, y: 400 },
|
|
},
|
|
{
|
|
id: '9',
|
|
data: { label: '9' },
|
|
position: { x: 100, y: 400 },
|
|
},
|
|
{
|
|
id: '10',
|
|
data: { label: '10' },
|
|
position: { x: -100, y: 500 },
|
|
},
|
|
{
|
|
id: '11',
|
|
data: { label: '11' },
|
|
position: { x: 100, y: 500 },
|
|
},
|
|
// {
|
|
// id: '12',
|
|
// data: { label: '12' },
|
|
// position: { x: -100, y: 600 }
|
|
// },
|
|
// {
|
|
// id: '13',
|
|
// data: { label: '13' },
|
|
// position: { x: 100, y: 600 }
|
|
// }
|
|
],
|
|
edges: [
|
|
{
|
|
id: 'edge-with-class',
|
|
source: '1',
|
|
target: '2',
|
|
className: 'edge-class-test',
|
|
},
|
|
{
|
|
id: 'edge-with-style',
|
|
source: '1',
|
|
target: '3',
|
|
style: {
|
|
stroke: 'red',
|
|
},
|
|
},
|
|
{
|
|
id: 'hidden-edge',
|
|
source: '2',
|
|
target: '4',
|
|
label: 'hidden',
|
|
hidden: true,
|
|
},
|
|
{
|
|
id: 'animated-edge',
|
|
source: '3',
|
|
target: '5',
|
|
label: 'animated',
|
|
animated: true,
|
|
},
|
|
{
|
|
id: 'not-selectable-edge',
|
|
source: '4',
|
|
target: '6',
|
|
label: 'not-selectable',
|
|
selectable: false,
|
|
},
|
|
{
|
|
id: 'not-deletable',
|
|
source: '5',
|
|
target: '7',
|
|
label: 'not-deletable',
|
|
deletable: false,
|
|
},
|
|
{
|
|
id: 'z-index',
|
|
source: '6',
|
|
target: '8',
|
|
label: 'z-index',
|
|
zIndex: 3141592,
|
|
},
|
|
{
|
|
id: 'aria-label',
|
|
source: '7',
|
|
target: '9',
|
|
label: 'aria-label',
|
|
ariaLabel: 'aria-label-test',
|
|
},
|
|
{
|
|
id: 'interaction-width',
|
|
source: '8',
|
|
target: '10',
|
|
label: 'interaction-width',
|
|
interactionWidth: 42,
|
|
},
|
|
{
|
|
id: 'markers',
|
|
source: '9',
|
|
target: '11',
|
|
label: 'markers',
|
|
markerEnd: { type: MarkerType.Arrow },
|
|
markerStart: { type: MarkerType.ArrowClosed },
|
|
},
|
|
// {
|
|
// id: 'updatable',
|
|
// source: '9',
|
|
// target: '11',
|
|
// label: 'focusable',
|
|
// updatable: true
|
|
// },
|
|
// {
|
|
// id: 'not-focusable',
|
|
//
|
|
// source: '5',
|
|
// target: '7',
|
|
// label: 'not-focusable',
|
|
// focusable: false
|
|
// },
|
|
],
|
|
},
|
|
} satisfies FlowConfig;
|