Diagram edges

<script setup lang="ts">
// Vue — the flow toggle lives in a child so useEdges() injects inside <XenolithGraph>.
import { XenolithGraph, XenolithControls } from '@xenolithengine/graph-vue'
import { buildDiagram } from '@xenolithengine/demo/diagram'
import DiagramPanel from './DiagramPanel.vue'
</script>

<template>
  <div class="app" style="position:absolute;inset:0;">
    <XenolithGraph class="xeno" :resize-to-window="false" @ready="buildDiagram">
      <XenolithControls position="bottom-left" />
      <DiagramPanel />
    </XenolithGraph>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { XenolithPanel, XenolithButton, useEditor, useEdges } from '@xenolithengine/graph-vue'

const editor = useEditor()
const edges = useEdges()
const animated = ref(true)

// Same contract as the React demo: the flag is pushed onto every current edge.
// setEdgeOptions does not emit, so this watch does not re-enter itself.
watch([edges, animated], () => {
  const live = editor.value
  if (!live) return
  const on = animated.value
  for (const edge of edges.value) live.setEdgeOptions(edge.id, { animated: on })
})
</script>

<template>
  <XenolithPanel position="top-left">
    <div style="display:flex;flex-direction:column;gap:6px;width:200px;">
      <p style="margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--xeno-muted);">Diagram edges</p>
      <XenolithButton :active="animated" style="width:100%" @click="animated = !animated">
        {{ animated ? '⏸ Stop flow' : '▶ Animate flow' }}
      </XenolithButton>
      <span style="color:var(--xeno-muted);font-size:11px;line-height:1.45;">
        Directional edges with arrowheads + labels. The main path animates a flowing dash.
        The toggle writes useEdges() through setEdgeOptions.
      </span>
    </div>
  </XenolithPanel>
</template>

// The flowchart showcase is just DATA: a xenolith.v1 file loaded with editor.loadJSON. No imperative
// node/edge wiring — the same JSON round-trips through serialization and loads on any host. Edges
// carry the render opts (arrowhead marker, animated flow, label) right in the file.

import type { XenolithEditor, EdgeId } from '@xenolithengine/graph-editor'
import diagram from './diagram.json'

export interface DiagramHandle {
  /** Toggle the flowing-dash animation on every edge. */
  setAnimated(on: boolean): void
}

export function buildDiagram(editor: XenolithEditor): DiagramHandle {
  editor.loadJSON(diagram)
  editor.fitView({ padding: 72, maxZoom: 1 })
  const edgeIds = diagram.edges.map((e) => e.id as unknown as EdgeId)
  return { setAnimated: (on) => { for (const id of edgeIds) editor.setEdgeOptions(id, { animated: on }) } }
}

<!-- Svelte — edges is a store. The effect pushes `animated` onto every current edge. -->
<script lang="ts">
  import { xenolith, createXenolithStores, createXenolithEditorContext } from '@xenolithengine/graph-svelte'
  import { XenolithPanel, XenolithButton, XenolithControls } from '@xenolithengine/graph-svelte/components'
  import type { XenolithEditor } from '@xenolithengine/graph-editor'
  import { buildDiagram } from '@xenolithengine/demo/diagram'

  const stores = createXenolithStores()
  const edges = stores.edges
  const panelEditor = createXenolithEditorContext()
  let editor = $state<XenolithEditor | null>(null)
  let animated = $state(true)

  $effect(() => {
    const live = editor
    const list = $edges
    const on = animated
    if (!live) return
    for (const edge of list) live.setEdgeOptions(edge.id, { animated: on })
  })
</script>

<div
  use:xenolith={{ resizeToWindow: false }}
  onready={(e) => { editor = e.detail; panelEditor.set(e.detail); stores.editor.set(e.detail); buildDiagram(e.detail) }}
  style="position:absolute;inset:0"
></div>

<XenolithControls position="bottom-left" />

<XenolithPanel position="top-left">
  <div style="display:flex;flex-direction:column;gap:6px;width:200px;">
    <p style="margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--xeno-muted);">Diagram edges</p>
    <XenolithButton active={animated} style="width:100%" onclick={() => { animated = !animated }}>
      {animated ? '⏸ Stop flow' : '▶ Animate flow'}
    </XenolithButton>
    <span style="color:var(--xeno-muted);font-size:11px;line-height:1.45;">
      Directional edges with arrowheads + labels. The main path animates a flowing dash.
      The toggle writes the edges store through setEdgeOptions.
    </span>
  </div>
</XenolithPanel>

// The flowchart showcase is just DATA: a xenolith.v1 file loaded with editor.loadJSON. No imperative
// node/edge wiring — the same JSON round-trips through serialization and loads on any host. Edges
// carry the render opts (arrowhead marker, animated flow, label) right in the file.

import type { XenolithEditor, EdgeId } from '@xenolithengine/graph-editor'
import diagram from './diagram.json'

export interface DiagramHandle {
  /** Toggle the flowing-dash animation on every edge. */
  setAnimated(on: boolean): void
}

export function buildDiagram(editor: XenolithEditor): DiagramHandle {
  editor.loadJSON(diagram)
  editor.fitView({ padding: 72, maxZoom: 1 })
  const edgeIds = diagram.edges.map((e) => e.id as unknown as EdgeId)
  return { setAnimated: (on) => { for (const id of edgeIds) editor.setEdgeOptions(id, { animated: on }) } }
}

// Solid — no panel package. stores.edges() is the live list; the effect writes the flag.
import { createEffect, createSignal } from 'solid-js'
import { xenolith, createXenolithStores } from '@xenolithengine/graph-solid'
import { buildDiagram } from '@xenolithengine/demo/diagram'

export function DiagramDemo() {
  const stores = createXenolithStores()
  const [animated, setAnimated] = createSignal(true)

  createEffect(() => {
    const live = stores.editor()
    const list = stores.edges()
    const on = animated()
    if (!live) return
    for (const edge of list) live.setEdgeOptions(edge.id, { animated: on })
  })

  const btn = (on: boolean) =>
    `font:inherit;font-size:13px;padding:7px 12px;border-radius:8px;cursor:pointer;width:100%;border:1px solid ${on ? 'var(--xeno-accent)' : 'var(--xeno-border)'};background:${on ? 'var(--xeno-accent)' : 'var(--xeno-elevated)'};color:${on ? 'var(--xeno-canvas)' : 'var(--xeno-text)'};`

  return (
    <div
      use:xenolith={{ resizeToWindow: false }}
      on:ready={(e) => {
        stores.setEditor(e.detail)
        e.detail.chrome.setControls({ position: 'bottom-left' })
        buildDiagram(e.detail)
      }}
      style="position:absolute;inset:0"
    >
      <div style="position:absolute;top:12px;left:12px;z-index:5;display:flex;flex-direction:column;gap:6px;width:200px;padding:10px;background:var(--xeno-panel);border:1px solid var(--xeno-border);border-radius:10px;color:var(--xeno-text);font:13px system-ui,sans-serif;">
        <p style="margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--xeno-muted);">Diagram edges</p>
        <button type="button" style={btn(animated())} onClick={() => setAnimated(!animated())}>
          {animated() ? '⏸ Stop flow' : '▶ Animate flow'}
        </button>
        <span style="color:var(--xeno-muted);font-size:11px;line-height:1.45;">
          Directional edges with arrowheads + labels. The main path animates a flowing dash.
          The toggle writes stores.edges() through setEdgeOptions.
        </span>
      </div>
    </div>
  )
}

// The flowchart showcase is just DATA: a xenolith.v1 file loaded with editor.loadJSON. No imperative
// node/edge wiring — the same JSON round-trips through serialization and loads on any host. Edges
// carry the render opts (arrowhead marker, animated flow, label) right in the file.

import type { XenolithEditor, EdgeId } from '@xenolithengine/graph-editor'
import diagram from './diagram.json'

export interface DiagramHandle {
  /** Toggle the flowing-dash animation on every edge. */
  setAnimated(on: boolean): void
}

