Skip to content

Commit aca803f

Browse files
gusrns48gusrns48
committed
Chore : meeting node edge connecting
1 parent 3ce265c commit aca803f

File tree

1 file changed

+73
-91
lines changed

1 file changed

+73
-91
lines changed

‎src/views/meeting/components/MindMapComponent.tsx‎

Lines changed: 73 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
getIncomers,
88
getOutgoers,
99
getConnectedEdges,
10-
Node
10+
Node,
11+
Edge
1112
} from "@xyflow/react";
1213

1314
// style
@@ -23,8 +24,8 @@ import useRecordingTimer from "@/views/meeting/components/RecodingTimer";
2324

2425
// import
2526
import { useEffect, useState } from "react";
26-
import { Client } from "@stomp/stompjs";
27-
import html2canvas from 'html2canvas';
27+
// import { Client } from "@stomp/stompjs";
28+
// import html2canvas from 'html2canvas';
2829

2930
// type
3031
import { conferenceData } from "@/types/conferanceData";
@@ -57,68 +58,57 @@ const MindMapComponent = ({
5758

5859
const { formattedTime } = useRecordingTimer(isRecording, isPaused);
5960

60-
const [scriptList, setScriptList] = useState<
61+
const [, setScriptList] = useState<
6162
{ time: string; script: string }[]
6263
>([]);
6364

6465
const [mode, setMode] = useState<string>("none");
6566

66-
const meetingStart = () => {
67-
const client = new Client({
68-
brokerURL: "wss://www.moaba.site/ws", // 서버 WebSocket URL q
69-
reconnectDelay: 5000,
70-
debug: (str) => {
71-
console.log(str);
72-
},
73-
onConnect: () => {
74-
console.log("연결");
75-
client.subscribe(
76-
`/topic/conference/${conferenceData.projectId}/participants`,
77-
(message: any) => {
78-
const data: any = JSON.parse(message.body);
79-
console.log(data.participants);
80-
}
81-
);
82-
},
83-
onWebSocketError: (event) => {
84-
console.error("❌ WebSocket 연결 실패:", event);
85-
},
86-
onStompError: (frame) => {
87-
console.error("❌ STOMP 에러:", frame);
88-
},
89-
// onConnect: (conn: any) => {
90-
// console.log('[+] WebSocket 연결이 되었습니다.', conn);
91-
// // client.subscribe(SUB_ENDPOINT, (message: IMessage) => {
92-
// // const receiveData = JSON.parse(message.body);
93-
// // });
94-
// },
95-
});
96-
console.log(client);
97-
client.activate();
98-
99-
// getProfile().then((res: any) => {
100-
// let data = {
101-
// "event": "participant_join",
102-
// "projectId": projectId,
103-
// "memberId": res.data.data.memberId
104-
// }
105-
// getInviting(projectId, data).then((res: any) => {
106-
107-
// })
108-
// })
109-
};
110-
111-
const handleDownload = (title: string, ref: React.RefObject<HTMLDivElement>) => () => {
112-
if (!ref.current) return;
113-
114-
html2canvas(ref.current).then((canvas) => {
115-
const link = document.createElement('a');
116-
link.href = canvas.toDataURL('image/png');
117-
link.download = title === '' ? '제목없음' : title;
118-
document.body.appendChild(link);
119-
link.click();
120-
});
121-
};
67+
// const meetingStart = () => {
68+
// const client = new Client({
69+
// brokerURL: "wss://www.moaba.site/ws", // 서버 WebSocket URL q
70+
// reconnectDelay: 5000,
71+
// debug: (str) => {
72+
// console.log(str);
73+
// },
74+
// onConnect: () => {
75+
// console.log("연결");
76+
// client.subscribe(
77+
// `/topic/conference/${conferenceData.projectId}/participants`,
78+
// (message: any) => {
79+
// const data: any = JSON.parse(message.body);
80+
// console.log(data.participants);
81+
// }
82+
// );
83+
// },
84+
// onWebSocketError: (event) => {
85+
// console.error("❌ WebSocket 연결 실패:", event);
86+
// },
87+
// onStompError: (frame) => {
88+
// console.error("❌ STOMP 에러:", frame);
89+
// },
90+
// onConnect: (conn: any) => {
91+
// console.log('[+] WebSocket 연결이 되었습니다.', conn);
92+
// // client.subscribe(SUB_ENDPOINT, (message: IMessage) => {
93+
// // const receiveData = JSON.parse(message.body);
94+
// // });
95+
// },
96+
// });
97+
// console.log(client);
98+
// client.activate();
99+
// };
100+
101+
// const handleDownload = (title: string, ref: React.RefObject<HTMLDivElement>) => () => {
102+
// if (!ref.current) return;
103+
104+
// html2canvas(ref.current).then((canvas) => {
105+
// const link = document.createElement('a');
106+
// link.href = canvas.toDataURL('image/png');
107+
// link.download = title === '' ? '제목없음' : title;
108+
// document.body.appendChild(link);
109+
// link.click();
110+
// });
111+
// };
122112

123113
useEffect(() => {
124114
if (finalTranscript !== "") {
@@ -131,7 +121,7 @@ const MindMapComponent = ({
131121
setScriptList((prev) => {
132122
const updated = [...prev, newScript];
133123

134-
if (updated.length >= 2) {
124+
if (updated.length >= 7) {
135125
const testString = updated.map((item) => item.script).join(" ");
136126

137127
let data = {
@@ -142,6 +132,15 @@ const MindMapComponent = ({
142132
postScript(data).then((res: any) => {
143133
setScriptList([]);
144134
setInitialNodes(res.data.data.nodes)
135+
const edges = res.data.data.nodes
136+
.filter((node: any) => node.parentId)
137+
.map((node: any, index: number) => ({
138+
id: `${index}`,
139+
source: node.parentId!,
140+
target: node.id,
141+
}));
142+
143+
setInitialEdges(edges);
145144
});
146145
}
147146

@@ -163,44 +162,27 @@ const MindMapComponent = ({
163162
data: { label: '회의 키워드' },
164163
position: { x: -150, y: 0 },
165164
},
166-
// {
167-
// id: '2',
168-
// type: 'output',
169-
// data: { label: '키워드드' },
170-
// position: { x: 150, y: 0 },
171-
// },
172-
// {
173-
// id: '1',
174-
// type: 'input',
175-
// data: { label: 'Start here...' },
176-
// position: { x: -150, y: 0 },
177-
// },
178-
// {
179-
// id: '2',
180-
// type: 'input',
181-
// data: { label: '...or here!' },
182-
// position: { x: 150, y: 0 },
183-
// },
184-
// { id: '3', data: { label: 'Delete me.' }, position: { x: 0, y: 100 } },
185-
// { id: '4', data: { label: 'Then me!' }, position: { x: 0, y: 200 } },
186-
// {
187-
// id: '5',
188-
// type: 'output',
189-
// data: { label: 'End here!' },
190-
// position: { x: 0, y: 300 },
191-
// },
165+
{
166+
id: '2',
167+
type: 'output',
168+
data: { label: '다음 키워드' },
169+
position: { x: 150, y: 0 },
170+
},
192171
]);
193172

194-
const initialEdges = [
195-
{ id: "1->2", source: "1", target: "3" },
196-
];
173+
const [initialEdges, setInitialEdges] = useState<Edge[]>([
174+
{ id: "1", source: "1", target: "2" },
175+
]);
197176

198177
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
199178
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
200179

201180
useEffect(() => {
202181
setNodes(initialNodes);
203-
}, [initialNodes]); // 임시방편으로 만듦
182+
setEdges(initialEdges);
183+
184+
console.log(initialNodes, initialEdges)
185+
}, [initialNodes, initialEdges]); // 임시방편으로 만듦
204186

205187
const onConnect = useCallback(
206188
(params: any) => setEdges(addEdge(params, edges)),

0 commit comments

Comments
 (0)