react-resize-demo 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,76 @@
+# Changelog
+
+所有重要的项目变更都会记录在此文件中。
+
+格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/)，
+版本号遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/)。
+
+## [1.0.3] - 2026-01-09
+
+### 新增
+- ✨ 添加虚拟化拖拽功能
+  - 支持虚拟化模式，拖拽时创建虚拟节点框架，拖拽结束后再应用到真实节点
+  - 虚拟化模式下，拖拽过程中只更新虚拟节点尺寸，不影响真实节点，提升性能
+  - 支持自定义虚拟节点样式和类名
+  - 默认关闭虚拟化，保持向后兼容
+
+### 改进
+- 🔧 优化虚拟节点位置计算逻辑
+  - 修复虚拟节点位置计算，确保虚拟节点边框正确对应真实节点边框位置
+  - 在位置计算中考虑拖拽器（ResizeHandle）的宽度/高度
+  - 修复最后一个面板位置计算错误的问题
+
+### 技术改进
+- 🏗️ 模块化虚拟节点管理
+  - 创建独立的 `VirtualNodeManager` 类管理虚拟节点的创建、更新、销毁
+  - 虚拟节点逻辑完全模块化，便于维护和扩展
+  - 优化虚拟节点创建性能，只复制必要的 DOM 结构
+
+## [1.0.2] - 2025-01-08
+
+### 修复
+- 修复了垂直布局时无法正常调整的问题
+  - 将面板命名从 left/right 改为 pre/next，使代码更通用，适用于水平和垂直两种布局方向
+  - 修复了垂直布局时错误地设置 width 的问题，现在根据 direction 动态设置 width 或 height
+  - 水平布局：pre 为左侧面板，next 为右侧面板，调整 width
+  - 垂直布局：pre 为上方面板，next 为下方面板，调整 height
+
+### 重构
+- 重构了核心类 `ResizeAbleCore` 的命名体系
+  - `leftPanelEl/rightPanelEl` → `prePanelEl/nextPanelEl`
+  - `leftPanelIndex/rightPanelIndex` → `prePanelIndex/nextPanelIndex`
+  - `adjustPanelsRight/adjustPanelsLeft` → `adjustPanelsNext/adjustPanelsPre`
+- 更新了 `ResizeHandle` 组件的 props 命名
+  - `leftPanelIndex/rightPanelIndex` → `prePanelIndex/nextPanelIndex`
+
+## [1.0.1] - 2025-01-08
+
+### 修复
+- 修复了向左拖拽时调整逻辑错误的问题
+  - 之前错误地从后续面板获取空间，现在正确地从前面面板获取空间
+  - 实现了正确的"依次后延"效果
+- 修复了拖拽器初始化时序问题
+  - 解决了 `ResizeHandle` 组件在面板注册完成前执行导致无法获取面板信息的问题
+  - 通过添加 `panelCount` 状态跟踪和依赖检查来确保面板已注册后再初始化拖拽器
+
+### 改进
+- 重构了拖拽器与面板的耦合关系
+  - 将拖拽器从面板内部解耦，作为独立组件插入到面板之间
+  - 拖拽器现在只负责检测移动轨迹，根据方向调整相邻面板的宽度
+  - 实现了拖拽器和选项卡的完全解耦
+
+### 技术改进
+- 优化了 Context 更新机制，使用 `useState` 跟踪面板数量变化
+- 改进了类型定义，修复了 TypeScript 类型错误
+- 优化了依赖项管理，避免不必要的重新渲染
+
+## [1.0.0] - 初始版本
+
+### 新增
+- 初始发布
+- 实现了可调整大小的面板组件 `ResizeablePanel` 和 `ResizeablePanelGroup`
+- 支持水平和垂直方向的布局
+- 支持设置面板最小尺寸
+- 支持拖拽调整相邻面板的宽度/高度
+- 实现了级联调整：当面板达到最小值时，自动从相邻面板获取空间
+

package/README.md

