gem-panel
一个自定义元素，让其能创建具备类似 Adobe After Effects 的布局
// 需要一个对象来表示布局，以便保存布局
// 网格布局，单元格子母命名
// 使用命令式，因为声明式会渲染所有内容
用例：
- 视频编辑器
- 后台数据看板
需要实现的主要功能：
- 大小能调整
- 拖拽布局（合并，拆分，独立） // 边缘检测
- 布局功能可以限制 // 独占窗口
- 主题 // 颜色，字体，边距，背景
技术要点：
- ✅ grid 轴线简单调整
- ✅ 移除 window
- ✅ panel 顺序调整
- ✅ 从 grid 中转换 window 为独立 window
- ✅ 拖动 panel 视觉效果 // 临时独立 window
- ✅ panel 移动 window
- ✅ 缓存布局
- ✅ 新建 grid 轴线以及调整 grid
- ✅ 独立 window 尺寸调整
- ✅ panel 命令菜单
- ✅ 解除 window 布局宽度限制 // grid cell overflow: visible 引发
- ✅ grid 轴线越线调整
- ✅ grid 轴线调整限制
- ✅ 独立 window 调整限制
- ✅ window 合并、独立时 panel 内容不要重新加载
- ✅ window 悬停检测
- ✅ API 设计
- ✅ 子菜单
- window 支持 px 宽度 // 分割窗口、调整窗口
- Safari 兼容性问题
- 检测布局崩溃
root 元素定义网格
window 元素指定 row、col 位置，没指定时进行独立布局，独立 window 默认尺寸居中依次偏移，x、y、w、h 绝对定位
panel 放在 window 中
Docs
- 简介 // 是个什么项目，什么目的，解决什么问题，怎么使用
- 布局 // 初始化，缓存
- 样式 // 主题，part，面板特定样式
- 异步加载
- 上下文菜单
- 动态面板
- 框架中使用
- 限制 // 布局，panel 切换时会卸载，兼容性
- API
Test
- utils
- gem-panel 属性/方法/UI