From 8aed000c688c37ffd089e165bdc1dac0168e28d3 Mon Sep 17 00:00:00 2001 From: wb-xcf804241 Date: Thu, 14 Mar 2024 16:14:27 +0800 Subject: [PATCH] feat(interaction): add elementpointmove interaction --- .../static/flare-element-point-move-pie.ts | 2 +- .../data/demo/line-element-point-move.ts | 28 ++++--- .../data/demo/pie-element-point-move.ts | 8 +- src/interaction/elementPointMove.ts | 78 +++++++------------ 4 files changed, 48 insertions(+), 68 deletions(-) diff --git a/__tests__/plots/static/flare-element-point-move-pie.ts b/__tests__/plots/static/flare-element-point-move-pie.ts index 8a032c9436..8d4ec24bef 100644 --- a/__tests__/plots/static/flare-element-point-move-pie.ts +++ b/__tests__/plots/static/flare-element-point-move-pie.ts @@ -27,7 +27,7 @@ export function flareElementPointMovePie(): G2Spec { legendFilter: false, elementPointMove: { selection: [2], - lineDashPathStyle: { lineDash: [2, 4], stroke: '#fff', lineWidth: 2 }, + style: { pathLineDash: [2, 4], pathStroke: '#fff', pathLineWidth: 2 }, }, }, }; diff --git a/site/examples/interaction/data/demo/line-element-point-move.ts b/site/examples/interaction/data/demo/line-element-point-move.ts index fa4dd13a04..1d87665f96 100644 --- a/site/examples/interaction/data/demo/line-element-point-move.ts +++ b/site/examples/interaction/data/demo/line-element-point-move.ts @@ -30,18 +30,14 @@ chart .interaction({ legendFilter: false, elementPointMove: { - pointStyle: { - r: 8, - strokeWidth: 2, - activeStroke: '#fff', - }, - lineDashPathStyle: { - lineDash: [2, 4], - stroke: 'red', - }, - labelStyle: { - fontSize: 14, - y: 24, + style: { + pointR: 8, + pointStrokeWidth: 2, + pointActiveStroke: '#fff', + pathLineDash: [2, 4], + pathStroke: 'red', + labelFontSize: 14, + labelY: 24, }, }, }) @@ -51,14 +47,14 @@ chart .encode('color', 'type'); chart.render().then(() => { - chart.on('element:select', (v) => { + chart.on('element-point:select', (v) => { const { data: { selection }, } = v; console.log(selection, 'selection'); }); - chart.on('point:moveend', (v) => { + chart.on('element-point:moved', (v) => { const { data: { changeData, data }, } = v; @@ -68,9 +64,11 @@ chart.render().then(() => { }); chart.on('afterrender', () => { - chart.emit('element:select', { + chart.emit('element-point:select', { data: { selection: [1, 2], }, }); + // Clear select. + // chart.emit('element-point:unselect'); }); diff --git a/site/examples/interaction/data/demo/pie-element-point-move.ts b/site/examples/interaction/data/demo/pie-element-point-move.ts index 22b512d0d0..8b12e8eacd 100644 --- a/site/examples/interaction/data/demo/pie-element-point-move.ts +++ b/site/examples/interaction/data/demo/pie-element-point-move.ts @@ -22,10 +22,10 @@ chart .interaction({ legendFilter: false, elementPointMove: { - lineDashPathStyle: { - lineDash: [2, 4], - stroke: '#fff', - lineWidth: 2, + style: { + pathLineDash: [2, 4], + pathStroke: '#fff', + pathLineWidth: 2, }, }, }) diff --git a/src/interaction/elementPointMove.ts b/src/interaction/elementPointMove.ts index d44b6756c2..e8807a5328 100644 --- a/src/interaction/elementPointMove.ts +++ b/src/interaction/elementPointMove.ts @@ -1,7 +1,8 @@ import { Text, Group, Circle, Path } from '@antv/g'; -import { deepMix, isUndefined, find, get, isNumber } from '@antv/util'; - +import { deepMix, isUndefined, find, get } from '@antv/util'; import type { CircleStyleProps, TextStyleProps, PathStyleProps } from '@antv/g'; +import { subObject } from '../utils/helper'; + import { selectPlotArea, getPointsR, @@ -20,24 +21,18 @@ export type ElementPointMoveOptions = { }; const DEFAULT_STYLE = { - pointStyle: { - r: 6, - strokeWidth: 1, - stroke: '#888', - activeStroke: '#f5f5f5', - } as CircleStyleProps, - lineDashPathStyle: { - stroke: '#888', - lineDash: [3, 4], - }, - labelStyle: { - fontSize: 12, - fill: '#888', - stroke: '#fff', - lineWidth: 1, - y: -6, - x: 2, - } as TextStyleProps, + pointR: 6, + pointStrokeWidth: 1, + pointStroke: '#888', + pointActiveStroke: '#f5f5f5', + pathStroke: '#888', + pathLineDash: [3, 4], + labelFontSize: 12, + labelFill: '#888', + labelStroke: '#fff', + labelLineWidth: 1, + labelY: -6, + labelX: 2, }; // point shape name. @@ -192,29 +187,17 @@ const getSamePointPosition = (center, point, target) => { export function ElementPointMove( elementPointMoveOptions: ElementPointMoveOptions = {}, ) { - const { - selection = [], - pointStyle = {}, - lineDashPathStyle = {}, - labelStyle = {}, - precision = 2, - } = elementPointMoveOptions; - - // Shape default style. - const pathDefaultStyle = { - ...DEFAULT_STYLE.lineDashPathStyle, - ...lineDashPathStyle, - }; + const { selection = [], style = {}, precision = 2 } = elementPointMoveOptions; - const labelDefaultStyle = { - ...DEFAULT_STYLE.labelStyle, - ...labelStyle, - }; + const defaultStyle = { ...DEFAULT_STYLE, ...style }; - const pointDefaultStyle = { - ...DEFAULT_STYLE.pointStyle, - ...pointStyle, - }; + // Shape default style. + const pathDefaultStyle = subObject(defaultStyle, 'path') as PathStyleProps; + const labelDefaultStyle = subObject(defaultStyle, 'label') as TextStyleProps; + const pointDefaultStyle = subObject( + defaultStyle, + 'point', + ) as CircleStyleProps; return (context, _, emitter) => { const { @@ -249,7 +232,7 @@ export function ElementPointMove( plotArea.appendChild(pointsGroup); const selectedChange = () => { - emitter.emit('element:select', { + emitter.emit('element-point:select', { nativeEvent: true, data: { selection: newSelection, @@ -258,7 +241,7 @@ export function ElementPointMove( }; const dataChange = (changeData, data) => { - emitter.emit('point:moveend', { + emitter.emit('element-point:moved', { nativeEvent: true, data: { changeData, @@ -567,7 +550,6 @@ export function ElementPointMove( const lastPercent = coordinate.invert([newXOut, newYOut])[1]; const nextPercent = coordinate.invert(points[3])[1]; const percent = nextPercent - lastPercent; - if (percent < 0) return; const newPath = getThetaPath( center, @@ -659,15 +641,15 @@ export function ElementPointMove( } }; - emitter.on('element:select', elementSelect); - emitter.on('element:unselect', rootClick); + emitter.on('element-point:select', elementSelect); + emitter.on('element-point:unselect', rootClick); container.addEventListener('mousedown', rootClick); // Remove EventListener. return () => { pointsGroup.remove(); - emitter.off('element:select', elementSelect); - emitter.off('element:unselect', rootClick); + emitter.off('element-point:select', elementSelect); + emitter.off('element-point:unselect', rootClick); container.removeEventListener('mousedown', rootClick); elements.forEach((element) => { element.removeEventListener('click', elementClick);