Eclipse Graphical Language Server Platform (GLSP)

https://eclipse.dev/glsp/documentation
Admin
An extensible client-server framework for developing modern, web-based diagram editors. The server...
Tokens:26,432
Snippets:187
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Clone GLSP Examples Repository

Source: https://eclipse.dev/glsp/documentation/gettingstarted

This snippet shows how to clone the GLSP examples repository and navigate to the project templates directory to start a new GLSP project.

```shell
git clone https://github.com/eclipse-glsp/glsp-examples.git
cd glsp-examples/project-templates
```

--------------------------------

### vbox Layout Example (Java)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Java code to create a GLSP compartment using the vbox layout, specifying horizontal alignment for child elements.

```Java
new GCompartmentBuilder()
      .type(DefaultTypes.COMPARTMENT)
      .layout(GConstants.Layout.VBOX)
      .layoutOptions(new GLayoutOptions().hAlign(GConstants.HAlign.CENTER))
      .add(new GCompartmentBuilder()
         .type("icon")
         .build())
      .add(new GLabelBuilder()
         .text("Label")
         .build())
      .build();
   .build();
```

--------------------------------

### hbox Layout Example (Java)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Java code to create a GLSP compartment using the hbox layout, specifying a horizontal gap between child elements.

```Java
new GCompartmentBuilder()
      .type(DefaultTypes.COMPARTMENT)
      .layout(GConstants.Layout.HBOX)
      .layoutOptions(new GLayoutOptions().hGap(15))
      .add(new GCompartmentBuilder()
         .type("icon")
         .build())
      .add(new GLabelBuilder()
         .text("label")
         .build())
      .build();
   .build();
```

--------------------------------

### vbox Layout Example (Node.js)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Node.js code to create a GLSP compartment using the vbox layout, specifying horizontal alignment for child elements.

```Node.js
GCompartment.builder()
  .type("comp")
  .layout("vbox")
  .addLayoutOption("hAlign", "center")
  .add(GCompartment.builder().type("icon").build())
  .add(GLabel.builder().text("Label").build())
  .build();
```

--------------------------------

### Using Custom Layouter in Compartment (Node.js)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Example of how to specify a custom layouter ('myCustomLayout') and its options ('enlargeSizeBy') for a compartment in the GLSP server using Node.js.

```javascript
GCompartment.builder()
  .builder()
  .layout("myCustomLayout")
  .addLayoutOption("enlargeSizeBy", 15)
  .add(GLabel.builder().text("label").build())
  .build();
```

--------------------------------

### hbox Layout Example (Node.js)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Node.js code to create a GLSP compartment using the hbox layout, specifying a horizontal gap between child elements.

```Node.js
GCompartment.builder()
  .type("comp")
  .layout("hbox")
  .addLayoutOption("hGap", 15)
  .add(GCompartment.builder().type("icon").build())
  .add(GLabel.builder().text("label").build())
  .build();
```

--------------------------------

### Using Custom Layouter in Compartment (Java)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Example of how to specify a custom layouter ('myCustomLayout') and its options ('enlargeSizeBy') for a compartment in the GLSP server using Java.

```java
new GCompartmentBuilder()
      .type(DefaultTypes.COMPARTMENT)
      .layout("myCustomLayout")
      .layoutOptions(Map.of("enlargeSizeBy", 15))
      .add(new GLabelBuilder()
         .text("label")
         .build())
      .build();
   .build();
```

--------------------------------

### Node.js SourceModelStorage Implementation Example

Source: https://eclipse.dev/glsp/documentation/sourcemodel

An example of a `MySourceModelStorage` class in Node.js (TypeScript). It includes `loadSourceModel` to fetch data from a URI and `saveSourceModel` to write the model state back to its source.

```TypeScript
@injectable()
export class MySourceModelStorage implements SourceModelStorage {

    @inject(MyModelState)
    protected modelState: MyModelState;

    loadSourceModel(action: RequestModelAction): MaybePromise<void> {
      const uri = action.options!["sourceURI"];
      // load your model from file, EMF, database, etc.
      const model = …;
      // add information needed about your model into the model state
      this.modelState.model=model;
    }

   saveSourceModel(action: SaveModelAction): MaybePromise<void> {
      // get the current version of your model
      const model = this.modelState.model;
      // get the information to know where to store your model
      const uri = this.modelState.sourceUri;

      try {
         // store your model
      } catch (error) {
         throw new GLSPServerError(`Could not load model from file: ${this.modelState.sourceUri}`, error);
      }
   }
}
```

--------------------------------

### Java SourceModelStorage Implementation Example

Source: https://eclipse.dev/glsp/documentation/sourcemodel

A detailed example of a `MySourceModelStorage` class in Java. It implements the `loadSourceModel` method to load data based on `RequestModelAction` options and `saveSourceModel` to persist changes from `GModelState`.

```Java
public class MySourceModelStorage implements SourceModelStorage {

   @Inject
   protected MyModelState modelState;

   @Override
   public void loadSourceModel(final RequestModelAction action) {
      final String uri = MapUtil.getValue(action.options, "sourceURI");
      // load your model from file, EMF, database, etc.
      final YourModel model = …;
      // add information needed about your model into the model state
      modelState.setModel(model);
   }

   @Override
   public void saveSourceModel(final SaveModelAction action) {
      // get the current version of your model
      final YourModel model = modelState.getModel();
      // get the information to know where to store your model
      final String uri = action.getFileUri().get();

      try {
         // store your model
      } catch (IOException e) {
         LOG.error(e);
         throw new GLSPServerException("An error occurred while saving the model.", e);
      }
   }

}
```

