Commit c4ca3bd3 authored by StyleZhang's avatar StyleZhang

rename data

parent 081baae8
...@@ -36,7 +36,7 @@ const CustomEdge = ({ ...@@ -36,7 +36,7 @@ const CustomEdge = ({
id={id} id={id}
path={edgePath} path={edgePath}
style={{ style={{
stroke: (selected || data?.connectedNodeIsHovering) ? '#2970FF' : '#D0D5DD', stroke: (selected || data?._connectedNodeIsHovering) ? '#2970FF' : '#D0D5DD',
strokeWidth: 2, strokeWidth: 2,
}} }}
/> />
......
...@@ -80,7 +80,7 @@ export const useWorkflow = () => { ...@@ -80,7 +80,7 @@ export const useWorkflow = () => {
const newNodes = produce(getNodes(), (draft) => { const newNodes = produce(getNodes(), (draft) => {
const currentNode = draft.find(n => n.id === node.id)! const currentNode = draft.find(n => n.id === node.id)!
currentNode.data.hovering = true currentNode.data._hovering = true
}) })
setNodes(newNodes) setNodes(newNodes)
const newEdges = produce(edges, (draft) => { const newEdges = produce(edges, (draft) => {
...@@ -89,7 +89,7 @@ export const useWorkflow = () => { ...@@ -89,7 +89,7 @@ export const useWorkflow = () => {
connectedEdges.forEach((edge) => { connectedEdges.forEach((edge) => {
const currentEdge = draft.find(e => e.id === edge.id) const currentEdge = draft.find(e => e.id === edge.id)
if (currentEdge) if (currentEdge)
currentEdge.data = { ...currentEdge.data, connectedNodeIsHovering: true } currentEdge.data = { ...currentEdge.data, _connectedNodeIsHovering: true }
}) })
}) })
setEdges(newEdges) setEdges(newEdges)
...@@ -105,12 +105,12 @@ export const useWorkflow = () => { ...@@ -105,12 +105,12 @@ export const useWorkflow = () => {
const newNodes = produce(getNodes(), (draft) => { const newNodes = produce(getNodes(), (draft) => {
const currentNode = draft.find(n => n.id === node.id)! const currentNode = draft.find(n => n.id === node.id)!
currentNode.data.hovering = false currentNode.data._hovering = false
}) })
setNodes(newNodes) setNodes(newNodes)
const newEdges = produce(edges, (draft) => { const newEdges = produce(edges, (draft) => {
draft.forEach((edge) => { draft.forEach((edge) => {
edge.data = { ...edge.data, connectedNodeIsHovering: false } edge.data = { ...edge.data, _connectedNodeIsHovering: false }
}) })
}) })
setEdges(newEdges) setEdges(newEdges)
...@@ -123,11 +123,11 @@ export const useWorkflow = () => { ...@@ -123,11 +123,11 @@ export const useWorkflow = () => {
} = store.getState() } = store.getState()
const newNodes = produce(getNodes(), (draft) => { 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)! const selectedNode = draft.find(node => node.id === nodeId)!
if (!cancelSelection) if (!cancelSelection)
selectedNode.data.selected = true selectedNode.data._selected = true
}) })
setNodes(newNodes) setNodes(newNodes)
}, [store]) }, [store])
...@@ -216,7 +216,7 @@ export const useWorkflow = () => { ...@@ -216,7 +216,7 @@ export const useWorkflow = () => {
type: 'custom', type: 'custom',
data: { data: {
...NodeInitialData[nodeType], ...NodeInitialData[nodeType],
selected: true, _selected: true,
}, },
position: { position: {
x: currentNode.position.x + 304, x: currentNode.position.x + 304,
...@@ -233,7 +233,7 @@ export const useWorkflow = () => { ...@@ -233,7 +233,7 @@ export const useWorkflow = () => {
} }
const newNodes = produce(nodes, (draft) => { const newNodes = produce(nodes, (draft) => {
draft.forEach((node) => { draft.forEach((node) => {
node.data.selected = false node.data._selected = false
}) })
draft.push(nextNode) draft.push(nextNode)
}) })
...@@ -300,7 +300,7 @@ export const useWorkflow = () => { ...@@ -300,7 +300,7 @@ export const useWorkflow = () => {
const newEdges = produce(edges, (draft) => { const newEdges = produce(edges, (draft) => {
const currentEdge = draft.find(e => e.id === edge.id)! const currentEdge = draft.find(e => e.id === edge.id)!
currentEdge.data = { ...currentEdge.data, hovering: true } currentEdge.data = { ...currentEdge.data, _hovering: true }
}) })
setEdges(newEdges) setEdges(newEdges)
}, [store]) }, [store])
...@@ -313,7 +313,7 @@ export const useWorkflow = () => { ...@@ -313,7 +313,7 @@ export const useWorkflow = () => {
const newEdges = produce(edges, (draft) => { const newEdges = produce(edges, (draft) => {
const currentEdge = draft.find(e => e.id === edge.id)! const currentEdge = draft.find(e => e.id === edge.id)!
currentEdge.data = { ...currentEdge.data, hovering: false } currentEdge.data = { ...currentEdge.data, _hovering: false }
}) })
setEdges(newEdges) setEdges(newEdges)
}, [store]) }, [store])
......
...@@ -18,7 +18,7 @@ const NextStep = ({ ...@@ -18,7 +18,7 @@ const NextStep = ({
selectedNode, selectedNode,
}: NextStepProps) => { }: NextStepProps) => {
const store = useStoreApi() const store = useStoreApi()
const branches = selectedNode?.data.targetBranches const branches = selectedNode?.data._targetBranches
const edges = useEdges() const edges = useEdges()
const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges) const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges)
const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id) const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id)
......
...@@ -23,7 +23,7 @@ const BaseNode: FC<BaseNodeProps> = ({ ...@@ -23,7 +23,7 @@ const BaseNode: FC<BaseNodeProps> = ({
className={` className={`
group relative w-[240px] bg-[#fcfdff] rounded-2xl shadow-xs group relative w-[240px] bg-[#fcfdff] rounded-2xl shadow-xs
hover:shadow-lg 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'> <div className='flex items-center px-3 pt-3 pb-2'>
......
...@@ -16,7 +16,7 @@ const Panel: FC = () => { ...@@ -16,7 +16,7 @@ const Panel: FC = () => {
const mode = useStore(state => state.mode) const mode = useStore(state => state.mode)
const runStaus = useStore(state => state.runStaus) const runStaus = useStore(state => state.runStaus)
const nodes = useNodes<CommonNodeType>() 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 showRunHistory = useStore(state => state.showRunHistory)
const { const {
showWorkflowInfoPanel, showWorkflowInfoPanel,
......
...@@ -24,22 +24,23 @@ export type Branch = { ...@@ -24,22 +24,23 @@ export type Branch = {
} }
export type CommonNodeType<T = {}> = { export type CommonNodeType<T = {}> = {
index?: { _selected?: boolean
x: number _hovering?: boolean
y: number _targetBranches?: Branch[]
}
selected?: boolean
hovering?: boolean
targetBranches?: Branch[]
title: string title: string
desc: string desc: string
type: BlockEnum type: BlockEnum
} & T } & T
export type CommonEdgeType = {
_hovering: boolean
_connectedNodeIsHovering: boolean
}
export type Node = ReactFlowNode<CommonNodeType> export type Node = ReactFlowNode<CommonNodeType>
export type SelectedNode = Pick<Node, 'id' | 'data'> export type SelectedNode = Pick<Node, 'id' | 'data'>
export type NodeProps<T> = { id: string; data: CommonNodeType<T> } 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] export type ValueSelector = string[] // [nodeId, key | obj key path]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment