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

TypeScript Types

This page summarizes the core type system in relation-graph so you can work confidently across data, options, events, and UI components.

1. Type Map

The most important types are grouped into 6 categories:

  • Graph data: JsonNode, JsonLine, RGNode, RGLine, RGLink
  • Options/config: RGOptions, RGOptionsFull, RGLayoutOptions
  • Interaction/events: RGListeners, RGEventNames, RGUserEvent
  • Coordinates/layout math: RGCoordinate, RGPosition, RGNodesRectBox
  • Component props: RelationGraphProps, RGToolBarProps, RGMiniViewProps
  • Runtime state: RGCreatingLine, RGEditingNodes, RGCheckedItem, etc.

2. Data Model Types

JsonNode / RGNode

  • JsonNode: input/persistence node shape
  • RGNode: runtime node object (includes rendering/runtime fields)

Common fields:

  • identity/text: id, text, type
  • geometry: x, y, width, height
  • style: color, borderColor, fontSize, nodeShape
  • business extension: data

JsonLine / RGLine / RGLink

  • JsonLine: input/persistence line shape
  • RGLine: runtime line object
  • RGLink: relation object between two nodes (multiple lines may map to one node pair)

Common fields:

  • endpoints: from, to
  • text/style: text, color, lineWidth, lineShape
  • advanced junctions: fromJunctionPoint, toJunctionPoint
  • business extension: data

3. Enums and Base Types

High-frequency base types:

  • RGNodeShape: circle / rect
  • RGLineShape: StandardCurve, StandardOrthogonal, etc.
  • RGJunctionPoint: left/right/top/bottom/border/ltrb/tb/lr
  • RGWidgetPosition: top/right/bottom/left/tl/tr/bl/br
  • RGEventTargetType: 'canvas' | 'node' | 'line'
  • RGUserEvent: MouseEvent | TouchEvent

4. Option Types

RGOptions (user-configurable)

Typical fields:

  • interaction: wheelEventAction, dragEventAction
  • visibility: showToolBar, backgroundColor
  • default style: defaultNodeColor, defaultLineColor, defaultLineShape
  • layout: layout (RGLayoutOptions)
  • zoom limits: minCanvasZoom, maxCanvasZoom

RGOptionsFull (runtime full options)

RGOptionsFull extends RGOptions with runtime state (current zoom, canvasOffset, editing state, etc.).
It is usually not meant for direct manual construction or persistence.

5. Layout Types

RGLayoutOptions is a union type. Common variants:

  • RGForceLayoutOptions
  • RGCenterLayoutOptions
  • RGTreeLayoutOptions

Shared/common fields:

  • layoutName
  • layoutDirection
  • fixedRootNode
  • alignment options: alignItemsX, alignItemsY

6. Event Types

RGListeners

Event contract for <RelationGraph />, covering:

  • lifecycle (onReady)
  • click/drag (onNodeClick, onNodeDragging, etc.)
  • zoom/scroll (beforeZoomStart, beforeScrollStart)
  • editing lifecycle (beforeCreateLine, onLineBeCreated, etc.)

RGEventNames

Enum of event names, useful for event buses and unified telemetry/logging.

7. Component Prop Types

  • RelationGraphProps = RGListeners & { options: RGOptions; ... }
  • RGToolBarProps: toolbar direction and alignment
  • RGMiniViewProps: minimap position, size, and style
  • RGEditingLineControllerProps: textEditable, pathEditable, line-edit callbacks

8. Coordinate and Geometry Types

  • RGCoordinate: { x, y }
  • RGPosition: same shape as coordinate, used semantically for positions
  • RGNodesRectBox: bounding box (minX/maxX/minY/maxY/width/height)
  • RGSelectionView: rectangle-selection area

9. Import Example

import type {
  RGOptions,
  RGLayoutOptions,
  JsonNode,
  JsonLine,
  RGNode,
  RGLine,
  RGLink,
  RGListeners
} from "@relation-graph/vue3";

For React / Vue2 / Svelte, import from the corresponding package name.

10. Practical Advice

  • Use JsonNode/JsonLine for persistence, RGNode/RGLine for runtime rendering logic.
  • Put business payload in data instead of scattering top-level fields.
  • Define project-level extensions (MyNodeData, MyLineData) early.
  • Prefer exposing Json* types in service boundaries to avoid runtime-field coupling.

11. Next Reading