From 8315c61541f989184fc36b65bd9c2c526483fa67 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Tue, 18 Feb 2025 19:22:13 +0800
Subject: [PATCH 01/10] feat: Implement copy/paste functionality for nodes and
 edges

---
 .../components/DataStory/DataStoryCanvas.tsx  |  34 +++-
 .../DataStory/controls/useCopyPaste.ts        | 164 ++++++++++++++++++
 2 files changed, 194 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/components/DataStory/controls/useCopyPaste.ts

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
index f44cb10e..2d437034 100644
--- a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
+++ b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -27,6 +27,7 @@ import { getNodesWithNewSelection } from './getNodesWithNewSelection';
 import { createDataStoryId, LinkCount, LinkId, NodeStatus, RequestObserverType } from '@data-story/core';
 import { useDragNode } from './useDragNode';
 import { ReactFlowNode } from '../Node/ReactFlowNode';
+import useCopyPaste from './controls/useCopyPaste';
 
 const nodeTypes = {
   commentNodeComponent: CommentNodeComponent,
@@ -53,7 +54,7 @@ export const DataStoryCanvas = React.memo(DataStoryCanvasComponent);
 
 const Flow = ({
   initDiagram,
-  controls,
+  controls = [],
   onInitialize,
   setSidebarKey,
   onSave,
@@ -187,7 +188,7 @@ const Flow = ({
     edges,
   });
 
-  const getOnNodesDelete =  useCallback((nodesToDelete: ReactFlowNode[]) => {
+  const getOnNodesDelete = useCallback((nodesToDelete: ReactFlowNode[]) => {
     nodesToDelete.forEach(node => {
       const store = reactFlowStore.getState();
       const { edges } = store;
@@ -214,6 +215,11 @@ const Flow = ({
     focusOnFlow();
   }, [connect, focusOnFlow, reactFlowStore]);
 
+  const { cut, copy, paste, bufferedNodes } = useCopyPaste();
+
+  const canCopy = nodes.some(({ selected }) => selected);
+  const canPaste = bufferedNodes.length > 0;
+
   return (
     <>
       <style>
@@ -258,7 +264,7 @@ const Flow = ({
         }}
         onEdgeDoubleClick={(event, edge) => {
           if (!client) return;
-          if(client.onEdgeDoubleClick) client.onEdgeDoubleClick(edge.id);
+          if (client.onEdgeDoubleClick) client.onEdgeDoubleClick(edge.id);
         }}
         onEdgesChange={(changes: EdgeChange[]) => {
           onEdgesChange(changes);
@@ -305,7 +311,27 @@ const Flow = ({
       >
         <DataStoryControls
           onSave={onSave}
-          controls={controls}
+          controls={[
+            ...controls,
+            <button
+              onClick={() => cut()}
+              disabled={!canCopy}
+            >
+              cut
+            </button>,
+            <button
+              onClick={() => copy()}
+              disabled={!canCopy}
+            >
+              copy
+            </button>,
+            <button
+              onClick={() => paste({ x: 0, y: 0 })}
+              disabled={!canPaste}
+            >
+              paste
+            </button>,
+          ]}
           setShowAddNode={setShowAddNode}
         />
         <Background color='#E7E7E7' variant={BackgroundVariant.Lines}/>
diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
new file mode 100644
index 00000000..5c64dbe5
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -0,0 +1,164 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  Node,
+  useKeyPress,
+  useReactFlow,
+  getConnectedEdges,
+  Edge,
+  XYPosition,
+  useStore,
+  type KeyCode,
+} from '@xyflow/react';
+
+export function useCopyPaste<
+  NodeType extends Node = Node,
+  EdgeType extends Edge = Edge
+>() {
+  const mousePosRef = useRef<XYPosition>({ x: 0, y: 0 });
+  const rfDomNode = useStore((state) => state.domNode);
+
+  const { getNodes, setNodes, getEdges, setEdges, screenToFlowPosition } =
+    useReactFlow<NodeType, EdgeType>();
+
+  // Set up the paste buffers to store the copied nodes and edges.
+  const [bufferedNodes, setBufferedNodes] = useState([] as NodeType[]);
+  const [bufferedEdges, setBufferedEdges] = useState([] as EdgeType[]);
+
+  console.log('bufferedNodes', bufferedNodes);
+
+  // initialize the copy/paste hook
+  // 1. remove native copy/paste/cut handlers
+  // 2. add mouse move handler to keep track of the current mouse position
+  useEffect(() => {
+    const events = ['cut', 'copy', 'paste'];
+
+    if (rfDomNode) {
+      const preventDefault = (e: Event) => e.preventDefault();
+
+      const onMouseMove = (event: MouseEvent) => {
+        mousePosRef.current = {
+          x: event.clientX,
+          y: event.clientY,
+        };
+      };
+
+      for(const event of events) {
+        rfDomNode.addEventListener(event, preventDefault);
+      }
+
+      rfDomNode.addEventListener('mousemove', onMouseMove);
+
+      return () => {
+        for(const event of events) {
+          rfDomNode.removeEventListener(event, preventDefault);
+        }
+
+        rfDomNode.removeEventListener('mousemove', onMouseMove);
+      };
+    }
+  }, [rfDomNode]);
+
+  const copy = useCallback(() => {
+    const selectedNodes = getNodes().filter((node) => node.selected);
+    const selectedEdges = getConnectedEdges(selectedNodes, getEdges()).filter(
+      (edge) => {
+        const isExternalSource = selectedNodes.every(
+          (n) => n.id !== edge.source,
+        );
+        const isExternalTarget = selectedNodes.every(
+          (n) => n.id !== edge.target,
+        );
+
+        return !(isExternalSource || isExternalTarget);
+      },
+    );
+
+    setBufferedNodes(selectedNodes);
+    setBufferedEdges(selectedEdges);
+  }, [getNodes, getEdges]);
+
+  const cut = useCallback(() => {
+    const selectedNodes = getNodes().filter((node) => node.selected);
+    const selectedEdges = getConnectedEdges(selectedNodes, getEdges()).filter(
+      (edge) => {
+        const isExternalSource = selectedNodes.every(
+          (n) => n.id !== edge.source,
+        );
+        const isExternalTarget = selectedNodes.every(
+          (n) => n.id !== edge.target,
+        );
+
+        return !(isExternalSource || isExternalTarget);
+      },
+    );
+
+    setBufferedNodes(selectedNodes);
+    setBufferedEdges(selectedEdges);
+
+    // A cut action needs to remove the copied nodes and edges from the graph.
+    setNodes((nodes) => nodes.filter((node) => !node.selected));
+    setEdges((edges) => edges.filter((edge) => !selectedEdges.includes(edge)));
+  }, [getNodes, setNodes, getEdges, setEdges]);
+
+  const paste = useCallback(
+    (
+      { x: pasteX, y: pasteY } = screenToFlowPosition({
+        x: mousePosRef.current.x,
+        y: mousePosRef.current.y,
+      }),
+    ) => {
+      const minX = Math.min(...bufferedNodes.map((s) => s.position.x));
+      const minY = Math.min(...bufferedNodes.map((s) => s.position.y));
+
+      const now = Date.now();
+
+      const newNodes: NodeType[] = bufferedNodes.map((node) => {
+        const id = `${node.id}-${now}`;
+        const x = pasteX + (node.position.x - minX);
+        const y = pasteY + (node.position.y - minY);
+
+        return { ...node, id, position: { x, y } };
+      });
+
+      const newEdges: EdgeType[] = bufferedEdges.map((edge) => {
+        const id = `${edge.id}-${now}`;
+        const source = `${edge.source}-${now}`;
+        const target = `${edge.target}-${now}`;
+
+        return { ...edge, id, source, target };
+      });
+
+      setNodes((nodes) => [
+        ...nodes.map((node) => ({ ...node, selected: false })),
+        ...newNodes,
+      ]);
+      setEdges((edges) => [
+        ...edges.map((edge) => ({ ...edge, selected: false })),
+        ...newEdges,
+      ]);
+    },
+    [bufferedNodes, bufferedEdges, screenToFlowPosition, setNodes, setEdges],
+  );
+
+  useShortcut(['Meta+x', 'Control+x'], cut);
+  useShortcut(['Meta+c', 'Control+c'], copy);
+  useShortcut(['Meta+v', 'Control+v'], paste);
+
+  return { cut, copy, paste, bufferedNodes, bufferedEdges };
+}
+
+function useShortcut(keyCode: KeyCode, callback: Function): void {
+  const [didRun, setDidRun] = useState(false);
+  const shouldRun = useKeyPress(keyCode);
+
+  useEffect(() => {
+    if (shouldRun && !didRun) {
+      callback();
+      setDidRun(true);
+    } else {
+      setDidRun(shouldRun);
+    }
+  }, [shouldRun, didRun, callback]);
+}
+
+export default useCopyPaste;

From 5f4036cae926b7044866643a9492044fc491fd36 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Wed, 19 Feb 2025 11:37:33 +0800
Subject: [PATCH 02/10] refactor: Refactor useCopyPaste hook for clarity and
 conciseness.

---
 packages/ui/src/components/DataStory/controls/useCopyPaste.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
index 5c64dbe5..77f1e226 100644
--- a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -10,6 +10,7 @@ import {
   type KeyCode,
 } from '@xyflow/react';
 
+// Could you help me refactor the useCopyPaste hook? Please keep the logic intact while making the code clearer and more concise. AI!
 export function useCopyPaste<
   NodeType extends Node = Node,
   EdgeType extends Edge = Edge
@@ -26,9 +27,6 @@ export function useCopyPaste<
 
   console.log('bufferedNodes', bufferedNodes);
 
-  // initialize the copy/paste hook
-  // 1. remove native copy/paste/cut handlers
-  // 2. add mouse move handler to keep track of the current mouse position
   useEffect(() => {
     const events = ['cut', 'copy', 'paste'];
 

From b09e4e1e1b3fc27aa95d3488ca7fed31abaa7a54 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Wed, 19 Feb 2025 11:46:44 +0800
Subject: [PATCH 03/10] refactor: Improve readability and conciseness of
 useCopyPaste hook

---
 .../components/DataStory/DataStoryCanvas.tsx  |   2 +-
 .../DataStory/controls/useCopyPaste.ts        | 203 +++++++-----------
 2 files changed, 80 insertions(+), 125 deletions(-)

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
index 2d437034..7f331e89 100644
--- a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
+++ b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -27,7 +27,7 @@ import { getNodesWithNewSelection } from './getNodesWithNewSelection';
 import { createDataStoryId, LinkCount, LinkId, NodeStatus, RequestObserverType } from '@data-story/core';
 import { useDragNode } from './useDragNode';
 import { ReactFlowNode } from '../Node/ReactFlowNode';
-import useCopyPaste from './controls/useCopyPaste';
+import { useCopyPaste } from './controls/useCopyPaste';
 
 const nodeTypes = {
   commentNodeComponent: CommentNodeComponent,
diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
index 77f1e226..dcebc4ca 100644
--- a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -10,153 +10,108 @@ import {
   type KeyCode,
 } from '@xyflow/react';
 
-// Could you help me refactor the useCopyPaste hook? Please keep the logic intact while making the code clearer and more concise. AI!
 export function useCopyPaste<
   NodeType extends Node = Node,
   EdgeType extends Edge = Edge
 >() {
+  const { getNodes, setNodes, getEdges, setEdges, screenToFlowPosition } = useReactFlow<NodeType, EdgeType>();
   const mousePosRef = useRef<XYPosition>({ x: 0, y: 0 });
   const rfDomNode = useStore((state) => state.domNode);
+  const [bufferedNodes, setBufferedNodes] = useState<NodeType[]>([]);
+  const [bufferedEdges, setBufferedEdges] = useState<EdgeType[]>([]);
 
-  const { getNodes, setNodes, getEdges, setEdges, screenToFlowPosition } =
-    useReactFlow<NodeType, EdgeType>();
-
-  // Set up the paste buffers to store the copied nodes and edges.
-  const [bufferedNodes, setBufferedNodes] = useState([] as NodeType[]);
-  const [bufferedEdges, setBufferedEdges] = useState([] as EdgeType[]);
-
-  console.log('bufferedNodes', bufferedNodes);
-
+  // Event handling setup
   useEffect(() => {
-    const events = ['cut', 'copy', 'paste'];
+    if (!rfDomNode) return;
 
-    if (rfDomNode) {
-      const preventDefault = (e: Event) => e.preventDefault();
+    const handleMouseMove = (event: MouseEvent) => {
+      mousePosRef.current = { x: event.clientX, y: event.clientY };
+    };
 
-      const onMouseMove = (event: MouseEvent) => {
-        mousePosRef.current = {
-          x: event.clientX,
-          y: event.clientY,
-        };
-      };
+    const preventDefault = (e: Event) => e.preventDefault();
+    const events: (keyof HTMLElementEventMap)[] = ['cut', 'copy', 'paste'];
 
-      for(const event of events) {
-        rfDomNode.addEventListener(event, preventDefault);
-      }
+    events.forEach(event => rfDomNode.addEventListener(event, preventDefault));
+    rfDomNode.addEventListener('mousemove', handleMouseMove);
 
-      rfDomNode.addEventListener('mousemove', onMouseMove);
+    return () => {
+      events.forEach(event => rfDomNode.removeEventListener(event, preventDefault));
+      rfDomNode.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [rfDomNode]);
 
-      return () => {
-        for(const event of events) {
-          rfDomNode.removeEventListener(event, preventDefault);
-        }
+  const getSelectedNodesAndEdges = useCallback(() => {
+    const selectedNodes = getNodes().filter(node => node.selected);
+    const isEdgeInternal = (edge: EdgeType) =>
+      selectedNodes.some(n => n.id === edge.source) &&
+      selectedNodes.some(n => n.id === edge.target);
 
-        rfDomNode.removeEventListener('mousemove', onMouseMove);
-      };
-    }
-  }, [rfDomNode]);
+    return {
+      nodes: selectedNodes,
+      edges: getConnectedEdges(selectedNodes, getEdges()).filter(isEdgeInternal),
+    };
+  }, [getNodes, getEdges]);
 
   const copy = useCallback(() => {
-    const selectedNodes = getNodes().filter((node) => node.selected);
-    const selectedEdges = getConnectedEdges(selectedNodes, getEdges()).filter(
-      (edge) => {
-        const isExternalSource = selectedNodes.every(
-          (n) => n.id !== edge.source,
-        );
-        const isExternalTarget = selectedNodes.every(
-          (n) => n.id !== edge.target,
-        );
-
-        return !(isExternalSource || isExternalTarget);
-      },
-    );
-
-    setBufferedNodes(selectedNodes);
-    setBufferedEdges(selectedEdges);
-  }, [getNodes, getEdges]);
+    const { nodes, edges } = getSelectedNodesAndEdges();
+    setBufferedNodes(nodes);
+    setBufferedEdges(edges as EdgeType[]);
+  }, [getSelectedNodesAndEdges]);
 
   const cut = useCallback(() => {
-    const selectedNodes = getNodes().filter((node) => node.selected);
-    const selectedEdges = getConnectedEdges(selectedNodes, getEdges()).filter(
-      (edge) => {
-        const isExternalSource = selectedNodes.every(
-          (n) => n.id !== edge.source,
-        );
-        const isExternalTarget = selectedNodes.every(
-          (n) => n.id !== edge.target,
-        );
-
-        return !(isExternalSource || isExternalTarget);
-      },
-    );
-
-    setBufferedNodes(selectedNodes);
-    setBufferedEdges(selectedEdges);
-
-    // A cut action needs to remove the copied nodes and edges from the graph.
-    setNodes((nodes) => nodes.filter((node) => !node.selected));
-    setEdges((edges) => edges.filter((edge) => !selectedEdges.includes(edge)));
-  }, [getNodes, setNodes, getEdges, setEdges]);
-
-  const paste = useCallback(
-    (
-      { x: pasteX, y: pasteY } = screenToFlowPosition({
-        x: mousePosRef.current.x,
-        y: mousePosRef.current.y,
-      }),
-    ) => {
-      const minX = Math.min(...bufferedNodes.map((s) => s.position.x));
-      const minY = Math.min(...bufferedNodes.map((s) => s.position.y));
-
-      const now = Date.now();
-
-      const newNodes: NodeType[] = bufferedNodes.map((node) => {
-        const id = `${node.id}-${now}`;
-        const x = pasteX + (node.position.x - minX);
-        const y = pasteY + (node.position.y - minY);
-
-        return { ...node, id, position: { x, y } };
-      });
-
-      const newEdges: EdgeType[] = bufferedEdges.map((edge) => {
-        const id = `${edge.id}-${now}`;
-        const source = `${edge.source}-${now}`;
-        const target = `${edge.target}-${now}`;
-
-        return { ...edge, id, source, target };
-      });
-
-      setNodes((nodes) => [
-        ...nodes.map((node) => ({ ...node, selected: false })),
-        ...newNodes,
-      ]);
-      setEdges((edges) => [
-        ...edges.map((edge) => ({ ...edge, selected: false })),
-        ...newEdges,
-      ]);
-    },
-    [bufferedNodes, bufferedEdges, screenToFlowPosition, setNodes, setEdges],
-  );
-
-  useShortcut(['Meta+x', 'Control+x'], cut);
-  useShortcut(['Meta+c', 'Control+c'], copy);
-  useShortcut(['Meta+v', 'Control+v'], paste);
+    const { nodes, edges } = getSelectedNodesAndEdges();
+    setBufferedNodes(nodes);
+    setBufferedEdges(edges as EdgeType[]);
+
+    setNodes(nodes => nodes.filter(node => !node.selected));
+    setEdges(edges => edges.filter(edge => !(edges as EdgeType[]).includes(edge as EdgeType)));
+  }, [getSelectedNodesAndEdges, setNodes, setEdges]);
+
+  const paste = useCallback((position = screenToFlowPosition(mousePosRef.current)) => {
+    const now = Date.now();
+    const generateCopiedId = (originalId: string) => `${originalId}-${now}`;
+
+    const calculateNewPosition = (originalPos: XYPosition) => ({
+      x: position.x + (originalPos.x - Math.min(...bufferedNodes.map(n => n.position.x))),
+      y: position.y + (originalPos.y - Math.min(...bufferedNodes.map(n => n.position.y))),
+    });
+
+    const newNodes = bufferedNodes.map(node => ({
+      ...node,
+      id: generateCopiedId(node.id),
+      position: calculateNewPosition(node.position),
+      selected: true,
+    }));
+
+    const newEdges = bufferedEdges.map(edge => ({
+      ...edge,
+      id: generateCopiedId(edge.id),
+      source: generateCopiedId(edge.source),
+      target: generateCopiedId(edge.target),
+      selected: true,
+    }));
+
+    setNodes(nodes => [...nodes.map(n => ({ ...n, selected: false })), ...newNodes]);
+    setEdges(edges => [...edges.map(e => ({ ...e, selected: false })), ...newEdges]);
+  }, [bufferedNodes, bufferedEdges, screenToFlowPosition, setNodes, setEdges]);
+
+  useKeyboardShortcut(['Meta+x', 'Control+x'], cut);
+  useKeyboardShortcut(['Meta+c', 'Control+c'], copy);
+  useKeyboardShortcut(['Meta+v', 'Control+v'], paste);
 
   return { cut, copy, paste, bufferedNodes, bufferedEdges };
 }
 
-function useShortcut(keyCode: KeyCode, callback: Function): void {
-  const [didRun, setDidRun] = useState(false);
-  const shouldRun = useKeyPress(keyCode);
+function useKeyboardShortcut(keyCode: KeyCode, handler: () => void) {
+  const [keyPressed, setKeyPressed] = useState(false);
+  const isPressed = useKeyPress(keyCode);
 
   useEffect(() => {
-    if (shouldRun && !didRun) {
-      callback();
-      setDidRun(true);
-    } else {
-      setDidRun(shouldRun);
+    if (isPressed && !keyPressed) {
+      handler();
+      setKeyPressed(true);
+    } else if (!isPressed && keyPressed) {
+      setKeyPressed(false);
     }
-  }, [shouldRun, didRun, callback]);
+  }, [isPressed, keyPressed, handler]);
 }
-
-export default useCopyPaste;

From e088fb872a36a9c4779d254608077d35f4727a04 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Wed, 19 Feb 2025 15:46:44 +0800
Subject: [PATCH 04/10] style: Improve node selection styling with shadow and
 ring effects

---
 packages/ui/src/components/Node/NodeComponent.tsx            | 2 +-
 packages/ui/src/components/Node/table/TableNodeComponent.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/Node/NodeComponent.tsx b/packages/ui/src/components/Node/NodeComponent.tsx
index cb2d0aea..6ee7396c 100644
--- a/packages/ui/src/components/Node/NodeComponent.tsx
+++ b/packages/ui/src/components/Node/NodeComponent.tsx
@@ -19,7 +19,7 @@ const NodeComponent = ({ id, data, selected }: {
   return (
     (
       <div
-        className={'text-xs' + (selected ? ' shadow-xl' : '')}
+        className={`text-xs ${selected ? 'shadow-xl shadow-blue-100 ring-1 ring-blue-200' : ''}`}
         data-cy="data-story-node-component"
         onDoubleClick={() => {
           setOpenNodeSidebarId(id)
diff --git a/packages/ui/src/components/Node/table/TableNodeComponent.tsx b/packages/ui/src/components/Node/table/TableNodeComponent.tsx
index 8cd51fcd..f8e86134 100644
--- a/packages/ui/src/components/Node/table/TableNodeComponent.tsx
+++ b/packages/ui/src/components/Node/table/TableNodeComponent.tsx
@@ -15,7 +15,7 @@ import { MemoizedTableHeader } from './MemoizedTableHeader';
 import { CELL_MAX_WIDTH, CELL_MIN_WIDTH, CELL_WIDTH, CellsMatrix, ColumnWidthOptions } from './CellsMatrix';
 import { getFormatterOnlyAndDropParam } from './GetFormatterOnlyAndDropParam';
 
-const TableNodeComponent = ({ id, data }: {
+const TableNodeComponent = ({ id, data, selected }: {
   id: string,
   data: DataStoryNodeData,
   selected: boolean
@@ -158,7 +158,7 @@ const TableNodeComponent = ({ id, data }: {
   return (
     <div
       ref={tableRef}
-      className="shadow-xl bg-gray-50 border rounded border-gray-300 text-xs"
+      className={`text-xs border rounded border-gray-300 ${selected ? 'shadow-xl shadow-blue-100 ring-1 ring-blue-200' : ''} `}
     >
       <CustomHandle id={input.id} isConnectable={true} isInput={true} />
       <div data-cy={'data-story-table'} className="text-gray-600 max-w-[750px] bg-gray-100 rounded font-mono -mt-3">

From a255b832569c80a79a2a978c3dbca4d1712eb430 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Wed, 19 Feb 2025 16:37:16 +0800
Subject: [PATCH 05/10] feat: Add select all functionality with keyboard
 shortcut

---
 .../DataStory/controls/useCopyPaste.ts           | 16 ++++++++++++++++
 .../DataStory/getNodesWithNewSelection.ts        |  6 ++++++
 2 files changed, 22 insertions(+)

diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
index dcebc4ca..26c0425d 100644
--- a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -24,6 +24,7 @@ export function useCopyPaste<
   useEffect(() => {
     if (!rfDomNode) return;
 
+    // Listen for mouse move events on the DOM node and disable the default actions for cut, copy, and paste
     const handleMouseMove = (event: MouseEvent) => {
       mousePosRef.current = { x: event.clientX, y: event.clientY };
     };
@@ -34,9 +35,18 @@ export function useCopyPaste<
     events.forEach(event => rfDomNode.addEventListener(event, preventDefault));
     rfDomNode.addEventListener('mousemove', handleMouseMove);
 
+    // Listen for keydown events on the DOM node and disable the default action for select all
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+        e.preventDefault();
+      }
+    };
+
+    rfDomNode.addEventListener('keydown', handleKeyDown);
     return () => {
       events.forEach(event => rfDomNode.removeEventListener(event, preventDefault));
       rfDomNode.removeEventListener('mousemove', handleMouseMove);
+      rfDomNode.removeEventListener('keydown', handleKeyDown);
     };
   }, [rfDomNode]);
 
@@ -95,9 +105,15 @@ export function useCopyPaste<
     setEdges(edges => [...edges.map(e => ({ ...e, selected: false })), ...newEdges]);
   }, [bufferedNodes, bufferedEdges, screenToFlowPosition, setNodes, setEdges]);
 
+  const selectAll = useCallback(() => {
+    setNodes(nodes => nodes.map(node => ({ ...node, selected: true })));
+    setEdges(edges => edges.map(edge => ({ ...edge, selected: true })));
+  }, [setNodes, setEdges]);
+
   useKeyboardShortcut(['Meta+x', 'Control+x'], cut);
   useKeyboardShortcut(['Meta+c', 'Control+c'], copy);
   useKeyboardShortcut(['Meta+v', 'Control+v'], paste);
+  useKeyboardShortcut(['Meta+a', 'Control+a'], selectAll);
 
   return { cut, copy, paste, bufferedNodes, bufferedEdges };
 }
diff --git a/packages/ui/src/components/DataStory/getNodesWithNewSelection.ts b/packages/ui/src/components/DataStory/getNodesWithNewSelection.ts
index 89fb2b8e..ecb8562b 100644
--- a/packages/ui/src/components/DataStory/getNodesWithNewSelection.ts
+++ b/packages/ui/src/components/DataStory/getNodesWithNewSelection.ts
@@ -2,6 +2,12 @@ import { ReactFlowNode } from '../Node/ReactFlowNode'
 
 export type Direction = 'up' | 'down' | 'left' | 'right'
 
+/**
+ * using the direction, find the closest node to the current selected node
+ * @param {Direction} direction
+ * @param {ReactFlowNode[]} nodes
+ * @returns {ReactFlowNode | undefined}
+ */
 export const getNodesWithNewSelection = (
   direction: Direction,
   nodes: ReactFlowNode[],

From 8ba240efcf2872b0646fc95b5145956266c3aa02 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Wed, 19 Feb 2025 17:06:50 +0800
Subject: [PATCH 06/10] style: Move DataStoryCanvas styles to a separate CSS
 file

---
 .../components/DataStory/DataStoryCanvas.tsx  | 36 ++-----------------
 .../ui/src/styles/dataStoryCanvasStyle.css    |  9 +++++
 2 files changed, 12 insertions(+), 33 deletions(-)
 create mode 100644 packages/ui/src/styles/dataStoryCanvasStyle.css

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
index 7f331e89..61ccc94f 100644
--- a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
+++ b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -28,6 +28,7 @@ import { createDataStoryId, LinkCount, LinkId, NodeStatus, RequestObserverType }
 import { useDragNode } from './useDragNode';
 import { ReactFlowNode } from '../Node/ReactFlowNode';
 import { useCopyPaste } from './controls/useCopyPaste';
+import '../../styles/dataStoryCanvasStyle.css';
 
 const nodeTypes = {
   commentNodeComponent: CommentNodeComponent,
@@ -215,23 +216,12 @@ const Flow = ({
     focusOnFlow();
   }, [connect, focusOnFlow, reactFlowStore]);
 
-  const { cut, copy, paste, bufferedNodes } = useCopyPaste();
-
-  const canCopy = nodes.some(({ selected }) => selected);
-  const canPaste = bufferedNodes.length > 0;
+  useCopyPaste();
 
   return (
     <>
       <style>
         {`
-          @keyframes dash {
-            to {
-              stroke-dashoffset: -10;
-            }
-          }
-          .react-flow__edge:hover {
-            cursor: crosshair;
-          }
           ${draggedNode ? `
           .react-flow__edge {
             opacity: 0.5;
@@ -311,27 +301,7 @@ const Flow = ({
       >
         <DataStoryControls
           onSave={onSave}
-          controls={[
-            ...controls,
-            <button
-              onClick={() => cut()}
-              disabled={!canCopy}
-            >
-              cut
-            </button>,
-            <button
-              onClick={() => copy()}
-              disabled={!canCopy}
-            >
-              copy
-            </button>,
-            <button
-              onClick={() => paste({ x: 0, y: 0 })}
-              disabled={!canPaste}
-            >
-              paste
-            </button>,
-          ]}
+          controls={controls}
           setShowAddNode={setShowAddNode}
         />
         <Background color='#E7E7E7' variant={BackgroundVariant.Lines}/>
diff --git a/packages/ui/src/styles/dataStoryCanvasStyle.css b/packages/ui/src/styles/dataStoryCanvasStyle.css
new file mode 100644
index 00000000..1df55591
--- /dev/null
+++ b/packages/ui/src/styles/dataStoryCanvasStyle.css
@@ -0,0 +1,9 @@
+@keyframes dash {
+    to {
+        stroke-dashoffset: -10;
+    }
+}
+
+.react-flow__edge:hover {
+    cursor: crosshair;
+}
\ No newline at end of file

From f3a199b1c8d0c1737edd2d929ae3a230be5d919f Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 20 Feb 2025 11:53:46 +0800
Subject: [PATCH 07/10] fix: Improve copy-paste to handle input/output IDs
 correctly.

---
 .../DataStory/controls/useCopyPaste.ts        | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
index 26c0425d..d51f01b9 100644
--- a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -9,16 +9,17 @@ import {
   useStore,
   type KeyCode,
 } from '@xyflow/react';
+import { SerializedReactFlowEdge, SerializedReactFlowNode } from '../../../SerializedReactFlow';
 
 export function useCopyPaste<
-  NodeType extends Node = Node,
-  EdgeType extends Edge = Edge
+  SerializedReactFlowNode extends Node = Node,
+  SerializedReactFlowEdge extends Edge = Edge
 >() {
-  const { getNodes, setNodes, getEdges, setEdges, screenToFlowPosition } = useReactFlow<NodeType, EdgeType>();
+  const { getNodes, setNodes, getEdges, setEdges, screenToFlowPosition } = useReactFlow<SerializedReactFlowNode, SerializedReactFlowEdge>();
   const mousePosRef = useRef<XYPosition>({ x: 0, y: 0 });
   const rfDomNode = useStore((state) => state.domNode);
-  const [bufferedNodes, setBufferedNodes] = useState<NodeType[]>([]);
-  const [bufferedEdges, setBufferedEdges] = useState<EdgeType[]>([]);
+  const [bufferedNodes, setBufferedNodes] = useState<SerializedReactFlowNode[]>([]);
+  const [bufferedEdges, setBufferedEdges] = useState<SerializedReactFlowEdge[]>([]);
 
   // Event handling setup
   useEffect(() => {
@@ -52,7 +53,7 @@ export function useCopyPaste<
 
   const getSelectedNodesAndEdges = useCallback(() => {
     const selectedNodes = getNodes().filter(node => node.selected);
-    const isEdgeInternal = (edge: EdgeType) =>
+    const isEdgeInternal = (edge: SerializedReactFlowEdge) =>
       selectedNodes.some(n => n.id === edge.source) &&
       selectedNodes.some(n => n.id === edge.target);
 
@@ -65,16 +66,16 @@ export function useCopyPaste<
   const copy = useCallback(() => {
     const { nodes, edges } = getSelectedNodesAndEdges();
     setBufferedNodes(nodes);
-    setBufferedEdges(edges as EdgeType[]);
+    setBufferedEdges(edges as SerializedReactFlowEdge[]);
   }, [getSelectedNodesAndEdges]);
 
   const cut = useCallback(() => {
     const { nodes, edges } = getSelectedNodesAndEdges();
     setBufferedNodes(nodes);
-    setBufferedEdges(edges as EdgeType[]);
+    setBufferedEdges(edges as SerializedReactFlowEdge[]);
 
     setNodes(nodes => nodes.filter(node => !node.selected));
-    setEdges(edges => edges.filter(edge => !(edges as EdgeType[]).includes(edge as EdgeType)));
+    setEdges(edges => edges.filter(edge => !(edges as SerializedReactFlowEdge[]).includes(edge as SerializedReactFlowEdge)));
   }, [getSelectedNodesAndEdges, setNodes, setEdges]);
 
   const paste = useCallback((position = screenToFlowPosition(mousePosRef.current)) => {
@@ -91,13 +92,26 @@ export function useCopyPaste<
       id: generateCopiedId(node.id),
       position: calculateNewPosition(node.position),
       selected: true,
+      data: {
+        ...node.data,
+        inputs: (node.data.inputs as Record<string, unknown>[] || [])?.map(input => ({
+          ...input,
+          id: `${generateCopiedId(node.id)}.${(input.id as string).split('.').pop()}`,
+        })),
+        outputs: (node.data.outputs as Record<string, unknown>[] || [])?.map(output => ({
+          ...output,
+          id: `${generateCopiedId(node.id)}.${(output.id as string).split('.').pop()}`,
+        })),
+      },
     }));
 
-    const newEdges = bufferedEdges.map(edge => ({
+    const newEdges = bufferedEdges.map(edge  => ({
       ...edge,
       id: generateCopiedId(edge.id),
       source: generateCopiedId(edge.source),
+      sourceHandle: `${generateCopiedId(edge.source)}.${edge.sourceHandle!.split('.').pop()}`,
       target: generateCopiedId(edge.target),
+      targetHandle: `${generateCopiedId(edge.target)}.${edge.targetHandle!.split('.').pop()}`,
       selected: true,
     }));
 

From 34ea3a652cf22cb573407ea8415bdbea1b143e46 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 20 Feb 2025 12:10:26 +0800
Subject: [PATCH 08/10] fix: resolve issue with cut functionality not working

---
 packages/ui/src/components/DataStory/controls/useCopyPaste.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
index d51f01b9..84485d60 100644
--- a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -74,8 +74,8 @@ export function useCopyPaste<
     setBufferedNodes(nodes);
     setBufferedEdges(edges as SerializedReactFlowEdge[]);
 
-    setNodes(nodes => nodes.filter(node => !node.selected));
-    setEdges(edges => edges.filter(edge => !(edges as SerializedReactFlowEdge[]).includes(edge as SerializedReactFlowEdge)));
+    setNodes(allNodes => allNodes.filter(node => !node.selected));
+    setEdges(allEdges => allEdges.filter(edge => !(edges as SerializedReactFlowEdge[]).includes(edge as SerializedReactFlowEdge)));
   }, [getSelectedNodesAndEdges, setNodes, setEdges]);
 
   const paste = useCallback((position = screenToFlowPosition(mousePosRef.current)) => {

From bcaef3ecfec2f762ddff7088ce7dba6fac99445a Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 20 Feb 2025 15:45:09 +0800
Subject: [PATCH 09/10] fix: Deep clone nodes and edges when pasting in
 useCopyPaste hook

---
 .../src/components/DataStory/controls/useCopyPaste.ts  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
index 84485d60..bab28059 100644
--- a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -88,12 +88,12 @@ export function useCopyPaste<
     });
 
     const newNodes = bufferedNodes.map(node => ({
-      ...node,
+      ...structuredClone(node),
       id: generateCopiedId(node.id),
       position: calculateNewPosition(node.position),
       selected: true,
       data: {
-        ...node.data,
+        ...structuredClone(node.data),
         inputs: (node.data.inputs as Record<string, unknown>[] || [])?.map(input => ({
           ...input,
           id: `${generateCopiedId(node.id)}.${(input.id as string).split('.').pop()}`,
@@ -106,7 +106,7 @@ export function useCopyPaste<
     }));
 
     const newEdges = bufferedEdges.map(edge  => ({
-      ...edge,
+      ...structuredClone(edge),
       id: generateCopiedId(edge.id),
       source: generateCopiedId(edge.source),
       sourceHandle: `${generateCopiedId(edge.source)}.${edge.sourceHandle!.split('.').pop()}`,
@@ -115,8 +115,8 @@ export function useCopyPaste<
       selected: true,
     }));
 
-    setNodes(nodes => [...nodes.map(n => ({ ...n, selected: false })), ...newNodes]);
-    setEdges(edges => [...edges.map(e => ({ ...e, selected: false })), ...newEdges]);
+    setNodes(nodes => [...nodes.map(node => ({ ...node, selected: false })), ...newNodes]);
+    setEdges(edges => [...edges.map(edge => ({ ...edge, selected: false })), ...newEdges]);
   }, [bufferedNodes, bufferedEdges, screenToFlowPosition, setNodes, setEdges]);
 
   const selectAll = useCallback(() => {

From 781b98af3c46c855192065825d078be2084d6f5a Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 20 Feb 2025 17:07:30 +0800
Subject: [PATCH 10/10] feat: Implement copy-paste and cut functionality for
 nodes and edges.

---
 .../DataStory/controls/useCopyPaste.ts        | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
index bab28059..2d419ea8 100644
--- a/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
+++ b/packages/ui/src/components/DataStory/controls/useCopyPaste.ts
@@ -1,15 +1,14 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
+  Edge,
+  getConnectedEdges,
+  type KeyCode,
   Node,
   useKeyPress,
   useReactFlow,
-  getConnectedEdges,
-  Edge,
-  XYPosition,
   useStore,
-  type KeyCode,
+  XYPosition,
 } from '@xyflow/react';
-import { SerializedReactFlowEdge, SerializedReactFlowNode } from '../../../SerializedReactFlow';
 
 export function useCopyPaste<
   SerializedReactFlowNode extends Node = Node,
@@ -53,29 +52,35 @@ export function useCopyPaste<
 
   const getSelectedNodesAndEdges = useCallback(() => {
     const selectedNodes = getNodes().filter(node => node.selected);
+    // the edge is internal if both source and target nodes are selected
     const isEdgeInternal = (edge: SerializedReactFlowEdge) =>
       selectedNodes.some(n => n.id === edge.source) &&
       selectedNodes.some(n => n.id === edge.target);
 
     return {
-      nodes: selectedNodes,
-      edges: getConnectedEdges(selectedNodes, getEdges()).filter(isEdgeInternal),
+      selectedNodes: selectedNodes,
+      // Filter out the internal edges connected to the selected nodes that have nodes on both ends
+      selectedEdges: getConnectedEdges(selectedNodes, getEdges()).filter(isEdgeInternal),
     };
   }, [getNodes, getEdges]);
 
   const copy = useCallback(() => {
-    const { nodes, edges } = getSelectedNodesAndEdges();
-    setBufferedNodes(nodes);
-    setBufferedEdges(edges as SerializedReactFlowEdge[]);
+    const { selectedNodes, selectedEdges } = getSelectedNodesAndEdges();
+    setBufferedNodes(selectedNodes);
+    setBufferedEdges(selectedEdges);
   }, [getSelectedNodesAndEdges]);
 
   const cut = useCallback(() => {
-    const { nodes, edges } = getSelectedNodesAndEdges();
-    setBufferedNodes(nodes);
-    setBufferedEdges(edges as SerializedReactFlowEdge[]);
-
-    setNodes(allNodes => allNodes.filter(node => !node.selected));
-    setEdges(allEdges => allEdges.filter(edge => !(edges as SerializedReactFlowEdge[]).includes(edge as SerializedReactFlowEdge)));
+    const { selectedNodes, selectedEdges } = getSelectedNodesAndEdges();
+    setBufferedNodes(selectedNodes);
+    setBufferedEdges(selectedEdges);
+
+    setNodes(nodes => nodes.filter(node => !node.selected));
+    setEdges(edges => {
+      return edges.filter(edge => {
+        return !selectedEdges.some(selectedEdge => edge.id === selectedEdge.id);
+      });
+    });
   }, [getSelectedNodesAndEdges, setNodes, setEdges]);
 
   const paste = useCallback((position = screenToFlowPosition(mousePosRef.current)) => {