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/09 18:44:38 UTC
[incubator-echarts] 02/05: enable graphic component event.
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 8ccb69cb2c923060d3a6c0dc3312ab816f5a304f
Author: sushuang <su...@gmail.com>
AuthorDate: Sun Sep 9 23:49:08 2018 +0800
enable graphic component event.
---
src/component/graphic.js | 34 +++++++++--
src/echarts.js | 2 +-
test/ec-event.html | 145 +++++++++++++++++++++++++++++++++++++++++++++++
test/lib/draggable.js | 9 ++-
4 files changed, 180 insertions(+), 10 deletions(-)
diff --git a/src/component/graphic.js b/src/component/graphic.js
index 22f014e..6402ea3 100644
--- a/src/component/graphic.js
+++ b/src/component/graphic.js
@@ -264,7 +264,7 @@ echarts.extendComponentView({
}
this._lastGraphicModel = graphicModel;
- this._updateElements(graphicModel, api);
+ this._updateElements(graphicModel);
this._relocate(graphicModel, api);
},
@@ -273,9 +273,8 @@ echarts.extendComponentView({
*
* @private
* @param {Object} graphicModel graphic model
- * @param {module:echarts/ExtensionAPI} api extension API
*/
- _updateElements: function (graphicModel, api) {
+ _updateElements: function (graphicModel) {
var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
if (!elOptionsToUpdate) {
@@ -293,9 +292,8 @@ echarts.extendComponentView({
var parentId = elOption.parentId;
var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
- if (elOption.type === 'text') {
- var elOptionStyle = elOption.style;
-
+ var elOptionStyle = elOption.style;
+ if (elOption.type === 'text' && elOptionStyle) {
// In top/bottom mode, textVerticalAlign should not be used, which cause
// inaccurately locating.
if (elOption.hv && elOption.hv[1]) {
@@ -340,6 +338,7 @@ echarts.extendComponentView({
if (el) {
el.__ecGraphicWidth = elOption.width;
el.__ecGraphicHeight = elOption.height;
+ setEventData(el, graphicModel, elOption);
}
});
},
@@ -529,4 +528,27 @@ function setLayoutInfoToExist(existItem, newElOption) {
existItem.width == null && (existItem.width = newElOption.width = 0);
existItem.height == null && (existItem.height = newElOption.height = 0);
}
+}
+
+function setEventData(el, graphicModel, elOption) {
+ var eventData = el.eventData;
+ // Simple optimize for large amount of elements that no need event.
+ if (!el.silent && !el.ignore && !eventData) {
+ eventData = el.eventData = {
+ componentType: 'graphic',
+ graphicIndex: graphicModel.componentIndex,
+ data: el.__userData,
+ name: el.name
+ };
+ }
+
+ // `elOption.data` enables user to mount some info on
+ // elements and use them in event handlers.
+ // Update them only when user specified, otherwise, remain.
+ if (elOption.hasOwnProperty('data')) {
+ el.__userData = elOption.data;
+ }
+ if (eventData) {
+ eventData.data = el.__userData;
+ }
}
\ No newline at end of file
diff --git a/src/echarts.js b/src/echarts.js
index 0696f67..934102e 100644
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -1706,7 +1706,7 @@ function createExtensionAPI(ecInstance) {
* `{seriesIndex: 2}`, `{seriesName: 'xx'}`, `{seriesId: 'some'}`,
* `{xAxisIndex: 2}`, `{xAxisName: 'xx'}`, `{xAxisId: 'some'}`.
* + The element query object, like:
- * `{targetName: 'some'}` (only available in custom series).
+ * `{name: 'some'}` (only available in custom series).
*
* 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.
diff --git a/test/ec-event.html b/test/ec-event.html
index 4951451..c18aecb 100644
--- a/test/ec-event.html
+++ b/test/ec-event.html
@@ -44,6 +44,8 @@ under the License.
<div id="main2"></div>
<h2><a href="./custom-feature.html">custom element event case.</a></h2>
<div id="main3"></div>
+ <div id="main4"></div>
+ <div id="main5"></div>
<script>
@@ -209,6 +211,149 @@ under the License.
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ graphic: [{
+ type: 'text',
+ left: 50,
+ top: 20,
+ style: {
+ textBackgroundColor: '#123456',
+ textPadding: 5,
+ fill: '#fff',
+ text: [
+ 'this is a text of graphic component',
+ 'my name is not "aaa", click me must NOT console.log("aaa")'
+ ].join('\n')
+ }
+ }, {
+ type: 'text',
+ name: 'aaa',
+ left: 50,
+ top: 60,
+ style: {
+ textBackgroundColor: '#654321',
+ textPadding: 5,
+ fill: '#ffffff',
+ text: [
+ 'this is a text of graphic component',
+ 'my name is "aaa", click me MUST console.log("aaa")'
+ ].join('\n')
+ }
+ }],
+ title: {
+ text: 'this is a text of title component',
+ subtext: 'this is a subtext of title component',
+ top: 100
+ }
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main4', {
+ option: option,
+ title: 'click the text (graphic component), console.log the params'
+ });
+
+ chart.on('click', function (params) {
+ console.log(params);
+ })
+ chart.on('click', {name: 'aaa'}, function (params) {
+ console.log('aaa', params);
+ });
+ });
+ </script>
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var option = {
+ graphic: [{
+ type: 'text',
+ left: 50,
+ top: 20,
+ data: {
+ x: 1
+ },
+ style: {
+ textBackgroundColor: '#123456',
+ textPadding: 5,
+ fill: '#fff',
+ text: 'click data is {x: 1}'
+ }
+ }, {
+ type: 'text',
+ left: 50,
+ top: 100,
+ data: 1234567,
+ style: {
+ textBackgroundColor: '#678901',
+ textPadding: 5,
+ fill: '#ff0',
+ text: 'click data is 1234567'
+ }
+ }, {
+ type: 'text',
+ left: 50,
+ top: 150,
+ data: ['a', 'b'],
+ style: {
+ textBackgroundColor: '#678901',
+ textPadding: 5,
+ fill: '#ff2',
+ text: 'click data is ["a", "b"]'
+ }
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main5', {
+ option: option,
+ title: [
+ 'user data check',
+ 'click text see console.log',
+ 'then click the button, and click text see console.log'
+ ],
+ button: {
+ text: 'setOption to merge user data',
+ onclick: function () {
+ chart.setOption({
+ graphic: [{
+ data: {b: 2},
+ style: {
+ text: 'click data is {b: 2}'
+ }
+ }, {
+ data: void 0,
+ style: {
+ text: 'click data is undefined'
+ }
+ }]
+ });
+ }
+ }
+ });
+
+ chart.on('click', function (params) {
+ console.log(params.data);
+ })
+ });
+ </script>
+
+
+
+
+
</body>
</html>
\ No newline at end of file
diff --git a/test/lib/draggable.js b/test/lib/draggable.js
index c6a228b..2eb3b78 100644
--- a/test/lib/draggable.js
+++ b/test/lib/draggable.js
@@ -39,14 +39,17 @@
* @param {boolean} [opt.lockY=false]
* @param {number} [opt.throttle=false]
* @param {boolean} [opt.addPlaceholder=false]
+ * @param {Function} [opt.onDrag]
* @return {type} description
*/
init: function (mainEl, chart, opt) {
opt = opt || {};
- var chartResize = chart ? $.proxy(chart.resize, chart) : function () {};
+ var onDrag = opt.onDrag || $.proxy(chart.resize, chart);
+
+ var onDragThrottled = chart ? onDrag : function () {};
if (opt.throttle) {
- chartResize = throttle(chartResize, opt.throttle, true, false);
+ onDragThrottled = throttle(onDragThrottled, opt.throttle, true, false);
}
var mainEl = $(mainEl);
@@ -184,7 +187,7 @@
label.text(Math.round(mainContentWidth) + ' x ' + Math.round(mainContentHeight));
- chartResize();
+ onDragThrottled();
}
}
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org