feat: support 'pixels' in pointer-events #1373

packages/g-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "1.9.47",
+  "version": "1.9.48",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
@@ -33,11 +33,11 @@
   },
   "dependencies": {
     "@antv/g-plugin-canvas-path-generator": "^1.1.51",
-    "@antv/g-plugin-canvas-picker": "^1.8.50",
-    "@antv/g-plugin-canvas-renderer": "^1.7.59",
-    "@antv/g-plugin-dom-interaction": "^1.7.51",
-    "@antv/g-plugin-html-renderer": "^1.7.55",
-    "@antv/g-plugin-image-loader": "^1.1.53",
+    "@antv/g-plugin-canvas-picker": "^1.8.51",
+    "@antv/g-plugin-canvas-renderer": "^1.7.60",
+    "@antv/g-plugin-dom-interaction": "^1.7.52",
+    "@antv/g-plugin-html-renderer": "^1.7.56",
+    "@antv/g-plugin-image-loader": "^1.1.54",
     "@antv/util": "^3.3.1",
     "@types/offscreencanvas": "^2019.6.4",
     "tslib": "^2.3.1"

packages/g-canvaskit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "0.8.44",
+  "version": "0.8.45",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
@@ -33,11 +33,11 @@
   },
   "dependencies": {
     "@antv/g-plugin-canvas-path-generator": "^1.1.51",
-    "@antv/g-plugin-canvas-picker": "^1.8.50",
-    "@antv/g-plugin-canvaskit-renderer": "^1.1.53",
-    "@antv/g-plugin-dom-interaction": "^1.7.51",
-    "@antv/g-plugin-html-renderer": "^1.7.55",
-    "@antv/g-plugin-image-loader": "^1.1.53",
+    "@antv/g-plugin-canvas-picker": "^1.8.51",
+    "@antv/g-plugin-canvaskit-renderer": "^1.1.54",
+    "@antv/g-plugin-dom-interaction": "^1.7.52",
+    "@antv/g-plugin-html-renderer": "^1.7.56",
+    "@antv/g-plugin-image-loader": "^1.1.54",
     "@antv/util": "^3.3.1",
     "canvaskit-wasm": "^0.34.0",
     "tslib": "^2.3.1"

packages/g-gesture/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "description": "G Gesture",
   "keywords": [
     "antv",
@@ -34,7 +34,7 @@
     "eventemitter3": "^4.0.0"
   },
   "devDependencies": {
-    "@antv/g-mobile-canvas": "^0.8.55",
+    "@antv/g-mobile-canvas": "^0.8.56",
     "@antv/g-mobile-canvas-element": "^0.6.49"
   },
   "peerDependencies": {

packages/g-lite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",

packages/g-lite/src/types.ts

@@ -87,6 +87,7 @@ export interface BaseStyleProps {
     | 'visiblepainted'
     // | 'bounding-box'
     | 'all'
+    | 'non-transparent-pixel' // valid only for Image
     | CSSGlobalKeywords;
 
   /**

packages/g-mobile-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-canvas",
-  "version": "0.8.55",
+  "version": "0.8.56",
   "description": "A renderer implemented with Canvas2D API in mobile environment",
   "keywords": [
     "antv",
@@ -31,10 +31,10 @@
   },
   "dependencies": {
     "@antv/g-plugin-canvas-path-generator": "^1.1.51",
-    "@antv/g-plugin-canvas-picker": "^1.8.50",
-    "@antv/g-plugin-canvas-renderer": "^1.7.59",
-    "@antv/g-plugin-image-loader": "^1.1.53",
-    "@antv/g-plugin-mobile-interaction": "^0.7.50",
+    "@antv/g-plugin-canvas-picker": "^1.8.51",
+    "@antv/g-plugin-canvas-renderer": "^1.7.60",
+    "@antv/g-plugin-image-loader": "^1.1.54",
+    "@antv/g-plugin-mobile-interaction": "^0.7.51",
     "@antv/util": "^3.3.1",
     "tslib": "^2.3.1"
   },

packages/g-mobile-svg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-svg",
-  "version": "0.8.59",
+  "version": "0.8.60",
   "description": "A renderer implemented by SVG in mobile environment",
   "keywords": [
     "antv",
@@ -30,9 +30,9 @@
     "sync": "tnpm sync"
   },
   "dependencies": {
-    "@antv/g-plugin-mobile-interaction": "^0.7.50",
+    "@antv/g-plugin-mobile-interaction": "^0.7.51",
     "@antv/g-plugin-svg-picker": "^1.7.51",
-    "@antv/g-plugin-svg-renderer": "^1.8.59",
+    "@antv/g-plugin-svg-renderer": "^1.8.60",
     "@antv/util": "^3.3.1",
     "tslib": "^2.3.1"
   },

packages/g-mobile-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-webgl",
-  "version": "0.7.73",
+  "version": "0.7.74",
   "description": "A renderer implemented by WebGL1/2 in mobile environment",
   "keywords": [
     "antv",
@@ -30,12 +30,12 @@
     "sync": "tnpm sync"
   },
   "dependencies": {
-    "@antv/g-plugin-device-renderer": "^1.7.69",
-    "@antv/g-plugin-dragndrop": "^1.6.50",
-    "@antv/g-plugin-html-renderer": "^1.7.55",
-    "@antv/g-plugin-image-loader": "^1.1.53",
-    "@antv/g-plugin-mobile-interaction": "^0.7.50",
-    "@antv/g-plugin-webgl-device": "^1.7.53",
+    "@antv/g-plugin-device-renderer": "^1.7.70",
+    "@antv/g-plugin-dragndrop": "^1.6.51",
+    "@antv/g-plugin-html-renderer": "^1.7.56",
+    "@antv/g-plugin-image-loader": "^1.1.54",
+    "@antv/g-plugin-mobile-interaction": "^0.7.51",
+    "@antv/g-plugin-webgl-device": "^1.7.54",
     "@antv/util": "^3.3.1"
   },
   "devDependencies": {

packages/g-plugin-3d/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-3d",
-  "version": "1.7.56",
+  "version": "1.7.57",
   "description": "Provide 3D extension for G",
   "keywords": [
     "antv",
@@ -30,7 +30,7 @@
     "sync": "tnpm sync"
   },
   "dependencies": {
-    "@antv/g-shader-components": "^1.7.54",
+    "@antv/g-shader-components": "^1.7.55",
     "gl-matrix": "^3.1.0",
     "tslib": "^2.3.1"
   },

packages/g-plugin-a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-a11y",
-  "version": "0.4.51",
+  "version": "0.4.52",
   "description": "A G plugin for accessibility",
   "keywords": [
     "antv",

packages/g-plugin-annotation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-annotation",
-  "version": "0.2.68",
+  "version": "0.2.69",
   "description": "A G plugin for annotation",
   "keywords": [
     "antv",

packages/g-plugin-box2d/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-box2d",
-  "version": "1.7.52",
+  "version": "1.7.53",
   "description": "A G plugin for Box2D",
   "keywords": [
     "antv",

packages/g-plugin-canvas-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-picker",
-  "version": "1.8.50",
+  "version": "1.8.51",
   "description": "A G plugin for picking in canvas",
   "keywords": [
     "antv",
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@antv/g-plugin-canvas-path-generator": "^1.1.51",
+    "@antv/g-plugin-canvas-renderer": "^1.7.60",
     "@antv/util": "^3.3.1",
     "gl-matrix": "^3.1.0",
     "tslib": "^2.3.1"

packages/g-plugin-canvas-picker/src/CanvasPickerPlugin.ts

@@ -7,7 +7,6 @@ import type {
   Shape,
   IDocument,
   RenderingPluginContext,
-  CanvasConfig,
   GlobalRuntime,
 } from '@antv/g-lite';
 import { findClosestClipPathTarget, Point } from '@antv/g-lite';
@@ -17,20 +16,22 @@ import { mat4, vec3 } from 'gl-matrix';
 export type PointInPathPicker<T extends BaseStyleProps> = (
   displayObject: DisplayObject<T>,
   point: Point,
-  isClipPath?: boolean,
-  isPointInPath?: (
-    runtime: GlobalRuntime,
-    displayObject: DisplayObject<T>,
-    point: Point,
-  ) => boolean,
-  runtime?: GlobalRuntime,
+  isClipPath: boolean,
+  isPointInPath: (displayObject: DisplayObject<T>, point: Point) => boolean,
+  context: RenderingPluginContext,
+  runtime: GlobalRuntime,
 ) => boolean;
 
 const tmpVec3a = vec3.create();
 const tmpVec3b = vec3.create();
 const tmpVec3c = vec3.create();
 const tmpMat4 = mat4.create();
 
+interface Extended {
+  pathGeneratorFactory: Record<Shape, PathGenerator<any>>;
+  pointInPathPickerFactory: Record<Shape, PointInPathPicker<any>>;
+}
+
 /**
  * pick shape(s) with Mouse/Touch event
  *
@@ -40,46 +41,32 @@ const tmpMat4 = mat4.create();
 export class CanvasPickerPlugin implements RenderingPlugin {
   static tag = 'CanvasPicker';
 
-  private canvasConfig: Partial<CanvasConfig>;
-  private pathGeneratorFactory: Record<Shape, PathGenerator<any>>;
-  private pointInPathPickerFactory: Record<Shape, PointInPathPicker<any>>;
+  private context: RenderingPluginContext & Extended;
+  private runtime: GlobalRuntime;
 
   apply(context: RenderingPluginContext, runtime: GlobalRuntime) {
-    const {
-      config,
-      renderingService,
-      renderingContext,
-      // @ts-ignore
-      pathGeneratorFactory,
-      // @ts-ignore
-      pointInPathPickerFactory,
-    } = context;
-    this.canvasConfig = config;
-    this.pathGeneratorFactory = pathGeneratorFactory;
-    this.pointInPathPickerFactory = pointInPathPickerFactory;
+    const { renderingService, renderingContext } = context;
+    this.context = context as RenderingPluginContext & Extended;
+    this.runtime = runtime;
 
     const document = renderingContext.root?.ownerDocument;
 
     renderingService.hooks.pick.tapPromise(
       CanvasPickerPlugin.tag,
       async (result: PickingResult) => {
-        return this.pick(document, result, runtime);
+        return this.pick(document, result);
       },
     );
 
     renderingService.hooks.pickSync.tap(
       CanvasPickerPlugin.tag,
       (result: PickingResult) => {
-        return this.pick(document, result, runtime);
+        return this.pick(document, result);
       },
     );
   }
 
-  private pick(
-    document: IDocument,
-    result: PickingResult,
-    runtime: GlobalRuntime,
-  ) {
+  private pick(document: IDocument, result: PickingResult) {
     const {
       topmost,
       position: { x, y },
@@ -106,7 +93,6 @@ export class CanvasPickerPlugin implements RenderingPlugin {
         position,
         worldTransform,
         false,
-        runtime,
       );
       if (isHitOriginShape) {
         // should look up in the ancestor node
@@ -118,7 +104,6 @@ export class CanvasPickerPlugin implements RenderingPlugin {
             position,
             clipPath.getWorldTransform(),
             true,
-            runtime,
           );
           if (isHitClipPath) {
             if (topmost) {
@@ -148,10 +133,10 @@ export class CanvasPickerPlugin implements RenderingPlugin {
     position: vec3,
     worldTransform: mat4,
     isClipPath: boolean,
-    runtime: GlobalRuntime,
   ) => {
     // use picker for current shape's type
-    const pick = this.pointInPathPickerFactory[displayObject.nodeName];
+    const pick =
+      this.context.pointInPathPickerFactory[displayObject.nodeName as Shape];
     if (pick) {
       // invert with world matrix
       const invertWorldMat = mat4.invert(tmpMat4, worldTransform);
@@ -174,7 +159,8 @@ export class CanvasPickerPlugin implements RenderingPlugin {
           new Point(localPosition[0], localPosition[1]),
           isClipPath,
           this.isPointInPath,
-          runtime,
+          this.context,
+          this.runtime,
         )
       ) {
         return true;
@@ -188,16 +174,13 @@ export class CanvasPickerPlugin implements RenderingPlugin {
    * use native picking method
    * @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath
    */
-  private isPointInPath = (
-    runtime: GlobalRuntime,
-    displayObject: DisplayObject,
-    position: Point,
-  ) => {
-    const context = runtime.offscreenCanvas.getOrCreateContext(
-      this.canvasConfig.offscreenCanvas,
+  private isPointInPath = (displayObject: DisplayObject, position: Point) => {
+    const context = this.runtime.offscreenCanvas.getOrCreateContext(
+      this.context.config.offscreenCanvas,
     ) as CanvasRenderingContext2D;
 
-    const generatePath = this.pathGeneratorFactory[displayObject.nodeName];
+    const generatePath =
+      this.context.pathGeneratorFactory[displayObject.nodeName];
     if (generatePath) {
       context.beginPath();
       generatePath(context, displayObject.parsedStyle);