Skip to content

Commit 99f8374

Browse files
yewonJinyewonJin
committed
fix: 노드 드래그 시 select 많이 발생하는 서버 로직 임시 제거
1 parent b9a2da4 commit 99f8374

File tree

1 file changed

+158
-156
lines changed

1 file changed

+158
-156
lines changed

‎apps/backend/src/yjs/yjs.service.ts‎

Lines changed: 158 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -49,27 +49,27 @@ export class YjsService
4949
@WebSocketServer()
5050
server: Server;
5151

52-
insertProseMirrorDataToXmlFragment(xmlFragment: Y.XmlFragment, data: any[]) {
53-
// XML Fragment 초기화
54-
xmlFragment.delete(0, xmlFragment.length);
55-
56-
// 데이터를 순회하면서 추가
57-
data.forEach((nodeData) => {
58-
const yNode = new Y.XmlElement(nodeData.type);
59-
60-
if (nodeData.content) {
61-
nodeData.content.forEach((child) => {
62-
if (child.type === 'text') {
63-
const yText = new Y.XmlText();
64-
yText.insert(0, child.text);
65-
yNode.push([yText]);
66-
}
67-
});
68-
}
69-
70-
xmlFragment.push([yNode]);
71-
});
72-
}
52+
// insertProseMirrorDataToXmlFragment(xmlFragment: Y.XmlFragment, data: any[]) {
53+
// // XML Fragment 초기화
54+
// xmlFragment.delete(0, xmlFragment.length);
55+
56+
// // 데이터를 순회하면서 추가
57+
// data.forEach((nodeData) => {
58+
// const yNode = new Y.XmlElement(nodeData.type);
59+
60+
// if (nodeData.content) {
61+
// nodeData.content.forEach((child) => {
62+
// if (child.type === 'text') {
63+
// const yText = new Y.XmlText();
64+
// yText.insert(0, child.text);
65+
// yNode.push([yText]);
66+
// }
67+
// });
68+
// }
69+
70+
// xmlFragment.push([yNode]);
71+
// });
72+
// }
7373

7474
afterInit() {
7575
if (!this.server) {
@@ -82,144 +82,146 @@ export class YjsService
8282
});
8383

8484
this.ysocketio.initialize();
85-
86-
this.ysocketio.on('document-loaded', async (doc: Y.Doc) => {
87-
// Y.Doc에 name이 없어서 새로 만든 CustomDoc
88-
const editorDoc = doc.getXmlFragment('default');
89-
const customDoc = editorDoc.doc as CustomDoc;
90-
91-
// document name이 flow-room이라면 모든 노드들을 볼 수 있는 화면입니다.
92-
// 노드를 클릭해 페이지를 열었을 때만 해당 페이지 값을 가져와서 초기 데이터로 세팅해줍니다.
93-
if (customDoc.name?.startsWith('document-')) {
94-
const pageId = parseInt(customDoc.name.split('-')[1]);
95-
const findPage = await this.pageService.findPageById(pageId);
96-
97-
// content가 비어있다면 내부 구조가 novel editor schema를 따르지 않기 때문에 오류가 납니다.
98-
// content가 존재할 때만 넣어줍니다.
99-
const pageContent = JSON.parse(JSON.stringify(findPage.content));
100-
const novelEditorContent = {
101-
type: 'doc',
102-
content: pageContent,
103-
};
104-
pageContent.length > 0 &&
105-
// JSON.parse(findPage.content).length > 0 &&
106-
this.initializePageContent(novelEditorContent, editorDoc);
107-
108-
// 페이지 내용 변경 사항을 감지해서 데이터베이스에 갱신합니다.
109-
editorDoc.observeDeep(() => {
110-
const document = editorDoc.doc as CustomDoc;
111-
const pageId = parseInt(document.name.split('-')[1]);
112-
this.pageService.updatePage(
113-
pageId,
114-
JSON.parse(
115-
JSON.stringify(yXmlFragmentToProsemirrorJSON(editorDoc)),
116-
),
117-
);
118-
});
119-
return;
120-
}
121-
122-
// 만약 페이지가 아닌 모든 노드들을 볼 수 있는 document라면 node, edge 초기 데이터를 세팅해줍니다.
123-
// node, edge, page content 가져오기
124-
const nodes = await this.nodeService.findNodes();
125-
const edges = await this.edgeService.findEdges();
126-
const nodesMap = doc.getMap('nodes');
127-
const edgesMap = doc.getMap('edges');
128-
129-
this.initializeYNodeMap(nodes, nodesMap);
130-
this.initializeYEdgeMap(edges, edgesMap);
131-
132-
// node의 변경 사항을 감지한다.
133-
nodesMap.observe(async () => {
134-
const nodes = Object.values(doc.getMap('nodes').toJSON());
135-
136-
// 모든 노드에 대해 검사한다.
137-
for await (const node of nodes) {
138-
const { title, id } = node.data; // TODO: 이모지 추가
139-
const { x, y } = node.position;
140-
const isHolding = node.isHolding;
141-
const updateCondition =
142-
!(await this.nodeCacheService.has(id)) ||
143-
!(await this.nodeCacheService.hasSameTitle(id, title)) ||
144-
!(await this.nodeCacheService.isHoldingStatusChanged(
145-
id,
146-
isHolding,
147-
));
148-
149-
if (updateCondition) {
150-
await this.nodeService.updateNode(id, { title, x, y });
151-
await this.nodeCacheService.set(id, { title, isHolding });
152-
}
153-
}
154-
});
155-
156-
// edge의 변경 사항을 감지한다.
157-
edgesMap.observe(async () => {
158-
const edges: YMapEdge[] = Object.values(doc.getMap('edges').toJSON());
159-
160-
for await (const edge of edges) {
161-
const findEdge = await this.edgeService.findEdgeByFromNodeAndToNode(
162-
parseInt(edge.source),
163-
parseInt(edge.target),
164-
);
165-
166-
// 연결된 노드가 없을 때만 edge 생성
167-
if (!findEdge) {
168-
await this.edgeService.createEdge({
169-
fromNode: parseInt(edge.source),
170-
toNode: parseInt(edge.target),
171-
});
172-
}
173-
}
174-
});
175-
});
176-
}
177-
178-
// YMap에 노드 정보를 넣어준다.
179-
initializeYNodeMap(nodes: Node[], yMap: Y.Map<Object>): void {
180-
nodes.forEach((node) => {
181-
const nodeId = node.id.toString(); // id를 string으로 변환
182-
183-
// Y.Map에 데이터를 삽입
184-
yMap.set(nodeId, {
185-
id: nodeId,
186-
type: 'note',
187-
data: {
188-
title: node.page.title,
189-
id: node.page.id,
190-
emoji: node.page.emoji,
191-
},
192-
position: {
193-
x: node.x,
194-
y: node.y,
195-
},
196-
selected: false, // 기본적으로 선택되지 않음
197-
dragging: true,
198-
isHolding: false,
199-
});
200-
});
20185
}
20286

