Skip to content

Commit 244d6dd

Browse files
wang1212wang1212
authored
refactor: reduce global redundant code (#1872)
* refactor: reduce global redundant code * chore: add changeset
1 parent 50321ba commit 244d6dd

File tree

22 files changed

+348
-319
lines changed

22 files changed

+348
-319
lines changed

‎.changeset/honest-keys-train.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
'@antv/g-plugin-device-renderer': patch
3+
'@antv/g-plugin-image-loader': patch
4+
'@antv/g-plugin-svg-renderer': patch
5+
'@antv/g-image-exporter': patch
6+
'@antv/g-mobile-svg': patch
7+
'@antv/g-canvaskit': patch
8+
'@antv/g-canvas': patch
9+
'@antv/g-webgpu': patch
10+
'@antv/g-webgl': patch
11+
'@antv/g-lite': patch
12+
'@antv/g-svg': patch
13+
---
14+
15+
refactor: reduce global redundant code

‎__tests__/demos/bugfix/1677.ts

-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export async function shadowroot_offset(context) {
2323
width: 500,
2424
height: 500,
2525
renderer: new Renderer(),
26-
supportsCSSTransform: true,
2726
});
2827

2928
const circle = new Circle({

‎__tests__/demos/event/dblClick.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Circle, Text } from '@antv/g';
1+
import { Circle, Text, Canvas } from '@antv/g';
22

3-
export async function dblClick(context) {
3+
export async function dblClick(context: { canvas: Canvas }) {
44
const { canvas } = context;
55
await canvas.ready;
66

77
let DELAY = 200;
8-
canvas.dblClickSpeed = DELAY;
8+
canvas.getConfig().dblClickSpeed = DELAY;
99

1010
const circle0 = new Circle({
1111
style: {
@@ -43,7 +43,7 @@ export async function dblClick(context) {
4343

4444
circle0.addEventListener('mouseenter', () => {
4545
DELAY = 200;
46-
canvas.dblClickSpeed = DELAY;
46+
canvas.getConfig().dblClickSpeed = DELAY;
4747

4848
text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
4949
text1.attr({
@@ -52,7 +52,7 @@ export async function dblClick(context) {
5252
});
5353
circle1.addEventListener('mouseenter', () => {
5454
DELAY = 500;
55-
canvas.dblClickSpeed = DELAY;
55+
canvas.getConfig().dblClickSpeed = DELAY;
5656

5757
text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
5858
text1.attr({
@@ -61,7 +61,7 @@ export async function dblClick(context) {
6161
});
6262
circle2.addEventListener('mouseenter', () => {
6363
DELAY = 1000;
64-
canvas.dblClickSpeed = DELAY;
64+
canvas.getConfig().dblClickSpeed = DELAY;
6565

6666
text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
6767
text1.attr({

‎__tests__/demos/perf/event.ts

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import {
2+
Canvas,
3+
ElementEvent,
4+
Rect,
5+
Group,
6+
CustomEvent,
7+
EventTarget,
8+
} from '@antv/g';
9+
import * as tinybench from 'tinybench';
10+
11+
export async function event(context: { canvas: Canvas }) {
12+
const { canvas } = context;
13+
console.log(canvas);
14+
15+
await canvas.ready;
16+
17+
const { width, height } = canvas.getConfig();
18+
const root = new Group();
19+
let count = 2e4;
20+
let rects = [];
21+
let eventTargets = [];
22+
23+
function render() {
24+
root.destroyChildren();
25+
rects = [];
26+
27+
for (let i = 0; i < count; i++) {
28+
const x = Math.random() * width;
29+
const y = Math.random() * height;
30+
const size = 10 + Math.random() * 40;
31+
const speed = 1 + Math.random();
32+
33+
const rect = new Rect({
34+
style: {
35+
x,
36+
y,
37+
width: size,
38+
height: size,
39+
fill: 'white',
40+
stroke: '#000',
41+
lineWidth: 1,
42+
},
43+
});
44+
root.appendChild(rect);
45+
rects[i] = { x, y, size, speed, el: rect };
46+
47+
// ---
48+
const eventTarge = new EventTarget();
49+
eventTargets.push(eventTarge);
50+
eventTarge.addEventListener(ElementEvent.BOUNDS_CHANGED, () => {
51+
//
52+
});
53+
}
54+
}
55+
56+
render();
57+
canvas.appendChild(root);
58+
59+
// benchmark
60+
// ----------
61+
const boundsChangedEvent = new CustomEvent(ElementEvent.BOUNDS_CHANGED);
62+
boundsChangedEvent.detail = { affectChildren: true };
63+
64+
const bench = new tinybench.Bench({ name: 'event benchmark', time: 1e2 });
65+
66+
bench.add('Iterating trigger events', async () => {
67+
root.forEach((el) => {
68+
el.dispatchEvent(boundsChangedEvent);
69+
});
70+
});
71+
bench.add('Iterating trigger events without propagate', async () => {
72+
root.forEach((el) => {
73+
el.dispatchEvent(boundsChangedEvent, true);
74+
});
75+
});
76+
bench.add('Iterating over trigger events on empty objects', async () => {
77+
eventTargets.forEach((el) => {
78+
el.dispatchEvent(boundsChangedEvent);
79+
});
80+
});
81+
bench.add('Batch triggering events', async () => {
82+
canvas.dispatchEvent(boundsChangedEvent, true);
83+
});
84+
85+
await bench.run();
86+
87+
console.log(bench.name);
88+
console.table(bench.table());
89+
console.log(bench.results);
90+
console.log(bench.tasks);
91+
92+
// ----------
93+
}

‎packages/g-canvas/src/Canvas2DContextService.ts

+2-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type {
77
CanvasConfig,
88
ContextService,
99
} from '@antv/g-lite';
10-
import { RenderReason, isBrowser, setDOMSize } from '@antv/g-lite';
10+
import { RenderReason, setDOMSize } from '@antv/g-lite';
1111
import { isString } from '@antv/util';
1212

1313
export class Canvas2DContextService
@@ -92,11 +92,7 @@ export class Canvas2DContextService
9292
}
9393

9494
resize(width: number, height: number) {
95-
const { devicePixelRatio } = this.canvasConfig;
96-
97-
// use user-defined dpr first
98-
let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
99-
dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
95+
const { devicePixelRatio: dpr } = this.canvasConfig;
10096
this.dpr = dpr;
10197

10298
if (this.$canvas) {

‎packages/g-canvaskit/src/CanvasKitContextService.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type {
66
CanvasConfig,
77
ContextService,
88
} from '@antv/g-lite';
9-
import { isBrowser, setDOMSize } from '@antv/g-lite';
9+
import { setDOMSize } from '@antv/g-lite';
1010
import type * as CanvaskitRenderer from '@antv/g-plugin-canvaskit-renderer';
1111
import type { CanvasKitContext } from '@antv/g-plugin-canvaskit-renderer';
1212
import { isString } from '@antv/util';
@@ -40,7 +40,7 @@ export class CanvasKitContextService
4040
}
4141

4242
async initAsync() {
43-
const { container, canvas, devicePixelRatio } = this.canvasConfig;
43+
const { container, canvas, devicePixelRatio: dpr } = this.canvasConfig;
4444

4545
if (canvas) {
4646
this.$canvas = canvas;
@@ -71,9 +71,6 @@ export class CanvasKitContextService
7171
}
7272
}
7373

74-
// use user-defined dpr first
75-
let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
76-
dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
7774
this.dpr = dpr;
7875
this.resize(this.canvasConfig.width, this.canvasConfig.height);
7976

‎packages/g-image-exporter/src/ImageExporter.ts

+2-9
Original file line numberDiff line numberDiff line change
@@ -188,16 +188,9 @@ export class ImageExporter {
188188
}
189189

190190
private getOrCreateImage(src: string): Promise<HTMLImageElement> {
191-
// @see https://github.com/antvis/g/issues/938
192-
const { createImage } = this.options.canvas.getConfig();
193-
194191
return new Promise((resolve, reject) => {
195-
let image: HTMLImageElement;
196-
if (createImage) {
197-
image = createImage(src);
198-
} else if (isBrowser) {
199-
image = new window.Image();
200-
}
192+
// @see https://github.com/antvis/g/issues/938
193+
const image = this.options.canvas.getConfig().createImage();
201194

202195
if (image) {
203196
image.onload = () => {

0 commit comments

Comments
 (0)