Integration of ELK graph layout algorithms in GLSP Node Server


Keywords
eclipse, graphics, diagram, modeling, visualization, glsp, diagram editor, diagram-editor, graphical-modeling, graphical-models, lsp, lsp-server, node, typescript
Licenses
EPL-2.0/BSD-3-Clause-Attribution
Install
npm install @eclipse-glsp/layout-elk@2.3.0-next.112

Documentation

GLSP Server Build Status

Contains the code for the Typescript-based framework to create GLSP server components. The implementation of this server is aligned with the default Java based GLSP Server.

The server consists of three components:

The main target environment is node, nevertheless, all components are implemented in an ismorphic fashion and also provide an entrypoint to target browser environments (e.g. running the server in a web worker)

Build

Install dependencies and build via

yarn

Only build via

yarn build

Lint packages via

yarn lint

or do all of the above via

yarn all

Testing

Unit tests

To execute all available test suits use:

yarn test

It's also possible to execute and debug a single test file in VSCode/Theia via the File explorer. Simply select a test file (*.spec.ts), then go to the Run & Debug View (Ctrl+Shift+D), select the 'Run current test" launch config and start debugging (Ctrl+F11)

Workflow Diagram Example

The workflow diagram is a consistent example provided by all GLSP components. The example implements a simple flow chart diagram editor with different types of nodes and edges (see screenshot below). The example can be used to try out different GLSP features, as well as several available integrations with IDE platforms (Theia, VSCode, Eclipse, Standalone). As the example is fully open source, you can also use it as a blueprint for a custom implementation of a GLSP diagram editor. See our project website for an overview of the workflow example and all components implementing it.

diagramanimated.mp4

How to start the Workflow Diagram example?

To see the diagram in action, you need to choose and launch one diagram client, see here for an overview of available clients.

Please look at the workflow example guides in the repository linked above to get more information on building and running the respective GLSP clients.

Launch Workflow Example Server

Socket

To launch the server for TCP sockets use:

yarn start

This starts a server that is listening on port 5007 for incoming client requests.

To debug you can use the Debug workflow example GLSP Server launch configuration. To test the server you have to connect a workflow GLSP client that supports JSON-RPC via socket. We recommend to use the client provided by the glsp-integration.

Websocket

To launch the server for WebSockets use:

yarn start:websocket

This starts a server that is listening on the ws://localhost:8081/workflow endpoint for incoming client requests.

To debug you can use the Debug workflow example GLSP Server (Websocket) launch configuration. To test the server you have to connect a workflow GLSP client that supports JSON-RPC via WebSocket. We recommend to use the standalone example provided by glsp-client.

More information

For more information, please visit the Eclipse GLSP Umbrella repository and the Eclipse GLSP Website. If you have questions, please raise them in the discussions and have a look at our communication and support options.