Merge pull request #219 from antvis/fix-issue-216

fix: add typescript definitions for shape type

packages/g-base/src/abstract/container.ts

@@ -1,5 +1,5 @@
 import { IBase, IContainer, ICtor, IShape, IGroup, IElement, ICanvas } from '../interfaces';
-import { BBox } from '../types';
+import { ShapeBase, BBox } from '../types';
 import Timeline from '../animate/timeline';
 import Element from './element';
 import { isFunction, isObject, each, removeFromArray, upperFirst } from '../util/util';
@@ -190,7 +190,7 @@ abstract class Container extends Element implements IContainer {
     return box;
   }
 
-  abstract getShapeBase(): ICtor<IShape>;
+  abstract getShapeBase(): ShapeBase;
   abstract getGroupBase(): ICtor<IGroup>;
 
   getDefaultCfg() {

packages/g-base/src/interfaces.ts

@@ -1,4 +1,15 @@
-import { ShapeCfg, GroupCfg, ClipCfg, Point, ChangeType, AnimateCfg, ElementAttrs, OnFrame, BBox } from './types';
+import {
+  ShapeCfg,
+  GroupCfg,
+  ClipCfg,
+  Point,
+  ChangeType,
+  AnimateCfg,
+  ElementAttrs,
+  OnFrame,
+  ShapeBase,
+  BBox,
+} from './types';
 
 export interface ICtor<T> {
   new (cfg: any): T;
@@ -285,7 +296,7 @@ export interface IContainer extends IBase {
    * 获取 Shape 的基类
    * @return {IShape} Shape 的基类，用作工厂方法来获取类实例
    */
-  getShapeBase(): ICtor<IShape>;
+  getShapeBase(): ShapeBase;
 
   /**
    * 获取 Group 的基类，用于添加默认的 Group

packages/g-base/src/types.ts

@@ -1,3 +1,5 @@
+import { IShape, ICtor } from './interfaces';
+
 export type BBox = {
   x: number;
   y: number;
@@ -175,6 +177,10 @@ export type Animation = AnimateCfg & {
   _pauseTime?: number;
 };
 
+export type ShapeBase = {
+  [key: string]: ICtor<IShape>;
+};
+
 type A = ['a' | 'A', number, number, number, number, number, number, number];
 type C = ['c' | 'C', number, number, number, number, number, number];
 type O = ['o' | 'O', number, number];

packages/g-canvas/src/canvas.ts

@@ -3,7 +3,7 @@ import { ChangeType } from '@antv/g-base/lib/types';
 import { IElement } from './interfaces';
 import { Region } from './types';
 import EventController from '@antv/g-base/lib/event/event-contoller';
-import Shape from './shape';
+import * as Shape from './shape';
 import Group from './group';
 import { drawChildren, getRefreshRegion } from './util/draw';
 import { getPixelRatio, each, mergeRegion, requestAnimationFrame, clearAnimationFrame } from './util/util';

packages/g-canvas/src/group.ts

@@ -2,7 +2,8 @@ import { AbstractGroup } from '@antv/g-base';
 import { ChangeType } from '@antv/g-base/lib/types';
 import { IElement } from './interfaces';
 import { Region } from './types';
-import Shape from './shape';
+import ShapeBase from './shape/base';
+import * as Shape from './shape';
 import { each, mergeRegion } from './util/util';
 import { applyAttrsToContext, drawChildren, refreshElement } from './util/draw';
 
@@ -24,7 +25,7 @@ class Group extends AbstractGroup {
   }
 
   // 同 shape 中的方法重复了
-  _applyClip(context, clip: Shape) {
+  _applyClip(context, clip: ShapeBase) {
     if (clip) {
       clip.createPath(context);
       context.clip();
@@ -35,7 +36,7 @@ class Group extends AbstractGroup {
     const children = this.getChildren() as IElement[];
     if (children.length) {
       context.save();
-      this._applyClip(context, this.getClip() as Shape);
+      this._applyClip(context, this.getClip() as ShapeBase);
       // group 上的矩阵和属性也会应用到上下文上
       applyAttrsToContext(context, this);
       drawChildren(context, children, region);

packages/g-canvas/src/index.ts

@@ -1,7 +1,8 @@
+import * as Shape from './shape';
 const pkg = require('../package.json');
 
 export const version = pkg.version;
 export { Event } from '@antv/g-base';
 export { default as Canvas } from './canvas';
 export { default as Group } from './group';
-export { default as Shape } from './shape';
+export { Shape };

packages/g-canvas/src/shape/index.ts

@@ -1,24 +1,10 @@
-import Shape from './base';
-import Circle from './circle';
-import Ellipse from './ellipse';
-import Image from './image';
-import Line from './line';
-import Marker from './marker';
-import Path from './path';
-import Polygon from './polygon';
-import Polyline from './polyline';
-import Rect from './rect';
-import Text from './text';
-
-Shape['Circle'] = Circle;
-Shape['Ellipse'] = Ellipse;
-Shape['Image'] = Image;
-Shape['Line'] = Line;
-Shape['Marker'] = Marker;
-Shape['Path'] = Path;
-Shape['Polygon'] = Polygon;
-Shape['Polyline'] = Polyline;
-Shape['Rect'] = Rect;
-Shape['Text'] = Text;
-
-export default Shape;
+export { default as Circle } from './circle';
+export { default as Ellipse } from './ellipse';
+export { default as Image } from './image';
+export { default as Line } from './line';
+export { default as Marker } from './marker';
+export { default as Path } from './path';
+export { default as Polygon } from './polygon';
+export { default as Polyline } from './polyline';
+export { default as Rect } from './rect';
+export { default as Text } from './text';

packages/g-canvas/tests/unit/shape/index-spec.js

@@ -1,22 +1,17 @@
 import { expect } from 'chai';
-import Shape from '../../../src/shape';
+import { Circle, Ellipse, Image, Line, Marker, Path, Polygon, Polyline, Rect, Text } from '../../../src/shape';
 
 describe('Canvas Shape index', () => {
-  it('not undefined', () => {
-    const shapeTypeList = [
-      'Circle',
-      'Ellipse',
-      'Image',
-      'Line',
-      'Marker',
-      'Path',
-      'Polygon',
-      'Polyline',
-      'Rect',
-      'Text',
-    ];
-    shapeTypeList.forEach((shapeType) => {
-      expect(Shape[shapeType]).not.eql(undefined);
-    });
+  it('Every shape is not undefined', () => {
+    expect(Circle).not.eqls(undefined);
+    expect(Ellipse).not.eqls(undefined);
+    expect(Image).not.eqls(undefined);
+    expect(Line).not.eqls(undefined);
+    expect(Marker).not.eqls(undefined);
+    expect(Path).not.eqls(undefined);
+    expect(Polygon).not.eqls(undefined);
+    expect(Polyline).not.eqls(undefined);
+    expect(Rect).not.eqls(undefined);
+    expect(Text).not.eqls(undefined);
   });
 });

packages/g-svg/src/canvas.ts

@@ -4,7 +4,7 @@ import { IElement } from './interfaces';
 import { applyClipChildren, drawPathChildren, refreshElement } from './util/draw';
 import { setClip } from './util/svg';
 import EventController from '@antv/g-base/lib/event/event-contoller';
-import Shape from './shape';
+import * as Shape from './shape';
 import Group from './group';
 import Defs from './defs';
 

packages/g-svg/src/group.ts

@@ -2,7 +2,7 @@ import { AbstractGroup } from '@antv/g-base';
 import { ChangeType } from '@antv/g-base/lib/types';
 import { each } from '@antv/util';
 import { IElement, IGroup } from './interfaces';
-import Shape from './shape';
+import * as Shape from './shape';
 import Defs from './defs';
 import { drawChildren, applyClipChildren, drawPathChildren, refreshElement } from './util/draw';
 import { setClip } from './util/svg';

packages/g-svg/src/index.ts

@@ -1,7 +1,9 @@
+import * as Shape from './shape';
+
 const pkg = require('../package.json');
 
 export const version = pkg.version;
 export { Event } from '@antv/g-base';
 export { default as Canvas } from './canvas';
 export { default as Group } from './group';
-export { default as Shape } from './shape';
+export { Shape };

packages/g-svg/src/shape/index.ts

@@ -1,26 +1,11 @@
-import Shape from './base';
-import Circle from './circle';
-import Dom from './dom';
-import Ellipse from './ellipse';
-import Image from './image';
-import Line from './line';
-import Marker from './marker';
-import Path from './path';
-import Polygon from './polygon';
-import Polyline from './polyline';
-import Rect from './rect';
-import Text from './text';
-
-Shape['Circle'] = Circle;
-Shape['Dom'] = Dom;
-Shape['Ellipse'] = Ellipse;
-Shape['Image'] = Image;
-Shape['Line'] = Line;
-Shape['Marker'] = Marker;
-Shape['Path'] = Path;
-Shape['Polygon'] = Polygon;
-Shape['Polyline'] = Polyline;
-Shape['Rect'] = Rect;
-Shape['Text'] = Text;
-
-export default Shape;
+export { default as Circle } from './circle';
+export { default as Dom } from './dom';
+export { default as Ellipse } from './ellipse';
+export { default as Image } from './image';
+export { default as Line } from './line';
+export { default as Marker } from './marker';
+export { default as Path } from './path';
+export { default as Polygon } from './polygon';
+export { default as Polyline } from './polyline';
+export { default as Rect } from './rect';
+export { default as Text } from './text';

packages/g-svg/tests/unit/shape/index-spec.js

@@ -1,23 +1,18 @@
 import { expect } from 'chai';
-import Shape from '../../../src/shape';
+import { Circle, Dom, Ellipse, Image, Line, Marker, Path, Polygon, Polyline, Rect, Text } from '../../../src/shape';
 
 describe('SVG Shape index', () => {
-  it('not undefined', () => {
-    const shapeTypeList = [
-      'Circle',
-      'Dom',
-      'Ellipse',
-      'Image',
-      'Line',
-      'Marker',
-      'Path',
-      'Polygon',
-      'Polyline',
-      'Rect',
-      'Text',
-    ];
-    shapeTypeList.forEach((shapeType) => {
-      expect(Shape[shapeType]).not.eql(undefined);
-    });
+  it('Every shape is not undefined', () => {
+    expect(Circle).not.eqls(undefined);
+    expect(Dom).not.eqls(undefined);
+    expect(Ellipse).not.eqls(undefined);
+    expect(Image).not.eqls(undefined);
+    expect(Line).not.eqls(undefined);
+    expect(Marker).not.eqls(undefined);
+    expect(Path).not.eqls(undefined);
+    expect(Polygon).not.eqls(undefined);
+    expect(Polyline).not.eqls(undefined);
+    expect(Rect).not.eqls(undefined);
+    expect(Text).not.eqls(undefined);
   });
 });