Behavior的drag-node的shouldEnd不起作用 #4648

问题描述

<template>
  <div class="demo-container">
    <div class="mode-switch">
      <span
        class="mode-btn"
        :class="{ active: isDefaultMode }"
        @click="changeMode('default')"
        >默认模式</span
      >
      <span
        class="mode-btn"
        :class="{ active: isEditMode }"
        @click="changeMode('edit')"
        >编辑模式</span
      >
    </div>
    <div id="mountNode"></div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import G6 from "@antv/g6";

export default {
  setup() {
    const graph = ref(null);
    const currentMode = ref("default");

    const isDefaultMode = computed(() => currentMode.value === "default");

    const isEditMode = computed(() => currentMode.value === "edit");

    const data = {
      // 点集
      nodes: [
        {
          id: "node1",
          x: 200,
          y: 240,
        },
        {
          id: "node2",
          x: 600,
          y: 240,
        },
      ],
      // 边集
      edges: [
        // 表示一条从 node1 节点连接到 node2 节点的边
        {
          source: "node1",
          target: "node2",
        },
      ],
    };

    const changeMode = (mode) => {
      graph.value.setMode(mode);
      currentMode.value = mode;
    };

    onMounted(() => {
      // 创建 G6 图实例
      graph.value = new G6.Graph({
        container: "mountNode", // 指定图画布的容器 id
        // 画布宽高
        width: 800,
        height: 500,
        modes: {
          // 支持的 behavior
          default: ["drag-canvas", "zoom-canvas"],
          edit: [
            "click-select",
            {
              type: "drag-node",
              shouldBegin: () => {
                return true;
              },
              shouldEnd: () => {
                debugger;
                return true;
              },
            },
          ],
        },
      });
      // 读取数据
      graph.value.data(data);
      // 渲染图
      graph.value.render();
    });

    return {
      changeMode,
      isDefaultMode,
      isEditMode,
    };
  },
};
</script>

<style scoped>
.demo-container {
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mode-switch {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.mode-btn {
  display: inline-block;
  padding: 5px 9px;
  margin: 0 10px;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  background-color: rgb(94, 188, 238);
  border: 1px solid rgb(94, 188, 238);
  border-radius: 4px;
  transition: all 0.3s;
}

.mode-btn.active {
  background-color: #fff;
  color: rgb(94, 188, 238);
  border: 1px solid rgb(94, 188, 238);
}

.mode-btn:hover {
  background-color: #fff;
  color: rgb(94, 188, 238);
  border: 1px solid rgb(94, 188, 238);
}

#mountNode {
  width: 800px;
  height: 500px;
  border: 1px solid #ccc;
}
</style> 

shouldBegin有效，但是shouldEnd无法被触发

重现链接

无

重现步骤

正常拖拽节点

预期行为

期望shouldEnd能正常触发

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.8.17 ]
• vue版本[3.3.4]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response