@@ -0,0 +1,257 @@
+# react-resize-demo
+
+一个 React 可调整大小面板组件库，支持水平和垂直方向的布局调整。
+
+## 特性
+
+- ✅ 支持水平和垂直方向的布局
+- ✅ 可拖拽调整相邻面板的宽度/高度
+- ✅ 支持设置面板最小尺寸
+- ✅ 级联调整：当面板达到最小值时，自动从相邻面板获取空间
+- ✅ 拖拽器与面板完全解耦，灵活可扩展
+- ✅ **虚拟化拖拽**：支持虚拟节点模式，拖拽时创建虚拟框架，提升性能
+- ✅ TypeScript 支持
+
+## 安装
+
+```bash
+npm install react-resize-demo
+```
+
+## 使用
+
+```tsx
+import { ResizeablePanelGroup, ResizeablePanel } from 'react-resize-demo';
+
+function App() {
+  return (
+    <div style={{ width: '100%', height: '500px' }}>
+      <ResizeablePanelGroup direction="horizontal">
+        <ResizeablePanel minSize={100} onResize={(width) => console.log(width)}>
+          <div>Panel 1</div>
+        </ResizeablePanel>
+        <ResizeablePanel minSize={200}>
+          <div>Panel 2</div>
+        </ResizeablePanel>
+        <ResizeablePanel minSize={300}>
+          <div>Panel 3</div>
+        </ResizeablePanel>
+      </ResizeablePanelGroup>
+    </div>
+  );
+}
+```
+
+### 垂直布局
+
+```tsx
+<ResizeablePanelGroup direction="vertical" style={{ height: '500px' }}>
+  <ResizeablePanel minSize={100}>
+    <div>顶部面板</div>
+  </ResizeablePanel>
+  <ResizeablePanel minSize={200}>
+    <div>中间面板</div>
+  </ResizeablePanel>
+  <ResizeablePanel minSize={100}>
+    <div>底部面板</div>
+  </ResizeablePanel>
+</ResizeablePanelGroup>
+```
+
+### 虚拟化模式
+
+虚拟化模式可以在拖拽时创建虚拟节点框架，拖拽过程中只更新虚拟节点，拖拽结束后再应用到真实节点。这可以提升性能，特别是在处理复杂内容的面板时。
+
+```tsx
+// 启用虚拟化（使用默认样式）
+<ResizeablePanelGroup virtual={true}>
+  <ResizeablePanel minSize={100}>
+    <div>Panel 1</div>
+  </ResizeablePanel>
+  <ResizeablePanel minSize={200}>
+    <div>Panel 2</div>
+  </ResizeablePanel>
+</ResizeablePanelGroup>
+
+// 启用虚拟化（自定义样式）
+<ResizeablePanelGroup 
+  virtual={true}
+  virtualConfig={{
+    style: { 
+      opacity: 0.5, 
+      border: '2px dashed blue',
+      backgroundColor: 'rgba(0, 123, 255, 0.1)'
+    },
+    className: 'custom-virtual-node'
+  }}
+>
+  <ResizeablePanel minSize={100}>
+    <div>Panel 1</div>
+  </ResizeablePanel>
+  <ResizeablePanel minSize={200}>
+    <div>Panel 2</div>
+  </ResizeablePanel>
+</ResizeablePanelGroup>
+```
+
+## API
+
+### ResizeablePanelGroup
+
+面板组容器组件，用于包裹多个 `ResizeablePanel`。
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | 布局方向 |
+| virtual | `boolean` | `false` | 是否启用虚拟化模式 |
+| virtualConfig | `VirtualConfig` | `{}` | 虚拟化配置（仅在 virtual=true 时生效） |
+| style | `React.CSSProperties` | - | 自定义样式 |
+
+#### VirtualConfig
+
+虚拟化配置对象：
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| enabled | `boolean` | `false` | 是否启用虚拟化（通常通过 `virtual` prop 设置） |
+| style | `React.CSSProperties` | - | 虚拟节点的自定义样式 |
+| className | `string` | - | 虚拟节点的自定义类名 |
+
+### ResizeablePanel
+
+可调整大小的面板组件。
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| minSize | `number` | `100` | 面板最小尺寸（像素） |
+| onResize | `(width: number) => void` | - | 面板尺寸变化时的回调函数 |
+| children | `React.ReactNode` | - | 面板内容 |
+
+## 开发
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 构建库
+
+```bash
+npm run build
+```
+
+### 运行本地Demo
+
+```bash
+npm run demo
+```
+
+这将启动一个开发服务器，你可以在浏览器中查看和测试组件。
+
+### 构建Demo
+
+```bash
+npm run demo:build
+```
+
+## 工作原理
+
+组件通过拖拽器（ResizeHandle）来调整相邻面板的尺寸：
+- **向右拖拽**：扩大左侧面板，缩小右侧面板（如果右侧面板达到最小值，继续从后续面板获取空间）
+- **向左拖拽**：缩小左侧面板，扩大右侧面板（如果左侧面板达到最小值，继续从前面面板获取空间）
+
+拖拽器会自动插入到相邻面板之间，无需手动添加。
+
+### 虚拟化模式
+
+当启用虚拟化模式（`virtual={true}`）时：
+1. **拖拽开始**：为所有相关面板创建虚拟节点框架，虚拟节点覆盖在原节点上
+2. **拖拽中**：只更新虚拟节点的尺寸和位置，真实节点保持不变
+3. **拖拽结束**：将虚拟节点的最终尺寸应用到真实节点，然后清理所有虚拟节点
+
+这种模式可以：
+- 提升性能：拖拽过程中不操作真实 DOM，减少重排和重绘
+- 提供视觉反馈：虚拟节点可以有不同的样式（如半透明、虚线边框等）
+- 适用于复杂内容：当面板内容复杂时，虚拟化可以避免拖拽时的性能问题
+
+## 项目结构
+
+```
+react-resize-demo/
+├── src/                      # 源代码目录
+│   ├── components/           # 组件目录
+│   │   ├── ResizePanel/      # 可调整大小面板组件
+│   │   └── ExampleComponent/ # 示例组件
+│   ├── core/                  # 核心逻辑
+│   │   ├── resizeAble.js      # 拖拽调整核心类
+│   │   └── virtualNode.js     # 虚拟节点管理模块
+│   ├── utils/                 # 工具函数
+│   ├── types/                 # 类型定义
+│   └── index.ts              # 入口文件
+├── demo/                      # 本地测试Demo
+│   ├── App.tsx                # Demo应用
+│   ├── main.tsx               # Demo入口
+│   └── index.html             # HTML模板
+├── dist/                      # 构建输出目录
+├── rollup.config.mjs          # Rollup构建配置
+├── vite.config.ts             # Vite库构建配置
+├── vite.demo.config.ts         # Vite Demo配置
+├── CHANGELOG.md               # 变更日志
+└── package.json               # 项目配置
+```
+
+## 开发
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 构建库
+
+```bash
+npm run build
+```
+
+### 运行本地Demo
+
+```bash
+npm run demo
+```
+
+这将启动一个开发服务器，你可以在浏览器中查看和测试组件。
+
+### 构建Demo
+
+```bash
+npm run demo:build
+```
+
+### 类型检查
+
+```bash
+npm run type-check
+```
+
+### 代码检查
+
+```bash
+npm run lint
+```
+
+## 版本历史
+
+查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的版本变更历史。
+
+## 发布到npm
+
+1. 确保代码已构建：`npm run build`
+2. 更新版本号：`npm version patch|minor|major`
+3. 发布：`npm publish`
+
+## License
+
+MIT
+

