View & Background Slot (#view / #background)

This page covers view-level customization, plus background and canvas-above behaviors.

1. View Slot

View slot is for fixed overlay UI relative to viewport.

Syntax:

• Vue: #view
• React: <RGSlotOnView>
• Svelte: slot="view"

Characteristics:

• does not move/scale with canvas
• ideal for floating toolbar, panel, menu, tooltip container

2. Canvas-Above Slot

Canvas-above (#canvas-above) is similar to canvas slot, but rendered above nodes/lines.

Use it when content should follow canvas transform and remain visible above graph items.

3. Background Slot

Background slot (#background / <RGBackground> equivalent) is under canvas layer.

Characteristics:

• not affected by canvas pan/zoom
• good for watermark or global backdrop
• useful as export background when generating images

4. Typical Composition

1. background: theme texture / watermark
2. canvas: coordinate-space artifacts under graph
3. canvas-above: coordinate-space overlays above graph
4. view: viewport-fixed controls and widgets

5. Example (Vue concept)

<template #background>
  <div class="my-bg"></div>
</template>

<template #view>
  <MyFloatingToolbar />
</template>

6. Good Practices

• Keep interaction controllers (RGToolBar, RGMiniView, editing widgets) in view layer.
• Keep export-related visual identity in background layer.
• Separate viewport-fixed UX and canvas-coordinate UX clearly.

7. Next Reading

• Slots Overview
• Canvas Slot
• Inner Components
• Styling Logic