@wzyjs/uis 0.3.9 → 0.3.16

package/src/components/MindMap/hooks/useDropToReparent.ts

@@ -0,0 +1,288 @@
+'use client'
+
+import { useCallback, useMemo, useRef, useState } from 'react'
+import type { Edge, EdgeChange, Node, NodeChange } from '@xyflow/react'
+
+interface UseDropToReparentParams<TNodeData extends Record<string, unknown>> {
+  enabled?: boolean
+  nodes: Array<Node<TNodeData>>
+  edges: Edge[]
+  dropHighlightClassName?: string
+  canDropOnNode?: (params: { draggingNode: Node<TNodeData>, targetNode: Node<TNodeData> }) => boolean
+  onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void
+  onEdgesChange?: (changes: Array<EdgeChange<Edge>>) => void
+}
+
+interface UseDropToReparentResult<TNodeData extends Record<string, unknown>> {
+  onNodeDrag: (_event: unknown, node: Node<TNodeData>) => void
+  onNodeDragStop: (_event: unknown, node: Node<TNodeData>) => void
+  draggingNodeId: string | null
+  dropTargetNodeId: string | null
+}
+
+const defaultDropHighlightClassName: string = 'ring-2 ring-sky-500'
+
+const normalizeClassName = (className?: string): string[] => {
+  return (className ?? '').split(/\s+/).map(item => item.trim()).filter(Boolean)
+}
+
+const withClassTokens = (className: string | undefined, tokens: string[], enabled: boolean): string | undefined => {
+  const list = normalizeClassName(className)
+  const tokenSet = new Set(list)
+
+  if (enabled) {
+    tokens.forEach(token => tokenSet.add(token))
+  } else {
+    tokens.forEach(token => tokenSet.delete(token))
+  }
+
+  const next = Array.from(tokenSet).join(' ')
+  return next.length > 0 ? next : undefined
+}
+
+const getNodeSize = <TNodeData extends Record<string, unknown>,>(node: Node<TNodeData>): { width: number, height: number } => {
+  const width = node.measured?.width ?? node.width ?? 0
+  const height = node.measured?.height ?? node.height ?? 0
+  return { width, height }
+}
+
+const isPointInRect = (point: { x: number, y: number }, rect: { x: number, y: number, w: number, h: number }): boolean => {
+  return point.x >= rect.x && point.x <= rect.x + rect.w && point.y >= rect.y && point.y <= rect.y + rect.h
+}
+
+const getDescendants = (edges: Edge[], rootId: string): Set<string> => {
+  const sourceToTargets = new Map<string, string[]>()
+  edges.forEach(edge => {
+    const prev = sourceToTargets.get(edge.source) ?? []
+    sourceToTargets.set(edge.source, [...prev, edge.target])
+  })
+
+  const visited = new Set<string>([rootId])
+  const result = new Set<string>()
+  const queue: string[] = [rootId]
+
+  while (queue.length > 0) {
+    const currentId = queue.shift()
+    if (!currentId) {
+      continue
+    }
+    const targets = sourceToTargets.get(currentId) ?? []
+    for (const targetId of targets) {
+      if (visited.has(targetId)) {
+        continue
+      }
+      visited.add(targetId)
+      result.add(targetId)
+      queue.push(targetId)
+    }
+  }
+
+  return result
+}
+
+const pickDropTargetId = <TNodeData extends Record<string, unknown>,>(
+  nodes: Array<Node<TNodeData>>,
+  draggingNode: Node<TNodeData>,
+  edges: Edge[],
+  canDropOnNode?: (params: { draggingNode: Node<TNodeData>, targetNode: Node<TNodeData> }) => boolean,
+): string | null => {
+  const draggingSize = getNodeSize(draggingNode)
+  if (!draggingSize.width || !draggingSize.height) {
+    return null
+  }
+
+  const descendants = getDescendants(edges, draggingNode.id)
+
+  const center = {
+    x: draggingNode.position.x + draggingSize.width / 2,
+    y: draggingNode.position.y + draggingSize.height / 2,
+  }
+
+  let bestId: string | null = null
+  let bestDist: number = Number.POSITIVE_INFINITY
+
+  nodes.forEach(node => {
+    if (node.id === draggingNode.id) {
+      return
+    }
+    if (descendants.has(node.id)) {
+      return
+    }
+    if (canDropOnNode && !canDropOnNode({ draggingNode, targetNode: node })) {
+      return
+    }
+
+    const size = getNodeSize(node)
+    if (!size.width || !size.height) {
+      return
+    }
+
+    const rect = { x: node.position.x, y: node.position.y, w: size.width, h: size.height }
+    if (!isPointInRect(center, rect)) {
+      return
+    }
+
+    const nodeCenterX = node.position.x + size.width / 2
+    const nodeCenterY = node.position.y + size.height / 2
+    const dx = center.x - nodeCenterX
+    const dy = center.y - nodeCenterY
+    const dist = (dx * dx) + (dy * dy)
+    if (dist < bestDist) {
+      bestDist = dist
+      bestId = node.id
+    }
+  })
+
+  return bestId
+}
+
+export const useDropToReparent = <TNodeData extends Record<string, unknown>,>(
+  params: UseDropToReparentParams<TNodeData>,
+): UseDropToReparentResult<TNodeData> => {
+  const {
+    enabled = true,
+    nodes,
+    edges,
+    dropHighlightClassName = defaultDropHighlightClassName,
+    canDropOnNode,
+    onNodesChange,
+    onEdgesChange,
+  } = params
+
+  const dropTargetIdRef = useRef<string | null>(null)
+  const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null)
+  const [dropTargetNodeId, setDropTargetNodeId] = useState<string | null>(null)
+  const dropHighlightClassTokens = useMemo((): string[] => {
+    return normalizeClassName(dropHighlightClassName)
+  }, [dropHighlightClassName])
+
+  const nodeById = useMemo((): Map<string, Node<TNodeData>> => {
+    return new Map(nodes.map(node => [node.id, node]))
+  }, [nodes])
+
+  const setDropTargetId = useCallback((nextId: string | null): void => {
+    const prevId = dropTargetIdRef.current
+    if (prevId === nextId) {
+      return
+    }
+    dropTargetIdRef.current = nextId
+    setDropTargetNodeId(nextId)
+
+    if (!onNodesChange) {
+      return
+    }
+
+    const changes: Array<NodeChange<Node<TNodeData>>> = []
+    if (prevId) {
+      const prevNode = nodeById.get(prevId)
+      if (prevNode) {
+        changes.push({
+          type: 'replace',
+          id: prevId,
+          item: {
+            ...prevNode,
+            className: withClassTokens(prevNode.className, dropHighlightClassTokens, false),
+          },
+        })
+      }
+    }
+    if (nextId) {
+      const nextNode = nodeById.get(nextId)
+      if (nextNode) {
+        changes.push({
+          type: 'replace',
+          id: nextId,
+          item: {
+            ...nextNode,
+            className: withClassTokens(nextNode.className, dropHighlightClassTokens, true),
+          },
+        })
+      }
+    }
+
+    if (changes.length > 0) {
+      onNodesChange(changes)
+    }
+  }, [dropHighlightClassTokens, nodeById, onNodesChange])
+
+  const onNodeDrag = useCallback((_event: unknown, node: Node<TNodeData>): void => {
+    setDraggingNodeId(node.id)
+    if (!enabled) {
+      setDropTargetId(null)
+      return
+    }
+    const targetId = pickDropTargetId(nodes, node, edges, canDropOnNode)
+    setDropTargetId(targetId)
+  }, [canDropOnNode, edges, enabled, nodes, setDropTargetId])
+
+  const onNodeDragStop = useCallback((_event: unknown, node: Node<TNodeData>): void => {
+    const targetId = dropTargetIdRef.current
+    setDropTargetId(null)
+    setDraggingNodeId(null)
+
+    if (!enabled) {
+      return
+    }
+    if (!targetId) {
+      return
+    }
+    if (!onEdgesChange) {
+      return
+    }
+
+    const childId = node.id
+    if (targetId === childId) {
+      return
+    }
+
+    const descendants = getDescendants(edges, childId)
+    if (descendants.has(targetId)) {
+      return
+    }
+
+    const targetNode = nodeById.get(targetId)
+    if (!targetNode) {
+      return
+    }
+    if (canDropOnNode && !canDropOnNode({ draggingNode: node, targetNode })) {
+      return
+    }
+
+    const nextEdgeId = `e-${targetId}-${childId}`
+    const hasSameEdge = edges.some(edge => edge.source === targetId && edge.target === childId)
+    const incomingEdges = edges.filter(edge => edge.target === childId)
+
+    const edgeChanges: Array<EdgeChange<Edge>> = []
+    incomingEdges.forEach(edge => {
+      if (edge.source === targetId && edge.target === childId) {
+        return
+      }
+      edgeChanges.push({ type: 'remove', id: edge.id })
+    })
+
+    if (!hasSameEdge) {
+      edgeChanges.push({
+        type: 'add',
+        item: {
+          id: nextEdgeId,
+          source: targetId,
+          target: childId,
+          type: 'smoothstep',
+        },
+      })
+    }
+
+    if (edgeChanges.length === 0) {
+      return
+    }
+
+    onEdgesChange(edgeChanges)
+  }, [canDropOnNode, edges, enabled, nodeById, onEdgesChange, setDropTargetId])
+
+  return {
+    onNodeDrag,
+    onNodeDragStop,
+    draggingNodeId,
+    dropTargetNodeId,
+  }
+}

