[incubator-echarts] 01/05: ts: add type to graphic component.
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.
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?: