Custom Line Slot (#line)

Line slot allows custom rendering of line path and line labels.

1. Slot Syntax by Platform

• Vue: #line
• React: <RGSlotOnLine>
• Svelte: slot="line"

2. Slot Props

Typical props:

• lineConfig: RGGenerateLineConfig
• checked?: boolean
• graphInstanceId?: string
• defaultLineTextOnPath?: boolean

3. Typical Rendering Pattern

A common pattern is:

1. use instance API to generate line path info
2. render line path component (or custom SVG path)
3. render one or more line text blocks
4. forward click events to graph instance

4. Basic Example (Vue style pseudo)

<template #line="{ lineConfig, checked, graphInstanceId }">
  <MyLineContent
    :lineConfig="lineConfig"
    :checked="checked"
    :graphInstanceId="graphInstanceId"
  />
</template>

5. Critical Styling Rule

Do not set line color/width only through ad-hoc path CSS in slot.

Prefer:

• line.color, line.lineWidth
• graphOptions.defaultLineColor, graphOptions.defaultLineWidth

These feed both main view and minimap rendering consistency.

6. Good Patterns

• Render multiple labels (start/center/end) when needed.
• Use line.type to switch templates.
• Keep line click handling unified by forwarding events into graph instance APIs.

7. Next Reading

• Slots Overview
• Canvas Slot
• Line Data
• Styling Logic