@wzyjs/uis 0.3.29 → 0.3.30

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

@@ -1,232 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import type { Edge, EdgeChange, Node, NodeChange } from '@xyflow/react'
-
-interface Snapshot<TNodeData extends Record<string, unknown>> {
-  nodes: Array<Node<TNodeData>>
-  edges: Edge[]
-}
-
-interface UseUndoRedoParams<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
-}
-
-interface UseUndoRedoResult<TNodeData extends Record<string, unknown>> {
-  onNodesChange: (changes: Array<NodeChange<Node<TNodeData>>>) => void
-  onEdgesChange: (changes: Array<EdgeChange<Edge>>) => void
-}
-
-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 isEditableTarget = (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 buildNodeChanges = <TNodeData extends Record<string, unknown>,>(
-  current: Array<Node<TNodeData>>,
-  next: Array<Node<TNodeData>>,
-): Array<NodeChange<Node<TNodeData>>> => {
-  const currentById = new Map(current.map(n => [n.id, n]))
-  const nextById = new Map(next.map(n => [n.id, n]))
-
-  const changes: Array<NodeChange<Node<TNodeData>>> = []
-  current.forEach(node => {
-    if (!nextById.has(node.id)) {
-      changes.push({ type: 'remove', id: node.id })
-    }
-  })
-  next.forEach(node => {
-    if (!currentById.has(node.id)) {
-      changes.push({ type: 'add', item: clone(node) })
-      return
-    }
-    changes.push({ type: 'replace', id: node.id, item: clone(node) })
-  })
-  return changes
-}
-
-const buildEdgeChanges = (current: Edge[], next: Edge[]): Array<EdgeChange<Edge>> => {
-  const currentById = new Map(current.map(e => [e.id, e]))
-  const nextById = new Map(next.map(e => [e.id, e]))
-
-  const changes: Array<EdgeChange<Edge>> = []
-  current.forEach(edge => {
-    if (!nextById.has(edge.id)) {
-      changes.push({ type: 'remove', id: edge.id })
-    }
-  })
-  next.forEach(edge => {
-    if (!currentById.has(edge.id)) {
-      changes.push({ type: 'add', item: clone(edge) })
-      return
-    }
-    changes.push({ type: 'replace', id: edge.id, item: clone(edge) })
-  })
-  return changes
-}
-
-export const useUndoRedo = <TNodeData extends Record<string, unknown>,>(
-  params: UseUndoRedoParams<TNodeData>,
-): UseUndoRedoResult<TNodeData> => {
-  const { enabled = true, nodes, edges, onNodesChange, onEdgesChange } = params
-
-  const snapshot = useMemo((): Snapshot<TNodeData> => {
-    return { nodes: clone(nodes), edges: clone(edges) }
-  }, [edges, nodes])
-
-  const pastRef = useRef<Array<Snapshot<TNodeData>>>([])
-  const futureRef = useRef<Array<Snapshot<TNodeData>>>([])
-  const applyingRef = useRef<boolean>(false)
-  const commitNextRef = useRef<boolean>(false)
-
-  useEffect(() => {
-    if (!enabled) {
-      pastRef.current = []
-      futureRef.current = []
-      return
-    }
-    if (pastRef.current.length === 0) {
-      pastRef.current = [snapshot]
-      futureRef.current = []
-      return
-    }
-    if (applyingRef.current) {
-      return
-    }
-    if (!commitNextRef.current) {
-      return
-    }
-    commitNextRef.current = false
-    pastRef.current = [...pastRef.current, snapshot]
-    futureRef.current = []
-  }, [enabled, snapshot])
-
-  const applySnapshot = useCallback((next: Snapshot<TNodeData>): void => {
-    applyingRef.current = true
-    commitNextRef.current = false
-
-    const nodeChanges = onNodesChange ? buildNodeChanges(nodes, next.nodes) : []
-    const edgeChanges = onEdgesChange ? buildEdgeChanges(edges, next.edges) : []
-
-    if (nodeChanges.length > 0) {
-      onNodesChange?.(nodeChanges)
-    }
-    if (edgeChanges.length > 0) {
-      onEdgesChange?.(edgeChanges)
-    }
-
-    queueMicrotask(() => {
-      applyingRef.current = false
-    })
-  }, [edges, nodes, onEdgesChange, onNodesChange])
-
-  const undo = useCallback((): void => {
-    const past = pastRef.current
-    const current = past.at(-1)
-    const prev = past.at(-2)
-    if (!current || !prev) {
-      return
-    }
-
-    pastRef.current = past.slice(0, -1)
-    futureRef.current = [current, ...futureRef.current]
-    applySnapshot(prev)
-  }, [applySnapshot])
-
-  const redo = useCallback((): void => {
-    const next = futureRef.current.at(0)
-    if (!next) {
-      return
-    }
-
-    futureRef.current = futureRef.current.slice(1)
-    pastRef.current = [...pastRef.current, next]
-    applySnapshot(next)
-  }, [applySnapshot])
-
-  const onNodesChangeWrapped = useCallback((changes: Array<NodeChange<Node<TNodeData>>>): void => {
-    onNodesChange?.(changes)
-    if (!enabled) {
-      return
-    }
-    const shouldCommit = changes.some(change => {
-      if (change.type === 'position') {
-        return change.dragging !== true
-      }
-      return change.type === 'add' || change.type === 'remove'
-    })
-    if (shouldCommit) {
-      commitNextRef.current = true
-    }
-  }, [enabled, onNodesChange])
-
-  const onEdgesChangeWrapped = useCallback((changes: Array<EdgeChange<Edge>>): void => {
-    onEdgesChange?.(changes)
-    if (!enabled) {
-      return
-    }
-    const shouldCommit = changes.some(change => {
-      return change.type === 'add' || change.type === 'remove'
-    })
-    if (shouldCommit) {
-      commitNextRef.current = true
-    }
-  }, [enabled, onEdgesChange])
-
-  useEffect(() => {
-    if (!enabled) {
-      return
-    }
-
-    const onKeyDown = (event: KeyboardEvent): void => {
-      if (isEditableTarget(event.target)) {
-        return
-      }
-
-      const isMac = /Mac|iPhone|iPad|iPod/.test(navigator.platform)
-      const mod = isMac ? event.metaKey : event.ctrlKey
-      if (!mod) {
-        return
-      }
-      if (event.key.toLowerCase() !== 'z') {
-        return
-      }
-
-      event.preventDefault()
-      if (event.shiftKey) {
-        redo()
-        return
-      }
-      undo()
-    }
-
-    document.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [enabled, redo, undo])
-
-  return {
-    onNodesChange: onNodesChangeWrapped,
-    onEdgesChange: onEdgesChangeWrapped,
-  }
-}

package/src/components/MindMap/index.tsx

@@ -1,117 +0,0 @@
-'use client'
-
-import type { ReactElement } from 'react'
-
-import { ReactFlow, type Edge, type EdgeChange, type EdgeTypes, type Node, type NodeChange, type NodeTypes } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-
-import { useAlignmentSnap } from './hooks/useAlignmentSnap'
-import { useMoveDescendants } from './hooks/useMoveDescendants'
-import { useDropToReparent } from './hooks/useDropToReparent'
-import { useCopyPaste } from './hooks/useCopyPaste'
-import { useUndoRedo } from './hooks/useUndoRedo'
-import { useExpandCollapse } from './hooks/useExpandCollapse'
-import { MindMapDndProvider, useMindMapDndState } from './context'
-
-export interface MindMapNodeData extends Record<string, unknown> {
-  label: string
-}
-
-export { useMindMapDndState, useExpandCollapse }
-
-interface MindMapProps {
-  className?: string
-  enableSnap?: boolean // 是否开启对齐线与自动吸附
-  moveDescendants?: boolean // 是否拖动父节点时联动后代节点一起移动
-  enableDropToNode?: boolean // 是否允许拖拽到节点上建立父子关系
-  enableCopyPaste?: boolean // 是否开启复制粘贴
-  enableUndoRedo?: boolean // 是否开启撤销重做
-  dropHighlightClassName?: string // 可放下时的高亮样式
-  canDropOnNode?: (params: { draggingNode: Node<MindMapNodeData>, targetNode: Node<MindMapNodeData> }) => boolean // 外部控制是否可放下
-  nodeTypes?: NodeTypes
-  edgeTypes?: EdgeTypes
-  nodes: Array<Node<MindMapNodeData>>
-  edges?: Edge[]
-  onNodesChange?: (changes: Array<NodeChange<Node<MindMapNodeData>>>) => void
-  onEdgesChange?: (changes: Array<EdgeChange<Edge>>) => void
-}
-
-export const MindMap = (props: MindMapProps): ReactElement => {
-  const {
-    nodes,
-    edges = [],
-    onNodesChange,
-    onEdgesChange,
-    enableSnap = false,
-    moveDescendants = true,
-    enableDropToNode = true,
-    enableCopyPaste = true,
-    enableUndoRedo = true,
-    dropHighlightClassName,
-    canDropOnNode,
-    nodeTypes,
-    edgeTypes,
-    className = 'w-full h-full',
-  } = props
-
-  // 先把“联动后代移动”合并进节点变更回调，后续其它能力（如吸附）再基于它叠加
-  const { onNodesChange: onNodesChangeWithDescendants } = useMoveDescendants<MindMapNodeData>({
-    enabled: moveDescendants,
-    nodes,
-    edges,
-    onNodesChange,
-  })
-
-  // 在节点变更回调上叠加对齐线与吸附逻辑，并由 hook 直接给出对齐线元素
-  const { helperLines, onMove, onNodesChange: onNodesChangeWithSnap } = useAlignmentSnap<MindMapNodeData>({
-    enabled: enableSnap,
-    nodes,
-    onNodesChange: onNodesChangeWithDescendants,
-  })
-
-  const { onNodesChange: onNodesChangeWithUndoRedo, onEdgesChange: onEdgesChangeWithUndoRedo } = useUndoRedo<MindMapNodeData>({
-    enabled: enableUndoRedo,
-    nodes,
-    edges,
-    onNodesChange: onNodesChangeWithSnap,
-    onEdgesChange,
-  })
-
-  const { onNodeDrag, onNodeDragStop, draggingNodeId, dropTargetNodeId } = useDropToReparent<MindMapNodeData>({
-    enabled: enableDropToNode,
-    nodes,
-    edges,
-    dropHighlightClassName,
-    canDropOnNode,
-    onNodesChange: onNodesChangeWithUndoRedo,
-    onEdgesChange: onEdgesChangeWithUndoRedo,
-  })
-
-  useCopyPaste<MindMapNodeData>({
-    enabled: enableCopyPaste,
-    nodes,
-    edges,
-    onNodesChange: onNodesChangeWithUndoRedo,
-    onEdgesChange: onEdgesChangeWithUndoRedo,
-  })
-
-  return (
-    <MindMapDndProvider value={{ draggingNodeId, dropTargetNodeId }}>
-      <div className={`relative ${className}`}>
-        <ReactFlow
-          fitView
-          nodes={nodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          onNodesChange={onNodesChangeWithUndoRedo}
-          onEdgesChange={onEdgesChangeWithUndoRedo}
-          onMove={enableSnap ? onMove : undefined}
-          onNodeDrag={onNodeDrag}
-          onNodeDragStop={onNodeDragStop}
-        />
-        {helperLines}
-      </div>
-    </MindMapDndProvider>
-  )
-}

package/src/components/MultiImageDisplay/index.tsx

@@ -1,63 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Row, Col, Image } from 'antd'
-
-export const MultiImageDisplay = ({ images = [], preview = false }) => {
-  const renderImages = () => {
-    const count = images.length
-
-    if (count === 1) {
-      return (
-        <Image src={images[0]} preview={preview} style={{ width: '100%', height: 'auto' }} />
-      )
-    }
-
-    if (count === 2) {
-      return (
-        <Row gutter={8}>
-          {images.map((img, index) => (
-            <Col span={12} key={index}>
-              <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
-            </Col>
-          ))}
-        </Row>
-      )
-    }
-
-    if (count === 3) {
-      return (
-        <div>
-          <Row gutter={8}>
-            {images.slice(0, 2).map((img, index) => (
-              <Col span={12} key={index}>
-                <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
-              </Col>
-            ))}
-          </Row>
-          <Row gutter={8} style={{ marginTop: '8px' }}>
-            <Col span={24}>
-              <Image src={images[2]} preview={preview} style={{ width: '100%', height: 'auto' }} />
-            </Col>
-          </Row>
-        </div>
-      )
-    }
-
-    if (count >= 4) {
-      return (
-        <Row>
-          {images.map((img, index) => (
-            <Col span={12} key={index}>
-              <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
-            </Col>
-          ))}
-        </Row>
-      )
-    }
-
-    return null
-  }
-
-  return <div>{renderImages()}</div>
-}

package/src/components/ProgressButton/index.module.scss

@@ -1,65 +0,0 @@
-.progressButton {
-  @keyframes complete {
-    0% {
-      transform: scale(1) rotateY(0deg);
-    }
-
-    20% {
-      transform: scale(0.9) rotateY(36deg);
-    }
-
-    40% {
-      transform: scale(0.95) rotateY(72deg);
-    }
-
-    60% {
-      transform: scale(1) rotateY(108deg);
-    }
-
-    80% {
-      transform: scale(1.05) rotateY(144deg);
-    }
-
-    100% {
-      transform: scale(1) rotateY(180deg);
-    }
-  }
-
-  @keyframes counter-rotate {
-    0% {
-      transform: rotateY(0deg);
-    }
-
-    20% {
-      transform: rotateY(-36deg);
-    }
-
-    40% {
-      transform: rotateY(-72deg);
-    }
-
-    60% {
-      transform: rotateY(-108deg);
-    }
-
-    80% {
-      transform: rotateY(-144deg);
-    }
-
-    100% {
-      transform: rotateY(-180deg);
-    }
-  }
-
-  .animate-complete {
-    animation: complete 0.6s cubic-bezier(0, 0, 1, 1);
-  }
-
-  .animate-counter-rotate {
-    animation: counter-rotate 0.6s cubic-bezier(0, 0, 1, 1);
-  }
-
-  .perspective {
-    perspective: 1000px;
-  }
-}

package/src/components/ProgressButton/index.tsx

@@ -1,96 +0,0 @@
-import { type ReactNode } from 'react'
-import styles from './index.module.scss'
-
-interface ProgressButtonProps {
-  colors?: { bg: string, ring: string }
-  showRing?: boolean
-  progress?: number
-  padding?: number
-  size?: number
-  strokeWidth?: number
-  children?: ReactNode
-  className?: string
-}
-
-export const ProgressButton = (props: ProgressButtonProps) => {
-  const {
-    colors, // 按钮颜色配置
-    showRing = false, // 是否显示进度环
-    progress = 0, // 进度值(0-1)
-    padding = 0, // 内边距
-    strokeWidth = 5, // 进度环宽度
-    size = 50, // 按钮大小
-    children, // 子元素
-    className = '', // 自定义className
-  } = props
-
-  // 计算进度环的半径
-  const radius = (size / 2) - strokeWidth - padding + 2.5
-  // 计算进度环的周长
-  const circumference = 2 * Math.PI * radius
-  // 计算进度环的偏移量，用于显示进度
-  const offset = circumference * (1 - progress)
-
-  return (
-    <div className={styles.progressButton}>
-      <div
-        style={{ width: size, height: size }}
-        className={`relative rounded-full
-          flex items-center justify-center
-          cursor-pointer hover:opacity-90
-          focus:outline-none focus:ring-2 focus:ring-offset-2
-          ${colors?.bg}
-          ${colors?.ring}
-          transform-gpu transition-all duration-300
-          perspective
-          ${className}`}
-      >
-        {showRing && (
-          <>
-            <svg
-              className='absolute inset-0 w-full h-full'
-              viewBox={`0 0 ${size} ${size}`}
-            >
-              <circle
-                cx={size / 2}
-                cy={size / 2}
-                r={radius}
-                fill='none'
-                stroke='currentColor'
-                strokeWidth={strokeWidth}
-                className='opacity-30'
-              />
-            </svg>
-
-            <svg
-              className='absolute inset-0 w-full h-full -rotate-90'
-              viewBox={`0 0 ${size} ${size}`}
-            >
-              <circle
-                cx={size / 2}
-                cy={size / 2}
-                r={radius}
-                fill='none'
-                stroke='currentColor'
-                strokeWidth={strokeWidth}
-                strokeDasharray={circumference}
-                strokeDashoffset={offset}
-                strokeLinecap='round'
-                className='transition-all duration-300'
-              />
-            </svg>
-          </>
-        )}
-
-        <div
-          className={`
-            relative z-10 text-white text-xs text-center whitespace-pre select-none
-            ${className ? 'animate-counter-rotate' : ''}
-          `}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}