refactor: dev env add fps monitor

antvis · Dec 30, 2024 · 3288ed4 · 3288ed4
1 parent 0c84e3c
commit 3288ed4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.17.10",
+    "@types/stats.js": "^0.17.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "chalk": "^4.1.2",

diff --git a/packages/g6/__tests__/index.html b/packages/g6/__tests__/index.html
@@ -52,6 +52,7 @@
 
   <body style="font-family: Arial, Helvetica, sans-serif">
     <div id="panel"></div>
+    <div id="stats"></div>
     <div id="app"></div>
     <script type="module" src="./main.ts"></script>
   </body>

diff --git a/packages/g6/__tests__/main.ts b/packages/g6/__tests__/main.ts
@@ -1,6 +1,8 @@
+import { CanvasEvent } from '@antv/g';
+import { Canvas, ComboEvent, CommonEvent, EdgeEvent, NodeEvent } from '@antv/g6';
 import type { Controller } from 'lil-gui';
 import GUI from 'lil-gui';
-import { ComboEvent, CommonEvent, EdgeEvent, NodeEvent } from '../src';
+import Stats from 'stats.js';
 import '../src/preset';
 import * as demos from './demos';
 import { createGraphCanvas } from './utils';
@@ -36,6 +38,7 @@ const params = ['Type', 'Demo', 'Renderer', 'GridLine', 'Theme', 'Animation'] as
 syncParamsFromSearch();
 
 const panels = initPanel();
+const stats = initStats();
 
 window.onload = render;
 
@@ -78,10 +81,24 @@ function initPanel() {
   return { panel, Demo, Search, Renderer, GridLine, Theme, Animation, MultiLayers, reload };
 }
 
+function initStats() {
+  const container = document.getElementById('stats')!;
+  const stats = new Stats();
+  stats.showPanel(0);
+  container.appendChild(stats.dom);
+  return stats;
+}
+
+let canvas: Canvas | undefined;
+const statsListener = () => stats.update();
+
 async function render() {
   syncParamsToSearch();
   applyTheme();
   destroyForm();
+  if (canvas) {
+    canvas.getLayer().removeEventListener(CanvasEvent.AFTER_RENDER, statsListener);
+  }
 
   const $container = initContainer();
 
@@ -92,7 +109,10 @@ async function render() {
 
   const canvasOptions = { enableMultiLayer: MultiLayers };
 
-  const canvas = createGraphCanvas($container, 500, 500, Renderer, canvasOptions);
+  canvas = createGraphCanvas($container, 500, 500, Renderer, canvasOptions);
+
+  canvas.getLayer().addEventListener(CanvasEvent.AFTER_RENDER, statsListener);
+
   await canvas.ready;
   const testCase = demos[Demo as keyof typeof demos];
   if (!testCase) return;