fix(animation): skip path morphing animation with sub path (close: #4615

)

__tests__/plots/animation/index.ts

@@ -17,3 +17,4 @@ export { soldIntervalKeyframe } from './sold-interval-keyframe';
 export { soldIntervalPieKeyframe } from './sold-interval-pie-keyframe';
 export { aaplAreaKeyframe } from './aapl-area-keyframe';
 export { profitIntervalRange } from './profit-interval-range';
+export { irisPointShapesKeyframe } from './iris-point-shapes-keyframe';

__tests__/plots/animation/iris-point-shapes-keyframe.ts

@@ -0,0 +1,33 @@
+import { G2Spec } from '../../../src';
+
+export function irisPointShapesKeyframe(): G2Spec {
+  const point = {
+    type: 'point',
+    data: {
+      type: 'fetch',
+      value: 'data/iris.csv',
+    },
+    encode: {
+      x: 'x',
+      y: 'y',
+      shape: 'category',
+      color: 'category',
+      size: 5,
+    },
+    scale: {
+      shape: { range: ['point', 'plus', 'diamond'] },
+    },
+  };
+  return {
+    type: 'timingKeyframe',
+    width: 800,
+    children: [
+      { ...point, width: 800 },
+      { ...point, width: 600 },
+    ],
+  };
+}
+
+irisPointShapesKeyframe.only = true;
+
+irisPointShapesKeyframe.intervals = [false, false, [333, 666]];

src/animation/morphing.ts

@@ -122,6 +122,27 @@ function maybePath(node: DisplayObject, d: string): DisplayObject {
   return path;
 }
 
+function hasUniqueString(search: string, pattern: string): boolean {
+  const first = search.indexOf(pattern);
+  const last = search.lastIndexOf(pattern);
+  return first === last;
+}
+
+// Path definition with multiple m and M command has sub path.
+// eg. 'M10,10...M20,20', 'm10,10...m20,20'
+function hasSubPath(path: string): boolean {
+  return !hasUniqueString(path, 'm') || !hasUniqueString(path, 'M');
+}
+
+function shape2path(shape: DisplayObject): string {
+  const path = convertToPath(shape);
+  if (!path) return;
+  // Path definition with sub path can't do path morphing animation,
+  // so skip this kind of path.
+  if (hasSubPath(path)) return;
+  return path;
+}
+
 function oneToOne(
   shape: DisplayObject,
   from: DisplayObject,
@@ -133,8 +154,8 @@ function oneToOne(
   // the apply shape to shape animation.
   const { nodeName: fromName } = from;
   const { nodeName: toName } = to;
-  const fromPath = convertToPath(from);
-  const toPath = convertToPath(to);
+  const fromPath = shape2path(from);
+  const toPath = shape2path(to);
   const isSameNodes = fromName === toName && fromName !== 'path';
   const hasNonPathNode = fromPath === undefined || toPath === undefined;
   if (isSameNodes || hasNonPathNode) return shapeToShape(from, to, timeEffect);

src/interaction/native/brushFilter.ts

@@ -60,7 +60,7 @@ export function brushFilter(
 
   return () => {
     brush.destroy();
-    root.removeEventListener('dblclick', click);
+    root.removeEventListener('click', click);
   };
 }