From 63ab2d2f031d54641b75f5136aa38e29f2739a6e Mon Sep 17 00:00:00 2001
From: limil <gravitylmlml@gmail.com>
Date: Thu, 29 Jan 2026 09:22:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                   |  9 ++++++++-
 src/components/CustomNode.css | 14 ++++++++++++++
 src/components/CustomNode.tsx |  7 +++++--
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b751400..3d708fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,8 @@ import {
   NodeTypes,
   NodeChange,
   OnEdgesChange,
+  ConnectionMode,
+  MarkerType,
   OnConnect,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
@@ -102,8 +104,13 @@ function FlowContent(): ReactNode {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onNodeClick={onNodeClick}
+        onNodeDoubleClick={onNodeClick}
         nodeTypes={nodeTypes}
+        deleteKeyCode={["Delete"]}
+        defaultEdgeOptions={{ 
+          animated: true,
+          markerEnd: { type: MarkerType.ArrowClosed }
+        }}
         fitView
       >
         <Background />
diff --git a/src/components/CustomNode.css b/src/components/CustomNode.css
index bfacedf..426af5a 100644
--- a/src/components/CustomNode.css
+++ b/src/components/CustomNode.css
@@ -13,6 +13,20 @@
   box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
 }
 
+.custom-node .node-handle {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.custom-node:hover .node-handle {
+  opacity: 1;
+}
+
+.custom-node:hover .node-handle,
+.node-handle.react-flow__handle-connecting {
+  opacity: 1;
+}
+
 .node-header {
   display: flex;
   justify-content: space-between;
diff --git a/src/components/CustomNode.tsx b/src/components/CustomNode.tsx
index 88f87f6..5b63e93 100644
--- a/src/components/CustomNode.tsx
+++ b/src/components/CustomNode.tsx
@@ -28,8 +28,11 @@ export default function CustomNode({
         )}
       </div>
 
-      <Handle type="target" position={Position.Top} />
-      <Handle type="source" position={Position.Bottom} />
+      {[Position.Top, Position.Bottom, Position.Right, Position.Left].map((position) => (
+        (["target", "source"] as const).map((type) => (
+          <Handle type={type} position={position} id={position} key={position} className="node-handle"/>
+        ))
+      ))}
     </div>
   );
 }