feat: allow changing DPR at runtime #1143

antvis · Sep 28, 2022 · 1b954b7 · 1b954b7
1 parent eb45a78
commit 1b954b7
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 32 deletions.
diff --git a/packages/g-canvas/src/Canvas2DContextService.ts b/packages/g-canvas/src/Canvas2DContextService.ts
@@ -1,4 +1,5 @@
 import type { CanvasLike, DataURLOptions } from '@antv/g-lite';
+import { RenderingContext, RenderReason } from '@antv/g-lite';
 import {
   CanvasConfig,
   ContextService,
@@ -19,10 +20,13 @@ export class Canvas2DContextService implements ContextService<CanvasRenderingCon
   constructor(
     @inject(CanvasConfig)
     private canvasConfig: CanvasConfig,
+
+    @inject(RenderingContext)
+    private renderingContext: RenderingContext,
   ) {}
 
   async init() {
-    const { container, canvas, devicePixelRatio } = this.canvasConfig;
+    const { container, canvas } = this.canvasConfig;
 
     if (canvas) {
       this.$canvas = canvas;
@@ -49,11 +53,6 @@ export class Canvas2DContextService implements ContextService<CanvasRenderingCon
     }
 
     this.context = this.$canvas.getContext('2d');
-    // use user-defined dpr first
-    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
-    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
-    this.dpr = dpr;
-
     this.resize(this.canvasConfig.width, this.canvasConfig.height);
   }
 
@@ -85,6 +84,13 @@ export class Canvas2DContextService implements ContextService<CanvasRenderingCon
   }
 
   resize(width: number, height: number) {
+    const { devicePixelRatio } = this.canvasConfig;
+
+    // use user-defined dpr first
+    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
+    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
+    this.dpr = dpr;
+
     if (this.$canvas) {
       // set canvas width & height
       this.$canvas.width = this.dpr * width;
@@ -98,6 +104,8 @@ export class Canvas2DContextService implements ContextService<CanvasRenderingCon
       // @see https://www.html5rocks.com/en/tutorials/canvas/hidpi/
       // this.context.scale(dpr, dpr);
     }
+
+    this.renderingContext.renderReasons.add(RenderReason.CAMERA_CHANGED);
   }
 
   applyCursorStyle(cursor: string) {

diff --git a/packages/g-lite/src/css/cssom/CSSGradientValue.ts b/packages/g-lite/src/css/cssom/CSSGradientValue.ts
@@ -1,4 +1,4 @@
-import { CSSKeywordValue } from './CSSKeywordValue';
+import type { CSSKeywordValue } from './CSSKeywordValue';
 import type { CSSUnitValue } from './CSSNumericValue';
 import { CSSStyleValue, CSSStyleValueType } from './CSSStyleValue';
 import type { Nested, ParenLess } from './types';

diff --git a/packages/g-lite/src/css/parser/gradient.ts b/packages/g-lite/src/css/parser/gradient.ts
@@ -1,10 +1,11 @@
 import { isNil, isString, memoize } from '@antv/util';
 import type { AngularNode, ColorStop, DirectionalNode, PositionNode } from '../../utils';
 import { colorStopToString, parseGradient as parse } from '../../utils';
-import { CSSKeywordValue, CSSUnitValue, LinearColorStop, Odeg, RadialGradient } from '../cssom';
+import type { CSSKeywordValue, CSSUnitValue, LinearColorStop, RadialGradient } from '../cssom';
+import { Odeg } from '../cssom';
 import { CSSGradientValue, GradientType } from '../cssom';
 import { getOrCreateKeyword, getOrCreateUnitValue } from '../CSSStyleValuePool';
-import { Pattern } from './color';
+import type { Pattern } from './color';
 
 const regexLG = /^l\s*\(\s*([\d.]+)\s*\)\s*(.*)/i;
 const regexRG = /^r\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)\s*(.*)/i;

diff --git a/packages/g-lite/src/dom/Element.ts b/packages/g-lite/src/dom/Element.ts
@@ -16,6 +16,10 @@ import { MutationEvent } from './MutationEvent';
 import { Node } from './Node';
 
 let entityCounter = 0;
