@tisoap/react-flow-smart-edge/src/stories/DummyData.ts

Custom React Flow Edge that never intersects with other nodes

import { MarkerType } from "@xyflow/react";
import { SmartBezierEdge, SmartStraightEdge, SmartStepEdge } from "../index";
import { SmartEdgeCustomLabel } from "./CustomLabel";
import type { Node, Edge } from "@xyflow/react";

const markerEndType = MarkerType.Arrow;

export const edgeTypes = {
  smartBezier: SmartBezierEdge,
  smartStraight: SmartStraightEdge,
  smartStep: SmartStepEdge,
  smartBezierLabel: SmartEdgeCustomLabel,
};

export const nodes: Node[] = [
  {
    id: "1",
    data: {
      label: "Node 1",
    },
    position: {
      x: 490,
      y: 40,
    },
  },
  {
    id: "2",
    data: {
      label: "Node 2",
    },
    position: {
      x: 270,
      y: 130,
    },
  },
  {
    id: "3",
    data: {
      label: "Node 3",
    },
    position: {
      x: 40,
      y: 220,
    },
  },
  {
    id: "4",
    data: {
      label: "Node 4",
    },
    position: {
      x: 270,
      y: 220,
    },
  },
  {
    id: "5",
    data: {
      label: "Node 5",
    },
    position: {
      x: 470,
      y: 220,
    },
  },
  {
    id: "6",
    data: {
      label: "Node 6",
    },
    position: {
      x: 515,
      y: 310,
    },
  },
  {
    id: "7",
    data: {
      label: "Node 7",
    },
    position: {
      x: 470,
      y: 130,
    },
  },
];

export const edgesBezier: Edge[] = [
  {
    id: "e12",
    source: "1",
    target: "2",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
    label: "Edge Label",
  },
  {
    id: "e17",
    source: "1",
    target: "7",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
  {
    id: "e23",
    source: "2",
    target: "3",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
  {
    id: "e24",
    source: "2",
    target: "4",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
  {
    id: "e25",
    source: "2",
    target: "5",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
  {
    id: "e56",
    source: "5",
    target: "6",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
    data: {
      customField: "custom data",
    },
  },
  {
    id: "e65",
    source: "6",
    target: "5",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
  {
    id: "e61",
    source: "6",
    target: "1",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
  {
    id: "e3",
    source: "3",
    target: "3",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
];

export const edgesStraight: Edge[] = edgesBezier.map((edge) => ({
  ...edge,
  type: "smartStraight",
}));

export const edgesStep: Edge[] = edgesBezier.map((edge) => ({
  ...edge,
  type: "smartStep",
}));

export const edgesLabel: Edge[] = edgesBezier.map((edge) => ({
  ...edge,
  type: "smartBezierLabel",
}));

export const simpleNodes: Node[] = [
  {
    id: "1",
    data: { label: "Node 1 (Below)" },
    position: { x: 300, y: 300 },
  },
  {
    id: "2",
    data: { label: "Node 2 (Above)" },
    position: { x: 300, y: 120 },
  },
];

export const simpleEdgesBezier: Edge[] = [
  {
    id: "e1-2-simple",
    source: "1",
    target: "2",
    type: "smartBezier",
    markerEnd: { type: markerEndType },
  },
];