203-
// yMap에 edge 정보를 넣어준다.
204-
initializeYEdgeMap(edges: Edge[], yMap: Y.Map<Object>): void {
205-
edges.forEach((edge) => {
206-
const edgeId = edge.id.toString(); // id를 string으로 변환
207-
208-
// Y.Map에 데이터를 삽입
209-
yMap.set(`e${edge.fromNode.id}-${edge.toNode.id}`, {
210-
id: edgeId,
211-
source: edge.fromNode.id.toString(),
212-
target: edge.toNode.id.toString(),
213-
sourceHandle: 'left',
214-
targetHandle: 'left',
215-
});
216-
});
217-
}
87+
// this.ysocketio.on('document-loaded', async (doc: Y.Doc) => {
88+
// // Y.Doc에 name이 없어서 새로 만든 CustomDoc
89+
// const editorDoc = doc.getXmlFragment('default');
90+
// const customDoc = editorDoc.doc as CustomDoc;
91+
92+
// // document name이 flow-room이라면 모든 노드들을 볼 수 있는 화면입니다.
93+
// // 노드를 클릭해 페이지를 열었을 때만 해당 페이지 값을 가져와서 초기 데이터로 세팅해줍니다.
94+
// if (customDoc.name?.startsWith('document-')) {
95+
// const pageId = parseInt(customDoc.name.split('-')[1]);
96+
// const findPage = await this.pageService.findPageById(pageId);
97+
98+
// // content가 비어있다면 내부 구조가 novel editor schema를 따르지 않기 때문에 오류가 납니다.
99+
// // content가 존재할 때만 넣어줍니다.
100+
// const pageContent = JSON.parse(JSON.stringify(findPage.content));
101+
// const novelEditorContent = {
102+
// type: 'doc',
103+
// content: pageContent,
104+
// };
105+
// pageContent.length > 0 &&
106+
// // JSON.parse(findPage.content).length > 0 &&
107+
// this.initializePageContent(novelEditorContent, editorDoc);
108+
109+
// // 페이지 내용 변경 사항을 감지해서 데이터베이스에 갱신합니다.
110+
// editorDoc.observeDeep(() => {
111+
// const document = editorDoc.doc as CustomDoc;
112+
// const pageId = parseInt(document.name.split('-')[1]);
113+
// this.pageService.updatePage(
114+
// pageId,
115+
// JSON.parse(
116+
// JSON.stringify(yXmlFragmentToProsemirrorJSON(editorDoc)),
117+
// ),
118+
// );
119+
// });
120+
// return;
121+
// }
122+
123+
// // 만약 페이지가 아닌 모든 노드들을 볼 수 있는 document라면 node, edge 초기 데이터를 세팅해줍니다.
124+
// // node, edge, page content 가져오기
125+
// const nodes = await this.nodeService.findNodes();
126+
// const edges = await this.edgeService.findEdges();
127+
// const nodesMap = doc.getMap('nodes');
128+
// const edgesMap = doc.getMap('edges');
129+
130+
// this.initializeYNodeMap(nodes, nodesMap);
131+
// this.initializeYEdgeMap(edges, edgesMap);
132+
133+
// // node의 변경 사항을 감지한다.
134+
// nodesMap.observe(async () => {
135+
// const nodes = Object.values(doc.getMap('nodes').toJSON());
136+
137+
// // 모든 노드에 대해 검사한다.
138+
// for await (const node of nodes) {
139+
// const { title, id } = node.data; // TODO: 이모지 추가
140+
// const { x, y } = node.position;
141+
// const isHolding = node.isHolding;
142+
// const updateCondition =
143+
// !(await this.nodeCacheService.has(id)) ||
144+
// !(await this.nodeCacheService.hasSameTitle(id, title)) ||
145+
// !(await this.nodeCacheService.isHoldingStatusChanged(
146+
// id,
147+
// isHolding,
148+
// ));
149+
150+
// if (updateCondition) {
151+
// await this.nodeService.updateNode(id, { title, x, y });
152+
// await this.nodeCacheService.set(id, { title, isHolding });
153+
// }
154+
// }
155+
// });
156+
157+
// // edge의 변경 사항을 감지한다.
158+
// edgesMap.observe(async () => {
159+
// const edges: YMapEdge[] = Object.values(doc.getMap('edges').toJSON());
160+
161+
// for await (const edge of edges) {
162+
// const findEdge = await this.edgeService.findEdgeByFromNodeAndToNode(
163+
// parseInt(edge.source),
164+
// parseInt(edge.target),
165+
// );
166+
167+
// // 연결된 노드가 없을 때만 edge 생성
168+
// if (!findEdge) {
169+
// await this.edgeService.createEdge({
170+
// fromNode: parseInt(edge.source),
171+
// toNode: parseInt(edge.target),
172+
// });
173+
// }
174+
// }
175+
// });
176+
// });
177+
// }
178+
179+
// // YMap에 노드 정보를 넣어준다.
180+
// initializeYNodeMap(nodes: Node[], yMap: Y.Map<Object>): void {
181+
// nodes.forEach((node) => {
182+
// const nodeId = node.id.toString(); // id를 string으로 변환
183+
184+
// // Y.Map에 데이터를 삽입
185+
// yMap.set(nodeId, {
186+
// id: nodeId,
187+
// type: 'note',
188+
// data: {
189+
// title: node.page.title,
190+
// id: node.page.id,
191+
// emoji: node.page.emoji,
192+
// },
193+
// position: {
194+
// x: node.x,
195+
// y: node.y,
196+
// },
197+
// selected: false, // 기본적으로 선택되지 않음
198+
// dragging: true,
199+
// isHolding: false,
200+
// });
201+
// });
202+
// }
203+
204+
// // yMap에 edge 정보를 넣어준다.
205+
// initializeYEdgeMap(edges: Edge[], yMap: Y.Map<Object>): void {
206+
// edges.forEach((edge) => {
207+
// const edgeId = edge.id.toString(); // id를 string으로 변환
208+
209+
// // Y.Map에 데이터를 삽입
210+
// yMap.set(`e${edge.fromNode.id}-${edge.toNode.id}`, {
211+
// id: edgeId,
212+
// source: edge.fromNode.id.toString(),
213+
// target: edge.toNode.id.toString(),
214+
// sourceHandle: 'left',
215+
// targetHandle: 'left',
216+
// });
217+
// });
218+
// }
219+
220+
// // yXmlFragment에 content를 넣어준다.
221+
// initializePageContent(content: Object, yXmlFragment: Y.XmlFragment) {
222+
// prosemirrorJSONToYXmlFragment(novelEditorSchema, content, yXmlFragment);
223+
// }
218224

219-
// yXmlFragment에 content를 넣어준다.
220-
initializePageContent(content: Object, yXmlFragment: Y.XmlFragment) {
221-
prosemirrorJSONToYXmlFragment(novelEditorSchema, content, yXmlFragment);
222-
}
223225
handleConnection() {
224226
this.logger.log('접속');
225227
}

0 commit comments

Comments
 (0)