package/src/components/MindMap/hooks/useExpandCollapse.ts

@@ -0,0 +1,146 @@
+'use client'
+
+import { useCallback, useMemo } from 'react'
+import type { Edge, EdgeChange, Node, NodeChange } from '@xyflow/react'
+
+interface GetCountsResult {
+  childCount: number
+  descendantCount: number
+}
+
+interface UseExpandCollapseParams<TNodeData extends Record<string, unknown>> {
+  nodes: Array<Node<TNodeData>>
+  edges: Edge[]
+  onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void
+  onEdgesChange?: (changes: Array<EdgeChange<Edge>>) => void
+}
+
+interface UseExpandCollapseResult {
+  getCounts: (nodeId: string) => GetCountsResult
+  expand: (nodeId: string) => void
+  collapse: (nodeId: string) => void
+}
+
+const buildChildrenById = (edges: Edge[]): Map<string, string[]> => {
+  const map = new Map<string, string[]>()
+  edges.forEach(edge => {
+    const prev = map.get(edge.source) ?? []
+    map.set(edge.source, [...prev, edge.target])
+  })
+  return map
+}
+
+const getDescendantIdSet = (childrenById: Map<string, string[]>, rootId: string): Set<string> => {
+  const visited = new Set<string>([rootId])
+  const result = new Set<string>()
+  const queue: string[] = [rootId]
+
+  while (queue.length > 0) {
+    const currentId = queue.shift()
+    if (!currentId) {
+      continue
+    }
+    const children = childrenById.get(currentId) ?? []
+    for (const childId of children) {
+      if (visited.has(childId)) {
+        continue
+      }
+      visited.add(childId)
+      result.add(childId)
+      queue.push(childId)
+    }
+  }
+
+  return result
+}
+
+export const useExpandCollapse = <TNodeData extends Record<string, unknown>,>(
+  params: UseExpandCollapseParams<TNodeData>,
+): UseExpandCollapseResult => {
+  const { nodes, edges, onNodesChange, onEdgesChange } = params
+
+  const childrenById = useMemo((): Map<string, string[]> => {
+    return buildChildrenById(edges)
+  }, [edges])
+
+  const nodeById = useMemo((): Map<string, Node<TNodeData>> => {
+    return new Map(nodes.map(n => [n.id, n]))
+  }, [nodes])
+
+  const edgeById = useMemo((): Map<string, Edge> => {
+    return new Map(edges.map(e => [e.id, e]))
+  }, [edges])
+
+  const getCounts = useCallback((nodeId: string): GetCountsResult => {
+    const childCount = (childrenById.get(nodeId) ?? []).length
+    const descendantCount = getDescendantIdSet(childrenById, nodeId).size
+    return { childCount, descendantCount }
+  }, [childrenById])
+
+  const setSubtreeHidden = useCallback((nodeId: string, hidden: boolean): void => {
+    const descendantIdSet = getDescendantIdSet(childrenById, nodeId)
+    if (descendantIdSet.size === 0) {
+      return
+    }
+
+    if (onNodesChange) {
+      const nodeChanges: Array<NodeChange<Node<TNodeData>>> = []
+      descendantIdSet.forEach(id => {
+        const node = nodeById.get(id)
+        if (!node) {
+          return
+        }
+        if ((node.hidden ?? false) === hidden) {
+          return
+        }
+        nodeChanges.push({
+          type: 'replace',
+          id,
+          item: {
+            ...node,
+            hidden,
+            selected: false,
+          },
+        })
+      })
+      if (nodeChanges.length > 0) {
+        onNodesChange(nodeChanges)
+      }
+    }
+
+    if (onEdgesChange) {
+      const idSet = new Set<string>([nodeId, ...Array.from(descendantIdSet)])
+      const edgeChanges: Array<EdgeChange<Edge>> = edges
+        .filter(edge => idSet.has(edge.source) && idSet.has(edge.target))
+        .map(edge => edgeById.get(edge.id))
+        .filter((edge): edge is Edge => !!edge)
+        .filter(edge => (edge.hidden ?? false) !== hidden)
+        .map(edge => ({
+          type: 'replace',
+          id: edge.id,
+          item: {
+            ...edge,
+            hidden,
+          },
+        }))
+
+      if (edgeChanges.length > 0) {
+        onEdgesChange(edgeChanges)
+      }
+    }
+  }, [childrenById, edgeById, edges, nodeById, onEdgesChange, onNodesChange])
+
+  const expand = useCallback((nodeId: string): void => {
+    setSubtreeHidden(nodeId, false)
+  }, [setSubtreeHidden])
+
+  const collapse = useCallback((nodeId: string): void => {
+    setSubtreeHidden(nodeId, true)
+  }, [setSubtreeHidden])
+
+  return {
+    getCounts,
+    expand,
+    collapse,
+  }
+}

