VS Code Extension

[hofstef]

A place to collect requirements, constraints, and solution ideas for the VS Code extension.

[hofstef]

Architecture

This diagram describes an archtitecture that would enable us to build a VS Code Extension. It is based on a sketch by @dominikhorn93

flowchart TD

Egon["Web Application
[Container: Node, Typescript, and Angular]"]

VsCode["VS Code Extension
[Container: ...]"]

Modeler["Modeler (API Application)
[Container: JavaScript, diagram-js]"]

Local["Local File System
[Software System]"]

Remote["Remote File System
[Software System]"]

Egon-- "embeds instance of" -->Modeler
Egon-- "imports from" -->Local
Egon-- "exports to" -->Local
Egon-- "imports from" -->Remote
VsCode-- "embeds instance of" -->Modeler 
VsCode-- "opens from" -->Local
VsCode-- "saves to" -->Local

classDef container fill:#1168bd,stroke:#0b4884,color:#ffffff
classDef person fill:#08427b,stroke:#052e56,color:#ffffff
classDef supportingSystem fill:#666,stroke:#0b4884,color:#ffffff

class User person
class Egon,Modeler,VsCode container
class Local,Remote supportingSystem

subgraph EgonSystem[Egon.io]
 Egon
 VsCode
 Modeler
end

style EgonSystem fill:none,stroke:#CCC,stroke-width:2px,color:#CCC,stroke-dasharray: 5 5

Loading

There is potential for more applications built on top of the "modeler" - e.g. plug-ins for Miro or Confluence. But let's not get ahead of ourselves.

Features

• Some existing features only make sense for the web app.
• Some features are needed by the web app and the VS code extension (the code for these will need to be refactored so that it does not depend on Angular).
• Some features are provided directly by VS code

feature	web app	API application	VS code ext.
autosave	yes	no	replaced by: VSC autosave for files
import file	yes	no	replaced by: open file
import URL	yes	no	not relevant?
label-dictionary	yes	no	replaced by: VSC search&replace
edit title & descr.	yes	?	yes
workbench	yes	no	replaced by: commands, menues
export	yes	yes	yes
icon-set-config	yes	yes	yes
modeler	yes	yes	yes
replay	yes	yes	yes

[dominikhorn93]

Hi @hofstef

i had a chat with @peterhnm and we suggest the following approach:

1. Set Up an Nx Monorepo

   • Create a new folder (e.g., monorepo/)
   • Initialize an Nx workspace

2. Develop the Domain Story Telling (DST) Modeler

• Inside the Nx workspace, create a project for the DST Modeler.
• Copy key features from egon.io (palette, rules, utilities) and adapt them.

3. VS Code Extension

   • Add a VS Code plugin to the monorepo workspace
   • Integrate the DST Modeler

4. Implement Advanced Features

   • Once the core DST Modeler works, add more complex functionality. Plaette Extensions, Simulation, ...

5. Integrate the Angular App

   • When feature-complete, migrate or update the Angular app to use the new DST Modeler.

[peterhnm]

I suggest the following nx setup:

.
|--app
| |-- egon-vscode
| |  |-- egon-modeler-webview
| |  |-- egon-modeler-plugin
| |-- egon-web
|--lib
  |-- bpmn-js-egon-plugin

[peterhnm]

I made some progress the last days. This is the diagram-js plugin so far:
Miragon#1

[hofstef]

Status quo February 2025 - a brief summary/outlook:

v3.0.0 (in development)

• We've removed the dependencies to bpmn-js and now depend on the latest version of diagram-js.
• We've removed oboslete code and renamed a couple of things which hopefully makes it easier to extend Egon.
• I hope to release v3.0.0 in early March. The code is already on the main branch.

v4.0.0

• Goal: separate the web application from the API application (see diagram above)
• Timeline: Start in March. Finish... I cannot give an estimate right now.

[peterhnm]

I have completed the separation from the web application so far, but still need to fix some bugs. Still, I think this is a good time to share my progress.

So this is what I've done so far:

1. Copied all the modules under tools/modeler/diagram-js/features and migrated them to TypeScript
2. I copied the dependencies between the diagram-js modules and the web application and converted them to didi modules. These are:
   • IconDictionaryService
   • LabelDictionaryService
   • DirtyFlagService
   • ElementRegistryService

What does not work so far:

1. Color Picker
2. Keyboard Shortcuts (other than ctrl + a for selecting all shapes)
3. The connection between two shapes is off if the second shape is underneath.
4. Label disappears
5. There might be more ...

[peterhnm]

@hofstef @dominikhorn93

Hello everyone. I have finished a first basic version of the vscode extension. You can download the vsix file here. Then you have to unzip the file and install it with:

code --install-extension egon-io.vsix

You can start the plugin by creating a new file with the extension .egn in vscode.