feat(interaction): add elementpointmove interaction

antvis · Mar 14, 2024 · 8aed000 · 8aed000
1 parent 8c0d18a
commit 8aed000
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);