简介

Tiling Layout 是一个 React 布局库。把容器交给它,你会得到一组可以分割、合并、停靠、调整大小的区域,就像 VS Code 的编辑器分组那样。每个区域可以承载任意的 React 内容。

在布局之外,它还提供一层与渲染无关的数据管理:布局状态、每个区域里的实例状态、跨区域共享的数据,都收敛成一份可序列化的快照。撤销重做、持久化、多工作区,都建立在这份快照上。

为什么布局要做成数据

多数布局组件把状态藏在内部,你只能通过组件 API 间接操作。这个库反着来:布局就是一组矩形区域——每块在哪里、多大,全是一份纯数据——配合一小组纯函数(split、joinAreas、snapCoord)对它做变换;分界线由相邻关系即时推导,不存储。渲染器 LayoutViewDom 只是这份数据的其中一个视图,把比例坐标换算成百分比定位到 DOM 上。

这样设计带来的几个直接结果:

• 布局可以被序列化、存档、导出成 JSON,再原样恢复,区域 id 在恢复后保持不变。
• 你可以在代码里做和鼠标手势一模一样的变换,比如实现预设布局模板。
• 布局操作和历史记录(undo/redo)不需要渲染器参与,换一套渲染层也能复用。

三层数据

数据管理分三层,边界按"谁和谁同步"划开:

• 布局几何(layoutStore):每个区域的位置与大小(矩形平铺)。这是布局操作的直接对象。
• 每区域实例状态(areaStore):按区域 id 存放,跟着布局操作走——分割时新区域克隆来源的状态,内容交换时两边状态互换。
• 共享场景(sceneStore):按身份全局一份,所有视图读同一个对象。一个视图里改,其它视图立刻同步。

日常使用大多走 useLayoutData() 这一个门面,三层数据和多工作区都从这里读写;layoutBus.onChange 提供一个"数据实质变了"的订阅信号,给持久化这类不参与渲染的代码用。

useLayoutData(门面) ── layoutBus(订阅)
   ├─ layoutStore   ➜ 布局几何 + 状态机 + undo 历史
   ├─ areaStore     ➜ 每区域实例状态(按 areaId)
   ├─ sceneStore    ➜ 共享场景(按身份)
   └─ workspaces    ➜ 多布局,每布局一份完整快照

什么时候不适合

如果你的需求只是把页面切成固定的几栏,用 CSS grid 更省事。这个库的价值在布局会被用户实时改变的场景——编辑器、工单看板、可定制仪表盘——以及你需要把用户的布局当数据保存和恢复的时候。