Merge pull request #20402 from apache/feat-compoundPath

feat(custom): support compoundPath in custom series renderItem

Author: Ovilia

src/animation/customGraphicTransition.ts

@@ -149,8 +149,24 @@ export function applyUpdateTransition(
     const propsToSet = {} as ElementProps;
 
     prepareTransformAllPropsFinal(el, elOption, propsToSet);
-    prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
-    prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
+
+    if (el.type === 'compound') {
+        /**
+         * We cannot directly clone shape for compoundPath,
+         * because it makes the path to be an object instead of a Path instance,
+         * and thus missing `buildPath` method.
+         */
+        const paths: Path[] = (el as Path).shape.paths;
+        const optionPaths = elOption.shape.paths as TransitionElementOption['shape']['paths'];
+        for (let i = 0; i < optionPaths.length; i++) {
+            const path = optionPaths[i];
+            prepareShapeOrExtraAllPropsFinal('shape', path, paths[i]);
+        }
+    }
+    else {
+        prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
+        prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
+    }
 
     if (!isInit && hasAnimation) {
         prepareTransformTransitionFrom(el, elOption, transFromProps);

src/chart/custom/CustomSeries.ts

@@ -234,9 +234,24 @@ export interface CustomTextOption extends CustomDisplayableOption, TransitionOpt
     keyframeAnimation?: ElementKeyframeAnimationOption<TextProps> | ElementKeyframeAnimationOption<TextProps>[]
 }
 
+export interface CustomompoundPathOptionOnState extends CustomDisplayableOptionOnState {
+    style?: PathStyleProps;
+}
+export interface CustomCompoundPathOption extends CustomDisplayableOption, TransitionOptionMixin<PathProps> {
+    type: 'compoundPath';
+    shape?: PathProps['shape'];
+    style?: PathStyleProps & TransitionOptionMixin<PathStyleProps>;
+    emphasis?: CustomompoundPathOptionOnState;
+    blur?: CustomompoundPathOptionOnState;
+    select?: CustomompoundPathOptionOnState;
+
+    keyframeAnimation?: ElementKeyframeAnimationOption<PathProps> | ElementKeyframeAnimationOption<PathProps>[]
+}
+
 export type CustomElementOption = CustomPathOption
     | CustomImageOption
     | CustomTextOption
+    | CustomCompoundPathOption
     | CustomGroupOption;
 
 // Can only set focus, blur on the root element.

src/chart/custom/CustomView.ts

@@ -18,7 +18,8 @@
 */
 
 import {
-    hasOwn, assert, isString, retrieve2, retrieve3, defaults, each, indexOf
+    hasOwn, assert, isString, retrieve2, retrieve3, defaults, each, indexOf,
+    map
 } from 'zrender/src/core/util';
 import * as graphicUtil from '../../util/graphic';
 import { setDefaultStateProxy, toggleHoverEmphasis } from '../../util/states';
@@ -56,7 +57,7 @@ import ExtensionAPI from '../../core/ExtensionAPI';
 import Displayable from 'zrender/src/graphic/Displayable';
 import Axis2D from '../../coord/cartesian/Axis2D';
 import { RectLike } from 'zrender/src/core/BoundingRect';
-import { PathStyleProps } from 'zrender/src/graphic/Path';
+import Path, { PathStyleProps } from 'zrender/src/graphic/Path';
 import { TextStyleProps } from 'zrender/src/graphic/Text';
 import {
     convertToEC4StyleForCustomSerise,
@@ -87,7 +88,8 @@ import CustomSeriesModel, {
     PrepareCustomInfo,
     CustomPathOption,
     CustomRootElementOption,
-    CustomSeriesOption
+    CustomSeriesOption,
+    CustomCompoundPathOption
 } from './CustomSeries';
 import { PatternObject } from 'zrender/src/graphic/Pattern';
 import {
@@ -352,7 +354,36 @@ function createEl(elOption: CustomElementOption): Element {
         el = new graphicUtil.Group();
     }
     else if (graphicType === 'compoundPath') {
-        throw new Error('"compoundPath" is not supported yet.');
+        const shape = (elOption as CustomCompoundPathOption).shape;
+        if (!shape || !shape.paths) {
+            let errMsg = '';
+            if (__DEV__) {
+                errMsg = 'shape.paths must be specified in compoundPath';
+            }
+            throwError(errMsg);
+        }
+        const paths = map(shape.paths as Path[], function (path) {
+            if (path.type === 'path') {
+                return graphicUtil.makePath(path.shape.pathData, path, null);
+            }
+            const Clz = graphicUtil.getShapeClass(path.type);
+            if (!Clz) {
+                if (typeof path.buildPath === 'function') {
+                    return path;
+                }
+                let errMsg = '';
+                if (__DEV__) {
+                    errMsg = 'graphic type "' + graphicType + '" can not be found.';
+                }
+                throwError(errMsg);
+            }
+            return new Clz();
+        });
+        el = new graphicUtil.CompoundPath({
+            shape: {
+                paths
+            }
+        });
     }
     else {
         const Clz = graphicUtil.getShapeClass(graphicType);
@@ -1148,7 +1179,7 @@ function doCreateOrUpdateAttachedTx(
     attachedTxInfo: AttachedTxInfo
 ): void {
     // Group does not support textContent temporarily until necessary.
-    if (el.isGroup) {
+    if (el.isGroup || el.type === 'compoundPath') {
         return;
     }