0
点赞
收藏
分享

微信扫一扫

How to resolve jre-openjdk and jre-openjdk-headless conflicts?

诗远 2023-11-07 阅读 22
前端框架

1、通过键盘 + 鼠标拖拽创建边

根据官方实例,在画布上创建边基本都是点击端点构建边,或者固定端点后拖拽创建边,但是倘若有个这样的需求:“键盘按住ctrl后,鼠标从一个端点拖拽出边到另一个端点来创建边” 改如何应对呢?,本着文档没有看源码的操作,最终还是被我找到了;

  • 文档方法

在这里插入图片描述

  • 源码方案
    在这里插入图片描述

根据源码提供代码可知官方是提供了对应方法的,只是文档未写,所以我们可以这样修改:
1、G6 配置项

  modes: {
    default: ['drag-node', 'drag-canvas', 'zoom-canvas', {
      type: 'create-edge',
      key: 'control', // 配置创建边按键操作, options: 'shift', 'control', 'ctrl', 'meta', 'alt'
      trigger: 'drag', // 修改创建边模式 
    }],
  },

2、监听节点上鼠标事件

  // 监听节点鼠标按下时是否按住 ctrl 键来控制节点拖拽锁定
  graph.on('node:mousedown', (evt: IG6GraphEvent) => {
    const mouseEvent = evt.originalEvent as MouseEvent;
    if (mouseEvent.ctrlKey) {
      evt.item?.lock();
    }
  });

  // 监听节点鼠标抬起时是否按住 ctrl 键来控制节点拖拽锁定
  graph.on('node:mouseup', (evt: IG6GraphEvent) => {
    const mouseEvent = evt.originalEvent as MouseEvent;
    if (mouseEvent.ctrlKey) {
      evt.item?.unlock();
    }
  });

3、可监听边创建完成后的事件回调

 // 监听创建边完成
  graph.on('aftercreateedge', (e: IG6GraphEvent) => {
	// do   
})

2、自定义边箭头样式

  style: {
      lineWidth: 2,
      lineAppendWidth: 5,
      stroke: '#BDBEBF',
      endArrow: {
        path: G6.Arrow.triangle(5, 5, 5), // 依次为箭头宽度(默认 10)、长度(默认 15)、偏移量(默认为 0,与 d 对应)
        d: 5,
        fill: '#BDBEBF',
      },
    },
举报

相关推荐

0 条评论