diff --git a/packages/@fiagram-react/src/components/canvas/index.tsx b/packages/@fiagram-react/src/components/canvas/index.tsx index ada80b5..4cb3c56 100644 --- a/packages/@fiagram-react/src/components/canvas/index.tsx +++ b/packages/@fiagram-react/src/components/canvas/index.tsx @@ -20,15 +20,13 @@ const Canvas = forwardRef((props) => { const auxiliaryRef = useRef(null) const { state, setNodes, setSvgInfo } = useDiagramStore(state => state) const { nodes: nodeData = [], shapes = [], hideGrid, className } = props - const { nodes, svgInfo } = state - const uniqId = Math.random().toString(36).slice(2) + const { nodes, svgInfo, uniqId } = state const [, drop] = useDrop({ - accept: DRAG_DROP_KEY, + accept: `${DRAG_DROP_KEY}-${uniqId}`, drop: (item, monitor) => { const { newNodes } = handleDropNode( { item, monitor, svgRef, svgInfo, nodes }, ) - console.log(newNodes) setNodes(newNodes) }, }) @@ -36,7 +34,6 @@ const Canvas = forwardRef((props) => { useEffect(() => { const svg = d3.select(svgRef.current) setSvgInfo(svg as unknown as Element) - console.log(nodeData) setNodes(nodeData) }, []) diff --git a/packages/@fiagram-react/src/components/drag-list/drag-item.tsx b/packages/@fiagram-react/src/components/drag-list/drag-item.tsx index b3d4c24..75e860c 100644 --- a/packages/@fiagram-react/src/components/drag-list/drag-item.tsx +++ b/packages/@fiagram-react/src/components/drag-list/drag-item.tsx @@ -6,11 +6,13 @@ import { getEmptyImage } from 'react-dnd-html5-backend' import { DRAG_DROP_KEY } from '@fiagram/core/constant' import type { Shape } from '../../types/diagram' import type { Node } from '../../types/nodes' +import { useDiagramStore } from '../../hooks/useDiagramStore.ts' import { CustomDragLayer } from './drag-layer.tsx' export const DragItem: FC = ({ component, label, nodeInfo }) => { + const { state: { uniqId } } = useDiagramStore(state => state) const [{ isDragging }, dragRef, preview] = useDrag({ - type: DRAG_DROP_KEY, + type: `${DRAG_DROP_KEY}-${uniqId}`, item: { label, ...nodeInfo }, collect: monitor => ({ isDragging: monitor.isDragging(), diff --git a/packages/@fiagram-react/src/hooks/useDiagramStore.ts b/packages/@fiagram-react/src/hooks/useDiagramStore.ts index 1e311bb..d2e9d00 100644 --- a/packages/@fiagram-react/src/hooks/useDiagramStore.ts +++ b/packages/@fiagram-react/src/hooks/useDiagramStore.ts @@ -2,6 +2,7 @@ import { create } from 'zustand' import { produce } from 'immer' import type { DiagramState } from '../types/diagram' import type { Nodes } from '../types/nodes' +import { uuid } from '../utils/uuid.ts' import type { Size } from './ahooks/useSize.tsx' interface IProps { @@ -27,6 +28,7 @@ export const useDiagramStore = create(set => ({ targetInfo: null, gaussianBlur: 26, centroidTick: 0, + uniqId: uuid(), }, setState: (props) => { set(state => ({ diff --git a/packages/@fiagram-react/src/types/diagram.d.ts b/packages/@fiagram-react/src/types/diagram.d.ts index 0f50a3b..57b6349 100644 --- a/packages/@fiagram-react/src/types/diagram.d.ts +++ b/packages/@fiagram-react/src/types/diagram.d.ts @@ -29,6 +29,7 @@ interface DiagramState { targetInfo: Node | null // 建立连线标记目标节点 gaussianBlur: number centroidTick: number // 自动居中图行触发器 + uniqId: string // 用于生成拖拽区域的唯一id } /**