[incubator-echarts] 01/05: ts: add type to graphic component.

2020-10-27 Thread sushuang
This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git

commit 23a809ddd897c9042fa1b9f29f6cf9c65341e72d
Author: 100pah 
AuthorDate: Tue Oct 27 02:17:11 2020 +0800

ts: add type to graphic component.
---
 src/component/graphic.ts | 470 +++
 src/util/layout.ts   |   2 +-
 2 files changed, 309 insertions(+), 163 deletions(-)

diff --git a/src/component/graphic.ts b/src/component/graphic.ts
index 430e81c..fd6ac7d 100644
--- a/src/component/graphic.ts
+++ b/src/component/graphic.ts
@@ -17,7 +17,6 @@
 * under the License.
 */
 
-// @ts-nocheck
 
 import * as echarts from '../echarts';
 import * as zrUtil from 'zrender/src/core/util';
@@ -26,25 +25,194 @@ import * as modelUtil from '../util/model';
 import * as graphicUtil from '../util/graphic';
 import * as layoutUtil from '../util/layout';
 import {parsePercent} from '../util/number';
+import { ComponentOption, BoxLayoutOptionMixin, Dictionary, ZRStyleProps, 
OptionId } from '../util/types';
+import ComponentModel from '../model/Component';
+import Element from 'zrender/src/Element';
+import Displayable from 'zrender/src/graphic/Displayable';
+import { PathProps } from 'zrender/src/graphic/Path';
+import { ImageStyleProps } from 'zrender/src/graphic/Image';
+import GlobalModel from '../model/Global';
+import ComponentView from '../view/Component';
+import ExtensionAPI from '../ExtensionAPI';
+import { getECData } from '../util/innerStore';
+
+
+const TRANSFORM_PROPS = {
+x: 1,
+y: 1,
+scaleX: 1,
+scaleY: 1,
+originX: 1,
+originY: 1,
+rotation: 1
+} as const;
+type TransformProp = keyof typeof TRANSFORM_PROPS;
+
+interface GraphicComponentBaseElementOption extends
+Partial>,
+/**
+ * left/right/top/bottom: (like 12, '22%', 'center', default undefined)
+ * If left/rigth is set, shape.x/shape.cx/position will not be used.
+ * If top/bottom is set, shape.y/shape.cy/position will not be used.
+ * This mechanism is useful when you want to position a group/element
+ * against the right side or the center of this container.
+ */
+Partial> {
+
+/**
+ * element type, mandatory.
+ */
+type: string;
+
+id?: OptionId;
+
+// Only internal usage. Use specified value does NOT make sense.
+parentId?: OptionId;
+parentOption: GraphicComponentElementOption;
+children: GraphicComponentElementOption[];
+hv: [boolean, boolean];
+
+/**
+ * bounding: (enum: 'all' (default) | 'raw')
+ * Specify how to calculate boundingRect when locating.
+ * 'all': Get uioned and transformed boundingRect
+ * from both itself and its descendants.
+ * This mode simplies confining a group of elements in the bounding
+ * of their ancester container (e.g., using 'right: 0').
+ * 'raw': Only use the boundingRect of itself and before transformed.
+ * This mode is similar to css behavior, which is useful when you
+ * want an element to be able to overflow its container. (Consider
+ * a rotated circle needs to be located in a corner.)
+ */
+bounding?: 'all'
+
+/**
+ * info: custom info. enables user to mount some info on elements and use 
them
+ * in event handlers. Update them only when user specified, otherwise, 
remain.
+ */
+info?: GraphicExtraElementInfo;
+
+// TODO: textContent, textConfig ?
+// `false` means remove the textContent ???
+// textContent?: CustomTextOption | false;
+// textConfig?:
+
+$action?: 'merge' | 'replace' | 'remove';
+};
+interface GraphicComponentDisplayableOption extends
+GraphicComponentBaseElementOption,
+Partial> {
+
+style?: ZRStyleProps;
+
+// TODO: states?
+// emphasis?: GraphicComponentDisplayableOptionOnState;
+// blur?: GraphicComponentDisplayableOptionOnState;
+// select?: GraphicComponentDisplayableOptionOnState;
+}
+// TODO: states?
+// interface GraphicComponentDisplayableOptionOnState extends Partial> {
+// style?: ZRStyleProps;
+// }
+interface GraphicComponentGroupOption extends 
GraphicComponentBaseElementOption {
+type: 'group';
+
+/**
+ * width/height: (can only be pixel value, default 0)
+ * Only be used to specify contianer(group) size, if needed. And
+ * can not be percentage value (like '33%'). See the reason in the
+ * layout algorithm below.
+ */
+width?: number;
+height?: number;
+
+// TODO: Can only set focus, blur on the root element.
+// children: Omit[];
+children: GraphicComponentElementOption[];
+}
+interface GraphicComponentZRPathOption extends 
GraphicComponentDisplayableOption {
+shape?: PathProps['shape'];
+}
+interface GraphicComponentImageOption extends 
GraphicComponentDisplayableOption {
+type: 'image';
+style?: 

[incubator-echarts] 01/05: ts: add type to graphic component.

2020-10-27 Thread sushuang
This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git

commit 23a809ddd897c9042fa1b9f29f6cf9c65341e72d
Author: 100pah 
AuthorDate: Tue Oct 27 02:17:11 2020 +0800

ts: add type to graphic component.
---
 src/component/graphic.ts | 470 +++
 src/util/layout.ts   |   2 +-
 2 files changed, 309 insertions(+), 163 deletions(-)

diff --git a/src/component/graphic.ts b/src/component/graphic.ts
index 430e81c..fd6ac7d 100644
--- a/src/component/graphic.ts
+++ b/src/component/graphic.ts
@@ -17,7 +17,6 @@
 * under the License.
 */
 
-// @ts-nocheck
 
 import * as echarts from '../echarts';
 import * as zrUtil from 'zrender/src/core/util';
@@ -26,25 +25,194 @@ import * as modelUtil from '../util/model';
 import * as graphicUtil from '../util/graphic';
 import * as layoutUtil from '../util/layout';
 import {parsePercent} from '../util/number';
+import { ComponentOption, BoxLayoutOptionMixin, Dictionary, ZRStyleProps, 
OptionId } from '../util/types';
+import ComponentModel from '../model/Component';
+import Element from 'zrender/src/Element';
+import Displayable from 'zrender/src/graphic/Displayable';
+import { PathProps } from 'zrender/src/graphic/Path';
+import { ImageStyleProps } from 'zrender/src/graphic/Image';
+import GlobalModel from '../model/Global';
+import ComponentView from '../view/Component';
+import ExtensionAPI from '../ExtensionAPI';
+import { getECData } from '../util/innerStore';
+
+
+const TRANSFORM_PROPS = {
+x: 1,
+y: 1,
+scaleX: 1,
+scaleY: 1,
+originX: 1,
+originY: 1,
+rotation: 1
+} as const;
+type TransformProp = keyof typeof TRANSFORM_PROPS;
+
+interface GraphicComponentBaseElementOption extends
+Partial>,
+/**
+ * left/right/top/bottom: (like 12, '22%', 'center', default undefined)
+ * If left/rigth is set, shape.x/shape.cx/position will not be used.
+ * If top/bottom is set, shape.y/shape.cy/position will not be used.
+ * This mechanism is useful when you want to position a group/element
+ * against the right side or the center of this container.
+ */
+Partial> {
+
+/**
+ * element type, mandatory.
+ */
+type: string;
+
+id?: OptionId;
+
+// Only internal usage. Use specified value does NOT make sense.
+parentId?: OptionId;
+parentOption: GraphicComponentElementOption;
+children: GraphicComponentElementOption[];
+hv: [boolean, boolean];
+
+/**
+ * bounding: (enum: 'all' (default) | 'raw')
+ * Specify how to calculate boundingRect when locating.
+ * 'all': Get uioned and transformed boundingRect
+ * from both itself and its descendants.
+ * This mode simplies confining a group of elements in the bounding
+ * of their ancester container (e.g., using 'right: 0').
+ * 'raw': Only use the boundingRect of itself and before transformed.
+ * This mode is similar to css behavior, which is useful when you
+ * want an element to be able to overflow its container. (Consider
+ * a rotated circle needs to be located in a corner.)
+ */
+bounding?: 'all'
+
+/**
+ * info: custom info. enables user to mount some info on elements and use 
them
+ * in event handlers. Update them only when user specified, otherwise, 
remain.
+ */
+info?: GraphicExtraElementInfo;
+
+// TODO: textContent, textConfig ?
+// `false` means remove the textContent ???
+// textContent?: CustomTextOption | false;
+// textConfig?:
+
+$action?: 'merge' | 'replace' | 'remove';
+};
+interface GraphicComponentDisplayableOption extends
+GraphicComponentBaseElementOption,
+Partial> {
+
+style?: ZRStyleProps;
+
+// TODO: states?
+// emphasis?: GraphicComponentDisplayableOptionOnState;
+// blur?: GraphicComponentDisplayableOptionOnState;
+// select?: GraphicComponentDisplayableOptionOnState;
+}
+// TODO: states?
+// interface GraphicComponentDisplayableOptionOnState extends Partial> {
+// style?: ZRStyleProps;
+// }
+interface GraphicComponentGroupOption extends 
GraphicComponentBaseElementOption {
+type: 'group';
+
+/**
+ * width/height: (can only be pixel value, default 0)
+ * Only be used to specify contianer(group) size, if needed. And
+ * can not be percentage value (like '33%'). See the reason in the
+ * layout algorithm below.
+ */
+width?: number;
+height?: number;
+
+// TODO: Can only set focus, blur on the root element.
+// children: Omit[];
+children: GraphicComponentElementOption[];
+}
+interface GraphicComponentZRPathOption extends 
GraphicComponentDisplayableOption {
+shape?: PathProps['shape'];
+}
+interface GraphicComponentImageOption extends 
GraphicComponentDisplayableOption {
+type: 'image';
+style?: