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