re-magic-layout

re-magic-layout 是一款基于React框架实现的一款多功能画布，主要使用场景为编排置入其中的组件，致力于成为前端可视化搭建领域最易使用和最易扩展的React画布。

已完成功能 ✨

1. 将传入的子元素，包裹成可拖拽的单元
2. 实现元素的自由拖拽，但是需要有边界（因为画布是有限的，以后再考虑无限画布的方案）
3. 元素的拖拉调整宽高功能
4. 元素拖拽时的辅助线功能
   • 水平辅助线
   • 垂直辅助线
5. 子元素默认位置控制
6. 吸附 Magnetic
   1. 设置阈值，使得子元素能够自动吸附
   2. Draggable 改成 DraggableCore，如果不能完全控制的话，就没法实现自动吸附了 (所以需要人工判断边界？)
   3. 吸附逻辑存在问题！向左移动的时候，应该同时考虑左边界和右边界
   4. 需要补充特殊情况下的考虑，比如移动的时候同时临近水平参考线和垂直参考线，这个时候就需要双向调整

1.0 版本待完成功能 🏗️

由于开发辅助线和吸附功能导致的，需要重新调整的部分

1. 实现画布内元素的多种布局类型
   1. 浮动布局
   2. Flex
   3. 栅格系统
2. 元素的常见配置设计：宽高、层级、边框...
3. 完善画布的模式选择部分，包含初始化、网格、参考线

More：

• 之前实现的时候随便找了一个库实现代码语法高亮，看了一下react-syntax-highlighter的趋势较高，后面改到这个来完成语法高亮的精细化
• highlight 部分的更新

2.0 大版本规划 🚀

1. 多选 (支持多选移动、删除)
2. 框选（鼠标事件的监听，计算框选矩形范围）
3. 快捷键
   1. Command + A 全选
   2. Alt + Click 多选
   3. Command + C & Command + V 复制粘贴功能
4. 矩形重叠检测（通过算法，强制不让卡片重叠）
5. 层级选择部分完善（置顶、置底、上移一层、下移一层）

3.0 大版本规划 🚢

1. 画布的工具栏
   • 无限画布
   • 缩放能力
   • 拖拽画布能力
   • EagleView 鹰眼图
   • [to be continued]
2. 紧凑算法：水平方向紧凑、垂直方向紧凑、书写方向（左顶点紧凑）
3. Flex布局模式的完善
4. 允许嵌套的容器Container
5. 子元素自动分组算法