You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/09/04 18:02:42 UTC
[incubator-echarts] 02/03: fix: event filter.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 1cf30c4fa45989ef06e0c165c4dc9728cb5e0124
Author: sushuang <su...@gmail.com>
AuthorDate: Wed Sep 5 02:01:25 2018 +0800
fix: event filter.
---
src/echarts.js | 192 +++++++++++++++++++++++++++++------------------------
test/ec-event.html | 52 +++++++++------
2 files changed, 136 insertions(+), 108 deletions(-)
diff --git a/src/echarts.js b/src/echarts.js
index 8283d52..0696f67 100644
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -222,7 +222,7 @@ function ECharts(dom, theme, opts) {
*/
this._scheduler = new Scheduler(this, api, dataProcessorFuncs, visualFuncs);
- Eventful.call(this, this._ecEventProcessor = makeEventProcessor(this));
+ Eventful.call(this, this._ecEventProcessor = new EventProcessor());
/**
* @type {module:echarts~MessageCenter}
@@ -391,7 +391,7 @@ echartsProto.setOption = function (option, notMerge, lazyUpdate) {
* @DEPRECATED
*/
echartsProto.setTheme = function () {
- console.log('ECharts#setTheme() is DEPRECATED in ECharts 3.0');
+ console.error('ECharts#setTheme() is DEPRECATED in ECharts 3.0');
};
/**
@@ -1526,7 +1526,10 @@ echartsProto._initEvents = function () {
}
if (params) {
- var componentType = params.componentType;
+ // When trigger by markLine/markPoint/markArea, the
+ // componentType is 'markLine'/'markPoint'/'markArea'.
+ var componentType = params.seriesIndex != null
+ ? 'series' : params.componentType;
var componentIndex = params[componentType + 'Index'];
var model = componentType && componentIndex != null
&& ecModel.getComponent(componentType, componentIndex);
@@ -1544,11 +1547,12 @@ echartsProto._initEvents = function () {
params.event = e;
params.type = eveName;
- var ecEventProcessor = this._ecEventProcessor;
- ecEventProcessor.targetEl = el;
- ecEventProcessor.packedEvent = params;
- ecEventProcessor.model = model;
- ecEventProcessor.view = view;
+ this._ecEventProcessor.eventInfo = {
+ targetEl: el,
+ packedEvent: params,
+ model: model,
+ view: view
+ };
this.trigger(eveName, params);
}
@@ -1690,7 +1694,9 @@ function createExtensionAPI(ecInstance) {
});
}
+
/**
+ * @class
* Usage of query:
* `chart.on('click', query, handler);`
* The `query` can be:
@@ -1705,92 +1711,102 @@ function createExtensionAPI(ecInstance) {
* Caveat: If a prop in the `query` object is `null/undefined`, it is the
* same as there is no such prop in the `query` object.
*/
-function makeEventProcessor(ecIns) {
- return {
-
- normalizeQuery: function (query) {
- var cptQuery = {};
- var dataQuery = {};
- var otherQuery = {};
-
- // `query` is `mainType` or `mainType.subType` of component.
- if (zrUtil.isString(query)) {
- var condCptType = parseClassType(query);
- // `.main` and `.sub` may be ''.
- cptQuery.mainType = condCptType.main || null;
- cptQuery.subType = condCptType.sub || null;
- }
- // `query` is an object, convert to {mainType, index, name, id}.
- else {
- // `xxxIndex`, `xxxName`, `xxxId`, `name`, `dataIndex`, `dataType` is reserved,
- // can not be used in `compomentModel.filterForExposedEvent`.
- var suffixes = ['Index', 'Name', 'Id'];
- var dataKeys = {name: 1, dataIndex: 1, dataType: 1};
- zrUtil.each(query, function (val, key) {
- var reserved;
- for (var i = 0; i < suffixes.length; i++) {
- var propSuffix = suffixes[i];
- var suffixPos = key.lastIndexOf(propSuffix);
- if (suffixPos > 0 && suffixPos === key.length - propSuffix.length) {
- var mainType = key.slice(0, suffixPos);
- // Consider `dataIndex`.
- if (mainType !== 'data') {
- cptQuery.mainType = mainType;
- cptQuery[propSuffix.toLowerCase()] = val;
- reserved = true;
- }
+function EventProcessor() {
+ // These info required: targetEl, packedEvent, model, view
+ this.eventInfo;
+}
+EventProcessor.prototype = {
+ constructor: EventProcessor,
+
+ normalizeQuery: function (query) {
+ var cptQuery = {};
+ var dataQuery = {};
+ var otherQuery = {};
+
+ // `query` is `mainType` or `mainType.subType` of component.
+ if (zrUtil.isString(query)) {
+ var condCptType = parseClassType(query);
+ // `.main` and `.sub` may be ''.
+ cptQuery.mainType = condCptType.main || null;
+ cptQuery.subType = condCptType.sub || null;
+ }
+ // `query` is an object, convert to {mainType, index, name, id}.
+ else {
+ // `xxxIndex`, `xxxName`, `xxxId`, `name`, `dataIndex`, `dataType` is reserved,
+ // can not be used in `compomentModel.filterForExposedEvent`.
+ var suffixes = ['Index', 'Name', 'Id'];
+ var dataKeys = {name: 1, dataIndex: 1, dataType: 1};
+ zrUtil.each(query, function (val, key) {
+ var reserved;
+ for (var i = 0; i < suffixes.length; i++) {
+ var propSuffix = suffixes[i];
+ var suffixPos = key.lastIndexOf(propSuffix);
+ if (suffixPos > 0 && suffixPos === key.length - propSuffix.length) {
+ var mainType = key.slice(0, suffixPos);
+ // Consider `dataIndex`.
+ if (mainType !== 'data') {
+ cptQuery.mainType = mainType;
+ cptQuery[propSuffix.toLowerCase()] = val;
+ reserved = true;
}
}
- if (dataKeys.hasOwnProperty(key)) {
- dataQuery[key] = val;
- reserved = true;
- }
- if (!reserved) {
- otherQuery[key] = val;
- }
- });
- }
+ }
+ if (dataKeys.hasOwnProperty(key)) {
+ dataQuery[key] = val;
+ reserved = true;
+ }
+ if (!reserved) {
+ otherQuery[key] = val;
+ }
+ });
+ }
- return {
- cptQuery: cptQuery,
- dataQuery: dataQuery,
- otherQuery: otherQuery
- };
- },
-
- filter: function (eventType, query, args) {
- // They should be assigned before each trigger call.
- var targetEl = this.targetEl;
- var packedEvent = this.packedEvent;
- var model = this.model;
- var view = this.view;
-
- // For event like 'globalout'.
- if (!model || !view) {
- return true;
- }
+ return {
+ cptQuery: cptQuery,
+ dataQuery: dataQuery,
+ otherQuery: otherQuery
+ };
+ },
- var cptQuery = query.cptQuery;
- var dataQuery = query.dataQuery;
-
- return check(cptQuery, model, 'mainType')
- && check(cptQuery, model, 'subType')
- && check(cptQuery, model, 'index', 'componentIndex')
- && check(cptQuery, model, 'name')
- && check(cptQuery, model, 'id')
- && check(dataQuery, packedEvent, 'name')
- && check(dataQuery, packedEvent, 'dataIndex')
- && check(dataQuery, packedEvent, 'dataType')
- && (!view.filterForExposedEvent || view.filterForExposedEvent(
- eventType, query.otherQuery, targetEl, packedEvent
- ));
+ filter: function (eventType, query, args) {
+ // They should be assigned before each trigger call.
+ var eventInfo = this.eventInfo;
+ var targetEl = eventInfo.targetEl;
+ var packedEvent = eventInfo.packedEvent;
+ var model = eventInfo.model;
+ var view = eventInfo.view;
+
+ // For event like 'globalout'.
+ if (!model || !view) {
+ return true;
}
- };
- function check(query, host, prop, propOnHost) {
- return query[prop] == null || host[propOnHost || prop] === query[prop];
+ var cptQuery = query.cptQuery;
+ var dataQuery = query.dataQuery;
+
+ return check(cptQuery, model, 'mainType')
+ && check(cptQuery, model, 'subType')
+ && check(cptQuery, model, 'index', 'componentIndex')
+ && check(cptQuery, model, 'name')
+ && check(cptQuery, model, 'id')
+ && check(dataQuery, packedEvent, 'name')
+ && check(dataQuery, packedEvent, 'dataIndex')
+ && check(dataQuery, packedEvent, 'dataType')
+ && (!view.filterForExposedEvent || view.filterForExposedEvent(
+ eventType, query.otherQuery, targetEl, packedEvent
+ ));
+
+ function check(query, host, prop, propOnHost) {
+ return query[prop] == null || host[propOnHost || prop] === query[prop];
+ }
+ },
+
+ afterTrigger: function () {
+ // clear immediately after used.
+ this.eventInfo = null;
}
-}
+};
+
/**
* @type {Object} key: actionType.
@@ -1990,7 +2006,7 @@ export function dispose(chart) {
if (typeof chart === 'string') {
chart = instances[chart];
}
- else if (!(chart instanceof ECharts)){
+ else if (!(chart instanceof ECharts)) {
// Try to treat as dom
chart = getInstanceByDom(chart);
}
diff --git a/test/ec-event.html b/test/ec-event.html
index a80844c..4951451 100644
--- a/test/ec-event.html
+++ b/test/ec-event.html
@@ -78,26 +78,31 @@ under the License.
var chart = testHelper.create(echarts, 'main0', {
title: [
- 'Check event log on console:',
- 'click | xAxis click | yAxis.category click | series click | series scatter click',
+ '[click scatter point, console.log]: "clk", "clk series", "clk series.scatter"',
+ '[click xAxis, console.log]: "clk", "clk xAxis", "clk xAxis.category"',
+ '[click yAxis.category, console.log]: "clk"',
+ '[click line point, console.log]: "clk", "clk series"'
],
option: option
});
chart.on('click', function () {
- console.log('click');
+ console.log('clk');
});
chart.on('click', 'xAxis', function () {
- console.log('click xAxis');
+ console.log('clk xAxis');
+ });
+ chart.on('click', 'xAxis.category', function () {
+ console.log('clk xAxis.category');
});
chart.on('click', 'yAxis.category', function () {
- console.log('click yAxis.category');
+ console.log('clk yAxis.category');
});
chart.on('click', 'series', function () {
- console.log('click series');
+ console.log('clk series');
});
chart.on('click', 'series.scatter', function () {
- console.log('click series.scatter');
+ console.log('clk series.scatter');
});
});
@@ -123,8 +128,10 @@ under the License.
},
yAxis: [{
id: 'left',
+ name: 'yAxisIndex: 0',
triggerEvent: true
}, {
+ name: 'yAxisIndex: 1',
triggerEvent: true,
type: 'category'
}],
@@ -132,7 +139,7 @@ under the License.
type: 'line',
name: 'line-all',
symbolSize: 20,
- data: [121, 442, 55],
+ data: [121, {name: 'dataIndex 1', value: 442}, 55],
}, {
type: 'scatter',
yAxisIndex: 1,
@@ -143,7 +150,7 @@ under the License.
symbolSize: 20,
data: [
'asdf',
- {name: 'ff', value: 'zxcv'},
+ {name: 'ff, dataIndex 1', value: 'zxcv'},
'qwer'
]
}, {
@@ -156,7 +163,7 @@ under the License.
},
data: [
{name: 'ee', value: 234},
- {name: 'ff', value: 113},
+ {name: 'ff, dataIndex 1', value: 113},
{name: 'gg', value: 255}
]
}]
@@ -164,30 +171,35 @@ under the License.
var chart = testHelper.create(echarts, 'main1', {
title: [
- 'Check event log on console:',
- 'click | click yAxisIndex: 1 | mouseover yAxisId: "left" | click seriesName: "line-all"',
- 'click data name "ff" | mouseup seriesName: "line-all", dataIndex: 1'
+ '[click scatter point, console.log]: "clk"',
+ '[click line point, console.log]: "clk", "click line-all"',
+ '[mouseup line point dataIndex 1, console.log]: "mup line-all dataIndex 1"',
+ '[mouseup scatter point dataIndex 1, console.log]: nothing logged',
+ '[mouseup line point not dataIndex 1, console.log]: nothing logged',
+ '[mouseover yAxisId: "left", console.log]: "mover yAxisId x"',
+ '[click yAxisIndex: 1, console.log]: "clk", "clk yAxisIndex 1"',
+ '[click data name "gg", console.log]: "clk", "clk data name gg"'
],
option: option
});
chart.on('click', function () {
- console.log('click');
+ console.log('clk');
});
chart.on('click', {yAxisIndex: 1}, function () {
- console.log('click yAxisIndex: 1');
+ console.log('clk yAxisIndex 1');
});
chart.on('mouseover', {yAxisId: 'left'}, function () {
- console.log('mouseover yAxisId: "x"');
+ console.log('mover yAxisId x');
});
chart.on('click', {seriesName: 'line-all'}, function () {
- console.log('click seriesName: "line-all"');
+ console.log('clk line-all');
});
- chart.on('click', {name: 'ff'}, function () {
- console.log('click {name: "ff"}');
+ chart.on('click', {name: 'gg'}, function () {
+ console.log('clk data name gg');
});
chart.on('mouseup', {seriesName: 'line-all', dataIndex: 1}, function () {
- console.log('mouseup {seriesName: "line-all", dataIndex: 1}');
+ console.log('mup line-all dataIndex 1');
});
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org