@rockyf/easy-design
v0.0.12
Published
纯js开发的简易版的设计器,模仿Figma的操作方式
Downloads
8
Readme
Easy Design (PureJs)
纯js开发的简易版的设计器,模仿Figma的操作方式
Intro
- 该库实现了基于包围盒定义节点的树型数据结构的可视化编辑,类似于figma的画布区的视线,目前已实现了figma90%的操作方式
- 该库仅提供基础节点类型(
NodeWrapper
)和节点分组类型(Group
),节点内容需要开发者自行实现,也可参照demo/src/nodes
中的样例编写。每一层节点都会包裹一个NodeWrapper
,保证节点在包围盒 - 编辑器分为编辑态和运行态,运行态时整个
Stage
为铺满容器,编辑态时Stage
受限于配置的设计器尺寸
Install
yarn add @rockyf/easy-design
ornpm i -S @rockyf/easy-design
RoadMap
- [x] 鼠标单选/多选(按住shift+单击)
- [x] 鼠标框选(按住shift为追加模式)
- [x] 鼠标修改节点包围盒(坐标+尺寸)
- [x] 鼠标拖动画布
- [x] 添加/删除节点
- [x] 撤销/重做操作
- [x] 主题(light/dark)
- [ ] 移动节点(开发中...)
- [ ] 自定义主题