From 022991521027c4eec2b8963bc2413864e25b2a19 Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Mon, 30 Dec 2024 15:28:39 +0800
Subject: [PATCH] refactor: dev env add fps monitor

---
 package.json                  |  1 +
 packages/g6/__tests__/main.ts | 26 ++++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 809b210bb33..ae5048df72c 100644
--- 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__/main.ts b/packages/g6/__tests__/main.ts
index b0c4e78deb5..6dd4a67408e 100644
--- 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,26 @@ function initPanel() {
   return { panel, Demo, Search, Renderer, GridLine, Theme, Animation, MultiLayers, reload };
 }
 
+function initStats() {
+  const container = document.getElementById('panel')!;
+  const stats = new Stats();
+  stats.showPanel(0);
+  const dom = stats.dom;
+  Object.assign(dom.style, { position: 'relative', top: 'unset', right: 'unset' });
+  container.appendChild(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 +111,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;