@wzyjs/uis 0.3.29 → 0.3.30

package/dist/advanced/MindMap/hooks/useAlignmentSnap.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement } from 'react';
+import type { NodeChange, Node, Viewport } from '@xyflow/react';
+interface UseAlignmentSnapParams<TNodeData extends Record<string, unknown>> {
+    enabled?: boolean;
+    nodes: Array<Node<TNodeData>>;
+    onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void;
+    snapThreshold?: number;
+}
+interface UseAlignmentSnapResult<TNodeData extends Record<string, unknown>> {
+    helperLines: ReactElement | null;
+    onMove: (_event: unknown, viewport: Viewport) => void;
+    onNodesChange: (changes: Array<NodeChange<Node<TNodeData>>>) => void;
+}
+export declare const useAlignmentSnap: <TNodeData extends Record<string, unknown>>(params: UseAlignmentSnapParams<TNodeData>) => UseAlignmentSnapResult<TNodeData>;
+export {};

package/dist/advanced/MindMap/hooks/useAlignmentSnap.js

@@ -0,0 +1,164 @@
+'use client';
+import { Fragment, createElement, useCallback, useMemo, useState } from 'react';
+const getNodeSize = (node) => {
+    const width = node.measured?.width ?? node.width ?? 0;
+    const height = node.measured?.height ?? node.height ?? 0;
+    return { width, height };
+};
+export const useAlignmentSnap = (params) => {
+    const { enabled = false, nodes, onNodesChange: onNodesChangeExternal, snapThreshold = 6 } = params;
+    const [viewport, setViewport] = useState({ x: 0, y: 0, zoom: 1 });
+    // 保存对齐线在画布坐标下的位置（未做 viewport 变换）
+    const [helperLines, setHelperLines] = useState({ x: null, y: null });
+    const onMove = useCallback((_event, nextViewport) => {
+        setViewport(nextViewport);
+    }, []);
+    const onNodesChange = useCallback((changes) => {
+        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 = [
+            { point: selfX, shift: 0 },
+            { point: selfX + selfSize.width / 2, shift: selfSize.width / 2 },
+            { point: selfX + selfSize.width, shift: selfSize.width },
+        ];
+        const selfYAnchors = [
+            { point: selfY, shift: 0 },
+            { point: selfY + selfSize.height / 2, shift: selfSize.height / 2 },
+            { point: selfY + selfSize.height, shift: selfSize.height },
+        ];
+        let bestXDiff = Number.POSITIVE_INFINITY;
+        let bestYDiff = Number.POSITIVE_INFINITY;
+        let bestXLine = null;
+        let bestYLine = null;
+        let bestXOffset = 0;
+        let bestYOffset = 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 = [otherX, otherX + otherSize.width / 2, otherX + otherSize.width];
+            const otherYAnchors = [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 = 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(() => {
+        if (helperLines.x === null) {
+            return null;
+        }
+        return helperLines.x * viewport.zoom + viewport.x;
+    }, [helperLines.x, viewport.x, viewport.zoom]);
+    const helperLineY = useMemo(() => {
+        if (helperLines.y === null) {
+            return null;
+        }
+        return helperLines.y * viewport.zoom + viewport.y;
+    }, [helperLines.y, viewport.y, viewport.zoom]);
+    const helperLinesElement = useMemo(() => {
+        if (!enabled) {
+            return null;
+        }
+        const elements = [];
+        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/dist/advanced/MindMap/hooks/useCopyPaste.d.ts

@@ -0,0 +1,11 @@
+import type { Edge, EdgeChange, Node, NodeChange } from '@xyflow/react';
+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;
+}
+export declare const useCopyPaste: <TNodeData extends Record<string, unknown>>(params: UseCopyPasteParams<TNodeData>) => void;
+export {};

package/dist/advanced/MindMap/hooks/useCopyPaste.js

@@ -0,0 +1,209 @@
+'use client';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+const CLIPBOARD_MIME = 'application/x-mindmap+json';
+const getDescendantIdSet = (edges, rootIds) => {
+    const sourceToTargets = new Map();
+    edges.forEach(edge => {
+        const prev = sourceToTargets.get(edge.source) ?? [];
+        sourceToTargets.set(edge.source, [...prev, edge.target]);
+    });
+    const visited = new Set();
+    const result = new Set();
+    const queue = [...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 = () => {
+    const anyGlobal = globalThis;
+    return anyGlobal.crypto;
+};
+const createId = () => {
+    const crypto = getCrypto();
+    if (crypto?.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
+const clone = (value) => {
+    const anyGlobal = globalThis;
+    if (typeof anyGlobal.structuredClone === 'function') {
+        return anyGlobal.structuredClone(value);
+    }
+    return JSON.parse(JSON.stringify(value));
+};
+const safeParseClipboard = (text) => {
+    try {
+        const parsed = JSON.parse(text);
+        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 = (params) => {
+    const { enabled = false, nodes, edges, onNodesChange, onEdgesChange, pasteOffset = 24, } = params;
+    const selectedNodes = useMemo(() => {
+        return nodes.filter(node => node.selected);
+    }, [nodes]);
+    const copyIdSet = useMemo(() => {
+        if (selectedNodes.length === 0) {
+            return new Set();
+        }
+        const rootIds = selectedNodes.map(n => n.id);
+        return getDescendantIdSet(edges, rootIds);
+    }, [edges, selectedNodes]);
+    const nodesToCopy = useMemo(() => {
+        if (copyIdSet.size === 0) {
+            return [];
+        }
+        return nodes.filter(node => copyIdSet.has(node.id));
+    }, [copyIdSet, nodes]);
+    const edgesToCopy = useMemo(() => {
+        if (copyIdSet.size === 0) {
+            return [];
+        }
+        return edges.filter(edge => copyIdSet.has(edge.source) && copyIdSet.has(edge.target));
+    }, [copyIdSet, edges]);
+    const pasteIndexRef = useRef(0);
+    const isEditableTarget = useCallback((target) => {
+        const el = target;
+        if (!el) {
+            return false;
+        }
+        const tag = el.tagName?.toLowerCase();
+        if (tag === 'input' || tag === 'textarea') {
+            return true;
+        }
+        return el.isContentEditable;
+    }, []);
+    const handleCopy = useCallback((event) => {
+        if (!enabled) {
+            return;
+        }
+        if (isEditableTarget(event.target)) {
+            return;
+        }
+        if (nodesToCopy.length === 0) {
+            return;
+        }
+        const payload = {
+            nodes: clone(nodesToCopy),
+            edges: clone(edgesToCopy),
+        };
+        const clipboardData = {
+            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) => {
+        if (!onNodesChange) {
+            return;
+        }
+        pasteIndexRef.current += 1;
+        const shift = pasteOffset * pasteIndexRef.current;
+        const idMap = new Map();
+        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.positionAbsolute;
+            delete nextNode.measured;
+            return nextNode;
+        });
+        const nodeChanges = nextNodes.map(item => ({
+            type: 'add',
+            item,
+        }));
+        onNodesChange(nodeChanges);
+        if (!onEdgesChange || payload.edges.length === 0) {
+            return;
+        }
+        const nextEdges = 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);
+        if (nextEdges.length === 0) {
+            return;
+        }
+        const edgeChanges = nextEdges.map(item => ({
+            type: 'add',
+            item,
+        }));
+        onEdgesChange(edgeChanges);
+    }, [onEdgesChange, onNodesChange, pasteOffset]);
+    const handlePaste = useCallback((event) => {
+        if (!enabled) {
+            return;
+        }
+        if (isEditableTarget(event.target)) {
+            return;
+        }
+        const text = event.clipboardData?.getData(CLIPBOARD_MIME) || event.clipboardData?.getData('text/plain') || '';
+        const payloadFromClipboard = text ? safeParseClipboard(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/dist/advanced/MindMap/hooks/useDropToReparent.d.ts

@@ -0,0 +1,21 @@
+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;
+}
+export declare const useDropToReparent: <TNodeData extends Record<string, unknown>>(params: UseDropToReparentParams<TNodeData>) => UseDropToReparentResult<TNodeData>;
+export {};

package/dist/advanced/MindMap/hooks/useDropToReparent.js

@@ -0,0 +1,216 @@
+'use client';
+import { useCallback, useMemo, useRef, useState } from 'react';
+const defaultDropHighlightClassName = 'ring-2 ring-sky-500';
+const normalizeClassName = (className) => {
+    return (className ?? '').split(/\s+/).map(item => item.trim()).filter(Boolean);
+};
+const withClassTokens = (className, tokens, enabled) => {
+    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 = (node) => {
+    const width = node.measured?.width ?? node.width ?? 0;
+    const height = node.measured?.height ?? node.height ?? 0;
+    return { width, height };
+};
+const isPointInRect = (point, rect) => {
+    return point.x >= rect.x && point.x <= rect.x + rect.w && point.y >= rect.y && point.y <= rect.y + rect.h;
+};
+const getDescendants = (edges, rootId) => {
+    const sourceToTargets = new Map();
+    edges.forEach(edge => {
+        const prev = sourceToTargets.get(edge.source) ?? [];
+        sourceToTargets.set(edge.source, [...prev, edge.target]);
+    });
+    const visited = new Set([rootId]);
+    const result = new Set();
+    const queue = [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 = (nodes, draggingNode, edges, canDropOnNode) => {
+    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 = null;
+    let bestDist = 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 = (params) => {
+    const { enabled = true, nodes, edges, dropHighlightClassName = defaultDropHighlightClassName, canDropOnNode, onNodesChange, onEdgesChange, } = params;
+    const dropTargetIdRef = useRef(null);
+    const [draggingNodeId, setDraggingNodeId] = useState(null);
+    const [dropTargetNodeId, setDropTargetNodeId] = useState(null);
+    const dropHighlightClassTokens = useMemo(() => {
+        return normalizeClassName(dropHighlightClassName);
+    }, [dropHighlightClassName]);
+    const nodeById = useMemo(() => {
+        return new Map(nodes.map(node => [node.id, node]));
+    }, [nodes]);
+    const setDropTargetId = useCallback((nextId) => {
+        const prevId = dropTargetIdRef.current;
+        if (prevId === nextId) {
+            return;
+        }
+        dropTargetIdRef.current = nextId;
+        setDropTargetNodeId(nextId);
+        if (!onNodesChange) {
+            return;
+        }
+        const changes = [];
+        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, node) => {
+        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, node) => {
+        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 = [];
+        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/dist/advanced/MindMap/hooks/useExpandCollapse.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+export declare const useExpandCollapse: <TNodeData extends Record<string, unknown>>(params: UseExpandCollapseParams<TNodeData>) => UseExpandCollapseResult;
+export {};