fix: fix unexpected canvas access after switch renderer (#6110)

* test: remove useless demo * fix: fix unexpected canvas access after switch renderer
antvis · Aug 2, 2024 · bcc5118 · bcc5118
1 parent 51d4d7f
commit bcc5118
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 46 deletions.
diff --git a/packages/g6-extension-3d/__tests__/demos/switch-renderer.ts b/packages/g6-extension-3d/__tests__/demos/switch-renderer.ts
@@ -1,11 +1,14 @@
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import type { NodeData } from '@antv/g6';
 import { ExtensionCategory, Graph, register } from '@antv/g6';
-import { Light, Sphere, renderer } from '../../src';
+import { Light, Line3D, ObserveCanvas3D, Sphere, ZoomCanvas3D, renderer } from '../../src';
 
 export const switchRenderer: TestCase = async (context) => {
   register(ExtensionCategory.PLUGIN, '3d-light', Light);
   register(ExtensionCategory.NODE, 'sphere', Sphere);
+  register(ExtensionCategory.EDGE, 'line3d', Line3D);
+  register(ExtensionCategory.BEHAVIOR, 'observe-canvas-3d', ObserveCanvas3D);
+  register(ExtensionCategory.BEHAVIOR, 'zoom-canvas-3d', ZoomCanvas3D);
 
   const nodes: NodeData[] = [{ id: '1' }, { id: '2' }];
 
@@ -26,10 +29,35 @@ export const switchRenderer: TestCase = async (context) => {
       if (name === '2d') {
         graph.setOptions({
           renderer: () => new CanvasRenderer(),
+          behaviors: [
+            'zoom-canvas',
+            'drag-canvas',
+            'drag-element',
+            {
+              type: 'hover-activate',
+              degree: 1,
+              state: 'highlight',
+            },
+          ],
           node: {
             type: 'circle',
+            state: {
+              highlight: {
+                fill: '#D580FF',
+              },
+            },
+          },
+          edge: {
+            style: {
+              labelBackgroundFill: '#FFF',
+              labelBackground: true,
+            },
+          },
+          layout: {
+            type: 'force',
+            preventOverlap: true,
+            animation: false,
           },
-          plugins: [],
         });
       } else {
         graph.setOptions({
@@ -40,14 +68,32 @@ export const switchRenderer: TestCase = async (context) => {
               materialType: 'phong',
             },
           },
+          edge: {
+            type: 'line3d',
+          },
           plugins: [
+            {
+              type: 'camera-setting',
+              projectionMode: 'orthographic',
+              near: 1,
+              far: 10000,
+              fov: 45,
+              aspect: 1,
+            },
             {
               type: '3d-light',
               directional: {
                 direction: [0, 0, 1],
               },
             },
+            {
+              type: 'background',
+              backgroundImage:
+                'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*M_OaRrzIZOEAAAAAAAAAAAAADmJ7AQ/original)',
+              backgroundPosition: 'center',
+            },
           ],
+          behaviors: ['observe-canvas-3d', 'zoom-canvas-3d'],
         });
       }
 

diff --git a/packages/g6/__tests__/demos/canvas-switch-renderer.ts b/packages/g6/__tests__/demos/canvas-switch-renderer.ts
diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts
@@ -19,7 +19,6 @@ export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorOptimizeViewportTransform } from './behavior-optimize-viewport-transform';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
-export { canvasSwitchRenderer } from './canvas-switch-renderer';
 export { caseIndentedTree } from './case-indented-tree';
 export { caseOrgChart } from './case-org-chart';
 export { elementCombo } from './combo';

diff --git a/packages/g6/src/behaviors/drag-canvas.ts b/packages/g6/src/behaviors/drag-canvas.ts
@@ -174,6 +174,7 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
 
   public destroy(): void {
     this.shortcut.destroy();
+    this.unbindEvents();
     this.context.canvas.setCursor(this.defaultCursor);
     super.destroy();
   }

diff --git a/packages/g6/src/behaviors/zoom-canvas.ts b/packages/g6/src/behaviors/zoom-canvas.ts
@@ -1,4 +1,4 @@
-import { clamp, isArray, isFunction, isObject } from '@antv/util';
+import { clamp, isFunction } from '@antv/util';
 import { CommonEvent } from '../constants';
 import type { RuntimeContext } from '../runtime/types';
 import type { IKeyboardEvent, IWheelEvent, Point, PointObject, ViewportAnimationEffectTiming } from '../types';
@@ -98,15 +98,15 @@ export class ZoomCanvas extends BaseBehavior<ZoomCanvasOptions> {
     const { trigger } = this.options;
     this.shortcut.unbindAll();
 
-    if (isArray(trigger)) {
-      this.preventDefault(CommonEvent.WHEEL);
+    if (Array.isArray(trigger)) {
+      this.context.canvas.getContainer()?.addEventListener(CommonEvent.WHEEL, this.preventDefault);
       this.shortcut.bind([...trigger, CommonEvent.WHEEL], (event) => {
         const { deltaX, deltaY } = event;
         this.zoom(-(deltaY ?? deltaX), event, false);
       });
     }
 
-    if (isObject(trigger)) {
+    if (typeof trigger === 'object') {
       const {
         zoomIn = [],
         zoomOut = [],
@@ -170,12 +170,9 @@ export class ZoomCanvas extends BaseBehavior<ZoomCanvasOptions> {
     return !!enable;
   }
 
-  private preventDefault(eventName: string) {
-    const listener = (e: Event) => e.preventDefault();
-    const container = this.context.canvas.getContainer();
-    if (!container) return;
-    container.addEventListener(eventName, listener);
-  }
+  private preventDefault = (event: Event) => {
+    event.preventDefault();
+  };
 
   /**
    * <zh/> 销毁缩放画布
@@ -184,6 +181,7 @@ export class ZoomCanvas extends BaseBehavior<ZoomCanvasOptions> {
    */
   public destroy() {
     this.shortcut.destroy();
+    this.context.canvas.getContainer()?.removeEventListener(CommonEvent.WHEEL, this.preventDefault);
     super.destroy();
   }
 }