feat: add node select option (#35)

* feat: add node select option

* chore: cleanup

src/components/cards/Canvas.tsx

@@ -1,6 +1,6 @@
 import { parseEdges, parseNodes } from "@/utils/canvas";
-import { useMemo } from "react";
-import ReactFlow from "reactflow";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import ReactFlow, { useEdgesState, useNodesState } from "reactflow";
 import "reactflow/dist/style.css";
 import { NodeCard } from "./Node";
 
@@ -13,15 +13,22 @@ const NodeTypes = {
 };
 
 const CardCanvas = ({ data, blockHeight, columns }: any) => {
-  const edges = useMemo(() => parseEdges(data), [data]);
-  const nodes = useMemo(
-    () =>
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const updateData = useCallback(() => {
+    setEdges(parseEdges(data));
+    setNodes(
       parseNodes(data, {
         width: columns > 5 ? SINGLE_BLOCK_WIDTH : CONTAINER_WIDTH,
         height: CONTAINER_HEIGHT,
-      }),
-    [data]
-  );
+      })
+    );
+  }, [data, columns]);
+
+  useEffect(() => {
+    updateData();
+  }, [updateData]);
 
   return (
     <div
@@ -47,6 +54,8 @@ const CardCanvas = ({ data, blockHeight, columns }: any) => {
         zoomOnScroll={false}
         draggable={false}
         preventScrolling={false}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
         onInit={(instance) => setTimeout(() => instance.fitView(), 100)}
       ></ReactFlow>
     </div>

src/components/cards/Node.tsx

@@ -6,7 +6,7 @@ import { getBgColorClassName, getColorByAccess, getLevel } from "@/utils/nodes";
 import Link from "next/link";
 import { useHighlight } from "@/hooks/useHighlight";
 
-export function NodeCard({ data }: any) {
+export function NodeCard({ data, sourcePosition, targetPosition, selected }: any) {
   const highlighted = useHighlight(data);
 
   const { className, access, starColor, summary } = useMemo(() => {
@@ -21,11 +21,15 @@ export function NodeCard({ data }: any) {
     return { access, starColor, summary, className };
   }, [data, highlighted]);
 
+  const onClick = () => {
+    if(!selected || !data?.Url) return;
+    window?.open(data?.Url, '_blank')?.focus();
+  }
+
   return (
     <div className="group cursor-pointer">
-      <Handle type="target" position={Position.Top} id={data.Key} />
-      <Link href={data?.Url} target="_blank">
-        <div className={className}>
+      <Handle type="target" position={targetPosition} id={data.Key} />
+        <div onClick={onClick} className={className}>
           <div className="relative">
             <p className="z-10">{data.Title}</p>
             <p className="z-10">{data.Author}</p>
@@ -54,9 +58,7 @@ export function NodeCard({ data }: any) {
             </div>
           </div>
         </div>
-      </Link>
-
-      <Handle type="source" position={Position.Bottom} id={data.Key} />
+      <Handle type="source" position={sourcePosition} id={data.Key} />
     </div>
   );
 }