From 771436131528e8181a4c867fcff8b1afcb39fbec Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 8 Oct 2024 18:10:42 +0800 Subject: [PATCH 1/5] feat(custom): support compoundPath in custom series --- src/chart/custom/CustomSeries.ts | 15 ++++++++++++++ src/chart/custom/CustomView.ts | 34 ++++++++++++++++++++++++++++---- 2 files changed, 45 insertions(+), 4 deletions(-) diff --git a/src/chart/custom/CustomSeries.ts b/src/chart/custom/CustomSeries.ts index 4c3a9433fb..9f11260563 100644 --- a/src/chart/custom/CustomSeries.ts +++ b/src/chart/custom/CustomSeries.ts @@ -234,9 +234,24 @@ export interface CustomTextOption extends CustomDisplayableOption, TransitionOpt keyframeAnimation?: ElementKeyframeAnimationOption | ElementKeyframeAnimationOption[] } +export interface CustomompoundPathOptionOnState extends CustomDisplayableOptionOnState { + style?: PathStyleProps; +} +export interface CustomCompoundPathOption extends CustomDisplayableOption, TransitionOptionMixin { + type: 'compoundPath'; + shape?: PathProps['shape']; + style?: PathStyleProps & TransitionOptionMixin; + emphasis?: CustomompoundPathOptionOnState; + blur?: CustomompoundPathOptionOnState; + select?: CustomompoundPathOptionOnState; + + keyframeAnimation?: ElementKeyframeAnimationOption | ElementKeyframeAnimationOption[] +} + export type CustomElementOption = CustomPathOption | CustomImageOption | CustomTextOption + | CustomCompoundPathOption | CustomGroupOption; // Can only set focus, blur on the root element. diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts index afb047da3e..2f02ddb328 100644 --- a/src/chart/custom/CustomView.ts +++ b/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'; @@ -54,6 +55,7 @@ import SeriesData, { DefaultDataVisual } from '../../data/SeriesData'; import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../core/ExtensionAPI'; import Displayable from 'zrender/src/graphic/Displayable'; +import Path from 'zrender/src/graphic/Path'; import Axis2D from '../../coord/cartesian/Axis2D'; import { RectLike } from 'zrender/src/core/BoundingRect'; import { PathStyleProps } from 'zrender/src/graphic/Path'; @@ -87,7 +89,8 @@ import CustomSeriesModel, { PrepareCustomInfo, CustomPathOption, CustomRootElementOption, - CustomSeriesOption + CustomSeriesOption, + CustomCompoundPathOption } from './CustomSeries'; import { PatternObject } from 'zrender/src/graphic/Pattern'; import { @@ -352,7 +355,30 @@ 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) { + const Clz = graphicUtil.getShapeClass(path.type); + if (!Clz) { + 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 +1174,7 @@ function doCreateOrUpdateAttachedTx( attachedTxInfo: AttachedTxInfo ): void { // Group does not support textContent temporarily until necessary. - if (el.isGroup) { + if (el.isGroup || el.type === 'compoundPath') { return; } From d2c05a7656828a28d96e0e6ee28c94c9af0221ca Mon Sep 17 00:00:00 2001 From: Ovilia Date: Wed, 9 Oct 2024 17:37:17 +0800 Subject: [PATCH 2/5] feat(custom): support compoundPath in custom series --- src/animation/customGraphicTransition.ts | 21 +++++++++++++++++++-- src/chart/custom/CustomView.ts | 6 ++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/animation/customGraphicTransition.ts b/src/animation/customGraphicTransition.ts index a2bf490c51..d1a1946097 100644 --- a/src/animation/customGraphicTransition.ts +++ b/src/animation/customGraphicTransition.ts @@ -149,8 +149,25 @@ 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]); + prepareShapeOrExtraAllPropsFinal('extra', path, paths[i]); + } + } + else { + prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet); + prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet); + } if (!isInit && hasAnimation) { prepareTransformTransitionFrom(el, elOption, transFromProps); diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts index 2f02ddb328..792b153510 100644 --- a/src/chart/custom/CustomView.ts +++ b/src/chart/custom/CustomView.ts @@ -364,8 +364,14 @@ function createEl(elOption: CustomElementOption): Element { throwError(errMsg); } const paths = map(shape.paths as Path[], function (path) { + if (path.type === 'path') { + return createEl(path as unknown as CustomPathOption); + } 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.'; From 58d2a9c0ee3bf2caa3231e86ca01baf23dd8152a Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 10 Oct 2024 16:01:40 +0800 Subject: [PATCH 3/5] feat(custom): support compoundPath in custom series relies on the change of ecomfe/zrender#1096 --- src/chart/custom/CustomView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts index 792b153510..ad33d76202 100644 --- a/src/chart/custom/CustomView.ts +++ b/src/chart/custom/CustomView.ts @@ -365,7 +365,7 @@ function createEl(elOption: CustomElementOption): Element { } const paths = map(shape.paths as Path[], function (path) { if (path.type === 'path') { - return createEl(path as unknown as CustomPathOption); + return graphicUtil.makePath(path.shape.pathData, path, null); } const Clz = graphicUtil.getShapeClass(path.type); if (!Clz) { From 6f1f77938d2e80965260c24a5222592e08af621b Mon Sep 17 00:00:00 2001 From: Ovilia Date: Fri, 11 Oct 2024 10:24:56 +0800 Subject: [PATCH 4/5] fix(custom): fix duplicated import --- src/chart/custom/CustomView.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts index ad33d76202..c0950845b4 100644 --- a/src/chart/custom/CustomView.ts +++ b/src/chart/custom/CustomView.ts @@ -55,10 +55,9 @@ import SeriesData, { DefaultDataVisual } from '../../data/SeriesData'; import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../core/ExtensionAPI'; import Displayable from 'zrender/src/graphic/Displayable'; -import Path from 'zrender/src/graphic/Path'; 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, From 9fb4073ef93ad20438ec5047bbbc6e7284856302 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Fri, 11 Oct 2024 11:19:01 +0800 Subject: [PATCH 5/5] fix(custom): remove extra --- src/animation/customGraphicTransition.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/animation/customGraphicTransition.ts b/src/animation/customGraphicTransition.ts index d1a1946097..881f8e57d2 100644 --- a/src/animation/customGraphicTransition.ts +++ b/src/animation/customGraphicTransition.ts @@ -161,7 +161,6 @@ export function applyUpdateTransition( for (let i = 0; i < optionPaths.length; i++) { const path = optionPaths[i]; prepareShapeOrExtraAllPropsFinal('shape', path, paths[i]); - prepareShapeOrExtraAllPropsFinal('extra', path, paths[i]); } } else {