Commit e624c33d authored by StyleZhang's avatar StyleZhang

node props

parent 36664620
...@@ -23,6 +23,7 @@ const CustomEdge = ({ ...@@ -23,6 +23,7 @@ const CustomEdge = ({
targetX, targetX,
targetY, targetY,
borderRadius: 30, borderRadius: 30,
offset: -20,
}) })
return ( return (
......
...@@ -2,8 +2,11 @@ import type { ...@@ -2,8 +2,11 @@ import type {
FC, FC,
ReactNode, ReactNode,
} from 'react' } from 'react'
import { memo } from 'react' import { memo, useMemo } from 'react'
import { useNodeId } from 'reactflow' import {
getOutgoers,
useNodeId,
} from 'reactflow'
import { useWorkflowContext } from '../../context' import { useWorkflowContext } from '../../context'
import { Plus } from '@/app/components/base/icons/src/vender/line/general' import { Plus } from '@/app/components/base/icons/src/vender/line/general'
...@@ -16,9 +19,17 @@ const BaseNode: FC<BaseNodeProps> = ({ ...@@ -16,9 +19,17 @@ const BaseNode: FC<BaseNodeProps> = ({
}) => { }) => {
const nodeId = useNodeId() const nodeId = useNodeId()
const { const {
nodes,
edges,
selectedNodeId, selectedNodeId,
handleSelectedNodeIdChange, handleSelectedNodeIdChange,
} = useWorkflowContext() } = useWorkflowContext()
const currentNode = useMemo(() => {
return nodes.find(node => node.id === nodeId)
}, [nodeId, nodes])
const outgoers = useMemo(() => {
return getOutgoers(currentNode!, nodes, edges)
}, [currentNode, nodes, edges])
return ( return (
<div <div
...@@ -39,8 +50,9 @@ const BaseNode: FC<BaseNodeProps> = ({ ...@@ -39,8 +50,9 @@ const BaseNode: FC<BaseNodeProps> = ({
</div> </div>
<div <div
className={` className={`
hidden absolute -bottom-2 left-1/2 -translate-x-1/2 group-hover:flex items-center justify-center hidden absolute -bottom-2 left-1/2 -translate-x-1/2 items-center justify-center
w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10 w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10
${!outgoers.length && 'group-hover:flex'}
`} `}
> >
<Plus className='w-2.5 h-2.5 text-white' /> <Plus className='w-2.5 h-2.5 text-white' />
......
import { memo } from 'react' import { memo } from 'react'
import type { NodeProps } from 'reactflow'
import { import {
Handle, Handle,
Position, Position,
useNodeId,
} from 'reactflow' } from 'reactflow'
import { useWorkflowContext } from '../context' import { useWorkflowContext } from '../context'
import { import {
...@@ -10,11 +10,10 @@ import { ...@@ -10,11 +10,10 @@ import {
PanelMap, PanelMap,
} from './constants' } from './constants'
const CustomNode = () => { const CustomNode = ({
const nodeId = useNodeId() data,
const { nodes } = useWorkflowContext() }: NodeProps) => {
const currentNode = nodes.find(node => node.id === nodeId) const NodeComponent = NodeMap[data.type]
const NodeComponent = NodeMap[currentNode!.data.type as string]
return ( return (
<> <>
......
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