From a373c6c4658bcbee98d01ee43ee6789188b979b4 Mon Sep 17 00:00:00 2001 From: "linghao.su" Date: Sat, 1 Jul 2023 15:48:45 +0800 Subject: [PATCH] fix(sankey): fix other state color is 'target/source/gradient' --- src/chart/sankey/SankeyView.ts | 94 +++++++++++++----- test/runTest/actions/__meta__.json | 1 + .../actions/sankey-emphasis-lineStyle.json | 1 + test/sankey-emphasis-lineStyle.html | 98 +++++++++++++++++++ 4 files changed, 168 insertions(+), 26 deletions(-) create mode 100644 test/runTest/actions/sankey-emphasis-lineStyle.json create mode 100644 test/sankey-emphasis-lineStyle.html diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts index 260790ced3..368704403a 100644 --- a/src/chart/sankey/SankeyView.ts +++ b/src/chart/sankey/SankeyView.ts @@ -20,7 +20,7 @@ import * as graphic from '../../util/graphic'; import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis, setStatesStylesFromModel } from '../../util/states'; import { LayoutOrient, ECElement } from '../../util/types'; -import { PathProps } from 'zrender/src/graphic/Path'; +import { PathProps, PathStyleProps } from 'zrender/src/graphic/Path'; import SankeySeriesModel, { SankeyEdgeItemOption, SankeyNodeItemOption } from './SankeySeries'; import ChartView from '../../view/Chart'; import GlobalModel from '../../model/Global'; @@ -30,6 +30,7 @@ import { RectLike } from 'zrender/src/core/BoundingRect'; import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; import { getECData } from '../../util/innerStore'; import { isString, retrieve3 } from 'zrender/src/core/util'; +import { GraphEdge } from '../../data/Graph'; class SankeyPathShape { x1 = 0; @@ -195,30 +196,32 @@ class SankeyView extends ChartView { curve.useStyle(lineStyleModel.getItemStyle()); // Special color, use source node color or target node color - switch (curve.style.fill) { - case 'source': - curve.style.fill = edge.node1.getVisual('color'); - curve.style.decal = edge.node1.getVisual('style').decal; - break; - case 'target': - curve.style.fill = edge.node2.getVisual('color'); - curve.style.decal = edge.node2.getVisual('style').decal; - break; - case 'gradient': - const sourceColor = edge.node1.getVisual('color'); - const targetColor = edge.node2.getVisual('color'); - if (isString(sourceColor) && isString(targetColor)) { - curve.style.fill = new graphic.LinearGradient( - 0, 0, +(orient === 'horizontal'), +(orient === 'vertical'), [{ - color: sourceColor, - offset: 0 - }, { - color: targetColor, - offset: 1 - }] - ); - } - } + applyCurveStyle(curve.style, orient, edge); + // switch (curve.style.fill) { + // case 'source': + // curve.style.fill = edge.node1.getVisual('color'); + // curve.style.decal = edge.node1.getVisual('style').decal; + // break; + // case 'target': + // curve.style.fill = edge.node2.getVisual('color'); + // curve.style.decal = edge.node2.getVisual('style').decal; + // break; + // case 'gradient': + // const sourceColor = edge.node1.getVisual('color'); + // const targetColor = edge.node2.getVisual('color'); + // if (isString(sourceColor) && isString(targetColor)) { + // curve.style.fill = new graphic.LinearGradient( + // 0, 0, +(orient === 'horizontal'), +(orient === 'vertical'), [{ + // color: sourceColor, + // offset: 0 + // }, { + // color: targetColor, + // offset: 1 + // }] + // ); + // } + // } + const defaultEdgeLabelText = `${edgeModel.get('value')}`; const edgeLabelStateModels = getLabelStatesModels(edgeModel, 'edgeLabel'); @@ -250,7 +253,13 @@ class SankeyView extends ChartView { const emphasisModel = edgeModel.getModel('emphasis'); - setStatesStylesFromModel(curve, edgeModel, 'lineStyle', (model) => model.getItemStyle()); + setStatesStylesFromModel(curve, edgeModel, 'lineStyle', (model) => { + const style = model.getItemStyle(); + + applyCurveStyle(style, orient, edge); + + return style; + }); group.add(curve); @@ -362,6 +371,39 @@ class SankeyView extends ChartView { } } +/** + * Special color, use source node color or target node color + * @param curveProps curve's style to parse + * @param orient direction + * @param edge current curve data + */ +function applyCurveStyle(curveProps: PathStyleProps, orient: 'horizontal' | 'vertical', edge: GraphEdge) { + switch (curveProps.fill) { + case 'source': + curveProps.fill = edge.node1.getVisual('color'); + curveProps.decal = edge.node1.getVisual('style').decal; + break; + case 'target': + curveProps.fill = edge.node2.getVisual('color'); + curveProps.decal = edge.node2.getVisual('style').decal; + break; + case 'gradient': + const sourceColor = edge.node1.getVisual('color'); + const targetColor = edge.node2.getVisual('color'); + if (isString(sourceColor) && isString(targetColor)) { + curveProps.fill = new graphic.LinearGradient( + 0, 0, +(orient === 'horizontal'), +(orient === 'vertical'), [{ + color: sourceColor, + offset: 0 + }, { + color: targetColor, + offset: 1 + }] + ); + } + } +} + // Add animation to the view function createGridClipShape(rect: RectLike, seriesModel: SankeySeriesModel, cb: () => void) { const rectEl = new graphic.Rect({ diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index dee65260b6..7c9a89b242 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -167,6 +167,7 @@ "radar4": 1, "resize-animation": 1, "sankey-depth": 1, + "sankey-emphasis-lineStyle": 1, "sankey-jump": 1, "sankey-level": 1, "scatter-random-stream-fix-axis": 1, diff --git a/test/runTest/actions/sankey-emphasis-lineStyle.json b/test/runTest/actions/sankey-emphasis-lineStyle.json new file mode 100644 index 0000000000..a7e558419a --- /dev/null +++ b/test/runTest/actions/sankey-emphasis-lineStyle.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":233,"x":379,"y":18},{"type":"mousemove","time":433,"x":369,"y":46},{"type":"mousemove","time":637,"x":369,"y":48},{"type":"mousemove","time":699,"x":369,"y":48},{"type":"mousemove","time":900,"x":358,"y":216},{"type":"mousedown","time":1005,"x":358,"y":216},{"type":"mouseup","time":1169,"x":358,"y":216},{"time":1170,"delay":400,"type":"screenshot-auto"},{"type":"screenshot","time":2335},{"type":"mousemove","time":2682,"x":358,"y":215},{"type":"mousemove","time":2883,"x":363,"y":36},{"type":"mousemove","time":3088,"x":379,"y":9},{"type":"mousemove","time":3327,"x":379,"y":28},{"type":"screenshot","time":3527},{"type":"mousemove","time":3758,"x":379,"y":28},{"type":"mousemove","time":3962,"x":164,"y":10},{"type":"mousemove","time":4142,"x":118,"y":9},{"type":"mousedown","time":4325,"x":50,"y":26},{"type":"mousemove","time":4344,"x":50,"y":26},{"type":"mouseup","time":4437,"x":50,"y":26},{"time":4438,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4675,"x":50,"y":26},{"type":"mousemove","time":4875,"x":155,"y":72},{"type":"mousemove","time":5075,"x":189,"y":186},{"type":"mousemove","time":5302,"x":189,"y":186},{"type":"screenshot","time":5673},{"type":"mousemove","time":5716,"x":189,"y":186},{"type":"mousemove","time":5916,"x":222,"y":101},{"type":"mousemove","time":6119,"x":229,"y":65},{"type":"mousemove","time":6333,"x":229,"y":75},{"type":"mousemove","time":6533,"x":233,"y":53},{"type":"mousemove","time":6734,"x":224,"y":132},{"type":"mousedown","time":6871,"x":218,"y":152},{"type":"mousemove","time":6938,"x":218,"y":152},{"type":"mouseup","time":7063,"x":218,"y":152},{"time":7064,"delay":400,"type":"screenshot-auto"},{"type":"screenshot","time":7478},{"type":"mousemove","time":7598,"x":218,"y":151},{"type":"mousemove","time":7799,"x":233,"y":52},{"type":"mousemove","time":8000,"x":235,"y":46},{"type":"mousedown","time":8020,"x":236,"y":46},{"type":"mouseup","time":8129,"x":236,"y":46},{"time":8130,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8208,"x":236,"y":46},{"type":"screenshot","time":8912},{"type":"mousemove","time":9200,"x":235,"y":46},{"type":"mousemove","time":9402,"x":105,"y":10},{"type":"mousemove","time":9609,"x":67,"y":26},{"type":"mousemove","time":9813,"x":62,"y":26},{"type":"mousemove","time":10017,"x":62,"y":25},{"type":"mousemove","time":10221,"x":61,"y":21},{"type":"mousemove","time":10427,"x":61,"y":21},{"type":"mousedown","time":10727,"x":61,"y":21},{"type":"mouseup","time":10846,"x":61,"y":21},{"time":10847,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11142,"x":62,"y":21},{"type":"mousemove","time":11346,"x":186,"y":146},{"type":"mousemove","time":11556,"x":204,"y":195},{"type":"screenshot","time":11994},{"type":"mousedown","time":12221,"x":204,"y":195},{"type":"mouseup","time":12363,"x":204,"y":195},{"time":12364,"delay":400,"type":"screenshot-auto"},{"type":"screenshot","time":12948},{"type":"mousemove","time":13357,"x":204,"y":194},{"type":"mousemove","time":13558,"x":217,"y":46},{"type":"mousemove","time":13766,"x":221,"y":40},{"type":"screenshot","time":14155},{"type":"mousemove","time":14275,"x":221,"y":40},{"type":"mousemove","time":14475,"x":67,"y":8},{"type":"mousemove","time":14682,"x":52,"y":13},{"type":"mousedown","time":14727,"x":52,"y":13},{"type":"mouseup","time":14871,"x":52,"y":13},{"time":14872,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14890,"x":52,"y":14},{"type":"mousemove","time":15141,"x":52,"y":14},{"type":"mousemove","time":15341,"x":193,"y":177},{"type":"mousedown","time":15530,"x":196,"y":184},{"type":"mousemove","time":15548,"x":196,"y":184},{"type":"mouseup","time":15737,"x":196,"y":184},{"time":15738,"delay":400,"type":"screenshot-auto"},{"type":"screenshot","time":16163},{"type":"mousemove","time":16375,"x":196,"y":184},{"type":"mousemove","time":16579,"x":217,"y":67},{"type":"mousemove","time":16788,"x":221,"y":58},{"type":"mousemove","time":16850,"x":221,"y":58},{"type":"mousemove","time":17050,"x":228,"y":30},{"type":"mousemove","time":17250,"x":228,"y":31},{"type":"screenshot","time":17465},{"type":"mousemove","time":17565,"x":227,"y":31},{"type":"mousemove","time":17766,"x":216,"y":37},{"type":"mousemove","time":17974,"x":429,"y":8}],"scrollY":0,"scrollX":0,"timestamp":1688197555313}] \ No newline at end of file diff --git a/test/sankey-emphasis-lineStyle.html b/test/sankey-emphasis-lineStyle.html new file mode 100644 index 0000000000..b69d646aaf --- /dev/null +++ b/test/sankey-emphasis-lineStyle.html @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + +
+
+ + + + \ No newline at end of file