implement new preference to change between client and server layout

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

@@ -160,9 +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, {
-        // TODO: need some configuration switch to enable/disable client layout
-        needsClientLayout: true, // client layout = micro layout (Sprotty/Sprotty+KLighD)
-        needsServerLayout: false, // 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
+        // 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

@@ -84,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'
@@ -308,9 +308,27 @@ 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.viewerOptions.needsServerLayout) {
+        if (!this.preferencesRegistry.getValue(ClientLayoutOption)) {
             return false
         }
         const root = this.currentRoot

packages/klighd-core/src/options/general-panel.tsx

@@ -19,9 +19,11 @@
 import { inject, injectable, postConstruct } from 'inversify'
 import { VNode } from 'snabbdom'
 import { html } from 'sprotty' // eslint-disable-line @typescript-eslint/no-unused-vars
+import { RefreshDiagramAction } from '@kieler/klighd-interactive/lib/actions'
 import { DISymbol } from '../di.symbols'
 import { FeatherIcon } from '../feather-icons-snabbdom/feather-icons-snabbdom'
 import {
+    ClientLayoutOption,
     IncrementalDiagramGeneratorOption,
     PreferencesRegistry,
     ShouldSelectDiagramOption,
@@ -123,6 +125,16 @@ export class GeneralPanel extends SidebarPanel {
                     ) : (
                         ''
                     )}
+                    {(this.renderOptionsRegistry.getValue(DebugOptions) as boolean) ? (
+                        <CheckOption
+                            id={ClientLayoutOption.ID}
+                            name={ClientLayoutOption.NAME}
+                            value={this.preferencesRegistry.getValue(ClientLayoutOption)}
+                            onChange={this.handlePreferenceChange.bind(this, ClientLayoutOption.ID)}
+                        />
+                    ) : (
+                        ''
+                    )}
                 </div>
             </div>
         )
@@ -134,6 +146,14 @@ export class GeneralPanel extends SidebarPanel {
 
     private handlePreferenceChange(key: string, newValue: any) {
         this.actionDispatcher.dispatch(SetPreferencesAction.create([{ id: key, value: newValue }]))
+        if (key === ClientLayoutOption.ID) {
+            this.actionDispatcher.dispatch(
+                RefreshDiagramAction.create({
+                    needsClientLayout: newValue,
+                    needsServerLayout: !newValue,
+                })
+            )
+        }
     }
 
     get icon(): VNode {

packages/klighd-core/src/options/render-options-registry.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021-2022 by
+ * Copyright 2021-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -509,8 +509,6 @@ export class DebugOptions implements RenderOption {
     readonly description = 'Whether debug options should be shown.'
 
     currentValue = false
-
-    debug = true
 }
 
 export interface RenderOptionType {

packages/klighd-core/src/preferences-registry.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021 by
+ * Copyright 2021-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -87,6 +87,31 @@ export class IncrementalDiagramGeneratorOption implements Preference {
     debug = true
 }
 
+/**
+ * Switch between client-only and server-only layout.
+ */
+export class ClientLayoutOption implements Preference {
+    static readonly ID: string = 'diagram.clientLayout'
+
+    static readonly NAME: string = 'Client Layout'
+
+    readonly description: string | undefined = 'Switch between client-only and server-only layout.'
+
+    readonly id: string = ClientLayoutOption.ID
+
+    readonly name: string = ClientLayoutOption.NAME
+
+    readonly type: TransformationOptionType = TransformationOptionType.CHECK
+
+    readonly initialValue: boolean = false
+
+    currentValue = false
+
+    notifyServer = true
+
+    debug = true
+}
+
 export interface PreferenceType {
     readonly ID: string
     readonly NAME: string
@@ -116,6 +141,7 @@ export class PreferencesRegistry extends Registry {
         this.register(ShouldSelectDiagramOption)
         this.register(ShouldSelectTextOption)
         this.register(IncrementalDiagramGeneratorOption)
+        this.register(ClientLayoutOption)
     }
 
     @postConstruct()
@@ -184,6 +210,7 @@ export class PreferencesRegistry extends Registry {
                 'diagram.shouldSelectDiagram': this.getValue(ShouldSelectDiagramOption),
                 'diagram.shouldSelectText': this.getValue(ShouldSelectTextOption),
                 'diagram.incrementalDiagramGenerator': this.getValue(IncrementalDiagramGeneratorOption),
+                'diagram.clientLayout': this.getValue(ClientLayoutOption),
             }
             this.connection.sendNotification(NotificationType.SetPreferences, obj)
         })

packages/klighd-interactive/src/actions.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2020-2021 by
+ * Copyright 2020-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -17,22 +17,24 @@
 // We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
 /* eslint-disable no-redeclare */
 
-import { Action } from 'sprotty-protocol'
+import { Action, JsonMap } from 'sprotty-protocol'
 import { DeleteConstraint } from './layered/constraint-types'
 
 /**
  * A sprotty action to refresh the diagram. Sent from client to server.
  */
 export interface RefreshDiagramAction extends Action {
     kind: typeof RefreshDiagramAction.KIND
+    options?: JsonMap
 }
 
 export namespace RefreshDiagramAction {
     export const KIND = 'refreshDiagram'
 
-    export function create(): RefreshDiagramAction {
+    export function create(options?: JsonMap): RefreshDiagramAction {
         return {
             kind: KIND,
+            options,
         }
     }
 }

schema/klighd/actions/refreshDiagram.json

@@ -3,12 +3,23 @@
     "$schema": "http://json-schema.org/draft-07/schema#",
     "title": "refreshDiagram",
     "type": "object",
-    "allOf": [{"$ref": "/kieler/klighd-vscode/tree/main/schema/sprotty/action.json"}],
+    "allOf": [{ "$ref": "/kieler/klighd-vscode/tree/main/schema/sprotty/action.json" }],
     "required": ["kind"],
     "properties": {
         "kind": {
             "type": "string",
             "enum": ["refreshDiagram"]
+        },
+        "options": {
+            "type": "object",
+            "properties": {
+                "needsClientLayout": {
+                    "type": "boolean"
+                },
+                "needsServerLayout": {
+                    "type": "boolean"
+                }
+            }
         }
     }
-}
+}

schema/klighd/messages/preferencesSetPreferences.json

@@ -21,6 +21,9 @@
                 },
                 "diagram.incrementalDiagramGenerator": {
                     "type": "boolean"
+                },
+                "diagram.clientLayout": {
+                    "type": "boolean"
                 }
             }
         }

schema/sprotty/actions/requestModel.json

@@ -1,9 +1,9 @@
 {
     "$id": "https://github.com/kieler/klighd-vscode/tree/main/schema/sprotty/actions/requestModel.json",
     "$schema": "http://json-schema.org/draft-07/schema#",
-    "title": "requestBounds",
+    "title": "requestModel",
     "type": "object",
-    "allOf": [{"$ref": "/kieler/klighd-vscode/tree/main/schema/sprotty/actions/action.json"}],
+    "allOf": [{ "$ref": "/kieler/klighd-vscode/tree/main/schema/sprotty/actions/action.json" }],
     "required": ["kind", "options", "requestId"],
     "properties": {
         "kind": {
@@ -32,4 +32,4 @@
             "type": "string"
         }
     }
-}
+}