feat: 升级 G 到 6.0

Author: zengyue

jest.config.js

@@ -29,4 +29,5 @@ module.exports = {
       },
     },
   },
+  transformIgnorePatterns: ['/node_modules/(?!d3-color/)'],
 };

packages/f-engine/package.json

@@ -7,13 +7,13 @@
   "miniprogram": "dist",
   "sideEffects": false,
   "dependencies": {
-    "@antv/g-gesture": "~2.2.0",
-    "@antv/g-lite": "~1.2.0",
-    "@antv/g-mobile-canvas": "~0.11.0",
-    "@antv/g-mobile-canvas-element": "~0.8.0",
-    "@antv/g-mobile-svg": "~0.10.0",
-    "@antv/g-mobile-webgl": "~0.9.0",
-    "@antv/g-web-animations-api": "~1.2.0",
+    "@antv/g-gesture": "~3.0.0",
+    "@antv/g-lite": "~2.0.0",
+    "@antv/g-mobile-canvas": "~1.0.0",
+    "@antv/g-mobile-canvas-element": "~1.0.0",
+    "@antv/g-mobile-svg": "~1.0.0",
+    "@antv/g-mobile-webgl": "~1.0.0",
+    "@antv/g-web-animations-api": "~2.0.0",
     "@antv/util": "^3.0.6",
     "@babel/runtime": "^7.12.5",
     "eventemitter3": "^4.0.0",

packages/f-engine/src/canvas/index.ts

@@ -294,8 +294,9 @@ class Canvas<P extends CanvasProps = CanvasProps> {
     const layout = computeLayout(style);
     const { left, top } = layout;
     // 设置 container 的位置
-    this.container.setAttribute('x', left);
-    this.container.setAttribute('y', top);
+    // this.container.setAttribute('x', left);
+    // this.container.setAttribute('y', top);
+    this.container.setAttribute('transform', `translate(${left}, ${top})`);
 
     this.context = {
       ...this.context,

packages/f-engine/src/canvas/render/animation.ts

@@ -49,22 +49,22 @@ function morphShape(lastNode: VNode, nextNode: VNode, animator?: Animator) {
   const startStyle = {
     ...lastStyle,
     ...start,
-    path: lastPath,
+    d: lastPath,
   };
   const endStyle = {
     ...nextStyle,
     ...end,
-    path: nextPath,
+    d: nextPath,
   };
 
-  const pathShape = createShape('path', { style: { ...startStyle, path: '' } });
+  const pathShape = createShape('path', { style: { ...startStyle, d: '' } });
 
   // 形变双方都有的属性才能动画
   const animateProperty = property
     .filter((key) => {
       return nextParsedStyle.hasOwnProperty(key) && lastParsedStyle.hasOwnProperty(key);
     })
-    .concat('path');
+    .concat(['d']);
 
   animator.animate(pathShape, startStyle, endStyle, {
     ...animationEffect,

packages/f-engine/src/canvas/render/createShape.ts

@@ -10,6 +10,7 @@ import {
   DisplayObject,
   CSS,
   PropertySyntax,
+  runtime,
 } from '@antv/g-lite';
 import { Arc, Marker, Sector, SmoothPolyline } from '../../shape';
 import Gesture from '../../gesture';
@@ -91,6 +92,9 @@ SECTOR_CSS_PROPERTY.forEach((property) => {
   CSS.registerProperty(property);
 });
 
+// https://github.com/antvis/G/releases/tag/%40antv%2Fg%406.0.0
+runtime.enableCSSParsing = true;
+
 function createShape(type: string, props) {
   if (!type) return null;
   const ShapeClass = getTag(type);

packages/f-engine/src/canvas/shape/rect.ts

@@ -1,9 +1,10 @@
 export default (layout) => {
   const { left, top, width, height } = layout;
   return {
-    x: left,
-    y: top,
+    // x: left,
+    // y: top,
     width,
     height,
+    transform: `translate(${left}, ${top})`,
   };
 };

packages/f-engine/src/shape/arc.ts

@@ -62,12 +62,12 @@ export class Arc extends Path {
     const { cx = 0, cy = 0, startAngle, endAngle, r, anticlockwise } = this.parsedStyle;
 
     if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) {
-      super.setAttribute('path', '');
+      super.setAttribute('d', '');
       return;
     }
 
     const path = this.createPath(cx, cy, deg2rad(startAngle), deg2rad(endAngle), r, anticlockwise);
-    super.setAttribute('path', path);
+    super.setAttribute('d', path);
   }
 
   private createPath(

packages/f-engine/src/shape/marker.ts

@@ -62,6 +62,6 @@ export class Marker extends Path {
 
     const path = method(x, y, radius);
 
-    super.setAttribute('path', path);
+    super.setAttribute('d', path);
   }
 }

packages/f-engine/src/shape/sector.ts

@@ -135,7 +135,7 @@ export class Sector extends Path {
     const { cx, cy, startAngle, endAngle, r, r0, radius, anticlockwise = false } = this.parsedStyle;
 
     if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) {
-      super.setAttribute('path', '');
+      super.setAttribute('d', '');
       return;
     }
 
@@ -149,7 +149,7 @@ export class Sector extends Path {
       radius ? radius : [0, 0, 0, 0],
       anticlockwise,
     );
-    super.setAttribute('path', path);
+    super.setAttribute('d', path);
   }
 
   private createPath(

packages/f-engine/src/shape/smoothPolyline.ts

@@ -38,7 +38,7 @@ export class SmoothPolyline extends Path {
           };
         }),
         false,
-        constaint
+        constaint,
       );
 
       for (let i = 0, n = sps.length; i < n; i++) {
@@ -82,6 +82,6 @@ export class SmoothPolyline extends Path {
       }
       d.push(['L', pos[l][0], pos[l][1]]);
     }
-    super.setAttribute('path', d);
+    super.setAttribute('d', d);
   }
 }