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流程图"即可自动下载安装,自动将整个案例插入到你当前项目中来。其中内置的常用函数都以封装好,测试案例已经写好,直接用即可。无需再向我一样耗费好几天的研究,省时省力。

相关推荐
<花开花落>13 天前
AI 辅助生成 Mermaid 流程图
ai·流程图·mermaid·tool
晓华-warm14 天前
Warm-Flow发布1.7.4, 设计器和流程图优化
java·中间件·流程图·组件·flowable·工作流·activities
邪恶马铃薯16 天前
Deepseek+墨刀,1min快速生成流程图!
流程图·墨刀
lgldl16 天前
AI自动生成复杂架构图,流程图,思维导图
人工智能·ai·流程图
蓝爱人16 天前
Vue3中使用 Vue Flow 流程图方法
javascript·vue.js·流程图
打码人的日常分享19 天前
智慧园区建设资料合集(Wordppt原件)
大数据·物联网·流程图·智慧城市·制造
小马爱打代码23 天前
计算机系统设计:E-R图、类图、时序图、功能结构图、流程图、用例图、架构图
流程图
꧁༺摩༒西༻꧂25 天前
DeepSeek生成流程图
流程图
斯内科25 天前
C#使用MindFusion.Diagramming框架绘制流程图(3):加权图的最短路径算法
流程图
向明天乄1 个月前
Maotu流程图编辑器:Vue3项目中的集成实战与自定义流程开发指南
javascript·编辑器·vue·流程图