Flow Visualization

pnpm add @fyit/crouton-flow

export default defineNuxtConfig({
  extends: [
    '@fyit/crouton',
    '@fyit/crouton-flow'
  ]
})

<script setup>
const { data: decisions } = await useCollectionQuery('decisions')
</script>

<template>
  <CroutonFlow
    :rows="decisions"
    collection="decisions"
    parent-field="parentId"
    position-field="position"
  />
</template>

<template>
  <CroutonFlow
    :rows="decisions"
    collection="decisions"
    parent-field="parentId"
    position-field="position"
    :controls="true"
    :minimap="true"
    @nodeClick="handleNodeClick"
    @nodeDblClick="openNodeDetail"
  />
</template>

<script setup>
const handleNodeClick = (nodeId, data) => {
  console.log('Clicked:', data.title)
}

const openNodeDetail = (nodeId, data) => {
  // Open slideover or modal
  useCrouton().open('update', 'decisions', [nodeId])
}
</script>

app/components/
└── DecisionsNode.vue    ← Custom node for "decisions" collection

<!-- app/components/DecisionsNode.vue -->
<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'

interface Props {
  data: {
    id: string
    content: string
    type: 'idea' | 'insight' | 'decision'
    starred: boolean
  }
  selected?: boolean
  dragging?: boolean
}

const props = defineProps<Props>()

const typeIcons = {
  idea: 'i-lucide-lightbulb',
  insight: 'i-lucide-eye',
  decision: 'i-lucide-check-circle'
}
</script>

<template>
  <div
    class="decision-node"
    :class="{
      'decision-node--selected': selected,
      'decision-node--starred': data.starred
    }"
  >
    <Handle type="target" :position="Position.Top" />

    <div class="flex items-center gap-2">
      <UIcon :name="typeIcons[data.type]" class="w-4 h-4" />
      <span class="font-medium truncate">{{ data.content }}</span>
      <UIcon
        v-if="data.starred"
        name="i-lucide-star"
        class="w-4 h-4 text-yellow-500"
      />
    </div>

    <Handle type="source" :position="Position.Bottom" />
  </div>
</template>

<style scoped>
.decision-node {
  @apply px-4 py-2 rounded-lg border bg-white dark:bg-neutral-900;
  @apply border-neutral-200 dark:border-neutral-700;
  @apply shadow-sm min-w-[150px] max-w-[250px];
}

.decision-node--selected {
  @apply border-primary-500 ring-2 ring-primary-500/20;
}

.decision-node--starred {
  @apply bg-yellow-50 dark:bg-yellow-900/20;
}
</style>

<script setup>
const projectId = useRoute().params.id
</script>

<template>
  <CroutonFlow
    collection="decisions"
    sync
    :flow-id="projectId"
  />
</template>

┌─────────────────────────────────────────────────────────────┐
│                        Clients                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐                  │
│  │ Client A │  │ Client B │  │ Client C │                  │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘                  │
│       └─────────────┼─────────────┘                         │
│                     │ WebSocket                             │
│                     ▼                                       │
│  ┌─────────────────────────────────────────────────────┐   │
│  │           Cloudflare Durable Object                 │   │
│  │                 (CollabRoom)                          │   │
│  │  - Manages Yjs Y.Doc per flow                       │   │
│  │  - Merges updates from all clients                  │   │
│  │  - Persists to D1 on changes                        │   │
│  └──────────────────────┬──────────────────────────────┘   │
│                         │                                   │
│                         ▼                                   │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                 D1 (SQLite)                         │   │
│  │  yjs_collab_states (Yjs blob) + collection tables     │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

[[durable_objects.bindings]]
name = "COLLAB_ROOMS"
class_name = "CollabRoom"

[[migrations]]
tag = "collab-v1"
new_classes = ["CollabRoom"]

CREATE TABLE IF NOT EXISTS yjs_collab_states (
  room_type TEXT NOT NULL,
  room_id TEXT NOT NULL,
  state BLOB NOT NULL,
  version INTEGER DEFAULT 1,
  created_at INTEGER DEFAULT (unixepoch()),
  updated_at INTEGER DEFAULT (unixepoch()),
  PRIMARY KEY (room_type, room_id)
);

export default defineNuxtConfig({
  nitro: {
    experimental: {
      websocket: true
    }
  }
})

<template>
  <CollabPresence
    :users="users"
    :max-visible="4"
    size="sm"
  />
</template>

<template>
  <CollabStatus
    :connected="connected"
    :synced="synced"
    :error="error"
    :show-label="true"
  />
</template>

const { nodes, edges, getNode, getItem } = useFlowData(
  computed(() => rows),
  {
    parentField: 'parentId',
    positionField: 'position',
    labelField: 'title'
  }
)

const { applyLayout, applyLayoutToNew, needsLayout } = useFlowLayout({
  direction: 'TB',      // TB, LR, BT, RL
  nodeSpacing: 50,      // Horizontal spacing
  rankSpacing: 100      // Vertical spacing
})

// Apply layout if needed
if (needsLayout(nodes)) {
  const layoutedNodes = applyLayout(nodes, edges)
}

const { updatePosition, updatePositions, pending, error } = useFlowMutation(
  'decisions',
  'position'  // Position field name
)

// Update a node's position
await updatePosition('node-123', { x: 100, y: 200 })

const { debouncedUpdate, pending, error } = useDebouncedPositionUpdate(
  'decisions',
  'position',
  500  // Debounce delay in ms
)

// Called on each drag event
debouncedUpdate(nodeId, { x, y })

const {
  // State (readonly)
  nodes,        // Ref<YjsFlowNode[]>
  connected,    // ComputedRef<boolean>
  synced,       // ComputedRef<boolean>
  error,        // ComputedRef<Error | null>
  users,        // ComputedRef<CollabAwarenessState[]>
  user,         // Current user info

  // Node operations
  createNode,
  updateNode,
  updatePosition,
  deleteNode,
  getNode,

  // Presence
  updateCursor,
  selectNode,
  updateGhostNode,
  clearGhostNode,

  // Connection
  connect,
  disconnect,

  // Advanced (Yjs internals)
  ydoc,
  nodesMap
} = useFlowSync({
  flowId: 'flow-123',
  collection: 'decisions'
})

<script setup>
const {
  nodes,
  connected,
  synced,
  users,
  createNode,
  deleteNode
} = useFlowSync({
  flowId: props.flowId,
  collection: 'decisions'
})

const addNode = () => {
  createNode({
    title: 'New Decision',
    position: { x: 100, y: 100 }
  })
}
</script>

<template>
  <div class="flex items-center gap-2">
    <div class="flex items-center gap-1">
      <span
        class="w-2 h-2 rounded-full"
        :class="connected && synced ? 'bg-green-500' : 'bg-yellow-500'"
      />
      <span class="text-sm">{{ users.length }} online</span>
    </div>
    <UButton @click="addNode">Add Node</UButton>
  </div>
</template>

const {
  otherUsers,           // Other connected users (excludes current)
  getUsersSelectingNode,  // Get users selecting a specific node
  getNodePresenceStyle    // Get style for node presence border
} = useFlowPresence({
  users: computed(() => syncState.users),
  currentUserId: currentUser.id
})

<script setup>
const { getNodePresenceStyle } = useFlowPresence({
  users: users,
  currentUserId: currentUser.id
})

// Get style for a specific node
const nodeStyle = getNodePresenceStyle('node-123')
</script>

<template>
  <div :style="nodeStyle">
    <!-- Node content with presence border -->
  </div>
</template>

{
  "position": {
    "type": "json",
    "meta": {
      "description": "Node position for flow visualization"
    }
  }
}

{
  position: {
    x: 150,
    y: 200
  }
}

{
  "parentId": {
    "type": "string",
    "refTarget": "decisions",
    "meta": {
      "description": "Parent decision for tree structure"
    }
  }
}

<CroutonFlow
  :rows="decisions"
  collection="decisions"
  :flow-config="{
    direction: 'LR',      // Left to right layout
    nodeSpacing: 80,
    rankSpacing: 150,
    autoLayout: 'dagre'
  }"
/>

<script setup>
const { data: decisions } = await useCollectionQuery('decisions', {
  sort: { field: 'createdAt', direction: 'asc' }
})
</script>

<template>
  <div class="h-[600px]">
    <CroutonFlow
      :rows="decisions"
      collection="decisions"
      parent-field="parentId"
      :minimap="true"
      @nodeDblClick="(id) => useCrouton().open('update', 'decisions', [id])"
    />
  </div>
</template>

<script setup>
const { data: steps } = await useCollectionQuery('workflowSteps')

const handleConnect = async (sourceId: string, targetId: string) => {
  // Create edge relationship
  await useCollectionMutation('workflowSteps').update(targetId, {
    parentId: sourceId
  })
}
</script>

<template>
  <CroutonFlow
    :rows="steps"
    collection="workflowSteps"
    :flow-config="{ direction: 'LR' }"
    :controls="true"
  >
    <!-- Custom slot content -->
    <template #default>
      <div class="absolute top-4 right-4">
        <UButton @click="addStep">Add Step</UButton>
      </div>
    </template>
  </CroutonFlow>
</template>

<script setup>
const route = useRoute()
const { user: currentUser } = useUserSession()

// Use sync mode for real-time collaboration
const {
  nodes,
  connected,
  synced,
  users,
  error,
  createNode
} = useFlowSync({
  flowId: route.params.id,
  collection: 'decisions'
})

// Presence helpers
const { otherUsers } = useFlowPresence({
  users,
  currentUserId: currentUser.value?.id
})

const addDecision = () => {
  createNode({
    title: 'New Decision',
    position: { x: Math.random() * 400, y: Math.random() * 300 }
  })
}
</script>

<template>
  <div class="h-screen relative">
    <!-- Main flow with sync enabled -->
    <CroutonFlow
      collection="decisions"
      sync
      :flow-id="route.params.id"
      :minimap="true"
    />

    <!-- Connection status -->
    <CollabStatus
      :connected="connected"
      :synced="synced"
      :error="error"
    />

    <!-- Presence overlay -->
    <CollabPresence
      :users="otherUsers"
    />

    <!-- Toolbar -->
    <div class="absolute top-4 left-4 flex items-center gap-4">
      <div class="flex items-center gap-2 bg-white/80 dark:bg-neutral-900/80 px-3 py-1.5 rounded-lg">
        <div
          class="w-2 h-2 rounded-full"
          :class="connected && synced ? 'bg-green-500' : 'bg-yellow-500'"
        />
        <span class="text-sm">{{ otherUsers.length + 1 }} online</span>
      </div>
      <UButton @click="addDecision" icon="i-lucide-plus">
        Add Decision
      </UButton>
    </div>
  </div>
</template>

/* Custom node styles */
:deep(.vue-flow__node) {
  /* Your styles */
}

/* Custom edge styles */
:deep(.vue-flow__edge-path) {
  stroke: theme('colors.primary.500');
  stroke-width: 2px;
}

/* Selected state */
:deep(.vue-flow__node.selected) {
  /* Selected node styles */
}