Canvas Slot (#canvas)

Canvas slot is for custom elements that should move and scale with the graph canvas.

1. Slot Syntax by Platform

• Vue: #canvas
• React: <RGSlotOnCanvas>
• Svelte: slot="canvas"

2. Behavior Model

• Content is rendered on canvas layer (under nodes/lines by default).
• Content follows canvas transform (pan/zoom).
• Slot container origin corresponds to canvas (0,0).

3. Typical Use Cases

• group/swinlane/region overlays
• custom background grids in graph coordinate space
• annotations and domain artifacts attached to canvas coordinates

4. Basic Example

<template #canvas>
  <div class="my-canvas-content" style="position:absolute;top:20px;left:20px;">
    Canvas Content
  </div>
</template>

5. Canvas vs Canvas-Above

• canvas: under graph items, may be occluded by nodes/lines
• canvas-above: above graph items, not occluded

6. Practical Notes

• Always use explicit positioning for predictable placement.
• For editor overlays that must remain visible, consider canvas-above or view slot instead.

7. Next Reading

• View & Background Slot
• Slots Overview
• Styling Logic