Merge pull request #17538 from apache/master-tmp

Master next to master for v5.4

package.json

@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "5.3.2"
+    "zrender": "npm:zrender-nightly@^5.3.3-dev.20220820"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",

src/chart/bar/BarView.ts

@@ -1146,6 +1146,7 @@ function createLarge(
     const el = new LargePath({
         shape: {points: data.getLayout('largePoints')},
         incremental: !!incremental,
+        ignoreCoarsePointer: true,
         z2: 1
     });
     el.baseDimIdx = baseDimIdx;

src/chart/candlestick/CandlestickView.ts

@@ -358,12 +358,14 @@ function createLarge(
 
     const elP = new LargeBoxPath({
         shape: {points: largePoints},
-        __sign: 1
+        __sign: 1,
+        ignoreCoarsePointer: true
     });
     group.add(elP);
     const elN = new LargeBoxPath({
         shape: {points: largePoints},
-        __sign: -1
+        __sign: -1,
+        ignoreCoarsePointer: true
     });
     group.add(elN);
 
@@ -397,4 +399,3 @@ function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickS
 
 
 export default CandlestickView;
-

src/chart/graph/GraphView.ts

@@ -37,6 +37,9 @@ import SeriesData from '../../data/SeriesData';
 import Line from '../helper/Line';
 import { getECData } from '../../util/innerStore';
 
+import { simpleLayoutEdge } from './simpleLayoutHelper';
+import { circularLayout, rotateNodeLabel } from './circularLayoutHelper';
+
 function isViewCoordSys(coordSys: CoordinateSystem): coordSys is View {
     return coordSys.type === 'view';
 }
@@ -122,6 +125,8 @@ class GraphView extends ChartView {
             this._startForceLayoutIteration(forceLayout, layoutAnimation);
         }
 
+        const layout = seriesModel.get('layout');
+
         data.graph.eachNode((node) => {
             const idx = node.dataIndex;
             const el = node.getGraphicEl() as Symbol;
@@ -135,14 +140,31 @@ class GraphView extends ChartView {
             el.off('drag').off('dragend');
             const draggable = itemModel.get('draggable');
             if (draggable) {
-                el.on('drag', () => {
-                    if (forceLayout) {
-                        forceLayout.warmUp();
-                        !this._layouting
-                            && this._startForceLayoutIteration(forceLayout, layoutAnimation);
-                        forceLayout.setFixed(idx);
-                        // Write position back to layout
-                        data.setItemLayout(idx, [el.x, el.y]);
+                el.on('drag', (e) => {
+                    switch (layout) {
+                        case 'force':
+                            forceLayout.warmUp();
+                            !this._layouting
+                                && this._startForceLayoutIteration(forceLayout, layoutAnimation);
+                            forceLayout.setFixed(idx);
+                            // Write position back to layout
+                            data.setItemLayout(idx, [el.x, el.y]);
+                            break;
+                        case 'circular':
+                            data.setItemLayout(idx, [el.x, el.y]);
+                            // mark node fixed
+                            node.setLayout({ fixed: true }, true);
+                            // recalculate circular layout
+                            circularLayout(seriesModel, 'symbolSize', node, [e.offsetX, e.offsetY]);
+                            this.updateLayout(seriesModel);
+                            break;
+                        case 'none':
+                        default:
+                            data.setItemLayout(idx, [el.x, el.y]);
+                            // update edge
+                            simpleLayoutEdge(seriesModel.getGraph(), seriesModel);
+                            this.updateLayout(seriesModel);
+                            break;
                     }
                 }).on('dragend', () => {
                     if (forceLayout) {
@@ -179,37 +201,8 @@ class GraphView extends ChartView {
             && seriesModel.get(['circular', 'rotateLabel']);
         const cx = data.getLayout('cx');
         const cy = data.getLayout('cy');
-        data.eachItemGraphicEl(function (el: Symbol, idx) {
-            const itemModel = data.getItemModel<GraphNodeItemOption>(idx);
-            let labelRotate = itemModel.get(['label', 'rotate']) || 0;
-            const symbolPath = el.getSymbolPath();
-            if (circularRotateLabel) {
-                const pos = data.getItemLayout(idx);
-                let rad = Math.atan2(pos[1] - cy, pos[0] - cx);
-                if (rad < 0) {
-                    rad = Math.PI * 2 + rad;
-                }
-                const isLeft = pos[0] < cx;
-                if (isLeft) {
-                    rad = rad - Math.PI;
-                }
-                const textPosition = isLeft ? 'left' as const : 'right' as const;
-
-                symbolPath.setTextConfig({
-                    rotation: -rad,
-                    position: textPosition,
-                    origin: 'center'
-                });
-                const emphasisState = symbolPath.ensureState('emphasis');
-                zrUtil.extend(emphasisState.textConfig || (emphasisState.textConfig = {}), {
-                    position: textPosition
-                });
-            }
-            else {
-                symbolPath.setTextConfig({
-                    rotation: labelRotate *= Math.PI / 180
-                });
-            }
+        data.graph.eachNode((node) => {
+            rotateNodeLabel(node, circularRotateLabel, cx, cy);
         });
 
         this._firstRender = false;

src/chart/graph/circularLayoutHelper.ts

@@ -20,8 +20,9 @@
 
 import * as vec2 from 'zrender/src/core/vector';
 import {getSymbolSize, getNodeGlobalScale} from './graphHelper';
-import GraphSeriesModel, { GraphEdgeItemOption } from './GraphSeries';
-import Graph from '../../data/Graph';
+import GraphSeriesModel, { GraphEdgeItemOption, GraphNodeItemOption } from './GraphSeries';
+import Graph, { GraphNode } from '../../data/Graph';
+import Symbol from '../helper/Symbol';
 import SeriesData from '../../data/SeriesData';
 import * as zrUtil from 'zrender/src/core/util';
 import {getCurvenessForEdge} from '../helper/multipleGraphEdgeHelper';
@@ -51,7 +52,9 @@ const _symbolRadiansHalf: number[] = [];
  */
 export function circularLayout(
     seriesModel: GraphSeriesModel,
-    basedOn: 'value' | 'symbolSize'
+    basedOn: 'value' | 'symbolSize',
+    draggingNode?: GraphNode,
+    pointer?: [number, number]
 ) {
     const coordSys = seriesModel.coordinateSystem;
     if (coordSys && coordSys.type !== 'view') {
@@ -77,6 +80,17 @@ export function circularLayout(
         return;
     }
 
+    if (draggingNode) {
+        const [tempX, tempY] = coordSys.pointToData(pointer) as [number, number];
+        const v = [tempX - cx, tempY - cy];
+        vec2.normalize(v, v);
+        vec2.scale(v, v, r);
+        draggingNode.setLayout([cx + v[0], cy + v[1]], true);
+
+        const circularRotateLabel = seriesModel.get(['circular', 'rotateLabel']);
+        rotateNodeLabel(draggingNode, circularRotateLabel, cx, cy);
+    }
+
     _layoutNodesBasedOn[basedOn](seriesModel, graph, nodeData, r, cx, cy, count);
 
     graph.eachEdge(function (edge, index) {
@@ -163,11 +177,58 @@ const _layoutNodesBasedOn: Record<'value' | 'symbolSize', LayoutNode> = {
             const radianHalf = halfRemainRadian + _symbolRadiansHalf[node.dataIndex];
 
             angle += radianHalf;
-            node.setLayout([
+            // init circular layout for
+            // 1. layout undefined node
+            // 2. not fixed node
+            (!node.getLayout() || !node.getLayout().fixed)
+            && node.setLayout([
                 r * Math.cos(angle) + cx,
                 r * Math.sin(angle) + cy
             ]);
             angle += radianHalf;
         });
     }
 };
+
+export function rotateNodeLabel(
+    node: GraphNode,
+    circularRotateLabel: boolean,
+    cx: number,
+    cy: number
+) {
+    const el = node.getGraphicEl() as Symbol;
+    // need to check if el exists. '-' value may not create node element.
+    if (!el) {
+        return;
+    }
+    const nodeModel = node.getModel<GraphNodeItemOption>();
+    let labelRotate = nodeModel.get(['label', 'rotate']) || 0;
+    const symbolPath = el.getSymbolPath();
+    if (circularRotateLabel) {
+        const pos = node.getLayout();
+        let rad = Math.atan2(pos[1] - cy, pos[0] - cx);
+        if (rad < 0) {
+            rad = Math.PI * 2 + rad;
+        }
+        const isLeft = pos[0] < cx;
+        if (isLeft) {
+            rad = rad - Math.PI;
+        }
+        const textPosition = isLeft ? 'left' as const : 'right' as const;
+
+        symbolPath.setTextConfig({
+            rotation: -rad,
+            position: textPosition,
+            origin: 'center'
+        });
+        const emphasisState = symbolPath.ensureState('emphasis');
+        zrUtil.extend(emphasisState.textConfig || (emphasisState.textConfig = {}), {
+            position: textPosition
+        });
+    }
+    else {
+        symbolPath.setTextConfig({
+            rotation: labelRotate *= Math.PI / 180
+        });
+    }
+}

src/chart/helper/EffectLine.ts

@@ -47,6 +47,8 @@ class EffectLine extends graphic.Group {
 
     private _loop: boolean;
 
+    private _roundTrip: boolean;
+
     private _symbolScale: number[];
 
     constructor(lineData: SeriesData, idx: number, seriesScope: LineDrawSeriesScope) {
@@ -121,6 +123,7 @@ class EffectLine extends graphic.Group {
 
         let period = effectModel.get('period') * 1000;
         const loop = effectModel.get('loop');
+        const roundTrip = effectModel.get('roundTrip');
         const constantSpeed = effectModel.get('constantSpeed');
         const delayExpr = zrUtil.retrieve(effectModel.get('delay'), function (idx) {
             return idx / lineData.count() * period / 3;
@@ -135,7 +138,7 @@ class EffectLine extends graphic.Group {
             period = this._getLineLength(symbol) / constantSpeed * 1000;
         }
 
-        if (period !== this._period || loop !== this._loop) {
+        if (period !== this._period || loop !== this._loop || roundTrip !== this._roundTrip) {
             symbol.stopAnimation();
             let delayNum: number;
             if (zrUtil.isFunction(delayExpr)) {
@@ -149,21 +152,23 @@ class EffectLine extends graphic.Group {
             }
 
             this._animateSymbol(
-                symbol, period, delayNum, loop
+                symbol, period, delayNum, loop, roundTrip
             );
         }
 
         this._period = period;
         this._loop = loop;
+        this._roundTrip = roundTrip;
     }
 
-    private _animateSymbol(symbol: ECSymbolOnEffectLine, period: number, delayNum: number, loop: boolean) {
+    private _animateSymbol(
+        symbol: ECSymbolOnEffectLine, period: number, delayNum: number, loop: boolean, roundTrip: boolean) {
         if (period > 0) {
             symbol.__t = 0;
             const self = this;
             const animator = symbol.animate('', loop)
-                .when(period, {
-                    __t: 1
+                .when(roundTrip ? period * 2 : period, {
+                    __t: roundTrip ? 2 : 1
                 })
                 .delay(delayNum)
                 .during(function () {
@@ -202,7 +207,7 @@ class EffectLine extends graphic.Group {
         const p1 = symbol.__p1;
         const p2 = symbol.__p2;
         const cp1 = symbol.__cp1;
-        const t = symbol.__t;
+        const t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
         const pos = [symbol.x, symbol.y];
         const lastPos = pos.slice();
         const quadraticAt = curveUtil.quadraticAt;
@@ -211,8 +216,11 @@ class EffectLine extends graphic.Group {
         pos[1] = quadraticAt(p1[1], cp1[1], p2[1], t);
 
         // Tangent
-        const tx = quadraticDerivativeAt(p1[0], cp1[0], p2[0], t);
-        const ty = quadraticDerivativeAt(p1[1], cp1[1], p2[1], t);
+        const tx = symbol.__t < 1 ? quadraticDerivativeAt(p1[0], cp1[0], p2[0], t)
+                 : quadraticDerivativeAt(p2[0], cp1[0], p1[0], 1 - t);
+         const ty = symbol.__t < 1 ? quadraticDerivativeAt(p1[1], cp1[1], p2[1], t)
+                 : quadraticDerivativeAt(p2[1], cp1[1], p1[1], 1 - t);
+
 
         symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
         // enable continuity trail for 'line', 'rect', 'roundRect' symbolType
@@ -247,4 +255,4 @@ class EffectLine extends graphic.Group {
         this._updateEffectAnimation(lineData, effectModel, idx);
     }
 }
-export default EffectLine;
+export default EffectLine;

src/chart/helper/EffectPolyline.ts

@@ -67,7 +67,7 @@ class EffectPolyline extends EffectLine {
 
     // Override
     protected _updateSymbolPosition(symbol: ECSymbolOnEffectLine) {
-        const t = symbol.__t;
+        const t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
         const points = this._points;
         const offsets = this._offsets;
         const len = points.length;
@@ -107,8 +107,8 @@ class EffectPolyline extends EffectLine {
         symbol.x = p0[0] * (1 - p) + p * p1[0];
         symbol.y = p0[1] * (1 - p) + p * p1[1];
 
-        const tx = p1[0] - p0[0];
-        const ty = p1[1] - p0[1];
+        const tx = symbol.__t < 1 ? p1[0] - p0[0] : p0[0] - p1[0];
+        const ty = symbol.__t < 1 ? p1[1] - p0[1] : p0[1] - p1[1];
         symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
 
         this._lastFrame = frame;
@@ -119,4 +119,4 @@ class EffectPolyline extends EffectLine {
 
 }
 
-export default EffectPolyline;
+export default EffectPolyline;

src/chart/helper/LargeLineDraw.ts

@@ -293,7 +293,8 @@ class LargeLineDraw {
 
     private _create() {
         const lineEl = new LargeLinesPath({
-            cursor: 'default'
+            cursor: 'default',
+            ignoreCoarsePointer: true
         });
         this._newAdded.push(lineEl);
         this.group.add(lineEl);