diff --git a/src/chart/custom.ts b/src/chart/custom.ts index 66914932bb66de51f2ada7158e2b6b04251ab3a0..e1775f565116356c8d93caedd4da349bf720f6a0 100644 --- a/src/chart/custom.ts +++ b/src/chart/custom.ts @@ -585,6 +585,7 @@ function createEl(elOption: CustomElementOption): Element { // some cases probably be broken: hierarchy layout along z, like circle packing, // where emphasis only intending to modify color/border rather than lift z2. (el as ECElement).z2EmphasisLift = 1; + (el as ECElement).z2SelectLift = 1; return el; } diff --git a/src/util/graphic.ts b/src/util/graphic.ts index 766b980ac10414770dee042f6a11021ab073834a..2c41f73092169fcc5be153469f393a10d599b7cc 100644 --- a/src/util/graphic.ts +++ b/src/util/graphic.ts @@ -82,11 +82,6 @@ const mathMin = Math.min; export const EMPTY_OBJ = {}; -export const Z2_EMPHASIS_LIFT = 10; - - -export const _highlightKeyMap: Dictionary = {}; - const _customShapeMap: Dictionary<{ new(): Path }> = {}; type ExtendShapeOpt = Parameters[0]; diff --git a/src/util/states.ts b/src/util/states.ts index cde38edf21142defc492cf865fd3e4bf94d4ea3d..b82908088747b03b4ea6cc0156d90595884650f6 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -8,11 +8,7 @@ import Element, { ElementEvent } from 'zrender/src/Element'; import Model from '../model/Model'; import { DisplayState, ECElement, ColorString, BlurScope, InnerFocus, Payload } from './types'; import { extend, indexOf, isArrayLike, isObject, keys, isArray } from 'zrender/src/core/util'; -import { - Z2_EMPHASIS_LIFT, - getECData, - _highlightKeyMap -} from './graphic'; +import { getECData } from './graphic'; import * as colorTool from 'zrender/src/tool/color'; import { EChartsType } from '../echarts'; import List from '../data/List'; @@ -22,7 +18,9 @@ import { queryDataIndex } from './model'; import { PathStyleProps } from 'zrender/src/graphic/Path'; // Reserve 0 as default. -export let _highlightNextDigit = 1; +let _highlightNextDigit = 1; + +const _highlightKeyMap: Dictionary = {}; export const HOVER_STATE_NORMAL: 0 = 0; export const HOVER_STATE_BLUR: 1 = 1; @@ -31,6 +29,9 @@ export const HOVER_STATE_EMPHASIS: 2 = 2; export const SPECIAL_STATES = ['emphasis', 'blur', 'select'] as const; export const DISPLAY_STATES = ['normal', 'emphasis', 'blur', 'select'] as const; +export const Z2_EMPHASIS_LIFT = 10; +export const Z2_SELECT_LIFT = 9; + type ExtendedProps = { __highByOuter: number @@ -177,42 +178,62 @@ function createEmphasisDefaultState( ) { const hasEmphasis = indexOf(el.currentStates, stateName) >= 0; let cloned = false; - if (!(el instanceof ZRText)) { - const currentFill = el.style.fill; - const currentStroke = el.style.stroke; - if (currentFill || currentStroke) { - const fromState: PathStyleProps = !hasEmphasis - ? getFromStateStyle(el, ['fill', 'stroke'], stateName) - : null; - state = state || {}; - // Apply default color lift - let emphasisStyle = state.style || {}; - if (!hasFillOrStroke(emphasisStyle.fill) && hasFillOrStroke(currentFill)) { - cloned = true; - // Not modify the original value. - state = extend({}, state); - emphasisStyle = extend({}, emphasisStyle); - // Already being applied 'emphasis'. DON'T lift color multiple times. - emphasisStyle.fill = hasEmphasis ? currentFill : liftColor(fromState.fill as ColorString); + if (!hasEmphasis) { // Do nothing if there is emphasis state exists. + if (!(el instanceof ZRText)) { + const currentFill = el.style.fill; + const currentStroke = el.style.stroke; + if (currentFill || currentStroke) { + const fromState = getFromStateStyle(el, ['fill', 'stroke'], stateName); + state = state || {}; + // Apply default color lift + let emphasisStyle = state.style || {}; + if (!hasFillOrStroke(emphasisStyle.fill) && hasFillOrStroke(currentFill)) { + cloned = true; + // Not modify the original value. + state = extend({}, state); + emphasisStyle = extend({}, emphasisStyle); + // Already being applied 'emphasis'. DON'T lift color multiple times. + emphasisStyle.fill = liftColor(fromState.fill as ColorString); + } + if (!hasFillOrStroke(emphasisStyle.stroke) && hasFillOrStroke(currentStroke)) { + if (!cloned) { + state = extend({}, state); + emphasisStyle = extend({}, emphasisStyle); + } + emphasisStyle.stroke = liftColor(fromState.stroke as ColorString); + } + state.style = emphasisStyle; } - if (!hasFillOrStroke(emphasisStyle.stroke) && hasFillOrStroke(currentStroke)) { + } + if (state) { + // TODO Share with textContent? + if (state.z2 == null) { if (!cloned) { state = extend({}, state); - emphasisStyle = extend({}, emphasisStyle); } - emphasisStyle.stroke = hasEmphasis ? currentStroke : liftColor(fromState.stroke as ColorString); + const z2EmphasisLift = (el as ECElement).z2EmphasisLift; + state.z2 = el.z2 + (z2EmphasisLift != null ? z2EmphasisLift : Z2_EMPHASIS_LIFT); } - state.style = emphasisStyle; } } + return state; +} + +function createSelectDefaultState( + el: Displayable, + stateName: 'select', + state: Displayable['states'][number] +) { + const hasSelect = indexOf(el.currentStates, stateName) >= 0; + let cloned = false; if (state) { // TODO Share with textContent? if (state.z2 == null) { if (!cloned) { state = extend({}, state); } - const z2EmphasisLift = (el as ECElement).z2EmphasisLift; - state.z2 = el.z2 + (z2EmphasisLift != null ? z2EmphasisLift : Z2_EMPHASIS_LIFT); + const z2SelectLift = (el as ECElement).z2SelectLift; + state.z2 = el.z2 + (z2SelectLift != null ? z2SelectLift : Z2_SELECT_LIFT); } } return state; @@ -227,7 +248,7 @@ function createBlurDefaultState( const currentOpacity = el.style.opacity; const fromState = !hasBlur - ? getFromStateStyle(el, ['fill', 'stroke'], stateName, { + ? getFromStateStyle(el, ['opacity'], stateName, { opacity: 1 }) : null; @@ -256,6 +277,9 @@ function elementStateProxy(this: Displayable, stateName: string): DisplayableSta else if (stateName === 'blur') { return createBlurDefaultState(this, stateName, state); } + else if (stateName === 'select') { + return createSelectDefaultState(this, stateName, state); + } } return state; } diff --git a/src/util/types.ts b/src/util/types.ts index 9a154852535c2b85a6f293fcaf21b6bc4d195c41..3e7050449978326a58d95e002aa54350c4da53fd 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -114,6 +114,7 @@ export interface ECElement extends Element { selected?: boolean; z2EmphasisLift?: number; + z2SelectLift?: number; /** * Force disable animation on any condition