@wzyjs/uis 0.3.29 → 0.3.31

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

@@ -1,272 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import type { Edge, EdgeChange, Node, NodeChange } from '@xyflow/react'
-
-interface MindMapCopyPayload<TNodeData extends Record<string, unknown>> {
-  nodes: Array<Node<TNodeData>>
-  edges: Edge[]
-}
-
-interface MindMapClipboardData<TNodeData extends Record<string, unknown>> {
-  t: 'mindmap'
-  v: 1
-  payload: MindMapCopyPayload<TNodeData>
-}
-
-interface UseCopyPasteParams<TNodeData extends Record<string, unknown>> {
-  enabled?: boolean
-  nodes: Array<Node<TNodeData>>
-  edges: Edge[]
-  onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void
-  onEdgesChange?: (changes: Array<EdgeChange<Edge>>) => void
-  pasteOffset?: number
-}
-
-const CLIPBOARD_MIME: string = 'application/x-mindmap+json'
-
-const getDescendantIdSet = (edges: Edge[], rootIds: 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>()
-  const result = new Set<string>()
-  const queue: string[] = [...rootIds]
-
-  rootIds.forEach(id => {
-    visited.add(id)
-    result.add(id)
-  })
-
-  while (queue.length > 0) {
-    const id = queue.shift()
-    if (!id) {
-      continue
-    }
-    const targets = sourceToTargets.get(id) ?? []
-    for (const targetId of targets) {
-      if (visited.has(targetId)) {
-        continue
-      }
-      visited.add(targetId)
-      result.add(targetId)
-      queue.push(targetId)
-    }
-  }
-
-  return result
-}
-
-const getCrypto = (): Crypto | undefined => {
-  const anyGlobal = globalThis as unknown as { crypto?: Crypto }
-  return anyGlobal.crypto
-}
-
-const createId = (): string => {
-  const crypto = getCrypto()
-  if (crypto?.randomUUID) {
-    return crypto.randomUUID()
-  }
-  return `${Date.now()}-${Math.random().toString(16).slice(2)}`
-}
-
-const clone = <T,>(value: T): T => {
-  const anyGlobal = globalThis as unknown as { structuredClone?: <V>(v: V) => V }
-  if (typeof anyGlobal.structuredClone === 'function') {
-    return anyGlobal.structuredClone(value)
-  }
-  return JSON.parse(JSON.stringify(value)) as T
-}
-
-const safeParseClipboard = <TNodeData extends Record<string, unknown>,>(text: string): MindMapCopyPayload<TNodeData> | null => {
-  try {
-    const parsed = JSON.parse(text) as MindMapClipboardData<TNodeData>
-    if (parsed?.t !== 'mindmap' || parsed?.v !== 1) {
-      return null
-    }
-    const payload = parsed.payload
-    if (!payload?.nodes?.length) {
-      return null
-    }
-    return payload
-  } catch {
-    return null
-  }
-}
-
-export const useCopyPaste = <TNodeData extends Record<string, unknown>,>(params: UseCopyPasteParams<TNodeData>): void => {
-  const {
-    enabled = false,
-    nodes,
-    edges,
-    onNodesChange,
-    onEdgesChange,
-    pasteOffset = 24,
-  } = params
-
-  const selectedNodes = useMemo((): Array<Node<TNodeData>> => {
-    return nodes.filter(node => node.selected)
-  }, [nodes])
-
-  const copyIdSet = useMemo((): Set<string> => {
-    if (selectedNodes.length === 0) {
-      return new Set<string>()
-    }
-    const rootIds = selectedNodes.map(n => n.id)
-    return getDescendantIdSet(edges, rootIds)
-  }, [edges, selectedNodes])
-
-  const nodesToCopy = useMemo((): Array<Node<TNodeData>> => {
-    if (copyIdSet.size === 0) {
-      return []
-    }
-    return nodes.filter(node => copyIdSet.has(node.id))
-  }, [copyIdSet, nodes])
-
-  const edgesToCopy = useMemo((): Edge[] => {
-    if (copyIdSet.size === 0) {
-      return []
-    }
-    return edges.filter(edge => copyIdSet.has(edge.source) && copyIdSet.has(edge.target))
-  }, [copyIdSet, edges])
-
-  const pasteIndexRef = useRef<number>(0)
-
-  const isEditableTarget = useCallback((target: EventTarget | null): boolean => {
-    const el = target as HTMLElement | null
-    if (!el) {
-      return false
-    }
-    const tag = el.tagName?.toLowerCase()
-    if (tag === 'input' || tag === 'textarea') {
-      return true
-    }
-    return el.isContentEditable
-  }, [])
-
-  const handleCopy = useCallback((event: ClipboardEvent): void => {
-    if (!enabled) {
-      return
-    }
-    if (isEditableTarget(event.target)) {
-      return
-    }
-    if (nodesToCopy.length === 0) {
-      return
-    }
-
-    const payload: MindMapCopyPayload<TNodeData> = {
-      nodes: clone(nodesToCopy),
-      edges: clone(edgesToCopy),
-    }
-
-    const clipboardData: MindMapClipboardData<TNodeData> = {
-      t: 'mindmap',
-      v: 1,
-      payload,
-    }
-    const text = JSON.stringify(clipboardData)
-
-    if (!event.clipboardData) {
-      return
-    }
-    event.preventDefault()
-    event.clipboardData.setData(CLIPBOARD_MIME, text)
-    event.clipboardData.setData('text/plain', text)
-  }, [enabled, edgesToCopy, isEditableTarget, nodesToCopy])
-
-  const pastePayload = useCallback((payload: MindMapCopyPayload<TNodeData>): void => {
-    if (!onNodesChange) {
-      return
-    }
-
-    pasteIndexRef.current += 1
-    const shift = pasteOffset * pasteIndexRef.current
-
-    const idMap = new Map<string, string>()
-    const nextNodes = payload.nodes.map(node => {
-      const nextId = createId()
-      idMap.set(node.id, nextId)
-
-      const nextNode = clone(node)
-      nextNode.id = nextId
-      nextNode.position = {
-        x: nextNode.position.x + shift,
-        y: nextNode.position.y + shift,
-      }
-      nextNode.selected = true
-      delete (nextNode as unknown as { positionAbsolute?: unknown }).positionAbsolute
-      delete (nextNode as unknown as { measured?: unknown }).measured
-      return nextNode
-    })
-
-    const nodeChanges: Array<NodeChange<Node<TNodeData>>> = nextNodes.map(item => ({
-      type: 'add',
-      item,
-    }))
-    onNodesChange(nodeChanges)
-
-    if (!onEdgesChange || payload.edges.length === 0) {
-      return
-    }
-
-    const nextEdges: Edge[] = payload.edges
-      .map(edge => {
-        const nextSource = idMap.get(edge.source)
-        const nextTarget = idMap.get(edge.target)
-        if (!nextSource || !nextTarget) {
-          return null
-        }
-        const nextEdge = clone(edge)
-        nextEdge.id = createId()
-        nextEdge.source = nextSource
-        nextEdge.target = nextTarget
-        return nextEdge
-      })
-      .filter((e): e is Edge => !!e)
-
-    if (nextEdges.length === 0) {
-      return
-    }
-
-    const edgeChanges: Array<EdgeChange<Edge>> = nextEdges.map(item => ({
-      type: 'add',
-      item,
-    }))
-    onEdgesChange(edgeChanges)
-  }, [onEdgesChange, onNodesChange, pasteOffset])
-
-  const handlePaste = useCallback((event: ClipboardEvent): void => {
-    if (!enabled) {
-      return
-    }
-    if (isEditableTarget(event.target)) {
-      return
-    }
-
-    const text = event.clipboardData?.getData(CLIPBOARD_MIME) || event.clipboardData?.getData('text/plain') || ''
-    const payloadFromClipboard = text ? safeParseClipboard<TNodeData>(text) : null
-    if (!payloadFromClipboard) {
-      return
-    }
-
-    event.preventDefault()
-    pastePayload(payloadFromClipboard)
-  }, [enabled, isEditableTarget, pastePayload])
-
-  useEffect(() => {
-    if (!enabled) {
-      return
-    }
-
-    document.addEventListener('copy', handleCopy)
-    document.addEventListener('paste', handlePaste)
-    return () => {
-      document.removeEventListener('copy', handleCopy)
-      document.removeEventListener('paste', handlePaste)
-    }
-  }, [enabled, handleCopy, handlePaste])
-}

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

@@ -1,288 +0,0 @@
-'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

@@ -1,146 +0,0 @@
-'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,
-  }
-}