--------------------------------

### Node.js GLSP Server: Create Multi-line Comment Node

Source: https://eclipse.dev/glsp/documentation/rendering

Example of creating a parent node and a child node with multi-line text content using `GNode.builder` in a Node.js GLSP server. This mirrors the Java example for client-side rendering.

```TypeScript
const multiLineComment =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n" +
  "Nam at tellus quis lacus auctor congue vel sit amet lectus.\n" +
  "Cras interdum lectus vel enim mollis maximus.";

GNode.builder()
  .type("comment-node-parent")
  .addCssClass("comment-node-parent")
  .size(720, 125)
  .position(point ?? Point.ORIGIN)
  .add(
    GNode.builder()
      .type("comment-node")
      .addArg("text", multiLineComment)
      .build()
  )
  .build();
```

--------------------------------

### Routing Handle View Implementation

Source: https://eclipse.dev/glsp/documentation/rendering

Provides examples for implementing GRoutingHandleView, which renders a circle for routing points on edges, with Java and Node.js GLSP server implementations and configuration.

```Java
new GEdgeBuilder()
      .source(source) // source node element
      .target(target) // target node element
      .addRoutingPoint(GraphUtil.point(0, 100))
      .build();
```

```TypeScript
GEdge.builder()
  .source(source) // source node element
  .target(target) // target node element
  .addRoutingPoint(0, 100)
  .build();
```

```TypeScript
configureModelElement(
  context,
  DefaultTypes.ROUTING_POINT,
  GRoutingHandle,
  GRoutingHandleView
);
```

--------------------------------

### Registering Custom Layouter (TypeScript)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Shows how to register a custom layouter within the GLSP client's dependency injection module. This example rebinds the VBoxLayouter to the custom MyCustomLayouter.

```typescript
const myDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   rebind(VBoxLayouter).to(MyCustomLayouter);
})
```

--------------------------------

### Implement GModelFactory in Java

Source: https://eclipse.dev/glsp/documentation/gmodel

Example implementation of GModelFactory in Java to create GNodes from a list of entities, using GNodeBuilder for fluent construction.

```Java
public class MyModelFactory implements GModelFactory {

   @Inject
   protected MyModelState modelState;

   @Override
   public void createGModel() {

      List<Entity> entities = modelState.getModel().getEntities();

      List<GModelElement> entityNodes = entities.stream().map(entity -> //
      new GNodeBuilder("node:entity")
         .layout("vbox")
         .add(new GLabelBuilder()
            .text(entity.getName())
            .build())
         .build())
         .collect(Collectors.toList());

      GGraph newModel = new GGraphBuilder()
         .id("entity-graph")
         .addAll(entityNodes)
         .build();

      modelState.updateRoot(newModel);
   }
}
```

--------------------------------

### Dispatch Request Action (Blocking)

Source: https://eclipse.dev/glsp/documentation/actionhandler

Example of dispatching a GLSP request action in a blocking manner using `IActionDispatcher`. It awaits and handles the response action.

```TypeScript
@inject(TYPES.IActionDispatcher) protected actionDispatcher: GLSPActionDispatcher;
…
const response = await this.actionDispatcher.request(MyCustomRequestAction.create({ additionalInformation: "info" }));
// response is of type MyCustomResponseAction

```

--------------------------------

### Implement GModelFactory in Node.js

Source: https://eclipse.dev/glsp/documentation/gmodel

Example implementation of GModelFactory in TypeScript for Node.js GLSP servers, creating GNodes from entities using GNodeBuilder.

```TypeScript
@injectable()
export class MyModelFactory implements GModelFactory {
  @inject(MyModelState)
  protected modelState: MyModelState;

  createModel(): void {
    const entities = this.modelState.getModel().getEntities();

    const entityNodes = entities.map((entity) =>
      new GNodeBuilder(GNode)
        .id("node:entity")
        .layout("vbox")
        .add(new GLabelBuilder(GLabel).text(entity.name).build())
        .build()
    );

    const newModel = new GGraphBuilder(GGraph)
      .id("entity-graph")
      .addChildren(...entityNodes)
      .build();

    this.modelState.updateRoot(newModel);
  }
}
```

--------------------------------

### Graph View Implementation

Source: https://eclipse.dev/glsp/documentation/rendering

Shows the implementation of the GGraphView for rendering the base SVG canvas and triggering child rendering, with examples for Java and Node.js GLSP servers and configuration.

```Java
new GGraphBuilder().build();
```

```TypeScript
GGraph.builder().build();
```

```TypeScript
configureModelElement(context, DefaultTypes.GRAPH, GGraph, GGraphView);
```

--------------------------------

### Java GLSP Server: Create Multi-line Comment Node

Source: https://eclipse.dev/glsp/documentation/rendering

Example of creating a parent node and a child node with multi-line text content using `GNodeBuilder` in a Java GLSP server. This sets up the data structure for the client-side view.

```Java
String multiLineComment = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n" +
      "Nam at tellus quis lacus auctor congue vel sit amet lectus.\n" +
      "Cras interdum lectus vel enim mollis maximus.";

  new GNodeBuilder("comment-node-parent")
      .addCssClass("comment-node-parent")
      .size(GraphUtil.dimension(720, 125))
      .position(point.orElse(GraphUtil.point(0, 0)))
      .add(new GNodeBuilder("comment-node")
          .addArgument("text", multiLineComment)
          .build())
      .build();
```

--------------------------------

### Example SVG Output Structure

Source: https://eclipse.dev/glsp/documentation/rendering

