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 2019/09/22 19:31:43 UTC
[incubator-echarts] branch fix/custom-graphic created (now 8813853)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch fix/custom-graphic
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at 8813853 feat: provide `echarts.registerShape` and `echarts.getShapeClass` for custom shape in `custom series` and `graphic component`.
This branch includes the following new commits:
new 8813853 feat: provide `echarts.registerShape` and `echarts.getShapeClass` for custom shape in `custom series` and `graphic component`.
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/01: feat: provide `echarts.registerShape`
and `echarts.getShapeClass` for custom shape in `custom series` and
`graphic component`.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/custom-graphic
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 8813853c61fe4ff99a5a56e0bb6d5a6e66acf19f
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Mon Sep 23 03:16:52 2019 +0800
feat: provide `echarts.registerShape` and `echarts.getShapeClass` for custom shape in `custom series` and `graphic component`.
---
src/chart/custom.js | 10 +++++++-
src/component/graphic.js | 18 +++++++++++++-
src/export.js | 1 +
src/util/graphic.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 88 insertions(+), 2 deletions(-)
diff --git a/src/chart/custom.js b/src/chart/custom.js
index 7c31bb7..784e59c 100644
--- a/src/chart/custom.js
+++ b/src/chart/custom.js
@@ -231,6 +231,8 @@ function createEl(elOption) {
var graphicType = elOption.type;
var el;
+ // Those graphic elements are not shapes. They should not be
+ // overwritten by users, so do them first.
if (graphicType === 'path') {
var shape = elOption.shape;
// Using pathRect brings convenience to users sacle svg path.
@@ -255,8 +257,14 @@ function createEl(elOption) {
el = new graphicUtil.Text({});
el.__customText = elOption.style.text;
}
+ else if (graphicType === 'group') {
+ el = new graphicUtil.Group();
+ }
+ else if (graphicType === 'compoundPath') {
+ throw new Error('"compoundPath" is not supported yet.');
+ }
else {
- var Clz = graphicUtil[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)];
+ var Clz = graphicUtil.getShapeClass(graphicType);
if (__DEV__) {
zrUtil.assert(Clz, 'graphic type "' + graphicType + '" can not be found.');
diff --git a/src/component/graphic.js b/src/component/graphic.js
index 92674a7..e689db1 100644
--- a/src/component/graphic.js
+++ b/src/component/graphic.js
@@ -26,6 +26,18 @@ import * as graphicUtil from '../util/graphic';
import * as layoutUtil from '../util/layout';
import {parsePercent} from '../util/number';
+var _nonShapeGraphicElements = {
+
+ // Reserved but not supported in graphic component.
+ path: null,
+ compoundPath: null,
+
+ // Supported in graphic component.
+ group: graphicUtil.Group,
+ image: graphicUtil.Image,
+ text: graphicUtil.Text
+};
+
// -------------
// Preprocessor
// -------------
@@ -440,7 +452,11 @@ function createEl(id, targetElParent, elOption, elMap) {
zrUtil.assert(graphicType, 'graphic type MUST be set');
}
- var Clz = graphicUtil[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)];
+ var Clz = _nonShapeGraphicElements.hasOwnProperty(graphicType)
+ // Those graphic elements are not shapes. They should not be
+ // overwritten by users, so do them first.
+ ? _nonShapeGraphicElements[graphicType]
+ : graphicUtil.getShapeClass(graphicType);
if (__DEV__) {
zrUtil.assert(Clz, 'graphic type can not be found');
diff --git a/src/export.js b/src/export.js
index dded75c..6ddd62e 100644
--- a/src/export.js
+++ b/src/export.js
@@ -71,6 +71,7 @@ zrUtil.each(
'setHoverStyle', 'setLabelStyle', 'setTextStyle', 'setText',
'getFont', 'updateProps', 'initProps', 'getTransform',
'clipPointsByRect', 'clipRectByRect',
+ 'registerShape', 'getShapeClass',
'Group',
'Image',
'Text',
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 38b2b85..0ca633d 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -65,6 +65,8 @@ var NORMAL = 'normal';
var _highlightNextDigit = 1;
var _highlightKeyMap = {};
+var _customShapeMap = {};
+
/**
* Extend shape with parameters
@@ -81,6 +83,53 @@ export function extendPath(pathData, opts) {
}
/**
+ * Register a user defined shape.
+ * The shape class can be fetched by `getShapeClass`
+ * This method will not overwrite the built-in shapes.
+ * The shape can be used in `custom series` and
+ * `graphic component` by declaring `{type: name}`.
+ *
+ * @param {string} name
+ * @param {Object} ShapeClass Can be generated by `extendShape`.
+ */
+export function registerShape(name, ShapeClass) {
+ _customShapeMap[name] = ShapeClass;
+}
+
+/**
+ * Find shape class registered by `registerShape`. Usually used in
+ * fetching user defined shape.
+ *
+ * [Caution]:
+ * (1) This method **MUST NOT be used inside echarts !!!**, unless it is prepared
+ * to use user registered shapes.
+ * Because the built-in shape (see `getBuiltInShape`) will be registered by
+ * `registerShape` by default. That enables users to get both built-in
+ * shapes as well as the shapes belonging to themsleves. But users can overwrite
+ * the built-in shapes by using names like 'circle', 'rect' via calling
+ * `registerShape`. So the echarts inner featrues should not fetch shapes from here
+ * in case that it is overwritten by users, except that some features, like
+ * `custom series`, `graphic component`, do it deliberately.
+ *
+ * (2) In the features like `custom series`, `graphic component`, the user input
+ * `{tpye: 'xxx'}` does not only specify shapes but also specify other graphic
+ * elements like `'group'`, `'text'`, `'image'` or event `'path'`. Those names
+ * are reserved names, that is, if some user register a shape named `'image'`,
+ * the shape will not be used. If we intending to add some more reserved names
+ * in feature, that might bring break changes (disable some existing user shape
+ * names). But that case probably rearly happen. So we dont make more mechanism
+ * to resolve this issue here.
+ *
+ * @param {string} name
+ * @return {Object} The shape class. If not found, return nothing.
+ */
+export function getShapeClass(name) {
+ if (_customShapeMap.hasOwnProperty(name)) {
+ return _customShapeMap[name];
+ }
+}
+
+/**
* Create a path element from path data string
* @param {string} pathData
* @param {Object} opts
@@ -1377,6 +1426,18 @@ function nearZero(val) {
return val <= (1e-6) && val >= -(1e-6);
}
+// Register built-in shapes. These shapes might be overwirtten
+// by users, although we do not recommend that.
+registerShape('circle', Circle);
+registerShape('sector', Sector);
+registerShape('ring', Ring);
+registerShape('polygon', Polygon);
+registerShape('polyline', Polyline);
+registerShape('rect', Rect);
+registerShape('line', Line);
+registerShape('bezierCurve', BezierCurve);
+registerShape('arc', Arc);
+
export {
Group,
ZImage as Image,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org