网络安全防御 -- 防火墙安全策略用户认证综合实验

版本

"@antv/x6": "^2.0.0",
"vue": "^2.6.11",

拖拽节点大小工具

"@antv/x6-plugin-transform": "^2.1.8",

链接桩绘制

我喜欢通过群组的方式去定义链接桩

const processDefaultGroups = {
  right: {
    position: {
      name: 'right',
      args: {
        strict: true,
        dx: 10
      }
    },
    ...processCircle
  },
  left: {
    position: {
      name: 'left',
      args: {
        strict: true,
        dx: -10
      }
    },
    ...processCircle
  }
};

{
{
      groups: cloneDeep(processDefaultGroups),
      items: [
        {
          group: 'right'
        }
      ]
    };
}

// 通过svg绘制链接桩
const processCircle = {
  markup: [
    {
      tagName: 'circle',
      selector: 'circle'
    },
    {
      tagName: 'path',
      selector: 'path'
    }
  ],
  attrs: {
    circle: {
      magnet: true,
      r: 10,
      stroke: '#D9D9D9',
      fill: '#ffffff',
      strokeWidth: 2,
      filter: {
        name: 'dropShadow',
        args: {
          dx: 0,
          dy: 2,
          blur: 4,
          color: 'rgba(0,0,0,0.12)'
        }
      }
    },
    path: {
      d: 'M -1 -4 L 3 0 L -1 4',
      fill: 'transparent',
      stroke: '#222222',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLineJoin: 'round'
    }
  }
};

// 可通过群组名来动态增加和删除链接桩
node.addPort({ group: 'left' });

const ports: any = node.getPorts().find((d) => d.group === 'left');
ports && node.removePort(ports);

嵌套节点

embedding: {
enabled: true,
findParent： // 判断是否可以嵌套
},

假如节点上有个按钮，点击后可以激活输入框，想点击按钮的时候不触发X6的节点选中事件

添加@mousedown.stop