缩进树图，当鼠标悬浮在节点和边上时，无法拖拽画布/如何拖拽画布？

[lisonge]

<script setup lang="ts">
import { getNodeLabel, listToTree } from '@/utils/node';
import { snapshotStorage } from '@/utils/snapshot';
import type { RawNode } from '@/utils/types';
import type { EdgeData, TreeData } from '@antv/g6';
import { Graph, treeToGraphData, } from '@antv/g6';

const container = ref<HTMLElement>();

const toTreeData = (node: RawNode): TreeData => {
  const data: TreeData = {
    id: node.id.toString(),
    depth: node.attr.depth,
    children: node.children.map(toTreeData),
  };
  return data;
};

const getNodeEdge = (
  source: number | string,
  target: number | string,
): EdgeData => {
  source = String(source);
  target = String(target);
  return {
    data: { curved: true },
    id: `#${source}-${target}`,
    source,
    target,
  };
};

snapshotStorage.getItem(1728874589413).then(async (snapshot) => {
  if (!snapshot) return;
  while (!container.value) {
    await new Promise((r) => setTimeout(r));
  }
  const getNode = (id: string | number): RawNode => {
    return snapshot.nodes[id as number];
  };
  const hasChildren = (id: string | number): boolean => {
    return getNode(id).children.length > 0;
  };
  const getNodeQf = (id: string | number): boolean => {
    const n = getNode(id);
    return Boolean(n.idQf || n.textQf || n.quickFind);
  };
  const rootNode = listToTree(snapshot.nodes);
  const data = treeToGraphData(toTreeData(rootNode));
  const graph = new Graph({
    container: container.value,
    data,
    autoFit: 'view',
    animation: false,
    node: {
      type(d) {
        return hasChildren(d.id) ? 'triangle' : 'rect';
      },
      style(d) {
        return {
          size: hasChildren(d.id) ? 4 : 1,
          direction: hasChildren(d.id) ? 'down' : undefined,
          fill: hasChildren(d.id) ? '#767C82' : '#E3E3E3',
          labelPlacement: 'right',
          labelText: getNodeLabel(getNode(d.id)),
          labelOffsetX: 2,
          labelFontWeight: getNodeQf(d.id) ? 'bold' : undefined,
        };
      },
      
    },
    edge: {
      type(d) {
        if (d.data?.curved) {
          return 'quadratic';
        }
        return 'polyline';
      },
      style(d) {
        if (d.data?.curved) {
          return {
            curveOffset: -30,
            endArrow: true,
            stroke: '#FF7FFF',
          };
        }
        return {
          router: {
            type: 'orth',
          },
          stroke: '#E3E3E3',
        };
      },
    },
    layout: {
      type: 'indented',
      direction: 'LR',
      indent: 20,
      getHeight: () => 0,
    },
    behaviors: ['drag-canvas', 'zoom-canvas'],
  });
  await graph.render();
  // 必须在 render 之后添加额外边, 否则布局会被破坏(原因未知)
  graph.addEdgeData([
    getNodeEdge(0, 3),
    getNodeEdge(1, 3),
    getNodeEdge(2, 3),
    getNodeEdge(3, 10),
    getNodeEdge(1, 20),
  ]);
  await graph.draw();
});
</script>
<template>
  <div ref="container" m-24px h-900px w-1200px b-1px b-solid></div>
</template>

我只需要 behaviors: ['drag-canvas', 'zoom-canvas'], 这两个行为

我期望鼠标悬浮在 节点/节点Label/边/边Label/任意位置 都能正常响应 drag-canvas 行为

但是现在实际情况是，当鼠标悬浮在 节点/边 上时，拖动画布失效了

我不需要节点/边响应任何事件 ，请问如何实现呢？

[petercat-assistant[bot]]

在 antvis/G6 中，如果你希望在鼠标悬浮在节点或边上时仍然能够拖拽画布，你可以通过设置节点和边的 events 属性来实现。将节点和边的 events 属性设置为 false，可以禁用它们的事件响应，从而使得 drag-canvas 行为在任何位置都能正常工作。

你可以在节点和边的配置中添加 events: false，如下所示：

const graph = new Graph({
  container: container.value,
  data,
  autoFit: 'view',
  animation: false,
  node: {
    type(d) {
      return hasChildren(d.id) ? 'triangle' : 'rect';
    },
    style(d) {
      return {
        size: hasChildren(d.id) ? 4 : 1,
        direction: hasChildren(d.id) ? 'down' : undefined,
        fill: hasChildren(d.id) ? '#767C82' : '#E3E3E3',
        labelPlacement: 'right',
        labelText: getNodeLabel(getNode(d.id)),
        labelOffsetX: 2,
        labelFontWeight: getNodeQf(d.id) ? 'bold' : undefined,
      };
    },
    events: false, // 禁用节点事件
  },
  edge: {
    type(d) {
      if (d.data?.curved) {
        return 'quadratic';
      }
      return 'polyline';
    },
    style(d) {
      if (d.data?.curved) {
        return {
          curveOffset: -30,
          endArrow: true,
          stroke: '#FF7FFF',
        };
      }
      return {
        router: {
          type: 'orth',
        },
        stroke: '#E3E3E3',
      };
    },
    events: false, // 禁用边事件
  },
  layout: {
    type: 'indented',
    direction: 'LR',
    indent: 20,
    getHeight: () => 0,
  },
  behaviors: ['drag-canvas', 'zoom-canvas'],
});

通过这种方式，你可以确保在任何情况下都能正常拖拽画布，而不受节点或边事件的干扰。

如果你还有其他问题或需要进一步的帮助，请随时告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[lisonge]

node 类型 NodeOption 根本没有 events 属性

这机器人知识库是不是还停留在 v4 文档，问它问题老是给出不存在的属性

[lisonge]

解决了，给 边/节点 加上如下属性

labelPointerEvents: 'none',
pointerEvents: 'none',

总之就是设置 pointerEvents:'none'