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 轴线越线调整 // 但还是存到 window gap 导致的抖动
  • ✅ grid 轴线调整限制
  • ✅ 独立 window 调整限制
  • ✅ window 合并、独立时 panel 内容不要重新加载
  • ✅ window 悬停检测
  • 兼容性问题
  • 检测布局崩溃

root 元素定义网格
window 元素指定 row、col 位置,没指定时进行独立布局,独立 window 默认尺寸居中依次偏移,x、y、w、h 绝对定位
cell 放在 window 中