Illustrates the resulting SVG structure generated by GLSP for a multi-line text node. It shows the parent group with a rect and the child `foreignObject` containing the preformatted text.

```HTML
<g transform="scale(...) translate(...)">
  <g
    id="workflow-diagram_0_..."
    transform="translate(...)"
    class="comment-node-parent"
  >
    <rect x="0" y="0" width="720" height="125" class="sprotty-node"></rect>
    <g class="comment-node" id="workflow-diagram_0_...">
      <foreignObject
        requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
        height="125"
        width="720"
        x="0"
        y="0"
      >
        <pre>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam at tellus quis lacus auctor congue vel sit amet lectus.
        Cras interdum lectus vel enim mollis maximus.
        </pre>
      </foreignObject>
    </g>
  </g>
</g>
```

--------------------------------

### DiamondNodeView Implementation (Node GLSP Server)

Source: https://eclipse.dev/glsp/documentation/rendering

Example of creating a diamond (rhombus) node using GNode.builder in a Node.js GLSP server. It specifies the node type, position, and dimensions.

```TypeScript
GNode.builder()
  .type(DefaultTypes.NODE_DIAMOND)
  .position(point ?? Point.ORIGIN)
  .size(25, 25)
  .build();
```

--------------------------------

### DiamondNodeView Implementation (Java GLSP Server)

Source: https://eclipse.dev/glsp/documentation/rendering

Example of creating a diamond (rhombus) node using GNodeBuilder in a Java GLSP server. It defines the node type, position, and size.

```Java
new GNodeBuilder()
    .type(DefaultTypes.NODE_DIAMOND)
    .position(point.orElse(GraphUtil.point(0, 0)))
    .size(GraphUtil.dimension(25, 25))
    .build();
```

--------------------------------

### GLSPClient Interface and ClientState Enum

Source: https://eclipse.dev/glsp/documentation/protocol

Defines the core `GLSPClient` interface for managing the lifecycle of a GLSP client connection to a server. It outlines methods for starting, initializing, sending messages, and shutting down the client, along with the `ClientState` enum to represent the client's operational status.

```typescript
interface GLSPClient {
    /**
     * Unique client Id.
     */
    readonly id: string;

    /**
     * Current client state.
     */
    readonly currentState: ClientState;

    /**
     * Initializes the client and the server connection. During the start procedure the client is in the
     * `Starting` state and will transition to either `Running` or `StartFailed`. Calling this method
     *  if the client is already running has no effect.
     *
     * @returns A promise that resolves if the startup was successful.
     */
    start(): Promise<void>;

    /**
     * Send an `initialize` request to the server. The server needs to be initialized in order to accept and
     * process other requests and notifications. The {@link InitializeResult} ist cached and can be retrieved
     * via the {@link GLSPClient.initializeResult} property.
     * Only the first method invocation actually sends a request to the server. Subsequent invocations simply
     * return the cached result.
     *
     * @param params Initialize parameters
     * @returns A promise of the {@link InitializeResult}.
     */
    initializeServer(params: InitializeParameters): Promise<InitializeResult>;

    /**
     * The cached {@link {InitializeResult}. Is `undefined` if the server has not been initialized yet via
     * the {@link GLSPClient.initializeServer} method.
     */
    readonly initializeResult: InitializeResult | undefined;

    /**
     * Event that is fired once the first invocation of {@link GLSPClient.initializeServer} has been completed.
     */
    readonly onServerInitialized: Event<InitializeResult>;

    /**
     * Send an `initializeClientSession` request to the server. One client application may open several session.
     * Each individual diagram on the client side counts as one session and has to provide
     * a unique clientId.
     *
     * @param params InitializeClientSession parameters
     * @returns A promise that resolves if the initialization was successful
     */
    initializeClientSession(params: InitializeClientSessionParameters): Promise<void>;

    /**
     * Sends a `disposeClientSession` request to the server. This request has to be sent at the end of client session lifecycle
     * e.g. when an editor widget is closed.
     *
     * @param params DisposeClientSession parameters
     * @returns A promise that resolves if the disposal was successful
     */
    disposeClientSession(params: DisposeClientSessionParameters): Promise<void>;

    /**
     * Send a `shutdown` notification to the server.
     */
    shutdownServer(): void;

    /**
     * Stops the client and disposes unknown resources. During the stop procedure the client is in the `Stopping` state and will
     * transition to either `Stopped` or `ServerError`.
     *
     * @returns A promise that resolves after the server was stopped and disposed.
     */
    stop(): Promise<void>;

    /**
     * Send an action message to the server.
     *
     * @param message The message
     */
    sendActionMessage(message: ActionMessage): void;

    /**
     * Sets a handler/listener for action messages received from the server.
     * Can be scoped to a particular client session by passing the corresponding `clientId`.
     *
     * @param handler The action message handler
     * @param clientId If passed given action message handler will only be invoked for action messages with this client id.
     * @returns A {@link Disposable} that can be used to unregister the handler
     */
    onActionMessage(handler: ActionMessageHandler, clientId?: string): Disposable;
}

export enum ClientState {
    /**
     * The client has been created.
     */
    Initial,
    /**
     * `Start` has been called on the client and the start process is still on-going.
     */
    Starting,
    /**
     * The client failed to complete the start process.
     */
    StartFailed,
    /**
     * The client was successfully started and is now running.
     */
    Running,
    /**
     * `Stop` has been called on the client and the stop process is still on-going.
     */
    Stopping,
    /**
     * The client stopped and disposed the server connection. Thus, action messages can no longer be sent.
     */
    Stopped,
    /**
     * An error was encountered while connecting to the server. No action messages can be sent.
     */
    ServerError
}

/**
 * A key-value pair structure for custom arguments.
 */
interface Args {
    [key: string]: string | number | boolean;
}

type ActionMessageHandler = (message: ActionMessage) => void;

```

