cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
538 lines (537 loc) • 19.4 kB
JavaScript
import LRUCache from "../../../zrender/lib/core/LRU.mjs";
import { each, isArray, isArrayLike, isObject, keys, indexOf, extend, isString, isGradientObject, map } from "../../../zrender/lib/core/util.mjs";
import { getECData } from "./innerStore.mjs";
import { lift } from "../../../zrender/lib/tool/color.mjs";
import { makeInner, queryDataIndex } from "./model.mjs";
import Path from "../../../zrender/lib/graphic/Path.mjs";
var _highlightNextDigit = 1;
var _highlightKeyMap = {};
var getSavedStates = makeInner();
var getComponentStates = makeInner();
var HOVER_STATE_NORMAL = 0;
var HOVER_STATE_BLUR = 1;
var HOVER_STATE_EMPHASIS = 2;
var SPECIAL_STATES = ["emphasis", "blur", "select"];
var DISPLAY_STATES = ["normal", "emphasis", "blur", "select"];
var Z2_EMPHASIS_LIFT = 10;
var Z2_SELECT_LIFT = 9;
var HIGHLIGHT_ACTION_TYPE = "highlight";
var DOWNPLAY_ACTION_TYPE = "downplay";
var SELECT_ACTION_TYPE = "select";
var UNSELECT_ACTION_TYPE = "unselect";
var TOGGLE_SELECT_ACTION_TYPE = "toggleSelect";
function hasFillOrStroke(fillOrStroke) {
return fillOrStroke != null && fillOrStroke !== "none";
}
var liftedColorCache = new LRUCache(100);
function liftColor(color$1) {
if (isString(color$1)) {
var liftedColor = liftedColorCache.get(color$1);
if (!liftedColor) {
liftedColor = lift(color$1, -0.1);
liftedColorCache.put(color$1, liftedColor);
}
return liftedColor;
} else if (isGradientObject(color$1)) {
var ret = extend({}, color$1);
ret.colorStops = map(color$1.colorStops, function(stop) {
return {
offset: stop.offset,
color: lift(stop.color, -0.1)
};
});
return ret;
}
return color$1;
}
function doChangeHoverState(el, stateName, hoverStateEnum) {
if (el.onHoverStateChange && (el.hoverState || 0) !== hoverStateEnum) {
el.onHoverStateChange(stateName);
}
el.hoverState = hoverStateEnum;
}
function singleEnterEmphasis(el) {
doChangeHoverState(el, "emphasis", HOVER_STATE_EMPHASIS);
}
function singleLeaveEmphasis(el) {
if (el.hoverState === HOVER_STATE_EMPHASIS) {
doChangeHoverState(el, "normal", HOVER_STATE_NORMAL);
}
}
function singleEnterBlur(el) {
doChangeHoverState(el, "blur", HOVER_STATE_BLUR);
}
function singleLeaveBlur(el) {
if (el.hoverState === HOVER_STATE_BLUR) {
doChangeHoverState(el, "normal", HOVER_STATE_NORMAL);
}
}
function singleEnterSelect(el) {
el.selected = true;
}
function singleLeaveSelect(el) {
el.selected = false;
}
function updateElementState(el, updater, commonParam) {
updater(el, commonParam);
}
function traverseUpdateState(el, updater, commonParam) {
updateElementState(el, updater, commonParam);
el.isGroup && el.traverse(function(child) {
updateElementState(child, updater, commonParam);
});
}
function setStatesFlag(el, stateName) {
switch (stateName) {
case "emphasis":
el.hoverState = HOVER_STATE_EMPHASIS;
break;
case "normal":
el.hoverState = HOVER_STATE_NORMAL;
break;
case "blur":
el.hoverState = HOVER_STATE_BLUR;
break;
case "select":
el.selected = true;
}
}
function getFromStateStyle(el, props, toStateName, defaultValue) {
var style = el.style;
var fromState = {};
for (var i = 0; i < props.length; i++) {
var propName = props[i];
var val = style[propName];
fromState[propName] = val == null ? defaultValue && defaultValue[propName] : val;
}
for (var i = 0; i < el.animators.length; i++) {
var animator = el.animators[i];
if (animator.__fromStateTransition && animator.__fromStateTransition.indexOf(toStateName) < 0 && animator.targetName === "style") {
animator.saveTo(fromState, props);
}
}
return fromState;
}
function createEmphasisDefaultState(el, stateName, targetStates, state) {
var hasSelect = targetStates && indexOf(targetStates, "select") >= 0;
var cloned = false;
if (el instanceof Path) {
var store = getSavedStates(el);
var fromFill = hasSelect ? store.selectFill || store.normalFill : store.normalFill;
var fromStroke = hasSelect ? store.selectStroke || store.normalStroke : store.normalStroke;
if (hasFillOrStroke(fromFill) || hasFillOrStroke(fromStroke)) {
state = state || {};
var emphasisStyle = state.style || {};
if (emphasisStyle.fill === "inherit") {
cloned = true;
state = extend({}, state);
emphasisStyle = extend({}, emphasisStyle);
emphasisStyle.fill = fromFill;
} else if (!hasFillOrStroke(emphasisStyle.fill) && hasFillOrStroke(fromFill)) {
cloned = true;
state = extend({}, state);
emphasisStyle = extend({}, emphasisStyle);
emphasisStyle.fill = liftColor(fromFill);
} else if (!hasFillOrStroke(emphasisStyle.stroke) && hasFillOrStroke(fromStroke)) {
if (!cloned) {
state = extend({}, state);
emphasisStyle = extend({}, emphasisStyle);
}
emphasisStyle.stroke = liftColor(fromStroke);
}
state.style = emphasisStyle;
}
}
if (state) {
if (state.z2 == null) {
if (!cloned) {
state = extend({}, state);
}
var z2EmphasisLift = el.z2EmphasisLift;
state.z2 = el.z2 + (z2EmphasisLift != null ? z2EmphasisLift : Z2_EMPHASIS_LIFT);
}
}
return state;
}
function createSelectDefaultState(el, stateName, state) {
if (state) {
if (state.z2 == null) {
state = extend({}, state);
var z2SelectLift = el.z2SelectLift;
state.z2 = el.z2 + (z2SelectLift != null ? z2SelectLift : Z2_SELECT_LIFT);
}
}
return state;
}
function createBlurDefaultState(el, stateName, state) {
var hasBlur = indexOf(el.currentStates, stateName) >= 0;
var currentOpacity = el.style.opacity;
var fromState = !hasBlur ? getFromStateStyle(el, ["opacity"], stateName, {
opacity: 1
}) : null;
state = state || {};
var blurStyle = state.style || {};
if (blurStyle.opacity == null) {
state = extend({}, state);
blurStyle = extend({
opacity: hasBlur ? currentOpacity : fromState.opacity * 0.1
}, blurStyle);
state.style = blurStyle;
}
return state;
}
function elementStateProxy(stateName, targetStates) {
var state = this.states[stateName];
if (this.style) {
if (stateName === "emphasis") {
return createEmphasisDefaultState(this, stateName, targetStates, state);
} else if (stateName === "blur") {
return createBlurDefaultState(this, stateName, state);
} else if (stateName === "select") {
return createSelectDefaultState(this, stateName, state);
}
}
return state;
}
function setDefaultStateProxy(el) {
el.stateProxy = elementStateProxy;
var textContent = el.getTextContent();
var textGuide = el.getTextGuideLine();
if (textContent) {
textContent.stateProxy = elementStateProxy;
}
if (textGuide) {
textGuide.stateProxy = elementStateProxy;
}
}
function enterEmphasisWhenMouseOver(el, e) {
!shouldSilent(el, e) && !el.__highByOuter && traverseUpdateState(el, singleEnterEmphasis);
}
function leaveEmphasisWhenMouseOut(el, e) {
!shouldSilent(el, e) && !el.__highByOuter && traverseUpdateState(el, singleLeaveEmphasis);
}
function enterEmphasis(el, highlightDigit) {
el.__highByOuter |= 1 << (highlightDigit || 0);
traverseUpdateState(el, singleEnterEmphasis);
}
function leaveEmphasis(el, highlightDigit) {
!(el.__highByOuter &= ~(1 << (highlightDigit || 0))) && traverseUpdateState(el, singleLeaveEmphasis);
}
function enterBlur(el) {
traverseUpdateState(el, singleEnterBlur);
}
function leaveBlur(el) {
traverseUpdateState(el, singleLeaveBlur);
}
function enterSelect(el) {
traverseUpdateState(el, singleEnterSelect);
}
function leaveSelect(el) {
traverseUpdateState(el, singleLeaveSelect);
}
function shouldSilent(el, e) {
return el.__highDownSilentOnTouch && e.zrByTouch;
}
function allLeaveBlur(api) {
var model = api.getModel();
var leaveBlurredSeries = [];
var allComponentViews = [];
model.eachComponent(function(componentType, componentModel) {
var componentStates = getComponentStates(componentModel);
var isSeries = componentType === "series";
var view = isSeries ? api.getViewOfSeriesModel(componentModel) : api.getViewOfComponentModel(componentModel);
!isSeries && allComponentViews.push(view);
if (componentStates.isBlured) {
view.group.traverse(function(child) {
singleLeaveBlur(child);
});
isSeries && leaveBlurredSeries.push(componentModel);
}
componentStates.isBlured = false;
});
each(allComponentViews, function(view) {
if (view && view.toggleBlurSeries) {
view.toggleBlurSeries(leaveBlurredSeries, false, model);
}
});
}
function blurSeries(targetSeriesIndex, focus, blurScope, api) {
var ecModel = api.getModel();
blurScope = blurScope || "coordinateSystem";
function leaveBlurOfIndices(data, dataIndices) {
for (var i = 0; i < dataIndices.length; i++) {
var itemEl = data.getItemGraphicEl(dataIndices[i]);
itemEl && leaveBlur(itemEl);
}
}
if (targetSeriesIndex == null) {
return;
}
if (!focus || focus === "none") {
return;
}
var targetSeriesModel = ecModel.getSeriesByIndex(targetSeriesIndex);
var targetCoordSys = targetSeriesModel.coordinateSystem;
if (targetCoordSys && targetCoordSys.master) {
targetCoordSys = targetCoordSys.master;
}
var blurredSeries = [];
ecModel.eachSeries(function(seriesModel) {
var sameSeries = targetSeriesModel === seriesModel;
var coordSys = seriesModel.coordinateSystem;
if (coordSys && coordSys.master) {
coordSys = coordSys.master;
}
var sameCoordSys = coordSys && targetCoordSys ? coordSys === targetCoordSys : sameSeries;
if (!(blurScope === "series" && !sameSeries || blurScope === "coordinateSystem" && !sameCoordSys || focus === "series" && sameSeries)) {
var view = api.getViewOfSeriesModel(seriesModel);
view.group.traverse(function(child) {
singleEnterBlur(child);
});
if (isArrayLike(focus)) {
leaveBlurOfIndices(seriesModel.getData(), focus);
} else if (isObject(focus)) {
var dataTypes = keys(focus);
for (var d = 0; d < dataTypes.length; d++) {
leaveBlurOfIndices(seriesModel.getData(dataTypes[d]), focus[dataTypes[d]]);
}
}
blurredSeries.push(seriesModel);
getComponentStates(seriesModel).isBlured = true;
}
});
ecModel.eachComponent(function(componentType, componentModel) {
if (componentType === "series") {
return;
}
var view = api.getViewOfComponentModel(componentModel);
if (view && view.toggleBlurSeries) {
view.toggleBlurSeries(blurredSeries, true, ecModel);
}
});
}
function blurComponent(componentMainType, componentIndex, api) {
if (componentMainType == null || componentIndex == null) {
return;
}
var componentModel = api.getModel().getComponent(componentMainType, componentIndex);
if (!componentModel) {
return;
}
getComponentStates(componentModel).isBlured = true;
var view = api.getViewOfComponentModel(componentModel);
if (!view || !view.focusBlurEnabled) {
return;
}
view.group.traverse(function(child) {
singleEnterBlur(child);
});
}
function blurSeriesFromHighlightPayload(seriesModel, payload, api) {
var seriesIndex = seriesModel.seriesIndex;
var data = seriesModel.getData(payload.dataType);
if (!data) {
return;
}
var dataIndex = queryDataIndex(data, payload);
dataIndex = (isArray(dataIndex) ? dataIndex[0] : dataIndex) || 0;
var el = data.getItemGraphicEl(dataIndex);
if (!el) {
var count = data.count();
var current = 0;
while (!el && current < count) {
el = data.getItemGraphicEl(current++);
}
}
if (el) {
var ecData = getECData(el);
blurSeries(seriesIndex, ecData.focus, ecData.blurScope, api);
} else {
var focus_1 = seriesModel.get(["emphasis", "focus"]);
var blurScope = seriesModel.get(["emphasis", "blurScope"]);
if (focus_1 != null) {
blurSeries(seriesIndex, focus_1, blurScope, api);
}
}
}
function findComponentHighDownDispatchers(componentMainType, componentIndex, name, api) {
var ret = {
focusSelf: false,
dispatchers: null
};
if (componentMainType == null || componentMainType === "series" || componentIndex == null || name == null) {
return ret;
}
var componentModel = api.getModel().getComponent(componentMainType, componentIndex);
if (!componentModel) {
return ret;
}
var view = api.getViewOfComponentModel(componentModel);
if (!view || !view.findHighDownDispatchers) {
return ret;
}
var dispatchers = view.findHighDownDispatchers(name);
var focusSelf;
for (var i = 0; i < dispatchers.length; i++) {
if (getECData(dispatchers[i]).focus === "self") {
focusSelf = true;
break;
}
}
return {
focusSelf,
dispatchers
};
}
function handleGlobalMouseOverForHighDown(dispatcher, e, api) {
var ecData = getECData(dispatcher);
var _a = findComponentHighDownDispatchers(ecData.componentMainType, ecData.componentIndex, ecData.componentHighDownName, api), dispatchers = _a.dispatchers, focusSelf = _a.focusSelf;
if (dispatchers) {
if (focusSelf) {
blurComponent(ecData.componentMainType, ecData.componentIndex, api);
}
each(dispatchers, function(dispatcher2) {
return enterEmphasisWhenMouseOver(dispatcher2, e);
});
} else {
blurSeries(ecData.seriesIndex, ecData.focus, ecData.blurScope, api);
if (ecData.focus === "self") {
blurComponent(ecData.componentMainType, ecData.componentIndex, api);
}
enterEmphasisWhenMouseOver(dispatcher, e);
}
}
function handleGlobalMouseOutForHighDown(dispatcher, e, api) {
allLeaveBlur(api);
var ecData = getECData(dispatcher);
var dispatchers = findComponentHighDownDispatchers(ecData.componentMainType, ecData.componentIndex, ecData.componentHighDownName, api).dispatchers;
if (dispatchers) {
each(dispatchers, function(dispatcher2) {
return leaveEmphasisWhenMouseOut(dispatcher2, e);
});
} else {
leaveEmphasisWhenMouseOut(dispatcher, e);
}
}
function toggleSelectionFromPayload(seriesModel, payload, api) {
if (!isSelectChangePayload(payload)) {
return;
}
var dataType = payload.dataType;
var data = seriesModel.getData(dataType);
var dataIndex = queryDataIndex(data, payload);
if (!isArray(dataIndex)) {
dataIndex = [dataIndex];
}
seriesModel[payload.type === TOGGLE_SELECT_ACTION_TYPE ? "toggleSelect" : payload.type === SELECT_ACTION_TYPE ? "select" : "unselect"](dataIndex, dataType);
}
function updateSeriesElementSelection(seriesModel) {
var allData = seriesModel.getAllData();
each(allData, function(_a) {
var data = _a.data, type = _a.type;
data.eachItemGraphicEl(function(el, idx) {
seriesModel.isSelected(idx, type) ? enterSelect(el) : leaveSelect(el);
});
});
}
function getAllSelectedIndices(ecModel) {
var ret = [];
ecModel.eachSeries(function(seriesModel) {
var allData = seriesModel.getAllData();
each(allData, function(_a) {
_a.data;
var type = _a.type;
var dataIndices = seriesModel.getSelectedDataIndices();
if (dataIndices.length > 0) {
var item = {
dataIndex: dataIndices,
seriesIndex: seriesModel.seriesIndex
};
if (type != null) {
item.dataType = type;
}
ret.push(item);
}
});
});
return ret;
}
function enableHoverEmphasis(el, focus, blurScope) {
setAsHighDownDispatcher(el, true);
traverseUpdateState(el, setDefaultStateProxy);
enableHoverFocus(el, focus, blurScope);
}
function disableHoverEmphasis(el) {
setAsHighDownDispatcher(el, false);
}
function toggleHoverEmphasis(el, focus, blurScope, isDisabled) {
isDisabled ? disableHoverEmphasis(el) : enableHoverEmphasis(el, focus, blurScope);
}
function enableHoverFocus(el, focus, blurScope) {
var ecData = getECData(el);
if (focus != null) {
ecData.focus = focus;
ecData.blurScope = blurScope;
} else if (ecData.focus) {
ecData.focus = null;
}
}
var OTHER_STATES = ["emphasis", "blur", "select"];
var defaultStyleGetterMap = {
itemStyle: "getItemStyle",
lineStyle: "getLineStyle",
areaStyle: "getAreaStyle"
};
function setStatesStylesFromModel(el, itemModel, styleType, getter) {
styleType = styleType || "itemStyle";
for (var i = 0; i < OTHER_STATES.length; i++) {
var stateName = OTHER_STATES[i];
var model = itemModel.getModel([stateName, styleType]);
var state = el.ensureState(stateName);
state.style = getter ? getter(model) : model[defaultStyleGetterMap[styleType]]();
}
}
function setAsHighDownDispatcher(el, asDispatcher) {
var disable = asDispatcher === false;
var extendedEl = el;
if (el.highDownSilentOnTouch) {
extendedEl.__highDownSilentOnTouch = el.highDownSilentOnTouch;
}
if (!disable || extendedEl.__highDownDispatcher) {
extendedEl.__highByOuter = extendedEl.__highByOuter || 0;
extendedEl.__highDownDispatcher = !disable;
}
}
function isHighDownDispatcher(el) {
return !!(el && el.__highDownDispatcher);
}
function enableComponentHighDownFeatures(el, componentModel, componentHighDownName) {
var ecData = getECData(el);
ecData.componentMainType = componentModel.mainType;
ecData.componentIndex = componentModel.componentIndex;
ecData.componentHighDownName = componentHighDownName;
}
function getHighlightDigit(highlightKey) {
var highlightDigit = _highlightKeyMap[highlightKey];
if (highlightDigit == null && _highlightNextDigit <= 32) {
highlightDigit = _highlightKeyMap[highlightKey] = _highlightNextDigit++;
}
return highlightDigit;
}
function isSelectChangePayload(payload) {
var payloadType = payload.type;
return payloadType === SELECT_ACTION_TYPE || payloadType === UNSELECT_ACTION_TYPE || payloadType === TOGGLE_SELECT_ACTION_TYPE;
}
function isHighDownPayload(payload) {
var payloadType = payload.type;
return payloadType === HIGHLIGHT_ACTION_TYPE || payloadType === DOWNPLAY_ACTION_TYPE;
}
function savePathStates(el) {
var store = getSavedStates(el);
store.normalFill = el.style.fill;
store.normalStroke = el.style.stroke;
var selectState = el.states.select || {};
store.selectFill = selectState.style && selectState.style.fill || null;
store.selectStroke = selectState.style && selectState.style.stroke || null;
}
export { DISPLAY_STATES, DOWNPLAY_ACTION_TYPE, HIGHLIGHT_ACTION_TYPE, HOVER_STATE_BLUR, HOVER_STATE_EMPHASIS, HOVER_STATE_NORMAL, SELECT_ACTION_TYPE, SPECIAL_STATES, TOGGLE_SELECT_ACTION_TYPE, UNSELECT_ACTION_TYPE, Z2_EMPHASIS_LIFT, Z2_SELECT_LIFT, allLeaveBlur, blurComponent, blurSeries, blurSeriesFromHighlightPayload, disableHoverEmphasis, enableComponentHighDownFeatures, enableHoverEmphasis, enableHoverFocus, enterBlur, enterEmphasis, enterEmphasisWhenMouseOver, enterSelect, findComponentHighDownDispatchers, getAllSelectedIndices, getHighlightDigit, handleGlobalMouseOutForHighDown, handleGlobalMouseOverForHighDown, isHighDownDispatcher, isHighDownPayload, isSelectChangePayload, leaveBlur, leaveEmphasis, leaveEmphasisWhenMouseOut, leaveSelect, savePathStates, setAsHighDownDispatcher, setDefaultStateProxy, setStatesFlag, setStatesStylesFromModel, toggleHoverEmphasis, toggleSelectionFromPayload, updateSeriesElementSelection };