export function buildDiagram(editor: XenolithEditor): DiagramHandle {
  editor.loadJSON(diagram)
  editor.fitView({ padding: 72, maxZoom: 1 })
  const edgeIds = diagram.edges.map((e) => e.id as unknown as EdgeId)
  return { setAnimated: (on) => { for (const id of edgeIds) editor.setEdgeOptions(id, { animated: on }) } }
}

// Angular — edges$ re-applies the flow flag. No panel component: the toggle is a DOM card,
// the viewport controls are editor.chrome.
import { AfterViewInit, Component, ElementRef, OnDestroy, inject, signal, viewChild } from '@angular/core'
import { Subscription } from 'rxjs'
import { XenolithGraphService } from '@xenolithengine/graph-angular'
import { buildDiagram } from '@xenolithengine/demo/diagram'

@Component({
  selector: 'diagram-demo',
  standalone: true,
  providers: [XenolithGraphService],
  template: `
    <div style="position:absolute;inset:0;">
      <div #host class="xeno" style="position:absolute;inset:0;"></div>
      <div class="card">
        <p class="label">Diagram edges</p>
        <button type="button" class="btn" [class.on]="animated()" (click)="toggle()">
          {{ animated() ? '⏸ Stop flow' : '▶ Animate flow' }}
        </button>
        <span class="note">
          Directional edges with arrowheads + labels. The main path animates a flowing dash.
          The toggle writes edges$ through setEdgeOptions.
        </span>
      </div>
    </div>
  `,
  styles: [`
    .card { position:absolute; top:12px; left:12px; z-index:5; display:flex; flex-direction:column;
      gap:6px; width:200px; padding:10px; background:var(--xeno-panel,#1d1d1d);
      border:1px solid var(--xeno-border,#333); border-radius:10px;
      color:var(--xeno-text,#cfcfcf); font:13px system-ui,sans-serif; }
    .label { margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
      color:var(--xeno-muted,#9a9a9a); }
    .btn { font:inherit; font-size:13px; padding:7px 12px; cursor:pointer; border-radius:8px;
      border:1px solid var(--xeno-border,#333); background:var(--xeno-elevated,#262626);
      color:var(--xeno-text,#cfcfcf); }
    .btn.on { border-color:var(--xeno-accent,#FCB400); background:var(--xeno-accent,#FCB400);
      color:var(--xeno-canvas,#111); }
    .note { color:var(--xeno-muted,#9a9a9a); font-size:11px; line-height:1.45; }
  `],
})
export class DiagramDemoComponent implements AfterViewInit, OnDestroy {
  private graph = inject(XenolithGraphService)
  private host = viewChild.required<ElementRef<HTMLDivElement>>('host')
  private sub = new Subscription()
  animated = signal(true)

  async ngAfterViewInit(): Promise<void> {
    const editor = await this.graph.mount(this.host().nativeElement, { resizeToWindow: false })
    editor.chrome.setControls({ position: 'bottom-left' })
    buildDiagram(editor)
    this.sub.add(this.graph.edges$.subscribe(() => this.applyFlow()))
  }

  toggle(): void {
    this.animated.update((on) => !on)
    this.applyFlow()
  }

  private applyFlow(): void {
    const editor = this.graph.editor
    if (!editor) return
    const on = this.animated()
    for (const edge of editor.graphEdges()) editor.setEdgeOptions(edge.id, { animated: on })
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe()
    this.graph.destroy()
  }
}

// The flowchart showcase is just DATA: a xenolith.v1 file loaded with editor.loadJSON. No imperative
// node/edge wiring — the same JSON round-trips through serialization and loads on any host. Edges
// carry the render opts (arrowhead marker, animated flow, label) right in the file.

import type { XenolithEditor, EdgeId } from '@xenolithengine/graph-editor'
import diagram from './diagram.json'

export interface DiagramHandle {
  /** Toggle the flowing-dash animation on every edge. */
  setAnimated(on: boolean): void
}

export function buildDiagram(editor: XenolithEditor): DiagramHandle {
  editor.loadJSON(diagram)
  editor.fitView({ padding: 72, maxZoom: 1 })
  const edgeIds = diagram.edges.map((e) => e.id as unknown as EdgeId)
  return { setAnimated: (on) => { for (const id of edgeIds) editor.setEdgeOptions(id, { animated: on }) } }
}