网格系统中的智能引导线
核心实现一个编辑坐标区 提示线功能
参考案例
功能描述
- 已知width,height的容器container
- 已知width,height的一个网格大小girdSize
- 任意宽高的元素element
- element可以拖拽 范围在container内
- 当拖拽时 提示当前元素在坐标系的一个状态
检查当前元素横向 纵向 垂直方向与其他元素的情况 进而提示引导线
构建基础场景
| 组件 | 描述 | 完成度 |
|---|---|---|
| containerComponent | 容器组件 提供基础布局 ，大小，可拖拽，出滚动条 | 已完成 |
| elementComponent | 元素组件 提供基础拖拽自适应 | 已完成 |
包括components ,rightnav,screen,toolbar组件
固定3个组件 文本,按钮,图片
点击发送全局global/addAction 添加到screen一个组件
包含一个尺寸状态组件集合inputnum(显示x,y,w,h)
动态获取全局当前组件状态global/getCurCompSize
工具栏组件 目前只是装饰
核心编辑区组件 包含功能如下
- 提供一个固定尺寸画布 带滚动条
iScroll插件 - 画布可增加Y轴高度
- 提供一个缩略图区域
iScroll miniMap（同步主编辑区映射画布还未实现）
核心实现类
实现监听功能
npm i cooking-cli -g
npm install
npm run dev