feat: add elementsFromBBox on document (#1152)

* feat: add outputSVGElementId option in g-svg #1148 * feat: support brush selection in annotation plugin * feat: add elementsFromBBox on Document #1151 * fix: use offsetTop/Left to make container & HTML coincided #1150 * Publish - @antv/g-camera-api@1.0.1 - @antv/g-canvas@1.9.0 - @antv/g-canvaskit@0.8.0 - @antv/g-compat@1.0.1 - @antv/g-components@1.7.12 - @antv/g-css-layout-api@1.0.1 - @antv/g-css-typed-om-api@1.0.1 - @antv/g-devtool@0.10.12 - @antv/g-dom-mutation-observer-api@1.0.1 - @antv/g-gesture@0.0.35 - @antv/g-image-exporter@0.5.12 - @antv/g-layout-blocklike@1.7.12 - @antv/g-lite@1.0.1 - @antv/g-math@1.7.12 - @antv/g-mobile-canvas-element@0.6.12 - @antv/g-mobile-canvas@0.8.9 - @antv/g-mobile-svg@0.8.9 - @antv/g-mobile-webgl@0.7.15 - @antv/g-plugin-3d@1.7.12 - @antv/g-plugin-a11y@0.4.12 - @antv/g-plugin-annotation@0.2.9 - @antv/g-plugin-box2d@1.7.12 - @antv/g-plugin-canvas-path-generator@1.1.12 - @antv/g-plugin-canvas-picker@1.8.9 - @antv/g-plugin-canvas-renderer@1.7.15 - @antv/g-plugin-canvaskit-renderer@1.1.13 - @antv/g-plugin-control@1.7.12 - @antv/g-plugin-css-select@1.7.12 - @antv/g-plugin-device-renderer@1.7.15 - @antv/g-plugin-dom-interaction@1.7.12 - @antv/g-plugin-dragndrop@1.6.12 - @antv/g-plugin-gpgpu@1.7.12 - @antv/g-plugin-html-renderer@1.7.12 - @antv/g-plugin-image-loader@1.1.13 - @antv/g-plugin-matterjs@1.7.12 - @antv/g-plugin-mobile-interaction@0.7.12 - @antv/g-plugin-physx@1.7.12 - @antv/g-plugin-rough-canvas-renderer@1.7.12 - @antv/g-plugin-rough-svg-renderer@1.7.12 - @antv/g-plugin-svg-picker@1.7.12 - @antv/g-plugin-svg-renderer@1.8.9 - @antv/g-plugin-webgl-device@1.7.12 - @antv/g-plugin-webgpu-device@1.7.12 - @antv/g-plugin-yoga@1.7.12 - @antv/g-shader-components@1.7.12 - @antv/g-svg@1.8.9 - @antv/g-web-animations-api@1.0.1 - @antv/g-web-components@1.7.12 - @antv/g-webgl@1.7.15 - @antv/g-webgpu@1.7.15 - @antv/g@5.8.9 - @antv/react-g@1.8.9 - @antv/g-site@1.8.9
antvis · Sep 15, 2022 · 2d0c7f8 · 2d0c7f8
1 parent ed522cf
commit 2d0c7f8
Show file tree

Hide file tree

Showing 93 changed files with 1,806 additions and 380 deletions.
diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-camera-api",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple implementation of Camera API.",
   "keywords": [
     "antv",

diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
@@ -30,12 +30,12 @@
     "README.md"
   ],
   "dependencies": {
-    "@antv/g-plugin-canvas-path-generator": "^1.1.11",
-    "@antv/g-plugin-canvas-picker": "^1.8.8",
-    "@antv/g-plugin-canvas-renderer": "^1.7.14",
-    "@antv/g-plugin-dom-interaction": "^1.7.11",
-    "@antv/g-plugin-html-renderer": "^1.7.11",
-    "@antv/g-plugin-image-loader": "^1.1.12",
+    "@antv/g-plugin-canvas-path-generator": "^1.1.12",
+    "@antv/g-plugin-canvas-picker": "^1.8.9",
+    "@antv/g-plugin-canvas-renderer": "^1.7.15",
+    "@antv/g-plugin-dom-interaction": "^1.7.12",
+    "@antv/g-plugin-html-renderer": "^1.7.12",
+    "@antv/g-plugin-image-loader": "^1.1.13",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
@@ -30,12 +30,12 @@
     "README.md"
   ],
   "dependencies": {
-    "@antv/g-plugin-canvas-path-generator": "^1.1.11",
-    "@antv/g-plugin-canvas-picker": "^1.8.8",
-    "@antv/g-plugin-canvaskit-renderer": "^1.1.12",
-    "@antv/g-plugin-dom-interaction": "^1.7.11",
-    "@antv/g-plugin-html-renderer": "^1.7.11",
-    "@antv/g-plugin-image-loader": "^1.1.12",
+    "@antv/g-plugin-canvas-path-generator": "^1.1.12",
+    "@antv/g-plugin-canvas-picker": "^1.8.9",
+    "@antv/g-plugin-canvaskit-renderer": "^1.1.13",
+    "@antv/g-plugin-dom-interaction": "^1.7.12",
+    "@antv/g-plugin-html-renderer": "^1.7.12",
+    "@antv/g-plugin-image-loader": "^1.1.13",
     "canvaskit-wasm": "^0.34.0",
     "tslib": "^2.3.1"
   },

diff --git a/packages/g-compat/package.json b/packages/g-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-compat",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "The migration build which provides some compatible API for G 4.0.",
   "keywords": [
     "antv",

diff --git a/packages/g-components/package.json b/packages/g-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-components",
-  "version": "1.7.11",
+  "version": "1.7.12",
   "description": "Components for g",
   "keywords": [
     "antv",

diff --git a/packages/g-css-layout-api/package.json b/packages/g-css-layout-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-css-layout-api",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple implementation of CSS Layout API.",
   "keywords": [
     "antv",

diff --git a/packages/g-css-typed-om-api/package.json b/packages/g-css-typed-om-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-css-typed-om-api",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple implementation of CSS Typed OM API.",
   "keywords": [
     "antv",

diff --git a/packages/g-devtool/package.json b/packages/g-devtool/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@antv/g-devtool",
   "private": true,
-  "version": "0.10.11",
+  "version": "0.10.12",
   "description": "devtool for g in browser",
   "main": "index.js",
   "license": "MIT",

diff --git a/packages/g-dom-mutation-observer-api/package.json b/packages/g-dom-mutation-observer-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-dom-mutation-observer-api",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple implementation of DOM MutationObserver API.",
   "keywords": [
     "antv",

diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "G Gesture",
   "keywords": [
     "antv",
@@ -31,8 +31,8 @@
     "eventemitter3": "^4.0.0"
   },
   "devDependencies": {
-    "@antv/g-mobile-canvas": "^0.8.8",
-    "@antv/g-mobile-canvas-element": "^0.6.11"
+    "@antv/g-mobile-canvas": "^0.8.9",
+    "@antv/g-mobile-canvas-element": "^0.6.12"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/g-image-exporter/package.json b/packages/g-image-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-image-exporter",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "description": "A image exporter for G using DOM API",
   "keywords": [
     "antv",

diff --git a/packages/g-layout-blocklike/package.json b/packages/g-layout-blocklike/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-layout-blocklike",
-  "version": "1.7.11",
+  "version": "1.7.12",
   "description": "A blocklike layout",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",
@@ -29,7 +29,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@antv/g-math": "^1.7.9",
+    "@antv/g-math": "^1.7.12",
     "@antv/util": "^3.2.3",
     "@types/offscreencanvas": "^2019.6.4",
     "d3-color": "^1.4.0",

diff --git a/packages/g-lite/src/AbstractRenderer.ts b/packages/g-lite/src/AbstractRenderer.ts
@@ -64,7 +64,10 @@ export class AbstractRenderer implements IRenderer {
   }
 
   registerPlugin(plugin: RendererPlugin) {
-    this.plugins.push(plugin);
+    const index = this.plugins.findIndex((p) => p === plugin);
+    if (index === -1) {
+      this.plugins.push(plugin);
+    }
   }
 
   unregisterPlugin(plugin: RendererPlugin) {

diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts
@@ -1,4 +1,5 @@
 import { GlobalContainer } from 'mana-syringe';
+import type RBush from 'rbush';
 import {
   cancelAnimationFrame as cancelRAF,
   requestAnimationFrame as rAF,
@@ -8,6 +9,8 @@ import type { ICamera } from './camera';
 import { CameraContribution, CameraTrackingMode, CameraType } from './camera';
 import { CameraEvent, CameraProjectionMode, DefaultCamera } from './camera';
 import { containerModule as commonContainerModule } from './canvas-module';
+import type { RBushNodeAABB } from './components';
+import { RBushRoot } from './components';
 import { CustomElement, DisplayObject } from './display-objects';
 import type { Element, FederatedEvent, IChildNode } from './dom';
 import { CustomEvent, Document, ElementEvent, EventTarget } from './dom';
@@ -328,6 +331,10 @@ export class Canvas extends EventTarget implements ICanvas {
     return this.container.get<RenderingContext>(RenderingContext);
   }
 
+  getRBushRoot() {
+    return this.container.get<RBush<RBushNodeAABB>>(RBushRoot);
+  }
+
   getStats() {
     return this.getRenderingService().getStats();
   }

diff --git a/packages/g-lite/src/css/properties/CSSPropertyClipPath.ts b/packages/g-lite/src/css/properties/CSSPropertyClipPath.ts
@@ -57,7 +57,13 @@ export class CSSPropertyClipPath implements Partial<CSSProperty<DisplayObject, D
       }
       newClipPath.parsedStyle.clipPathTargets.push(object);
     }
-    this.sceneGraphService.dirtifyToRoot(object);
+
+    // should affect children
+    object.forEach((leaf) => {
+      if (leaf.childNodes.length === 0) {
+        this.sceneGraphService.dirtifyToRoot(leaf);
+      }
+    });
 
     return newClipPath;
   }

diff --git a/packages/g-lite/src/dom/Document.ts b/packages/g-lite/src/dom/Document.ts
@@ -1,9 +1,9 @@
 import { GlobalContainer } from 'mana-syringe';
 import { isFunction } from '@antv/util';
 import { BUILT_IN_PROPERTIES } from '../css';
-import { Group, Text } from '../display-objects';
+import { DisplayObjectPool, Group, Text } from '../display-objects';
 import type { DisplayObject } from '../display-objects/DisplayObject';
-import type { BaseStyleProps } from '../types';
+import type { BaseStyleProps, ParsedBaseStyleProps } from '../types';
 import { AnimationTimelineToken, Shape } from '../types';
 import { ERROR_MSG_METHOD_NOT_IMPLEMENTED, ERROR_MSG_USE_DOCUMENT_ELEMENT } from '../utils';
 import type {
@@ -132,6 +132,43 @@ export class Document extends Node implements IDocument {
     } catch (e) {}
   }
 
+  /**
+   * Picking 2D graphics with RBush based on BBox, fast but inaccurate.
+   */
+  elementsFromBBox(minX: number, minY: number, maxX: number, maxY: number): DisplayObject[] {
+    const rBush = this.defaultView.getRBushRoot();
+    const rBushNodes = rBush.search({ minX, minY, maxX, maxY });
+    const displayObjectPool = GlobalContainer.get(DisplayObjectPool);
+
+    const hitTestList: DisplayObject[] = [];
+    rBushNodes.forEach(({ id }) => {
+      const displayObject = displayObjectPool.getByEntity(id);
+      const { pointerEvents } = displayObject.parsedStyle as ParsedBaseStyleProps;
+
+      // account for `visibility`
+      // @see https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
+      const isVisibilityAffected = [
+        'auto',
+        'visiblepainted',
+        'visiblefill',
+        'visiblestroke',
+        'visible',
+      ].includes(pointerEvents);
+
+      if (
+        (!isVisibilityAffected || (isVisibilityAffected && displayObject.isVisible())) &&
+        !displayObject.isCulled() &&
+        displayObject.isInteractive()
+      ) {
+        hitTestList.push(displayObject);
+      }
+    });
+    // find group with max z-index
+    hitTestList.sort((a, b) => b.sortable.renderOrder - a.sortable.renderOrder);
+
+    return hitTestList;
+  }
+
   /**
    * Do picking with API instead of triggering interactive events.
    *

diff --git a/packages/g-lite/src/dom/interfaces.ts b/packages/g-lite/src/dom/interfaces.ts
@@ -1,4 +1,6 @@
+import type RBush from 'rbush';
 import type { ICamera } from '../camera';
+import type { RBushNodeAABB } from '../components';
 import type { DisplayObject } from '../display-objects';
 import type { ContextService, EventService, RenderingService } from '../services';
 import type { PointLike } from '../shapes';
@@ -486,6 +488,7 @@ export interface IDocument extends INode, IParentNode {
 
   elementFromPoint: (x: number, y: number) => Promise<DisplayObject>;
   elementsFromPoint: (x: number, y: number) => Promise<DisplayObject[]>;
+  elementsFromBBox: (minX: number, minY: number, maxX: number, maxY: number) => DisplayObject[];
 }
 
 /**
@@ -524,6 +527,7 @@ export interface ICanvas extends IEventTarget {
   getContextService: () => ContextService<unknown>;
   getRenderingService: () => RenderingService;
   getEventService: () => EventService;
+  getRBushRoot: () => RBush<RBushNodeAABB>;
 
   client2Viewport: (client: PointLike) => PointLike;
   viewport2Client: (viewport: PointLike) => PointLike;

diff --git a/packages/g-lite/src/index.ts b/packages/g-lite/src/index.ts
@@ -56,6 +56,7 @@ export {
   createVec3,
   findClosestClipPathTarget,
   getOrCalculatePathTotalLength,
+  definedProps,
 } from './utils';
 export { RBush };
 

diff --git a/packages/g-lite/src/services/EventService.ts b/packages/g-lite/src/services/EventService.ts
@@ -270,9 +270,8 @@ export class EventService {
       if (!e.detail?.preventClick) {
         if (clickEvent.pointerType === 'mouse' || clickEvent.pointerType === 'touch') {
           this.dispatchEvent(clickEvent, 'click');
-        } else {
-          this.dispatchEvent(clickEvent, 'pointertap');
         }
+        this.dispatchEvent(clickEvent, 'pointertap');
       }
 
       this.freeEvent(clickEvent);

diff --git a/packages/g-lite/src/services/SceneGraphService.ts b/packages/g-lite/src/services/SceneGraphService.ts
@@ -519,39 +519,43 @@ export class DefaultSceneGraphService implements SceneGraphService {
     const tmpQuat = quat.fromValues(0, 0, 0, 1);
 
     return (transform: Transform) => {
-      // @see https://github.com/mattdesl/css-mat4/blob/master/index.js
-      // mat4.fromRotationTranslationScaleOrigin(
-      //   transform.localTransform,
-      //   transform.localRotation,
-      //   transform.localPosition,
-      //   transform.localScale,
-      //   transform.origin,
-      // );
-
-      mat4.fromRotationTranslationScaleOrigin(
-        transform.localTransform,
-        transform.localRotation,
-        transform.localPosition,
-        vec3.fromValues(1, 1, 1),
-        transform.origin,
-      );
+      const hasSkew = transform.localSkew[0] !== 0 || transform.localSkew[1] !== 0;
 
-      // apply skew2D
-      if (transform.localSkew[0] !== 0 || transform.localSkew[1] !== 0) {
-        const tmpMat4 = mat4.identity(tmpMat);
-        tmpMat4[4] = Math.tan(transform.localSkew[0]);
-        tmpMat4[1] = Math.tan(transform.localSkew[1]);
-        mat4.multiply(transform.localTransform, transform.localTransform, tmpMat4);
-      }
+      if (hasSkew) {
+        mat4.fromRotationTranslationScaleOrigin(
+          transform.localTransform,
+          transform.localRotation,
+          transform.localPosition,
+          vec3.fromValues(1, 1, 1),
+          transform.origin,
+        );
 
-      const scaling = mat4.fromRotationTranslationScaleOrigin(
-        tmpMat,
-        tmpQuat,
-        tmpPosition,
-        transform.localScale,
-        transform.origin,
-      );
-      mat4.multiply(transform.localTransform, transform.localTransform, scaling);
+        // apply skew2D
+        if (transform.localSkew[0] !== 0 || transform.localSkew[1] !== 0) {
+          const tmpMat4 = mat4.identity(tmpMat);
+          tmpMat4[4] = Math.tan(transform.localSkew[0]);
+          tmpMat4[1] = Math.tan(transform.localSkew[1]);
+          mat4.multiply(transform.localTransform, transform.localTransform, tmpMat4);
+        }
+
+        const scaling = mat4.fromRotationTranslationScaleOrigin(
+          tmpMat,
+          tmpQuat,
+          tmpPosition,
+          transform.localScale,
+          transform.origin,
+        );
+        mat4.multiply(transform.localTransform, transform.localTransform, scaling);
+      } else {
+        // @see https://github.com/mattdesl/css-mat4/blob/master/index.js
+        mat4.fromRotationTranslationScaleOrigin(
+          transform.localTransform,
+          transform.localRotation,
+          transform.localPosition,
+          transform.localScale,
+          transform.origin,
+        );
+      }
     };
   })();
 

diff --git a/packages/g-lite/src/utils/assert.ts b/packages/g-lite/src/utils/assert.ts
@@ -19,6 +19,9 @@ export function DCHECK_NE(a: any, b: any) {
   }
 }
 
+export const definedProps = (obj: object) =>
+  Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== undefined));
+
 const FORMAT_ATTR_MAP = {
   d: {
     alias: 'path',