Node

Nodes are defined through FlowNodeEntity

Node Data

Can be obtained through node.toJSON()

Basic Structure:
  • id: string Unique identifier for the node, must be unique
  • meta: object Node's UI configuration information, such as position information for free layout
  • type: string | number Node type, corresponds to type in nodeRegistries
  • data: object Node form data, can be customized by business
  • blocks: array Node branches, using block is more suitable for Gramming free layout scenarios, used in sub-nodes of sub-canvas
  • edges: array Edge data of sub-canvas
const nodeData: FlowNodeJSON = {
  id: 'xxxx',
  type: 'condition',
  data: {
    title: 'MyCondition',
    desc: 'xxxxx'
  },
}

Node Definition

In free layout scenarios, node definition is used to declare node's initial position/size, ports, form rendering, etc. For details, see Declare Node

Get Current Rendering Node

Get node-related methods through useNodeRender

function BaseNode() {
  const { id, type, data, updateData, node } = useNodeRender()
}

Get Input/Output Nodes or Lines for Current Node

import { WorkflowNodeLinesData } from '@flowgram.ai/free-layout-editor'

// get input nodes (calculated through connection lines)
node.getData(WorkflowNodeLinesData).inputNodes
// get all input nodes (recursively gets all upstream nodes)
node.getData(WorkflowNodeLinesData).allInputNodes
// get output nodes
node.getData(WorkflowNodeLinesData).outputNodes
// get all output nodes
node.getData(WorkflowNodeLinesData).allOutputNodes
// input lines (contains the line that isDrawing or isHidden)
node.getData(WorkflowNodeLinesData).inputLines
// output lines (contains the line that isDrawing or isHidden)
node.getData(WorkflowNodeLinesData).outputLines
// all availableLines (Doesn't contain the lines that isDrawing or isHidden)
node.getData(WorkflowNodeLinesData).availableLines

Create Node

const ctx = useClientContext()

ctx.document.createWorkflowNode({
  id: 'xxx', // Must be unique within the canvas
  type: 'custom',
  meta: {
    /**
     * If not provided, defaults to creating in the center of the canvas
     * To get position from mouse position (e.g., creating node by clicking anywhere on canvas),
     * convert using `ctx.playground.config.getPosFromMouseEvent(mouseEvent)`
     */
    position: { x: 100, y: 100 } //
  },
  data: {}, // Form-related data
  blocks: [], // Sub-canvas nodes
  edges: [] // Sub-canvas edges
})
const dragService = useService<WorkflowDragService>(WorkflowDragService);

// mouseEvent here will automatically convert to canvas position
dragService.startDragCard(nodeType, mouseEvent, {
  id: 'xxxx',
  data: {}, // Form-related data
  blocks: [], // Sub-canvas nodes
  edges: [] // Sub-canvas edges
})

Delete Node

Delete node through node.dispose

function BaseNode({ node }) {
  function onClick() {
    node.dispose()
  }
  return (
    <button onClick={onClick}>Delete</button>
  )
}

Update Node Data

function BaseNode() {
  const { data, updateData } = useNodeRender();
  // Corresponds to node's data
  console.log(data)

  function onChange(e) {
    updateData({
      ...data,
      title: e.target.value
    })
  }
  return <input value={data.title} onChange={onChange}/>
}
  • Update form data through Field, see details in Form Usage

function FormRender() {
  return (
    <Field name="title">
      <Input />
    </Field>
  )
}

Update Node's extInfo Data

extInfo is used to store UI states, if node engine is not enabled, node's data will be stored in extInfo by default

function BaseNode({ node }) {
  const times = node.getExtInfo()?.times || 0
  function onClick() {
    node.updateExtInfo({ times: times ++ })
  }
  return (
    <div>
      <span>Click Times: {times}</span>
      <button onClick={onClick}>Click</button>
    </div>
  )
}