fixed: meeting

Author: gusrns48

src/api/meeting/meeting.ts

@@ -0,0 +1,9 @@
+import Send from "@/api/send.ts";
+
+export const getUser = (data: any) => {
+  return Send({
+    method: "get",
+    url: "conference/modify_inviting",
+    data: data,
+  });
+};

src/sass/base/_reset.sass

@@ -67,3 +67,6 @@ select
     height: 0
     line-height: 0
     text-indent: -9999px
+
+.react-flow__panel
+    display: none

src/views/meeting/components/MindMapComponent.tsx

@@ -1,4 +1,14 @@
-import { ReactFlow } from "@xyflow/react";
+import React, { useCallback } from 'react';
+import {
+  ReactFlow,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  getIncomers,
+  getOutgoers,
+  getConnectedEdges,
+} from '@xyflow/react';
 
 // style
 import "@xyflow/react/dist/style.css";
@@ -58,11 +68,69 @@ const MindMapComponent = ({ setScripts }: MindMapComponentProps) => {
   const [mode, setMode] = useState<string>("none");
 
   const initialNodes = [
-    { id: "1", position: { x: 0, y: 0 }, data: { label: "2" } },
-    { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Start here...' },
+      position: { x: -150, y: 0 },
+    },
+    {
+      id: '2',
+      type: 'input',
+      data: { label: '...or here!' },
+      position: { x: 150, y: 0 },
+    },
+    { id: '3', data: { label: 'Delete me.' }, position: { x: 0, y: 100 } },
+    { id: '4', data: { label: 'Then me!' }, position: { x: 0, y: 200 } },
+    {
+      id: '5',
+      type: 'output',
+      data: { label: 'End here!' },
+      position: { x: 0, y: 300 },
+    },
   ];
 
-  const initialEdges = [{ id: "e1-2", source: "1", target: "2" }];
+  const initialEdges = [
+    { id: '1->3', source: '1', target: '3' },
+    { id: '2->3', source: '2', target: '3' },
+    { id: '3->4', source: '3', target: '4' },
+    { id: '4->5', source: '4', target: '5' },
+  ];
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback(
+    (params: any) => setEdges(addEdge(params, edges)),
+    [edges],
+  );
+
+  const onNodesDelete = useCallback(
+    (deleted: any[]) => {
+      setEdges(
+        deleted.reduce((acc, node) => {
+          const incomers = getIncomers(node, nodes, edges);
+          const outgoers = getOutgoers(node, nodes, edges);
+          const connectedEdges = getConnectedEdges([node], edges);
+ 
+          const remainingEdges = acc.filter(
+            (edge: { id: string; source: string; target: string; }) => !connectedEdges.includes(edge),
+          );
+ 
+          const createdEdges = incomers.flatMap(({ id: source }) =>
+            outgoers.map(({ id: target }) => ({
+              id: `${source}->${target}`,
+              source,
+              target,
+            })),
+          );
+ 
+          return [...remainingEdges, ...createdEdges];
+        }, edges),
+      );
+    },
+    [nodes, edges],
+  );
 
   return (
     <div className="mind-map-container">
@@ -83,7 +151,17 @@ const MindMapComponent = ({ setScripts }: MindMapComponentProps) => {
       ) : (
         <div className="mind-map-main">
           <div className="mind-map-wrap">
-            <ReactFlow nodes={initialNodes} edges={initialEdges} />
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onNodesDelete={onNodesDelete}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              fitView
+              attributionPosition="top-right"
+            >
+            </ReactFlow>
           </div>
           <div className="middle-bar">
             <div className="record-length-wrap">

src/views/meeting/style/mind-map.sass

@@ -40,6 +40,8 @@
   .mind-map-main
     .mind-map-wrap
       +size(100vw, 100vh)
+      max-width: 100%
+      max-height: 100%
 
     .middle-bar
       +size(435px, 64px)