fix: fix incomplete animation field parsing

antvis · Nov 23, 2023 · 2aa3f40 · 2aa3f40
1 parent a315fec
commit 2aa3f40
Show file tree

Hide file tree

Showing 85 changed files with 1,153 additions and 391 deletions.
diff --git a/packages/g6/src/item/edge.ts b/packages/g6/src/item/edge.ts
@@ -126,14 +126,16 @@ export default class Edge extends Item {
     const timing = firstRendering ? 'buildIn' : 'update';
     // handle shape's animate
     if (animate && !disableAnimate && usingAnimates[timing]?.length) {
+      const { current = [], previous = [] } = diffState || {};
       this.animations = animateShapes(
         usingAnimates,
         targetStyles, // targetStylesMap
         this.shapeMap, // shapeMap
         undefined,
         [this.group, this.labelGroup],
         firstRendering ? 'buildIn' : 'update',
-        diffState?.current.map((state) => state.name) || this.changedStates,
+        current.concat(previous).map((state) => state.name) ||
+          this.changedStates,
         this.animateFrameListener,
         (canceled) => onfinish(displayModel.id, canceled),
       );

diff --git a/packages/g6/src/item/item.ts b/packages/g6/src/item/item.ts
@@ -769,7 +769,9 @@ export default abstract class Item implements IItem {
     const mergedData = mergeStyles([displayModelData, styles]);
     const { animates } = mergedData;
     const displayUpdateAnimates = [];
-    const stateNames = this.states.map((state) => state.name);
+    const stateNames = previousStates
+      .concat(this.states)
+      .map((state) => state.name);
     animates?.update?.forEach((animateCfg) => {
       const { states } = animateCfg as IStateAnimate;
       if (states && isArrayOverlap(states, stateNames)) {

diff --git a/packages/g6/src/item/node.ts b/packages/g6/src/item/node.ts
@@ -121,14 +121,16 @@ export default class Node extends Item {
     // handle shape's and group's animate
     if (animate && !disableAnimate && animates) {
       const animatesExcludePosition = getAnimatesExcludePosition(animates);
+      const { current = [], previous = [] } = diffState || {};
       this.animations = animateShapes(
         animatesExcludePosition, // animates
         renderExt.mergedStyles, // targetStylesMap
         this.shapeMap, // shapeMap
         undefined,
         [group, labelGroup],
         firstRendering ? 'buildIn' : 'update',
-        diffState?.current.map((state) => state.name) || this.changedStates,
+        current.concat(previous).map((state) => state.name) ||
+          this.changedStates,
         this.animateFrameListener,
         (canceled) => onfinish(model.id, canceled),
       );

diff --git a/packages/g6/src/stdlib/item/combo/circle.ts b/packages/g6/src/stdlib/item/combo/circle.ts
@@ -32,16 +32,26 @@ export class CircleCombo extends BaseNode {
     let shapes: ComboShapeMap = { keyShape: undefined };
 
     // keyShape
-    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData);
+    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData, diffState);
 
     // haloShape
     if (data.haloShape && this.drawHaloShape) {
-      shapes.haloShape = this.drawHaloShape(model, shapeMap, diffData);
+      shapes.haloShape = this.drawHaloShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // labelShape
     if (data.labelShape) {
-      shapes.labelShape = this.drawLabelShape(model, shapeMap, diffData);
+      shapes.labelShape = this.drawLabelShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // labelBackgroundShape
@@ -50,6 +60,7 @@ export class CircleCombo extends BaseNode {
         model,
         shapeMap,
         diffData,
+        diffState,
       );
     }
 
@@ -69,7 +80,12 @@ export class CircleCombo extends BaseNode {
 
     // iconShape
     if (data.iconShape) {
-      shapes.iconShape = this.drawIconShape(model, shapeMap, diffData);
+      shapes.iconShape = this.drawIconShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // badgeShape
@@ -90,7 +106,7 @@ export class CircleCombo extends BaseNode {
     if (data.otherShapes && this.drawOtherShapes) {
       shapes = {
         ...shapes,
-        ...this.drawOtherShapes(model, shapeMap, diffData),
+        ...this.drawOtherShapes(model, shapeMap, diffData, diffState),
       };
     }
     return shapes;
@@ -102,12 +118,11 @@ export class CircleCombo extends BaseNode {
     diffData?: { previous: ComboModelData; current: ComboModelData },
     diffState?: { previous: State[]; current: State[] },
   ): DisplayObject {
-    return this.upsertShape(
-      'circle',
-      'keyShape',
-      this.mergedStyles.keyShape,
-      shapeMap,
+    return this.upsertShape('circle', 'keyShape', this.mergedStyles.keyShape, {
       model,
-    );
+      shapeMap,
+      diffData,
+      diffState,
+    });
   }
 }
diff --git a/packages/g6/src/stdlib/item/combo/rect.ts b/packages/g6/src/stdlib/item/combo/rect.ts
@@ -33,16 +33,26 @@ export class RectCombo extends BaseNode {
     let shapes: ComboShapeMap = { keyShape: undefined };
 
     // keyShape
-    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData);
+    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData, diffState);
 
     // haloShape
     if (data.haloShape && this.drawHaloShape) {
-      shapes.haloShape = this.drawHaloShape(model, shapeMap, diffData);
+      shapes.haloShape = this.drawHaloShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // labelShape
     if (data.labelShape) {
-      shapes.labelShape = this.drawLabelShape(model, shapeMap, diffData);
+      shapes.labelShape = this.drawLabelShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // labelBackgroundShape
@@ -51,6 +61,7 @@ export class RectCombo extends BaseNode {
         model,
         shapeMap,
         diffData,
+        diffState,
       );
     }
 
@@ -70,7 +81,12 @@ export class RectCombo extends BaseNode {
 
     // iconShape
     if (data.iconShape) {
-      shapes.iconShape = this.drawIconShape(model, shapeMap, diffData);
+      shapes.iconShape = this.drawIconShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // badgeShape
@@ -91,7 +107,7 @@ export class RectCombo extends BaseNode {
     if (data.otherShapes && this.drawOtherShapes) {
       shapes = {
         ...shapes,
-        ...this.drawOtherShapes(model, shapeMap, diffData),
+        ...this.drawOtherShapes(model, shapeMap, diffData, diffState),
       };
     }
     return shapes;
@@ -103,13 +119,12 @@ export class RectCombo extends BaseNode {
     diffData?: { previous: ComboModelData; current: ComboModelData },
     diffState?: { previous: State[]; current: State[] },
   ): DisplayObject {
-    return this.upsertShape(
-      'rect',
-      'keyShape',
-      this.mergedStyles.keyShape,
-      shapeMap,
+    return this.upsertShape('rect', 'keyShape', this.mergedStyles.keyShape, {
       model,
-    );
+      shapeMap,
+      diffData,
+      diffState,
+    });
   }
 
   public getMergedStyles(model: ComboDisplayModel) {

diff --git a/packages/g6/src/stdlib/item/edge/base.ts b/packages/g6/src/stdlib/item/edge/base.ts
@@ -297,7 +297,12 @@ export abstract class BaseEdge {
       ...otherStyle,
     };
     this.transformCache.labelShapeTransform = style.transform;
-    return this.upsertShape('text', 'labelShape', style, shapeMap, model);
+    return this.upsertShape('text', 'labelShape', style, {
+      model,
+      shapeMap,
+      diffData,
+      diffState,
+    });
   }
 
   /**
@@ -356,13 +361,12 @@ export abstract class BaseEdge {
       }`;
     }
 
-    return this.upsertShape(
-      'rect',
-      'labelBackgroundShape',
-      bgStyle,
-      shapeMap,
+    return this.upsertShape('rect', 'labelBackgroundShape', bgStyle, {
       model,
-    );
+      shapeMap,
+      diffData,
+      diffState,
+    });
   }
 
   /**
@@ -448,8 +452,12 @@ export abstract class BaseEdge {
       iconShapeType,
       'iconShape',
       shapeStyle as GShapeStyle,
-      shapeMap,
-      model,
+      {
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      },
     );
   }
 
@@ -479,8 +487,12 @@ export abstract class BaseEdge {
         stroke: attributes.stroke,
         ...haloShapeStyle,
       },
-      shapeMap,
-      model,
+      {
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      },
     );
   }
 
@@ -571,8 +583,10 @@ export abstract class BaseEdge {
         transformOrigin: 'center',
         ...others,
       },
-      {},
-      model,
+      {
+        model,
+        shapeMap: {},
+      },
     );
     resultStyle[`${markerField}Offset`] = width / 2 + offset;
   }
@@ -590,9 +604,13 @@ export abstract class BaseEdge {
     type: SHAPE_TYPE,
     id: string,
     style: ShapeStyle,
-    shapeMap: { [shapeId: string]: DisplayObject },
-    model: EdgeDisplayModel,
+    config: {
+      model: EdgeDisplayModel;
+      shapeMap?: EdgeShapeMap;
+      diffData?: { previous: EdgeModelData; current: EdgeModelData };
+      diffState?: { previous: State[]; current: State[] };
+    },
   ): DisplayObject {
-    return upsertShape(type, id, style as GShapeStyle, shapeMap, model);
+    return upsertShape(type, id, style as GShapeStyle, config);
   }
 }
diff --git a/packages/g6/src/stdlib/item/edge/cubic.ts b/packages/g6/src/stdlib/item/edge/cubic.ts
@@ -51,14 +51,25 @@ export class CubicEdge extends BaseEdge {
       targetPoint,
       shapeMap,
       diffData,
+      diffState,
     );
 
     if (data.haloShape) {
-      shapes.haloShape = this.drawHaloShape(model, shapeMap, diffData);
+      shapes.haloShape = this.drawHaloShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     if (data.labelShape) {
-      shapes.labelShape = this.drawLabelShape(model, shapeMap, diffData);
+      shapes.labelShape = this.drawLabelShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // labelBackgroundShape
@@ -67,11 +78,17 @@ export class CubicEdge extends BaseEdge {
         model,
         shapeMap,
         diffData,
+        diffState,
       );
     }
 
     if (data.iconShape) {
-      shapes.iconShape = this.drawIconShape(model, shapeMap, diffData);
+      shapes.iconShape = this.drawIconShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // TODO: other shapes
@@ -115,7 +132,12 @@ export class CubicEdge extends BaseEdge {
     this.upsertArrow('start', startArrow, others, model, lineStyle);
     this.upsertArrow('end', endArrow, others, model, lineStyle);
 
-    return this.upsertShape('path', 'keyShape', lineStyle, shapeMap, model);
+    return this.upsertShape('path', 'keyShape', lineStyle, {
+      model,
+      shapeMap,
+      diffData,
+      diffState,
+    });
   }
 
   /**