rename data

web/app/components/workflow/custom-edge.tsx

@@ -36,7 +36,7 @@ const CustomEdge = ({
         id={id}
         path={edgePath}
         style={{
-          stroke: (selected || data?.connectedNodeIsHovering) ? '#2970FF' : '#D0D5DD',
+          stroke: (selected || data?._connectedNodeIsHovering) ? '#2970FF' : '#D0D5DD',
           strokeWidth: 2,
         }}
       />

web/app/components/workflow/hooks.ts

@@ -80,7 +80,7 @@ export const useWorkflow = () => {
     const newNodes = produce(getNodes(), (draft) => {
       const currentNode = draft.find(n => n.id === node.id)!
 
-      currentNode.data.hovering = true
+      currentNode.data._hovering = true
     })
     setNodes(newNodes)
     const newEdges = produce(edges, (draft) => {
@@ -89,7 +89,7 @@ export const useWorkflow = () => {
       connectedEdges.forEach((edge) => {
         const currentEdge = draft.find(e => e.id === edge.id)
         if (currentEdge)
-          currentEdge.data = { ...currentEdge.data, connectedNodeIsHovering: true }
+          currentEdge.data = { ...currentEdge.data, _connectedNodeIsHovering: true }
       })
     })
     setEdges(newEdges)
@@ -105,12 +105,12 @@ export const useWorkflow = () => {
     const newNodes = produce(getNodes(), (draft) => {
       const currentNode = draft.find(n => n.id === node.id)!
 
-      currentNode.data.hovering = false
+      currentNode.data._hovering = false
     })
     setNodes(newNodes)
     const newEdges = produce(edges, (draft) => {
       draft.forEach((edge) => {
-        edge.data = { ...edge.data, connectedNodeIsHovering: false }
+        edge.data = { ...edge.data, _connectedNodeIsHovering: false }
       })
     })
     setEdges(newEdges)
@@ -123,11 +123,11 @@ export const useWorkflow = () => {
     } = store.getState()
 
     const newNodes = produce(getNodes(), (draft) => {
-      draft.forEach(node => node.data.selected = false)
+      draft.forEach(node => node.data._selected = false)
       const selectedNode = draft.find(node => node.id === nodeId)!
 
       if (!cancelSelection)
-        selectedNode.data.selected = true
+        selectedNode.data._selected = true
     })
     setNodes(newNodes)
   }, [store])
@@ -216,7 +216,7 @@ export const useWorkflow = () => {
       type: 'custom',
       data: {
         ...NodeInitialData[nodeType],
-        selected: true,
+        _selected: true,
       },
       position: {
         x: currentNode.position.x + 304,
@@ -233,7 +233,7 @@ export const useWorkflow = () => {
     }
     const newNodes = produce(nodes, (draft) => {
       draft.forEach((node) => {
-        node.data.selected = false
+        node.data._selected = false
       })
       draft.push(nextNode)
     })
@@ -300,7 +300,7 @@ export const useWorkflow = () => {
     const newEdges = produce(edges, (draft) => {
       const currentEdge = draft.find(e => e.id === edge.id)!
 
-      currentEdge.data = { ...currentEdge.data, hovering: true }
+      currentEdge.data = { ...currentEdge.data, _hovering: true }
     })
     setEdges(newEdges)
   }, [store])
@@ -313,7 +313,7 @@ export const useWorkflow = () => {
     const newEdges = produce(edges, (draft) => {
       const currentEdge = draft.find(e => e.id === edge.id)!
 
-      currentEdge.data = { ...currentEdge.data, hovering: false }
+      currentEdge.data = { ...currentEdge.data, _hovering: false }
     })
     setEdges(newEdges)
   }, [store])

web/app/components/workflow/nodes/_base/components/next-step/index.tsx

@@ -18,7 +18,7 @@ const NextStep = ({
   selectedNode,
 }: NextStepProps) => {
   const store = useStoreApi()
-  const branches = selectedNode?.data.targetBranches
+  const branches = selectedNode?.data._targetBranches
   const edges = useEdges()
   const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges)
   const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id)

web/app/components/workflow/nodes/_base/node.tsx

@@ -23,7 +23,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       className={`
         group relative w-[240px] bg-[#fcfdff] rounded-2xl shadow-xs
         hover:shadow-lg
-        ${data.selected ? 'border-[2px] border-primary-600' : 'border border-white'}
+        ${data._selected ? 'border-[2px] border-primary-600' : 'border border-white'}
       `}
     >
       <div className='flex items-center px-3 pt-3 pb-2'>

web/app/components/workflow/panel/index.tsx

@@ -16,7 +16,7 @@ const Panel: FC = () => {
   const mode = useStore(state => state.mode)
   const runStaus = useStore(state => state.runStaus)
   const nodes = useNodes<CommonNodeType>()
-  const selectedNode = nodes.find(node => node.data.selected)
+  const selectedNode = nodes.find(node => node.data._selected)
   const showRunHistory = useStore(state => state.showRunHistory)
   const {
     showWorkflowInfoPanel,

web/app/components/workflow/types.ts

@@ -24,22 +24,23 @@ export type Branch = {
 }
 
 export type CommonNodeType<T = {}> = {
-  index?: {
-    x: number
-    y: number
-  }
-  selected?: boolean
-  hovering?: boolean
-  targetBranches?: Branch[]
+  _selected?: boolean
+  _hovering?: boolean
+  _targetBranches?: Branch[]
   title: string
   desc: string
   type: BlockEnum
 } & T
 
+export type CommonEdgeType = {
+  _hovering: boolean
+  _connectedNodeIsHovering: boolean
+}
+
 export type Node = ReactFlowNode<CommonNodeType>
 export type SelectedNode = Pick<Node, 'id' | 'data'>
 export type NodeProps<T> = { id: string; data: CommonNodeType<T> }
-export type Edge = ReactFlowEdge
+export type Edge = ReactFlowEdge<CommonEdgeType>
 
 export type ValueSelector = string[] // [nodeId, key | obj key path]