feat: add uniqId

ylzon · May 7, 2024 · 623899a · 623899a
1 parent 2e41dc1
commit 623899a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/packages/@fiagram-react/src/components/canvas/index.tsx b/packages/@fiagram-react/src/components/canvas/index.tsx
@@ -20,23 +20,20 @@ const Canvas = forwardRef<IRef, IProps>((props) => {
   const auxiliaryRef = useRef<SVGGElement>(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)
     },
   })
 
   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
@@ -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<Shape> = ({ 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
@@ -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<IProps>(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
@@ -29,6 +29,7 @@ interface DiagramState {
   targetInfo: Node | null // 建立连线标记目标节点
   gaussianBlur: number
   centroidTick: number // 自动居中图行触发器
+  uniqId: string // 用于生成拖拽区域的唯一id
 }
 
 /**