caohuatao / vue-super-flow Goto Github PK

View Code? Open in Web Editor NEW

743.0 12.0 137.0 760 KB

Flow chart component based on Vue。vue flowchart

Home Page: https://caohuatao.github.io/

License: MIT License

HTML 1.52% JavaScript 37.89% Vue 60.59%

vue es6-javascript flow-chart

vue-super-flow's Introduction

vue-super-flow

A flowchart editor component base on Vue.
Vue flowchart.
Vue 流程图。
Demo
docs

Installation


npm install vue-super-flow

yarn add vue-super-flow

import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'

Vue.use(SuperFlow)

Attributes

属性	类型	默认值	描述
relationMark	`String`	`"id"`	可个性化 `node` 的标识
startMark	`String`	`"startId"`	可个性化 `link` 的起始标识
endMark	`String`	`"endId"`	可个性化 `link` 的终点标识
draggable	`Boolean`	`true`	是否开启节点拖拽
linkAddable	`Boolean`	`true`	是否开启快捷创建 `link`
linkEditable	`Boolean`	`true`	`link` 是否可编辑
hasMarkLine	`Boolean`	`true`	是否开启拖拽辅助线
markLineColor	`String`	`#55abfc`	辅助线颜色
origin	`Array`	`[0, 0]`	`graph` 的二维坐标系原点
nodeList	`Array`	`[]`	初始化节点列表
linkList	`Array`	`[]`	初始化连线列表
graphMenu	`Array`	`[]`	`graph` 的右键菜单列表配置
nodeMenu	`Array`	`[]`	`node` 右键菜单列表配置
linkMenu	`Array`	`[]`	`link` 右键菜单配置
enterIntercept	`Function`	`() => true`	创建连线进入节点限制
outputIntercept	`Function`	`() => true`	节点生成连线限制函数
linkDesc	`Function`	`null`	生成 `link` 定制描述文字
linkStyle	`Function`	`null`	根据 `link` 定制样式
linkBaseStyle	`Object`	`{}`	连线默认样式配置

linkDesc

function linkDesc (link) {
  /**
   根据 link 对象的属性判断定制连线描述
   */
  return link.meta ? link.meta.info : ''
}

linkBaseStyle

/*
// 内置默认样式配置
{
   hover: '#FF0000',        // 连线 hover 时颜色
   color: '#666666',        // 连线颜色
   textColor: '#666666',    // 连线描述文字颜色
   textHover: '#FF0000',    // 连线 hover 时描述文字颜色
   font: '14px Arial',      // 连线 描述文字 font 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/font
   dotted: false,           // 连线 是否是虚线
   lineDash: [4, 4],        // 为虚线时 虚线参数  参考：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
   background: 'rgba(255,255,255,0.6)'  // 描述文字背景  
}
*/

{
  // ... 可选属性 参考内置默认样式 用来覆盖连线样式的默认值
}

linkStyle

function linkStyle (link) {
  /**
   根据 link 对象的属性判断定制连线样式
   */
  return {
    // ... 可选属性 参考：[linkBaseStyle](#linkBaseStyle)
  }
}

Methods

方法名	说明	参数
selectAll	选中所有进行拖拽修改 `origin`	----
toJSON	将 `graph` 对象转为普通 json 对象	----
getMouseCoordinate	获取当前鼠标在 `graph` 坐标系的坐标	clientX, clientY
addNode	添加节点	options

Example

vue-super-flow's People

Contributors

Stargazers

Watchers

Forkers

rehack realmcf haxixu kule2018 wangzhe111 michael-xgl hct0929 tonny0812 dixinl l4inoday xinrulianhua xianzhiyun keyzf shawnxiao94 bestjex ly99u vickkyy eliya123 2491152758 zhangzhiling5256 565871779 1207007480 xigongzi gaussen cheneygan tanmeng-maker ostaer cy904159293 jeff-fe thup yisuo2015 ruvar c3ll256 zalaki888 wsyangfan faronsince2016 davidbieber xinglongjizi sdwdjzhy anruy buyijiuyang loyin daoos jangocheng needou qingbinyang zy926425 markochenn kerry0955 lixuan9512 evanhe810 lance201314 xiashuijun finding j-vnode hadoop835 wuchunfu xiaxzhi baych yingfengchen baobao12356 akila-baillan zxx10 cacalot123 code997 doctoray lplsirlu unrealfeather 18275165634 wallufo liyanshuai2018 waaawa freedomsky0612 loocer shaldonhe 520webui panboren dlee77 ian336 feng-hai oupula hahayuan sc32024826 rookeyframe xiafuzuo jingguoxian-dotnetcore vsantw wtsoftware wsad123456pm vikingdadmedic user-liuzhuang julius9246 enjoyzhou coder-yuansiyu w569111843 stevenkang jxs-nv huangqh0902 cgb-workflow chenhao02135

