feat: add behavior controller and zoom-canvas (#5470)

* feat(utils): add parseBehaviors util * feat(constants): add events definition * refactor(event): rename Event to BaseEvent * refactor(utils): adjust events * refactor(utils): move isNode to element * feat(utils): add isEdge util * feat(utils): add eventTargetOf util * feat(runtime): add behavior controller * refactor(runtime): viewport emit standard event * feat(behaviors): add zoom-canvas * chore(test): update test env * refactor(runtime): export event, destroy behavior, add test cases
antvis · Feb 26, 2024 · b86bdcd · b86bdcd
1 parent d2d2bc6
commit b86bdcd
Show file tree

Hide file tree

Showing 52 changed files with 3,743 additions and 191 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,7 +12,10 @@
     "afterelementzindexchange",
     "afterlayout",
     "afterrender",
+    "afterrotate",
+    "aftertranslate",
     "afterviewportanimate",
+    "afterzoom",
     "bbox",
     "beforeanimate",
     "beforedraw",
@@ -25,7 +28,10 @@
     "beforeelementzindexchange",
     "beforelayout",
     "beforerender",
+    "beforerotate",
+    "beforetranslate",
     "beforeviewportanimate",
+    "beforezoom",
     "cancelviewportanimate",
     "dendrogram",
     "elementstatechange",

diff --git a/packages/g6/__tests__/demo/case/behavior-zoom-canvas.ts b/packages/g6/__tests__/demo/case/behavior-zoom-canvas.ts
@@ -0,0 +1,81 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/cluster.json';
+import type { STDTestCase } from '../types';
+
+export const behaviorZoomCanvas: STDTestCase = async (context) => {
+  const { canvas, animation } = context;
+  const graph = new Graph({
+    animation,
+    container: canvas,
+    data,
+    layout: {
+      type: 'd3force',
+    },
+    node: {
+      style: {
+        size: 20,
+      },
+    },
+    zoomRange: [0.5, 5],
+    behaviors: [{ type: 'zoom-canvas' }],
+  });
+
+  await graph.render();
+
+  behaviorZoomCanvas.form = [
+    {
+      label: 'Disable Zoom: ',
+      type: 'input',
+      onload: (input) => {
+        input.onchange = (e) => {
+          graph.setBehaviors((currBehaviors) => {
+            return currBehaviors.map((behavior, index) => {
+              const target = e.target as HTMLInputElement;
+              if (index === 0 && typeof behavior === 'object') {
+                return { ...behavior, enable: !target.checked };
+              }
+              return behavior;
+            });
+          });
+        };
+      },
+      options: { type: 'checkbox' },
+    },
+    {
+      type: 'button',
+      onload: (button) => {
+        button.innerText = 'Add Shortcut Zoom';
+        button.onclick = () => {
+          graph.setBehaviors((currBehaviors) => [
+            ...currBehaviors,
+            {
+              key: 'shortcut-zoom-canvas',
+              type: 'zoom-canvas',
+              trigger: {
+                zoomIn: ['Control', '='],
+                zoomOut: ['Control', '-'],
+                reset: ['Control', '0'],
+              },
+            },
+          ]);
+          alert('Zoom behavior added');
+        };
+      },
+    },
+
+    {
+      type: 'button',
+      onload: (button) => {
+        button.innerText = 'Remove Shortcut Zoom';
+        button.onclick = () => {
+          graph.setBehaviors((currBehaviors) => {
+            return currBehaviors.slice(0, 1);
+          });
+          alert('Zoom behavior removed');
+        };
+      },
+    },
+  ];
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts
@@ -0,0 +1 @@
+export * from './behavior-zoom-canvas';
diff --git a/packages/g6/__tests__/demo/index.ts b/packages/g6/__tests__/demo/index.ts
@@ -1 +1,3 @@
-export * from './static';
+export * as animations from './animation';
+export * as cases from './case';
+export * as statics from './static';
diff --git a/packages/g6/__tests__/demo/types.ts b/packages/g6/__tests__/demo/types.ts
@@ -1,3 +1,4 @@
+import { Graph } from '@/src';
 import type { Canvas } from '@/src/runtime/canvas';
 import type { IAnimation } from '@antv/g';
 
@@ -63,5 +64,22 @@ export interface BaseTestCase {
    * @returns
    */
   postprocess?: () => Promise<void>;
-  form?: { label?: string; type: string; options?: Record<string, unknown>; onload?: (el: HTMLElement) => void }[];
+  form?: PanelFormItem[];
 }
+
+export interface STDTestCase {
+  form?: PanelFormItem[];
+  (context: STDTestCaseContext): Promise<Graph>;
+}
+
+export interface STDTestCaseContext {
+  canvas: Canvas;
+  animation?: boolean;
+}
+
+type PanelFormItem = {
+  label?: string;
+  type: string;
+  options?: Record<string, unknown>;
+  onload?: (el: HTMLElement) => void;
+};
diff --git a/packages/g6/__tests__/main.ts b/packages/g6/__tests__/main.ts
@@ -1,13 +1,9 @@
 import '../src/preset';
-import * as animations from './demo/animation';
-import * as statics from './demo/static';
+import * as demos from './demo';
 import type { TestCase } from './demo/types';
 import { createGraphCanvas } from './utils';
 
-const CASES = {
-  statics,
-  animations,
-} as unknown as { [key: string]: Record<string, TestCase> };
+const CASES = demos as unknown as { [key: string]: Record<string, TestCase> };
 
 const casesSelect = document.getElementById('demo-select') as HTMLSelectElement;
 const rendererSelect = document.getElementById('renderer-select') as HTMLSelectElement;
@@ -71,7 +67,7 @@ function onchange(testCase: TestCase, renderer: string, animation: boolean, them
 
   return canvas.init().then(async () => {
     const result = await testCase({ canvas, animation, theme, env: 'dev' });
-    if (result) setTimer(result.totalDuration);
+    if (result?.totalDuration) setTimer(result.totalDuration);
     else clearTimer();
   });
 }
@@ -86,7 +82,7 @@ function initialize() {
 function syncParamsFromSearch() {
   const searchParams = new URLSearchParams(window.location.search);
   const type = searchParams.get('type') || 'statics';
-  const testCase = searchParams.get('case') || Object.keys(statics)[0];
+  const testCase = searchParams.get('case') || Object.keys(CASES.statics)[0];
   const rendererName = searchParams.get('renderer') || 'canvas';
   const animation = searchParams.get('animation') || 'true';
 
@@ -107,15 +103,21 @@ function mountCustomPanel(form: TestCase['form'] = []) {
   const customPanel = document.getElementById('custom-panel')!;
 
   form.forEach(({ label, type, options = {}, onload }) => {
+    const item = document.createElement('div');
+    item.style.display = 'flex';
+    item.style.alignItems = 'center';
+    customPanel.appendChild(item);
+
     if (label) {
       const labelEl = document.createElement('label');
       labelEl.textContent = label;
-      customPanel.appendChild(labelEl);
+      item.appendChild(labelEl);
     }
 
     const element = document.createElement(type);
+    if (type === 'button') element.style.width = '100%';
     Object.assign(element, options);
-    customPanel.appendChild(element);
+    item.appendChild(element);
 
     onload?.(element);
   });