Relation Graph

Custom Node Slot (`#node`)

Node slot is used to fully customize node content rendering.

1. Slot Syntax by Platform

Vue: #node
React: <RGSlotOnNode>
Svelte: slot="node"

2. Slot Props

Common node slot props:

node: RGNode
checked?: boolean
dragging?: boolean

3. Basic Example (React)

<RelationGraph options={graphOptions}>
  <RGSlotOnNode>
    {({ node, checked, dragging }) => (
      <div className="my-node">
        <div>{node.text}</div>
        <div>Checked: {String(checked)}</div>
        <div>Dragging: {String(dragging)}</div>
      </div>
    )}
  </RGSlotOnNode>
</RelationGraph>

4. Critical Styling Rule

Do not define node background/border semantics only inside slot-local CSS.

For correctness (including minimap rendering), set core visual data via:

node.color
node.borderColor
node.borderWidth
node.borderRadius
or global defaults in RGOptions

5. Good Patterns

Branch rendering by node.type.
Keep node slot UI pure; drive business actions via graph events.
Use node.data to carry domain metadata.