Fix lottie (#1250)

* fix: animated clipPath should affect target's whole subtree #1244 * fix(clippath): remove redundant clippath in defs #1244 * chore: adjust demo dir * chore: avoid using duplicated attribute name in g-component * fix(annotation): support continuous frame selection #1240 * Publish - @antv/g-camera-api@1.0.22 - @antv/g-canvas@1.9.21 - @antv/g-canvaskit@0.8.21 - @antv/g-components@1.7.33 - @antv/g-css-layout-api@1.0.22 - @antv/g-css-typed-om-api@1.0.22 - @antv/g-devtool@0.10.33 - @antv/g-dom-mutation-observer-api@1.0.22 - @antv/g-gesture@0.0.56 - @antv/g-image-exporter@0.5.33 - @antv/g-layout-blocklike@1.7.33 - @antv/g-lite@1.0.22 - @antv/g-lottie-player@0.0.19 - @antv/g-math@1.7.33 - @antv/g-mobile-canvas-element@0.6.33 - @antv/g-mobile-canvas@0.8.30 - @antv/g-mobile-svg@0.8.30 - @antv/g-mobile-webgl@0.7.36 - @antv/g-pattern@1.0.3 - @antv/g-plugin-3d@1.7.33 - @antv/g-plugin-a11y@0.4.33 - @antv/g-plugin-annotation@0.2.31 - @antv/g-plugin-box2d@1.7.33 - @antv/g-plugin-canvas-path-generator@1.1.33 - @antv/g-plugin-canvas-picker@1.8.30 - @antv/g-plugin-canvas-renderer@1.7.36 - @antv/g-plugin-canvaskit-renderer@1.1.34 - @antv/g-plugin-control@1.7.33 - @antv/g-plugin-css-select@1.7.33 - @antv/g-plugin-device-renderer@1.7.36 - @antv/g-plugin-dom-interaction@1.7.33 - @antv/g-plugin-dragndrop@1.6.33 - @antv/g-plugin-gpgpu@1.7.33 - @antv/g-plugin-html-renderer@1.7.33 - @antv/g-plugin-image-loader@1.1.34 - @antv/g-plugin-matterjs@1.7.33 - @antv/g-plugin-mobile-interaction@0.7.33 - @antv/g-plugin-physx@1.7.33 - @antv/g-plugin-rough-canvas-renderer@1.7.34 - @antv/g-plugin-rough-svg-renderer@1.7.34 - @antv/g-plugin-svg-picker@1.7.33 - @antv/g-plugin-svg-renderer@1.8.30 - @antv/g-plugin-webgl-device@1.7.33 - @antv/g-plugin-webgpu-device@1.7.33 - @antv/g-plugin-yoga@1.7.33 - @antv/g-shader-components@1.7.33 - @antv/g-svg@1.8.30 - @antv/g-web-animations-api@1.0.22 - @antv/g-web-components@1.7.33 - @antv/g-webgl@1.7.36 - @antv/g-webgpu@1.7.36 - @antv/g@5.15.2 - @antv/react-g@1.8.30
antvis · Dec 13, 2022 · 9f3e82c · 9f3e82c
1 parent 4c07e72
commit 9f3e82c
Show file tree

Hide file tree

Showing 92 changed files with 3,537 additions and 191 deletions.
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "chai": "^4.3.4",
     "chai-almost": "^1.0.1",
     "cross-env": "^6.0.3",
+    "d3": "latest",
     "eslint": "^7.28.0",
     "eslint-plugin-jest": "24.3.6",
     "father": "^2.30.13",

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.21",
+  "version": "1.0.22",
   "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.20",
+  "version": "1.9.21",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
@@ -32,12 +32,12 @@
     "sync": "tnpm sync"
   },
   "dependencies": {
-    "@antv/g-plugin-canvas-path-generator": "^1.1.32",
-    "@antv/g-plugin-canvas-picker": "^1.8.29",
-    "@antv/g-plugin-canvas-renderer": "^1.7.35",
-    "@antv/g-plugin-dom-interaction": "^1.7.32",
-    "@antv/g-plugin-html-renderer": "^1.7.32",
-    "@antv/g-plugin-image-loader": "^1.1.33",
+    "@antv/g-plugin-canvas-path-generator": "^1.1.33",
+    "@antv/g-plugin-canvas-picker": "^1.8.30",
+    "@antv/g-plugin-canvas-renderer": "^1.7.36",
+    "@antv/g-plugin-dom-interaction": "^1.7.33",
+    "@antv/g-plugin-html-renderer": "^1.7.33",
+    "@antv/g-plugin-image-loader": "^1.1.34",
     "@antv/util": "^3.3.1",
     "@types/offscreencanvas": "^2019.6.4",
     "tslib": "^2.3.1"

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.20",
+  "version": "0.8.21",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
@@ -32,12 +32,12 @@
     "sync": "tnpm sync"
   },
   "dependencies": {
-    "@antv/g-plugin-canvas-path-generator": "^1.1.32",
-    "@antv/g-plugin-canvas-picker": "^1.8.29",
-    "@antv/g-plugin-canvaskit-renderer": "^1.1.33",
-    "@antv/g-plugin-dom-interaction": "^1.7.32",
-    "@antv/g-plugin-html-renderer": "^1.7.32",
-    "@antv/g-plugin-image-loader": "^1.1.33",
+    "@antv/g-plugin-canvas-path-generator": "^1.1.33",
+    "@antv/g-plugin-canvas-picker": "^1.8.30",
+    "@antv/g-plugin-canvaskit-renderer": "^1.1.34",
+    "@antv/g-plugin-dom-interaction": "^1.7.33",
+    "@antv/g-plugin-html-renderer": "^1.7.33",
+    "@antv/g-plugin-image-loader": "^1.1.34",
     "@antv/util": "^3.3.1",
     "canvaskit-wasm": "^0.34.0",
     "tslib": "^2.3.1"

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.32",
+  "version": "1.7.33",
   "description": "Components for g",
   "keywords": [
     "antv",

diff --git a/packages/g-components/src/Arrow.ts b/packages/g-components/src/Arrow.ts
@@ -58,8 +58,16 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
       type: Arrow.tag,
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { body, startHead, endHead, startHeadOffset, endHeadOffset, ...rest } = this.attributes;
+    const {
+      body,
+      startHead,
+      endHead,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      startHeadOffset,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      endHeadOffset,
+      ...rest
+    } = this.attributes;
 
     if (!body) {
       throw new Error("Arrow's body is required");
@@ -123,24 +131,52 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
       name === 'lineWidth' ||
       name === 'increasedLineWidthForHitTesting'
     ) {
-      this.applyArrowStyle({ [name]: newValue }, [this.body, this.startHead, this.endHead]);
+      this.applyArrowStyle({ [name]: newValue }, [
+        this.body,
+        this.startHead,
+        this.endHead,
+      ]);
     } else if (name === 'startHead' || name === 'endHead') {
       const isStart = name === 'startHead';
       // delete existed arrow head first
       this.destroyArrowHead(isStart);
 
       if (newValue) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { body, startHead, endHead, startHeadOffset, endHeadOffset, ...rest } =
-          this.attributes;
+        const {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          body,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          startHead,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          endHead,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          startHeadOffset,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          endHeadOffset,
+          ...rest
+        } = this.attributes;
         // append new arrow head
 
-        this.appendArrowHead(this.getArrowHeadType(newValue as ArrowHead), isStart);
+        this.appendArrowHead(
+          this.getArrowHeadType(newValue as ArrowHead),
+          isStart,
+        );
         this.applyArrowStyle(rest, [isStart ? this.startHead : this.endHead]);
       }
     } else if (name === 'body') {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { body, startHead, endHead, startHeadOffset, endHeadOffset, ...rest } = this.attributes;
+      const {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        body,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        startHead,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        endHead,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        startHeadOffset,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        endHeadOffset,
+        ...rest
+      } = this.attributes;
       this.body.destroy();
       // @ts-ignore
       this.body = newValue;
@@ -183,7 +219,9 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
 
     this.appendChild(head);
 
-    const offset = isStart ? this.attributes.startHeadOffset : this.attributes.endHeadOffset;
+    const offset = isStart
+      ? this.attributes.startHeadOffset
+      : this.attributes.endHeadOffset;
     if (offset) {
       this.moveArrowHeadAlongTangent(offset, isStart);
     }
@@ -203,7 +241,12 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
     const bodyType = this.body && this.body.nodeName;
 
     if (bodyType === Shape.LINE) {
-      const { x1: _x1, x2: _x2, y1: _y1, y2: _y2 } = (this.body as Line).attributes;
+      const {
+        x1: _x1,
+        x2: _x2,
+        y1: _y1,
+        y2: _y2,
+      } = (this.body as Line).attributes;
       x1 = isStart ? _x2 : _x1;
       x2 = isStart ? _x1 : _x2;
       y1 = isStart ? _y2 : _y1;
@@ -237,7 +280,9 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
     }
 
     head.setLocalPosition(position);
-    head.setLocalEulerAngles((rad * 180) / Math.PI + head.getLocalEulerAngles());
+    head.setLocalEulerAngles(
+      (rad * 180) / Math.PI + head.getLocalEulerAngles(),
+    );
   }
 
   private moveArrowHeadAlongTangent(offset: number, isStart: boolean) {
@@ -291,9 +336,9 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
     return new Path({
       style: {
         // draw an angle '<'
-        path: `M${10 * cos(PI / 6)},${10 * sin(PI / 6)} L0,0 L${10 * cos(PI / 6)},-${
-          10 * sin(PI / 6)
-        }`,
+        path: `M${10 * cos(PI / 6)},${10 * sin(PI / 6)} L0,0 L${
+          10 * cos(PI / 6)
+        },-${10 * sin(PI / 6)}`,
         stroke,
         lineWidth,
         transformOrigin: 'center',
@@ -302,9 +347,17 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
     });
   }
 
-  private applyArrowStyle(attributes: ArrowStyleProps, objects: (DisplayObject | undefined)[]) {
-    const { opacity, stroke, strokeOpacity, lineWidth, increasedLineWidthForHitTesting } =
-      attributes;
+  private applyArrowStyle(
+    attributes: ArrowStyleProps,
+    objects: (DisplayObject | undefined)[],
+  ) {
+    const {
+      opacity,
+      stroke,
+      strokeOpacity,
+      lineWidth,
+      increasedLineWidthForHitTesting,
+    } = attributes;
     objects.forEach((shape) => {
       if (shape) {
         if (!isNil(opacity)) {
@@ -324,7 +377,8 @@ export class Arrow extends CustomElement<ArrowStyleProps> {
         }
 
         if (!isNil(increasedLineWidthForHitTesting)) {
-          shape.style.increasedLineWidthForHitTesting = increasedLineWidthForHitTesting;
+          shape.style.increasedLineWidthForHitTesting =
+            increasedLineWidthForHitTesting;
         }
       }
     });