feat: support advanced features in radial-gradient #1165 (#1167)

* feat: support advanced features in radial-gradient #1165 * feat: allow changing DPR at runtime #1143 * feat: support applying CSS Transfrom on container #1161 * Publish - @antv/g-camera-api@1.0.7 - @antv/g-canvas@1.9.6 - @antv/g-canvaskit@0.8.6 - @antv/g-compat@1.0.7 - @antv/g-components@1.7.18 - @antv/g-css-layout-api@1.0.7 - @antv/g-css-typed-om-api@1.0.7 - @antv/g-devtool@0.10.18 - @antv/g-dom-mutation-observer-api@1.0.7 - @antv/g-gesture@0.0.41 - @antv/g-image-exporter@0.5.18 - @antv/g-layout-blocklike@1.7.18 - @antv/g-lite@1.0.7 - @antv/g-lottie-player@0.0.4 - @antv/g-math@1.7.18 - @antv/g-mobile-canvas-element@0.6.18 - @antv/g-mobile-canvas@0.8.15 - @antv/g-mobile-svg@0.8.15 - @antv/g-mobile-webgl@0.7.21 - @antv/g-plugin-3d@1.7.18 - @antv/g-plugin-a11y@0.4.18 - @antv/g-plugin-annotation@0.2.15 - @antv/g-plugin-box2d@1.7.18 - @antv/g-plugin-canvas-path-generator@1.1.18 - @antv/g-plugin-canvas-picker@1.8.15 - @antv/g-plugin-canvas-renderer@1.7.21 - @antv/g-plugin-canvaskit-renderer@1.1.19 - @antv/g-plugin-control@1.7.18 - @antv/g-plugin-css-select@1.7.18 - @antv/g-plugin-device-renderer@1.7.21 - @antv/g-plugin-dom-interaction@1.7.18 - @antv/g-plugin-dragndrop@1.6.18 - @antv/g-plugin-gpgpu@1.7.18 - @antv/g-plugin-html-renderer@1.7.18 - @antv/g-plugin-image-loader@1.1.19 - @antv/g-plugin-matterjs@1.7.18 - @antv/g-plugin-mobile-interaction@0.7.18 - @antv/g-plugin-physx@1.7.18 - @antv/g-plugin-rough-canvas-renderer@1.7.18 - @antv/g-plugin-rough-svg-renderer@1.7.18 - @antv/g-plugin-svg-picker@1.7.18 - @antv/g-plugin-svg-renderer@1.8.15 - @antv/g-plugin-webgl-device@1.7.18 - @antv/g-plugin-webgpu-device@1.7.18 - @antv/g-plugin-yoga@1.7.18 - @antv/g-shader-components@1.7.18 - @antv/g-svg@1.8.15 - @antv/g-web-animations-api@1.0.7 - @antv/g-web-components@1.7.18 - @antv/g-webgl@1.7.21 - @antv/g-webgpu@1.7.21 - @antv/g@5.10.0 - @antv/react-g@1.8.15 - @antv/g-site@1.8.15
antvis · Sep 29, 2022 · 407f5e2 · 407f5e2
1 parent a33b350
commit 407f5e2
Show file tree

Hide file tree