--------------------------------

### CircularNodeView Implementation (Node GLSP Server)

Source: https://eclipse.dev/glsp/documentation/rendering

Example of creating a circular node using GNode.builder in a Node.js GLSP server. It specifies the node type, position, and dimensions.

```TypeScript
GNode.builder()
  .type(DefaultTypes.NODE_CIRCLE)
  .position(point ?? Point.ORIGIN)
  .size(15, 15)
  .build();
```

--------------------------------

### CircularNodeView Implementation (Java GLSP Server)

Source: https://eclipse.dev/glsp/documentation/rendering

Example of creating a circular node using GNodeBuilder in a Java GLSP server. It sets the node type, position, and size.

```Java
new GNodeBuilder()
    .type(DefaultTypes.NODE_CIRCLE)
    .position(point.orElse(GraphUtil.point(0, 0)))
    .size(GraphUtil.dimension(15, 15))
    .build();
```

--------------------------------

### GLSP Node Server Layout Options

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Details how layout options are handled on the GLSP Node Server, noting limited utility class support and recommending direct string values for configuration.

```typescript
EdgeSide type is available.
Use dedicated string values for other options, e.g.:
"hAlign": "center"
```

--------------------------------

### GLSP Protocol Overview

Source: https://eclipse.dev/glsp/documentation/actionhandler

Provides a high-level overview of the GLSP protocol, including its structure, lifecycle, and various functional areas such as model data, editing, and client-side actions.

```APIDOC
GLSP Protocol Sections:
- Server-Client Lifecycle
- Graphical Language Server Protocol
  - Base Protocol
  - Model Structure
  - Types
  - Model Data
  - Model Saving
  - Model Layout
  - Model Edit Mode
  - Client-Side Actions
  - Element Hover
  - Element Validation
  - Element Navigation
  - Element Type Hints
  - Element Creation and Deletion
  - Node Modification
  - Edge Modification
  - Element Text Editing
  - Clipboard
  - Undo / Redo
  - Contexts
```

--------------------------------

### Configuring Custom Layouter by KIND (TypeScript)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Illustrates how to configure a custom layouter for a specific layouter key (KIND) within the GLSP client's configuration.

```typescript
const myDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   configureLayout({ bind, isBound }, MyCustomLayouter.KIND, MyCustomLayouter);
})
```

--------------------------------

### GLSP Source Model Handling

Source: https://eclipse.dev/glsp/documentation/sourcemodel

Details the responsibilities of a GLSP server in managing source models. This includes loading, transforming into graphical models, and handling edits based on user actions.

```APIDOC
GLSP Server Responsibilities:
  1. Source Model Storage: Implementation for loading and storing source models.
     - Defines how to load a source model from various formats (e.g., EMF, JSON, databases).
     - Defines how to store modifications back to the source model.
  2. Graphical Model Factory: Implementation for transforming source models into graphical models.
     - Defines the mapping from source model elements to GLSP graphical elements.
     - Specifies how diagram layout and appearance are derived.
  3. Edit Operation Handlers: Implementations for manipulating the source model based on client actions.
     - Handles user edits (e.g., moving nodes, changing properties) by updating the underlying source model.
     - Ensures consistency between the graphical representation and the source data.
```

--------------------------------

### Define Custom Edge in TypeScript

Source: https://eclipse.dev/glsp/documentation/gmodel

Example of defining a custom GEdge subclass in TypeScript to add properties like 'probability' for advanced use cases.

```TypeScript
export class WeightedEdge extends GEdge {
  probability?: string;
}
```

--------------------------------

### GLSP Actions and Action Handlers

Source: https://eclipse.dev/glsp/documentation/actionhandler

Details the GLSP's communication mechanism using actions and action handlers. It explains how actions are dispatched between the client and server, differentiating between notifications and request-response pairs, and outlines the process for implementing custom actions.

```APIDOC
Actions & Action Handlers:

Communication Mechanism:
- Client and server communicate bidirectionally via actions sent over JSON-RPC.
- Actions are also used for internal event flow within the GLSP server and client.
- Any service or tool can issue actions by invoking the action dispatcher.

Action Dispatcher:
- Central component responsible for dispatching actions to designated action handlers.
- Determines whether an action should be dispatched internally or submitted to the opposite component (client/server) via JSON-RPC.
- Distinguishes between notifications (one-way) and request-response action pairs.

Action Types:
- GLSP defines standard action types based on the graphical language server protocol.
- Adopters can add new custom action types.
- Existing action types can be replaced or extended, and additional action handlers can be added.

Steps to Implement Custom Actions:
1. Create a new action specification with a corresponding `Action` implementation.
2. Create a new action handler for the custom action type by implementing the `ActionHandler` interface.
3. Configure the new action type and handler in the DI module.
```

--------------------------------

### Edge Layout Configuration (Java)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Demonstrates configuring edge placement for a GLabel in GLSP server using Java, specifying side and position relative to the edge.

```java
new GLabelBuilder()
   .edgePlacement(new GEdgePlacementBuilder()
      .side(GConstants.EdgeSide.TOP)
      .position(0.5)
      .build())
   .add(new GLabelBuilder().text("MyLabel").build())
   .build();
```

--------------------------------

### GLSP Client: Implement Action Handler

Source: https://eclipse.dev/glsp/documentation/actionhandler

Explains how to create a client-side action handler by implementing Sprotty's `IActionHandler` interface and its `handle` method to process actions and optionally return a response action.

