diff --git a/package.json b/package.json
index 63f798f3a41..d3b11c22d01 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"repository": "https://github.com/antvis/G6.git",
"scripts": {
"build": "turbo build --filter=!@antv/g6-site",
- "ci": "turbo run ci --filter=!@antv/g6-site --filter=!@antv/g6-ssr",
+ "ci": "turbo run ci --filter=!@antv/g6-site",
"contribute": "node ./scripts/contribute.mjs",
"dev:g6": "cd ./packages/g6 && npm run dev",
"postinstall": "husky install",
diff --git a/packages/g6-ssr/.gitignore b/packages/g6-ssr/.gitignore
new file mode 100644
index 00000000000..f5a9b2fba9a
--- /dev/null
+++ b/packages/g6-ssr/.gitignore
@@ -0,0 +1 @@
+**/*-actual.*
\ No newline at end of file
diff --git a/packages/g6-ssr/__tests__/assets/file.pdf b/packages/g6-ssr/__tests__/assets/file.pdf
index 3383db81e9e..4a3970521a4 100644
Binary files a/packages/g6-ssr/__tests__/assets/file.pdf and b/packages/g6-ssr/__tests__/assets/file.pdf differ
diff --git a/packages/g6-ssr/__tests__/assets/file.svg b/packages/g6-ssr/__tests__/assets/file.svg
index 67972aa3d4d..54191ac1ea6 100644
--- a/packages/g6-ssr/__tests__/assets/file.svg
+++ b/packages/g6-ssr/__tests__/assets/file.svg
@@ -62,71 +62,71 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/packages/g6-ssr/__tests__/assets/image.jpeg b/packages/g6-ssr/__tests__/assets/image.jpeg
index 75a76e2d37d..36f3e1643ee 100644
Binary files a/packages/g6-ssr/__tests__/assets/image.jpeg and b/packages/g6-ssr/__tests__/assets/image.jpeg differ
diff --git a/packages/g6-ssr/__tests__/assets/image.png b/packages/g6-ssr/__tests__/assets/image.png
index 797b51982a8..cb29896f0d2 100644
Binary files a/packages/g6-ssr/__tests__/assets/image.png and b/packages/g6-ssr/__tests__/assets/image.png differ
diff --git a/packages/g6-ssr/__tests__/graph.spec.ts b/packages/g6-ssr/__tests__/graph.spec.ts
index 0fd701a431d..886edddaa17 100644
--- a/packages/g6-ssr/__tests__/graph.spec.ts
+++ b/packages/g6-ssr/__tests__/graph.spec.ts
@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import type { Graph, MetaData } from '../src';
import { createGraph } from '../src';
@@ -15,7 +15,14 @@ declare global {
expect.extend({
toMatchFile: (received: Graph, path: string, meta?: MetaData) => {
const _path = join(__dirname, path);
- const pass = existsSync(_path) ? received.toBuffer(meta).equals(readFileSync(_path)) : true;
+
+ const file = received.toBuffer(meta);
+ const pass = existsSync(_path) ? file.equals(readFileSync(_path)) : true;
+
+ if (!pass) {
+ writeFileSync(_path.replace('.', '-actual.'), file);
+ }
+
if (pass) {
return {
message: () => 'passed',
@@ -32,7 +39,106 @@ expect.extend({
describe('createGraph', () => {
const fn = async (outputType?: any, imageType: any = 'png') => {
- const data = (await fetch('https://assets.antv.antgroup.com/g6/circular.json').then((res) => res.json())) as any;
+ const data = {
+ nodes: [
+ { id: '0' },
+ { id: '1' },
+ { id: '2' },
+ { id: '3' },
+ { id: '4' },
+ { id: '5' },
+ { id: '6' },
+ { id: '7' },
+ { id: '8' },
+ { id: '9' },
+ { id: '10' },
+ { id: '11' },
+ { id: '12' },
+ { id: '13' },
+ { id: '14' },
+ { id: '15' },
+ { id: '16' },
+ { id: '17' },
+ { id: '18' },
+ { id: '19' },
+ { id: '20' },
+ { id: '21' },
+ { id: '22' },
+ { id: '23' },
+ { id: '24' },
+ { id: '25' },
+ { id: '26' },
+ { id: '27' },
+ { id: '28' },
+ { id: '29' },
+ { id: '30' },
+ { id: '31' },
+ { id: '32' },
+ { id: '33' },
+ ],
+ edges: [
+ { source: '0', target: '1' },
+ { source: '0', target: '2' },
+ { source: '0', target: '3' },
+ { source: '0', target: '4' },
+ { source: '0', target: '5' },
+ { source: '0', target: '7' },
+ { source: '0', target: '8' },
+ { source: '0', target: '9' },
+ { source: '0', target: '10' },
+ { source: '0', target: '11' },
+ { source: '0', target: '13' },
+ { source: '0', target: '14' },
+ { source: '0', target: '15' },
+ { source: '0', target: '16' },
+ { source: '2', target: '3' },
+ { source: '4', target: '5' },
+ { source: '4', target: '6' },
+ { source: '5', target: '6' },
+ { source: '7', target: '13' },
+ { source: '8', target: '14' },
+ { source: '9', target: '10' },
+ { source: '10', target: '22' },
+ { source: '10', target: '14' },
+ { source: '10', target: '12' },
+ { source: '10', target: '24' },
+ { source: '10', target: '21' },
+ { source: '10', target: '20' },
+ { source: '11', target: '24' },
+ { source: '11', target: '22' },
+ { source: '11', target: '14' },
+ { source: '12', target: '13' },
+ { source: '16', target: '17' },
+ { source: '16', target: '18' },
+ { source: '16', target: '21' },
+ { source: '16', target: '22' },
+ { source: '17', target: '18' },
+ { source: '17', target: '20' },
+ { source: '18', target: '19' },
+ { source: '19', target: '20' },
+ { source: '19', target: '33' },
+ { source: '19', target: '22' },
+ { source: '19', target: '23' },
+ { source: '20', target: '21' },
+ { source: '21', target: '22' },
+ { source: '22', target: '24' },
+ { source: '22', target: '25' },
+ { source: '22', target: '26' },
+ { source: '22', target: '23' },
+ { source: '22', target: '28' },
+ { source: '22', target: '30' },
+ { source: '22', target: '31' },
+ { source: '22', target: '32' },
+ { source: '22', target: '33' },
+ { source: '23', target: '28' },
+ { source: '23', target: '27' },
+ { source: '23', target: '29' },
+ { source: '23', target: '30' },
+ { source: '23', target: '31' },
+ { source: '23', target: '33' },
+ { source: '32', target: '33' },
+ ],
+ };
return await createGraph({
width: 500,
diff --git a/packages/g6-ssr/jest.config.js b/packages/g6-ssr/jest.config.js
index be420483aa6..4a782ce770a 100644
--- a/packages/g6-ssr/jest.config.js
+++ b/packages/g6-ssr/jest.config.js
@@ -1,4 +1,5 @@
module.exports = {
+ forceExit: true,
transform: {
'^.+\\.[tj]s$': ['@swc/jest'],
},
diff --git a/packages/g6-ssr/package.json b/packages/g6-ssr/package.json
index ea7be79e768..74a318dd0b8 100644
--- a/packages/g6-ssr/package.json
+++ b/packages/g6-ssr/package.json
@@ -18,7 +18,7 @@
],
"scripts": {
"build": "rimraf ./dist && rollup -c",
- "ci": "run-s lint type-check build test",
+ "ci": "run-s lint type-check build",
"lint": "eslint ./src __tests__ --quiet && prettier ./src __tests__ --check",
"prepublishOnly": "npm run ci",
"test": "run-s test:*",
diff --git a/packages/g6-ssr/src/graph.ts b/packages/g6-ssr/src/graph.ts
index 05d18700cb4..373a9dd9af5 100644
--- a/packages/g6-ssr/src/graph.ts
+++ b/packages/g6-ssr/src/graph.ts
@@ -31,7 +31,7 @@ const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
export async function createGraph(options: Options) {
const [g6Canvas, nodeCanvas] = createCanvas(options);
- const { outputType, waitForRender = 16, ...restOptions } = options;
+ const { outputType, waitForRender = 32, ...restOptions } = options;
const graph = new G6Graph({
animation: false,
...restOptions,
@@ -44,20 +44,24 @@ export async function createGraph(options: Options) {
await sleep(waitForRender); // wait for the rendering to complete
- // @ts-expect-error extend Graph
- graph.exportToFile = (file: string, meta?: MetaData) => {
- if (!file.endsWith(extendName)) {
- if (!existsSync(file)) file += extendName;
- else if (lstatSync(file).isDirectory()) file = `${file}/image${extendName}`;
- else file += extendName;
- }
+ const returns: Graph = {
+ getGraph: () => graph,
+ getCanvas: () => nodeCanvas,
+ destroy: () => graph.destroy(),
+ exportToFile: (file: string, meta?: MetaData) => {
+ if (!file.endsWith(extendName)) {
+ if (!existsSync(file)) file += extendName;
+ else if (lstatSync(file).isDirectory()) file = `${file}/image${extendName}`;
+ else file += extendName;
+ }
- // @ts-expect-error skip type check
- writeFileSync(file, nodeCanvas.toBuffer(mimeType, meta));
+ // @ts-expect-error skip type check
+ writeFileSync(file, nodeCanvas.toBuffer(mimeType, meta));
+ },
+ // @ts-expect-error extend Graph
+ toBuffer: (meta?: MetaData) => nodeCanvas.toBuffer(mimeType, meta),
+ toDataURL: () => nodeCanvas.toDataURL(mimeType as any),
};
- // @ts-expect-error extend Graph
- graph.toBuffer = (meta?: MetaData) => nodeCanvas.toBuffer(mimeType, meta);
-
- return graph as Graph;
+ return returns;
}
diff --git a/packages/g6-ssr/src/types.ts b/packages/g6-ssr/src/types.ts
index 5b669236f9d..8da3ac9f23e 100644
--- a/packages/g6-ssr/src/types.ts
+++ b/packages/g6-ssr/src/types.ts
@@ -1,6 +1,6 @@
import type { GraphOptions } from '@antv/g6';
import { Graph as G6Graph } from '@antv/g6';
-import type { JpegConfig, PdfConfig, PngConfig } from 'canvas';
+import type { Canvas, JpegConfig, PdfConfig, PngConfig } from 'canvas';
export interface Options extends Omit {
width: number;
@@ -29,7 +29,12 @@ export interface Options extends Omit {
export type MetaData = PdfConfig | PngConfig | JpegConfig;
-export interface Graph extends G6Graph {
+export interface Graph {
+ getGraph: () => G6Graph;
+ getCanvas: () => Canvas;
+ destroy: () => void;
+
exportToFile: (file: string, meta?: MetaData) => void;
toBuffer: (meta?: MetaData) => Buffer;
+ toDataURL: () => string;
}