fix: wrong y coordinate when picking with webgl (#1747) (#1778)

.changeset/cool-crews-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-device-renderer': patch
+---
+
+fix: wrong y coordinate when picking with webgl (#1747)

.prettierrc

@@ -4,6 +4,6 @@
   "trailingComma": "all",
   "bracketSpacing": true,
   "arrowParens": "always",
-  "printWidth": 120,
+  "printWidth": 80,
   "proseWrap": "never"
 }

__tests__/demos/bugfix/1747.ts

@@ -0,0 +1,58 @@
+import { Text, Path, Rect } from '@antv/g';
+
+export async function test_pick(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const test = (shape, property) => {
+    shape.addEventListener('pointerenter', () => {
+      shape.style[property] = 'red';
+    });
+    shape.addEventListener('pointerleave', () => {
+      shape.style[property] = 'black';
+    });
+  };
+
+  const text = new Text({
+    style: {
+      text: 'test123213',
+      fontSize: 20,
+      x: 300,
+      y: 300,
+      cursor: 'pointer',
+      // transform: 'rotate(45)',
+    },
+  });
+  console.log(text.getBounds());
+
+  const path = new Path({
+    style: {
+      d: 'M 100,100 L 150,100 L 150,150 Z',
+      fill: 'black',
+      // transform: 'rotate(45)',
+      cursor: 'pointer',
+    },
+  });
+
+  test(text, 'fill');
+  test(path, 'fill');
+
+  canvas.appendChild(text);
+  // canvas.appendChild(path);
+
+  const { x, y, width, height } = text.getBBox();
+  const rect = new Rect({
+    style: {
+      x,
+      y,
+      width,
+      height,
+      stroke: 'black',
+      // transform: 'rotate(45)',
+      cursor: 'pointer',
+    },
+  });
+  test(rect, 'stroke');
+
+  // canvas.appendChild(rect);
+}

__tests__/demos/bugfix/index.ts

@@ -6,3 +6,4 @@ export { image } from './1636';
 export { shadowroot_offset } from './1677';
 export { gradient_text } from './1572';
 export { zoom } from './1667';
+export { test_pick } from './1747';

packages/g-plugin-device-renderer/src/PickingPlugin.ts

@@ -338,7 +338,8 @@ export class PickingPlugin implements RenderingPlugin {
       canvasWidth * dpr,
       canvasHeight * dpr,
       x,
-      y,
+      // fix https://github.com/antvis/G/issues/1747
+      canvasHeight * dpr - y,
       width,
       height,
     );

vite.config.mjs

@@ -1,14 +1,14 @@
 import path from 'path';
 import process from 'process';
-import { fileURLToPath } from 'url';
+import { fileURLToPath, URL } from 'url';
 import { defineConfig } from 'vite';
 import glslify from 'rollup-plugin-glslify';
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 const resolve = (packageName) => {
   return path.resolve(__dirname, path.join('./packages/', packageName, process.env.CI ? 'dist/index.esm.js' : 'src'));