```TypeScript
@injectable()
export class MyCustomResponseActionHandler implements IActionHandler {
  handle(action: MyCustomResponseAction): void | Action {
    // implement your custom logic to handle the action
    // Optionally issue a response action
  }
}
```

--------------------------------

### Edge Layout Configuration (Node.js)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Demonstrates configuring edge placement for a GLabel in GLSP server using Node.js, specifying side, position, and other properties.

```javascript
GLabel.builder()
  .edgePlacement({ side: "top", position: 0.5, rotate: false, offset: 0 })
  .add(new GLabelBuilder(GLabel).text("MyLabel").build())
  .build();
```

--------------------------------

### Custom Layouter Implementation (TypeScript)

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Demonstrates creating a custom layouter in GLSP by extending VBoxLayouterExt and defining custom layout options. It shows how to enlarge child element sizes by a specified value.

```typescript
export interface MyCustomLayoutOptions extends VBoxLayoutOptionsExt {
  enlargeSizeBy: number;
}

@injectable()
export class MyCustomLayouter extends VBoxLayouterExt {
  static override KIND = "myCustomLayout";

  protected override getChildrenSize(
    container: GParentElement & LayoutContainer,
    containerOptions: MyCustomLayoutOptions,
    layouter: StatefulLayouter
  ): Dimension {
    const result = super.getChildrenSize(container, containerOptions, layouter);
    return {
      width: result.width + containerOptions.enlargeSizeBy,
      height: result.height + containerOptions.enlargeSizeBy,
    };
  }

  protected override getDefaultLayoutOptions(): MyCustomLayoutOptions {
    return {
      enlargeSizeBy: 50,
      ...super.getDefaultLayoutOptions(),
    };
  }

  protected override spread(
    a: MyCustomLayoutOptions,
    b: MyCustomLayoutOptions
  ): MyCustomLayoutOptions {
    return { ...a, ...b };
  }
}
```

--------------------------------

### GLSP AbstractLayoutOptions

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Defines common layout configuration properties for GLSP elements, controlling aspects like resizing, padding, and minimum dimensions.

```APIDOC
AbstractLayoutOptions:
  resizeContainer: boolean
    Indicates if the container should be resizable based on its children.
  paddingTop: number
    Sets the height of the top padding area in pixels.
  paddingBottom: number
    Sets the height of the bottom padding area in pixels.
  paddingLeft: number
    Sets the width of the left padding area in pixels.
  paddingRight: number
    Sets the width of the right padding area in pixels.
  paddingFactor: number
    Defines a multiplication factor for an element's size, used to add padding space around it.
    Example: For 'stack' layout, 1 adds standard padding, 2 doubles it.
  minWidth: number
    Defines the minimum width of an element.
  minHeight: number
    Defines the minimum height of an element.
```

--------------------------------

### GLSP Java Server Layout Constants

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Provides utility classes and constants for configuring layout options on the GLSP Java Server, including edge label placement and horizontal alignment.

```java
GConstants.EdgeSide:
  LEFT | RIGHT | TOP | BOTTOM | ON

GConstants.HAlign:
  LEFT | CENTER | RIGHT
```

--------------------------------

### GLSP HBoxLayouter Options

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Extends layout options for the HBoxLayouter, enabling configuration of horizontal gaps, vertical alignment, and size grabbing behavior for children.

```typescript
HBoxLayoutOptionsExt:
  hGap: number
    Defines a horizontal gap between elements in pixels.
  vAlign: 'top' | 'center' | 'bottom'
    Defines the vertical alignment of elements within the container.
  hGrab: boolean
    Indicates if children can grab available horizontal space.
  vGrab: boolean
    Indicates if children can grab available vertical space.
  prefWidth: number | null
    Defines the preferred width of the container if not specified or determined by children.
  prefHeight: number | null
    Defines the preferred height of the container if not specified or determined by children.
```

--------------------------------

### VBoxLayouterExt Options

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Defines layout options for the VBoxLayouterExt, controlling vertical spacing, alignment, and size grabbing for elements within a container.

```APIDOC
VBoxLayouterExt:
  - Layouts children of a container in a vertical (top to bottom) direction.

  Layout Options (VBoxLayoutOptionsExt):
    - vGap: number
      Defines a vertical gap between elements in the same container in pixels.
    - hAlign: 'left' | 'center' | 'right'
      Defines the horizontal alignment of the element to be positioned.
    - hGrab: boolean
      Indicates whether the remaining horizontal size can be grabbed by its children.
    - vGrab: boolean
      Indicates whether the remaining vertical size can be grabbed by its children.
    - prefWidth: number | null
      Defines the preferred width of the container element, assigned if no manual width is specified and children don't require a larger width.
    - prefHeight: number | null
      Defines the preferred height of the container element, assigned if no manual height is specified and children don't require a larger height.
```

--------------------------------

### Build Expandable Node (GLSP Server)

Source: https://eclipse.dev/glsp/documentation/rendering

An alternative server-side implementation for building an expandable GLSP node. It uses a slightly different syntax for positioning and layout options, demonstrating flexibility in GLSP node construction.

```Java
GNode.builder()
  .type("node:expandable")
  .addCssClass("node-expandable")
  .position(point ?? Point.ORIGIN)
  .layout("hbox")
  .addLayoutOption("hGap", 15)
  .add(GLabel.builder().text("Expand").build())
  .add(
    GButton.builder()
      .type(DefaultTypes.BUTTON_EXPAND)
      .addCssClass("button-expand")
      .enabled(true)
      .build()
  )
  .build();
```

