chore: 增加 gesture benchmark 测试页面 (#1824)

* feat: 增加benchmark * chore: site 的 benchmark 在 ios 9 报错 (#1827) * feat: 事件模拟支持到ios 9 * feat: 增加benchMark&修改father配置使用ts编译代码兼容 --------- Co-authored-by: 兵人 <[email protected]> Co-authored-by: zengyue ye <[email protected]>
antvis · Aug 25, 2023 · f00dac9 · f00dac9
1 parent 71e4c79
commit f00dac9
Show file tree

Hide file tree

Showing 46 changed files with 324,829 additions and 19,676 deletions.
diff --git a/packages/f2/.fatherrc.js b/packages/f2/.fatherrc.js
@@ -20,5 +20,12 @@ export default process.env.CI && process.env.CI === 'true'
         //   umd: { name: 'F2JSXRuntime', file: 'jsx-runtime' },
         // },
       },
+      typescriptOpts: {
+        tsconfigOverride: {
+          compilerOptions: {
+            target: 'es5',
+          },
+        },
+      },
       extraRollupPlugins: [...(isBundleVis ? [visualizer()] : [])],
     };
diff --git a/site/.dumi/components/FirstRender.tsx b/site/.dumi/components/FirstRender.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import data from './data.json';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(F2, canvasEl) {
+  const { Axis, Canvas, Chart, Line } = F2;
+  // 清空画布
+  // canvasEl.width = 0;
+  // canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  canvas.render();
+  stats.update();
+
+  window.requestAnimationFrame(() => renderChart(F2, canvasEl));
+}
+
+export default (props) => {
+  const { F2 } = props;
+
+  if (!F2) return null;
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(F2, canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>首次渲染</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};
diff --git a/site/.dumi/pages/benchmark/5/index.tsx → site/.dumi/components/MultiRender.tsx b/site/.dumi/pages/benchmark/5/index.tsx → site/.dumi/components/MultiRender.tsx
@@ -1,10 +1,9 @@
-import React, { useRef, useState } from 'react';
-import Stats from 'stats.js';
-import { Canvas, Chart, Axis, Line } from '@antv/f2';
 import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas';
 import { Renderer as SVGRenderer } from '@antv/g-mobile-svg';
 import { Renderer as WebGLRenderer } from '@antv/g-mobile-webgl';
-import data from '../data.json';
+import React, { useRef, useState } from 'react';
+import Stats from 'stats.js';
+import data from './data.json';
 
 // @ts-ignore
 const stats = new Stats();
@@ -16,7 +15,8 @@ stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 
 document.body.insertBefore(stats.dom, document.body.firstChild);
 
-function renderChart(options) {
+function renderChart(F2, options) {
+  const { Canvas, Chart, Axis, Line } = F2;
   function getProps(data) {
     const { props } = (
       // @ts-ignore
@@ -49,8 +49,10 @@ function renderChart(options) {
   return canvas;
 }
 
-export default () => {
-  const [canvasInstance, setCanvas] = useState<Canvas | null>(null);
+export default ({ F2 }) => {
+  if (!F2) return null;
+  const { Canvas } = F2;
+  const [canvasInstance, setCanvas] = useState<typeof Canvas | null>(null);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const selectRef = useRef<HTMLSelectElement>(null);
@@ -65,14 +67,17 @@ export default () => {
       canvasEl.style.height = '100%';
       container.appendChild(canvasEl);
       const canvasRenderer = new CanvasRenderer();
-      const canvas = renderChart({ renderer: canvasRenderer, context: canvasEl.getContext('2d') });
+      const canvas = renderChart(F2, {
+        renderer: canvasRenderer,
+        context: canvasEl.getContext('2d'),
+      });
       setCanvas(canvas);
       return;
     }
     if (value === 'svg') {
       const svgRenderer = new SVGRenderer();
       const { width, height } = container.getBoundingClientRect();
-      const canvas = renderChart({ renderer: svgRenderer, container, width, height });
+      const canvas = renderChart(F2, { renderer: svgRenderer, container, width, height });
       setCanvas(canvas);
       return;
     }
@@ -82,7 +87,7 @@ export default () => {
       canvasEl.style.width = '100%';
       canvasEl.style.height = '100%';
       container.appendChild(canvasEl);
-      const canvas = renderChart({
+      const canvas = renderChart(F2, {
         renderer: webglRenderer,
         context: canvasEl.getContext('webgl'),
       });
@@ -103,7 +108,7 @@ export default () => {
 
   return (
     <div style={{ paddingTop: '50px' }}>
-      <h2>F2 5.x</h2>
+      <h2>二次渲染</h2>
       <select ref={selectRef} onChange={onSelectChange}>
         <option value="canvas">canvas 2d</option>
         <option value="svg">svg</option>
@@ -113,7 +118,6 @@ export default () => {
       <button onClick={onRender} style={{ marginRight: '10px' }}>
         render
       </button>
-      <button style={{ marginRight: '10px' }}>pinch</button>
     </div>
   );
 };
diff --git a/site/.dumi/components/Pan.tsx b/site/.dumi/components/Pan.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import { gestureSimulator, isTouchEvent } from '../utils';
+import data from './data.json';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(F2, canvasEl: HTMLCanvasElement) {
+  const { Axis, Canvas, Chart, Line, ScrollBar } = F2;
+
+  // 清空画布
+  canvasEl.width = 0;
+  canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+          <ScrollBar mode="x" range={[0, 0.2]} />
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  // @ts-ignore
+  const gcanvas = canvas.canvas;
+  gcanvas.isTouchEvent = isTouchEvent;
+  canvas.render();
+
+  gcanvas.addEventListener('afterrender', () => {
+    stats.update();
+  });
+
+  let i = 0;
+  const loopTouchmove = () => {
+    i++;
+    gestureSimulator(canvasEl, 'touchmove', {
+      x: i,
+      y: 35,
+    });
+    if (i >= canvasEl.width / 2) i = 0;
+    window.requestAnimationFrame(loopTouchmove);
+  };
+
+  setTimeout(async () => {
+    gestureSimulator(canvasEl, 'touchstart', { x: 350, y: 35 });
+    loopTouchmove();
+  });
+
+  return canvas;
+}
+
+export default ({ F2 }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(F2, canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>Pan</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};
diff --git a/site/.dumi/components/Pinch.tsx b/site/.dumi/components/Pinch.tsx
@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import { gestureSimulator, isTouchEvent } from '../utils';
+import data from './data.json';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(F2, canvasEl: HTMLCanvasElement) {
+  const { Axis, Canvas, Chart, Line, ScrollBar } = F2;
+
+  // 清空画布
+  canvasEl.width = 0;
+  canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+          <ScrollBar mode="x" range={[0, 0.7]} />
+          <ScrollBar mode="y" range={[0, 0.7]} />
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  // @ts-ignore
+  const gcanvas = canvas.canvas;
+  gcanvas.isTouchEvent = isTouchEvent;
+  canvas.render();
+
+  gcanvas.addEventListener('afterrender', () => {
+    stats.update();
+  });
+
+  let flag = false;
+  const loopTouchmove = () => {
+    if (flag) {
+      gestureSimulator(canvasEl, 'touchmove', [
+        { x: 114, y: 114 },
+        { x: 186, y: 186 },
+      ]);
+    } else {
+      gestureSimulator(canvasEl, 'touchmove', [
+        { x: 50, y: 50 },
+        { x: 260, y: 260 },
+      ]);
+    }
+    flag = !flag;
+    window.requestAnimationFrame(loopTouchmove);
+  };
+
+  setTimeout(async () => {
+    gestureSimulator(canvasEl, 'touchstart', [
+      { x: 50, y: 50 },
+      { x: 260, y: 260 },
+    ]);
+    loopTouchmove();
+  });
+
+  return canvas;
+}
+
+export default ({ F2 }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(F2, canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>Pinch</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};