style: Move DataStoryCanvas styles to a separate CSS file

ajthinking · Feb 19, 2025 · 8ba240e · 8ba240e
1 parent a255b83
commit 8ba240e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 33 deletions.
diff --git 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
@@ -0,0 +1,9 @@
+@keyframes dash {
+    to {
+        stroke-dashoffset: -10;
+    }
+}
+
+.react-flow__edge:hover {
+    cursor: crosshair;
+}