@wzyjs/uis 0.3.28 → 0.3.30

package/src/components/Markdown/index.tsx

@@ -1,152 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-import ReactMarkdown from 'react-markdown'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import remarkGfm from 'remark-gfm'
-import rehypeSlug from 'rehype-slug'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-
-import 'github-markdown-css/github-markdown-light.css'
-import { style } from './style'
-
-interface MarkdownProps {
-  content: string
-  showToc?: boolean // 是否显示目录
-}
-
-interface TocItem {
-  id: string
-  text: string
-  level: number
-}
-
-export const Markdown = (props: MarkdownProps) => {
-  const { content = '', showToc = true } = props
-
-  // 提取标题生成目录
-  const tocItems = useMemo(() => {
-    if (!showToc) {
-      return []
-    }
-
-    const lines = content.split('\n')
-    const items: TocItem[] = []
-
-    lines.forEach((line) => {
-      const match = line.match(/^(#{2,4})\s+(.+)$/)
-      if (match && match[1] && match[2]) {
-        const level = match[1].length
-        const text = match[2].trim()
-        const id = text
-        .toLowerCase()
-        .replace(/[^\w\u4e00-\u9fa5\s-]/g, '') // 保留中文、英文、数字、空格和连字符
-        .replace(/\s+/g, '-') // 空格替换为连字符
-
-        items.push({ id, text, level })
-      }
-    })
-
-    return items
-  }, [content, showToc])
-
-  // 渲染目录
-  const renderToc = () => {
-    if (!showToc || tocItems.length === 0) {
-      return null
-    }
-
-    return (
-      <div
-        className='markdown-toc-container'
-        style={{
-          padding: '10px 20px 10px 0',
-          backgroundColor: '#f8f9fa',
-          borderLeft: '4px solid #1890ff',
-          borderRadius: '4px',
-          overflowY: 'auto',
-          height: '100%'
-        }}
-      >
-        <ul style={{ margin: 0, padding: 0 }}>
-          {tocItems.map((item, index) => (
-            <li
-              key={index}
-              style={{
-                marginBottom: '4px',
-                marginLeft: `${(item.level - 1) * 16}px`,
-                listStyle: 'none',
-                position: 'relative',
-              }}
-            >
-              <a
-                href={`#${item.id}`}
-                style={{
-                  textDecoration: 'none',
-                  color: '#1890ff',
-                  fontSize: item.level <= 2 ? '14px' : '13px',
-                  fontWeight: item.level === 1 ? 600 : 400,
-                }}
-                onClick={(e) => {
-                  e.preventDefault()
-                  const element = document.getElementById(item.id)
-                  if (element) {
-                    element.scrollIntoView({ behavior: 'smooth' })
-                  }
-                }}
-              >
-                {item.text}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    )
-  }
-
-  return (
-    <div style={{ height: '100%' }}>
-      <style>{style}</style>
-      <div className='markdown-body markdown-toc' style={{ height: '100%', display: 'flex' }}>
-        <div style={{ marginRight: 14 }}>
-          {renderToc()}
-        </div>
-        <div style={{ overflow: 'auto', flex: 1 }}>
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={[
-              rehypeSlug,
-              [rehypeAutolinkHeadings, {
-                behavior: 'wrap',
-                properties: {
-                  className: ['anchor'],
-                },
-              }],
-            ]}
-            components={{
-              code(props) {
-                const { children, className } = props
-                const match = /language-(\w+)/.exec(className || '')
-                return match ? (
-                  <SyntaxHighlighter
-                    PreTag='div'
-                    children={String(children).replace(/\n$/, '')}
-                    language={match[1]}
-                    style={oneLight}
-                  />
-                ) : (
-                  <code className={className}>
-                    {children}
-                  </code>
-                )
-              },
-            }}
-          >
-            {content}
-          </ReactMarkdown>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/MindMap/context.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import { createContext, useContext, type ReactNode } from 'react'
-
-export interface MindMapDndState {
-  draggingNodeId: string | null
-  dropTargetNodeId: string | null
-}
-
-const MindMapDndContext = createContext<MindMapDndState | null>(null)
-
-interface MindMapDndProviderProps {
-  value: MindMapDndState
-  children: ReactNode
-}
-
-export const MindMapDndProvider = (props: MindMapDndProviderProps) => {
-  const { value, children } = props
-  return (
-    <MindMapDndContext.Provider value={value}>
-      {children}
-    </MindMapDndContext.Provider>
-  )
-}
-
-export const useMindMapDndState = (): MindMapDndState => {
-  const value = useContext(MindMapDndContext)
-  return value ?? { draggingNodeId: null, dropTargetNodeId: null }
-}

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

@@ -1,220 +0,0 @@
-'use client'
-
-import { Fragment, createElement, useCallback, useMemo, useState, type ReactElement } from 'react'
-
-import type { NodeChange, Node, Viewport } from '@xyflow/react'
-
-interface HelperLines {
-  x: number | null
-  y: number | null
-}
-
-interface UseAlignmentSnapParams<TNodeData extends Record<string, unknown>> {
-  // 开关：关闭时只透传回调，不做任何吸附与对齐线计算
-  enabled?: boolean
-  // 当前节点列表（用于计算对齐点）
-  nodes: Array<Node<TNodeData>>
-  // 透传给 ReactFlow 的 onNodesChange（通常来自 useNodesState）
-  onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void
-  // 吸附阈值（单位：画布坐标 px）
-  snapThreshold?: number
-}
-
-interface UseAlignmentSnapResult<TNodeData extends Record<string, unknown>> {
-  // hook 直接产出的对齐线元素，主组件可直接渲染
-  helperLines: ReactElement | null
-  // 用于同步 viewport，保证对齐线在屏幕坐标下位置正确
-  onMove: (_event: unknown, viewport: Viewport) => void
-  // 包装后的 onNodesChange：在 position change 上做吸附与对齐线更新
-  onNodesChange: (changes: Array<NodeChange<Node<TNodeData>>>) => void
-}
-
-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 }
-}
-
-export const useAlignmentSnap = <TNodeData extends Record<string, unknown>,>(params: UseAlignmentSnapParams<TNodeData>): UseAlignmentSnapResult<TNodeData> => {
-  const { enabled = false, nodes, onNodesChange: onNodesChangeExternal, snapThreshold = 6 } = params
-
-  const [viewport, setViewport] = useState<Viewport>({ x: 0, y: 0, zoom: 1 })
-  // 保存对齐线在画布坐标下的位置（未做 viewport 变换）
-  const [helperLines, setHelperLines] = useState<HelperLines>({ x: null, y: null })
-
-  const onMove = useCallback((_event: unknown, nextViewport: Viewport): void => {
-    setViewport(nextViewport)
-  }, [])
-
-  const onNodesChange = useCallback((changes: Array<NodeChange<Node<TNodeData>>>): void => {
-    if (!onNodesChangeExternal) {
-      return
-    }
-
-    if (!enabled) {
-      setHelperLines({ x: null, y: null })
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    // 只在 position change 上参与吸附，避免对 selection 等变更产生副作用
-    const positionChange = changes.find(change => change.type === 'position')
-    if (positionChange?.type !== 'position' || !positionChange.position) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    const dragging = positionChange.dragging === true
-    if (!dragging) {
-      setHelperLines({ x: null, y: null })
-    }
-
-    const baseNode = nodes.find(item => item.id === positionChange.id)
-    if (!baseNode) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    const selfSize = getNodeSize(baseNode)
-    if (!selfSize.width || !selfSize.height) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    // 以“边/中/边”作为候选锚点，计算与其他节点锚点的最小距离
-    const selfX = positionChange.position.x
-    const selfY = positionChange.position.y
-    const selfXAnchors: Array<{ point: number, shift: number }> = [
-      { point: selfX, shift: 0 },
-      { point: selfX + selfSize.width / 2, shift: selfSize.width / 2 },
-      { point: selfX + selfSize.width, shift: selfSize.width },
-    ]
-    const selfYAnchors: Array<{ point: number, shift: number }> = [
-      { point: selfY, shift: 0 },
-      { point: selfY + selfSize.height / 2, shift: selfSize.height / 2 },
-      { point: selfY + selfSize.height, shift: selfSize.height },
-    ]
-
-    let bestXDiff: number = Number.POSITIVE_INFINITY
-    let bestYDiff: number = Number.POSITIVE_INFINITY
-    let bestXLine: number | null = null
-    let bestYLine: number | null = null
-    let bestXOffset: number = 0
-    let bestYOffset: number = 0
-
-    nodes.forEach(other => {
-      if (other.id === positionChange.id) {
-        return
-      }
-      const otherSize = getNodeSize(other)
-      if (!otherSize.width || !otherSize.height) {
-        return
-      }
-
-      const otherX = other.position.x
-      const otherY = other.position.y
-      const otherXAnchors: Array<number> = [otherX, otherX + otherSize.width / 2, otherX + otherSize.width]
-      const otherYAnchors: Array<number> = [otherY, otherY + otherSize.height / 2, otherY + otherSize.height]
-
-      for (const selfAnchor of selfXAnchors) {
-        for (const otherAnchor of otherXAnchors) {
-          const diffX = Math.abs(selfAnchor.point - otherAnchor)
-          if (diffX <= snapThreshold && diffX < bestXDiff) {
-            bestXDiff = diffX
-            bestXLine = otherAnchor
-            bestXOffset = otherAnchor - selfAnchor.point
-          }
-        }
-      }
-
-      for (const selfAnchor of selfYAnchors) {
-        for (const otherAnchor of otherYAnchors) {
-          const diffY = Math.abs(selfAnchor.point - otherAnchor)
-          if (diffY <= snapThreshold && diffY < bestYDiff) {
-            bestYDiff = diffY
-            bestYLine = otherAnchor
-            bestYOffset = otherAnchor - selfAnchor.point
-          }
-        }
-      }
-    })
-
-    if (dragging) {
-      setHelperLines({ x: bestXLine, y: bestYLine })
-    }
-
-    // 没命中阈值则完全透传，避免抖动
-    if (bestXLine === null && bestYLine === null) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    const nextX = bestXLine === null ? selfX : selfX + bestXOffset
-    const nextY = bestYLine === null ? selfY : selfY + bestYOffset
-
-    // 通过“改写 position change”的方式实现吸附，避免与外部受控状态冲突
-    const nextChanges: Array<NodeChange<Node<TNodeData>>> = changes.map(change => {
-      if (change.type !== 'position' || change.id !== positionChange.id || !change.position) {
-        return change
-      }
-      if (change.position.x === nextX && change.position.y === nextY) {
-        return change
-      }
-      return {
-        ...change,
-        position: { x: nextX, y: nextY },
-      }
-    })
-
-    onNodesChangeExternal(nextChanges)
-  }, [enabled, nodes, onNodesChangeExternal, snapThreshold])
-
-  // 将画布坐标转换为屏幕坐标，用于 absolute 定位对齐线
-  const helperLineX = useMemo((): number | null => {
-    if (helperLines.x === null) {
-      return null
-    }
-    return helperLines.x * viewport.zoom + viewport.x
-  }, [helperLines.x, viewport.x, viewport.zoom])
-
-  const helperLineY = useMemo((): number | null => {
-    if (helperLines.y === null) {
-      return null
-    }
-    return helperLines.y * viewport.zoom + viewport.y
-  }, [helperLines.y, viewport.y, viewport.zoom])
-
-  const helperLinesElement = useMemo((): ReactElement | null => {
-    if (!enabled) {
-      return null
-    }
-
-    const elements: ReactElement[] = []
-    if (helperLineX !== null) {
-      elements.push(createElement('div', {
-        key: 'helper-line-x',
-        className: 'pointer-events-none absolute top-0 h-full w-px bg-sky-500',
-        style: { left: helperLineX },
-      }))
-    }
-    if (helperLineY !== null) {
-      elements.push(createElement('div', {
-        key: 'helper-line-y',
-        className: 'pointer-events-none absolute left-0 w-full h-px bg-sky-500',
-        style: { top: helperLineY },
-      }))
-    }
-
-    if (elements.length === 0) {
-      return null
-    }
-
-    return createElement(Fragment, null, ...elements)
-  }, [enabled, helperLineX, helperLineY])
-
-  return {
-    helperLines: helperLinesElement,
-    onMove,
-    onNodesChange,
-  }
-}

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])
-}