bixi/packages/label/docs/design.zh-CN.md

企业级中后台前端解决方案

---
type: Guide
title:
  en-US: Design
  zh-CN: 设计思路
order: 10
---

<img height="500px" src="./assets/img/infra.jpeg"/>

#### `Label Engine`
标注引擎(通过 iframe 引入), 只负责单纯做两件的事：

1. 标注图层的渲染 
2. 标注事件的监听

#### `Label Hub`

在使用标注器组件时候你需要先实例化一个标注控制器，然后将其传入标注组件，之后标注的所有事件都将会被它所接管，就像这样

```  typescript
import { LabelHub } from '@bixi/label';

@Component({
  template: `
  <bixi-label-core
    engine="./source/index.html"
    [hub]="hub">
  </bixi-label-core>`
})
export class LabelHubDemoComponent{
  hub = new LabelHub({
    dev: true,
  });
}
```
对于业务组件而言, `LabelHub` 就像是一个邮局，它可以告诉你有哪些事件发生，也允许你主动往它上面投递事件等待引擎处理，比如

```typescript
export class LabelHubDemoComponent{
  hub = new LabelHub({
    dev: true,
  });

  ngOnInit() {
    this.hub.pagination$.subscribe(({ pageNumber }) => {
      console.warn('内部更改了页码', pageNumber);
    })
  }

  pageChange() {
    // 业务组件主动更改页码
    this.hub.setPagination({
      pageNumber: 2
    });
  }
}
```

`LabelHub` 对修改是封闭的，但是对扩展是完全开放的，我们将核心数据都实现了成员保护，只有当你需要完全定制 Hub 的时候，你可以继承它然后扩展它，就像下面这样可以实现 Hook 的功能

``` typescript
import { LabelHub } from '@bixi/label';

export class MyHub extends LabelHub {
  constructor(options) {
    super(options);
  }

  setZoom(zoom) {
    console.warn('set zoom1', zoom);
    this._api.setZoom(zoom);
    console.warn('set zoom2', zoom);
  }
}
```

但如果像上面这样仅仅是打印日志的话，那么你可以不必这么舍近求远，我们提供了开发模式，丰富的日志可以帮助你快速排查问题，而它仅需要一行配置
``` typescript
hub = new LabelHub({
  dev: true
});
```

<img height="360px" src="./assets/img/label-dev.jpg"/>


[查看更多](/label/label-hub/zh)


#### `<bixi-label-core />`
这是标注引擎的 Angular 封装，同时支持文本和表格标注