--------------------------------

### GLSP Client: Configure Action Handler

Source: https://eclipse.dev/glsp/documentation/actionhandler

Shows how to configure a client-side action handler in the diagram module using the `configureActionHandler` function, specifying the action kind and the handler class.

```TypeScript
const diagramModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
    const context = { bind, _unbind, isBound, rebind };
    configureActionHandler(context, MyCustomResponseAction.KIND, MyCustomResponseActionHandler);
})
```

--------------------------------

### Implement GLSP ModelValidator Interface

Source: https://eclipse.dev/glsp/documentation/validation

Provides example implementations of the `ModelValidator` interface in Java and Node.js. These validators iterate over model elements, identify specific types like `GNode`, and create `Marker` objects to report issues or information.

```Java
public class CustomModelValidator implements ModelValidator {

   @Override
   public List<Marker> validate(final GModelElement... elements) {
      List<Marker> markers = new ArrayList<>();
      for (GModelElement element : elements) {
         if (element instanceof GNode) {
            markers.add(validateGNode((GNode) element));
         }
         element.getChildren().forEach(child -> markers.addAll(validate(child)));
      }
      return markers;
   }

   protected Marker validateGNode(final GNode element) {
      return new Marker("Node", "This graphical element is a node", element.getId(),
       MarkerKind.INFO);
   }

}
```

```TypeScript
@injectable()
export class CustomModelValidator implements ModelValidator {
    @inject(ModelState)
    protected readonly modelState: ModelState;

    validate(elements: GModelElement[]): Marker[] {
        const markers: Marker[] = [];
        for (const element of elements) {
            if (element instanceof GNode) {
                markers.push(this.validateGNode(element));
            }
            if (element.children) {
                markers.push(...this.validate(element.children));
            }
        }
        return markers;
    }

    protected validateGNode(element: GNode): Marker {
        return {
            kind: MarkerKind.INFO,
            description: 'This graphical element is a node',
            elementId: element.id,
            label: 'Node'
        };
    }
}
```

--------------------------------

### Define Custom Action in Java

Source: https://eclipse.dev/glsp/documentation/actionhandler

Demonstrates how to define a custom action in Java for GLSP by extending the base `Action` class. It includes setting a static `KIND` constant and managing additional data properties.

```Java
public class MyCustomAction extends Action {
   public static final String KIND= "myCustomKind";
   private String additionalInformation;

   public MyCustomAction() {
      super(KIND);
   }

   public String getAdditionalInformation() { return additionalInformation; }

   public void setAdditionalInformation(final String additionalInformation) {
      this.additionalInformation = additionalInformation;
   }
}
```

--------------------------------

### Java GLSP Server: Implement Custom Action Handler

Source: https://eclipse.dev/glsp/documentation/actionhandler

Demonstrates how to create a custom action handler in the Java GLSP server by extending `AbstractActionHandler` and implementing the `executeAction` method to handle specific actions and return response actions.

```Java
public class MyCustomActionHandler extends AbstractActionHandler<MyCustomResponseAction> {

   @Override
   protected List<Action> executeAction(final MyCustomResponseAction actualAction) {
      // implement your custom logic to handle the action

      // Finally issue response actions
      // If no response actions should be issued 'none()' can be used;
      return listOf(new MyCustomResponseAction());
   }

}
```

--------------------------------

### Build GIssueMarker Element (Java)

Source: https://eclipse.dev/glsp/documentation/rendering

Constructs a GIssueMarker element with associated issues using the Java GLSP Server builder. Includes positioning and severity.

```java
new GNodeBuilder()
    .type(DefaultTypes.NODE_RECTANGLE)
    .position(point.orElse(GraphUtil.point(0, 0)))
    .size(GraphUtil.dimension(50, 35))
    .add(new GIssueMarkerBuilder()
      .addIssue(new GIssueBuilder()
          .severity(GSeverity.INFO)
          .build())
      .position(GraphUtil.point(-8, -8))
      .build());
```

--------------------------------

### Node GLSP Server: Implement Custom Action Handler

Source: https://eclipse.dev/glsp/documentation/actionhandler

Shows how to implement a custom action handler in the Node.js GLSP server, defining the action kinds it handles and implementing the `execute` method for custom logic and returning actions.

```TypeScript
@injectable()
export class MyCustomActionHandler implements ActionHandler {
  actionKinds = [MyCustomRequestAction.KIND];

  execute(action: MyCustomRequestAction): MaybePromise<Action[]> {
    // implement your custom logic to handle the action

    // Finally issue response actions
    // If no response actions should be issued '[]' can be used;
    return [new MyCustomResponseAction()];
  }
}
```

--------------------------------

### Define Response Action in Java

Source: https://eclipse.dev/glsp/documentation/actionhandler

Shows the Java implementation for a GLSP response action, extending `ResponseAction`. This defines the structure for actions that are sent back as responses.

```Java
public class MyCustomResponseAction extends ResponseAction {
   public static final String KIND = "myCustomResponse";

   public MyCustomResponseAction() {
      super(KIND);
   }
}
```

--------------------------------

### GLSP Server Frameworks DI Concepts

Source: https://eclipse.dev/glsp/documentation/integrations

Describes the dependency injection (DI) concepts used in GLSP server frameworks. The Java framework uses Google Guice, while the Node.js framework uses inversify.js. Both rely on abstract base classes like DiagramModule for customization.

