fix: (1) Fix geo roam (pan and zoom) causes visual artifacts -- geo coord sys and its content (e.g., scatter) should visually align during roaming animation and manual roam. (2) Refactor to uniform roaming impl (via RoamController and ViewCoordSys) and clarify updateTransform and related code. (3) Enable scatter and effectScatter clip in geo. (4) Fix aria: palette is modified to ec instance local rather than global, which is more reasonable. (5) Fix map series roaming bug: roam and then click legend hide the first series and then roam and then click legend to restore the first series, the map should not jump.

Author: 100pah

src/animation/basicTransition.ts

@@ -216,7 +216,7 @@ function animateOrSetProps<Props>(
  *         position: [100, 100]
  *     }, seriesModel, function () { console.log('Animation done!'); });
  */
- function updateProps<Props extends ElementProps>(
+function updateProps<Props extends ElementProps>(
     el: Element<Props>,
     props: Props,
     // TODO: TYPE AnimatableModel

src/chart/effectScatter/EffectScatterSeries.ts

@@ -38,8 +38,8 @@ import {
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
-import type { SymbolDrawItemModelOption } from '../helper/SymbolDraw';
 import { BrushCommonSelectorsForSeries } from '../../component/brush/selector';
+import { SymbolDrawItemModelOption } from '../helper/baseDraw';
 
 type ScatterDataValue = OptionDataValue | OptionDataValue[];
 

src/chart/effectScatter/EffectScatterView.ts

@@ -27,6 +27,8 @@ import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import EffectScatterSeriesModel from './EffectScatterSeries';
 import { StageHandlerProgressExecutor } from '../../util/types';
+import { createCoordSysClipAreaSimply } from '../helper/createClipPathFromCoordSys';
+import { SymbolDrawUpdateOpt } from '../helper/baseDraw';
 
 class EffectScatterView extends ChartView {
     static readonly type = 'effectScatter';
@@ -41,16 +43,10 @@ class EffectScatterView extends ChartView {
     render(seriesModel: EffectScatterSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         const data = seriesModel.getData();
         const effectSymbolDraw = this._symbolDraw;
-        effectSymbolDraw.updateData(data, {clipShape: this._getClipShape(seriesModel)});
+        effectSymbolDraw.updateData(data, createSymbolDrawOpt(seriesModel));
         this.group.add(effectSymbolDraw.group);
     }
 
-    _getClipShape(seriesModel: EffectScatterSeriesModel) {
-        const coordSys = seriesModel.coordinateSystem;
-        const clipArea = coordSys && coordSys.getArea && coordSys.getArea();
-        return seriesModel.get('clip', true) ? clipArea : null;
-    }
-
     updateTransform(seriesModel: EffectScatterSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         const data = seriesModel.getData();
 
@@ -65,7 +61,7 @@ class EffectScatterView extends ChartView {
             }, data);
         }
 
-        this._symbolDraw.updateLayout();
+        this._symbolDraw.updateLayout(createSymbolDrawOpt(seriesModel));
     }
 
     _updateGroupTransform(seriesModel: EffectScatterSeriesModel) {
@@ -79,6 +75,12 @@ class EffectScatterView extends ChartView {
     remove(ecModel: GlobalModel, api: ExtensionAPI) {
         this._symbolDraw && this._symbolDraw.remove(true);
     }
+}
 
+function createSymbolDrawOpt(seriesModel: EffectScatterSeriesModel): SymbolDrawUpdateOpt {
+    return {
+        clipShape: createCoordSysClipAreaSimply(seriesModel)
+    };
 }
+
 export default EffectScatterView;

src/chart/graph/GraphSeries.ts

@@ -45,7 +45,8 @@ import {
     OptionDataValueNumeric,
     CallbackDataParams,
     DefaultEmphasisFocus,
-    PreserveAspectMixin
+    PreserveAspectMixin,
+    RoamHostModel
 } from '../../util/types';
 import SeriesModel from '../../model/Series';
 import Graph from '../../data/Graph';
@@ -57,6 +58,7 @@ import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 import { defaultSeriesFormatTooltip } from '../../component/tooltip/seriesFormatTooltip';
 import {initCurvenessList, createEdgeMapForCurveness} from '../helper/multipleGraphEdgeHelper';
 import tokens from '../../visual/tokens';
+import { isViewCoordSys } from '../../coord/View';
 
 
 type GraphDataValue = OptionDataValue | OptionDataValue[];
@@ -170,11 +172,6 @@ export interface GraphSeriesOption
      */
     focusNodeAdjacency?: boolean
 
-    /**
-     * Symbol size scale ratio in roam
-     */
-    nodeScaleRatio?: number,
-
     draggable?: boolean
 
     edgeSymbol?: string | string[]
@@ -237,7 +234,7 @@ export interface GraphSeriesOption
 
 export const SERIES_TYPE_GRAPH = 'graph';
 
-class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
+class GraphSeriesModel extends SeriesModel<GraphSeriesOption> implements RoamHostModel {
     static readonly type = 'series.' + SERIES_TYPE_GRAPH;
     readonly type = GraphSeriesModel.type;
 
@@ -403,20 +400,19 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
         });
     }
 
-    setZoom(zoom: number) {
-        this.option.zoom = zoom;
-    }
-
-    setCenter(center: number[]) {
-        this.option.center = center;
-    }
-
     isAnimationEnabled() {
         return super.isAnimationEnabled()
             // Not enable animation when do force layout
             && !(this.get('layout') === 'force' && this.get(['force', 'layoutAnimation']));
     }
 
+    __ownRoamView() {
+        // Be an exclusive coord sys of graph series iff it is a `View` coord sys.
+        // Otherwise graph series is based on an external geo or Cartesian.
+        const coordSys = this.coordinateSystem;
+        return isViewCoordSys(coordSys) && coordSys;
+    }
+
     static defaultOption: GraphSeriesOption = {
         // zlevel: 0,
         z: 2,