React 网格分割布局库

Tiling Layout

分割、合并、停靠、调整大小,开箱即用。布局是一份可序列化的数据—— 撤销、持久化、多工作区都建立在它上面。下面就是真实的库,直接上手玩:

就绪 — 角标 ⌖ 拖拽：同区分割 / 拖到相邻区合并 / Ctrl+拖交换内容 · 拖分界线调整大小 · Ctrl 吸附 · 角标手势中 Tab 切方向 · Esc/右键取消

编辑器#1

0 字 · 本区域独立草稿

目录#2

选中:简介与设计思想 · 每区域独立选中

属性#3

本面板计数(独立)0

共享计数(全部属性面板同步)0

左列按区域隔离,右列所有属性面板读同一份

提示:拖区域角标 ⌖ 分割/合并/交换 · 拖分界线调整大小 · 拖区域头部到另一区域停靠 · 双击标题最大化 · ⚡ 开启自动保存后刷新页面可恢复。

split(s, area, AXIS.V, 0.5)

几何网格加一小组纯函数,代码里做一次 split 和用户拖一次角标效果完全等价。了解 →

useAreaInstance(areaId, type)

实例状态按区域 id 分槽,分割时克隆、交换时互换,自动跟着布局操作迁移。了解 →

useScene((s) => s.mesh)

跨视图共享一份数据:一个视图里改,所有视图同步。独立视角照常各管各的。了解 →

layoutBus.onChange

数据实质变化才触发回调,接上 debounce 就是自动保存;每个工作区独立快照与历史。了解 →

五分钟,渲染出第一个可拖拽的布局。