fix: use sync way when picking (#1407)

* fix: use sync way when picking * chore: commit changeset
antvis · Jul 7, 2023 · 6cbaae4 · 6cbaae4
1 parent 654021b
commit 6cbaae4
Show file tree

Hide file tree

Showing 9 changed files with 352 additions and 215 deletions.
diff --git a/.changeset/pretty-geckos-march.md b/.changeset/pretty-geckos-march.md
@@ -0,0 +1,8 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-plugin-webgpu-device': patch
+'@antv/g-plugin-webgl-device': patch
+'@antv/g-lite': patch
+---
+
+Change picking process from async to sync way
diff --git a/packages/g-lite/src/plugins/EventPlugin.ts b/packages/g-lite/src/plugins/EventPlugin.ts
@@ -29,17 +29,14 @@ export class EventPlugin implements RenderingPlugin {
 
     const canvas = this.context.renderingContext.root.ownerDocument.defaultView;
 
-    this.context.eventService.setPickHandler(
-      async (position: EventPosition) => {
-        const { picked } =
-          await this.context.renderingService.hooks.pick.promise({
-            position,
-            picked: [],
-            topmost: true, // we only concern the topmost element
-          });
-        return picked[0] || null;
-      },
-    );
+    this.context.eventService.setPickHandler((position: EventPosition) => {
+      const { picked } = this.context.renderingService.hooks.pickSync.call({
+        position,
+        picked: [],
+        topmost: true, // we only concern the topmost element
+      });
+      return picked[0] || null;
+    });
 
     renderingService.hooks.pointerWheel.tap(
       EventPlugin.tag,

diff --git a/packages/g-lite/src/services/EventService.ts b/packages/g-lite/src/services/EventService.ts
@@ -18,7 +18,7 @@ import { Point } from '../shapes';
 import type { Cursor, EventPosition } from '../types';
 import { isElement } from '../utils/dom';
 
-type Picker = (position: EventPosition) => Promise<IEventTarget | null>;
+type Picker = (position: EventPosition) => IEventTarget | null;
 type TrackingData = {
   pressTargetsByButton: Record<number, IEventTarget[]>;
   clicksByButton: Record<
@@ -180,8 +180,8 @@ export class EventService {
     }
   }
 
-  onPointerDown = async (from: FederatedPointerEvent) => {
-    const e = await this.createPointerEvent(from);
+  onPointerDown = (from: FederatedPointerEvent) => {
+    const e = this.createPointerEvent(from);
 
     this.dispatchEvent(e, 'pointerdown');
 
@@ -199,9 +199,9 @@ export class EventService {
     this.freeEvent(e);
   };
 
-  onPointerUp = async (from: FederatedPointerEvent) => {
+  onPointerUp = (from: FederatedPointerEvent) => {
     const now = performance.now();
-    const e = await this.createPointerEvent(
+    const e = this.createPointerEvent(
       from,
       undefined,
       undefined,
@@ -307,8 +307,8 @@ export class EventService {
     this.freeEvent(e);
   };
 
-  onPointerMove = async (from: FederatedPointerEvent) => {
-    const e = await this.createPointerEvent(
+  onPointerMove = (from: FederatedPointerEvent) => {
+    const e = this.createPointerEvent(
       from,
       undefined,
       undefined,
@@ -325,7 +325,7 @@ export class EventService {
     if (trackingData.overTargets && outTarget !== e.target) {
       // pointerout always occurs on the overTarget when the pointer hovers over another element.
       const outType = from.type === 'mousemove' ? 'mouseout' : 'pointerout';
-      const outEvent = await this.createPointerEvent(
+      const outEvent = this.createPointerEvent(
         from,
         outType,
         outTarget || undefined,
@@ -337,7 +337,7 @@ export class EventService {
       // If the pointer exits overTarget and its descendants, then a pointerleave event is also fired. This event
       // is dispatched to all ancestors that no longer capture the pointer.
       if (!e.composedPath().includes(outTarget!)) {
-        const leaveEvent = await this.createPointerEvent(
+        const leaveEvent = this.createPointerEvent(
           from,
           'pointerleave',
           outTarget || undefined,
@@ -439,7 +439,7 @@ export class EventService {
     this.freeEvent(e);
   };
 
-  onPointerOut = async (from: FederatedPointerEvent) => {
+  onPointerOut = (from: FederatedPointerEvent) => {
     const trackingData = this.trackingData(from.pointerId);
 
     if (trackingData.overTargets) {
@@ -448,7 +448,7 @@ export class EventService {
       const outTarget = this.findMountedTarget(trackingData.overTargets);
 
       // pointerout first
-      const outEvent = await this.createPointerEvent(
+      const outEvent = this.createPointerEvent(
         from,
         'pointerout',
         outTarget || undefined,
@@ -459,7 +459,7 @@ export class EventService {
 
       // pointerleave(s) are also dispatched b/c the pointer must've left rootTarget and its descendants to
       // get an upstream pointerout event (upstream events do not know rootTarget has descendants).
-      const leaveEvent = await this.createPointerEvent(
+      const leaveEvent = this.createPointerEvent(
         from,
         'pointerleave',
         outTarget || undefined,
@@ -493,9 +493,9 @@ export class EventService {
     this.cursor = null;
   };
 
-  onPointerOver = async (from: FederatedPointerEvent) => {
+  onPointerOver = (from: FederatedPointerEvent) => {
     const trackingData = this.trackingData(from.pointerId);
-    const e = await this.createPointerEvent(from);
+    const e = this.createPointerEvent(from);
 
     const isMouse = e.pointerType === 'mouse' || e.pointerType === 'pen';
 
@@ -533,12 +533,12 @@ export class EventService {
     this.freeEvent(enterEvent);
   };
 
-  onPointerUpOutside = async (from: FederatedPointerEvent) => {
+  onPointerUpOutside = (from: FederatedPointerEvent) => {
     const trackingData = this.trackingData(from.pointerId);
     const pressTarget = this.findMountedTarget(
       trackingData.pressTargetsByButton[from.button],
     );
-    const e = await this.createPointerEvent(from);
+    const e = this.createPointerEvent(from);
 
     if (pressTarget) {
       let currentTarget: IEventTarget | null = pressTarget;
@@ -568,27 +568,23 @@ export class EventService {
     this.freeEvent(e);
   };
 
-  onWheel = async (from: FederatedWheelEvent) => {
-    // if (!(from instanceof FederatedWheelEvent)) {
-    //   return;
-    // }
-
-    const wheelEvent = await this.createWheelEvent(from);
+  onWheel = (from: FederatedWheelEvent) => {
+    const wheelEvent = this.createWheelEvent(from);
 
     this.dispatchEvent(wheelEvent);
     this.freeEvent(wheelEvent);
   };
 
-  onClick = async (from: FederatedPointerEvent) => {
+  onClick = (from: FederatedPointerEvent) => {
     if (this.context.config.useNativeClickEvent) {
-      const e = await this.createPointerEvent(from);
+      const e = this.createPointerEvent(from);
       this.dispatchEvent(e);
       this.freeEvent(e);
     }
   };
 
-  onPointerCancel = async (from: FederatedPointerEvent) => {
-    const e = await this.createPointerEvent(
+  onPointerCancel = (from: FederatedPointerEvent) => {
+    const e = this.createPointerEvent(
       from,
       undefined,
       undefined,
@@ -683,7 +679,7 @@ export class EventService {
     return propagationPath;
   }
 
-  async hitTest(position: EventPosition): Promise<IEventTarget | null> {
+  hitTest(position: EventPosition): IEventTarget | null {
     const { viewportX, viewportY } = position;
     const { width, height } = this.context.config;
     // outside canvas
@@ -697,7 +693,7 @@ export class EventService {
     }
 
     return (
-      (await this.pickHandler(position)) ||
+      this.pickHandler(position) ||
       this.rootTarget || // return Document
       null
     );
@@ -748,25 +744,25 @@ export class EventService {
     return null;
   }
 
-  private async pickTarget(
+  private pickTarget(
     event: FederatedPointerEvent | FederatedWheelEvent,
-  ): Promise<INode> {
+  ): INode {
     return this.hitTest({
       clientX: event.clientX,
       clientY: event.clientY,
       viewportX: event.viewportX,
       viewportY: event.viewportY,
       x: event.canvasX,
       y: event.canvasY,
-    }) as Promise<INode>;
+    }) as INode;
   }
 
-  private async createPointerEvent(
+  private createPointerEvent(
     from: FederatedPointerEvent,
     type?: string,
     target?: IEventTarget,
     fallbackTarget?: IEventTarget,
-  ): Promise<FederatedPointerEvent> {
+  ): FederatedPointerEvent {
     const event = this.allocateEvent(FederatedPointerEvent);
 
     this.copyPointerData(from, event);
@@ -780,8 +776,7 @@ export class EventService {
     event.target =
       target ??
       (existedHTML ||
-        (this.isNativeEventFromCanvas(event) &&
-          (await this.pickTarget(event))) ||
+        (this.isNativeEventFromCanvas(event) && this.pickTarget(event)) ||
         fallbackTarget);
 
     if (typeof type === 'string') {
@@ -791,9 +786,7 @@ export class EventService {
     return event;
   }
 
-  private async createWheelEvent(
-    from: FederatedWheelEvent,
-  ): Promise<FederatedWheelEvent> {
+  private createWheelEvent(from: FederatedWheelEvent): FederatedWheelEvent {
     const event = this.allocateEvent(FederatedWheelEvent);
 
     this.copyWheelData(from, event);
@@ -805,7 +798,7 @@ export class EventService {
     const existedHTML = this.getExistedHTML(event);
     event.target =
       existedHTML ||
-      (this.isNativeEventFromCanvas(event) && (await this.pickTarget(event)));
+      (this.isNativeEventFromCanvas(event) && this.pickTarget(event));
     return event;
   }