refactor: ssr support devicePixelRatio

packages/g6-ssr/__tests__/graph.spec.ts

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import type { Graph, MetaData } from '../src';
 import { createGraph } from '../src';
@@ -19,8 +19,11 @@ expect.extend({
     const file = received.toBuffer(meta);
     const pass = existsSync(_path) ? file.equals(readFileSync(_path)) : true;
 
+    const actualName = _path.replace('.', '-actual.');
     if (!pass) {
-      writeFileSync(_path.replace('.', '-actual.'), file);
+      writeFileSync(actualName, file);
+    } else if (existsSync(actualName)) {
+      unlinkSync(actualName);
     }
 
     if (pass) {
@@ -38,7 +41,7 @@ expect.extend({
 });
 
 describe('createGraph', () => {
-  const fn = async (outputType?: any, imageType: any = 'png') => {
+  const fn = async (outputType?: any, imageType: any = 'png', options = {}) => {
     const data = {
       nodes: [
         { id: '0' },
@@ -158,6 +161,7 @@ describe('createGraph', () => {
       layout: {
         type: 'circular',
       },
+      ...options,
     });
   };
 
@@ -210,4 +214,14 @@ describe('createGraph', () => {
 
     graph.destroy();
   });
+
+  it('devicePixelRatio', async () => {
+    const graph = await fn('image', 'jpeg', { devicePixelRatio: 2 });
+
+    expect(graph).toMatchFile('./assets/image_x2.jpeg');
+
+    graph.exportToFile(join(__dirname, './assets/image_x2'));
+
+    graph.destroy();
+  });
 });

packages/g6-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-ssr",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Support SSR for G6",
   "keywords": [
     "antv",

packages/g6-ssr/src/canvas.ts

@@ -12,7 +12,7 @@ import type { Options } from './types';
  * @returns <zh/> [G6 画布, NodeCanvas 画布] | <en/> [G6Canvas, NodeCanvas]
  */
 export function createCanvas(options: Options): [G6Canvas, NodeCanvas] {
-  const { width, height, background, outputType } = options;
+  const { width, height, background, outputType, devicePixelRatio = 1 } = options;
   const nodeCanvas = createNodeCanvas(width, height, outputType as any);
   const offscreenNodeCanvas = createNodeCanvas(1, 1);
 
@@ -23,6 +23,7 @@ export function createCanvas(options: Options): [G6Canvas, NodeCanvas] {
     // @ts-expect-error missing types
     canvas: nodeCanvas as any,
     offscreenCanvas: offscreenNodeCanvas as any,
+    devicePixelRatio,
     enableMultiLayer: false,
     renderer: () => {
       const renderer = new Renderer();