Interactions

FlowDiagram({
  data: { nodes, edges },
  viewport: { fitView: true, minZoom: 0.5, maxZoom: 2 },
  interaction: {
    pane: {
      drag: "pan",         // or "select"
      scroll: "zoom",      // or "pan"
      doubleClick: "zoom", // or "none"
      autoPan: { speed: 15 },
    },
  },
});

interaction: {
  touch: true,
  pane: { pinch: true },
  contextMenu: { longPress: 500 }, // ms
}

interaction: {
  drag: { enabled: true, threshold: 1 },
},
on: {
  dragEnd: (_event, node, nodes) => save(nodes),
},

// Keep one node inside its parent
{ id: "a", parentId: "lane", extent: "parent", ... }

interaction: {
  select: { box: true, mode: "partial" },
},
custom: {
  selectionBox: ({ rect }) => MySelectionBox(rect),
},
on: {
  selectionChange: ({ nodes }) => inspector.show(nodes),
},

custom: {
  node: ({ node, isHovered, isNeighbour }) =>
    Card(node.data.label, {
      highlight: isHovered || isNeighbour,
    }),
},

interaction: {
  select: { elevate: true }, // the default
},

// Pin a layer yourself
{ id: "note", zIndex: 10, ... }

interaction: {
  connect: {
    mode: "strict",  // source → target only
    radius: 20,
    onClick: true,   // click two handles
    reconnect: true,
    validate: (c) => c.source !== c.target,
  },
},
on: { connect: (c) => console.log(c) },

const flow = new FlowDiagramController();

FlowDiagram({
  data: { nodes, edges }, controller: flow,
  on: {
    connectEnd: ({ state, dropPosition }) => {
      if (state.toNode) return;
      const id = crypto.randomUUID();
      flow.addNodes({ id, position: dropPosition, data: { label: "New" } });
      flow.addEdges({ id: `e-${id}`, source: state.fromNode.id, target: id });
    },
  },
});

interaction: { contextMenu: { enabled: true, longPress: 500 } },
custom: {
  contextMenu: ({ target, ids, position }, flow) =>
    Menu(position, [
      ["Duplicate", () => flow.duplicate(ids)],
      ["Delete", () => flow.deleteElements(ids)],
    ]),
},

interaction: {
  keys: { delete: ["Backspace", "Delete"] }, // null turns it off
},
on: {
  // false vetoes; a { nodes, edges } object patches
  beforeDelete: ({ nodes }) =>
    nodes.every((node) => node.id !== "start"),
},

interaction: { history: { enabled: true, limit: 100 } },
on: {
  historyChange: ({ canUndo, canRedo }) => toolbar.update(canUndo, canRedo),
},

// From your own buttons
flow.history.undo();
flow.run(() => flow.setNodes(tidy), { history: "merge" });

interaction: {
  clipboard: { offset: { x: 20, y: 20 }, system: false },
  keys: { duplicate: null }, // turn one shortcut off
},

// The same mutations without the keys
const content = flow.getContent(["a", "b"]);
flow.putContent(content, { at: flow.pointerFlowPosition });

interaction: {
  keys: {
    selectAll: "Meta+a",
    nudge: ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"],
    fitView: "Shift+1",
    zoomIn: ["+", "="],
    zoomOut: "-",
    escape: "Escape",
    duplicate: null, // null disables a binding
  },
},

const nodes = [
  { id: "stage", type: "group", width: 300, height: 180, position, data: {} },
  { id: "a", parentId: "stage", position: { x: 20, y: 50 }, data },
  { id: "loose", position: { x: 360, y: 60 }, data },
];

interaction: { drag: { dropIntoGroup: true } },
custom: {
  node: (args, ctx) => args.node.type === "group"
    ? Frame({ glow: args.isDropTarget })
    : defaultNode(args, ctx),
},

import { layeredLayout } from "@flitterjs/diagram";

FlowDiagram({
  data: { nodes, edges },
  layout: {
    algorithm: layeredLayout, // tree, force, grid, circular
    options: { direction: "LR", rankSpacing: 80 },
    runOn: "mount",           // or "manual" + flow.layout()
  },
});

interaction: "viewer",

// Or keep the editor and lock one thing
can: (gesture, target) =>
  !(gesture === "drag" && target.id === "locked"),

interaction: { edit: { text: true } }, // default nodes edit already
custom: {
  node: ({ label }) => Card({ child: label }),
},
on: {
  editEnd: ({ node, committed }) => committed && save(node),
},

interaction: {
  edit: { resize: { minWidth: 80, minHeight: 40 } },
},

// Or per node
{ id: "a", resizable: true, resizeOptions: { keepAspectRatio: true }, ... }

on: {
  resizeEnd: (_event, node, { width, height }) => save(node.id, width, height),
},

interaction: { edit: { waypoints: true } },
edges: [
  { id: "e", source: "a", target: "b", waypoints: [{ x: 200, y: 40 }] },
],
custom: {
  edgeHandle: ({ kind, isActive }) =>
    Dot({ size: kind === "midpoint" ? 6 : 8, filled: isActive }),
},
on: { reshapeEnd: ({ edge }) => save(edge) },

interaction: {
  drag: {
    snap: { grid: [20, 20], guides: true, radius: 5 },
  },
},
custom: {
  guides: ({ lines }) => GuideLines(lines, { color: "#e11d48" }),
},

interaction: {
  drag: { overlap: "push" }, // or "reject", default "allow"
},
custom: {
  node: ({ node, isOverlapping }) =>
    Card(node.data.label, { warn: isOverlapping }),
},

// After a paste or a layout
flow.resolveOverlaps();

{ id: "lead", collapsible: true, position, data }

custom: {
  node: ({ node, isCollapsed, hiddenChildCount }, flow) =>
    Card(node.data.label, {
      badge: isCollapsed ? `+${hiddenChildCount}` : null,
      chevron: Chevron({
        open: !isCollapsed,
        onClick: () => flow.toggleCollapsed(node.id),
      }),
    }),
},
// The default context menu adds Collapse / Expand too

edges: [{ id: "e", source: "a", target: "b", label: "+" }],
custom: {
  // The label slot sits on the edge and keeps its hover
  edgeLabel: ({ edge, isHovered, x, y }, flow) =>
    isHovered
      ? PlusButton(() =>
          flow.insertNodeOnEdge(edge.id, {
            id: crypto.randomUUID(),
            position: { x: x - 75, y: y - 18 },
            data: { label: "New step" },
          }))
      : SizedBox.shrink(),
},

GestureDetector({
  onClick: () =>
    flow.deleteElements(["review"], { reconnect: true }),
  child: Button("Remove review"),
})

const ids = flow.getSelectedNodes().map((node) => node.id);

flow.alignNodes(ids, "left"); // centerX, right, top, centerY, bottom
flow.distributeNodes(ids, "y"); // or "x"