Quickstart

Install the package

npm install oura-node-editor

Basic component

import { NodeEditor, PinLayout, useNodeEditor } from "oura-node-editor";
import { useEffect } from "react";

function BasicNodeEditorDisplayer() {
  const {
    nodes,
    links,
    panZoomInfo,
    selectedItems,
    setNodes,
    onNodeMove,
    setPanZoomInfo,
    setSelectedItems,
    onConnectorUpdate,
  } = useNodeEditor();

  useEffect(() => {
    setNodes({
      addition: {
        name: "addition",
        position: { x: 100, y: 100 },
        width: 100,
        connectors: {
          result: {
            name: "result",
            pinLayout: PinLayout.RIGHT_PIN,
            contentType: "none",
            data: {},
          },
          a: {
            name: "a",
            pinLayout: PinLayout.NO_PINS,
            contentType: "number",
            data: { value: 0 },
          },
          b: {
            name: "b",
            pinLayout: PinLayout.NO_PINS,
            contentType: "number",
            data: { value: 10 },
          },
        },
      },
    });
  }, [setNodes]);

  return (
    <NodeEditor
      panZoomInfo={panZoomInfo}
      nodes={nodes}
      links={links}
      onConnectorUpdate={onConnectorUpdate}
      selectedItems={selectedItems}
      onPanZoomInfo={setPanZoomInfo}
      onSelectedItems={setSelectedItems}
      onNodeMove={onNodeMove}
    />
  );
}

Node editor logic

As today, oura-node-editor focus on the UI side and is just in charge to display node editors. The logic of computation / functional behaviour has to be written and can be complex. Later in the project, this may be implemented and given to the easelly user. The project oura-canvas-creator gives a complex example of a node/edge propagation algorithm (even with reusable node and edges functions blocs). The logic is located in node.ts file and propagateAll or propagateNode functions (Warning, this is experimental and can contains bugs).

Change theme

oura-node-editor uses DaisyUI. To consult themes provided by daisyUI, go here. As stated in documentation, on your index.html file, add data-theme attribute to html tag to set the theme you wish to use.

More complex use cases

The project oura-canvas-creator was created mainly to test all features provided by oura-node-editor. Do not hesitate to look at how the project is made. In particular, the project allow to user to:

• create and remove nodes
• create edges
• implement connectors to be reused in nodes (canvas, 3d view)
• implement node logic as expained above