feat: 升级 G 到 6.0

antvis · May 31, 2024 · ab3e0d8 · ab3e0d8
1 parent f307f6d
commit ab3e0d8
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 68 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -29,4 +29,5 @@ module.exports = {
       },
     },
   },
+  transformIgnorePatterns: ['/node_modules/(?!d3-color/)'],
 };
diff --git a/packages/f-engine/package.json b/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",

diff --git a/packages/f-engine/src/canvas/index.ts b/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,

diff --git a/packages/f-engine/src/canvas/render/animation.ts b/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,

diff --git a/packages/f-engine/src/canvas/render/createShape.ts b/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);

diff --git a/packages/f-engine/src/canvas/shape/rect.ts b/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})`,
   };
 };
diff --git a/packages/f-engine/src/shape/arc.ts b/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(

diff --git a/packages/f-engine/src/shape/marker.ts b/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);
   }
 }
diff --git a/packages/f-engine/src/shape/sector.ts b/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(

diff --git a/packages/f-engine/src/shape/smoothPolyline.ts b/packages/f-engine/src/shape/smoothPolyline.ts
@@ -37,7 +37,7 @@ export class SmoothPolyline extends Path {
           };
         }),
         false,
-        constaint
+        constaint,
       );
 
       for (let i = 0, n = sps.length; i < n; i++) {
@@ -52,6 +52,6 @@ export class SmoothPolyline extends Path {
       }
       d.push(['L', pos[l][0], pos[l][1]]);
     }
-    super.setAttribute('path', d);
+    super.setAttribute('d', d);
   }
 }
diff --git a/packages/f-engine/test/canvas/animation.test.tsx b/packages/f-engine/test/canvas/animation.test.tsx
@@ -90,7 +90,7 @@ describe('动画', () => {
                 opacity: 0,
               },
               easing: 'ease',
-              duration: 50,
+              duration: 100,
               delay: 10,
               property: ['opacity'],
             },
@@ -106,7 +106,7 @@ describe('动画', () => {
     const update2 = <Canvas context={context}></Canvas>;
     await canvas.update(update2.props);
 
-    await delay(200);
+    await delay(2000);
     expect(context).toMatchImageSnapshot();
   });
 

diff --git a/packages/f-engine/test/canvas/svg/svg.test.tsx b/packages/f-engine/test/canvas/svg/svg.test.tsx
@@ -26,7 +26,7 @@ describe('svg', () => {
 
     const dataURL = await canvas.toDataURL();
     expect(dataURL).toBe(
-      'data:image/svg+xml;charset=utf8,%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%20color-interpolation-filters%3D%22sRGB%22%20style%3D%22background%3A%20transparent%3B%22%3E%3Cdefs%2F%3E%3Cg%20id%3D%22g-svg-camera%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20id%3D%22g-root%22%20fill%3D%22none%22%20stroke%3D%22none%22%20visibility%3D%22visible%22%20font-size%3D%2212px%22%20font-family%3D%22%26quot%3BHelvetica%20Neue%26quot%3B%2C%20Helvetica%2C%20%26quot%3BPingFang%20SC%26quot%3B%2C%20%26quot%3BHiragino%20Sans%20GB%26quot%3B%2C%20%26quot%3BMicrosoft%20YaHei%26quot%3B%2C%20Arial%2C%20sans-serif%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20font-variant%3D%22normal%22%20text-anchor%3D%22left%22%20stroke-dashoffset%3D%220px%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cpath%20id%3D%22g-svg-1%22%20fill%3D%22rgba(255%2C0%2C0%2C1)%22%20d%3D%22M%200%2C0%20l%20100%2C0%20l%200%2C100%20l-100%200%20z%22%20stroke%3D%22none%22%20width%3D%22100px%22%20height%3D%22100px%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+      'data:image/svg+xml;charset=utf8,%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%20color-interpolation-filters%3D%22sRGB%22%20style%3D%22background%3A%20transparent%3B%22%3E%3Cdefs%2F%3E%3Cg%20id%3D%22g-svg-camera%22%3E%3Cg%20id%3D%22g-root%22%20fill%3D%22none%22%20stroke%3D%22none%22%20visibility%3D%22visible%22%20font-size%3D%2212px%22%20font-family%3D%22%26quot%3BHelvetica%20Neue%26quot%3B%2C%20Helvetica%2C%20%26quot%3BPingFang%20SC%26quot%3B%2C%20%26quot%3BHiragino%20Sans%20GB%26quot%3B%2C%20%26quot%3BMicrosoft%20YaHei%26quot%3B%2C%20Arial%2C%20sans-serif%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20font-variant%3D%22normal%22%20text-anchor%3D%22left%22%20stroke-dashoffset%3D%220px%22%3E%3Cg%3E%3Cpath%20id%3D%22g-svg-1%22%20fill%3D%22rgba(255%2C0%2C0%2C1)%22%20d%3D%22M%200%2C0%20l%20100%2C0%20l%200%2C100%20l-100%200%20z%22%20stroke%3D%22none%22%20width%3D%22100px%22%20height%3D%22100px%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
     );
   });
 });
diff --git a/packages/f-engine/test/g.test.tsx b/packages/f-engine/test/g.test.tsx
@@ -1,4 +1,4 @@
-import { Canvas, CanvasEvent, Circle, convertToPath, Path, Rect } from '@antv/g-lite';
+import { Canvas, CanvasEvent, Circle, convertToPath, Path, Rect, Text } from '@antv/g-lite';
 import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas';
 import '@antv/g-web-animations-api';
 import { createContext, delay } from './util';
@@ -19,55 +19,42 @@ describe('G 的测试使用', () => {
 
     await delay(1000);
 
-    /**
-     * Path -> Circle
-     */
-    const circle = new Circle({
-      style: {
-        cx: 50,
-        cy: 50,
-        r: 20,
-        fill: 'red',
-      },
-    });
-    const circlePathStr = convertToPath(circle);
+    // const text = new Text({
+    //   style: {
+    //     x: 20,
+    //     y: 20,
+    //     text: 'Hello World',
+    //     fill: 'red',
+    //   },
+    // });
+    // const container = canvas.getRoot();
+    // container.setAttribute('fontSize', 30);
+
+    // canvas.appendChild(text);
+
+    // console.log(text);
 
-    /**
-     * Rect -> Circle
-     */
     const rect = new Rect({
       style: {
         x: 10,
-        y: 10,
-        width: 60,
-        height: 50,
+        y: 20,
+        width: 50,
+        height: 100,
         fill: 'red',
       },
     });
 
-    canvas.appendChild(rect);
-    const rectPathStr = convertToPath(rect);
-
-    const path = new Path({
+    const rect1 = new Rect({
       style: {
-        fill: 'red',
+        x: 10,
+        y: 20,
+        width: 50,
+        height: 100,
+        fill: '#1890FF',
       },
     });
-    rect.replaceWith(path);
-
-    path.style.fill = 'red';
-    path.style.path = rectPathStr;
-
-    // canvas.appendChild(pathF);
-
-    path.animate([{ path: rectPathStr }, { path: circlePathStr }], {
-      duration: 2500,
-      easing: 'ease',
-      // iterations: Infinity,
-      // direction: 'alternate',
-      fill: 'both',
-    });
+    rect.appendChild(rect1);
 
-    await delay(1000);
+    canvas.appendChild(rect);
   });
 });
diff --git a/packages/f-engine/test/shape/index.test.tsx b/packages/f-engine/test/shape/index.test.tsx
@@ -106,6 +106,7 @@ class View1 extends Component {
             x: 150,
             y: 100,
             symbol: 'arrow',
+            transformOrigin: 'left top',
             transform: 'rotate(90deg)',
           }}
         />

diff --git a/packages/f-engine/test/shape/registerTag.test.tsx b/packages/f-engine/test/shape/registerTag.test.tsx
@@ -16,7 +16,7 @@ describe('自定义标签', () => {
       <Canvas renderer={renderer} context={context}>
         <customTag
           style={{
-            path: [
+            d: [
               ['M', 10, 10],
               ['L', 100, 10],
             ],
@@ -28,7 +28,7 @@ describe('自定义标签', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
     await delay(200);
     expect(context).toMatchImageSnapshot();
   });

diff --git a/packages/f-lottie/package.json b/packages/f-lottie/package.json
@@ -15,8 +15,8 @@
     "lottie"
   ],
   "dependencies": {
-    "@antv/f-engine": "1.2.2",
-    "@antv/g-lottie-player": "~0.2.0",
+    "@antv/f-engine": "1.2.1",
+    "@antv/g-lottie-player": "~1.0.0",
     "@babel/runtime": "^7.12.5",
     "tslib": "^2.3.1"
   },