diff --git a/src/interactions/actions/drill-down.ts b/src/interactions/actions/drill-down.ts index 6936a90bc3..eea698c84b 100644 --- a/src/interactions/actions/drill-down.ts +++ b/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 效果内置 diff --git a/src/interactions/drill-down.ts b/src/interactions/drill-down.ts index ea9f1fafdf..1c62e53b7c 100644 --- a/src/interactions/drill-down.ts +++ b/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'], + }, ], });