https://antv-2018.alipay.com/zh-cn/g6/3.x/demo/tool/context-menu.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Context Menu 右键菜单</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<style>
  #contextMenu {
    position: absolute;
    list-style: none;
    padding: 10px 5px;
    left: -100px;
    background: #ccc;

  }

  #contextMenu li {
    cursor: pointer;
  }
</style>
<script>
  var _extends = Object.assign || function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };

  var graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    defaultNode: {
      size: [40, 40]
    },
    modes: {
      default: ['drag-node']
    }
  });

  G6.registerEdge('self-line', {
    autoRotate: true,
    drawLabel: function drawLabel(cfg, group) {
      var labelCfg = cfg.labelCfg || {};
      var labelStyle = this.getLabelStyle(cfg, labelCfg, group);

      var text = group.addShape('text', {
        attrs: _extends({}, labelStyle, {
          text: cfg.label,
          fontSize: 12,
          fill: '#404040',
          stroke: 'white',
          lineWidth: 5
        }),
        className: 'edge-label'
      });

      return text;
    }
  }, 'line');

  var data = {
    nodes: [{
      id: 'node1',
      label: 'node1',
      x: 200,
      y: 100,
      shape: 'rect'
  }, {
      id: 'node2',
      label: 'node2',
      x: 250,
      y: 250,
      shape: 'rect'
  }, {
      id: 'node3',
      label: 'node3',
      x: 350,
      y: 100,
      shape: 'rect'
  }],
    edges: [{
      source: 'node1',
      target: 'node2',
      shape: 'self-line',
      label: '测试文本'
  }, {
      source: 'node1',
      target: 'node3',
      shape: 'self-line',
      label: '测试文本2',
      labelCfg: {
        autoRotate: true,
        style: {
          stroke: 'white',
          lineWidth: 5
        }
      }
  }]
  };

  graph.data(data);
  graph.render();

  // 在实际开发中，右键菜单内容可以使用JSX或HTML中的模板
  // 创建ul
  var conextMenuContainer = document.createElement('ul');
  conextMenuContainer.id = 'contextMenu';

  // 创建li
  var firstLi = document.createElement('li');
  firstLi.innerText = '菜单项1';
  conextMenuContainer.appendChild(firstLi);

  var lastLi = document.createElement('li');
  lastLi.innerText = '菜单项2';
  conextMenuContainer.appendChild(lastLi);
  document.body.appendChild(conextMenuContainer);

  var menu = document.getElementById('contextMenu');
  graph.on('node:contextmenu', function(evt) {
    menu.style.left = evt.x + 'px';
    menu.style.top = evt.y + 'px';
  });

  graph.on('node:mouseleave', function(evt) {
    menu.style.left = '-100px';
  });
</script></body>
</html>
文档更新时间: 2024-04-05 16:11   作者：admin