```APIDOC
GLSP Server Frameworks:

GLSP servers can be written in any language, communicating via JSON-RPC.
Two provided frameworks simplify development:

1.  **Java-based GLSP server framework**:
    *   Uses **Google Guice** for dependency injection.
    *   Adopters extend a main DI module and override binding methods for customization.
    *   Provides abstract base class `DiagramModule` for diagram-specific implementations.

2.  **Node.js-based GLSP server framework**:
    *   Uses **inversify.js** for dependency injection.
    *   Provides abstract base class `DiagramModule` for diagram-specific implementations.

**DiagramModule Abstract Base Class**:
  - Intended to be extended for concrete diagram server implementation.
  - Abstract methods MUST be implemented (e.g., source model storage, graphical model factory).
  - Other methods MAY be overwritten for custom functionalities (e.g., editing operations, model validation).
  - Pre-configured modules exist for certain source models (e.g., EMF, EMF.cloud).
```

--------------------------------

### Register GModelFactory in Java

Source: https://eclipse.dev/glsp/documentation/gmodel

Shows how to bind a custom GModelFactory implementation in the server's DI module for Java-based GLSP editors.

```Java
protected override bindGModelFactory(): BindingTarget<GModelFactory> {
    return MyModelFactory;
}
```

--------------------------------

### GLSP Initialize Request API

Source: https://eclipse.dev/glsp/documentation/protocol

Defines the parameters for the initial client-server handshake and the expected result containing server capabilities. The initialize request must be the first message sent by the client.

```APIDOC
InitializeParameters:
  applicationId: string
    Unique identifier for the current client application.
  protocolVersion: string
    GLSP protocol version that this client is implementing.
  args?: Args
    Additional custom arguments e.g. application specific parameters.

InitializeResult:
  protocolVersion: string
    GLSP protocol version that the server is implementing.
  serverActions: ServerActions
    The actions (grouped by `diagramType`) that the server can handle.

ServerActions:
  [key: string]: string[]
    A key-value pair structure to map a `diagramType` to its server-handled action kinds.
```

--------------------------------

### Build GIssueMarker Element (Node.js)

Source: https://eclipse.dev/glsp/documentation/rendering

Constructs a GIssueMarker element with associated issues using the Node.js GLSP Server builder. Includes positioning and severity.

```typescript
GNode.builder()
  .type(DefaultTypes.NODE_RECTANGLE)
  .position(point ?? Point.ORIGIN)
  .size(50, 35)
  .add(
    GIssueMarker.builder()
      .addIssue({ message: "Information message", severity: "info" })
      .position(-8, -8)
      .build()
  )
  .build();
```

--------------------------------

### Rectangular Node View Implementation

Source: https://eclipse.dev/glsp/documentation/rendering

Demonstrates how to create and configure a rectangular node using GLSP builders in Java and Node.js, and how to register the view with the model.

```Java
new GNodeBuilder()
    .type(DefaultTypes.NODE_RECTANGLE)
    .position(point.orElse(GraphUtil.point(0, 0)))
    .size(GraphUtil.dimension(25, 25))
    .build();
```

```TypeScript
GNode.builder()
  .type(DefaultTypes.NODE_RECTANGLE)
  .position(point ?? Point.ORIGIN)
  .size(25, 25)
  .build();
```

```TypeScript
configureModelElement(
  context,
  DefaultTypes.NODE_RECTANGLE,
  RectangularNode,
  RectangularNodeView
);
```

--------------------------------

### Label View Implementation

Source: https://eclipse.dev/glsp/documentation/rendering

Illustrates how to render a text label using GLSP builders in Java and Node.js, including adding a label to a rectangular node and configuring the label element.

```Java
new GNodeBuilder()
    .type(DefaultTypes.NODE_RECTANGLE)
    .position(point.orElse(GraphUtil.point(0, 0)))
    .size(GraphUtil.dimension(50, 35))
    .add(new GLabelBuilder().text("Label 1").build())
    .build();
```

```TypeScript
GNode.builder()
  .type(DefaultTypes.NODE_RECTANGLE)
  .position(point ?? Point.ORIGIN)
  .size(50, 35)
  .add(GLabel.builder().text("Label 1").build())
  .build();
```

```TypeScript
configureModelElement(context, DefaultTypes.LABEL, GLabel, GLabelView);
```

--------------------------------

### GLSP Node Creation with VBOX Layout

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Demonstrates creating a GLSP GNode with a vertical box (VBOX) layout and horizontal alignment options for its child elements. This configuration is applied either on the server-side (Java) or client-side (Node.js/TypeScript) to define the arrangement of contained graphical elements.

```Java
new GNodeBuilder()
   .layout(GConstants.Layout.VBOX)
   .layoutOptions(new GLayoutOptions()
      .hAlign(GConstants.HAlign.Center))
   .add(new GLabelBuilder()
      .text("label1")
      .build())
   .add(new GLabelBuilder()
      .text("label2")
      .build())
   .build();
```

```TypeScript
GNode.builder()
  .layout("vbox")
  .addLayoutOption("hAlign", "center")
  .add(GLabel.builder().text("label1").build())
  .add(GLabel.builder().text("label2").build())
  .build();
```

--------------------------------

### GLSP Freeform Layout Compartment Configuration

Source: https://eclipse.dev/glsp/documentation/clientlayouting

Demonstrates configuring a GLSP compartment with the `freeform` layout in both Java and JavaScript. It shows setting container preferred dimensions and adding child nodes at specific relative positions.

