x6.js 从流程图组件库中拖拽组件到画布dnd使用

上一篇已经了解到了x6.js常用功能以及使用方法。但我们使用流程图的时候还少不了一个非常重要的功能那就是拖拽组件库里的组件进来。如下图:

首先是布局这块,拖拽组件库的视图中布局无需我们去写,我们只需把界面搭建好。

添加组件库

1.搭建布局界面

这里以guiplan可视化开发工具搭建的界面效果如下:

分为左右布局排版,左边用来放组件库视图,右边用来放画布视图。

2.设置相对定位

这里一定要注意除了排版这样设计以外,组件库部分需要设置定位方式为相对定位。因为自带的组件库视图是绝对定位排版

复制代码
position:relative;

3.创建可拖拽容器

代码如下:

复制代码
this.guiAddon = new Addon.Stencil({
    title: 'Components',
    target: this.guiX6,
    search(cell, keyword) {
        return cell.shape.indexOf(keyword) !== -1
    },
    placeholder: 'Search by shape name',
    notFoundText: 'Not Found',
    collapsable: true,
    stencilGraphWidth: 200,
    stencilGraphHeight: 180,
    groups: [
        {
            name: 'group1',
            title: 'Group(Collapsable)',
        },
        {
            name: 'group2',
            title: 'Group',
            collapsable: false,
        },
    ],
})

4.容器加入到页面中

将容器放到界面里,也就是上图左边部分,addon是左边部分的元素id

复制代码
document.querySelector('#addon').appendChild(this.guiAddon.container)

这样我们的组件库就做好了

组件库里添加组件

好组件库虽然做好了,但是组件又如何添加进来了?

1.创建组件

这里以圆组件为例

复制代码
let node = new Shape.Circle({
      width: 60,
      height: 60,
      attrs: {
        circle: { fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67' },
        text: { text: 'ellipse', fill: 'white' },
      },
    })

2.加入组件

将组件加入到对应的分组中即可

复制代码
this.guiAddon.load([node], 'group1')

3.改初始化配置

注意:这里虽然创建了组件但并不能拖拽到画布中。

我们还需要改改画布的配置,也就是创建画布的时候需要给它权限,可拖入节点进来的权限。

复制代码
this.guiX6 = new Graph({
    container: document.querySelector('.guix6'),
    snapline: {
        enabled: true,
        sharp: true,
    },
    scroller: {
        enabled: true,
        pageVisible: false,
        pageBreak: false,
        pannable: true,
    },....

案例下载与导入

目前整个案例都在guiplan中,找到插件库。然后点击"x6流程图"即可自动下载安装,自动将整个案例插入到你当前项目中来。其中内置的常用函数都以封装好,测试案例已经写好,直接用即可。无需再向我一样耗费好几天的研究,省时省力。

相关推荐
空中湖1 天前
手绘风格流程图工具:简单高效的在线流程图绘制工具
流程图
全星0072 天前
失效模式分析(FMEA)、控制计划(CP)、流程图(Flowchart)的无缝衔接与高效管理--全星FMEA软件系统
流程图
朴拙数科4 天前
plaintext 流程图和Markdown 的 Mermaid格式流程图的区别要点
编辑器·vim·流程图
月巴月巴白勺合鸟月半4 天前
一个流程图的后续
流程图·健康医疗
青花瓷6 天前
VSCode中使用Markdown以及Mermaid实现流程图和甘特图等效果
vscode·流程图·甘特图
fish-man6 天前
测试流程图显示问题
java·服务器·流程图
BerryBC6 天前
ChatBI的流程图
java·前端·流程图
Jiaberrr7 天前
Vue3 实战:基于 mxGraph 与 WebSocket 的动态流程图构建
前端·javascript·vue.js·websocket·流程图
独好紫罗兰8 天前
洛谷题单1-B2002 Hello,World!-python-流程图重构
python·算法·流程图
丁总学Java9 天前
在 Mermaid 流程图里“驯服”"的魔法指南!!!
流程图·mermaid