react-resize-demo 2.0.3 → 4.1.0

package/README.md

@@ -6,13 +6,17 @@
 
 ## ✨ 特性
 
+- ✅ **多种策略**：提供 2 种 resize 策略（Basic、Flex），适应不同场景
 - ✅ **双向布局**：支持水平和垂直方向的布局
 - ✅ **拖拽调整**：可拖拽调整相邻面板的宽度/高度
+- ✅ **自定义拖拽器**：支持完全自定义拖拽器的外观和交互效果
 - ✅ **最小尺寸**：支持设置面板最小尺寸限制
 - ✅ **级联调整**：当面板达到最小值时，自动从相邻面板获取空间
 - ✅ **虚拟化拖拽**：支持虚拟节点模式，拖拽时创建虚拟框架，提升性能
+- ✅ **性能优化**：RAF 优化、基于位置的计算、面板变化通知、自动冻结等多项性能优化
+- ✅ **可配置化**：Flex 策略支持自定义计算参数，适应特殊场景
 - ✅ **TypeScript**：完整的 TypeScript 类型支持
-- ✅ **模块化架构**：清晰的目录结构，支持按需导入
+- ✅ **模块化架构**：按策略分类的清晰目录结构，支持按需导入
 - ✅ **Tree-shaking**：支持 Tree-shaking，减少打包体积
 - ✅ **代码压缩**：自动压缩代码，优化打包体积
 
@@ -28,44 +32,53 @@ pnpm add react-resize-demo
 
 ## 🚀 快速开始
 
-### 基础用法
+### 基础用法（推荐使用 Flex 策略）
 
 ```tsx
-import { ResizablePanelGroup, ResizablePanel } from 'react-resize-demo';
+import { ResizePanelGroupFlex, ResizePanelFlex } from 'react-resize-demo';
 
 function App() {
   return (
     <div style={{ width: '100%', height: '500px' }}>
-      <ResizablePanelGroup direction="horizontal">
-        <ResizablePanel minSize={100}>
+      <ResizePanelGroupFlex direction="horizontal">
+        <ResizePanelFlex minSize={100}>
           <div>Panel 1</div>
-        </ResizablePanel>
-        <ResizablePanel minSize={200}>
+        </ResizePanelFlex>
+        <ResizePanelFlex minSize={200}>
           <div>Panel 2</div>
-        </ResizablePanel>
-        <ResizablePanel minSize={300}>
+        </ResizePanelFlex>
+        <ResizePanelFlex minSize={300}>
           <div>Panel 3</div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
+        </ResizePanelFlex>
+      </ResizePanelGroupFlex>
     </div>
   );
 }
 ```
 
+### 其他策略
+
+项目提供 2 种策略，可根据场景选择：
+
+- **Basic 策略**：适合面板数量较少的简单场景
+- **Flex 策略**：适合需要精确控制占比的场景（**推荐**）
+
+详细对比请查看 [策略对比文档](./docs/STRATEGY_COMPARISON.md)
+
 ### 垂直布局
 
 ```tsx
-<ResizablePanelGroup direction="vertical" style={{ height: '500px' }}>
-  <ResizablePanel minSize={100}>
+<ResizePanelGroupFlex direction="vertical" style={{ height: '500px' }}>
+  <ResizePanelFlex minSize={100}>
     <div>顶部面板</div>
-  </ResizablePanel>
-  <ResizablePanel minSize={200}>
+  </ResizePanelFlex>
+  <ResizePanelFlex minSize={200}>
     <div>中间面板</div>
-  </ResizablePanel>
-  <ResizablePanel minSize={100}>
+  </ResizePanelFlex>
+  <ResizePanelFlex minSize={100}>
     <div>底部面板</div>
-  </ResizablePanel>
-</ResizablePanelGroup>
+  </ResizePanelFlex>
+</ResizePanelGroupFlex>
 ```
 
 ### 虚拟化模式
