SuperViz for React Flow

1
import { createRoom, Room } from "@superviz/room";
2
import { Comments, HTMLPin, MousePointers } from '@superviz/collaboration'
3
import { v4 as generateId } from "uuid";
4

5
import { useCallback, useEffect, useRef } from "react";
6
import { Realtime, type Channel } from "@superviz/realtime/client";
7
import ReactFlowComponent from './reactflow-component'
8

9
const DEVELOPER_TOKEN = import.meta.env.VITE_SUPERVIZ_API_KEY;
10

11
const Children = () => {
12
  const channelRef = useRef<Channel | null>(null);
13
  const roomRef = useRef<Room | null>(null);
14
  const initializedRef = useRef(false);
15
  const commentsRef = useRef<Comments | null>(null);
16
  const mousePointersRef = useRef<MousePointers | null>(null);
17

18
  const initialize = useCallback(async () => {
19
    if (initializedRef.current) return;
20

21
    initializedRef.current = true;
22

23
    try {
24
      const participantId = generateId();
25
      const realtime = new Realtime(DEVELOPER_TOKEN, {
26
        participant: { 
27
          id: participantId
28
        },
29
      });
30

31
      channelRef.current = await realtime.connect("react-flow-nodes-sync");
32

33
      const room = await createRoom({
34
        developerToken: DEVELOPER_TOKEN,
35
        roomId: "ROOM_ID",
36
        participant: {
37
          id: participantId,
38
          name: "Participant",
39
        },
40
        group: {
41
          id: "GROUP_ID",
42
          name: "GROUP_NAME",
43
        },
44
      });
45

46
      mousePointersRef.current = new MousePointers('react-flow-container')
47
      const pin = new HTMLPin('react-flow-container', { 
48
        dataAttributeName: "data-id",
49
        dataAttributeValueFilters: [/.*null-(target|source)$/],
50
      })
51

52
      commentsRef.current = new Comments(pin)
53

54
      room.addComponent(commentsRef.current)
55
      room.addComponent(mousePointersRef.current)
56

57
      roomRef.current = room;
58
    } catch (error) {
59
      console.error("Error initializing SuperViz Room:", error);
60
    }
61
  }, []);
62

63
  useEffect(() => {
64
    initialize();
65

66
    return () => { 
67
      if(roomRef.current) { 
68
        roomRef.current.leave();
69
      }
70

71
      if(channelRef.current) { 
72
        channelRef.current.disconnect()
73
      }
74
    }
75
  }, []);
76
  
77

78
  return (
79
    <div className="w-full h-full bg-gray-200 flex items-center justify-center flex-col">
80
      <div id="react-flow-container" className="w-full h-full">
81
        <ReactFlowComponent />
82
      </div>
83
    </div>
84
  );
85
};
86

87
const App = () => {
88
  return (
89
    <ReactFlowProvider>
90
      <Children />
91
    </ReactFlowProvider>
92
  )
93
}
94

95
export default App;