JavaScript is required
relation-graph Relational Data Visualization and Editing
Sign in 中文 GitHub

Slots Overview

relation-graph provides a slot system for deep visual customization across node, line, canvas, and view layers.

1. Why Slots

Slots allow you to:

  • render custom node/line visuals
  • place custom graphics on canvas
  • add fixed overlay UI on view layer
  • build editor-like products with toolbars, inspectors, and controllers

2. Slot Types

  • Node slot: #node / <RGSlotOnNode> / slot="node"
  • Line slot: #line / <RGSlotOnLine> / slot="line"
  • Canvas slot: #canvas / <RGSlotOnCanvas> / slot="canvas"
  • Canvas-above slot: #canvas-above / <RGSlotOnCanvasAbove> / slot="canvas-above"
  • View slot: #view / <RGSlotOnView> / slot="view"
  • Background slot: #background / <RGBackground> or equivalent

3. Coordinate and Movement Rules

  • canvas and canvas-above contents move/scale with graph canvas.
  • view contents are fixed to viewport (do not move/scale with canvas).
  • background is under canvas and can be used as export background.

4. Recommended Architecture

  1. Use data fields (node.color, line.color, etc.) for core visual semantics.
  2. Use slots to compose structure and dynamic content.
  3. Use CSS for theme and state polish.
  4. Keep interaction logic in graph instance/event handlers.

5. Quick Mapping by Scenario

  • Custom card nodes: use slot-node
  • Advanced line labels/paths: use slot-line
  • Swimlanes/groups/grids on canvas: use slot-canvas
  • Floating toolbar/minimap/selection UI: use slot-view
  • Watermark/export background: use #background

6. Next Reading