vue-super-flow's Issues

文档错误，全选应为selectAll 文档是selectedAll

如题

vue项目中，如果设置了初始化节点列表，那么，在一些不相关的组件中，如果数据有变更，都会触发vue-super-flow重置，节点都隐藏了

如题

为什么修改一个节点的meta信息，同一类节点的都变了呢，怎么修改

报错BrowserslistError: Unknown browser query `dead`

linkStyle方法参数link为undefined

<super-flow
    ref="superFlow"
    :link-style="linkStyle"
>

linkStyle(link) {
    console,log(link)      /// 这里报错了，undefined
    const style = {}
    return link.flag? style : ''
},

readme 安装命令写错了

yarn add vue-spuer-flow

readme和文档里都写错了，试了好几次都安装失败才发现=_=#

编辑单击无效

看了您的作品，很感兴趣，但是我发现demo里面的编辑按钮单击之后无效，是有bug吗

大佬，加一个连线成功后的回调函数吧

就在这个nodeMouseup方法里面加个callback就行，我有个需求，要在手动连线之后调用一个回调函数来完成一些操作，如果没有回调函数的话实在是不方便...

不使用右键如何获取跟更改nodelist里的数据

nodelist不是双向绑定的想在父组件中获取修改更新后的nodelist的数据以及如何修改nodelist中的数据传给子组件

需要安装browserslist吗？我浏览器引入import 'vue-super-flow/lib/index.css'时报错了

./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/vue-super-flow/lib/index.css
Module build failed: BrowserslistError: Unknown browser query dead
at C:\webstorm\Fund\node_modules\autoprefixer\node_modules\browserslist\index.js:164:11
at Array.reduce ()

能否通过json生成可视化流程图？

能否通过类似如下的json生成可视化的流程图？
{
"id": "00000",
"meta": {
"prop": "start",
"name": "条件节点1"
}
children: [{
"id": "11111",
"meta": {
"prop": "start",
"name": "条件节点1"
}
},
{
"id": "22222",
"meta": {
"prop": "start",
"name": "条件节点2"
},
},

}

节点与节点之间的连接可以设置成某几条是虚线某几条是实线并且颜色自定义吗

如题

全选时， css 样式错乱

dom会超出，
破坏原有布局

尝试在已有项目中集成，每个节点内容无法展示，右键菜单已经配置，也不能正常展示，有选项，但是无内容

项目采用iview-admin的样式库
在已有项目中引入，每个节点内容无法展示，右键菜单已经配置，也不能正常展示：有选项，但是无内容，报错如下：Property or method "meta" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

已经尝试把组件原码copy进项目，也有该问题
尝试搭建了新项目，可以正常使用。所以求作者大大解惑
iview-admin demo地址：https://github.com/view-design/iview-admin

双击线条的事件可以暴露出来嘛？

流程图在大屏上节点的线条显示不完整或者不显示出来

在大屏上显示会存在问题线条不能完整的显示或者显示部分

node slot点击事件无法监听到第一次点击

      <template v-slot:node="{meta}">
        <div :class="`flow-node flow-node-${meta.prop}`" >
          <header class="ellipsis" @click.prevent="clickNode(meta.name)">{{meta.name}}</header>
          <section>{{meta.desc}}</section>
        </div>
      </template>

    const clickNode = (name: string) => {
      console.log(name);
    };

在示例上增加了一个node click事件，结果第一次点击node不触发，第二次点击才能出发clickNode事件，请问这个可以解决吗

根据josn能生成图形吗？

直接把json赋值给this.$refs.superFlow.graph并不能展示

"origin": [
0,
0
],
"nodeList": [
{
"id": "node43bEDxs4QYLxYqA8",
"width": 120,
"height": 40,
"coordinate": [
293.11109924316406,
115.24305725097656
],
"meta": {
"nodeSn": "20201117155528475709",
"nodeType": 12,
"name": "swooptask222",
"retryTimes": "2"
}
},
{
"id": "nodex3J2Ah7U3lf3ohnK",
"width": 120,
"height": 40,
"coordinate": [
214.11109924316406,
212.24305725097656
],
"meta": {
"nodeType": 1,
"processInfoSn": "20201118144643126323",
"name": "qwe",
"flag": 1,
"isSubProcess": 1,
"releaseState": 1,
"processLevel": 1,
"runStrategy": 2,
"projectSn": "20201111151301378332",
"hasEvent": 1
}
}
],
"linkList": [
{
"id": "linkqUDpYBsyXW857ojR",
"startId": "node43bEDxs4QYLxYqA8",
"endId": "nodex3J2Ah7U3lf3ohnK",
"startAt": [
60,
40
],
"endAt": [
120,
20
],
"meta": null
}
]
}