package/src/components/MindMap/hooks/useMoveDescendants.ts

@@ -0,0 +1,136 @@
+'use client'
+
+import { useCallback, useMemo } from 'react'
+
+import type { Edge, Node, NodeChange } from '@xyflow/react'
+
+interface UseMoveDescendantsParams<TNodeData extends Record<string, unknown>> {
+  // 开关：关闭时只透传，不联动后代
+  enabled?: boolean
+  // 当前节点与边（用于计算父子关系）
+  nodes: Array<Node<TNodeData>>
+  edges: Edge[]
+  // 透传给 ReactFlow 的 onNodesChange（通常来自 useNodesState）
+  onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void
+}
+
+interface UseMoveDescendantsResult<TNodeData extends Record<string, unknown>> {
+  // 包装后的 onNodesChange：在 position change 上把位移叠加到后代节点
+  onNodesChange: (changes: Array<NodeChange<Node<TNodeData>>>) => void
+}
+
+const getDescendants = (sourceToTargets: Map<string, string[]>, rootId: string): Set<string> => {
+  const visited = new Set<string>([rootId])
+  const result = new Set<string>()
+  const queue: string[] = [rootId]
+
+  while (queue.length > 0) {
+    const currentId = queue.shift()
+    if (!currentId) {
+      continue
+    }
+    const targets = sourceToTargets.get(currentId) ?? []
+    for (const targetId of targets) {
+      if (visited.has(targetId)) {
+        continue
+      }
+      visited.add(targetId)
+      result.add(targetId)
+      queue.push(targetId)
+    }
+  }
+
+  return result
+}
+
+export const useMoveDescendants = <TNodeData extends Record<string, unknown>,>(
+  params: UseMoveDescendantsParams<TNodeData>,
+): UseMoveDescendantsResult<TNodeData> => {
+  const { enabled = true, nodes, edges, onNodesChange: onNodesChangeExternal } = params
+
+  // 用 edge.source -> edge.target 作为父子关系（默认把 source 当作父节点）
+  const sourceToTargets = useMemo((): Map<string, string[]> => {
+    const map = new Map<string, string[]>()
+    edges.forEach(edge => {
+      const prev = map.get(edge.source) ?? []
+      map.set(edge.source, [...prev, edge.target])
+    })
+    return map
+  }, [edges])
+
+  const onNodesChange = useCallback((changes: Array<NodeChange<Node<TNodeData>>>): void => {
+    if (!onNodesChangeExternal) {
+      return
+    }
+
+    if (!enabled || edges.length === 0) {
+      onNodesChangeExternal(changes)
+      return
+    }
+
+    // 用旧节点位置计算拖拽的 dx/dy，再把位移叠加到后代节点
+    const nodeMap = new Map<string, Node<TNodeData>>(nodes.map(node => [node.id, node]))
+    const changedIdSet = new Set<string>(
+      changes.filter(change => change.type === 'position').map(change => change.id),
+    )
+
+    const deltaMap = new Map<string, { dx: number, dy: number, dragging: boolean }>()
+
+    changes.forEach(change => {
+      if (change.type !== 'position' || !change.position) {
+        return
+      }
+      const prev = nodeMap.get(change.id)
+      if (!prev) {
+        return
+      }
+
+      const dx = change.position.x - prev.position.x
+      const dy = change.position.y - prev.position.y
+      if (dx === 0 && dy === 0) {
+        return
+      }
+
+      const dragging = change.dragging === true
+      // 只影响“未被本次 change 显式更新”的节点，避免和多选拖拽冲突
+      const descendants = getDescendants(sourceToTargets, change.id)
+      descendants.forEach(descId => {
+        if (changedIdSet.has(descId)) {
+          return
+        }
+        const prevDelta = deltaMap.get(descId)
+        if (!prevDelta) {
+          deltaMap.set(descId, { dx, dy, dragging })
+          return
+        }
+        deltaMap.set(descId, { dx: prevDelta.dx + dx, dy: prevDelta.dy + dy, dragging: prevDelta.dragging || dragging })
+      })
+    })
+
+    if (deltaMap.size === 0) {
+      onNodesChangeExternal(changes)
+      return
+    }
+
+    const extraChanges: Array<NodeChange<Node<TNodeData>>> = []
+    deltaMap.forEach((delta, nodeId) => {
+      const node = nodeMap.get(nodeId)
+      if (!node) {
+        return
+      }
+      extraChanges.push({
+        type: 'position',
+        id: nodeId,
+        position: {
+          x: node.position.x + delta.dx,
+          y: node.position.y + delta.dy,
+        },
+        dragging: delta.dragging,
+      })
+    })
+
+    onNodesChangeExternal([...changes, ...extraChanges])
+  }, [edges.length, enabled, nodes, onNodesChangeExternal, sourceToTargets])
+
+  return { onNodesChange }
+}