@@ -74,17 +87,17 @@ function App() {
 
 ```tsx
 // 启用虚拟化（使用默认样式）
-<ResizablePanelGroup virtual={true}>
-  <ResizablePanel minSize={100}>
+<ResizePanelGroupFlex virtual={true}>
+  <ResizePanelFlex minSize={100}>
     <div>Panel 1</div>
-  </ResizablePanel>
-  <ResizablePanel minSize={200}>
+  </ResizePanelFlex>
+  <ResizePanelFlex minSize={200}>
     <div>Panel 2</div>
-  </ResizablePanel>
-</ResizablePanelGroup>
+  </ResizePanelFlex>
+</ResizePanelGroupFlex>
 
-// 启用虚拟化（自定义样式）
-<ResizablePanelGroup 
+// 启用虚拟化 + 面板变化通知（推荐）
+<ResizePanelGroupFlex 
   virtual={true}
   virtualConfig={{
     style: { 
@@ -94,14 +107,80 @@ function App() {
     },
     className: 'custom-virtual-node'
   }}
+  onPanelsChange={(changedIndices) => {
+    console.log('变化的面板:', Array.from(changedIndices));
+    // 只重新渲染变化的面板，提升性能
+  }}
+>
+  <ResizePanelFlex minSize={100}>
+    <div>Panel 1</div>
+  </ResizePanelFlex>
+  <ResizePanelFlex minSize={200}>
+    <div>Panel 2</div>
+  </ResizePanelFlex>
+</ResizePanelGroupFlex>
+```
+
+### 自定义拖拽器
+
+所有策略都支持通过 `renderHandle` prop 自定义拖拽器的外观和内容：
+
+```tsx
+<ResizePanelGroupFlex 
+  renderHandle={({ prePanelIndex, nextPanelIndex, direction, isResizing }) => (
+    <div 
+      className="custom-resize-handle"
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: isResizing ? '#0066cc' : '#cccccc',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.2s',
+      }}
+    >
+      <div style={{ fontSize: '12px', color: '#fff' }}>||</div>
+    </div>
+  )}
+>
+  <ResizePanelFlex minSize={100}>
+    <div>Panel 1</div>
+  </ResizePanelFlex>
+  <ResizePanelFlex minSize={200}>
+    <div>Panel 2</div>
+  </ResizePanelFlex>
+</ResizePanelGroupFlex>
+```
+
+**参数说明**：
+- `prePanelIndex`: 前一个面板的索引
+- `nextPanelIndex`: 后一个面板的索引
+- `direction`: 布局方向（'horizontal' | 'vertical'）
+- `isResizing`: 是否正在拖拽（可用于动态改变样式）
+
+### 高级配置（Flex 策略）
+
+对于 Flex 策略，你可以通过 `flexConfig` 自定义计算参数，以适应特殊场景：
+
+```tsx
+<ResizePanelGroupFlex 
+  flexConfig={{
+    minDeltaThreshold: 0.2,        // 自定义最小拖拽变化阈值
+    sizeChangeThreshold: 0.15,     // 自定义尺寸变化阈值
+    growChangeThreshold: 0.0002,   // 自定义 grow 值变化阈值
+    growNormalizeBase: 200,        // 自定义归一化基数
+    growPrecisionMultiplier: 2000, // 自定义精度倍数
+    flexGrowPrecisionMultiplier: 200, // 自定义 flex-grow 精度
+  }}
 >
-  <ResizablePanel minSize={100}>
+  <ResizePanelFlex minSize={100}>
     <div>Panel 1</div>
-  </ResizablePanel>
-  <ResizablePanel minSize={200}>
+  </ResizePanelFlex>
+  <ResizePanelFlex minSize={200}>
     <div>Panel 2</div>
-  </ResizablePanel>
-</ResizablePanelGroup>
+  </ResizePanelFlex>
+</ResizePanelGroupFlex>
 ```
 
 ### 按需导入
@@ -110,17 +189,13 @@ function App() {
 
 ```tsx
 // 从主入口导入（推荐）
-import { ResizablePanelGroup, ResizablePanel } from 'react-resize-demo';
+import { ResizePanelGroupFlex, ResizePanelFlex } from 'react-resize-demo';
 
 // 按需导入组件
-import { ResizablePanelGroup } from 'react-resize-demo/components/ResizePanelGroup';
-import { ResizablePanel } from 'react-resize-demo/components/ResizePanel';
-
-// 导入工具函数
-import { ResizeAbleCore } from 'react-resize-demo/utils';
+import { ResizePanelGroupFlex } from 'react-resize-demo/components';
 
 // 导入类型
-import type { VirtualConfig, ResizeDirection } from 'react-resize-demo/types';
+import type { VirtualConfig, ResizeDirection, FlexStrategyConfig } from 'react-resize-demo/types';
 ```
 
 ## 🎮 运行 Demo
@@ -161,9 +236,9 @@ npm run demo
 
 ## 📖 API 文档
 
-### ResizablePanelGroup
+### ResizePanelGroupFlex（推荐）
 
-面板组容器组件，用于包裹多个 `ResizablePanel`。
+面板组容器组件，用于包裹多个 `ResizePanelFlex`。
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
@@ -171,7 +246,10 @@ npm run demo
 | virtual | `boolean` | `false` | 是否启用虚拟化模式 |
 | virtualConfig | `VirtualConfig` | `{}` | 虚拟化配置（仅在 virtual=true 时生效） |
 | style | `React.CSSProperties` | - | 自定义样式 |
-| children | `React.ReactNode` | - | 子元素（通常是多个 ResizablePanel） |
+| onPanelsChange | `(changedIndices: Set<number>) => void` | - | 面板变化回调，用于性能优化 |
+| flexConfig | `FlexStrategyConfig` | - | Flex 策略配置（高级用法） |
+| renderHandle | `(props: ResizeHandleRenderProps) => React.ReactNode` | - | 自定义拖拽器渲染函数 |
+| children | `React.ReactNode` | - | 子元素（通常是多个 ResizePanelFlexLinked） |
 
 #### VirtualConfig
 
@@ -183,66 +261,44 @@ npm run demo
 | style | `React.CSSProperties` | - | 虚拟节点的自定义样式 |
 | className | `string` | - | 虚拟节点的自定义类名 |
 
-### ResizablePanel
+#### ResizeHandleRenderProps（自定义拖拽器参数）
+
+自定义拖拽器渲染函数的参数类型：
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| prePanelIndex | `number` | 前一个面板的索引 |
+| nextPanelIndex | `number` | 后一个面板的索引 |
+| direction | `'horizontal' \| 'vertical'` | 布局方向 |
+| isResizing | `boolean` | 是否正在拖拽（可用于动态改变样式） |
+
+#### FlexStrategyConfig（高级配置）
+
+Flex 策略的计算参数配置，用于精细调整计算行为：
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| minDeltaThreshold | `number` | `0.1` | 最小拖拽变化阈值（像素），小于此值的变化将被忽略 |
+| sizeChangeThreshold | `number` | `0.1` | 尺寸变化误差阈值（像素），用于判断面板尺寸是否发生变化 |
+| growChangeThreshold | `number` | `0.0001` | flex-grow 值变化阈值，用于判断 grow 值是否发生变化 |
+| growNormalizeBase | `number` | `100` | grow 值归一化基数，用于计算初始 grow 值 |
+| growPrecisionMultiplier | `number` | `1000` | grow 值精度倍数，用于保留小数位数（1000 表示保留3位小数） |
+| flexGrowPrecisionMultiplier | `number` | `100` | flex-grow 精度倍数，用于设置 flex-grow 时的精度（100 表示保留2位小数） |
+
+### ResizePanelFlex
 
 可调整大小的面板组件。
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
 | minSize | `number` | `100` | 面板最小尺寸（像素） |
-| onResize | `(width: number) => void` | - | 面板尺寸变化时的回调函数 |
 | children | `React.ReactNode` | - | 面板内容 |
 
-### Context & Hooks
-
-```tsx
-import { ResizableContext, useResizableContext } from 'react-resize-demo';
-
-// 在组件内部使用
-const { 
-  panelCount, 
-  registerPanel, 
-  unregisterPanel,
-  getPanelInfo,
-  direction,
-  virtualConfig 
-} = useResizableContext();
-```
-
 ## 🏗️ 项目结构
 
-```
-react-resize-demo/
-├── src/                          # 源代码目录
-│   ├── components/               # 组件目录
-│   │   ├── ResizePanelGroup/     # 容器组件
-│   │   │   └── index.tsx
-│   │   ├── ResizePanel/          # 面板组件
-│   │   │   └── index.tsx
-│   │   ├── ResizeHandle/         # 拖拽手柄组件
-│   │   │   └── index.tsx
-│   │   ├── shared/               # 共享资源
-│   │   │   └── context.tsx       # Context 定义
-│   │   └── index.tsx             # 组件统一导出
-│   ├── utils/                    # 工具函数
-│   │   ├── resizeAble.ts         # 拖拽调整核心类
-│   │   ├── virtualNode.ts        # 虚拟节点管理模块
-│   │   └── index.ts              # 工具函数导出
-│   ├── types/                    # 类型定义
-│   │   └── index.ts              # 所有类型定义
-│   └── index.ts                  # 主入口文件
-├── demo/                         # 本地测试Demo
-│   ├── App.tsx                   # Demo应用
-│   └── ...
-├── dist/                         # 构建输出目录
-│   ├── index.js                  # CJS 主入口
-│   ├── esm/                      # ESM 模块
-│   ├── components/               # CJS 组件
-│   ├── utils/                    # CJS 工具
-│   └── types/                    # 类型定义
-├── rollup.config.mjs             # Rollup构建配置
-└── package.json                  # 项目配置
-```
+项目采用模块化架构，按策略分类组织代码，支持按需导入和 Tree-shaking。核心功能包括面板管理、虚拟节点管理、节流优化等工具模块，所有策略共享这些核心工具。
+
+详细的项目结构说明请查看 [PROJECT_STRUCTURE.md](./PROJECT_STRUCTURE.md)
 
 ## 🔧 开发
 
@@ -294,55 +350,74 @@ npm run build:watch
 
 ## 💡 工作原理
 
-组件通过拖拽器（ResizeHandle）来调整相邻面板的尺寸：
-- **向右拖拽**：扩大左侧面板，缩小右侧面板（如果右侧面板达到最小值，继续从后续面板获取空间）
-- **向左拖拽**：缩小左侧面板，扩大右侧面板（如果左侧面板达到最小值，继续从前面面板获取空间）
-
-拖拽器会自动插入到相邻面板之间，无需手动添加。
+组件通过拖拽器来调整相邻面板的尺寸。拖拽器会自动插入到相邻面板之间，无需手动添加。
 
-### 虚拟化模式
+**拖拽行为**：
+- **向右拖拽**：扩大左侧面板，缩小右侧面板。如果右侧面板达到最小值，会自动从后续面板获取空间（级联调整）
+- **向左拖拽**：缩小左侧面板，扩大右侧面板。如果左侧面板达到最小值，会自动从前面面板获取空间（级联调整）
 
-当启用虚拟化模式（`virtual={true}`）时：
-1. **拖拽开始**：为所有相关面板创建虚拟节点框架，虚拟节点覆盖在原节点上
-2. **拖拽中**：只更新虚拟节点的尺寸和位置，真实节点保持不变
-3. **拖拽结束**：将虚拟节点的最终尺寸应用到真实节点，然后清理所有虚拟节点
+**虚拟化模式**：
+当启用虚拟化模式时，拖拽过程中会创建虚拟节点框架来显示调整效果，真实节点保持不变。拖拽结束后再将最终尺寸应用到真实节点。这种方式可以显著提升性能，特别是在处理复杂内容的面板时。
 
-这种模式可以：
-- 提升性能：拖拽过程中不操作真实 DOM，减少重排和重绘
-- 提供视觉反馈：虚拟节点可以有不同的样式（如半透明、虚线边框等）
-- 适用于复杂内容：当面板内容复杂时，虚拟化可以避免拖拽时的性能问题
+**性能优化机制**：
+- 使用 `requestAnimationFrame` 与浏览器渲染同步，每帧计算一次
+- 基于初始状态计算，避免累积误差
+- 只更新变化的面板，未变化的面板自动冻结
+- 支持面板变化通知，只重新渲染变化的面板
 
 ## 🔄 迁移指南
 
-### 从 1.x 升级到 2.0
+### 从 2.x 升级到 3.0
 
-2.0 版本保持了向后兼容，现有代码无需修改即可使用：
+3.0 版本引入了策略分类架构，推荐使用 Flex 策略：
 
 ```tsx
-// ✅ 仍然可用（向后兼容）
-import { ResizeablePanelGroup, ResizeablePanel } from 'react-resize-demo';
+// 2.x 版本（仍然可用，向后兼容）
+import { ResizePanelGroup, ResizePanel } from 'react-resize-demo';
 
-// ✅ 推荐使用新的正确拼写
-import { ResizablePanelGroup, ResizablePanel } from 'react-resize-demo';
+// 3.0 版本（推荐）
+import { ResizePanelGroupFlex, ResizePanelFlex } from 'react-resize-demo';
 ```
 
 ### 新功能
 
-如果你想要使用新的分层导入功能：
+3.0 版本新增了多种策略和性能优化：
 
 ```tsx
-// 按需导入，更好的 Tree-shaking
-import { ResizablePanelGroup } from 'react-resize-demo/components/ResizePanelGroup';
-import { ResizablePanel } from 'react-resize-demo/components/ResizePanel';
+// 使用 Flex 策略（推荐，性能最佳）
+import { ResizePanelGroupFlex, ResizePanelFlex } from 'react-resize-demo';
+
+// 启用面板变化通知（性能优化）
+<ResizePanelGroupFlex 
+  onPanelsChange={(changedIndices) => {
+    // 只重新渲染变化的面板
+  }}
+>
+  {/* ... */}
+</ResizePanelGroupFlex>
 ```
 
+详细迁移指南请查看 [策略对比文档](./docs/STRATEGY_COMPARISON.md)
+
 ## 📝 版本历史
 
 查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的版本变更历史。
 
 ## ⚡ 性能优化
 
-查看 [OPTIMIZATION.md](./OPTIMIZATION.md) 了解详细的性能优化措施和配置。
+项目经过多轮性能优化，从初始版本的 30-40 FPS 提升到当前的 50-55 FPS：
+
+- **RAF 优化**：与浏览器渲染同步，每帧计算一次，减少 DOM 操作 50-70%，降低 CPU 占用 30-50%
+- **基于位置的计算**：一次性计算所有面板位置，解决快速拖拽时的位置偏移问题
+- **虚拟化拖拽**：拖拽过程中不操作真实 DOM，减少重排和重绘
+- **面板变化通知**：只重新渲染变化的面板，减少 React 渲染 70%
+- **自动冻结**：自动冻结未变化面板，减少布局计算 85%
+
+详细优化时间线和性能对比请查看：
+- [性能优化时间线](./docs/PERFORMANCE_TIMELINE.md)
+- [构建优化文档](./OPTIMIZATION.md)
+- [节流优化文档](./docs/THROTTLE_OPTIMIZATION.md)
+- [面板变化通知文档](./docs/PANEL_CHANGE_NOTIFICATION.md)
 
 ## 📄 License
 

package/dist/core/virtualNode.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=class{constructor(){Object.defineProperty(this,"virtualNodes",{enumerable:!0,configurable:!0,writable:!0,value:new Map})}createVirtualNode(t,e={},i="horizontal"){if(!t||!t.parentElement)return null;this.virtualNodes.has(t)&&this.removeVirtualNode(t);const a=window.getComputedStyle(t),o=t.style.flex||a.flex||"1",l=t.getBoundingClientRect(),s=t.parentElement.getBoundingClientRect(),n=l.top-s.top+(t.parentElement.scrollTop||0),r=l.left-s.left+(t.parentElement.scrollLeft||0),d=t.cloneNode(!1);d.style.cssText=`\n            flex: ${o};\n            margin: ${a.margin};\n            padding: ${a.padding};\n            border: ${a.border};\n            box-sizing: ${a.boxSizing};\n            pointer-events: none;\n            z-index: 10000;\n            opacity: 0.8;\n            background-color: ${a.backgroundColor||"rgba(0, 123, 255, 0.1)"};\n            overflow: hidden;\n            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);\n            min-width: ${a.minWidth};\n            min-height: ${a.minHeight};\n            width: ${a.width};\n            height: ${a.height};\n        `,e.style&&Object.assign(d.style,e.style),e.className&&(d.className=e.className);const p=t.style.opacity,g=t.style.position,u=t.style.zIndex,y=t.style.top,h=t.style.left,c=t.style.display,f="horizontal"===i?t.offsetWidth:t.offsetHeight;return t.dataset.startSize=String(f),t.style.position="absolute",t.style.top=`${n}px`,t.style.left=`${r}px`,t.style.opacity=p||"0.3",t.style.zIndex="1",t.style.pointerEvents="none",t.dataset.originalOpacity=p||"",t.dataset.originalPosition=g||"",t.dataset.originalZIndex=u||"",t.dataset.originalTop=y||"",t.dataset.originalLeft=h||"",t.dataset.originalDisplay=c||"",t.parentElement.insertBefore(d,t),this.virtualNodes.set(t,d),d}updateVirtualNode(t,e,i){const a=this.virtualNodes.get(t);if(!a)return;const o="horizontal"===i?"width":"height";a.style[o]=`${e}px`}updateVirtualNodePosition(t,e,i){const a=this.virtualNodes.get(t);if(!a)return;const o="horizontal"===i?"left":"top";a.style[o]=`${e}px`}updateVirtualNodeFlexGrow(t,e,i){const a=this.virtualNodes.get(t);if(!a)return;const o=Math.max(0,Math.round(100*e)/100);a.style.flex=`${o} 1 0`}removeVirtualNode(t){const e=this.virtualNodes.get(t);e&&(void 0!==t.dataset.originalOpacity&&(t.style.opacity=t.dataset.originalOpacity,delete t.dataset.originalOpacity),void 0!==t.dataset.originalPosition&&(t.style.position=t.dataset.originalPosition,delete t.dataset.originalPosition),void 0!==t.dataset.originalZIndex&&(t.style.zIndex=t.dataset.originalZIndex,delete t.dataset.originalZIndex),void 0!==t.dataset.originalTop&&(t.style.top=t.dataset.originalTop,delete t.dataset.originalTop),void 0!==t.dataset.originalLeft&&(t.style.left=t.dataset.originalLeft,delete t.dataset.originalLeft),void 0!==t.dataset.originalDisplay&&(t.style.display=t.dataset.originalDisplay,delete t.dataset.originalDisplay),void 0!==t.dataset.startSize&&delete t.dataset.startSize,t.style.pointerEvents="",e.parentElement&&e.parentElement.removeChild(e),this.virtualNodes.delete(t))}applyToRealNode(t,e,i){const a="horizontal"===i?"width":"height";t.style[a]=`${e}px`}removeAllVirtualNodes(){Array.from(this.virtualNodes.keys()).forEach(t=>{this.removeVirtualNode(t)}),this.virtualNodes.clear()}hasVirtualNode(t){return this.virtualNodes.has(t)}getVirtualNode(t){return this.virtualNodes.get(t)||null}destroy(){this.removeAllVirtualNodes()}};
+//# sourceMappingURL=virtualNode.js.map

package/dist/core/virtualNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualNode.js","sources":["../../src/core/virtualNode.ts"],"sourcesContent":[null],"names":["constructor","Object","defineProperty","this","value","Map","createVirtualNode","originalEl","config","direction","parentElement","virtualNodes","has","removeVirtualNode","computedStyle","window","getComputedStyle","originalFlex","style","flex","rect","getBoundingClientRect","parentRect","top","scrollTop","left","scrollLeft","virtualEl","cloneNode","cssText","margin","padding","border","boxSizing","backgroundColor","minWidth","minHeight","width","height","assign","className","originalOpacity","opacity","originalPosition","position","originalZIndex","zIndex","originalTop","originalLeft","originalDisplay","display","startSize","offsetWidth","offsetHeight","dataset","String","pointerEvents","insertBefore","set","updateVirtualNode","size","get","sizeProperty","updateVirtualNodePosition","newPosition","positionProperty","updateVirtualNodeFlexGrow","grow","_direction","roundedGrow","Math","max","round","undefined","removeChild","delete","applyToRealNode","finalSize","removeAllVirtualNodes","Array","from","keys","forEach","clear","hasVirtualNode","getVirtualNode","destroy"],"mappings":"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"}

package/dist/esm/core/virtualNode.js

@@ -0,0 +1,2 @@
+class t{constructor(){Object.defineProperty(this,"virtualNodes",{enumerable:!0,configurable:!0,writable:!0,value:new Map})}createVirtualNode(t,e={},i="horizontal"){if(!t||!t.parentElement)return null;this.virtualNodes.has(t)&&this.removeVirtualNode(t);const a=window.getComputedStyle(t),o=t.style.flex||a.flex||"1",l=t.getBoundingClientRect(),s=t.parentElement.getBoundingClientRect(),n=l.top-s.top+(t.parentElement.scrollTop||0),r=l.left-s.left+(t.parentElement.scrollLeft||0),d=t.cloneNode(!1);d.style.cssText=`\n            flex: ${o};\n            margin: ${a.margin};\n            padding: ${a.padding};\n            border: ${a.border};\n            box-sizing: ${a.boxSizing};\n            pointer-events: none;\n            z-index: 10000;\n            opacity: 0.8;\n            background-color: ${a.backgroundColor||"rgba(0, 123, 255, 0.1)"};\n            overflow: hidden;\n            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);\n            min-width: ${a.minWidth};\n            min-height: ${a.minHeight};\n            width: ${a.width};\n            height: ${a.height};\n        `,e.style&&Object.assign(d.style,e.style),e.className&&(d.className=e.className);const g=t.style.opacity,p=t.style.position,h=t.style.zIndex,y=t.style.top,u=t.style.left,c=t.style.display,f="horizontal"===i?t.offsetWidth:t.offsetHeight;return t.dataset.startSize=String(f),t.style.position="absolute",t.style.top=`${n}px`,t.style.left=`${r}px`,t.style.opacity=g||"0.3",t.style.zIndex="1",t.style.pointerEvents="none",t.dataset.originalOpacity=g||"",t.dataset.originalPosition=p||"",t.dataset.originalZIndex=h||"",t.dataset.originalTop=y||"",t.dataset.originalLeft=u||"",t.dataset.originalDisplay=c||"",t.parentElement.insertBefore(d,t),this.virtualNodes.set(t,d),d}updateVirtualNode(t,e,i){const a=this.virtualNodes.get(t);if(!a)return;const o="horizontal"===i?"width":"height";a.style[o]=`${e}px`}updateVirtualNodePosition(t,e,i){const a=this.virtualNodes.get(t);if(!a)return;const o="horizontal"===i?"left":"top";a.style[o]=`${e}px`}updateVirtualNodeFlexGrow(t,e,i){const a=this.virtualNodes.get(t);if(!a)return;const o=Math.max(0,Math.round(100*e)/100);a.style.flex=`${o} 1 0`}removeVirtualNode(t){const e=this.virtualNodes.get(t);e&&(void 0!==t.dataset.originalOpacity&&(t.style.opacity=t.dataset.originalOpacity,delete t.dataset.originalOpacity),void 0!==t.dataset.originalPosition&&(t.style.position=t.dataset.originalPosition,delete t.dataset.originalPosition),void 0!==t.dataset.originalZIndex&&(t.style.zIndex=t.dataset.originalZIndex,delete t.dataset.originalZIndex),void 0!==t.dataset.originalTop&&(t.style.top=t.dataset.originalTop,delete t.dataset.originalTop),void 0!==t.dataset.originalLeft&&(t.style.left=t.dataset.originalLeft,delete t.dataset.originalLeft),void 0!==t.dataset.originalDisplay&&(t.style.display=t.dataset.originalDisplay,delete t.dataset.originalDisplay),void 0!==t.dataset.startSize&&delete t.dataset.startSize,t.style.pointerEvents="",e.parentElement&&e.parentElement.removeChild(e),this.virtualNodes.delete(t))}applyToRealNode(t,e,i){const a="horizontal"===i?"width":"height";t.style[a]=`${e}px`}removeAllVirtualNodes(){Array.from(this.virtualNodes.keys()).forEach(t=>{this.removeVirtualNode(t)}),this.virtualNodes.clear()}hasVirtualNode(t){return this.virtualNodes.has(t)}getVirtualNode(t){return this.virtualNodes.get(t)||null}destroy(){this.removeAllVirtualNodes()}}export{t as default};
+//# sourceMappingURL=virtualNode.js.map

package/dist/esm/core/virtualNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualNode.js","sources":["../../../src/core/virtualNode.ts"],"sourcesContent":[null],"names":["VirtualNodeManager","constructor","Object","defineProperty","this","value","Map","createVirtualNode","originalEl","config","direction","parentElement","virtualNodes","has","removeVirtualNode","computedStyle","window","getComputedStyle","originalFlex","style","flex","rect","getBoundingClientRect","parentRect","top","scrollTop","left","scrollLeft","virtualEl","cloneNode","cssText","margin","padding","border","boxSizing","backgroundColor","minWidth","minHeight","width","height","assign","className","originalOpacity","opacity","originalPosition","position","originalZIndex","zIndex","originalTop","originalLeft","originalDisplay","display","startSize","offsetWidth","offsetHeight","dataset","String","pointerEvents","insertBefore","set","updateVirtualNode","size","get","sizeProperty","updateVirtualNodePosition","newPosition","positionProperty","updateVirtualNodeFlexGrow","grow","_direction","roundedGrow","Math","max","round","undefined","removeChild","delete","applyToRealNode","finalSize","removeAllVirtualNodes","Array","from","keys","forEach","clear","hasVirtualNode","getVirtualNode","destroy"],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -1,3 +1,7 @@
-export { ResizePanelGroup as ResizablePanelGroup, ResizePanelGroup as ResizeablePanelGroup } from './components/ResizePanelGroup/index.js';
-export { ResizePanel as ResizablePanel, ResizePanel as ResizeablePanel } from './components/ResizePanel/index.js';
-export { PanelInfo, ResizeAbleCoreOptions, ResizeDirection, VirtualConfig, VirtualNodeConfig } from './types/index.js';
+export { ResizePanelGroup as ResizablePanelGroup, ResizePanelGroup, ResizePanelGroupProps, ResizePanelGroup as ResizeablePanelGroup } from './strategies/basic/components/ResizePanelGroup/index.js';
+export { ResizePanel as ResizablePanel, ResizePanel, ResizePanelProps, ResizePanel as ResizeablePanel } from './strategies/basic/components/ResizePanel/index.js';
+export { ResizeHandle, ResizeHandleProps } from './strategies/basic/components/ResizeHandle/index.js';
+export { ResizableContext, ResizableContextValue, useResizableContext } from './strategies/basic/context.js';
+export { ResizePanelGroupFlex, ResizePanelGroupFlexProps } from './strategies/flex/components/ResizePanelGroupFlex/index.js';
+export { ResizeHandleFlex, ResizeHandleFlexProps } from './strategies/flex/components/ResizeHandleFlex/index.js';
+export { OptimizationStrategy, PanelInfo, ResizeAbleCoreOptions, ResizeDirection, VirtualConfig, VirtualNodeConfig } from './types/index.js';

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export{ResizePanelGroup as ResizablePanelGroup,ResizePanelGroup as ResizeablePanelGroup}from"./components/ResizePanelGroup/index.js";export{ResizePanel as ResizablePanel,ResizePanel as ResizeablePanel}from"./components/ResizePanel/index.js";
+export{ResizePanelGroup as ResizablePanelGroup,ResizePanelGroup,ResizePanelGroup as ResizeablePanelGroup}from"./strategies/basic/components/ResizePanelGroup/index.js";export{ResizePanel as ResizablePanel,ResizePanel,ResizePanel as ResizeablePanel}from"./strategies/basic/components/ResizePanel/index.js";export{ResizeHandle}from"./strategies/basic/components/ResizeHandle/index.js";export{ResizePanelGroupFlex}from"./strategies/flex/components/ResizePanelGroupFlex/index.js";export{ResizeHandleFlex}from"./strategies/flex/components/ResizeHandleFlex/index.js";export{ResizableContext,useResizableContext}from"./strategies/basic/context.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/strategies/basic/components/ResizeHandle/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ResizeDirection } from '../../../../types/index.js';
+
+/**
+ * 拖拽手柄组件（常规策略）
+ * 负责处理面板之间的拖拽调整功能
+ * 使用 ResizeAbleCore（常规策略）
+ */
+
+interface ResizeHandleRenderProps {
+    prePanelIndex: number;
+    nextPanelIndex: number;
+    direction: ResizeDirection;
+    isResizing?: boolean;
+}
+interface ResizeHandleProps {
+    prePanelIndex: number;
+    nextPanelIndex: number;
+    direction: ResizeDirection;
+    renderHandle?: (props: ResizeHandleRenderProps) => React.ReactNode;
+}
+declare const ResizeHandle: React.FC<ResizeHandleProps>;
+
+export { ResizeHandle };
+export type { ResizeHandleProps, ResizeHandleRenderProps };

package/dist/esm/strategies/basic/components/ResizeHandle/index.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{useRef as n,useState as t,useEffect as r}from"react";import l from"../../resizeAble.js";import{useResizableContext as o}from"../../context.js";const i=({prePanelIndex:i,nextPanelIndex:u,direction:a,renderHandle:c})=>{const s=n(null),d=n(null),{getPanelInfo:m,panelCount:p,virtualConfig:f}=o(),[x,v]=t(!1);r(()=>{if(!s.current)return;const e=m(i),n=m(u);if(!e||!n)return;const t=s.current?"horizontal"===a?s.current.offsetWidth:s.current.offsetHeight:10;d.current=new l({prePanelEl:e.panelEl,nextPanelEl:n.panelEl,getPanelInfo:m,prePanelIndex:i,nextPanelIndex:u,direction:a,virtualEnabled:f.enabled||!1,virtualConfig:{style:f.style,className:f.className},handleSize:t});const r=s.current;if(!r)return;let o=!1,c=0,p=0,x=null;const z=e=>{e.preventDefault(),e.stopPropagation(),o=!0,v(!0),c="horizontal"===a?e.clientX:e.clientY,p=0,null!==x&&(cancelAnimationFrame(x),x=null),d.current&&d.current.startResize()},h=()=>{o&&d.current?(d.current.onResize(p),x=null):x=null},E=e=>{if(!o||!d.current)return;const n="horizontal"===a?e.clientX:e.clientY;p=n-c,null===x&&(x=requestAnimationFrame(h))},P=()=>{o&&d.current&&(null!==x&&(cancelAnimationFrame(x),x=null),d.current.onResize(p),o=!1,v(!1),d.current.endResize())};return r.addEventListener("mousedown",z),document.addEventListener("mousemove",E),document.addEventListener("mouseup",P),()=>{r.removeEventListener("mousedown",z),document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",P),null!==x&&(cancelAnimationFrame(x),x=null),d.current&&(d.current.destroy(),d.current=null)}},[i,u,a,m,p,f]);const z="horizontal"===a,h=c?c({prePanelIndex:i,nextPanelIndex:u,direction:a,isResizing:x}):null;return e("div",{ref:s,style:{position:"relative",width:z?"10px":"100%",height:z?"100%":"10px",backgroundColor:c?"transparent":"#000",cursor:z?"ew-resize":"ns-resize",zIndex:1e3,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"},children:h})};export{i as ResizeHandle};
+//# sourceMappingURL=index.js.map

package/dist/esm/strategies/basic/components/ResizeHandle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/strategies/basic/components/ResizeHandle/index.tsx"],"sourcesContent":[null],"names":["ResizeHandle","prePanelIndex","nextPanelIndex","direction","renderHandle","handleRef","useRef","coreInstanceRef","getPanelInfo","panelCount","virtualConfig","useResizableContext","isResizing","setIsResizing","useState","useEffect","current","prePanelInfo","nextPanelInfo","handleSize","offsetWidth","offsetHeight","ResizeAbleCore","prePanelEl","panelEl","nextPanelEl","virtualEnabled","enabled","style","className","handleEl","startPos","currentDelta","rafId","startResize","e","preventDefault","stopPropagation","clientX","clientY","cancelAnimationFrame","updatePanelsWithRAF","onResize","onResizeMove","currentPos","requestAnimationFrame","endResize","addEventListener","document","removeEventListener","destroy","isHorizontal","handleContent","_jsx","ref","position","width","height","backgroundColor","cursor","zIndex","flexShrink","display","alignItems","justifyContent","children"],"mappings":"8LAwBO,MAAMA,EAA4C,EACrDC,gBACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAYC,EAAuB,MACnCC,EAAkBD,EAAmD,OACrEE,aAAEA,EAAYC,WAAEA,EAAUC,cAAEA,GAAkBC,KAC7CC,EAAYC,GAAiBC,GAAS,GAE7CC,EAAU,KACN,IAAKV,EAAUW,QACX,OAIJ,MAAMC,EAAeT,EAAaP,GAC5BiB,EAAgBV,EAAaN,GACnC,IAAIe,IAAiBC,EAEjB,OAIJ,MAAMC,EAAad,EAAUW,QACR,eAAdb,EACGE,EAAUW,QAAQI,YAClBf,EAAUW,QAAQK,aACQ,GAGpCd,EAAgBS,QAAU,IAAIM,EAAe,CACzCC,WAAYN,EAAaO,QACzBC,YAAaP,EAAcM,QAC3BhB,eACAP,gBACAC,iBACAC,YACAuB,eAAgBhB,EAAciB,UAAW,EACzCjB,cAAe,CACXkB,MAAOlB,EAAckB,MACrBC,UAAWnB,EAAcmB,WAE7BV,eAIJ,MAAMW,EAAWzB,EAAUW,QAC3B,IAAKc,EAAU,OAEf,IAAIlB,GAAa,EACbmB,EAAW,EACXC,EAAe,EACfC,EAAuB,KAE3B,MAAMC,EAAeC,IACjBA,EAAEC,iBACFD,EAAEE,kBACFzB,GAAa,EACbC,GAAc,GACdkB,EAAyB,eAAd5B,EAA6BgC,EAAEG,QAAUH,EAAEI,QACtDP,EAAe,EACD,OAAVC,IACAO,qBAAqBP,GACrBA,EAAQ,MAER1B,EAAgBS,SAChBT,EAAgBS,QAAQkB,eAU1BO,EAAsB,KACnB7B,GAAeL,EAAgBS,SAQpCT,EAAgBS,QAAQ0B,SAASV,GAEjCC,EAAQ,MATJA,EAAQ,MAYVU,EAAgBR,IAClB,IAAIvB,IAAeL,EAAgBS,QAAS,OAC5C,MAAM4B,EAA2B,eAAdzC,EAA6BgC,EAAEG,QAAUH,EAAEI,QAE9DP,EAAeY,EAAab,EAId,OAAVE,IACAA,EAAQY,sBAAsBJ,KAIhCK,EAAY,KACXlC,GAAcL,EAAgBS,UAEf,OAAViB,IACAO,qBAAqBP,GACrBA,EAAQ,MAGZ1B,EAAgBS,QAAQ0B,SAASV,GACjCpB,GAAa,EACbC,GAAc,GACdN,EAAgBS,QAAQ8B,cAQhC,OAJAhB,EAASiB,iBAAiB,YAAab,GACvCc,SAASD,iBAAiB,YAAaJ,GACvCK,SAASD,iBAAiB,UAAWD,GAE9B,KAEHhB,EAASmB,oBAAoB,YAAaf,GAC1Cc,SAASC,oBAAoB,YAAaN,GAC1CK,SAASC,oBAAoB,UAAWH,GAG1B,OAAVb,IACAO,qBAAqBP,GACrBA,EAAQ,MAIT1B,EAAgBS,UACfT,EAAgBS,QAAQkC,UACxB3C,EAAgBS,QAAU,QAGnC,CAACf,EAAeC,EAAgBC,EAAWK,EAAcC,EAAYC,IAExE,MAAMyC,EAA6B,eAAdhD,EAGfiD,EAAgBhD,EAAeA,EAAa,CAC9CH,gBACAC,iBACAC,YACAS,eACC,KAEL,OACIyC,EAAA,MAAA,CACIC,IAAKjD,EACLuB,MAAO,CACH2B,SAAU,WACVC,MAAOL,EAAe,OAAS,OAC/BM,OAAQN,EAAe,OAAS,OAChCO,gBAAiBtD,EAAe,cAAgB,OAChDuD,OAAQR,EAAe,YAAc,YACrCS,OAAQ,IACRC,WAAY,EACZC,QAAS,OACTC,WAAY,SACZC,eAAgB,UACnBC,SAEAb"}

package/dist/esm/{components → strategies/basic/components}/ResizePanel/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 
 /**
- * 可调整大小的面板组件
+ * 可调整大小的面板组件（常规策略）
  * 负责展示面板内容和管理面板的注册/注销
+ * 使用数组存储，适合面板数量较少的场景
  */
 
 interface ResizePanelProps {

package/dist/esm/strategies/basic/components/ResizePanel/index.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{useRef as e,useEffect as t}from"react";import{useResizableContext as i}from"../../context.js";const n=({children:n,minSize:o=100})=>{const c=e(null),d=e(-1),{registerPanel:l,unregisterPanel:h,direction:m}=i();return t(()=>{if(!c.current)return;const r=c.current;return d.current=l(r,o),()=>{h(r)}},[o,l,h]),r("div",{ref:c,style:{flex:1,minWidth:"horizontal"===m?o:void 0,minHeight:"vertical"===m?o:void 0,width:"auto",overflow:"hidden",position:"relative"},children:r("div",{style:{height:"100%",padding:16},children:n})})};export{n as ResizePanel};
+//# sourceMappingURL=index.js.map

package/dist/esm/strategies/basic/components/ResizePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/strategies/basic/components/ResizePanel/index.tsx"],"sourcesContent":[null],"names":["ResizePanel","children","minSize","panelRef","useRef","panelIndexRef","registerPanel","unregisterPanel","direction","useResizableContext","useEffect","current","panelEl","_jsx","ref","style","flex","minWidth","undefined","minHeight","width","overflow","position","height","padding"],"mappings":"6IAcO,MAAMA,EAA0C,EACnDC,WACAC,UAAU,QAGV,MAAMC,EAAWC,EAAuB,MAClCC,EAAgBD,OAChBE,cAAEA,EAAaC,gBAAEA,EAAeC,UAAEA,GAAcC,IAWtD,OATAC,EAAU,KACN,IAAIP,EAASQ,QAAS,OACtB,MAAMC,EAAUT,EAASQ,QAEzB,OADAN,EAAcM,QAAUL,EAAcM,EAASV,GACxC,KACHK,EAAgBK,KAErB,CAACV,EAASI,EAAeC,IAGxBM,EAAA,MAAA,CACIC,IAAKX,EACLY,MAAO,CACHC,KAAM,EACNC,SAAwB,eAAdT,EAA6BN,OAAUgB,EACjDC,UAAyB,aAAdX,EAA2BN,OAAUgB,EAChDE,MAAO,OACPC,SAAU,SACVC,SAAU,YACbrB,SAEDY,SAAKE,MAAO,CAACQ,OAAQ,OAAQC,QAAS,IAAGvB,SACpCA"}

package/dist/{components → esm/strategies/basic/components}/ResizePanelGroup/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { ResizeDirection, VirtualConfig } from '../../types/index.js';
+import { ResizeHandleRenderProps } from '../ResizeHandle/index.js';
+import { ResizeDirection, VirtualConfig } from '../../../../types/index.js';
 
 /**
- * 可调整大小的面板组容器组件
- * 负责管理多个面板的布局和拖拽手柄的插入
+ * 可调整大小的面板组容器组件（常规策略）
+ * 使用数组存储面板信息，适合面板数量较少的场景
  */
 
 interface ResizePanelGroupProps {
@@ -12,6 +13,7 @@ interface ResizePanelGroupProps {
     virtual?: boolean;
     virtualConfig?: VirtualConfig;
     style?: React.CSSProperties;
+    renderHandle?: (props: ResizeHandleRenderProps) => React.ReactNode;
 }
 declare const ResizePanelGroup: React.FC<ResizePanelGroupProps>;
 

package/dist/esm/strategies/basic/components/ResizePanelGroup/index.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import r,{useRef as n,useState as t,useCallback as l}from"react";import{ResizableContext as i}from"../../context.js";import{ResizeHandle as o}from"../ResizeHandle/index.js";const u=({children:u,direction:c="horizontal",style:a,virtual:d=!1,virtualConfig:s={},renderHandle:h})=>{const f=n([]),p=n(new Map),[g,m]=t(0),x=l((e,r)=>{const n=p.current.get(e);if(void 0!==n)return f.current[n]={panelEl:e,minSize:r},n;let t=-1;for(let e=0;e<f.current.length;e++)if(!f.current[e]){t=e;break}return-1===t?(t=f.current.length,f.current.push({panelEl:e,minSize:r})):f.current[t]={panelEl:e,minSize:r},p.current.set(e,t),m(f.current.filter(e=>null!=e).length),t},[]),v=l(e=>{const r=p.current.get(e);void 0!==r&&(f.current[r]=null,p.current.delete(e),m(f.current.filter(e=>null!=e).length))},[]),P=l(e=>{if(e<0||e>=f.current.length)return null;const r=f.current[e];return r&&r.panelEl?r:null},[]),z=l(e=>p.current.get(e)??-1,[]),E=r.Children.toArray(u),I=[];E.forEach((r,n)=>{I.push(r),n<E.length-1&&I.push(e(o,{prePanelIndex:n,nextPanelIndex:n+1,direction:c,renderHandle:h},`handle-${n}`))});const y={enabled:d,...s},C={panelCount:g,registerPanel:x,unregisterPanel:v,getPanelInfo:P,getPanelIndex:z,direction:c,panelInfos:f.current.filter(e=>null!=e),virtualConfig:y};return e(i.Provider,{value:C,children:e("div",{style:{display:"flex",flexDirection:"horizontal"===c?"row":"column",height:"100%",position:"relative",...a},children:I})})};export{u as ResizePanelGroup};
+//# sourceMappingURL=index.js.map

package/dist/esm/strategies/basic/components/ResizePanelGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/strategies/basic/components/ResizePanelGroup/index.tsx"],"sourcesContent":[null],"names":["ResizePanelGroup","children","direction","style","virtual","virtualConfig","renderHandle","panelInfosRef","useRef","elementToIndexMapRef","Map","panelCount","setPanelCount","useState","registerPanel","useCallback","panelEl","minSize","existingIndex","current","get","undefined","index","i","length","push","set","filter","p","unregisterPanel","delete","getPanelInfo","info","getPanelIndex","childrenArray","React","Children","toArray","panelsWithHandles","forEach","child","_jsx","ResizeHandle","prePanelIndex","nextPanelIndex","mergedVirtualConfig","enabled","contextValue","panelInfos","ResizableContext","Provider","value","display","flexDirection","height","position"],"mappings":"qNAkBO,MAAMA,EAAoD,EAC7DC,WACAC,YAAY,aACZC,QACAC,WAAU,EACVC,gBAAgB,CAAA,EAChBC,mBAKA,MAAMC,EAAgBC,EAA6B,IAC7CC,EAAuBD,EAAiC,IAAIE,MAC3DC,EAAYC,GAAiBC,EAAS,GAEvCC,EAAgBC,EAAY,CAACC,EAAsBC,KAErD,MAAMC,EAAgBT,EAAqBU,QAAQC,IAAIJ,GACvD,QAAsBK,IAAlBH,EAGA,OADAX,EAAcY,QAAQD,GAAiB,CAAEF,UAASC,WAC3CC,EAIX,IAAII,GAAQ,EACZ,IAAK,IAAIC,EAAI,EAAGA,EAAIhB,EAAcY,QAAQK,OAAQD,IAC9C,IAAKhB,EAAcY,QAAQI,GAAI,CAC3BD,EAAQC,EACR,KACJ,CAcJ,OAXc,IAAVD,GAEAA,EAAQf,EAAcY,QAAQK,OAC9BjB,EAAcY,QAAQM,KAAK,CAAET,UAASC,aAGtCV,EAAcY,QAAQG,GAAS,CAAEN,UAASC,WAG9CR,EAAqBU,QAAQO,IAAIV,EAASM,GAC1CV,EAAcL,EAAcY,QAAQQ,OAAOC,GAAKA,SAA+BJ,QACxEF,GACR,IAEGO,EAAkBd,EAAaC,IACjC,MAAMM,EAAQb,EAAqBU,QAAQC,IAAIJ,QACjCK,IAAVC,IAGAf,EAAcY,QAAQG,GAAS,KAC/Bb,EAAqBU,QAAQW,OAAOd,GACpCJ,EAAcL,EAAcY,QAAQQ,OAAOC,GAAKA,SAA+BJ,UAEpF,IAEGO,EAAehB,EAAaO,IAC9B,GAAIA,EAAQ,GAAKA,GAASf,EAAcY,QAAQK,OAC5C,OAAO,KAEX,MAAMQ,EAAOzB,EAAcY,QAAQG,GAEnC,OAAQU,GAAQA,EAAKhB,QAAWgB,EAAO,MACxC,IAEGC,EAAgBlB,EAAaC,GACxBP,EAAqBU,QAAQC,IAAIJ,KAAY,EACrD,IAEGkB,EAAgBC,EAAMC,SAASC,QAAQpC,GACvCqC,EAAuC,GAE7CJ,EAAcK,QAAQ,CAACC,EAAOlB,KAC1BgB,EAAkBb,KAAKe,GAGnBlB,EAAQY,EAAcV,OAAS,GAC/Bc,EAAkBb,KACdgB,EAACC,EAAY,CAETC,cAAerB,EACfsB,eAAgBtB,EAAQ,EACxBpB,UAAWA,EACXI,aAAcA,GAJT,UAAUgB,QAW/B,MAAMuB,EAAqC,CACvCC,QAAS1C,KACNC,GAGD0C,EAAsC,CACxCpC,WAAYA,EACZG,gBACAe,kBACAE,eACAE,gBACA/B,YACA8C,WAAYzC,EAAcY,QAAQQ,OAAOC,GAAKA,SAC9CvB,cAAewC,GAGnB,OACIJ,EAACQ,EAAiBC,SAAQ,CAACC,MAAOJ,EAAY9C,SAC1CwC,EAAA,MAAA,CAAKtC,MAAO,CACJiD,QAAS,OACTC,cAA6B,eAAdnD,EAA6B,MAAQ,SACpDoD,OAAQ,OACRC,SAAU,cACPpD,GACVF,SACIqC"}

package/dist/esm/strategies/basic/context.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { PanelInfo, ResizeDirection, VirtualConfig, FlexStrategyConfig } from '../../types/index.js';
+
+/**
+ * Resizable Context 接口定义（常规策略）
+ */
+interface ResizableContextValue {
+    panelCount: number;
+    registerPanel: (panelEl: HTMLElement, minSize: number) => number;
+    unregisterPanel: (panelEl: HTMLElement) => void;
+    getPanelInfo: (index: number) => PanelInfo | null;
+    getPanelIndex: (panelEl: HTMLElement) => number;
+    direction: ResizeDirection;
+    panelInfos: PanelInfo[];
+    virtualConfig: VirtualConfig;
+    onPanelsChange?: (changedIndices: Set<number>) => void;
+    flexConfig?: FlexStrategyConfig;
+}
+/**
+ * Resizable Context
+ */
+declare const ResizableContext: React.Context<ResizableContextValue>;
+/**
+ * 使用 Resizable Context 的 Hook
+ */
+declare const useResizableContext: () => ResizableContextValue;
+
+export { ResizableContext, useResizableContext };
+export type { ResizableContextValue };