Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 03:32:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: traffic graph adapt to different fps

Browse Source
This commit is contained in:
GyDi 2022-04-19 13:55:26 +08:00 committed by GitHub
parent 697c25015e
commit fac437b8c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/layout/traffic-graph.tsx
View File

@ -12,7 +12,6 @@ const upLineWidth = 4;
const downLineAlpha = 1;
const downLineWidth = 4;
const duration = 16 / 1000;
const defaultList = Array(maxPoint + 2).fill({ up: 0, down: 0 });
type TrafficData = { up: number; down: number };
@ -107,10 +106,9 @@ const TrafficGraph = (props: Props) => {
return 1;
};
const drawBezier = (list: number[]) => {
const o = dx * Math.min(1, countRef.current * duration);
const drawBezier = (list: number[], offset: number) => {
const points = list.map((y, i) => [
(dx * (i - 1) - o + 3) | 0,
(dx * (i - 1) - offset + 3) | 0,
countY(y),
]);
@ -132,9 +130,11 @@ const TrafficGraph = (props: Props) => {
}
};
const drawLine = (list: number[]) => {
const o = dx * Math.min(1, countRef.current * duration);
const points = list.map((y, i) => [(dx * (i - 1) - o) | 0, countY(y)]);
const drawLine = (list: number[], offset: number) => {
const points = list.map((y, i) => [
(dx * (i - 1) - offset) | 0,
countY(y),
]);
context.moveTo(points[0][0], points[0][1]);
@ -144,7 +144,17 @@ const TrafficGraph = (props: Props) => {
}
};
const drawGraph = () => {
const drawGraph = (lastTime: number) => {
const listUp = listRef.current.map((v) => v.up);
const listDown = listRef.current.map((v) => v.down);
const lineStyle = styleRef.current;
const now = Date.now();
const diff = now - lastTime;
const temp = Math.min((diff / 1000) * dx + countRef.current, dx);
const offset = countRef.current === 0 ? 0 : temp;
countRef.current = temp;
context.clearRect(0, 0, width, height);
// Reference lines
@ -159,15 +169,11 @@ const TrafficGraph = (props: Props) => {
context.stroke();
context.closePath();
const listUp = listRef.current.map((v) => v.up);
const listDown = listRef.current.map((v) => v.down);
const lineStyle = styleRef.current;
context.beginPath();
context.globalAlpha = upLineAlpha;
context.lineWidth = upLineWidth;
context.strokeStyle = upLineColor;
lineStyle ? drawBezier(listUp) : drawLine(listUp);
lineStyle ? drawBezier(listUp, offset) : drawLine(listUp, offset);
context.stroke();
context.closePath();
@ -175,16 +181,14 @@ const TrafficGraph = (props: Props) => {
context.globalAlpha = downLineAlpha;
context.lineWidth = downLineWidth;
context.strokeStyle = downLineColor;
lineStyle ? drawBezier(listDown) : drawLine(listDown);
lineStyle ? drawBezier(listDown, offset) : drawLine(listDown, offset);
context.stroke();
context.closePath();
countRef.current += 1;
raf = requestAnimationFrame(drawGraph);
raf = requestAnimationFrame(() => drawGraph(now));
};
drawGraph();
drawGraph(Date.now());
return () => {
cancelAnimationFrame(raf);