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

相关推荐
zzywxc7873 天前
自动化测试框架是软件测试的核心基础设施,通过预设规则和脚本自动执行测试用例,显著提高测试效率和覆盖率。
运维·人工智能·自动化·prompt·测试用例·流程图
TextIn智能文档云平台3 天前
产品无法正确解析复杂表格和流程图,有什么替代方案或优化方法?
流程图
coder_lorraine3 天前
Drawnix:开源一体化白板工具,让你的创意无限流动!
开源·流程图
m0_555762904 天前
项目1——单片机程序审查,控制系统流程图和时序图
单片机·mongodb·流程图
zzywxc7876 天前
AI在金融、医疗、教育、制造业等领域的落地案例
人工智能·机器学习·金融·prompt·流程图
趣学习7 天前
A043基于博途西门子1200PLC自动售货机系统仿真A043自动售货机+S71200+HMI+主电路图+外部接线图+流程图+IO分配表
毕业设计·流程图·课程设计·plc·西门子
kebeiovo9 天前
项目必备流程图,类图,E-R图实例速通
开发语言·r语言·流程图
晋人在秦 老K9 天前
入梦工具箱怎么检测硬件?3步完成CPU-Z跑分测试 硬件检测总出错?图吧工具箱免费功能实测 draw.io 部署指南:私有化流程图服务搭建教程
测试工具·流程图·工具·draw.io
zzywxc78710 天前
AI在金融、医疗、教育、制造业等领域的落地案例(含代码、流程图、Prompt示例与图表)
人工智能·spring·机器学习·金融·数据挖掘·prompt·流程图
ui小新12 天前
什么是流程图:流程六要素、三大结构及绘制规范总结
流程图·设计工具·流程图设计