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

Inner Components

relation-graph includes composable built-in UI components for editor-like graph products: toolbar, minimap, node/line editors, connect-point helpers, and more.

1. Usage Principles

  • RelationGraph handles core rendering and interaction.
  • Inner components enhance editing and operation workflows.
  • Most of them are mounted in the view slot.

2. Common Components Overview

Component Purpose Common props/events
RGToolBar toolbar (zoom, center, fullscreen, etc.) direction, positionH, positionV
RGMiniView minimap / overview position, width, height
RGEditingReferenceLine drag alignment guides showText, adsorption
RGEditingNodeController host for active-node editing UI default slot for RGEditingResize etc.
RGEditingResize resize handles for node editing disableResizeWidth, disableResizeHeight
RGEditingLineController line editing (vertex/path/text) textEditable, pathEditable, onLineTextChanged etc.
RGEditingConnectController junction-point selector during connect/reconnect no required props
RGConnectTarget turn any element into a connect target/source targetId, junctionPoint, targetData, lineTemplate etc.

3. Typical Mounting Pattern (Vue3)

<template>
  <RelationGraph :options="graphOptions">
    <template #view>
      <RGToolBar direction="v" positionH="right" positionV="center" />
      <RGMiniView position="br" width="180px" height="120px" />
      <RGEditingReferenceLine :showText="true" :adsorption="true" />
      <RGEditingNodeController>
        <RGEditingResize />
      </RGEditingNodeController>
      <RGEditingLineController :textEditable="true" :pathEditable="true" />
      <RGEditingConnectController />
    </template>
  </RelationGraph>
</template>

<script setup lang="ts">
const graphOptions = {
  showToolBar: false // disable default toolbar, mount RGToolBar manually
};
</script>

4. RGToolBar vs Default Toolbar

When showToolBar: true, relation-graph renders the default toolbar.
For custom placement and composition:

  1. Set options.showToolBar = false
  2. Mount RGToolBar in view slot

5. RGMiniView Layout Tips

  • Common position: position="br" (bottom-right)
  • Use fixed size (for example 180x120)
  • Reduce minimap size on mobile to avoid blocking main interactions

6. Recommended Editor Bundle

For graph editors, add components incrementally:

  1. RGEditingReferenceLine (alignment assist)
  2. RGEditingNodeController + RGEditingResize (node edit)
  3. RGEditingLineController (line edit)
  4. RGEditingConnectController (junction-point selection)

7. RGConnectTarget Essentials

RGConnectTarget makes any element connectable inside nodes or on canvas:

  • targetId identifies the target endpoint
  • junctionPoint controls the endpoint side (left/right/top/bottom/border/ltrb/tb/lr)
  • lineTemplate can inject default style/business fields for new lines

8. Event Integration

Inner editing components are commonly paired with:

  • beforeCreateLine: validate before line creation
  • onLineBeCreated: finalize and add line to graph
  • onResizeStart / beforeNodeResize / onResizeEnd: node-resize lifecycle
  • onLineVertexDropped: line endpoint drop completion

9. Practical Advice

  • Enable components only when needed.
  • Keep business rules in event handlers, not in view-only components.
  • For complex editors, combine toolbar/property panels with RGHooks state for consistent UI behavior.

10. Next Reading