Show available inputs when editing the behaviour of output ports

src/features/dfdElements/di.config.ts

@@ -11,6 +11,9 @@ import {
     SRoutingHandleImpl,
     TYPES,
     EmptyView,
+    configureActionHandler,
+    EditLabelAction,
+    EditLabelActionHandler,
 } from "sprotty";
 import { FunctionNodeImpl, FunctionNodeView, IONodeImpl, IONodeView, StorageNodeImpl, StorageNodeView } from "./nodes";
 import { ArrowEdgeImpl, ArrowEdgeView } from "./edges";
@@ -19,11 +22,17 @@ import { FilledBackgroundLabelView, DfdPositionalLabelView } from "./labels";
 import { PortAwareSnapper } from "./portSnapper";
 
 import "./styles.css";
+import { CustomEditLabelUI } from "./editUi";
 
 export const dfdElementsModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+
     rebind(TYPES.ISnapper).to(PortAwareSnapper).inSingletonScope();
+    configureActionHandler(context, EditLabelAction.KIND, EditLabelActionHandler);
+
+    bind(CustomEditLabelUI).toSelf().inSingletonScope();
+    bind(TYPES.IUIExtension).toService(CustomEditLabelUI);
 
-    const context = { bind, unbind, isBound, rebind };
     configureModelElement(context, "graph", SGraphImpl, SGraphView);
     configureModelElement(context, "node:storage", StorageNodeImpl, StorageNodeView);
     configureModelElement(context, "node:function", FunctionNodeImpl, FunctionNodeView);

src/features/dfdElements/editUi.ts

@@ -0,0 +1,30 @@
+import { EditLabelUI, SChildElementImpl } from "sprotty";
+import { DfdOutputPortImpl } from "./ports";
+
+export class CustomEditLabelUI extends EditLabelUI {
+    private inputLabelDiv: HTMLDivElement | undefined;
+
+    protected initializeContents(containerElement: HTMLElement) {
+        super.initializeContents(containerElement);
+
+        this.inputLabelDiv = document.createElement("div");
+        this.inputLabelDiv.classList.add("labelEditAvailableInputs");
+        this.containerElement.appendChild(this.inputLabelDiv);
+    }
+
+    protected applyTextContents(): void {
+        if (!this.inputLabelDiv) {
+            throw new Error("inputLabelDiv is undefined");
+        }
+
+        if (this.label instanceof SChildElementImpl && this.label.parent instanceof DfdOutputPortImpl) {
+            const availableInputs = this.label.parent.getAvailableInputs();
+            this.inputLabelDiv.innerText = `Available inputs: ${availableInputs.join(",")}`;
+            this.inputLabelDiv.style.visibility = "visible";
+        } else {
+            this.inputLabelDiv.style.visibility = "hidden";
+        }
+
+        super.applyTextContents();
+    }
+}

src/features/dfdElements/ports.tsx

@@ -14,6 +14,7 @@ import { Bounds, SLabel, SPort } from "sprotty-protocol";
 import { injectable } from "inversify";
 import { VNode } from "snabbdom";
 import { DynamicChildrenPort } from "./dynamicChildren";
+import { ArrowEdgeImpl } from "./edges";
 
 const defaultPortFeatures = [...SPortImpl.DEFAULT_FEATURES, moveFeature, deletableFeature];
 const portSize = 7;
@@ -32,6 +33,28 @@ export class DfdInputPortImpl extends SPortImpl {
             height: portSize,
         };
     }
+
+    getName(): string | undefined {
+        const edgeNames: string[] = [];
+
+        this.incomingEdges.forEach((edge) => {
+            if (edge instanceof ArrowEdgeImpl) {
+                console.log("labellol", edge);
+                const name = edge.editableLabel?.text;
+                if (name !== undefined) {
+                    edgeNames.push(name);
+                }
+            } else {
+                return undefined;
+            }
+        });
+
+        if (edgeNames.length === 0) {
+            return undefined;
+        } else {
+            return edgeNames.join("");
+        }
+    }
 }
 
 export class DfdInputPortView extends ShapeView {
@@ -98,6 +121,14 @@ export class DfdOutputPortImpl extends DynamicChildrenPort implements WithEditab
 
         return undefined;
     }
+
+    getAvailableInputs(): string[] {
+        return this.parent.children
+            .filter((child) => child instanceof DfdInputPortImpl)
+            .map((child) => child as DfdInputPortImpl)
+            .map((child) => child.getName())
+            .filter((name) => name !== undefined) as string[];
+    }
 }
 
 @injectable()

src/features/dfdElements/styles.css

@@ -69,19 +69,32 @@
 
 .sprotty-port .port-text {
     font-size: 4pt;
-    font-family: monospace;
+}
+
+/* Label edit UI */
+
+.label-edit .labelEditAvailableInputs {
+    color: white;
+    position: absolute;
+    top: -20px;
+    left: 0px;
+    right: 0px;
+    background-color: var(--color-primary);
 }
 
 /* All nodes/misc */
 
 .sprotty-node.selected circle,
 .sprotty-node.selected rect,
 .sprotty-node.selected line,
-.sprotty-edge.selected,
-.sprotty-port.selected rect {
+.sprotty-edge.selected {
     stroke-width: 2;
 }
 
+.sprotty-port.selected rect {
+    stroke-width: 1;
+}
+
 text {
     stroke-width: 0;
     fill: var(--color-foreground);

src/index.ts

@@ -15,7 +15,6 @@ import {
     exportModule,
     hoverModule,
     labelEditModule,
-    labelEditUiModule,
     modelSourceModule,
     moveModule,
     routingModule,
@@ -67,7 +66,7 @@ container.load(
     zorderModule,
     undoRedoModule,
     labelEditModule,
-    labelEditUiModule,
+    // labelEditUiModule is not added here, because a custom UI is provided by the dfdElementsModule down below
     edgeEditModule,
     exportModule,
     edgeLayoutModule,