Merge branch 'main' of https://github.com/kieler/klighd-vscode

.github/workflows/build-types.yml

@@ -0,0 +1,28 @@
+name: Test Type Generation from Schemas
+
+on:
+  pull_request:
+    paths:
+      - schema/
+
+jobs:
+  build-pydantic:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      id: checkout_repository
+      uses: actions/checkout@v4
+      with:
+        sparse-checkout: schema
+        fetch-depth: 1
+    - name: Install datamodel-code-generator
+      id: install_code_generator
+      run: |
+        python -m venv ls-env
+        source ls-env/bin/activate
+        pip install datamodel-code-generator
+    - name: Generate Pydantic types
+      id: generate_pydantic_types
+      run: |
+        source ls-env/bin/activate
+        datamodel-codegen --input schema/ --input-file-type jsonschema --output GEN/ --use-default

README.md

@@ -24,7 +24,7 @@ related, web-based packages. The packages are seperated in two types:
 | ------------- | ------ |
 | 0.1.0–0.2.1   | 2.1.0  |
 | 0.3.0–0.4.2   | 2.2.0  |
-| 0.5.0         | 3.0.2  |
+| 0.5.0-0.6.0   | 3.0.2  |
 
 Moreover, the default branches of both repositories should be compatible but might experience regression.
 

applications/klighd-cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kieler/klighd-cli",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Standalone web view for klighd-core diagrams",
     "author": "KIELER <[email protected]>",
     "license": "EPL-2.0",
