feat: add environment adapter for browser, webworker and nodejs #27

xiaoiver · Jan 24, 2025 · bbc047e · bbc047e
1 parent 0ae10ee
commit bbc047e
Show file tree

Hide file tree

Showing 46 changed files with 542 additions and 351 deletions.
diff --git a/__tests__/ssr/batch.spec.ts b/__tests__/ssr/batch.spec.ts
@@ -1,11 +1,16 @@
 import _gl from 'gl';
-import { getCanvas } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, Circle } from '../../packages/core/src';
+import { Canvas, Circle, DOMAdapter } from '../../packages/core/src';
+import { NodeJSAdapter } from '../utils';
+
+DOMAdapter.set(NodeJSAdapter);
 
 describe('Batch Rendering', () => {
   it('should render a batchable and anon-batchable circle separately.', async () => {
-    const $canvas = getCanvas(200, 200);
+    const $canvas = DOMAdapter.get().createCanvas(
+      200,
+      200,
+    ) as HTMLCanvasElement;
 
     const canvas = await new Canvas({
       canvas: $canvas,

diff --git a/__tests__/ssr/camera.spec.ts b/__tests__/ssr/camera.spec.ts
@@ -1,11 +1,16 @@
 import _gl from 'gl';
-import { getCanvas } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, Circle } from '../../packages/core/src';
+import { Canvas, Circle, DOMAdapter } from '../../packages/core/src';
+import { NodeJSAdapter } from '../utils';
+
+DOMAdapter.set(NodeJSAdapter);
 
 describe('Camera', () => {
   it('should translate camera correctly.', async () => {
-    const $canvas = getCanvas(200, 200);
+    const $canvas = DOMAdapter.get().createCanvas(
+      200,
+      200,
+    ) as HTMLCanvasElement;
 
     const canvas = await new Canvas({
       canvas: $canvas,
@@ -32,7 +37,10 @@ describe('Camera', () => {
   });
 
   it('should zoom camera correctly.', async () => {
-    const $canvas = getCanvas(200, 200);
+    const $canvas = DOMAdapter.get().createCanvas(
+      200,
+      200,
+    ) as HTMLCanvasElement;
 
     const canvas = await new Canvas({
       canvas: $canvas,
@@ -58,7 +66,10 @@ describe('Camera', () => {
   });
 
   it('should zoom camera with viewportX/Y correctly.', async () => {
-    const $canvas = getCanvas(200, 200);
+    const $canvas = DOMAdapter.get().createCanvas(
+      200,
+      200,
+    ) as HTMLCanvasElement;
 
     const canvas = await new Canvas({
       canvas: $canvas,

diff --git a/__tests__/ssr/canvas.spec.ts b/__tests__/ssr/canvas.spec.ts
@@ -1,20 +1,18 @@
 import _gl from 'gl';
-import {
-  getCanvas,
-  sleep,
-  requestAnimationFrame,
-  cancelAnimationFrame,
-} from '../utils';
+import { sleep, requestAnimationFrame, cancelAnimationFrame } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, Circle } from '../../packages/core/src';
+import { Canvas, Circle, DOMAdapter } from '../../packages/core/src';
 import { CheckboardStyle } from '../../packages/core/src/plugins';
+import { NodeJSAdapter } from '../utils';
 
 let $canvas: HTMLCanvasElement;
 let canvas: Canvas;
 
+DOMAdapter.set(NodeJSAdapter);
+
 describe('Canvas API', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     canvas = await new Canvas({
       canvas: $canvas,
     }).initialized;

diff --git a/__tests__/ssr/circle.spec.ts b/__tests__/ssr/circle.spec.ts
@@ -1,10 +1,15 @@
 import _gl from 'gl';
-import { JSDOM } from 'jsdom';
-import xmlserializer from 'xmlserializer';
 import getPixels from 'get-pixels';
-import { getCanvas } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, Circle, ImageExporter } from '../../packages/core/src';
+import {
+  Canvas,
+  Circle,
+  ImageExporter,
+  DOMAdapter,
+} from '../../packages/core/src';
+import { NodeJSAdapter } from '../utils';
+
+DOMAdapter.set(NodeJSAdapter);
 
 const dir = `${__dirname}/snapshots`;
 let $canvas: HTMLCanvasElement;
@@ -13,14 +18,12 @@ let exporter: ImageExporter;
 
 describe('Circle', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     canvas = await new Canvas({
       canvas: $canvas,
     }).initialized;
     exporter = new ImageExporter({
       canvas,
-      document: new JSDOM().window._document,
-      xmlserializer,
     });
   });
 

diff --git a/__tests__/ssr/ellipse.spec.ts b/__tests__/ssr/ellipse.spec.ts
@@ -1,9 +1,14 @@
 import _gl from 'gl';
-import { JSDOM } from 'jsdom';
-import xmlserializer from 'xmlserializer';
-import { getCanvas } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, Ellipse, ImageExporter } from '../../packages/core/src';
+import {
+  Canvas,
+  DOMAdapter,
+  Ellipse,
+  ImageExporter,
+} from '../../packages/core/src';
+import { NodeJSAdapter } from '../utils';
+
+DOMAdapter.set(NodeJSAdapter);
 
 const dir = `${__dirname}/snapshots`;
 let $canvas: HTMLCanvasElement;
@@ -12,14 +17,12 @@ let exporter: ImageExporter;
 
 describe('Ellipse', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     canvas = await new Canvas({
       canvas: $canvas,
     }).initialized;
     exporter = new ImageExporter({
       canvas,
-      document: new JSDOM().window._document,
-      xmlserializer,
     });
   });
 

diff --git a/__tests__/ssr/events.spec.ts b/__tests__/ssr/events.spec.ts
@@ -1,15 +1,17 @@
 import _gl from 'gl';
-import { createMouseEvent, getCanvas, sleep } from '../utils';
+import { createMouseEvent, NodeJSAdapter, sleep } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, Circle } from '../../packages/core/src';
+import { Canvas, Circle, DOMAdapter } from '../../packages/core/src';
 
 const dir = `${__dirname}/snapshots`;
 let $canvas: HTMLCanvasElement;
 let canvas: Canvas;
 
+DOMAdapter.set(NodeJSAdapter);
+
 describe('Events', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     $canvas.getBoundingClientRect = () => ({
       x: 0,
       y: 0,
@@ -23,7 +25,6 @@ describe('Events', () => {
     });
     canvas = await new Canvas({
       canvas: $canvas,
-      setCursor: () => {},
     }).initialized;
   });
 
@@ -102,14 +103,12 @@ describe('Events', () => {
 
     canvas = await new Canvas({
       canvas: $canvas,
-      setCursor: () => {},
     }).initialized;
     canvas.destroy();
 
     globalThis.PointerEvent = jest.fn();
     canvas = await new Canvas({
       canvas: $canvas,
-      setCursor: () => {},
     }).initialized;
     canvas.destroy();
 
@@ -118,7 +117,6 @@ describe('Events', () => {
     globalThis.ontouchstart = jest.fn();
     canvas = await new Canvas({
       canvas: $canvas,
-      setCursor: () => {},
     }).initialized;
     delete globalThis.ontouchstart;
   });

diff --git a/__tests__/ssr/exporter.spec.ts b/__tests__/ssr/exporter.spec.ts
@@ -1,21 +1,19 @@
 import _gl from 'gl';
-import { getCanvas } from '../utils';
+import { NodeJSAdapter } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, ImageExporter } from '../../packages/core/src';
-import { JSDOM } from 'jsdom';
-import xmlserializer from 'xmlserializer';
+import { Canvas, ImageExporter, DOMAdapter } from '../../packages/core/src';
 import { CheckboardStyle } from '../../packages/core/src/plugins';
 
+DOMAdapter.set(NodeJSAdapter);
+
 describe('Image Exporter', () => {
   it('should export empty canvas correctly.', async () => {
     const canvas = await new Canvas({
-      canvas: getCanvas(200, 200),
+      canvas: DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement,
     }).initialized;
 
     const exporter = new ImageExporter({
       canvas,
-      document: new JSDOM().window._document,
-      xmlserializer,
       defaultFilename: 'test',
     });
 

diff --git a/__tests__/ssr/grid.spec.ts b/__tests__/ssr/grid.spec.ts
@@ -1,28 +1,26 @@
 import _gl from 'gl';
-import { JSDOM } from 'jsdom';
-import xmlserializer from 'xmlserializer';
-import { getCanvas } from '../utils';
+import { NodeJSAdapter } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, ImageExporter } from '../../packages/core/src';
+import { Canvas, DOMAdapter, ImageExporter } from '../../packages/core/src';
 import { CheckboardStyle } from '../../packages/core/src/plugins';
 
 const dir = `${__dirname}/snapshots`;
 let $canvas: HTMLCanvasElement;
 let canvas: Canvas;
 let exporter: ImageExporter;
 
+DOMAdapter.set(NodeJSAdapter);
+
 describe('Grid', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     canvas = await new Canvas({
       canvas: $canvas,
       backgroundColor: 'white',
       gridColor: 'gray',
     }).initialized;
     exporter = new ImageExporter({
       canvas,
-      document: new JSDOM().window._document,
-      xmlserializer,
     });
   });
 

diff --git a/__tests__/ssr/path.spec.ts b/__tests__/ssr/path.spec.ts
@@ -1,11 +1,9 @@
 import _gl from 'gl';
-import { JSDOM } from 'jsdom';
-import xmlserializer from 'xmlserializer';
-// import getPixels from 'get-pixels';
-import { getCanvas } from '../utils';
+import { NodeJSAdapter } from '../utils';
 import '../useSnapshotMatchers';
 import {
   Canvas,
+  DOMAdapter,
   ImageExporter,
   Path,
   TesselationMethod,
@@ -16,16 +14,16 @@ let $canvas: HTMLCanvasElement;
 let canvas: Canvas;
 let exporter: ImageExporter;
 
+DOMAdapter.set(NodeJSAdapter);
+
 describe('Path', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     canvas = await new Canvas({
       canvas: $canvas,
     }).initialized;
     exporter = new ImageExporter({
       canvas,
-      document: new JSDOM().window._document,
-      xmlserializer,
     });
   });
 

diff --git a/__tests__/ssr/polyline.spec.ts b/__tests__/ssr/polyline.spec.ts
@@ -1,26 +1,28 @@
 import _gl from 'gl';
-import { JSDOM } from 'jsdom';
-import xmlserializer from 'xmlserializer';
-// import getPixels from 'get-pixels';
-import { getCanvas } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, ImageExporter, Polyline } from '../../packages/core/src';
+import {
+  Canvas,
+  DOMAdapter,
+  ImageExporter,
+  Polyline,
+} from '../../packages/core/src';
+import { NodeJSAdapter } from '../utils';
 
 const dir = `${__dirname}/snapshots`;
 let $canvas: HTMLCanvasElement;
 let canvas: Canvas;
 let exporter: ImageExporter;
 
+DOMAdapter.set(NodeJSAdapter);
+
 describe('Polyline', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     canvas = await new Canvas({
       canvas: $canvas,
     }).initialized;
     exporter = new ImageExporter({
       canvas,
-      document: new JSDOM().window._document,
-      xmlserializer,
     });
   });
 

diff --git a/__tests__/ssr/rect.spec.ts b/__tests__/ssr/rect.spec.ts
@@ -1,25 +1,28 @@
 import _gl from 'gl';
-import { JSDOM } from 'jsdom';
-import xmlserializer from 'xmlserializer';
-import { getCanvas } from '../utils';
+import { NodeJSAdapter } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, ImageExporter, Rect } from '../../packages/core/src';
+import {
+  Canvas,
+  DOMAdapter,
+  ImageExporter,
+  Rect,
+} from '../../packages/core/src';
 
 const dir = `${__dirname}/snapshots`;
 let $canvas: HTMLCanvasElement;
 let canvas: Canvas;
 let exporter: ImageExporter;
 
+DOMAdapter.set(NodeJSAdapter);
+
 describe('Rect', () => {
   beforeEach(async () => {
-    $canvas = getCanvas(200, 200);
+    $canvas = DOMAdapter.get().createCanvas(200, 200) as HTMLCanvasElement;
     canvas = await new Canvas({
       canvas: $canvas,
     }).initialized;
     exporter = new ImageExporter({
       canvas,
-      document: new JSDOM().window._document,
-      xmlserializer,
     });
   });