根据打印的数据如何回显流程图

可以设置图片不能拖出边界嘛？

节点插槽v-slot传递的值怎么改成node，而不是node.meta对象

我对vue的插槽不是很理解，我需要把节点插槽中原本v-slot:node="{meta}”，原来是node.meta对象，想改成是node对象。
我目前需要修改源码node.vue里面的代码

<div
    tabindex="-1"
    class="super-flow__node"
    :class="{'can-move': nodeDrop}"
    :style="style"
    @mousedown.left="nodeMousedown"
    @mouseenter="nodeMouseenter"
    @mouseleave="nodeMouseleave"
    @mouseup="nodeMouseup"
    @contextmenu.prevent.stop="nodeContextmenu">

    // **把这里改成<slot :meta="node"></slot>**
    <slot :meta="node.meta"></slot>

    <div
      v-for="(dir, key) in direction"
      v-show="output && lineDrop"
      :class="`node-side node-side-${key}`"
      @contextmenu.stop.prevent
      @mousedown.left.prevent.stop="evt => sideMousedown(evt, dir)">
    </div>
  </div>

能不能在不修改源代码的前提下，在使用template插槽的时候改成node对象？
如果不行，我是不是要自己修改源代码，然后打包插件自己使用呢？

如何通过连线顺序拿到节点列表

我通过循环连线列表拿到顺序的节点列表，但移动任何一个具有连接线的节点后，连线顺序会发生变化

Demo 页面建议用对应的语言，不然在 Chrome 下会触发翻译，体验不好

要么内容用全英，同lang；
要么lang用 zh，同内容。

可编辑的节点

大佬，有没有可编辑输入的例子。小白太可怜了，刚进公司就被搞这种流程图

官网demo颜色选择器变换颜色下面没有联动，节点名称过长时文字会溢出

希望尽快处理一下谢谢您

有没有禁止编辑功能，

项目很不错正好能解决我的问题，如果有禁止编辑功能就更好了

请教一下如何修改id生成规则

后台接口希望 id的内容是数字请教一下id生成是在文件的哪个位置

如何获取被设计器设计完之后保存下来的数据？（然后可以再渲染页面的时候，显示流程图）

如何获取被设计器设计完之后保存下来的数据？然后可以再渲染页面的时候，显示流程图。

建议修改下介绍

vue flow components
->
vue-super-flow 是一款快速方便实现流程图的 vue 插件。Demo地址：https://caohuatao.github.io/demo/；
Vue-super-flow is a quick and convenient Vue plug-in to realize flow chart. Demo address: https://caohuatao.github.io/demo/ ;

加你qq了，麻烦通过一下。。。。

vue 2.5加载失败

error in ./node_modules/vue-super-flow/lib/index.css

Module build failed: BrowserslistError: Unknown browser query dead
at D:\work\subway\node_modules\browserslist\index.js:164:11
at Array.reduce ()
at resolve (D:\work\subway\node_modules\browserslist\index.js:132:18)
at browserslist (D:\work\subway\node_modules\browserslist\index.js:224:16)
at Browsers.parse (D:\work\subway\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (D:\work\subway\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (D:\work\subway\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (D:\work\subway\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (D:\work\subway\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\work\subway\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (D:\work\subway\node_modules\postcss\lib\lazy-result.js:204:22)
at D:\work\subway\node_modules\postcss\lib\lazy-result.js:197:27

@ ./node_modules/vue-super-flow/lib/index.css 4:14-118 13:3-17:5 14:22-126
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

这是报错内容

支持上Vue3.0好支持么？

想在vu3的项目里用这个组件，结果用不了，有点尴尬，，

关于css引入的问题

尊敬的大佬，您好，
请问一下
`Failed to compile.

./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/vue-super-flow/lib/index.css
Module build failed: BrowserslistError: Unknown browser query `dead``

请问这个是什么问题哈