[Bug Report]: 单击选中节点或线路，如果节点或线路不是处于最顶层，就无法删除

[Soundmark]

发生了什么？

问题描述

单击选中节点或线路，如果节点或线路不是处于最顶层，就无法删除，需要第二次对节点或线路进行点击，再按删除才可以删除。

目前的排查进展

核心库用了mousetrap作为事件处理库，当初始化mousetrap的时候，mousetrap会默认对document元素进行一个事件绑定，核心库则对画布进行事件绑定。 第一次单击元素的时候，按删除按钮会触发mousetrap对document元素的事件系统，第二次单击元素，再按删除按钮才会触发对画布的事件系统。所以应该是第一次单击的时候画布失去焦点了。 第一次单击元素，会触发元素的setZIndex方法，会暂时将元素置顶，主要问题就是出现在置顶这一步，改变了zIndex会触发重新渲染，这个过程怎么使得画布失去焦点了，目前还没有什么头绪。

目前的折中解决方案

我在mousetrap对document的事件实例中也绑定了删除按钮，这样即使画布的事件系统不触发也能正常删除

期望

基于目前的情况有没有大佬可以分析出问题所在，或者讨论一下有什么头绪。

复现demo

logicflow-test.zip

logicflow/core版本

2.1.4

logicflow/extension版本

无

logicflow/engine版本

No response

浏览器&环境

No response

[github-actions[bot]]

由于所提供信息的不充分，该 issue 被暂时关闭了。请修改 issue 以提供最小可复现示例(可以通过以下方式：1. 在任意在线编码平台如 codesanbox 编写示例。将其保存到自己空间，然后贴上链接。2. 在自己 github 中创建一个最简单的示例，然后贴上 github 链接。3. 删除项目中的 node_modules 部分，打包项目，并拖拽到 issue 输入框中上传（或提供远程可下载地址）)来重启 issue。

[qtencent7]

如果节点或线路不是处于最顶层，你是说什么样的数据结构，类似这种吗？

{
      // 节点数据
      nodes: [
        {
          id: "21", // 节点ID，需要全局唯一，不传入内部会自动生成一个ID
          type: "rect", // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型
          x: 100, // 节点形状中心在x轴位置
          y: 100, // 节点形状中心在y轴的位置
          text: "Origin Usage-rect", // 节点文本
          properties: {
            // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高
            width: 160,
            height: 80,
          },
          nodes: [
                     {
          id: "50",
          type: "circle",
          x: 300,
          y: 300,
          text: "Origin Usage-circle",
          properties: {
            r: 60,
          },
        },
         ]
        },
      ],
      // 边数据
      edges: [
        {
          id: "rect-2-circle", // 边ID，性质与节点ID一样
          type: "polyline", // 边类型
          sourceNodeId: "50", // 起始节点Id
          targetNodeId: "21", // 目标节点Id
        },
      ],
    }
```是这种节点或者边的嵌套吗

[Soundmark]

如果节点或线路不是处于最顶层，你是说什么样的数据结构，类似这种吗？

{ // 节点数据 nodes: [ { id: "21", // 节点ID，需要全局唯一，不传入内部会自动生成一个ID type: "rect", // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型 x: 100, // 节点形状中心在x轴位置 y: 100, // 节点形状中心在y轴的位置 text: "Origin Usage-rect", // 节点文本 properties: { // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高 width: 160, height: 80, }, nodes: [ { id: "50", type: "circle", x: 300, y: 300, text: "Origin Usage-circle", properties: { r: 60, }, }, ] }, ], // 边数据 edges: [ { id: "rect-2-circle", // 边ID，性质与节点ID一样 type: "polyline", // 边类型 sourceNodeId: "50", // 起始节点Id targetNodeId: "21", // 目标节点Id }, ], }

没有嵌套的，我用官方文档的快速上手中的react示例的数据也能够复现。 不是处于最顶层是指元素的zIndex不是最高的时候，点击元素选中的时候，会暂时将元素的zIndex设置为最高，就是这个操作过程出现问题。

[zzc-1024]

#2236 这个或许能帮到你

[Soundmark]

#2236 这个或许能帮到你

感谢分享，我一直以为是元素的zIndex改变通过mobx触发了什么行为，但是一直看不出问题。原来是浏览器差异的问题，我没有用其他浏览器测试过，所以从来没有往这方面想。