Merge pull request #205 from boostcampwm-2024/feature-be-#198

node, edge, page 변경 사항 감지 및 데이터베이스 저장

Author: github-actions[bot]

apps/backend/package.json

@@ -45,6 +45,7 @@
     "sqlite3": "^5.1.7",
     "typeorm": "^0.3.20",
     "ws": "^8.14.2",
+    "y-prosemirror": "^1.2.12",
     "y-protocols": "^1.0.6",
     "y-socket.io": "^1.1.3",
     "y-websocket": "^1.5.0",

apps/backend/src/edge/edge.module.ts

@@ -10,5 +10,6 @@ import { NodeModule } from 'src/node/node.module';
   imports: [TypeOrmModule.forFeature([Edge]), forwardRef(() => NodeModule)],
   controllers: [EdgeController],
   providers: [EdgeService, EdgeRepository],
+  exports: [EdgeService]
 })
 export class EdgeModule {}

apps/backend/src/edge/edge.service.ts

@@ -59,4 +59,12 @@ export class EdgeService {
     }
     return edges;
   }
+  async findEdgeByFromNodeAndToNode(fromNodeId: number, toNodeId: number){
+    return this.edgeRepository.findOne({
+      where: {
+        fromNode: { id: fromNodeId },
+        toNode: { id: toNodeId },
+      },
+      relations: ['fromNode', 'toNode'],
+    });  }
 }

apps/backend/src/yjs/yjs.module.ts

@@ -2,9 +2,11 @@ import { Module } from '@nestjs/common';
 import { YjsService } from './yjs.service';
 import { NodeModule } from 'src/node/node.module';
 import { NodeCacheModule } from 'src/node-cache/node-cache.module';
+import { PageModule } from '../page/page.module';
+import { EdgeModule } from '../edge/edge.module';
 
 @Module({
-  imports: [NodeModule, NodeCacheModule],
+  imports: [NodeModule, PageModule, EdgeModule, NodeCacheModule],
   providers: [YjsService],
 })
 export class YjsModule {}

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

@@ -10,8 +10,43 @@ import { Server } from 'socket.io';
 import { YSocketIO } from 'y-socket.io/dist/server';
 import * as Y from 'yjs';
 import { NodeService } from '../node/node.service';
+import { PageService } from '../page/page.service';
 import { NodeCacheService } from '../node-cache/node-cache.service';
+import { yXmlFragmentToProsemirrorJSON } from 'y-prosemirror';
+import { EdgeService } from '../edge/edge.service';
+// yMap에 저장되는 Node 형태
+type YMapNode = {
+  id: string; // 노드 아이디
+  type: string; // 노드의 유형
+  data: {
+    title: string; // 제목
+    id: number; // 페이지 아이디
+  };
+  position: {
+    x: number; // X 좌표
+    y: number; // Y 좌표
+  };
+  selected: boolean;
+};
 
+// yMap에 저장되는 edge 형태
+type YMapEdge = {
+  id: string; // Edge 아이디
+  source: string; // 출발 노드 아이디
+  target: string; // 도착 노드 아이디
+  sourceHandle: string;
+  targetHandle: string;
+};
+
+// Y.Doc에는 name 컬럼이 없어서 생성했습니다.
+class CustomDoc extends Y.Doc {
+  name: string;
+
+  constructor(name: string) {
+    super();
+    this.name = name;
+  }
+}
 @WebSocketGateway(1234)
 export class YjsService
   implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect
@@ -21,6 +56,8 @@ export class YjsService
 
   constructor(
     private readonly nodeService: NodeService,
+    private readonly pageService: PageService,
+    private readonly edgeService: EdgeService,
     private readonly nodeCacheService: NodeCacheService,
   ) {}
   @WebSocketServer()
@@ -38,22 +75,31 @@ export class YjsService
 
     this.ysocketio.initialize();
 
-    this.ysocketio.on('document-update', (doc: Y.Doc) => {
-      // console.log(doc.get("content").doc.share.get("content"));
-      // console.log(doc.share.get('default'));
-    });
-
     this.ysocketio.on('document-loaded', (doc: Y.Doc) => {
-      doc.on('update', () => {
+      const nodes = doc.getMap('nodes');
+      const edges = doc.getMap('edges');
+      const editorDoc = doc.getXmlFragment('default');
+
+      // page content의 변경 사항을 감지한다.
+      editorDoc.observeDeep(() => {
+        const document = editorDoc.doc as CustomDoc;
+        const pageId = parseInt(document.name.split('-')[1]);
+        this.pageService.updatePage(
+          pageId,
+          JSON.parse(JSON.stringify(yXmlFragmentToProsemirrorJSON(editorDoc))),
+        );
+      });
+
+      // node의 변경 사항을 감지한다.
+      nodes.observe(() => {
         const nodes = Object.values(doc.getMap('nodes').toJSON());
 
         // 모든 노드에 대해 검사한다.
-        nodes.forEach((node) => {
+        nodes.forEach((node: YMapNode) => {
           const { title, id } = node.data;
           const { x, y } = node.position;
           // 만약 캐쉬에 노드가 존재하지 않다면 갱신 후 캐쉬에 노드를 넣는다.
           if (!this.nodeCacheService.has(id)) {
-            console.log(id);
             this.nodeService.updateNode(id, { title, x, y });
             this.nodeCacheService.set(id, title);
             return;
@@ -68,6 +114,24 @@ export class YjsService
           // 만약 캐쉬에 노드가 존재하고 title이 동일하다면 패스한다.
         });
       });
+      // edge의 변경 사항을 감지한다.
+      edges.observe(() => {
+        const edges = Object.values(doc.getMap('edges').toJSON());
+        edges.forEach(async (edge: YMapEdge) => {
+          console.log(edge);
+          const findEdge = await this.edgeService.findEdgeByFromNodeAndToNode(
+            parseInt(edge.source),
+            parseInt(edge.target),
+          );
+          // 연결된 노드가 없을 때만 edge 생성
+          if (!findEdge) {
+            await this.edgeService.createEdge({
+              fromNode: parseInt(edge.source),
+              toNode: parseInt(edge.target),
+            });
+          }
+        });
+      });
     });
   }