双击编辑和框选功能有冲突 当增加框选插件的时候 双击编辑不了

[liv-rong]

问题描述

Describe the bug
当在节点中初始化的时候 添加编辑工具 然后使用框选插件 双击编辑不了

1.初始化画布

export default class Example extends React.Component {
  private container: HTMLDivElement;
  private graph: Graph;

  componentDidMount() {
    this.graph = new Graph({
      container: this.container,
      background: {
        color: "#F2F7FA",
      },
    });

    this.graph.use(
      new Selection({
        enabled: true,
        multiple: true,
        rubberband: true,
        movable: true,
        showNodeSelectionBox: true,
      })
    );

    this.graph.addNode({
      x: 320,
      y: 100,
      width: 100,
      height: 40,
      label: "Rect",
      attrs: {
        body: {
          stroke: "#8f8f8f",
          strokeWidth: 1,
          fill: "#fff",
          rx: 6,
          ry: 6,
        },
      },
      tools: ["node-editor"],
    });

 

  render() {
    return (
      <div className="selection-app">
        <div className="app-side">
          <Settings onChange={this.onSettingChanged} />
        </div>
        <div className="app-content" ref={this.refContainer} />
      </div>
    );
  }
}

2.双击的时候效果

• 先双击全选文本
  

• 之后再点击确定光标的位置 效果确实 编辑不了文本
  

重现链接

https://codesandbox.io/p/sandbox/solitary-shape-qswzf3?file=%2FApp.tsx%3A1%2C1-127%2C1

重现步骤

Describe the bug
当在节点中初始化的时候 添加编辑工具 然后使用框选插件 双击编辑不了

1.初始化画布

import React from "react";
import { Graph } from "@antv/x6";
import { Selection } from "@antv/x6-plugin-selection";
import { Settings, State } from "./settings";
import "./index.less";

export default class Example extends React.Component {
  private container: HTMLDivElement;
  private graph: Graph;

  componentDidMount() {
    this.graph = new Graph({
      container: this.container,
      background: {
        color: "#F2F7FA",
      },
    });

    this.graph.use(
      new Selection({
        enabled: true,
        multiple: true,
        rubberband: true,
        movable: true,
        showNodeSelectionBox: true,
      })
    );

    this.graph.addNode({
      x: 320,
      y: 100,
      width: 100,
      height: 40,
      label: "Rect",
      attrs: {
        body: {
          stroke: "#8f8f8f",
          strokeWidth: 1,
          fill: "#fff",
          rx: 6,
          ry: 6,
        },
      },
      tools: ["node-editor"],
    });

    const source = this.graph.addNode({
      x: 80,
      y: 50,
      width: 100,
      height: 40,
      label: "Hello",
      attrs: {
        body: {
          stroke: "#8f8f8f",
          strokeWidth: 1,
          fill: "#fff",
          rx: 6,
          ry: 6,
        },
      },
      tools: ["node-editor"],
    });

    const target = this.graph.addNode({
      shape: "circle",
      x: 240,
      y: 200,
      width: 60,
      height: 60,
      label: "World",
      attrs: {
        body: {
          stroke: "#8f8f8f",
          strokeWidth: 1,
          fill: "#fff",
        },
      },
      tools: ["node-editor"],
    });

    this.graph.addEdge({
      source,
      target,
      attrs: {
        line: {
          stroke: "#8f8f8f",
          strokeWidth: 1,
        },
      },
    });
  }

  onSettingChanged = (options: State) => {
    this.graph.toggleMultipleSelection(options.multiple);
    this.graph.toggleSelectionMovable(options.movable);
    this.graph.toggleRubberband(options.rubberband);
    this.graph.toggleStrictRubberband(options.strict);
    this.graph.setSelectionFilter(options.filter);
    this.graph.setRubberbandModifiers(options.modifiers as any);
    this.graph.setSelectionDisplayContent(
      options.content
        ? (selection) => {
            return `${selection.length} node${
              selection.length > 1 ? "s" : ""
            } selected.`;
          }
        : null
    );
  };

  refContainer = (container: HTMLDivElement) => {
    this.container = container;
  };

  render() {
    return (
      <div className="selection-app">
        <div className="app-side">
          <Settings onChange={this.onSettingChanged} />
        </div>
        <div className="app-content" ref={this.refContainer} />
      </div>
    );
  }
}

2.双击的时候效果

• 先双击全选文本
  

• 之后再点击确定光标的位置 编辑不了文本 光标不能显示
  

预期行为

启用框选之后 双击编辑的时候 能正常使用

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

补充说明（可选）

No response

[x6-bot]

👋 @liv-rong

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[NewByVector]

建议将 showNodeSelectionBox 设置成 false，框选效果使用 className 样式来实现。这样就不会相互干扰。