# easy-design

**Repository Path**: aliencoder/easy-design

## Basic Information

- **Project Name**: easy-design
- **Description**: 简易的设计器，操作方式模仿figma
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-03-22
- **Last Updated**: 2025-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Easy Design (PureJs)

纯js开发的简易版的设计器，模仿Figma的操作方式

## Intro
1. 该库实现了基于包围盒定义节点的树型数据结构的可视化编辑，类似于figma的画布区的视线，目前已实现了figma90%的操作方式
2. 该库仅提供基础节点类型(`NodeWrapper`)和节点分组类型(`Group`)，节点内容需要开发者自行实现，也可参照`demo/src/nodes`中的样例编写。每一层节点都会包裹一个`NodeWrapper`，保证节点在包围盒
3. 编辑器分为编辑态和运行态，运行态时整个`Stage`为铺满容器，编辑态时`Stage`受限于配置的设计器尺寸

## Install
`yarn add @rockyf/easy-design`  
or  
`npm i -S @rockyf/easy-design`

## RoadMap
- [x] 鼠标单选/多选(按住shift+单击)
- [x] 鼠标框选(按住shift为追加模式)
- [x] 鼠标修改节点包围盒(坐标+尺寸)
- [x] 鼠标拖动画布
- [x] 添加/删除节点
- [x] 撤销/重做操作
- [x] 主题(light/dark)
- [ ] 移动节点(开发中...)
- [ ] 自定义主题

## LiveDemo
[LiveDemo](https://aliencoder.gitee.io/easy-design)