update

src/components/Flowchart.vue

@@ -10,13 +10,23 @@
   </VueFlow>
 
   <div class="menu">
-    <button @click="addRandomNode">
+    <button @click="addRandomNode('input')">
-      Добавить
+      + Вход
+    </button>
+    <button @click="addRandomNode()">
+      + Обычная
+    </button>
+    <button @click="addRandomNode('output')">
+      + Выход
     </button>
     <button @click="reset">
       Сбросить
     </button>
   </div>
+
+  <div v-if="clientId" class="info">
+    Ваш ID: {{ clientId }} | Клиентов: {{ clients.size }}
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,14 +47,15 @@ const { addNodes, onConnect, addEdges } = useVueFlow()
 
 onConnect(addEdges)
 
-const { reset } = useCollaborativeFlow(() => props.diagramId)
+const { clientId, clients, reset } = useCollaborativeFlow(() => props.diagramId)
 
-function addRandomNode() {
+function addRandomNode(type?: Node['type']) {
   addNodes({
     id: Math.random().toString(),
+    type,
     position: { x: Math.random() * 500, y: Math.random() * 500 },
-    label: 'Random Node',
     data: {
+      label: 'Random Node',
       hello: 'world',
     },
   })
@@ -61,4 +72,10 @@ function addRandomNode() {
   flex-direction: column;
   gap: 8px;
 }
+
+.info {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+}
 </style>

src/composables/useCollaborativeFlow.ts

@@ -2,7 +2,7 @@ import type { Edge, Node } from '@vue-flow/core'
 import type { MaybeRefOrGetter } from 'vue'
 import type { YMapEvent } from 'yjs'
 import { useVueFlow } from '@vue-flow/core'
-import { onScopeDispose, shallowRef, toValue, watch } from 'vue'
+import { onScopeDispose, ref, shallowRef, toValue, watch } from 'vue'
 import { WebsocketProvider } from 'y-websocket'
 import * as Y from 'yjs'
 
@@ -14,6 +14,9 @@ export function useCollaborativeFlow(diagramId: MaybeRefOrGetter<string>) {
   const yNodes = yDoc.getMap<Node>('nodes')
   const yEdges = yDoc.getMap<Edge>('edges')
 
+  const clientId = ref<number>()
+  const clients = shallowRef(new Map())
+
   const {
     addNodes,
     addEdges,
@@ -190,6 +193,19 @@ export function useCollaborativeFlow(diagramId: MaybeRefOrGetter<string>) {
       diagramId,
       yDoc,
     )
+
+    clientId.value = provider.value.awareness.clientID
+    clients.value = provider.value.awareness.getStates()
+
+    // provider.value.awareness.setLocalStateField('nigger', true)
+
+    provider.value.awareness.on('update', ({ added, updated, removed }) => {
+      // console.log('update', added, updated, removed)
+
+      // const changedClients = added.concat(updated).concat(removed)
+      // broadcastAwarenessMessage(awarenessProtocol.encodeAwarenessUpdate(awareness, changedClients))
+      clients.value = provider.value!.awareness.getStates()
+    })
   }, { immediate: true })
 
   onScopeDispose(() => {
@@ -206,6 +222,8 @@ export function useCollaborativeFlow(diagramId: MaybeRefOrGetter<string>) {
   }
 
   return {
+    clientId,
+    clients,
     reset,
   }
 }