Usage Examples

General example

Simple example for creating 2 nodes and connecting them.

import { NodeflowLib } from "nodeflow-lib";

// Create a canvas with id "main".
// nodeflowData contains the data of the canvas
// Nodeflow is the canvas element (currently a SolidJS component)
const [nodeflowData, Nodeflow] = NodeflowLib.get().createCanvas("main");

// create the nodes
const sourceNode = nodeflowData.addNode({
  position: { x: 100, y: 100 },
  content: (nodeData) => <div>{nodeData.position}</div>,
});
const destinationNode = nodeflowData.addNode({
  position: { x: 400, y: 400 },
  content: (nodeData) => <div>Node 2!</div>,
});

// add a connector section to the nodes
const outputSection = sourceNode.addConnectorSection("output");
const inputSection = node2.addConnectorSection("input");

// add a connector to each connector section
outputSection.addConnector({ id: "source-connector" });
connectorSection2.addConnector({ id: "target-connector" });

// connect the connectors
nodeflowData.addConnection({
  sourceNodeId: sourceNode.id,
  sourceConnectorId: "source-connector",
  destinationNodeId: destinationNode.id,
  destinationConnectorId: "target-connector",
});