package/dist/components/ResizeHandle/index.d.ts

@@ -0,0 +1,8 @@
+export declare const ResizeHandle: ({ onResizeStart, onResize, onResizeEnd, direction, style, }: {
+    onResizeStart: any;
+    onResize: any;
+    onResizeEnd: any;
+    direction?: string | undefined;
+    style: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ResizeHandle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResizeHandle/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI;;;;;;CAM5B,4CA6DA,CAAC"}

package/dist/components/ResizePanel/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface VirtualConfig {
+    enabled?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const ResizeablePanelGroup: React.FC<{
+    children: React.ReactNode;
+    direction?: 'horizontal' | 'vertical';
+    virtual?: boolean;
+    virtualConfig?: VirtualConfig;
+    style?: React.CSSProperties;
+}>;
+export declare const ResizeablePanel: React.FC<{
+    children: React.ReactNode;
+    minSize?: number;
+    onResize?: (width: number) => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ResizePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResizePanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAS7D,MAAM,WAAW,aAAa;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAsBD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B,CA+EA,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAmCA,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface VirtualConfig {
+    enabled?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const ResizeablePanelGroup: React.FC<{
+    children: React.ReactNode;
+    direction?: 'horizontal' | 'vertical';
+    virtual?: boolean;
+    virtualConfig?: VirtualConfig;
+    style?: React.CSSProperties;
+}>;
+declare const ResizeablePanel: React.FC<{
+    children: React.ReactNode;
+    minSize?: number;
+    onResize?: (width: number) => void;
+}>;
+
+export { ResizeablePanel, ResizeablePanelGroup };
+export type { VirtualConfig };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}