Fix interaction elementhoverscale (#7236)

* fix: 优化 elementHoverScale 交互效果

* docs: 更新文档

* fix: 修复优化后的交互方式在图例筛选后表现异常的问题

Author: interstellarmt

site/docs/manual/core/interaction/elementHoverScale.en.md

@@ -69,7 +69,6 @@ Or at the View level. Interactions declared on the view are passed to child mark
 | Property       | Description                     | Type      | Default Value               | Required |
 |----------------|---------------------------------|-----------|-----------------------------|----------|
 | scale          | Scale factor on hover           | `number`  | `1.04`                      |          |
-| scaleOrigin    | Origin point for scaling        | `string`  | `'center center'`           |          |
 | shadow         | Whether to show shadow          | `boolean` | `true`                      |          |
 | shadowColor    | Shadow color                    | `string`  | `'rgba(0, 0, 0, 0.4)'`      |          |
 | shadowBlur     | Shadow blur radius              | `number`  | `10`                        |          |
@@ -83,15 +82,7 @@ Or at the View level. Interactions declared on the view are passed to child mark
 
 #### scale
 
-Controls the scale factor when hovering. A value of `1.04` means the element scales to 104% of its original size.
-
-#### scaleOrigin
-
-Sets the origin point for scaling. Supported formats:
-
-- `'center center'` - scale from the center (default)
-- `'top left'` - scale from the top-left corner
-- `'50% 50%'` - specify using percentages
+Controls the scale factor when hovering. A value of `1.04` means the element scales to 104% of its original size. Scaling defaults to center origin.
 
 #### shadow
 
@@ -311,7 +302,6 @@ chart.options({
   interaction: {
     elementHoverScale: {
       scale: 1.15, // larger scale factor
-      scaleOrigin: 'center center',
       shadow: true,
       shadowColor: 'rgba(139, 0, 139, 0.6)', // custom shadow color
       shadowBlur: 20, // larger blur radius

site/docs/manual/core/interaction/elementHoverScale.zh.md

@@ -69,7 +69,6 @@ order: 11
 | 属性          | 描述                     | 类型       | 默认值                  | 必选 |
 | ------------- | ------------------------ | ---------- | ----------------------- | ---- |
 | scale         | 缩放比例                 | `number`   | `1.04`                  |      |
-| scaleOrigin   | 缩放中心点               | `string`   | `'center center'`       |      |
 | shadow        | 是否显示阴影             | `boolean`  | `true`                  |      |
 | shadowColor   | 阴影颜色                 | `string`   | `'rgba(0, 0, 0, 0.4)'`  |      |
 | shadowBlur    | 阴影模糊度               | `number`   | `10`                    |      |
@@ -83,15 +82,7 @@ order: 11
 
 #### scale
 
-控制元素悬浮时的放大倍数。值为 `1.04` 表示放大到原始大小的 104%。
-
-#### scaleOrigin
-
-设置缩放的中心点，支持以下格式：
-
-- `'center center'` - 从中心点缩放（默认）
-- `'top left'` - 从左上角缩放
-- `'50% 50%'` - 使用百分比指定
+控制元素悬浮时的放大倍数。值为 `1.04` 表示放大到原始大小的 104%。缩放默认以元素中心为基准点。
 
 #### shadow
 
@@ -312,7 +303,6 @@ chart.options({
   interaction: {
     elementHoverScale: {
       scale: 1.15, // 更大的缩放比例
-      scaleOrigin: 'center center',
       shadow: true,
       shadowColor: 'rgba(139, 0, 139, 0.6)', // 自定义阴影颜色
       shadowBlur: 20, // 更大的模糊半径

src/interaction/elementHoverScale.ts

@@ -1,6 +1,7 @@
 import { DisplayObject } from '@antv/g';
 import { deepMix } from '@antv/util';
 import { group } from '@antv/vendor/d3-array';
+import { isPolar } from '../utils/coordinate';
 import {
   createDatumof,
   createUseState,
@@ -21,7 +22,6 @@ export function elementHoverScale(
     datum,
     groupKey = (element) => element,
     scaleFactor = 1.04,
-    scaleOrigin = 'center center',
     shadow = true,
     shadowColor = 'rgba(0, 0, 0, 0.4)',
     shadowBlur = 10,
@@ -31,6 +31,7 @@ export function elementHoverScale(
     delay = 60,
     emitter,
     state = {},
+    coordinate,
   }: Record<string, any>,
 ) {
   // Helper function to get current valid elements
@@ -49,17 +50,19 @@ export function elementHoverScale(
   const { updateState, removeState, hasState } = useState(valueof);
 
   const originalStyles = new Map<DisplayObject, Record<string, any>>();
-  const hoveredElements = new Set<DisplayObject>();
 
   let out;
 
   const applyHoverEffect = (element: DisplayObject) => {
-    if (hoveredElements.has(element)) return;
+    if (originalStyles.has(element)) return;
 
-    // Capture current state before applying effect
     const currentTransform = element.style.transform || '';
     const currentTransformOrigin = element.style.transformOrigin || '';
+    // Normalize 'none' to empty string as 'none' is not a valid transform value for concatenation
+    const normalizedTransform =
+      currentTransform === 'none' ? '' : currentTransform;
 
+    // Save original styles for restoration
     originalStyles.set(element, {
       transform: currentTransform,
       transformOrigin: currentTransformOrigin,
@@ -70,26 +73,21 @@ export function elementHoverScale(
       shadowOffsetY: element.style.shadowOffsetY || 0,
     });
 
-    // Treat 'none' as empty string since it means no transform
-    const prefix =
-      currentTransform && currentTransform !== 'none' ? currentTransform : '';
-    const scaleTransform = `scale(${scaleFactor})`;
-
-    // Build new transform: append or replace scale in existing transform
-    let newTransform: string;
-    if (prefix && !prefix.includes('scale')) {
-      newTransform = `${prefix} ${scaleTransform}`.trimStart();
-    } else if (prefix && prefix.includes('scale')) {
-      newTransform = prefix
-        .replace(/scale\([^)]+\)/g, scaleTransform)
-        .trimStart();
-    } else {
-      newTransform = scaleTransform;
+    // For polar coordinates without transform, set transformOrigin to coordinate center
+    // When legend filtering occurs, element positioning changes from translate to absolute path coords
+    // Setting transformOrigin to center ensures consistent radial growth in both cases
+    if (coordinate && isPolar(coordinate) && !normalizedTransform) {
+      const center = coordinate.getCenter() as [number, number];
+      element.style.transformOrigin = `${center[0]}px ${center[1]}px`;
     }
 
-    // Apply styles
-    element.style.transformOrigin = scaleOrigin;
-    element.style.transform = newTransform;
+    // Apply scale transform
+    const scaleTransform = `scale(${scaleFactor})`;
+    element.style.transform = normalizedTransform
+      ? `${normalizedTransform} ${scaleTransform}`
+      : scaleTransform;
+
+    // Apply visual effects
     element.style.zIndex = zIndex;
 
     if (shadow) {
@@ -98,8 +96,6 @@ export function elementHoverScale(
       element.style.shadowOffsetX = shadowOffsetX;
       element.style.shadowOffsetY = shadowOffsetY;
     }
-
-    hoveredElements.add(element);
   };
 
   const removeHoverEffect = (element: DisplayObject) => {
@@ -115,7 +111,6 @@ export function elementHoverScale(
     element.style.shadowOffsetX = original.shadowOffsetX;
     element.style.shadowOffsetY = original.shadowOffsetY;
 
-    hoveredElements.delete(element);
     originalStyles.delete(element);
   };
 
@@ -131,25 +126,25 @@ export function elementHoverScale(
     if (out) clearTimeout(out);
 
     const currentKeyGroup = group(validElements, groupKey);
-    const k = groupKey(element);
-    const currentGroup = currentKeyGroup.get(k);
+    const currentKey = groupKey(element);
+    const currentGroup = currentKeyGroup.get(currentKey);
 
     if (!currentGroup) return;
 
     const groupSet = new Set(currentGroup);
 
     // Remove hover effects from elements not in current group
-    for (const e of validElements) {
-      if (!groupSet.has(e)) {
-        removeState(e, 'active');
-        removeHoverEffect(e);
+    for (const element of validElements) {
+      if (!groupSet.has(element)) {
+        removeState(element, 'active');
+        removeHoverEffect(element);
       }
     }
 
     // Apply hover effects to current group
-    for (const e of currentGroup) {
-      if (!hasState(e, 'active')) updateState(e, 'active');
-      applyHoverEffect(e as DisplayObject);
+    for (const element of currentGroup) {
+      if (!hasState(element, 'active')) updateState(element, 'active');
+      applyHoverEffect(element as DisplayObject);
     }
 
     // Emit events
@@ -175,21 +170,18 @@ export function elementHoverScale(
     const validElements = getCurrentElements();
 
     // Remove hover effects and states from all valid elements
-    for (const e of validElements) {
-      removeState(e, 'active');
-      removeHoverEffect(e);
+    for (const element of validElements) {
+      removeState(element, 'active');
+      removeHoverEffect(element);
     }
 
-    hoveredElements.clear();
-
     if (nativeEvent) {
       emitter.emit('element:unhoverscale', { nativeEvent });
     }
   };
 
-  const pointerout = (event) => {
-    if (delay > 0) delayReset();
-    else reset();
+  const pointerout = () => {
+    delay > 0 ? delayReset() : reset();
   };
 
   const pointerleave = () => {
@@ -232,19 +224,17 @@ export function elementHoverScale(
 
     // Clean up all hover effects from current elements
     const validElements = getCurrentElements();
-    for (const e of validElements) {
-      removeHoverEffect(e);
+    for (const element of validElements) {
+      removeHoverEffect(element);
     }
     originalStyles.clear();
-    hoveredElements.clear();
   };
 }
 
 export function ElementHoverScale({
   delay,
   createGroup,
   scale: scaleFactorParam,
-  scaleOrigin,
   shadow,
   shadowColor,
   shadowBlur,
@@ -257,6 +247,7 @@ export function ElementHoverScale({
     const { container, view, options } = context;
     const plotArea = selectPlotArea(container);
     const datumof = createDatumof(view);
+    const { coordinate } = view;
 
     return elementHoverScale(plotArea, {
       elements: selectG2Elements,
@@ -266,7 +257,6 @@ export function ElementHoverScale({
         : undefined,
       state: mergeState(options, ['active']),
       scaleFactor: scaleFactorParam,
-      scaleOrigin,
       shadow,
       shadowColor,
       shadowBlur,
@@ -275,6 +265,7 @@ export function ElementHoverScale({
       zIndex,
       delay,
       emitter,
+      coordinate,
       ...rest,
     });
   };

src/spec/interaction.ts

@@ -152,7 +152,6 @@ export type ElementHighlightByColorInteraction = {
 export type ElementHoverScaleInteraction = {
   type?: 'elementHoverScale';
   scale?: number;
-  scaleOrigin?: string;
   shadow?: boolean;
   shadowColor?: string;
   shadowBlur?: number;