Is there any way to make it collaborative with YJS?

[linspw]

Is there any way to make it collaborative with YJS?

https://docs.yjs.dev/
https://tiptap.dev/hocuspocus/

I'am Trying:

<template>
  <div class="data-object-details-diagram d-flex flex-column h-100">
    <div class="flex-1-1">
      <VueFlow v-model="elements">
        <DiagramBoardToolbar />

        <MiniMap />

        <Controls />

        <Background pattern-color="#aaa" :gap="8" />
      </VueFlow>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useVueFlow, VueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { HocuspocusProvider } from '@hocuspocus/provider'
import * as Y from 'yjs'
import DiagramBoardToolbar from './diagram-board-toolbar.vue'

const $props = defineProps({
  diagram: {
    required: true,
    type: Object,
  },
})

const elements = ref<any[]>([])

const { addEdges, onConnect, onPaneReady } = useVueFlow()

onConnect((params) => addEdges([params]))

onPaneReady(({ fitView }) => fitView())

const ydoc = new Y.Doc()

const url = `${$props.diagram.id}`
const diagramName = `document_${$props.diagram.id}`
const provider = new HocuspocusProvider({
  url,
  name: diagramName,
  document: ydoc,
  token: 'secret',
})

const ymap = ydoc.getMap('content')

// onEdgesChange((changes) => {
//   // console.log(changes)
//   ydoc.transact(() => {
//     ymap.set('edges', changes)
//   }, provider.awareness.clientID)
// })
// onNodesChange((changes) => {
//   // console.log(changes)
//   ydoc.transact(() => {
//     ymap.set('nodes', changes)
//   }, provider.awareness.clientID)
// })

watch(elements.value, (newValue) => {
  ydoc.transact(() => {
    ymap.set('nodes', newValue)
  }, provider.awareness.clientID)
})

provider.document.on('update', (update, origin) => {
  if (origin === provider.awareness.clientID) {
    return
  }
  console.log('update', origin)
  Y.applyUpdate(ydoc, update)
})

ymap.observe((ymapEvent) => {
  if (ymapEvent.transaction.origin === provider.awareness.clientID) return
  console.log('observe')
  ymapEvent.keys.forEach((change, key) => {
    //   if (key === 'nodes') {
    //     if (change.oldValue) applyNodeChanges(change.oldValue)
    //   }

    //   if (key === 'edges') {
    //     if (change.oldValue) applyEdgeChanges(change.oldValue)
    //   }
    if (key === 'elements') {
      elements.value = change.oldValue
    }
  })
})
</script>

[linspw]

I think I did it, then if you think the idea is cool, maybe you can open a new dependency @vue-flow/collab....

const ymap = ydoc.getMap('content')

const changeInElements = (newValue: any[]) => {
  ydoc.transact(() => {
    ymap.set('elements', newValue)
  }, provider.awareness.clientID)
}

onNodesChange((changes) => {
  applyNodeChanges(changes)

  changeInElements(elements.value)
})

onEdgesChange((changes) => {
  applyEdgeChanges(changes)

  changeInElements(elements.value)
})

provider.document.on('update', (update, origin) => {
  if (origin === provider.awareness.clientID) return
  Y.applyUpdate(ydoc, update)
})

provider.on('synced', () => {
  elements.value = (ymap.get('elements') ?? []) as any[]
})

provider.document.getMap('content').observe((ymapEvent) => {
  if (ymapEvent.transaction.origin === provider.awareness.clientID) return
  ymapEvent.keys.forEach((_change, key) => {
    if (key === 'elements') {
      // applyChanges(elements.value)
      elements.value = ymap.get('elements') as any[]
    }
  })
})

onBeforeUnmount(() => {
  provider?.configuration?.websocketProvider?.webSocket?.close()
  provider?.configuration?.websocketProvider.destroy()
  provider?.destroy()
})

[linspw]

Working hook for Vue-Flow Collab:

Collab Hook:

import { HocuspocusProvider } from '@hocuspocus/provider'
import * as Y from 'yjs'
import { useVueFlow, FlowElements } from '@vue-flow/core'
import { createYdocUrl } from './create-ydoc-url-and-token'

export const useDiagramCollab = (diagramId: number) => {
  const { onNodesChange, applyNodeChanges, onEdgesChange, applyEdgeChanges } =
    useVueFlow()

  const elements = ref<FlowElements>([])

  const { documentName, url, cookie } = createYdocUrl(
    diagramId,
    'diagram',
    'diagrams'
  )
  const ydoc = new Y.Doc()
  const provider = new HocuspocusProvider({
    url,
    name: documentName,
    document: ydoc,
    token: cookie.value,
  })

  const ymap = ydoc.getMap('content')

  const changeInElements = (newValue: any[]) => {
    ydoc.transact(() => {
      ymap.set('elements', newValue)
    }, provider.awareness.clientID)
  }

  onNodesChange((changes) => {
    applyNodeChanges(changes)

    changeInElements(elements.value)
  })

  onEdgesChange((changes) => {
    applyEdgeChanges(changes)

    changeInElements(elements.value)
  })

  provider.document.on('update', (update, origin) => {
    if (origin === provider.awareness.clientID) return
    Y.applyUpdate(ydoc, update)
  })

  provider.on('synced', () => {
    elements.value = (ymap.get('elements') ?? []) as any[]
  })

  provider.document.getMap('content').observe((ymapEvent) => {
    if (ymapEvent.transaction.origin === provider.awareness.clientID) return
    ymapEvent.keys.forEach((_change, key) => {
      if (key === 'elements') {
        // applyChanges(elements.value)
        elements.value = ymap.get('elements') as any[]
      }
    })
  })

  onBeforeUnmount(() => {
    provider?.configuration?.websocketProvider?.webSocket?.close()
    provider?.configuration?.websocketProvider.destroy()
    provider?.destroy()
  })

  return {
    elements,
    provider,
  }
}

Usage:

<template>
   <VueFlow v-model="elements">
     ....
   </VueFlow>
</template>
<script setup lang="ts">
import { VueFlow } from '@vue-flow/core'

const { elements } = useDiagramCollab($props.diagram.id)
</script>

[linspw]

Then it's worth thinking about some points:

• More tests
• Connected users cursor
• Number of updates