@bixi/label v9.9.9-beta6

• 在线体验
• 代码仓库

• 快速开始
• 设计理念
• 标注控制器
• 标注组件

快速开始

##1. 安装依赖

yarn add @bixi/label

2. 修改 angular.json

{
  "architect": {
    "build": {
      "options": {
        "assets": [
          {
            "glob": "**/*",
            "input": "node_modules/@bixi/label/engine",
            "output": "/bixi-label-engine"
          }
        ]
      }
    }    
  }
}

3. 模块注册

import { BixiLabelModule } from '@bixi/label';

@NgModule({
  imports: [
    BixiLabelModule,
  ]
})
export class SharedModule { }

4. 组件使用

示例代码

设计理念

Label Engine

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

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

Label Hub

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

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 就像是一个邮局，它可以告诉你有哪些事件发生，也允许你主动往它上面投递事件等待引擎处理，比如

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 的功能

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);
  }
}

但如果像上面这样仅仅是打印日志的话，那么你可以不必这么舍近求远，我们提供了开发模式，丰富的日志可以帮助你快速排查问题，而它仅需要一行配置

hub = new LabelHub({
  dev: true
});

<bixi-label-core />

这是标注引擎的 Angular 封装，同时支持文本和表格标注

标注控制器

构造参数

成员属性

成员方法

类型定义

你可以在构建产物中获取类型，以上所有类型均在 @bixi/label 根级目录有导出

import { ILabel } from '@bixi/label';

const labels = ILabel[];

或者直接在源码中查看类型定义

标注组件

这是标注引擎的 Angular 封装，同时支持文本和表格标注

bixi-label-core

Type

interface IClickMetadata {
  altKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  shiftKey: boolean;
  which: number;
}

export interface IClickOutsideEvent {
  position: {
    top: number;
    left: number;
  };
  metadata: IClickMetadata;
}

interface ILabelsEvent {
  data: ILabel[];
  position: {
    top: number;
    left: number;
    width: number;
    height: number;
  };
}

export type ILabelingEvent = ILabelsEvent;
export type IDeleteLabelsEvent = ILabelsEvent;
export type IHoverInLabelsEvent = ILabelsEvent;
export interface IClickLabelsEvent extends ILabelsEvent {
  metadata: IClickMetadata;
}