Skip to content

Text

These examples document the text behaviors from the canonical TopoViewer test-case catalog. Each section is generated from one test case and keeps the live viewport, topology YAML, and stylesheet YAML together.

Standalone text boxes

What This Demonstrates

Standalone text belongs under diagram.texts, not graph.nodes. Use it for titles, explanatory copy, maintenance notes, and other presentation content that must remain selectable, resizable, layer-aware, and reviewable in YAML.

Expected Result

The live viewport should render "Standalone text boxes" without blocking diagnostics. It should show: Layer-aware text boxes add editable canvas copy without creating graph objects. The test metadata expects texts: 3.

What To Inspect

  • Inspect diagram.texts for standalone labels and explanatory copy that do not change graph semantics.
  • Check text alignment, typography, background, border, rotation, and layer membership.

Use When

Use this pattern when the canvas needs editable standalone text instead of a graph node or callout.

Standalone text boxes

version: "0.2"
graph:
  id: standalone-text-boxes
  layers:
    - id: annotations
      labels:
        name: Annotations
diagram:
  texts:
    - id: title
      text: Network maintenance window
      position: [70, 70]
      layers: [annotations]
    - id: detail
      text: |-
        Core links may reconverge between 23:00 and 23:15 UTC.
        Customer traffic remains on protected paths.
      position: [70, 160]
      layers: [annotations]
    - id: rotated-note
      text: Change approved
      position: [610, 105]
      layers: [annotations]

version: "0.2"
layout:
  mode: manual
  width: 860
  height: 340
stylesheet:
  - selector: text
    style:
      color: var(--topoviewer-fg-strong)
      backgroundColor: var(--topoviewer-panel-bg)
      borderColor: rgba(100, 181, 246, 0.48)
      borderWidth: 1
      borderRadius: 6
      fontSize: 16
      lineHeight: 1.45
      padding: 14
      selectable: true
  - selector: text[id = "title"]
    style:
      backgroundColor: rgba(25, 118, 210, 0.14)
      borderColor: "#64b5f6"
      borderWidth: 2
      fontSize: 24
      fontWeight: 800
      verticalAlign: middle
      width: 480
      height: 64
  - selector: text[id = "rotated-note"]
    style:
      backgroundColor: rgba(46, 125, 50, 0.16)
      borderColor: "#4caf50"
      color: var(--topoviewer-fg-strong)
      fontWeight: 800
      width: 180
      height: 54
      rotation: 8
      textAlign: center
      verticalAlign: middle
  - selector: text[id = "detail"]
    style:
      width: 480
      height: 110