b8affc1c82
* Added NodeToolbar * Added comments & fixed default behaviour in svelte * Added e2e-tests for NodeToolbar component & added data-id to react NodeToolbar * refactor(svelte/NodeToolbar): cleanup * refactor(node-toolbar): add system utils --------- Co-authored-by: moklick <info@moritzklack.com>
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { Position, type Node } from '@xyflow/react';
|
|
import ToolbarNode from './components/ToolbarNode';
|
|
|
|
const positions = ['top', 'right', 'bottom', 'left'];
|
|
const alignments = ['start', 'center', 'end'];
|
|
|
|
const nodes: Node[] = [
|
|
{
|
|
id: 'default-node',
|
|
type: 'ToolbarNode',
|
|
data: { label: 'toolbar top', toolbarPosition: Position.Top },
|
|
position: { x: 0, y: -200 },
|
|
className: 'react-flow__node-default',
|
|
},
|
|
];
|
|
|
|
positions.forEach((position, posIndex) => {
|
|
alignments.forEach((align, alignIndex) => {
|
|
const id = `node-${align}-${position}`;
|
|
nodes.push({
|
|
id,
|
|
type: 'ToolbarNode',
|
|
data: {
|
|
label: `toolbar ${position} ${align}`,
|
|
toolbarPosition: position as Position,
|
|
toolbarAlign: align,
|
|
toolbarVisible: true,
|
|
},
|
|
className: 'react-flow__node-default',
|
|
position: { x: posIndex * 300, y: alignIndex * 100 },
|
|
});
|
|
});
|
|
});
|
|
|
|
export default {
|
|
flowProps: {
|
|
fitView: true,
|
|
nodeTypes: {
|
|
ToolbarNode,
|
|
},
|
|
nodes,
|
|
edges: [
|
|
{
|
|
id: 'first-edge',
|
|
source: 'default-node',
|
|
target: 'node-start-top',
|
|
},
|
|
],
|
|
},
|
|
} satisfies FlowConfig;
|