「AntV」 x6 自定义拖拽的实现

前言

这个demo是基于一位社区的小伙伴的文章实现，实现的思路也是参考了小伙伴的文章步骤；通俗点来讲：大佬把理论写好了，我就是基于理论搬砖的小菜鸟。当然其中也遇到了一些问题，也有及时的给大佬沟通，先不废话了，看看demo吧sxdpanda.gitee.io/antv-admin/…

准备工作

• 准备一些树形的数据
• 自定义节点的图片
• 使用ui框架（el或者其他的都是可以的）
• x6的一些公共配置如何封装，减少代码耦合度

自定义节点（html）

初始化Dnd

// 先定义个全局的dnd变量
let dnd = null;
// 在mounted中对dnd进行初始化（在graph之后初始化）
dnd = new Dnd({
  target: graph,
  scaled: false,
  dndContainer: proxy.$refs.dndContainer
});

定义拖拽事件

/**
 * 自定义拖拽源事件
 * @param {*} e
 * @param {*} treeNode 根据需要传入要添加的参数
 * @param {*} data 根据需要传入要添加的参数
 * 这里使用的是elementPlus的tree组件
 */
const startDrag = (e, treeNode, data) => {
   const node = graph.createNode({
    shape: 'cu-data-node',
    width: 100,
    height: 104,
    label: data?.label,
    // id: data?.id,
    // 所有节点的数据源头都在这里设置，需要哪些字段自行添加即可
    data: {
      name: data?.label, // 节点的名称
      disableMove: true,
      createPerson: data.founder
    },
    ports: {
      ...cuPort,
      items: [
        { group: 'left', id: 'port-left' },
        { group: 'right', id: 'port-right' }
      ]
    }
  });
  dnd.start(node, e);
};

自定义html节点

  Shape.HTML.register({
    shape: 'cu-data-node',
    width: 100,
    height: 104,
    zIndex: 1,
    effect: ['data'],
    html(cell) {
      const { name: nodeName, createPerson } = cell.getData();
      const htmlContainer = document.createElement('div');
      htmlContainer.setAttribute('class', 'cu_html_container');

      // 上方的图片
      const htmlTop = document.createElement('img');
      htmlTop.setAttribute('class', 'cu_html_top');
      const imgUrl = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/24127194d5b158d7eaf8f09a256c5d01.svg';
      htmlTop.setAttribute('src', imgUrl);
      DataUri.imageToDataUri(imgUrl, function (nu, url) {
        // 第一个参数无效，用的只是第二个参数，但是第一个参数不写不行
        htmlTop.src = url; // 给图片标签赋值
      });

      // 标题和描述信息
      const htmlTitle = document.createElement('div');
      htmlTitle.setAttribute('class', 'cu_html_title');
      htmlTitle.innerText = nodeName;

      // 描述信息
      const htmlDesc = document.createElement('div');
      htmlDesc.setAttribute('class', 'cu_html_desc');
      htmlDesc.innerText = `创建人-${createPerson}`;

      htmlContainer.appendChild(htmlTop);
      htmlContainer.appendChild(htmlTitle);
      htmlContainer.appendChild(htmlDesc);

      return htmlContainer;
    }
  });

元素绑定拖拽事件

<div  @mousedown="startDrag($event, node, data)">拖拽</div>

如何减少代码的耦合度？

在做这个项目的过程中我发现有一些地方代码都是重复在写，虽然它的功能不是一样。对于强迫症的我来说，得想办法把它抽离出去，比如一些画布的放大缩小都是调用的同一个方法，只是传递的值不一样而已。还有就是画布的一些配置项也可以单独抽离出去……

抽离配置项

把这些配置单独放到一个js文件中

父页面使用的时候直接引入进来，然后再解构到graph中就可以了（这样是不是一下子就减少好几十行的代码？）

相同方法，只是参数不同？

这里就拿画布的放大缩小来讲，直接传递一个标识进来区分是放大画布还是缩小画布

x6的插件能抽离吗？

当然是可以的，只要你强迫症比我强，你的代码一定比你的脸都干净；需要注意的是你必须把对应的插件引入的你的js文件中