Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

添加边之后在特定条件下,边的层级BUG #4494

Open
lijiapeng0302 opened this issue Nov 4, 2024 · 4 comments
Open

添加边之后在特定条件下,边的层级BUG #4494

lijiapeng0302 opened this issue Nov 4, 2024 · 4 comments

Comments

@lijiapeng0302
Copy link

lijiapeng0302 commented Nov 4, 2024

Describe the bug

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
  connecting: {
    anchor: 'nodeCenter',
    connectionPoint: 'anchor',
  }, //连线都在节点中心点
})

const source = graph.addNode({
  x: 120,
  y: 40,
  width: 100,
  height: 40,
  zIndex:10,
  attrs: {
    body: {
      fill: '#f5f5f5',
      stroke: '#d9d9d9',
    },
  },
})

const target = graph.addNode({
  x: 400,
  y: 260,
  width: 100,
  height: 40,
  zIndex:10,
  attrs: {
    body: {
      fill: '#f5f5f5',
      stroke: '#d9d9d9',
    },
  },
})

graph.addEdge({
  source,
  target,
  zIndex:9,
  connector: { name: 'smooth' },
  attrs: {
    line: {
      stroke: '#722ed1',
    },
  },

    tools: {
    name: 'vertices',
    args: {
      snapRadius: 2,
      attrs: {
        fill: '#444',
        r: 5, // 顶点的半径,控制大小
      },
    },
    }
})

上述为复现代码,当connecting: {
anchor: 'nodeCenter',
connectionPoint: 'anchor',
}, 属性连线都在节点中心点时,只要加入tools: {
name: 'vertices',
args: {
snapRadius: 2,
attrs: {
fill: '#444',
r: 5, // 顶点的半径,控制大小
},
},
}属性,不管边的zIndex设置为多少,鼠标移上节点,都能点击到边

Your Example Website or App

Steps to Reproduce the Bug or Issue

1、创建两个节点
2、用边连接两个节点,并设置节点zIndex>边的zIndex
3、鼠标移上节点

Expected behavior

当connecting: {
anchor: 'nodeCenter',
connectionPoint: 'anchor',
}, 属性连线都在节点中心点时,只要加入tools: {
name: 'vertices',
args: {
snapRadius: 2,
attrs: {
fill: '#444',
r: 5, // 顶点的半径,控制大小
},
},
}属性,不管边的zIndex设置为多少,鼠标移上节点,都能点击到边,正常期望结果应该为节点zIndex比边大的情况下,鼠标移上节点不应该能点击到边

Screenshots or Videos

No response

Platform

  • OS: [ Windows,]
  • Browser: [ Chrome]
  • Version: [e.g. 2.11.1]最新版

Additional context

No response

@Lwj-1024
Copy link

解决了吗 大佬

@Lwj-1024
Copy link

兄弟 这回是真找到解决方案了 看了下元素
image
因为这个工具层是在cell层后面 所以层级会比cell高 如果把它往前移了 那鼠标事件就都会失效 所以加一个自定义的键盘事件去做这个图层的display none/block的切换就可以了 具体可以根据需求去操作
image
以上demo代码

@lijiapeng0302
Copy link
Author

我的解决方案是用了 工具自带的事件setTools,当按住alt时显示工具,不按则不显示,正好可以满足我们的需求,但是可能不适合大部分人的需求

@Lwj-1024
Copy link

我的解决方案是用了 工具自带的事件setTools,当按住alt时显示工具,不按则不显示,正好可以满足我们的需求,但是可能不适合大部分人的需求

哦哦 那也可行呢 但是得把tools给整个置空吧?不然我看他还是会生成边线的工具层

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants