iModel.js Front-End简介

iModel.js应用程序的前端主要与数据显示和用户交互有关，其以TypeScript实现。前端代码始终在网络浏览器中运行，通过向后端发出请求来访问iModel中的数据。

支持在浏览器网页应用，桌面应用，移动应用。

应用程序的前端脚本需要@ bentley / imodeljs-frontend npm软件包。通用软件包也将是必需的。这些软件包提供前端所需的以下功能：

登录并获取AccessToken。
打开与iModel的“连接”，类似于数据库连接。
通过IModelApp类进行前端应用程序的管理。
字符串和用户界面的本地化工作。
编写用于处理用户事件的工具。通过RpcInterface与后端通信。
显示iModel的视图。
在iModels上执行ECSQL查询。
存储应用程序，项目和iModel的设置。
实施扩展。

iModel.js Front-End核心接口

Front-End主要包含2个核心接口：IModelApp和IModelConnection。其中，IModelApp主要负责前端界面管理与交互工作，IModelConnection主要负责与后端数据的请求与查询等工作。

IModelApp

IModelApp如下所示:

IModelConnection

IModelConnection如下所示:

其中IModelConnection是一个抽象类，我们根据需要使用其适当的子类。

注意：IModelConnection类层次与后端的IModelDb类层次是相互对应的。

其中，IModelConnection包含如下数据类接口:

严格而言，这里的数据集合不是指真正意义上的数据集合，因为其只是包含了操作查询数据的API，而不是包含真正的数据。不过，其概念上是一致的，因此，在此处使用集合一词。

关于ViewManager

ViewManager是iModel.js Front-End最重要的类之一，大部分开发工作都是围绕着该类展开，有关更多了解，请参考前端WebGL的渲染帧循环。

ViewManager包含已打开视图的列表以及当前选定的视图，其还提供有关视图打开/关闭/挂起/继续的更多的操作，有关更多了解，请参考前端API文档，此处，只是简单介绍一下相关的数据结构。

从上图可以清晰的看出，ViewManager包含一个Viewport（视口）集合和一个Decorator（集合），其中每个Decorator会应用于所有的Viewport，Decorator是一个抽象类，更多的时候是由用户根据需要去实现其子类，然后将子类对象添加到ViewManager中，从而在下一帧循环中，出现在每个视口中。

每个Viewport（视口）都包含一个ViewState，ViewState包含Viewport显示的内容，样式等诸多内容，例如，该视口要显示的模型，背景色，网格，阴影等设置。我们一般通过Viewport提供的API设置其视口的属性（这些动作将转发给Viewport），而不是直接操作ViewState，以保证视口内容的同步。注意，ViewState类对应于后端的ViewDefinition。

其中ViewState是一个抽象类，将会根据视口内容2D，3D等而选择使用合适的子类。

其中ViewState类层次如下所示：

类	描述
ViewState	[[ViewDefinition]]元素的前端状态。 ViewState通常与[[Viewport]]关联以在屏幕上显示视图的内容。
ViewState2d	定义单个2D模型的视图状态。
ViewState3d	定义3D模型视图的状态。
SpatialViewState	定义一个或多个SpatialModels的视图。查看的模型列表存储在ModelSelector中。
DrawingViewState	DrawingModel的视图
SheetViewState	SheetModel的视图
OrthographicViewState	定义使用平行正投影在图像平面上显示几何图形的空间视图。