@@ -31,7 +31,7 @@
         "socket": "node ./lib/main.js --ls_port=5007"
     },
     "dependencies": {
-        "@kieler/klighd-core": "^0.5.0",
+        "@kieler/klighd-core": "^0.6.0",
         "buffer": "^6.0.3",
         "commander": "^8.1.0",
         "crypto-browserify": "^3.12.0",

applications/klighd-vscode/package.json

@@ -2,7 +2,7 @@
     "name": "klighd-vscode",
     "displayName": "KLighD Diagrams",
     "description": "KLighD diagram support for Visual Studio Code",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "publisher": "kieler",
     "author": "KIELER <[email protected]>",
     "icon": "icon.png",
@@ -152,8 +152,8 @@
     "scripts": {
         "clean": "rimraf dist klighd-vscode.vsix",
         "lint": "eslint .",
-        "build": "webpack --mode development --devtool eval-source-map",
-        "watch": "webpack --watch --mode development --devtool eval-source-map",
+        "build": "webpack --mode production --devtool false",
+        "watch": "webpack --watch --mode development",
         "package": "vsce package --yarn --baseImagesUrl https://github.com/kieler/klighd-vscode/raw/HEAD/applications/klighd-vscode -o klighd-vscode.vsix",
         "predistribute": "yarn run package",
         "distribute": "yarn run distribute:vsce && yarn run distribute:ovsx",
@@ -177,7 +177,7 @@
         "webpack-cli": "^5.1.4"
     },
     "dependencies": {
-        "@kieler/klighd-core": "^0.5.0",
+        "@kieler/klighd-core": "^0.6.0",
         "inversify": "^6.0.2",
         "nanoid": "^3.1.23",
         "reflect-metadata": "^0.2.1",

applications/klighd-vscode/src/klighd-webview-reopener.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2022-2023 by
+ * Copyright 2022-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -35,19 +35,6 @@ export class KlighdWebviewReopener {
             if (activeTextEditor) {
                 const uri = activeTextEditor.document.fileName
                 commands.executeCommand(command.diagramOpen, Uri.file(uri))
-            } else {
-                // Register this an active editor changed to open the diagram then.
-                this.toDispose.push(
-                    window.onDidChangeActiveTextEditor((editor) => {
-                        let uri
-                        if (editor) {
-                            uri = editor.document.uri
-                        }
-                        commands.executeCommand(command.diagramOpen, uri)
-                        // Remove listener again
-                        this.toDispose.forEach((element) => element.dispose())
-                    })
-                )
             }
         }
     }

applications/klighd-vscode/webpack.config.js

@@ -86,7 +86,7 @@ const webviewConfig = {
         filename: "webview.js",
         path: path.resolve(__dirname, "pack"),
     },
-    devtool: "nosources-source-map",
+    devtool: "eval-source-map",
 
     resolve: {
         extensions: [".ts", ".js"],

packages/klighd-core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kieler/klighd-core",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Core KLighD diagram visualization with Sprotty",
     "author": "KIELER <[email protected]>",
     "license": "EPL-2.0",
@@ -24,13 +24,15 @@
         "publish:next": "yarn publish --new-version \"$(semver $npm_package_version -i minor)-next.$(git rev-parse --short HEAD)\" --tag next --no-git-tag-version"
     },
     "dependencies": {
-        "@kieler/klighd-interactive": "^0.5.0",
+        "@kieler/klighd-interactive": "^0.6.0",
         "@types/file-saver": "^2.0.7",
+        "elkjs": "^0.8.2",
         "feather-icons": "^4.29.1",
         "file-saver": "^2.0.5",
         "inversify": "^6.0.2",
         "snabbdom": "^3.5.1",
         "sprotty": "^1.3.0",
+        "sprotty-elk": "^1.3.0",
         "sprotty-protocol": "^1.3.0"
     },
     "devDependencies": {

packages/klighd-core/src/di.config.ts

@@ -16,8 +16,10 @@
  */
 
 import { interactiveModule } from '@kieler/klighd-interactive/lib/interactive-module'
+import ElkConstructor from 'elkjs/lib/elk.bundled'
 import { Container, ContainerModule, interfaces } from 'inversify'
 import {
+    boundsModule,
     configureActionHandler,
     configureModelElement,
     ConsoleLogger,
@@ -44,6 +46,7 @@ import {
     viewportModule,
     ViewRegistry,
 } from 'sprotty'
+import { ElkFactory, ElkLayoutEngine, elkLayoutModule, ILayoutConfigurator } from 'sprotty-elk'
 import actionModule from './actions/actions-module'
 // import bookmarkModule from './bookmarks/bookmark-module';
 import { DISymbol } from './di.symbols'
@@ -53,6 +56,7 @@ import { KlighdHoverMouseListener } from './hover/hover'
 import { PopupModelProvider } from './hover/popup-provider'
 import { KlighdMouseTool } from './klighd-mouse-tool'
 import { KlighdSvgExporter } from './klighd-svg-exporter'
+import { KielerLayoutConfigurator } from './layout-config'
 import { KlighdModelViewer } from './model-viewer'
 import { ResetPreferencesAction, SetPreferencesAction } from './options/actions'
 import { optionsModule } from './options/options-module'
@@ -74,6 +78,16 @@ const kGraphDiagramModule = new ContainerModule(
         bind(TYPES.ModelSource).to(KlighdDiagramServer).inSingletonScope()
         rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope()
         rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn)
+
+        // required binding for elkjs to work
+        bind(TYPES.IModelLayoutEngine).toService(ElkLayoutEngine)
+
+        // Our own layout configurator that just copies the element's poperties as the layout options.
+        bind(KielerLayoutConfigurator).toSelf().inSingletonScope()
+        rebind(ILayoutConfigurator).to(KielerLayoutConfigurator).inSingletonScope()
+        const elkFactory: ElkFactory = () => new ElkConstructor({ algorithms: ['layered'] }) // See elkjs documentation
+        bind(ElkFactory).toConstantValue(elkFactory)
+
         rebind(TYPES.CommandStackOptions).toConstantValue({
             // Override the default animation speed to be 500 ms, as the default value is too quick.
             defaultDuration: 500,
@@ -126,6 +140,8 @@ export default function createContainer(widgetId: string): Container {
     const container = new Container()
     container.load(
         defaultModule,
+        boundsModule,
+        elkLayoutModule,
         selectModule,
         interactiveModule,
         viewportModule,
@@ -144,8 +160,9 @@ export default function createContainer(widgetId: string): Container {
     )
     // FIXME: bookmarkModule is currently broken due to wrong usage of Sprotty commands. action handling needs to be reimplemented for this to work.
     overrideViewerOptions(container, {
-        needsClientLayout: false,
-        needsServerLayout: true,
+        // These are ignored ignored and overwritten by the current needsClientLayout preference during model request.
+        needsClientLayout: false, // client layout = micro layout (Sprotty/Sprotty+KLighD)
+        needsServerLayout: true, // server layout = macro layout (ELK/elkjs). false here to not forward it to the Java server (the model source), but keep and handle it directly on the diagram server proxy manually
         baseDiv: widgetId,
         hiddenDiv: `${widgetId}_hidden`,
         // TODO: We should be able to completely deactivate Sprotty's zoom limits to not limit top down layout.

packages/klighd-core/src/diagram-server.ts

@@ -48,13 +48,18 @@ import {
 import {
     Action,
     ActionMessage,
+    ComputedBoundsAction,
     BringToFrontAction,
     findElement,
     generateRequestId,
+    IModelLayoutEngine,
+    RequestModelAction,
     GetViewportAction,
     RequestPopupModelAction,
     SelectAction,
+    SetModelAction,
     SetPopupModelAction,
+    SModelRoot,
     UpdateModelAction,
     ViewportResult,
 } from 'sprotty-protocol'
@@ -79,7 +84,7 @@ import {
 import { RequestKlighdPopupModelAction } from './hover/hover'
 import { PopupModelProvider } from './hover/popup-provider'
 import { RenderOptionsRegistry, ResizeToFit } from './options/render-options-registry'
-import { IncrementalDiagramGeneratorOption, PreferencesRegistry } from './preferences-registry'
+import { ClientLayoutOption, IncrementalDiagramGeneratorOption, PreferencesRegistry } from './preferences-registry'
 import { Connection, ServiceTypes, SessionStorage } from './services'
 import { SetSynthesisAction } from './syntheses/actions'
 import { UpdateDepthMapModelAction } from './update/update-depthmap-model'
@@ -106,6 +111,8 @@ export class KlighdDiagramServer extends DiagramServerProxy {
 
     @inject(DISymbol.BookmarkRegistry) @optional() private bookmarkRegistry: BookmarkRegistry
 
+    @inject(TYPES.IModelLayoutEngine) @optional() protected layoutEngine?: IModelLayoutEngine
+
     constructor(@inject(ServiceTypes.Connection) connection: Connection) {
         super()
         this._connection = connection
@@ -301,6 +308,53 @@ export class KlighdDiagramServer extends DiagramServerProxy {
         return false
     }
 
+    // Super class behavior, except taking the needsClientLayout preference into account instead of the client option.
+    override handleRequestModel(action: RequestModelAction): boolean {
+        const needsClientLayout = !!this.preferencesRegistry.getValue(ClientLayoutOption)
+        const needsServerLayout = !needsClientLayout
+
+        const newOptions = {
+            needsClientLayout,
+            needsServerLayout,
+            ...action.options,
+        }
+        const newAction = {
+            ...action,
+            options: newOptions,
+        }
+        this.forwardToServer(newAction)
+        return false
+    }
+
+    // Behavior adapted from the super class and modified to the behavior of the DiagramServer to allow this proxy to the Java diagram server to still be able to perform the layout locally.
+    handleComputedBounds(action: ComputedBoundsAction): boolean {
+        if (!this.preferencesRegistry.getValue(ClientLayoutOption)) {
+            return false
+        }
+        const root = this.currentRoot
+        this.computedBoundsApplicator.apply(root, action)
+        this.doSubmitModel(root, root.type === this.lastSubmittedModelType, action)
+        return false
+    }
+
+    // Behavior taken from the DiagramServer to allow this proxy to the Java diagram server to still be able to perform the layout locally.
+    private async doSubmitModel(newRoot: SModelRoot, update: boolean, cause?: Action): Promise<void> {
+        if (this.layoutEngine) {
+            newRoot = await this.layoutEngine.layout(newRoot)
+        }
+        const modelType = newRoot.type
+        if (cause && cause.kind === RequestModelAction.KIND) {
+            const { requestId } = cause as RequestModelAction
+            const response = SetModelAction.create(newRoot, requestId)
+            this.actionDispatcher.dispatch(response)
+        } else if (update && modelType === this.lastSubmittedModelType) {
+            this.actionDispatcher.dispatch(UpdateModelAction.create(newRoot))
+        } else {
+            this.actionDispatcher.dispatch(SetModelAction.create(newRoot))
+        }
+        this.lastSubmittedModelType = modelType
+    }
+
     handleRequestDiagramPiece(action: RequestDiagramPieceAction): void {
         this.forwardToServer(action)
     }

packages/klighd-core/src/layout-config.ts

@@ -0,0 +1,41 @@
+/*
+ * KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
+ *
+ * http://rtsys.informatik.uni-kiel.de/kieler
+ *
+ * Copyright 2024 by
+ * + Kiel University
+ *   + Department of Computer Science
+ *     + Real-Time and Embedded Systems Group
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { LayoutOptions } from 'elkjs'
+import { DefaultLayoutConfigurator } from 'sprotty-elk'
+import { SModelElement, SModelIndex } from 'sprotty-protocol'
+
+/**
+ * This layout configurator copies all layout options from the KGraph element's properties.
+ */
+export class KielerLayoutConfigurator extends DefaultLayoutConfigurator {
+    override apply(element: SModelElement, _index: SModelIndex): LayoutOptions | undefined {
+        // Only apply to elements with properties.
+        if ((element as any).properties === undefined) {
+            return undefined
+        }
+        const properties = (element as any).properties as Record<string, unknown>
+
+        // map properties to layout options and stringify values
+        const layoutOptions: LayoutOptions = {}
+        Object.entries(properties).forEach(([key, value]) => {
+            layoutOptions[key] = JSON.stringify(value)
+        })
+
+        return layoutOptions
+    }
+}

packages/klighd-core/src/options/components/option-inputs.tsx

@@ -35,17 +35,19 @@ type CheckOptionProps = BaseProps<boolean>
 /** Render a labeled checkbox input. */
 export function CheckOption(props: CheckOptionProps): VNode {
     return (
-        <label htmlFor={props.id} title={props.description ?? props.name}>
-            <input
-                class-options__input="true"
-                type="checkbox"
-                title={props.description ?? props.name}
-                id={props.id}
-                checked={props.value}
-                on-change={() => props.onChange(!props.value)}
-            />
-            {props.name}
-        </label>
+        <div class-options__column="true">
+            <label htmlFor={props.id} title={props.description ?? props.name}>
+                <input
+                    class-options__input="true"
+                    type="checkbox"
+                    title={props.description ?? props.name}
+                    id={props.id}
+                    checked={props.value}
+                    on-change={() => props.onChange(!props.value)}
+                />
+                {props.name}
+            </label>
+        </div>
     )
 }