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

相关推荐
zzywxc7871 天前
AI在金融、医疗、教育、制造业等领域的落地案例
人工智能·机器学习·金融·prompt·流程图
趣学习2 天前
A043基于博途西门子1200PLC自动售货机系统仿真A043自动售货机+S71200+HMI+主电路图+外部接线图+流程图+IO分配表
毕业设计·流程图·课程设计·plc·西门子
kebeiovo3 天前
项目必备流程图,类图,E-R图实例速通
开发语言·r语言·流程图
晋人在秦 老K4 天前
入梦工具箱怎么检测硬件?3步完成CPU-Z跑分测试 硬件检测总出错?图吧工具箱免费功能实测 draw.io 部署指南:私有化流程图服务搭建教程
测试工具·流程图·工具·draw.io
zzywxc7874 天前
AI在金融、医疗、教育、制造业等领域的落地案例(含代码、流程图、Prompt示例与图表)
人工智能·spring·机器学习·金融·数据挖掘·prompt·流程图
ui小新6 天前
什么是流程图:流程六要素、三大结构及绘制规范总结
流程图·设计工具·流程图设计
小道士写程序6 天前
如何简单理解状态机、流程图和时序图
java·开发语言·流程图
zzywxc7877 天前
深入探讨AI三大领域的核心技术、实践方法以及未来发展趋势,结合具体代码示例、流程图和Prompt工程实践,全面展示AI编程的强大能力。
人工智能·spring·机器学习·ios·prompt·流程图·ai编程
皆过客,揽星河7 天前
c语言程序之魂——算法(练习题,流程图,程序源码)
c语言·算法·流程图·源码·辗转相除法·c语言程序设计
晓风残月淡7 天前
Mermaid流程图更改样式的方法
css·流程图·css3