GLSP 阅读笔记（一）

什么是GLSP

GLSP（The Graphical Language Server Platform ）是用来构建基于web的图形编辑器的client-server框架。它跟LSP（Language Server Protocol）的概念十分相似，不同的是LSP是针对文本语言和文本编辑器的协议，GLSP是针对图形模型和图形编辑器的构建框架。并且，图形编辑器可以很容易的被应用到如VS Code，Eclipse Theia，Eclipse RCP或者是web app中去。

服务端和客户端？

The GLSP server：加载源模型（如JSON文件，EMF模型…）并且定义如何将源模型转换成图形模型。

The GLSP client:接收图形模型作为输入并渲染它。

如何上手？

GLSP根据不同的技术和平台的选择，给出了一些基本的工程模版，因此上手GLSP是很方便和简单的了：）

1. Java – EMF – Theia
2. Node – Custom JSON – Theia
3. Node – Custom JSON – VS Code
4. Java – EMF – Eclipse

其中，Java和Node是服务端可选择的编程语言，EMF和Custom JSON是源模型可选择的格式，Theia、VS Code和Eclipse是客户端可选择的平台。

源模型

源模型（source model）里面的数据记录着将被展示的图形信息，并且用户对图形界面进行修改时，源模型将会随之被修改。GLSP服务端并没有对源模型的格式做任何限制，因此源模型可以是EMF模型，也可以是JSON文件或者是数据库等等。因为GLSP服务端可以定义如何加载源模型，怎么将它转换成图形模型（graphical model）和如何在用户编辑图片时对源模型进行相应的操作。

因此，GLSP server 需要提供如下应用：

1. Source model storage: 定义如何加载和存储源模型。
2. Graphical model factory: 定义如何将源模型转换成graphical model
3. Edit operation handlers: 基于用户的操作对源模型进行修改操作。

加载源模型和展示图形的步骤

1. client 发送携带URI或者其它能识别源模型的参数的 RequestModelAction 请求给server
2. sever 通过client发送的认证参数调用 Source model storage 加载源模型
3. server 调用 graphical model factory 将source model 转换成 graphical model
4. server 将生成好的 graphical model 发送给client
5. client 将 graphical model渲染在界面上

用户编辑时的操作流程

1. client 发送一个操作请求给server
2. server 调用 Edit operation handlers，直接对源模型进行修改
3. server 调用 graphical model factory 去生成新的graphical model
4. server 将新生产的 graphical model 发送给client
5. client 根据最新的 graphical model重新渲染

图形模型

图形模型（The graphical model）是图形的序列化描述，并在客户端被渲染。它是客户端和服务器之间的中心通信结构。

server 端将源模型转换成 graphical model，并将它发送给 client 端进行渲染。因此 client 端不需要关心 graphical model 是如何产生的。

Graphical model 结构

graphical model 是由一系列的 elements 和 edges 组成的。每个 element 或者 edge 都有唯一的标识和类型。graphical model 中的元素是树状结构，元素间被定义为父子关系，并且有唯一的root element。在 graphical model 库中有一些公共的类型，如 nodes，ports，lebels，compartments。当然，这些都是可以被扩展的。

• GModelRoot：每一个graphical model 都必须有且仅有一个明确的root
  • GShapeElement：（position 和 size）
    • GNode
    • GPort：通常是node的children，用来连线
    • GLabel：文本标签
    • GCompartment：element group
  • GEdge：用来连线

SModel 和 GModel

SModel：Graphical model on clinet

GModel: Graphical model on server

通常，在GLSP client 端使用 Sprotty 框架来渲染图形，同时 Sprotty 也使用模型代表图形 —— SModel。GLSP 中的 graphical model 是基于SModel构建的，因此，可以看作是 Sprotty 模型的兼容扩展。

GLSP在命名中的约定，client 端对模型元素前加 S 前缀，而server 端的模型元素前加 G 前缀。比如，client 端的 SNode 对应的就是 server 端的 GNode。它们是等价的并且在server和client之间通过JSON-RPC透明的转换。

Graphical Model Factory

以后再说叭：）

Actions & Action Handler

客户端和服务器通过 JSON-RPC 发送action进行双向通信。任何服务、鼠标工具等都可以通过在客户端或服务器上调用action dispatcher 来发出action。

the action dispatcher 在客户端和服务端各存在一个，是负责将动作分派给指定动作处理程序的中央组件。

The dispatcher 区分 notifications 和 request-response action pairs.notifications 不要求应答，是单向通行；而 Request actions 需要等待 corresponding response action.

GLSP 定义了 graphical language server protocol 的标准动作类型。当然，可以添加新的自定义操作类型。

模型验证

source/graphical model的验证规则通常是在GLSP Server端实现，因为只有 server 端拥有底层模型的完备信息。ModelValidation 接口就是用来干这个活的。

具体的以后再写吧！因为，快下班了：）

结尾

浅浅的记录一下吧！

并没有生成什么新的东西，纯纯的就是文档的翻译工！

下一篇就结合代码来介绍GLSP-Theia叭！ ：）

GLSP官方文档