Nodes and Handles

type FlowNode<TData = Record<string, unknown>> = { id: string; position: XYPosition; data: TData; /* … */ };

const nodes: FlowNode[] = [
  { id: "g", type: "group", position: { x: 0, y: 0 }, width: 320, height: 200, data: {} },
  { id: "a", parentId: "g", extent: "parent", position: { x: 20, y: 40 }, data: { label: "Inside" } },
];

type HandleSpec = {
  id?: string;
  type: "source" | "target";
  position: "top" | "right" | "bottom" | "left";
  align?: number;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  connectable?: boolean;
  data?: unknown;
};

// Three outputs along the bottom of one node
const node: FlowNode = {
  id: "switch",
  position: { x: 0, y: 0 },
  data: { label: "Switch" },
  handles: [
    { type: "target", position: "top" },
    { id: "a", type: "source", position: "bottom", align: 0.2 },
    { id: "b", type: "source", position: "bottom", align: 0.5 },
    { id: "c", type: "source", position: "bottom", align: 0.8 },
  ],
};
 
const edge: FlowEdge = { id: "switch-b", source: "switch", sourceHandle: "b", target: "next" };

type NodeType =
  | NodeBuilder
  | {
      build: NodeBuilder;
      handles?: HandleSpec[] | ((node: FlowNode) => HandleSpec[]);
      toolbar?: NodeToolbarBuilder;
    };
type NodeBuilder = (args: NodeBuilderArgs, context: FlowContext<XyflowFlowConfig>) => Widget;

import { FlowDiagram, xyflowNode } from "flitter-diagram";
 
FlowDiagram({
  nodes,
  edges,
  nodeTypes: {
    default: {
      build: xyflowNode,
      handles: [
        { type: "target", position: "left" },
        { type: "source", position: "right" },
      ],
    },
  },
});

import {
  Border, BorderRadius, BoxDecoration, Column, Container, CrossAxisAlignment,
  EdgeInsets, MainAxisSize, Text, TextStyle, type Widget,
} from "flitter-core";
import {
  FlowDiagram,
  type FlowContext,
  type FlowEdge,
  type FlowNode,
  type HandleSpec,
  type NodeBuilderArgs,
  type XyflowFlowConfig,
} from "flitter-diagram";
 
type TableData = { label: string; fields: { name: string; type: string }[] };
 
const HEADER_HEIGHT = 28;
const ROW_HEIGHT = 22;
 
function tableNode({ node, selected }: NodeBuilderArgs, context: FlowContext<XyflowFlowConfig>): Widget {
  const table = node.data as TableData;
  const { colors } = context.config;
  return Container({
    width: 200,
    decoration: new BoxDecoration({
      color: colors.nodeBackground,
      border: Border.all({ color: selected ? "#3367d9" : colors.nodeBorder }),
      borderRadius: BorderRadius.circular(4),
    }),
    child: Column({
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container({
          height: HEADER_HEIGHT,
          color: "#1a192b",
          padding: EdgeInsets.symmetric({ horizontal: 10, vertical: 7 }),
          child: Text(table.label, {
            style: new TextStyle({ fontSize: 12, fontWeight: "700", color: "#ffffff" }),
          }),
        }),
        ...table.fields.map((field) =>
          Container({
            height: ROW_HEIGHT,
            padding: EdgeInsets.symmetric({ horizontal: 10, vertical: 4 }),
            child: Text(`${field.name}  ${field.type}`, {
              style: new TextStyle({ fontSize: 11, color: colors.nodeColor }),
            }),
          }),
        ),
      ],
    }),
  });
}
 
function tableHandles(node: FlowNode): HandleSpec[] {
  const table = node.data as TableData;
  return table.fields.flatMap((field, index): HandleSpec[] => {
    const y = HEADER_HEIGHT + ROW_HEIGHT * index + ROW_HEIGHT / 2;
    return [
      { id: field.name, type: "target", position: "left", y },
      { id: field.name, type: "source", position: "right", y },
    ];
  });
}
 
const tables: FlowNode[] = [
  {
    id: "posts",
    type: "table",
    position: { x: 0, y: 0 },
    data: { label: "posts", fields: [{ name: "id", type: "int" }, { name: "author_id", type: "int" }] },
  },
  {
    id: "users",
    type: "table",
    position: { x: 300, y: 40 },
    data: { label: "users", fields: [{ name: "id", type: "int" }, { name: "team_id", type: "int" }] },
  },
  {
    id: "teams",
    type: "table",
    position: { x: 600, y: 0 },
    data: { label: "teams", fields: [{ name: "id", type: "int" }, { name: "name", type: "text" }] },
  },
];
 
const relations: FlowEdge[] = [
  { id: "posts-users", source: "posts", sourceHandle: "author_id", target: "users", targetHandle: "id", type: "smoothstep", markerEnd: "arrowclosed" },
  { id: "users-teams", source: "users", sourceHandle: "team_id", target: "teams", targetHandle: "id", type: "smoothstep", markerEnd: "arrowclosed" },
];
 
export const erd = FlowDiagram({
  nodes: tables,
  edges: relations,
  nodeTypes: { table: { build: tableNode, handles: tableHandles } },
  fitView: true,
});

import { BoxDecoration, Container } from "flitter-core";
 
FlowDiagram({
  nodes,
  edges,
  custom: {
    handle: ({ handle, isConnectionCandidate, isValidCandidate }) =>
      Container({
        width: handle.width + 8,
        height: handle.height + 8,
        decoration: new BoxDecoration({
          shape: "circle",
          color: isConnectionCandidate ? (isValidCandidate ? "#22c55e" : "#ef4444") : "#f59e0b",
        }),
      }),
  },
});