How to add context menu and properties panel to view/edit the properties of the diagram elements?

[atejshee-tibco]

Are there any easy to follow examples that show how to add context menu and properties panel to view/edit the properties of the diagram elements in the project-templates from the glsp-examples (node-json-theia, java-emf-theia, and node-json-vscode)?

[planger]

Hi,

we have one example for editing properties in an input box overlay.

This is the context menu registration which sets the visibility of this UI extension to true:
https://github.com/eclipse-glsp/glsp-examples/blob/master/workflow/workflow-theia/src/browser/diagram/workflow-task-editing-context-menu.ts
This is the UI extension module registering the UI extension:
https://github.com/eclipse-glsp/glsp-examples/blob/master/workflow/workflow-glsp/src/direct-task-editing/task-editor-module.ts
This is the UI extension implementation:
https://github.com/eclipse-glsp/glsp-examples/blob/master/workflow/workflow-glsp/src/direct-task-editing/direct-task-editor.ts

For creating a separate property view, we typically implement a plain view in VS Code or Theia and then react to the selection:

1. Extract the GLSP element that is selected
2. Go to the original model source to retrieve the actual properties

An example for that can be found e.g. here in the CrossModel modeling tool:
https://github.com/CrossBreezeNL/crossmodel/blob/main/packages/property-view/src/browser/model-data-service.ts

I hope this helps!

[atejshee-tibco]

Thanks a lot @planger, I could create a context menu for editing the properties of the diagram elements.

I had one more query.
The workflow example's example1.wf is a json file in the background, which contains the semantics of the diagram elements, like the position of the elements, their size, and some other information. Do we have a way to create a json/xml file based on the diagram that the user creates, which would be easier to be understood by a human, and it should also cater to the business requirement. This json/xml file would be used to create some skeleton code whose details could later be filled in by the user.

By meaningful file, I expect something like this:

{
  node1: {
      property1: value1,
      property2: value2,
      node2: node2List
  },
  node2: [
      {
          id: 1,
          property3: value3
      },
      {
          id: 2,
          property3: value4
      }
  ]
}

[planger]

Yes, you can customize the model storage and the GModelFactory. Please check the documentation on how this all plays together:
https://eclipse.dev/glsp/documentation/sourcemodel/
https://eclipse.dev/glsp/documentation/gmodel/

With a custom source model and GModelFactory you can read and manipulate a diagram that is managed in virtually any format.
A simple example is the Tasklist:
https://github.com/eclipse-glsp/glsp-examples/blob/master/project-templates/node-json-vscode/tasklist-glsp-server/src/model/tasklist-model.ts
https://github.com/eclipse-glsp/glsp-examples/blob/master/project-templates/node-json-vscode/tasklist-glsp-server/src/model/tasklist-storage.ts
https://github.com/eclipse-glsp/glsp-examples/blob/master/project-templates/node-json-vscode/tasklist-glsp-server/src/model/tasklist-gmodel-factory.ts

[atejshee-tibco]

Thanks @planger, I could add custom fields to my diagram element elements.

I am modifying the workflow example, by adding couple of custom diagram elements which have couple of properties associated to them. Have added them in the workflow-server/src/graph-extension.ts and modified/added the related files. I could render these new diagram elements on Theia. However, in the JSON file (the .wf file opened in text editor), how can we keep only those fields that would actually serve some purpose for any futher specific use, and not include the semantics information about the diagram elements.

For example, refer to the following snippet.

{
	"cssClasses": [
		"task",
		"automated"
	],
	"type": "task:automated",
	"name": "ChkWt",
	"taskType": "automated",
	"id": "task0_automated",
	"position": {
		"x": 220,
		"y": 90
	},
	"size": {
		"width": 83.1103515625,
		"height": 30
	},
	"layout": "hbox",
	"layoutOptions": {
		"prefWidth": 75.6103515625,
		"paddingRight": 10,
		"prefHeight": 30
	},
	"args": {
		"radiusBottomLeft": 5,
		"radiusTopLeft": 5,
		"radiusTopRight": 5,
		"radiusBottomRight": 5
	},
	"duration": 10
}

I want the file to contain only the following fields:
type, name, taskType, id, duration, children

The file should not contain the rest of the fields, and also the rendering of the diagram should also not be affected by removal of these semantic information fields from the file.

Could you please provide some pointers on where/what change should be done in the workflow example ?
Thanks in advance.

[planger]

Yes, this is actually the typical case. The workflow diagram is not a great example, as it basically uses the GModel as serialization format, which makes it simpler but less realistic.

In almost all realistic scenarios you have a cleaner more domain/user-oriented data format (called "source model" in GLSP, loaded by the Model Storage into the model state), which is then transformed by the GModelFactory into the GModel. In the workflow diagram, however, the source model is equal to the GModel.

A more realistic example is the tasklist editor:

• Source Model: https://github.com/eclipse-glsp/glsp-examples/blob/master/project-templates/node-json-theia/workspace/example.tasklist
• GModelFactory: https://github.com/eclipse-glsp/glsp-examples/blob/master/project-templates/node-json-theia/tasklist-glsp-server/src/model/tasklist-gmodel-factory.ts

The purpose of the GModelFactory is to translate the source model into a GModel so that things like the diagram structure (nodes, labels, children, compartments), and CSS rules, layouting rules, etc. are added dynamically and only the persistent information, such as the relevant positions and semantic elements are stored in the source model.

See also https://eclipse.dev/glsp/documentation/gmodel/#graphical-model-factory.

Hope this helps!