Container

容器

容器代表 Mission Component 可用于布局的地方。容器一共分为 4 个种类。

MainPage 代表 Package 的首页，也就是我们进入 Mission 之后就会看到的 FeatureList 页面:

上面红色线框部分即为可用于布局的区域。通常在 Package 的编写中会被用于：

<mainpage>
  <featurelist>
    ...
  </featurelist>
</mainpage>

import { MainPage } from 'mesh-envoy-tag'

const contianer = (
  <MainPage>
    ...
  </MainPage>
)

SettingPage 为普通的设置页：

上面红色线框部分即为可用于布局的区域。通常在 Package 的编写中会被广泛用于全屏设置的场景：

<settingpage>
  <waypointmap>
    ...
  </waypointmap>
  <buttongroup>
    ...
  </buttongroup>
</settingpage>

import { SettingPage } from 'mesh-envoy-tag'

const contianer = (
  <SettingPage>
    ...
  </SettingPage>
)

VideoPage 为带图传的设置页：

红色线框部分即为可用于布局的区域。通常被用于需要实时操控飞机的设置页：

<videopage previewerMode="gimbal">
  <waypointmap>
    ...
  </waypointmap>
  <buttongroup>
    ...
  </buttongroup>
</videopage>

import { VideoPage } from 'mesh-envoy-tag'

const contianer = (
  <VideoPage>
    ...
  </VideoPage>
)

<handlerpage previewerMode="gimbal">
  <handlerlist>
    ...
  </handlerlist>
</handlerpage>

import { HandlerPage } from 'mesh-envoy-tag'

const contianer = (
  <HandlerPage>
    ...
  </HandlerPage>
)

名称	作用	可否更改	取值
previewerMode	此属性的设置只针对VideoPage，HandlerPage 这两个带有图传控件的页面，它指定了图传控件的交互方式：	0	gimbal：允许云台操作 activeTrack:允许跟踪操作 tapFly:允许指点飞行
type	声明是否进入编辑模式，针对 `activeTrack` 以及 `tapFly`	0	edit
targetRect	与 `activeTrack` 配套使用，指定目标选择框的位置	1	`{ x: 0.2, y: 0.3, weight: 0.5, height: 0.5 }`
targetPoint	与 `tapFly` 配套使用，指定飞行方向	1	`{x: 0.5, y: 0.5}`
actionControlType	指定 ActionControl 的种类	0	camera: 只显示相机组件; gimbal: 只显示云台组件; all: 以上都显示; none: 默认值，不显示 ActionControl;

事件	触发条件	附带参数
change	`activeTrack` 的 `targetRect` 或者 `tapFly` 的 `targetPoint` 被改变时，详见下面 Example	targetRect/targetPoint

下面代码指定了一个 VideoPage，并且用户可以在图传上选框，框体的更改会被传递到 Package 中：

<videopage previewermode="activetrack" type="edit" targetRect={this.state.rect} onChange={xxx}>
</videopage>

而下面的代码则指定了一个 HandlerPage，触发了 ActiveTrack 任务之后，图传上的框体会随着物体的移动而更改。在 Mission 被停止后，targetRect 的最新位置会被传回 Package：

<videopage previewermode="activetrack" targetRect={this.state.rect} onChange={xxx}>
</videopage>