react-resize-demo 1.0.2

package/dist/index.js

@@ -0,0 +1,727 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+/**
+ * 虚拟节点管理模块
+ * 负责创建、更新、销毁虚拟节点，用于虚拟化拖拽
+ */
+
+class VirtualNodeManager {
+    constructor() {
+        this.virtualNodes = new Map(); // 存储虚拟节点映射：realEl -> virtualEl
+    }
+
+    /**
+     * 创建虚拟节点
+     * @param {HTMLElement} originalEl - 原始节点
+     * @param {Object} config - 虚拟化配置
+     * @param {Object} config.style - 虚拟节点样式
+     * @param {string} config.className - 虚拟节点类名
+     * @returns {HTMLElement} 虚拟节点
+     */
+    createVirtualNode(originalEl, config = {}) {
+        if (!originalEl || !originalEl.parentElement) {
+            return null;
+        }
+
+        // 如果已存在虚拟节点，先移除
+        if (this.virtualNodes.has(originalEl)) {
+            this.removeVirtualNode(originalEl);
+        }
+
+        // 获取原始节点的位置和尺寸信息
+        const rect = originalEl.getBoundingClientRect();
+        const parentRect = originalEl.parentElement.getBoundingClientRect();
+        const computedStyle = window.getComputedStyle(originalEl);
+
+        // 创建虚拟节点（只复制结构，不复制内容以提高性能）
+        const virtualEl = originalEl.cloneNode(false); // false 表示不复制子节点
+        
+        // 计算相对于父容器的位置
+        const top = rect.top - parentRect.top + (originalEl.parentElement.scrollTop || 0);
+        const left = rect.left - parentRect.left + (originalEl.parentElement.scrollLeft || 0);
+        
+        // 设置虚拟节点样式
+        virtualEl.style.cssText = `
+            position: absolute;
+            top: ${top}px;
+            left: ${left}px;
+            width: ${rect.width}px;
+            height: ${rect.height}px;
+            margin: 0;
+            padding: ${computedStyle.padding};
+            border: ${computedStyle.border};
+            box-sizing: ${computedStyle.boxSizing};
+            pointer-events: none;
+            z-index: 10000;
+            opacity: 0.6;
+            background-color: ${computedStyle.backgroundColor || 'rgba(0, 123, 255, 0.1)'};
+            overflow: hidden;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
+        `;
+
+        // 应用自定义样式
+        if (config.style) {
+            Object.assign(virtualEl.style, config.style);
+        }
+
+        // 应用自定义类名
+        if (config.className) {
+            virtualEl.className = config.className;
+        }
+
+        // 隐藏原始节点的内容（可选，通过设置透明度）
+        const originalOpacity = originalEl.style.opacity;
+        originalEl.style.opacity = '0.3';
+        originalEl.dataset.originalOpacity = originalOpacity || '';
+
+        // 将虚拟节点插入到父容器中
+        originalEl.parentElement.appendChild(virtualEl);
+
+        // 存储映射关系
+        this.virtualNodes.set(originalEl, virtualEl);
+
+        return virtualEl;
+    }
+
+    /**
+     * 更新虚拟节点尺寸
+     * @param {HTMLElement} originalEl - 原始节点
+     * @param {number} size - 新尺寸
+     * @param {string} direction - 方向 'horizontal' | 'vertical'
+     */
+    updateVirtualNode(originalEl, size, direction) {
+        const virtualEl = this.virtualNodes.get(originalEl);
+        if (!virtualEl) return;
+
+        const sizeProperty = direction === 'horizontal' ? 'width' : 'height';
+        virtualEl.style[sizeProperty] = `${size}px`;
+    }
+
+    /**
+     * 更新虚拟节点位置（用于级联调整）
+     * @param {HTMLElement} originalEl - 原始节点
+     * @param {number} newPosition - 新位置（绝对位置，不是偏移量）
+     * @param {string} direction - 方向 'horizontal' | 'vertical'
+     */
+    updateVirtualNodePosition(originalEl, newPosition, direction) {
+        const virtualEl = this.virtualNodes.get(originalEl);
+        if (!virtualEl) return;
+
+        const positionProperty = direction === 'horizontal' ? 'left' : 'top';
+        virtualEl.style[positionProperty] = `${newPosition}px`;
+    }
+
+    /**
+     * 移除虚拟节点
+     * @param {HTMLElement} originalEl - 原始节点
+     */
+    removeVirtualNode(originalEl) {
+        const virtualEl = this.virtualNodes.get(originalEl);
+        if (!virtualEl) return;
+
+        // 恢复原始节点透明度
+        if (originalEl.dataset.originalOpacity !== undefined) {
+            originalEl.style.opacity = originalEl.dataset.originalOpacity;
+            delete originalEl.dataset.originalOpacity;
+        }
+
+        // 移除虚拟节点
+        if (virtualEl.parentElement) {
+            virtualEl.parentElement.removeChild(virtualEl);
+        }
+
+        // 移除映射关系
+        this.virtualNodes.delete(originalEl);
+    }
+
+    /**
+     * 将最终尺寸应用到真实节点
+     * @param {HTMLElement} originalEl - 原始节点
+     * @param {number} finalSize - 最终尺寸
+     * @param {string} direction - 方向 'horizontal' | 'vertical'
+     */
+    applyToRealNode(originalEl, finalSize, direction) {
+        const sizeProperty = direction === 'horizontal' ? 'width' : 'height';
+        originalEl.style[sizeProperty] = `${finalSize}px`;
+    }
+
+    /**
+     * 移除所有虚拟节点
+     */
+    removeAllVirtualNodes() {
+        const nodesToRemove = Array.from(this.virtualNodes.keys());
+        nodesToRemove.forEach(originalEl => {
+            this.removeVirtualNode(originalEl);
+        });
+        this.virtualNodes.clear();
+    }
+
+    /**
+     * 检查是否存在虚拟节点
+     * @param {HTMLElement} originalEl - 原始节点
+     * @returns {boolean}
+     */
+    hasVirtualNode(originalEl) {
+        return this.virtualNodes.has(originalEl);
+    }
+
+    /**
+     * 获取虚拟节点
+     * @param {HTMLElement} originalEl - 原始节点
+     * @returns {HTMLElement|null}
+     */
+    getVirtualNode(originalEl) {
+        return this.virtualNodes.get(originalEl) || null;
+    }
+
+    /**
+     * 销毁管理器，清理所有资源
+     */
+    destroy() {
+        this.removeAllVirtualNodes();
+    }
+}
+
+// @ts-expect-error - VirtualNodeManager is a JS file
+
+class ResizeAbleCore {
+    constructor(options) {
+        this.prePanelEl = options.prePanelEl;
+        this.nextPanelEl = options.nextPanelEl;
+        this.getPanelInfo = options.getPanelInfo;
+        this.prePanelIndex = options.prePanelIndex;
+        this.nextPanelIndex = options.nextPanelIndex;
+        this.direction = options.direction;
+        this.virtualEnabled = options.virtualEnabled || false;
+        this.virtualConfig = options.virtualConfig || {};
+
+        this.isResizing = false;
+        this.startPos = 0;
+        this.prePanelStartSize = 0;
+        this.nextPanelStartSize = 0;
+        this.allPanelsStartSizes = new Map();
+        this.allPanelsStartPositions = new Map(); // 记录面板初始位置（虚拟化模式使用）
+        this.handleSize = options.handleSize || 0; // 拖拽器尺寸（宽度或高度，根据方向）
+        
+        // 如果启用虚拟化，创建虚拟节点管理器
+        if (this.virtualEnabled) {
+            this.virtualNodeManager = new VirtualNodeManager();
+        }
+    }
+    startResize() {
+        console.log(11111);
+        // 设置开始拖拽
+        this.isResizing = true;
+
+        // 记录前一个面板的开始大小
+        this.prePanelStartSize = this.getSize(this.prePanelEl);
+        this.allPanelsStartSizes.set(this.prePanelIndex, this.prePanelStartSize);
+        // 记录后一个面板的开始大小
+        this.nextPanelStartSize = this.getSize(this.nextPanelEl);
+        this.allPanelsStartSizes.set(this.nextPanelIndex, this.nextPanelStartSize);
+        
+        // 根据方向设置尺寸属性
+        const sizeProperty = this.direction === 'horizontal' ? 'width' : 'height';
+        
+        if (this.virtualEnabled && this.virtualNodeManager) {
+            // 虚拟化模式：创建虚拟节点并记录初始位置
+            const prePos = this.getPosition(this.prePanelEl);
+            this.allPanelsStartPositions.set(this.prePanelIndex, prePos);
+            this.virtualNodeManager.createVirtualNode(this.prePanelEl, this.virtualConfig);
+            
+            const nextPos = this.getPosition(this.nextPanelEl);
+            this.allPanelsStartPositions.set(this.nextPanelIndex, nextPos);
+            this.virtualNodeManager.createVirtualNode(this.nextPanelEl, this.virtualConfig);
+
+            // 记录前面面板的初始尺寸和位置并创建虚拟节点
+            let prevIndex = this.prePanelIndex - 1;
+            while (prevIndex >= 0) {
+                const panelInfo = this.getPanelInfo(prevIndex);
+                if (!panelInfo) break;
+
+                const size = this.getSize(panelInfo.panelEl);
+                const pos = this.getPosition(panelInfo.panelEl);
+                this.allPanelsStartSizes.set(prevIndex, size);
+                this.allPanelsStartPositions.set(prevIndex, pos);
+                this.virtualNodeManager.createVirtualNode(panelInfo.panelEl, this.virtualConfig);
+                prevIndex--;
+            }
+
+            // 记录后续面板的初始尺寸和位置并创建虚拟节点
+            let nextIndex = this.nextPanelIndex + 1;
+            let nextPanelInfo = this.getPanelInfo(nextIndex);
+            while (nextPanelInfo) {
+                const size = this.getSize(nextPanelInfo.panelEl);
+                const pos = this.getPosition(nextPanelInfo.panelEl);
+                this.allPanelsStartSizes.set(nextIndex, size);
+                this.allPanelsStartPositions.set(nextIndex, pos);
+                this.virtualNodeManager.createVirtualNode(nextPanelInfo.panelEl, this.virtualConfig);
+                nextIndex++;
+                nextPanelInfo = this.getPanelInfo(nextIndex);
+            }
+        } else {
+            // 非虚拟化模式：直接操作真实节点
+            // 禁用flex
+            this.prePanelEl.style.flex = 'none';
+            this.prePanelEl.style[sizeProperty] = `${this.prePanelStartSize}px`;
+            this.nextPanelEl.style.flex = 'none';
+            this.nextPanelEl.style[sizeProperty] = `${this.nextPanelStartSize}px`;
+
+            // 记录前面面板的初始尺寸（用于向前拖拽时的级联调整）
+            let prevIndex = this.prePanelIndex - 1;
+            while (prevIndex >= 0) {
+                const panelInfo = this.getPanelInfo(prevIndex);
+                if (!panelInfo) break;
+
+                const size = this.getSize(panelInfo.panelEl);
+                this.allPanelsStartSizes.set(prevIndex, size);
+                panelInfo.panelEl.style.flex = 'none';
+                panelInfo.panelEl.style[sizeProperty] = `${size}px`;
+                prevIndex--;
+            }
+
+            // 记录后续面板的初始尺寸（用于向后拖拽时的级联调整）
+            let nextIndex = this.nextPanelIndex + 1;
+            let nextPanelInfo = this.getPanelInfo(nextIndex);
+            while (nextPanelInfo) {
+                const size = this.getSize(nextPanelInfo.panelEl);
+                this.allPanelsStartSizes.set(nextIndex, size);
+                nextPanelInfo.panelEl.style.flex = 'none';
+                nextPanelInfo.panelEl.style[sizeProperty] = `${size}px`;
+                nextIndex++;
+                nextPanelInfo = this.getPanelInfo(nextIndex);
+            }
+        }
+    }
+    onResize(delta) {
+        if (!this.isResizing) return;
+
+        if (delta > 0) {
+            // 向后拖拽（水平布局向右，垂直布局向下）：扩大前一个面板，缩小后一个面板
+            this.adjustPanelsNext(delta);
+        } else {
+            // 向前拖拽（水平布局向左，垂直布局向上）：缩小前一个面板，扩大后一个面板
+            // 将负数转为正数处理
+            this.adjustPanelsPre(-delta);
+        }
+    }
+    adjustPanelsNext(delta) {
+        console.log('next', 'kkkkkkk');
+        let remainingDelta = delta;
+        const sizeProperty = this.direction === 'horizontal' ? 'width' : 'height';
+
+        // 尝试从后一个面板获取空间
+        const nextPanelInfo = this.getPanelInfo(this.nextPanelIndex);
+        if (nextPanelInfo) {
+            const nextStartSize = this.allPanelsStartSizes.get(this.nextPanelIndex);
+            const targetNextSize = nextStartSize - remainingDelta;
+            const newNextSize = Math.max(nextPanelInfo.minSize, targetNextSize);
+            const actualReduction = nextStartSize - newNextSize;
+
+            // 虚拟化模式下更新虚拟节点，否则更新真实节点
+            if (this.virtualEnabled && this.virtualNodeManager) {
+                this.virtualNodeManager.updateVirtualNode(this.nextPanelEl, newNextSize, this.direction);
+            } else {
+                this.nextPanelEl.style[sizeProperty] = `${newNextSize}px`;
+            }
+            remainingDelta -= actualReduction;
+        }
+
+        console.log(remainingDelta, 'kkkkkk');
+
+        // 如果后一个面板达到了最小值，继续从后续的面板中获取空间
+        if (remainingDelta > 0) {
+            let nextIndex = this.nextPanelIndex + 1;
+            while (remainingDelta > 0) {
+                const nextPanelInfo = this.getPanelInfo(nextIndex);
+                if (!nextPanelInfo) break;
+                const nextStartSize = this.allPanelsStartSizes.get(nextIndex);
+                const targetNextSize = nextStartSize - remainingDelta;
+                const newNextSize = Math.max(nextPanelInfo.minSize, targetNextSize);
+                const actualReduction = nextStartSize - newNextSize;
+                
+                // 虚拟化模式下更新虚拟节点，否则更新真实节点
+                if (this.virtualEnabled && this.virtualNodeManager) {
+                    this.virtualNodeManager.updateVirtualNode(nextPanelInfo.panelEl, newNextSize, this.direction);
+                } else {
+                    nextPanelInfo.panelEl.style[sizeProperty] = `${newNextSize}px`;
+                }
+                remainingDelta -= actualReduction;
+                if (newNextSize <= nextPanelInfo.minSize && remainingDelta > 0) {
+                    nextIndex++;
+                } else {
+                    break;
+                }
+            }
+        }
+
+        // 扩大前一个面板
+        const prePanelInfo = this.getPanelInfo(this.prePanelIndex);
+        if (prePanelInfo) {
+            const preStartSize = this.allPanelsStartSizes.get(this.prePanelIndex);
+            const actualGained = delta - remainingDelta; // 实际获得的尺寸
+            const newPreSize = preStartSize + actualGained;
+            
+            // 虚拟化模式下更新虚拟节点，否则更新真实节点
+            if (this.virtualEnabled && this.virtualNodeManager) {
+                this.virtualNodeManager.updateVirtualNode(this.prePanelEl, newPreSize, this.direction);
+                
+                // 重新计算所有面板的位置（基于尺寸变化）
+                this.recalculateAllPanelsPositions();
+            } else {
+                this.prePanelEl.style[sizeProperty] = `${newPreSize}px`;
+            }
+        }
+    }
+    adjustPanelsPre(delta) {
+        // 向前拖拽（水平布局向左，垂直布局向上）：缩小前一个面板，扩大后一个面板
+        // delta 此时是正数（表示向前拖拽的距离）
+        let remainingDelta = delta;
+        let totalReduced = 0; // 记录从前一个面板实际减少的尺寸总和
+        const sizeProperty = this.direction === 'horizontal' ? 'width' : 'height';
+    
+        // 先尝试缩小前一个面板
+        const prePanelInfo = this.getPanelInfo(this.prePanelIndex);
+        if (prePanelInfo) {
+            const preStartSize = this.allPanelsStartSizes.get(this.prePanelIndex);
+            const targetPreSize = preStartSize - remainingDelta;
+            const newPreSize = Math.max(prePanelInfo.minSize, targetPreSize);
+            const actualReduction = preStartSize - newPreSize;
+    
+            // 虚拟化模式下更新虚拟节点，否则更新真实节点
+            if (this.virtualEnabled && this.virtualNodeManager) {
+                this.virtualNodeManager.updateVirtualNode(this.prePanelEl, newPreSize, this.direction);
+            } else {
+                this.prePanelEl.style[sizeProperty] = `${newPreSize}px`;
+            }
+            totalReduced += actualReduction;
+            remainingDelta -= actualReduction;
+        }
+    
+        // 如果前一个面板达到最小值，继续缩小更前面的面板（prevPanel）
+        // 这样可以实现"依次后延"的效果
+        if (remainingDelta > 0) {
+            let prevIndex = this.prePanelIndex - 1;
+            console.log(prevIndex, this.prePanelIndex, 'kkkkkkkk');
+            while (remainingDelta > 0 && prevIndex >= 0) {
+                const prevPanelInfo = this.getPanelInfo(prevIndex);
+                if (!prevPanelInfo) break;
+    
+                const prevStartSize = this.allPanelsStartSizes.get(prevIndex);
+                if (prevStartSize === undefined) break;
+    
+                const targetPrevSize = prevStartSize - remainingDelta;
+                const newPrevSize = Math.max(prevPanelInfo.minSize, targetPrevSize);
+                const actualReduction = prevStartSize - newPrevSize;
+    
+                // 虚拟化模式下更新虚拟节点，否则更新真实节点
+                if (this.virtualEnabled && this.virtualNodeManager) {
+                    this.virtualNodeManager.updateVirtualNode(prevPanelInfo.panelEl, newPrevSize, this.direction);
+                } else {
+                    prevPanelInfo.panelEl.style[sizeProperty] = `${newPrevSize}px`;
+                }
+                totalReduced += actualReduction; // 将这部分空间也加到后一个面板
+                remainingDelta -= actualReduction;
+    
+                if (newPrevSize <= prevPanelInfo.minSize && remainingDelta > 0) {
+                    prevIndex--; // 继续向前查找
+                } else {
+                    break;
+                }
+            }
+        }
+    
+        // 扩大后一个面板（使用实际减少的尺寸）
+        const nextPanelInfo = this.getPanelInfo(this.nextPanelIndex);
+        if (nextPanelInfo) {
+            const nextStartSize = this.allPanelsStartSizes.get(this.nextPanelIndex);
+            const newNextSize = nextStartSize + totalReduced;
+            
+            // 虚拟化模式下更新虚拟节点，否则更新真实节点
+            if (this.virtualEnabled && this.virtualNodeManager) {
+                this.virtualNodeManager.updateVirtualNode(this.nextPanelEl, newNextSize, this.direction);
+                
+                // 重新计算所有面板的位置（基于尺寸变化）
+                this.recalculateAllPanelsPositions();
+            } else {
+                this.nextPanelEl.style[sizeProperty] = `${newNextSize}px`;
+            }
+        }
+    }
+    /**
+     * 重新计算所有面板的位置（虚拟化模式使用）
+     * 基于每个面板的初始位置和前面所有面板的尺寸变化
+     */
+    recalculateAllPanelsPositions() {
+        if (!this.virtualEnabled || !this.virtualNodeManager) return;
+        
+        // 从第一个面板开始，顺序计算每个面板的新位置
+        // 使用累积方式：从第一个面板的初始位置开始，依次加上每个面板的当前尺寸和拖拽器尺寸
+        const firstPanelStartPos = this.allPanelsStartPositions.get(0) || 0;
+        let currentPosition = firstPanelStartPos;
+        
+        let index = 0;
+        let panelInfo = this.getPanelInfo(index);
+        while (panelInfo) {
+            const startPos = this.allPanelsStartPositions.get(index);
+            
+            if (startPos !== undefined) {
+                // 获取虚拟节点
+                const virtualEl = this.virtualNodeManager.getVirtualNode(panelInfo.panelEl);
+                if (virtualEl) {
+                    // 如果是第一个面板，使用初始位置
+                    if (index === 0) {
+                        currentPosition = startPos;
+                    } else {
+                        // 对于后续面板，使用累积方式计算位置
+                        // 从第一个面板开始，累积所有前面面板的尺寸和拖拽器尺寸
+                        currentPosition = firstPanelStartPos;
+                        for (let i = 0; i < index; i++) {
+                            const prevInfo = this.getPanelInfo(i);
+                            if (prevInfo) {
+                                const prevVEl = this.virtualNodeManager.getVirtualNode(prevInfo.panelEl);
+                                if (prevVEl) {
+                                    const prevSize = this.direction === 'horizontal' 
+                                        ? prevVEl.offsetWidth 
+                                        : prevVEl.offsetHeight;
+                                    currentPosition += prevSize + this.handleSize;
+                                }
+                            }
+                        }
+                    }
+                    
+                    // 更新虚拟节点的位置
+                    this.virtualNodeManager.updateVirtualNodePosition(panelInfo.panelEl, currentPosition, this.direction);
+                }
+            }
+            
+            index++;
+            panelInfo = this.getPanelInfo(index);
+        }
+    }
+    getSize(el) {
+        return this.direction === 'horizontal' ? el.offsetWidth : el.offsetHeight;
+    }
+    getPosition(el) {
+        // 获取元素相对于父容器的位置
+        if (this.direction === 'horizontal') {
+            return el.offsetLeft;
+        } else {
+            return el.offsetTop;
+        }
+    }
+    endResize() {
+        this.isResizing = false;
+        
+        if (this.virtualEnabled && this.virtualNodeManager) {
+            // 虚拟化模式：将最终尺寸应用到真实节点
+            const sizeProperty = this.direction === 'horizontal' ? 'width' : 'height';
+            
+            // 获取所有虚拟节点的最终尺寸并应用到真实节点
+            this.allPanelsStartSizes.forEach((startSize, index) => {
+                const panelInfo = this.getPanelInfo(index);
+                if (!panelInfo) return;
+                
+                const virtualEl = this.virtualNodeManager.getVirtualNode(panelInfo.panelEl);
+                if (virtualEl) {
+                    const finalSize = this.direction === 'horizontal' 
+                        ? virtualEl.offsetWidth 
+                        : virtualEl.offsetHeight;
+                    
+                    // 应用最终尺寸到真实节点
+                    panelInfo.panelEl.style.flex = 'none';
+                    panelInfo.panelEl.style[sizeProperty] = `${finalSize}px`;
+                }
+            });
+            
+            // 清理所有虚拟节点
+            this.virtualNodeManager.removeAllVirtualNodes();
+        }
+        
+        this.allPanelsStartSizes.clear();
+    }
+    destroy() {
+        this.endResize();
+        // 清理虚拟节点管理器
+        if (this.virtualNodeManager) {
+            this.virtualNodeManager.destroy();
+        }
+    }
+}
+
+const ResizeableContext = React.createContext({
+    panelCount: 0,
+    registerPanel: () => 0,
+    unregisterPanel: () => { },
+    getPanelInfo: () => null,
+    getPanelIndex: () => -1,
+    direction: 'horizontal',
+    panelInfos: [],
+    virtualConfig: { enabled: false },
+});
+const ResizeablePanelGroup = ({ children, direction = 'horizontal', style, virtual = false, virtualConfig = {}, }) => {
+    const panelInfos = React.useRef([]);
+    const [panelCount, setPanelCount] = React.useState(0);
+    const registerPanel = React.useCallback((panelEl, minSize) => {
+        const index = panelInfos.current.length;
+        panelInfos.current.push({ panelEl, minSize });
+        setPanelCount(panelInfos.current.length);
+        console.log(panelInfos.current, 'panelInfos.current');
+        return index;
+    }, []);
+    const unregisterPanel = React.useCallback((panelEl) => {
+        panelInfos.current = panelInfos.current.filter(info => info.panelEl !== panelEl);
+        setPanelCount(panelInfos.current.length);
+    }, []);
+    const getPanelInfo = (index) => {
+        return panelInfos.current[index] || null;
+    };
+    const getPanelIndex = (panelEl) => {
+        return panelInfos.current.findIndex(info => info.panelEl === panelEl);
+    };
+    const childrenArray = React.Children.toArray(children);
+    const panelsWithHandles = [];
+    console.log(childrenArray, panelInfos.current, 'childrenArray');
+    childrenArray.forEach((child, index) => {
+        panelsWithHandles.push(child);
+        // 在面板之间插入拖拽器（最后一个面板后不插入）
+        if (index < childrenArray.length - 1) {
+            panelsWithHandles.push(jsxRuntime.jsx(ResizeHandle, { prePanelIndex: index, nextPanelIndex: index + 1, direction: direction }, `handle-${index}`));
+        }
+    });
+    // 合并虚拟化配置
+    const mergedVirtualConfig = {
+        enabled: virtual,
+        ...virtualConfig,
+    };
+    return (jsxRuntime.jsx(ResizeableContext.Provider, { value: {
+            panelCount: panelCount,
+            registerPanel,
+            unregisterPanel,
+            getPanelInfo,
+            getPanelIndex,
+            direction,
+            panelInfos: panelInfos.current,
+            virtualConfig: mergedVirtualConfig,
+        }, children: jsxRuntime.jsx("div", { style: {
+                display: 'flex',
+                flexDirection: direction === 'horizontal' ? 'row' : 'column',
+                height: '100%',
+                position: 'relative', // 为虚拟节点定位提供参考
+                ...style,
+            }, children: panelsWithHandles }) }));
+};
+const ResizeablePanel = ({ children, minSize = 100,
+// onResize, // 暂时未使用，保留以备将来使用
+ }) => {
+    const panelRef = React.useRef(null);
+    const panelIndexRef = React.useRef(-1);
+    const { registerPanel, unregisterPanel, direction } = React.useContext(ResizeableContext);
+    React.useEffect(() => {
+        if (!panelRef.current)
+            return;
+        const panelEl = panelRef.current;
+        panelIndexRef.current = registerPanel(panelEl, minSize);
+        return () => {
+            unregisterPanel(panelEl);
+        };
+    }, [minSize, registerPanel, unregisterPanel]);
+    return (jsxRuntime.jsx("div", { ref: panelRef, style: {
+            flex: 1,
+            minWidth: direction === 'horizontal' ? minSize : undefined,
+            minHeight: direction === 'vertical' ? minSize : undefined,
+            width: 'auto',
+            overflow: 'hidden',
+            position: 'relative',
+        }, children: jsxRuntime.jsx("div", { style: { height: '100%', padding: 16 }, children: children }) }));
+};
+const ResizeHandle = ({ prePanelIndex, nextPanelIndex, direction, }) => {
+    const handleRef = React.useRef(null);
+    const coreInstanceRef = React.useRef(null);
+    const { getPanelInfo, panelCount, virtualConfig } = React.useContext(ResizeableContext);
+    React.useEffect(() => {
+        // 确保所需的面板索引都已注册
+        // 需要确保 nextPanelIndex 对应的面板已经注册（因为索引从0开始，所以需要 >= nextPanelIndex + 1）
+        if (panelCount <= nextPanelIndex || !handleRef.current) {
+            return;
+        }
+        const prePanelInfo = getPanelInfo(prePanelIndex);
+        const nextPanelInfo = getPanelInfo(nextPanelIndex);
+        if (!prePanelInfo || !nextPanelInfo)
+            return;
+        // 获取拖拽器的尺寸
+        const handleSize = handleRef.current
+            ? (direction === 'horizontal'
+                ? handleRef.current.offsetWidth
+                : handleRef.current.offsetHeight)
+            : (direction === 'horizontal' ? 10 : 10); // 默认10px
+        coreInstanceRef.current = new ResizeAbleCore({
+            prePanelEl: prePanelInfo.panelEl,
+            nextPanelEl: nextPanelInfo.panelEl,
+            getPanelInfo,
+            prePanelIndex,
+            nextPanelIndex,
+            direction,
+            virtualEnabled: virtualConfig.enabled || false,
+            virtualConfig: {
+                style: virtualConfig.style,
+                className: virtualConfig.className,
+            },
+            handleSize, // 传递拖拽器尺寸
+        });
+        // 将拖拽器的开始/移动/结束事件绑定至核心类
+        const handleEl = handleRef.current;
+        let isResizing = false;
+        let startPos = 0;
+        const startResize = (e) => {
+            console.log(9999999);
+            e.preventDefault();
+            isResizing = true;
+            startPos = direction === 'horizontal' ? e.clientX : e.clientY;
+            if (coreInstanceRef.current) {
+                coreInstanceRef.current.startResize();
+            }
+        };
+        const onResizeMove = (e) => {
+            if (!isResizing || !coreInstanceRef.current)
+                return;
+            const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
+            const delta = currentPos - startPos;
+            coreInstanceRef.current.onResize(delta);
+        };
+        const endResize = () => {
+            if (isResizing && coreInstanceRef.current) {
+                isResizing = false;
+                coreInstanceRef.current.endResize();
+            }
+        };
+        handleEl.addEventListener('mousedown', startResize);
+        document.addEventListener('mousemove', onResizeMove);
+        document.addEventListener('mouseup', endResize);
+        return () => {
+            handleEl.removeEventListener('mousedown', startResize);
+            document.removeEventListener('mousemove', onResizeMove);
+            document.removeEventListener('mouseup', endResize);
+            if (coreInstanceRef.current) {
+                coreInstanceRef.current.destroy();
+            }
+        };
+    }, [prePanelIndex, nextPanelIndex, direction, getPanelInfo, panelCount, virtualConfig]);
+    const isHorizontal = direction === 'horizontal';
+    return (jsxRuntime.jsx("div", { ref: handleRef, style: {
+            position: 'relative',
+            width: isHorizontal ? '10px' : '100%',
+            height: isHorizontal ? '100%' : '10px',
+            backgroundColor: '#000',
+            cursor: isHorizontal ? 'ew-resize' : 'ns-resize',
+            zIndex: 1000,
+            flexShrink: 0,
+        } }));
+};
+
+exports.ResizeablePanel = ResizeablePanel;
+exports.ResizeablePanelGroup = ResizeablePanelGroup;
+//# sourceMappingURL=index.js.map