# flow-chart

**Repository Path**: tompeppa/flow-chart

## Basic Information

- **Project Name**: flow-chart
- **Description**: js+vue flow chart 在线流程图
原生js+vue实现 图形画板，和windows图标一样，可以自由的拖动、拖拉改变大小。 以及和windows桌面一样 有选区，可以选中若干个元素一起拖动。

- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 3
- **Created**: 2021-03-19
- **Last Updated**: 2023-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# js+vue flow chart 在线流程图

原生js+vue实现 图形画板，和windows图标一样，可以自由的拖动、拖拉改变大小。
以及和windows桌面一样 有选区，可以选中若干个元素一起拖动。

在线预览地址：
[https://newpanjing.github.io/flow-chart/index.html](https://newpanjing.github.io/flow-chart/)
## 特色功能
+ 键盘位移
+ 双击编辑
+ 拖拽
+ 改变大小
+ 单选/多选

## 源码启动预览
+ 启动:
    ```shell
     npm run start
    ```
+ 也可以直接运行app.js
    ````shell
    node app.js
    ````

## 预览
![](https://raw.githubusercontent.com/newpanjing/flow-chart/master/images/preview.png)
## js 插件

+ drag.js
    > 实现了div的自由拖动

+ resize.js
    > 实现了div 自由改变大小
+ select.area.js
    > 实现了 div 上选区

## 文档

+ [drag.js](/drag.md)    
+ [resize.js](/resize.md)    
+ [select.area.js](/selectArea.md)