Showing 89 changed files with 1,628 additions and 478 deletions.
diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-camera-api",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A simple implementation of Camera API.",
   "keywords": [
     "antv",

diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
@@ -29,12 +29,12 @@
     "README.md"
   ],
   "dependencies": {
-    "@antv/g-plugin-canvas-path-generator": "^1.1.17",
-    "@antv/g-plugin-canvas-picker": "^1.8.14",
-    "@antv/g-plugin-canvas-renderer": "^1.7.20",
-    "@antv/g-plugin-dom-interaction": "^1.7.17",
-    "@antv/g-plugin-html-renderer": "^1.7.17",
-    "@antv/g-plugin-image-loader": "^1.1.18",
+    "@antv/g-plugin-canvas-path-generator": "^1.1.18",
+    "@antv/g-plugin-canvas-picker": "^1.8.15",
+    "@antv/g-plugin-canvas-renderer": "^1.7.21",
+    "@antv/g-plugin-dom-interaction": "^1.7.18",
+    "@antv/g-plugin-html-renderer": "^1.7.18",
+    "@antv/g-plugin-image-loader": "^1.1.19",
     "@antv/util": "^3.2.4",
     "tslib": "^2.3.1"
   },

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-canvaskit/package.json b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
@@ -29,12 +29,12 @@
     "README.md"
   ],
   "dependencies": {
-    "@antv/g-plugin-canvas-path-generator": "^1.1.17",
-    "@antv/g-plugin-canvas-picker": "^1.8.14",
-    "@antv/g-plugin-canvaskit-renderer": "^1.1.18",
-    "@antv/g-plugin-dom-interaction": "^1.7.17",
-    "@antv/g-plugin-html-renderer": "^1.7.17",
-    "@antv/g-plugin-image-loader": "^1.1.18",
+    "@antv/g-plugin-canvas-path-generator": "^1.1.18",
+    "@antv/g-plugin-canvas-picker": "^1.8.15",
+    "@antv/g-plugin-canvaskit-renderer": "^1.1.19",
+    "@antv/g-plugin-dom-interaction": "^1.7.18",
+    "@antv/g-plugin-html-renderer": "^1.7.18",
+    "@antv/g-plugin-image-loader": "^1.1.19",
     "@antv/util": "^3.2.4",
     "canvaskit-wasm": "^0.34.0",
     "tslib": "^2.3.1"

diff --git a/packages/g-compat/package.json b/packages/g-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-compat",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "The migration build which provides some compatible API for G 4.0.",
   "keywords": [
     "antv",

diff --git a/packages/g-components/package.json b/packages/g-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-components",
-  "version": "1.7.17",
+  "version": "1.7.18",
   "description": "Components for g",
   "keywords": [
     "antv",

diff --git a/packages/g-css-layout-api/package.json b/packages/g-css-layout-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-css-layout-api",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A simple implementation of CSS Layout API.",
   "keywords": [
     "antv",

diff --git a/packages/g-css-typed-om-api/package.json b/packages/g-css-typed-om-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-css-typed-om-api",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A simple implementation of CSS Typed OM API.",
   "keywords": [
     "antv",

diff --git a/packages/g-devtool/package.json b/packages/g-devtool/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@antv/g-devtool",
   "private": true,
-  "version": "0.10.17",
+  "version": "0.10.18",
   "description": "devtool for g in browser",
   "main": "index.js",
   "license": "MIT",

diff --git a/packages/g-dom-mutation-observer-api/package.json b/packages/g-dom-mutation-observer-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-dom-mutation-observer-api",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A simple implementation of DOM MutationObserver API.",
   "keywords": [
     "antv",

diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "G Gesture",
   "keywords": [
     "antv",
@@ -31,8 +31,8 @@
     "eventemitter3": "^4.0.0"
   },
   "devDependencies": {
-    "@antv/g-mobile-canvas": "^0.8.14",
-    "@antv/g-mobile-canvas-element": "^0.6.17"
+    "@antv/g-mobile-canvas": "^0.8.15",
+    "@antv/g-mobile-canvas-element": "^0.6.18"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/g-image-exporter/package.json b/packages/g-image-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-image-exporter",
-  "version": "0.5.17",
+  "version": "0.5.18",
   "description": "A image exporter for G using DOM API",
   "keywords": [
     "antv",

diff --git a/packages/g-layout-blocklike/package.json b/packages/g-layout-blocklike/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-layout-blocklike",
-  "version": "1.7.17",
+  "version": "1.7.18",
   "description": "A blocklike layout",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",
@@ -29,7 +29,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@antv/g-math": "^1.7.17",
+    "@antv/g-math": "^1.7.18",
     "@antv/util": "^3.2.4",
     "@types/offscreencanvas": "^2019.6.4",
     "d3-color": "^1.4.0",

diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts
@@ -157,6 +157,7 @@ export class Canvas extends EventTarget implements ICanvas {
       createImage,
       supportsPointerEvents,
       supportsTouchEvents,
+      supportsCSSTransform,
       isTouchEvent,
       isMouseEvent,
     } = config;
@@ -212,6 +213,7 @@ export class Canvas extends EventTarget implements ICanvas {
       background: background || 'transparent',
       createImage,
       document,
+      supportsCSSTransform,
     });
 
     this.initDefaultCamera(canvasWidth, canvasHeight);

diff --git a/packages/g-lite/src/css/cssom/CSSGradientValue.ts b/packages/g-lite/src/css/cssom/CSSGradientValue.ts
@@ -1,17 +1,23 @@
+import type { CSSKeywordValue } from './CSSKeywordValue';
+import type { CSSUnitValue } from './CSSNumericValue';
 import { CSSStyleValue, CSSStyleValueType } from './CSSStyleValue';
 import type { Nested, ParenLess } from './types';
 
+export interface LinearColorStop {
+  offset: CSSUnitValue;
+  color: string; // use user-defined value instead of parsed CSSRGB
+}
+
 export interface LinearGradient {
-  angle: number;
-  steps: [number, string][];
-  hash: string;
+  angle: CSSUnitValue;
+  steps: LinearColorStop[];
 }
 
 export interface RadialGradient {
-  cx: number;
-  cy: number;
-  steps: [number, string][];
-  hash: string;
+  cx: CSSUnitValue;
+  cy: CSSUnitValue;
+  size?: CSSUnitValue | CSSKeywordValue;
+  steps: LinearColorStop[];
 }
 
 export enum GradientType {