chore(examples): cleanup

2023-10-05 17:28:30 +02:00
parent 1acc59e44c
commit 0888f69909
17 changed files with 352 additions and 132 deletions
@@ -0,0 +1,32 @@
+import { memo, type FC, type CSSProperties } from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+
+const sourceHandleStyleA: CSSProperties = { left: 50 };
+const sourceHandleStyleB: CSSProperties = {
+  right: 50,
+  left: 'auto',
+};
+
+const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Top} />
+      <div>
+        <div>
+          Label: <strong>{data.label}</strong>
+        </div>
+        <div>
+          Position:{' '}
+          <strong>
+            {xPos.toFixed(2)},{yPos.toFixed(2)}
+          </strong>
+        </div>
+      </div>
+
+      <Handle type="source" position={Position.Bottom} id="a" style={sourceHandleStyleA} />
+      <Handle type="source" position={Position.Bottom} id="b" style={sourceHandleStyleB} />
+    </>
+  );
+};
+
+export default memo(CustomNode);
@@ -0,0 +1,134 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  useEdgesState,
+  useNodesState,
+  Background,
+  Controls,
+  type Connection,
+  type Edge,
+  type Node,
+  Position,
+} from '@xyflow/react';
+
+import CustomNode from './CustomNode';
+
+import '@xyflow/react/dist/style.css';
+
+const nodeDimensions = {
+  width: 100,
+  height: 40,
+};
+
+const handleSize = 1;
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    dimensions: nodeDimensions,
+    handles: [
+      {
+        type: 'source',
+        position: Position.Bottom,
+        x: nodeDimensions.width * 0.5,
+        y: nodeDimensions.height,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    dimensions: nodeDimensions,
+    handles: [
+      {
+        type: 'source',
+        position: Position.Bottom,
+        x: nodeDimensions.width * 0.5,
+        y: nodeDimensions.height,
+        width: 1,
+        height: 1,
+      },
+      {
+        type: 'target',
+        position: Position.Top,
+        x: nodeDimensions.width * 0.5,
+        y: 0,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+    dimensions: nodeDimensions,
+    handles: [
+      {
+        type: 'source',
+        position: Position.Bottom,
+        x: nodeDimensions.width * 0.5,
+        y: nodeDimensions.height,
+        width: 1,
+        height: 1,
+      },
+      {
+        type: 'target',
+        position: Position.Top,
+        x: nodeDimensions.width * 0.5,
+        y: 0,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 400, y: 200 },
+    type: 'custom',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3', animated: true },
+];
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+function Flow() {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <div style={{ width: 700, height: 400 }}>
+      <ReactFlow
+        nodes={nodes}
+        onNodesChange={onNodesChange}
+        edges={edges}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+        width={700}
+        height={400}
+      >
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export default Flow;
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { SvelteFlow, Controls, Background, BackgroundVariant, Position } from '@xyflow/svelte';
+
+  import '@xyflow/svelte/dist/style.css';
+
+  const nodeDefaults = {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    dimensions: {
+      width: 100,
+      height: 40,
+    },
+    handles: [
+      { type: 'source', x: 100, y: 20, position: Position.Right, width: 1, height: 1 },
+      { type: 'target', x: 0, y: 20, position: Position.Left, width: 1, height: 1 },
+    ],
+  };
+
+  const nodes = writable([
+    {
+      id: '0',
+      position: { x: 0, y: 150 },
+      data: { label: 'Node 0' },
+      ...nodeDefaults,
+    },
+    { id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' }, ...nodeDefaults },
+    { id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' }, ...nodeDefaults },
+    { id: 'C', position: { x: 250, y: 300 }, data: { label: 'C' }, ...nodeDefaults },
+  ]);
+
+  const edges = writable([
+    { id: '0A', source: '0', target: 'A', animated: true },
+    { id: '0B', source: '0', target: 'B', animated: true },
+    { id: '0C', source: '0', target: 'C', animated: true },
+  ]);
+
+  const defaultEdgeOptions = {
+    animated: true,
+  };
+</script>
+
+<SvelteFlow {nodes} {edges} fitView {defaultEdgeOptions}>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+</SvelteFlow>