zfsnyj / vfd Goto Github PK

View Code? Open in Web Editor NEW

525.0 9.0 157.0 14.35 MB

一款基于VUE的在线绘制流程图工具

License: GNU Lesser General Public License v3.0

JavaScript 29.65% HTML 0.28% Vue 64.25% CSS 5.82%

vue vfd

vfd's Introduction

介绍

VUE FLOW DESIGN流程设计器，基于Vue + Ant Design Vue + JSPlumb，该组件目的是为了使用在Vue项目中，它前身是原生版流程设计器。
Vue版本以全新的技术栈重构了代码，并在原版基础上实现了更好的操作方式，新版会作为优先版本持续迭代。
github: https://github.com/ZFSNYJ/VFD
演示地址

效果演示

基础面板
拖拽节点到绘图区连线
拖拽对齐或使用自动对齐
显示/隐藏网格
设置节点和连线的属性
单节点、多节点移动(按住CTRL键)
改变节点对齐的排序顺序(按住Ctrl键一个一个单击选中要对齐的节点，单击的顺序就是对齐的排列顺序)
清空画布，重新绘制
保存流程图(会生成一段json数据，后台可以保存这段数据，为了便于调试，生成的json数据可以通过快捷键CTRL+ALT+T打开的测试窗口看到。同时也可以从该窗口载入其他的符合流程图的json数据)
保存流程图为图片保存到本地
画布拖拽、缩放
通过设置页面(CTRL+ALT+S)可以设置相关参数
快捷键说明
。。。。。。

使用教程

在你的项目根目录下安装vfd：

npm install vfd --save

在代码中引用，类似如下：

<template>
	<div>
        <vfd></vfd>
    </div>
</template>

<script>
    import vfd from 'vfd'
    
    export default {
        components: {
            vfd
        }
    }
</script>

捐赠作者

如果您觉得本项目对您起到一定的帮助，也可以请作者喝杯咖啡。

vfd's People

Contributors

Stargazers

Watchers

Forkers

weizai118 mgbin088 shaoyn torns lgb020 aedoop jingjieyan zhaomenghuan kingctan dennyliao tongxin3267 rongzedong qm8956 zohner leshjmail hsg4ok cynthiawh88 jasonzhoumj yelikang edge-world zjkyz8 upcyoung xiawei666 forrecord zhaojunzhao xcqweb coder-yxz blueeyedboy521 sfdsfgzys shenqiangbin pczhouhua blue03 like199 hqqiao wuzheng0709 taodada caomengling zoukai930225 organ-test2 laashub-soa readilychen liupeng826 susunsam guanjiayao jianguofan wjinp mittyok mpw0311 jaimecai suzhenyu22 o-skyworth erozvz jiangjinna0311 1322548443 lishaobobo jerrytang67 caipp winken168 movefreechen ahuachen suxiaoyinger llshiyu piggona airqqqqq betteryaogang jqclub lin2006yuo jacksn2014 nollyhi jianjunyue wangfengchao ylbrylbr kirahua hyl01 member007 xudan1918 jiaxilee126 dudefu mycomputeris yfjl xluckywang lw201608 yiyuqi zorrock showsmall maxiaolin9495 sakura1024 keyzf freedomdebug zhanghuijun-zhj arashiquan33 skyydq lioncl zhangdong86 itcrowed lighting1012 janix520 nainiu192141 chouchouda ergonj

vfd's Issues

删除节点后,linkList数据错误

删除该节点,应只剩余一条link

删除后实际剩余两条link数据,且这两条实际上是一条连线

使用删除节点操作后,剩余的linklist会直接翻倍

VUE FLOW DESIGN流程设计器，基于Vue + Ant Design Vue + JSPlumb的license是什么？

请问下作者，您好，VUE FLOW DESIGN流程设计器，基于Vue + Ant Design Vue + JSPlumb的license是什么？我可以下载源码进行二次修改开发，然后商用么？或者进行申请著作权？

谢谢

npm run dev 出错了

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module 'find-up'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (D:\github\temp\VFD\node_modules_pkg-dir@2.0.0@pkg-dir\index.js:3:16)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

如何进行回显

在使用的时候，用户重新加载页面，如何回显流程图

webpack build has errors

n ./node_modules/vfd/src/components/flow/designer/FlowDesigner.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vfd/src/components/flow/designer/FlowDesigner.vue?vue&type=script&lang=js&) 226:17
Module parse failed: Unexpected token (226:17)
You may need an appropriate loader to handle this file type.
| placement: 'bottomRight',
| message: '欢迎使用VFD流程设计器!',

  		description: <p>

| 当前版本：1.0.5

| Powered by ZSFN

It seems there is something error.

怎么动态获取数据

动态获取数据后节点一直未定义怎么回事啊