+export function resetEntityCounter() {
+  entityCounter = 0;
+}
+
 // let this.sceneGraphService: SceneGraphService;
 const childInsertedEvent = new CustomEvent(ElementEvent.CHILD_INSERTED, {
   child: null,

diff --git a/packages/g-lottie-player/src/LottieAnimation.ts b/packages/g-lottie-player/src/LottieAnimation.ts
@@ -1,7 +1,6 @@
 import type { BaseStyleProps, Canvas, DisplayObject, PointLike, Rectangle } from '@antv/g-lite';
 import { definedProps, Ellipse, Group, Rect, Path, Shape } from '@antv/g-lite';
 import type { PathArray } from '@antv/util';
-import { mat4, quat, vec3 } from 'gl-matrix';
 import type {
   CustomElementOption,
   KeyframeAnimation,
@@ -219,6 +218,7 @@ export class LottieAnimation {
                 );
 
                 if (existedKeyframe) {
+                  // eslint-disable-next-line @typescript-eslint/no-unused-vars
                   const { offset, easing: e = 'linear', ...rest } = currentKeyframe;
 
                   // merge interpolated properties
@@ -236,7 +236,8 @@ export class LottieAnimation {
 
           // console.log(mergedKeyframesOptions);
 
-          const animations = mergedKeyframesOptions.map(([formattedKeyframes, options]) => {
+          // TODO: return animations
+          mergedKeyframesOptions.map(([formattedKeyframes, options]) => {
             // format interpolated properties, e.g. scaleX -> transform
             this.formatKeyframes(formattedKeyframes, child);
             return child.animate(formattedKeyframes, options);

diff --git a/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts b/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts
@@ -142,8 +142,6 @@ export class CanvasRendererPlugin implements RenderingPlugin {
       const { width, height } = this.canvasConfig;
       const context = this.contextService.getContext();
       this.clearRect(context, 0, 0, width * dpr, height * dpr);
-
-      mat4.fromScaling(this.dprMatrix, vec3.fromValues(dpr, dpr, 1));
     });
 
     renderingService.hooks.destroy.tap(CanvasRendererPlugin.tag, () => {
@@ -193,6 +191,8 @@ export class CanvasRendererPlugin implements RenderingPlugin {
     renderingService.hooks.endFrame.tap(CanvasRendererPlugin.tag, () => {
       const context = this.contextService.getContext();
       // clear & clip dirty rectangle
+      const dpr = this.contextService.getDPR();
+      mat4.fromScaling(this.dprMatrix, vec3.fromValues(dpr, dpr, 1));
       mat4.multiply(this.vpMatrix, this.dprMatrix, this.camera.getOrthoMatrix());
 
       if (this.clearFullScreen) {

diff --git a/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts b/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   ICamera,
   CSSGradientValue,
   DataURLOptions,
@@ -10,8 +10,8 @@ import {
   RadialGradient,
   RenderingPlugin,
   RenderingService,
-  UnitType,
 } from '@antv/g-lite';
+import { UnitType } from '@antv/g-lite';
 import {
   CanvasConfig,
   computeLinearGradient,

diff --git a/packages/g-plugin-image-loader/src/ImagePool.ts b/packages/g-plugin-image-loader/src/ImagePool.ts
@@ -1,4 +1,5 @@
-import { LinearGradient, Pattern, RadialGradient, UnitType } from '@antv/g-lite';
+import type { LinearGradient, Pattern, RadialGradient } from '@antv/g-lite';
+import { UnitType } from '@antv/g-lite';
 import {
   CanvasConfig,
   computeLinearGradient,

diff --git a/packages/g-svg/src/SVGContextService.ts b/packages/g-svg/src/SVGContextService.ts
@@ -1,4 +1,5 @@
 import type { DataURLOptions } from '@antv/g-lite';
+import { isBrowser } from '@antv/g-lite';
 import { CanvasConfig, ContextService, inject, singleton } from '@antv/g-lite';
 import { createSVGElement } from '@antv/g-plugin-svg-renderer';
 import { isString } from '@antv/util';
@@ -15,7 +16,7 @@ export class SVGContextService implements ContextService<SVGElement> {
   ) {}
 
   async init() {
-    const { container, document: doc } = this.canvasConfig;
+    const { container, document: doc, devicePixelRatio } = this.canvasConfig;
 
     // create container
     this.$container = isString(container) ? (doc || document).getElementById(container) : container;
@@ -32,7 +33,8 @@ export class SVGContextService implements ContextService<SVGElement> {
       this.$namespace = $namespace;
     }
 
-    let dpr = window.devicePixelRatio || 1;
+    // use user-defined dpr first
+    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
     dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
     this.dpr = dpr;
   }
@@ -62,6 +64,7 @@ export class SVGContextService implements ContextService<SVGElement> {
   }
 
   resize(width: number, height: number) {
+    // SVG should ignore DPR
     if (this.$namespace) {
       this.$namespace.setAttribute('width', `${width}`);
       this.$namespace.setAttribute('height', `${height}`);

diff --git a/packages/g-webgl/src/WebGLContextService.ts b/packages/g-webgl/src/WebGLContextService.ts
@@ -26,7 +26,7 @@ export class WebGLContextService implements ContextService<WebGLRenderingContext
   ) {}
 
   async init() {
-    const { container, canvas, devicePixelRatio } = this.canvasConfig;
+    const { container, canvas } = this.canvasConfig;
 
     if (canvas) {
       this.$canvas = canvas;
@@ -51,10 +51,7 @@ export class WebGLContextService implements ContextService<WebGLRenderingContext
       }
     }
 
-    // use user-defined dpr first
-    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
-    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
-    this.dpr = dpr;
+    this.resize(this.canvasConfig.width, this.canvasConfig.height);
   }
 
   getDomElement() {
@@ -83,6 +80,12 @@ export class WebGLContextService implements ContextService<WebGLRenderingContext
   }
 
   resize(width: number, height: number) {
+    // use user-defined dpr first
+    const { devicePixelRatio } = this.canvasConfig;
+    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
+    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
+    this.dpr = dpr;
+
     if (this.$canvas) {
       const dpr = this.getDPR();
 

diff --git a/packages/g-webgpu/src/WebGPUContextService.ts b/packages/g-webgpu/src/WebGPUContextService.ts
@@ -26,7 +26,7 @@ export class WebGPUContextService implements ContextService<GPUCanvasContext> {
   ) {}
 
   async init() {
-    const { container, canvas, devicePixelRatio } = this.canvasConfig;
+    const { container, canvas } = this.canvasConfig;
 
     if (canvas) {
       this.$canvas = canvas;
@@ -51,10 +51,7 @@ export class WebGPUContextService implements ContextService<GPUCanvasContext> {
       }
     }
 
-    // use user-defined dpr first
-    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
-    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
-    this.dpr = dpr;
+    this.resize(this.canvasConfig.width, this.canvasConfig.height);
   }
 
   getDomElement() {
@@ -81,6 +78,12 @@ export class WebGPUContextService implements ContextService<GPUCanvasContext> {
   }
 
   resize(width: number, height: number) {
+    // use user-defined dpr first
+    const { devicePixelRatio } = this.canvasConfig;
+    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
+    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
+    this.dpr = dpr;
+
     if (this.$canvas) {
       const dpr = this.getDPR();
 

diff --git a/packages/g/src/__tests__/dom/element.spec.ts b/packages/g/src/__tests__/dom/element.spec.ts
@@ -1,4 +1,4 @@
-import { Element, Node } from '@antv/g';
+import { Element, Node, resetEntityCounter } from '@antv/g';
 import chai, { expect } from 'chai';
 // @ts-ignore
 import chaiAlmost from 'chai-almost';
@@ -9,6 +9,20 @@ chai.use(chaiAlmost());
 chai.use(sinonChai);
 
 describe('DOM Element API', () => {
+  it('should reset EntityCounter', () => {
+    resetEntityCounter();
+    let group1 = new Element();
+    let group2 = new Element();
+    expect(group1.entity).to.eqls(0);
+    expect(group2.entity).to.eqls(1);
+
+    resetEntityCounter();
+    group1 = new Element();
+    group2 = new Element();
+    expect(group1.entity).to.eqls(0);
+    expect(group2.entity).to.eqls(1);
+  });
+
   it('should appendChild with before & after correctly', () => {
     const group1 = new Element();
     const group2 = new Element();

diff --git a/packages/site/examples/canvas/demo/resize.tsx b/packages/site/examples/canvas/demo/resize.tsx
@@ -2,6 +2,7 @@ import { Canvas, CanvasEvent, Circle } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Renderer as SVGRenderer } from '@antv/g-svg';
 import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Renderer as CanvaskitRenderer } from '@antv/g-canvaskit';
 import * as lil from 'lil-gui';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
@@ -32,6 +33,12 @@ const App = function MultiWorld() {
     const svgRenderer2 = new SVGRenderer();
     const webglRenderer1 = new WebGLRenderer();
     const webglRenderer2 = new WebGLRenderer();
+    const canvaskitRenderer1 = new CanvaskitRenderer({
+      wasmDir: '/',
+    });
+    const canvaskitRenderer2 = new CanvaskitRenderer({
+      wasmDir: '/',
+    });
 
     // create a canvas
     canvas1 = new Canvas({
@@ -91,25 +98,33 @@ const App = function MultiWorld() {
     const rendererFolder = gui.addFolder('renderer');
     const rendererConfig = {
       renderer: 'canvas',
+      devicePixelRatio: window.devicePixelRatio,
     };
     rendererFolder
-      .add(rendererConfig, 'renderer', ['canvas', 'webgl', 'svg'])
+      .add(rendererConfig, 'renderer', ['canvas', 'webgl', 'svg', 'canvaskit'])
       .onChange((renderer) => {
         canvas1.setRenderer(
           renderer === 'canvas'
             ? canvasRenderer1
             : renderer === 'webgl'
             ? webglRenderer1
-            : svgRenderer1,
+            : renderer === 'svg'
+            ? svgRenderer1
+            : canvaskitRenderer1,
         );
         canvas2.setRenderer(
           renderer === 'canvas'
             ? canvasRenderer2
             : renderer === 'webgl'
             ? webglRenderer2
-            : svgRenderer2,
+            : renderer === 'svg'
+            ? svgRenderer2
+            : canvaskitRenderer2,
         );
       });
+    rendererFolder.add(rendererConfig, 'devicePixelRatio', 0.5, 5).onChange((dpr) => {
+      canvas1.getConfig().devicePixelRatio = dpr;
+    });
     rendererFolder.open();
   });