Daily 1123

package.json

@@ -56,6 +56,7 @@
   "dependencies": {
     "tslib": "^1.10.0",
     "@antv/util": "~2.0.0",
+    "@antv/dom-util": "~2.0.1",
     "@antv/g-base": "~0.1.0-beta.2",
     "@antv/matrix-util": "~2.0.4"
   },

src/abstract/component.ts

@@ -29,21 +29,6 @@ abstract class Component<T extends ComponentCfg = ComponentCfg> extends Base {
     };
   }
 
-  /**
-   * 绘制组件
-   */
-  public render() {}
-
-  /**
-   * 显示
-   */
-  public show() {}
-
-  /**
-   * 隐藏
-   */
-  public hide() {}
-
   /**
    * 清理组件的内容，一般配合 render 使用
    * @example
@@ -72,6 +57,23 @@ abstract class Component<T extends ComponentCfg = ComponentCfg> extends Base {
     });
   }
 
+  public abstract getBBox();
+
+  /**
+   * 绘制组件
+   */
+  protected abstract render();
+
+  /**
+   * 显示
+   */
+  protected abstract show();
+
+  /**
+   * 隐藏
+   */
+  protected abstract hide();
+
   /**
    * @protected
    * 初始化，用于具体的组件继承

src/abstract/group-component.ts

@@ -46,6 +46,10 @@ abstract class GroupComponent<T extends GroupComponentCfg = GroupComponentCfg> e
     return this.get('shapesMap')[id];
   }
 
+  public getContainer(): IGroup {
+    return this.get('container') as IGroup;
+  }
+
   public update(cfg: Partial<T>) {
     super.update(cfg);
     const group = this.get('group');
@@ -66,11 +70,13 @@ abstract class GroupComponent<T extends GroupComponentCfg = GroupComponentCfg> e
   public show() {
     const group = this.get('group');
     group.show();
+    this.set('visible', true);
   }
 
   public hide() {
     const group = this.get('group');
     group.hide();
+    this.set('visible', false);
   }
 
   public destroy() {
@@ -96,6 +102,7 @@ abstract class GroupComponent<T extends GroupComponentCfg = GroupComponentCfg> e
         id: this.get('id'),
         name: this.get('name'),
         capture: this.get('capture'),
+        visible: this.get('visible'),
       })
     );
   }

src/abstract/html-component.ts

@@ -1,4 +1,7 @@
+import { createDom } from '@antv/dom-util';
+import { isNil, isString } from '@antv/util';
 import { ComponentCfg, HtmlComponentCfg } from '../types';
+import { clearDom } from '../util/util';
 import Component from './component';
 
 abstract class HtmlComponent<T extends ComponentCfg = HtmlComponentCfg> extends Component<T> {
@@ -7,10 +10,16 @@ abstract class HtmlComponent<T extends ComponentCfg = HtmlComponentCfg> extends
     return {
       ...cfg,
       container: null,
+      containerTpl: '<div></div>',
+      parent: null,
     };
     return cfg;
   }
 
+  public getContainer(): HTMLElement {
+    return this.get('container') as HTMLElement;
+  }
+
   /**
    * 显示组件
    */
@@ -26,41 +35,98 @@ abstract class HtmlComponent<T extends ComponentCfg = HtmlComponentCfg> extends
     container.style.display = 'none';
   }
 
+  public getBBox() {
+    const container = this.getContainer();
+    const x = parseFloat(container.style.left) || 0;
+    const y = parseFloat(container.style.top) || 0;
+    return {
+      x,
+      y,
+      width: container.clientWidth,
+      height: container.clientHeight,
+    };
+  }
+
+  public clear() {
+    const container = this.get('container');
+    clearDom(container);
+  }
+
   public destroy() {
     this.removeEvent();
     this.removeDom();
     super.destroy();
   }
+
   /**
    * @protected
    * 复写 init，主要是初始化 DOM 和事件
    */
   protected init() {
-    this.initDom();
+    this.initContainer();
     this.initEvent();
+    this.initVisible();
+  }
+
+  protected initVisible() {
+    if (!this.get('visible')) {
+      // 设置初始显示状态
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  protected initContainer() {
+    let container = this.get('container');
+    if (isNil(container)) {
+      // 未指定 container 则创建
+      container = this.createDom();
+      let parent = this.get('parent');
+      if (isString(parent)) {
+        parent = document.getElementById(parent);
+        this.set('parent', parent);
+      }
+      parent.appendChild(container);
+      this.set('container', container);
+    } else if (isString(container)) {
+      // 用户传入的 id, 作为 container
+      container = document.getElementById(container);
+      this.set('container', container);
+    } // else container 是 DOM
+    if (!this.get('parent')) {
+      this.set('parent', container.parentNode);
+    }
   }
+
   /**
    * @protected
    */
-  protected abstract initDom();
+  protected createDom() {
+    const containerTpl = this.get('containerTpl');
+    return createDom(containerTpl);
+  }
 
   /**
    * @protected
    * 初始化事件
    */
-  protected abstract initEvent();
+  protected initEvent() {}
 
   /**
    * @protected
    * 清理 DOM
    */
-  protected abstract removeDom();
+  protected removeDom() {
+    const container = this.get('container');
+    container && container.parentNode.removeChild(container);
+  }
 
   /**
    * @protected
    * 清理事件
    */
-  protected abstract removeEvent();
+  protected removeEvent() {}
 }
 
 export default HtmlComponent;

src/intefaces.ts

@@ -1,4 +1,6 @@
+import { Point } from '@antv/g-base/lib/types';
 import { ListItem } from './types';
+
 export interface IList {
   getItems(): ListItem[];
   setItems(items: ListItem[]);
@@ -9,7 +11,7 @@ export interface IList {
 
 export interface IPointLocation {
   getLocationPoint();
-  setLocationPoint(point);
+  setLocationPoint(point: Point);
 }
 
 export interface IRangeLocation {

src/legend/category.ts

@@ -1,6 +1,5 @@
 import { IElement, IGroup } from '@antv/g-base/lib/interfaces';
 import { Point } from '@antv/g-base/lib/types';
-
 import { each, mix } from '@antv/util';
 import GroupComponent from '../abstract/group-component';
 import { IPointLocation } from '../intefaces';

src/tooltip/css_const.ts

@@ -0,0 +1,11 @@
+export default {
+  CONTAINER_CLASS: 'g2-tooltip',
+  TITLE_CLASS: 'g2-tooltip-title',
+  LIST_CLASS: 'g2-tooltip-list',
+  LIST_ITEM_CLASS: 'g2-tooltip-list-item',
+  MARKER_CLASS: 'g2-tooltip-marker',
+  VALUE_CLASS: 'g2-tooltip-value',
+  NAME_CLASS: 'g2-tooltip-name',
+  CROSSHAIR_X: 'g2-tooltip-crosshair-x',
+  CROSSHAIR_Y: 'g2-tooltip-crosshair-y',
+};