feat(sunburst): 丰富旭日图交互, 点击中心可以上卷 (#2903)

Author: visiky

src/interactions/actions/drill-down.ts

@@ -1,5 +1,5 @@
 import { Action, IGroup, Util } from '@antv/g2';
-import { get, last, isNil } from '@antv/util';
+import { get, last, isNil, size } from '@antv/util';
 import { Data } from '../../types';
 import { DrillDownCfg } from '../../types/drill-down';
 import { deepAssign } from '../../utils/deep-assign';
@@ -112,12 +112,21 @@ export class DrillDownAction extends Action {
     breadCrumbGroup.setMatrix(matrix);
   }
 
+  /**
+   * 返回上一层
+   */
+  public back(): void {
+    if (size(this.historyCache)) {
+      this.backTo(this.historyCache.slice(0, -1));
+    }
+  }
+
   /**
    * 重置
    */
   public reset(): void {
     if (this.historyCache[0]) {
-      this.back(this.historyCache.slice(0, 1));
+      this.backTo(this.historyCache.slice(0, 1));
     }
     // 清空
     this.historyCache = [];
@@ -158,7 +167,7 @@ export class DrillDownAction extends Action {
    * 回退事件，点击面包屑时触发
    * @param historyCache 当前要回退到的历史
    */
-  protected back(historyCache: HistoryCache) {
+  protected backTo(historyCache: HistoryCache) {
     if (!historyCache || historyCache.length <= 0) {
       return;
     }
@@ -236,7 +245,7 @@ export class DrillDownAction extends Action {
         const targetId = event.target.get('id');
         if (targetId !== last(cache)?.id) {
           const newHistoryCache = cache.slice(0, cache.findIndex((d) => d.id === targetId) + 1);
-          this.back(newHistoryCache);
+          this.backTo(newHistoryCache);
         }
       });
       // active 效果内置

src/interactions/drill-down.ts

@@ -10,12 +10,29 @@ export function isParentNode(context) {
   return isArray(data.children) && data.children.length > 0;
 }
 
-registerAction('drill-down-action', DrillDownAction);
+/**
+ * 判断是否在中心
+ */
+function inCenter(context) {
+  const coordinate = context.view.getCoordinate();
+  const { innerRadius } = coordinate;
+  if (innerRadius) {
+    const { x, y } = context.event;
+    const { x: centerX, y: centerY } = coordinate.center;
+    const r = coordinate.getRadius() * innerRadius;
+    const distance = Math.sqrt((centerX - x) ** 2 + (centerY - y) ** 2);
+    return distance < r;
+  }
+  return false;
+}
 
+registerAction('drill-down-action', DrillDownAction);
 registerInteraction('drill-down', {
   showEnable: [
     { trigger: 'element:mouseenter', action: 'cursor:pointer', isEnable: isParentNode },
     { trigger: 'element:mouseleave', action: 'cursor:default' },
+    // 中心处，肯定会触发 element:mouseleave 操作
+    { trigger: 'element:mouseleave', action: 'cursor:pointer', isEnable: inCenter },
   ],
   start: [
     {
@@ -27,5 +44,11 @@ registerInteraction('drill-down', {
       trigger: 'afterchangesize',
       action: ['drill-down-action:resetPosition'],
     },
+    {
+      // 点击中心，返回上一层
+      trigger: 'click',
+      isEnable: inCenter,
+      action: ['drill-down-action:back'],
+    },
   ],
 });