antvis/G2

自定义交互registerInteraction使用时,如果trigger是document或window,brush相关操作比如x-rect-mask计算会有偏差 #4042

Dawnwangzi posted onGitHub

  • I have searched the issues of this repository and believe that this is not a duplicate.

https://g2.antv.vision/zh/examples/interaction/brush#element-brush

Steps to reproduce

https://codesandbox.io/s/flamboyant-andras-7us99p?file=/src/index.js

问题点: trigger: 'document:mousemove',

准备: 如sandbox中代码,注册交互element-brush-x,并在processing和end阶段加入 trigger: "document:xxx“,并把图整体右移 left: 100px。 操作 :

  1. 在图中开始框选,出现x-rect-mask。
  2. 不放手继续框选,鼠标向右下方移动,直至从图的下方移出图,此时可以看到x-rect-mask出现跳变,鼠标和mask结束位置之间相差100px。 来回在图的边缘移动,可以明显观察到这个差值。鼠标和mask没有对齐。
  3. end阶段同理,也是差 「图在整个页面中右移的距离」。

期望:trigger: "document:xxx“时,鼠标和mask结束位置之间没有偏差。

image

Environment Info
g2 4.2.5
System -
Browser -

业务场景是: brush框选过滤数据时,不限制在图中移动和结束,期望在图中开始框选不放手划到图外部分仍能及时响应(可以变化框选的范围)并可以在图外结束框选。

<!-- generated by antv-issue-helper. DO NOT REMOVE -->


那你现在自定义交互的触发事件可以详细发出来吗

posted by visiky almost 3 years ago

@visiky https://codesandbox.io/s/flamboyant-andras-7us99p?file=/src/index.js 请看链接中的代码。 大致是,开始的时候记录开始位置的信息,结束框选的时候拿到结束位置信息,重新发请求重新绘制。 主体流程是这样的。链接里的内容就足够复现问题。

posted by Dawnwangzi almost 3 years ago
registerInteraction("element-brush-x", {
  showEnable: [
    { trigger: "plot:mouseenter", action: "cursor:crosshair" },
    { trigger: "plot:mouseleave", action: "cursor:default" }
  ],
  start: [
    {
      trigger: "plot:mousedown",
      action: ["brush-x:start", "x-rect-mask:start", "x-rect-mask:show"],
      callback: (context) => {
        const tooltip = context.view.getTooltipItems({
          x: context.event.x,
          y: context.event.y
        });
        console.log("xLabel", tooltip[0].title);
        console.log("x", context.event.x);
        // xStart.current.xLabel = tooltip[0]?.title;
        // xStart.current.x = context.event.x;
      }
    }
  ],
  processing: [
    {
      trigger: "plot:mousemove",
      isEnable(context) {
        return context.isInPlot();
      },
      action: ["x-rect-mask:resize"]
    },
    {
      trigger: "document:mousemove",
      isEnable(context) {
        return !context.isInPlot();
      },
      action: ["x-rect-mask:resize"]
    }
  ],
  end: [
    {
      trigger: "plot:mouseup",
      action: [
        // "brush-x:filter", 实际例子里 我们没有用filter 而是重新请求重新绘制
        "brush-x:end",
        "x-rect-mask:end",
        "x-rect-mask:hide"
      ],
      isEnable(context) {
        return context.isInPlot();
      },
      callback: (context) => {
        // 也是拿到结束的x xLabel。 然后发请求
      },
      once: true
    },
    {
      trigger: "document:mouseup",
      action: [
        // "brush-x:filter", 实际例子里 我们没有用filter 而是重新请求重新绘制
        "brush-x:end",
        "x-rect-mask:end",
        "x-rect-mask:hide"
      ],
      isEnable(context) {
        return !context.isInPlot();
      },
      callback: (context) => {
        // 也是拿到结束的x xLabel。 然后发请求
      },
      once: true
    }
  ]
});
posted by Dawnwangzi almost 3 years ago

@visiky 请问这个问题有进展吗~

posted by Dawnwangzi over 2 years ago

+1 @visiky

posted by krislavten over 2 years ago

@visiky @hustcc 大佬有进展吗

posted by Dawnwangzi over 2 years ago

Fund this Issue

$0.00
Funded

Pull requests