```java
GDimension containerPrefSize = GraphUtil.dimension(250 /*width*/, 125 /*height*/);
GPoint childPosition = GraphUtil.point(75 /*x*/, 35 /*y*/);

Map<String, Object> layoutOptions = new HashMap<>();
layoutOptions.put(H_GRAB, true);
layoutOptions.put(V_GRAB, true);
layoutOptions.put(GLayoutOptions.KEY_PREF_WIDTH, containerPrefSize.getWidth());
layoutOptions.put(GLayoutOptions.KEY_PREF_HEIGHT, containerPrefSize.getHeight());
new GCompartmentBuilder()
  .type("comp:structure")
  .layout(GConstants.Layout.FREEFORM)
  .layoutOptions(layoutOptions)
  .add(
    new GNodeBuilder(DefaultTypes.NODE)
      .position(childPosition)
      .build()
  )
  .build();
```

```javascript
const containerPrefSize = { width: 250, height: 125 };
const childPosition = { x: 75, y: 35 };

const layoutOptions = {
  ["hGrab"]: true,
  ["vGrab"]: true,
  ["prefWidth"]: containerPrefSize.width,
  ["prefHeight"]: containerPrefSize.height,
};
GCompartment.builder()
  .type("comp:structure")
  .layout("freeform")
  .addLayoutOptions(layoutOptions)
  .add(GNode.builder().type("node").position(childPosition).build())
  .build();
```

--------------------------------

### Java GLSP Server: Configure Action Handler

Source: https://eclipse.dev/glsp/documentation/actionhandler

Illustrates how to register a custom action handler with the GLSP server's dependency injection system by overriding the `configureActionHandlers` method and adding the custom handler class.

```Java
@Override
protected void configureActionHandlers(final MultiBinding<ActionHandler> binding) {
    super.configureActionHandlers(binding);
    binding.add(MyCustomActionHandler.class);
}
```

--------------------------------

### GLSP Navigation Actions

Source: https://eclipse.dev/glsp/documentation/protocol

Defines GLSP actions for handling navigation requests and responses. Includes resolving navigation targets and navigating to external resources.

```typescript
interface ResolveNavigationTargetAction extends RequestAction<SetResolvedNavigationTargetAction> {
    /**
     * The kind of the action.
     */
    kind = 'resolveNavigationTarget';

    /**
     * The navigation target to resolve.
     */
    navigationTarget: NavigationTarget;
}

interface SetResolvedNavigationTargetAction extends ResponseAction {
    /**
     * The kind of the action.
     */
    kind = 'setResolvedNavigationTarget';

    /**
     * The element ids of the resolved navigation target.
     */
    elementIds: string[];

    /**
     * Custom arguments that may be interpreted by the client.
     */
    args?: Args;
}

interface NavigateToExternalTargetAction extends Action {
    /**
     * The kind of the action.
     */
    kind = 'navigateToExternalTarget';

    /**
     * The target to which we navigate.
     */
    target: NavigationTarget;
}
```

--------------------------------

### Define Request Action in Java

Source: https://eclipse.dev/glsp/documentation/actionhandler

Illustrates the Java implementation for a GLSP request action, extending `RequestAction`. This allows for blocking requests and defines the expected response action type.

```Java
public class MyCustomRequestAction extends RequestAction<MyCustomResponseAction> {
   public static final String KIND= "myCustomRequest";
   private String additionalInformation;

   public MyCustomRequestAction() {
      super("my.custom.kind");
   }

   public String getAdditionalInformation() { return additionalInformation; }

   public void setAdditionalInformation(final String additionalInformation) {
      this.additionalInformation = additionalInformation;
   }
}
```

--------------------------------

### Bind SourceModelStorage in Java GLSP Server

Source: https://eclipse.dev/glsp/documentation/sourcemodel

Shows how to register your custom `SourceModelStorage` implementation with the GLSP server's dependency injection module in Java. This implementation is crucial for loading and saving the source model.

```Java
@Override
protected Class<? extends SourceModelStorage> bindSourceModelStorage() {
   return MySourceModelStorage.class;
}
```

--------------------------------

### LabeledAction Interface (TypeScript)

Source: https://eclipse.dev/glsp/documentation/protocol

Labeled actions are used to group related actions for UI contexts like command palettes or context menus. Each labeled action has a group label, a list of actions, and an optional icon.

```typescript
interface LabeledAction {
    /**
     * Group label.
     */
    label: string;

    /**
     * Actions in the group.
     */
    actions: Action[];

    /**
     * Optional group icon.
     */
    icon?: string;
}
```

--------------------------------

### GLSP InitializeClientSession Request API

Source: https://eclipse.dev/glsp/documentation/protocol

Specifies the parameters required to initialize a client session for a specific diagram. This request is sent when a new graphical representation is created.

```APIDOC
InitializeClientSessionParameters:
  clientSessionId: string
    Unique identifier for the new client session.
  diagramType: string
    Unique identifier of the diagram type for which the session should be configured.
  clientActionKinds: string[]
    The set of action kinds that can be handled by the client. Used by the server to know which dispatched actions should be forwarded to the client.
  args?: Args
    Additional custom arguments.
```

--------------------------------

### Build GEdge Element (Java)

Source: https://eclipse.dev/glsp/documentation/rendering

Constructs a GEdge element using the Java GLSP Server builder. Specifies source and target nodes for the edge.

```java
new GEdgeBuilder()
      .source(source) // source node element
      .target(target) // target node element
      .build();
```

--------------------------------

### Bind SourceModelStorage in Node GLSP Server

Source: https://eclipse.dev/glsp/documentation/sourcemodel

Demonstrates registering a custom `SourceModelStorage` implementation in a Node.js GLSP server. This binding makes the server aware of how to load and save the source model data.

```TypeScript
protected bindSourceModelStorage(): BindingTarget<SourceModelStorage> {
   return MySourceModelStorage;
}
```
Tokens:
Raw