Feat: Implement Constraint Selection, Incoming/Outgoing Selection

Author: 01Parzival10

src/features/constraintMenu/ConstraintMenu.ts

@@ -1,7 +1,7 @@
-import { inject, injectable, optional } from "inversify";
+import { inject, injectable, optional } from "inversify";
 import "./constraintMenu.css";
 import { AbstractUIExtension, IActionDispatcher, LocalModelSource, TYPES } from "sprotty";
-import { ConstraintRegistry } from "./constraintRegistry";
+import { Constraint, ConstraintRegistry } from "./constraintRegistry";
 
 // Enable hover feature that is used to show validation errors.
 // Inline completions are enabled to allow autocompletion of keywords and inputs/label types/label values.
@@ -19,6 +19,7 @@ import { LabelTypeRegistry } from "../labels/labelTypeRegistry";
 import { EditorModeController } from "../editorMode/editorModeController";
 import { Switchable, ThemeManager } from "../settingsMenu/themeManager";
 import { AnalyzeDiagramAction } from "../serialize/analyze";
+import { ChooseConstraintAction } from "./actions";
 
 @injectable()
 export class ConstraintMenu extends AbstractUIExtension implements Switchable {
@@ -28,6 +29,7 @@ export class ConstraintMenu extends AbstractUIExtension implements Switchable {
     private editor?: monaco.editor.IStandaloneCodeEditor;
     private tree: AutoCompleteTree;
     private forceReadOnly: boolean;
+    private optionsMenu?: HTMLDivElement;
 
     constructor(
         @inject(ConstraintRegistry) private readonly constraintRegistry: ConstraintRegistry,
@@ -72,6 +74,10 @@ export class ConstraintMenu extends AbstractUIExtension implements Switchable {
                 </div>
             </label>
         `;
+
+        const title = containerElement.querySelector("#constraint-menu-expand-title") as HTMLElement;
+        title.appendChild(this.buildOptionsButton());
+
         const accordionContent = document.createElement("div");
         accordionContent.classList.add("accordion-content");
         const contentDiv = document.createElement("div");
@@ -225,4 +231,105 @@ export class ConstraintMenu extends AbstractUIExtension implements Switchable {
     switchTheme(useDark: boolean): void {
         this.editor?.updateOptions({ theme: useDark ? "vs-dark" : "vs" });
     }
+
+    private buildOptionsButton(): HTMLElement {
+        const btn = document.createElement("button");
+        btn.id = "constraint-options-button";
+        btn.title = "Filter…";
+        btn.innerHTML = "⋮";                // or insert a font-awesome icon
+        btn.onclick = () => this.toggleOptionsMenu();
+        return btn;
+    }
+
+    /** show or hide the menu, generate checkboxes on the fly */
+    private toggleOptionsMenu(): void {
+        if (this.optionsMenu) {
+            this.optionsMenu.remove();
+            this.optionsMenu = undefined;
+            return;
+        }
+
+        // 1) create container
+        this.optionsMenu = document.createElement("div");
+        this.optionsMenu.id = "constraint-options-menu";
+
+        // 2) add the “All constraints” checkbox at the top
+        const allConstraints = document.createElement("label");
+        allConstraints.classList.add("options-item");
+
+        const allCb = document.createElement("input");
+        allCb.type = "checkbox";
+        allCb.value = "ALL";
+        // initially checked if no specific constraint is selected
+        allCb.checked = this.constraintRegistry.getSelectedConstraints().includes("ALL");
+
+        allCb.onchange = () => {
+            if (!this.optionsMenu) return;
+            if (allCb.checked) {
+                // uncheck every other constraint-checkbox
+                this.optionsMenu
+                    .querySelectorAll<HTMLInputElement>("input[type=checkbox]")
+                    .forEach(cb => {
+                        if (cb !== allCb) cb.checked = false;
+                    });
+                // dispatch with empty array to mean “all”
+                this.dispatcher.dispatch(
+                    ChooseConstraintAction.create(["ALL"])
+                );
+            } else {
+                this.dispatcher.dispatch(
+                    ChooseConstraintAction.create([])
+                );
+            }
+            
+        };
+
+        allConstraints.appendChild(allCb);
+        allConstraints.appendChild(document.createTextNode("All constraints"));
+        this.optionsMenu.appendChild(allConstraints);
+
+        // 2) pull your dynamic items (replace with your real API)
+        const items = this.constraintRegistry.getConstraintList();
+
+        // 3) for each item build a checkbox
+        items.forEach(item => {
+            const label = document.createElement("label");
+            label.classList.add("options-item");
+
+            const cb = document.createElement("input");
+            cb.type = "checkbox";
+            cb.value = item.name;
+            cb.checked = this.constraintRegistry.getSelectedConstraints().includes(cb.value);
+
+            cb.onchange = () => {
+                if (cb.checked) allCb.checked = false;
+
+                const selected = Array.from(
+                    this.optionsMenu!.querySelectorAll<HTMLInputElement>("input[type=checkbox]:checked")
+                ).map(cb => cb.value);
+
+                // dispatch your action with either an array or
+                // a comma-joined string—whatever your action expects
+                this.dispatcher.dispatch(
+                    ChooseConstraintAction.create(selected)
+                );
+            };
+
+            label.appendChild(cb);
+            label.appendChild(document.createTextNode(item.name));
+            this.optionsMenu!.appendChild(label);
+        });
+
+        this.editorContainer.appendChild(this.optionsMenu);
+
+        // optional: click-outside handler
+        const onClickOutside = (e: MouseEvent) => {
+            if (this.optionsMenu && !this.optionsMenu.contains(e.target as Node)
+                && !(e.target as Element).matches("#constraint-options-button")) {
+                this.toggleOptionsMenu();
+                document.removeEventListener("click", onClickOutside);
+            }
+        };
+        setTimeout(() => document.addEventListener("click", onClickOutside), 0);
+    }
 }

src/features/constraintMenu/actions.ts

@@ -0,0 +1,14 @@
+import { Action } from "sprotty-protocol";
+
+export interface ChooseConstraintAction extends Action {
+    kind: typeof ChooseConstraintAction.KIND;
+    names: string[];
+}
+
+export namespace ChooseConstraintAction {
+    export const KIND = "choose-constraint";
+
+    export function create(names: string[]): ChooseConstraintAction {
+        return { kind: KIND, names };
+    }
+}

src/features/constraintMenu/commands.ts

@@ -0,0 +1,83 @@
+import { inject, injectable } from "inversify";
+import {
+    Command,
+    CommandExecutionContext,
+    CommandReturn,
+    TYPES,
+} from "sprotty";
+import { DfdNodeImpl } from "../dfdElements/nodes";
+import {
+    ChooseConstraintAction
+} from "./actions";
+import { getBasicType} from "sprotty-protocol";
+import { AnnnotationsManager } from "../settingsMenu/annotationManager";
+import { ConstraintRegistry } from "./constraintRegistry";
+
+
+@injectable()
+export class ChooseConstraintCommand extends Command {
+    static readonly KIND = ChooseConstraintAction.KIND;
+
+    constructor(
+        @inject(TYPES.Action) private action: ChooseConstraintAction,
+        @inject(AnnnotationsManager) private annnotationsManager: AnnnotationsManager,
+        @inject(ConstraintRegistry) private constraintRegistry: ConstraintRegistry
+    ) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        this.annnotationsManager.clearTfgs();
+        const names = this.action.names;
+        this.constraintRegistry.setSelectedConstraints(names);
+        const nodes = context.root.children.filter((node) => getBasicType(node) === "node") as DfdNodeImpl[];
+        if (names.includes("NO")) {
+            nodes.forEach((node) => {
+                node.setColor("#1D1C22");
+            });
+            return context.root;
+        }
+
+        nodes.forEach((node) => {
+            const annotations = node.annotations!;
+            let wasAdjusted = false;
+            if (names.includes("ALL")) {
+                annotations.forEach((annotation) => {
+                    if (annotation.message.startsWith("Constraint")) {
+                        wasAdjusted = true;
+                        node.setColor(annotation.color!);
+                    }
+                });
+            }
+            names.forEach((name) => {
+                annotations.forEach((annotation) => {
+                    if (annotation.message.startsWith("Constraint " + name)) {
+                        node.setColor(annotation.color!);
+                        wasAdjusted = true;
+                        this.annnotationsManager.addTfg(annotation.tfg!);
+                    }
+                });
+            });
+            console.log("Node" + node.text + "Was adjusted:  " + wasAdjusted);
+            if (!wasAdjusted) node.setColor("#1D1C22");
+        });
+
+        if (!names.includes("ALL") && names.length > 0) {
+            nodes.forEach((node) => {
+                const inTFG = node.annotations!.filter((annotation) =>
+                    this.annnotationsManager.getSelectedTfgs().has(annotation.tfg!),
+                );
+                if (inTFG.length > 0) node.setColor("#77777A", false);
+            });
+        }
+
+        return context.root;
+    }
+
+    undo(context: CommandExecutionContext): CommandReturn {
+        return context.root;
+    }
+    redo(context: CommandExecutionContext): CommandReturn {
+        return context.root;
+    }
+}

src/features/constraintMenu/constraintMenu.css

@@ -102,3 +102,40 @@ div.constraint-menu {
     align-items: center;
     gap: 5px;
 }
+
+#constraint-options-button {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    background: transparent;
+    border: none;
+    font-size: 1.2em;
+    cursor: pointer;
+    color: var(--color-foreground);
+    padding: 2px;
+}
+
+#constraint-options-menu {
+    position: absolute;
+    top: 30px; /* just under the header */
+    right: 6px;
+    background: var(--color-background);
+    border: 1px solid var(--color-foreground);
+    border-radius: 4px;
+    padding: 8px;
+    z-index: 100;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+
+#constraint-options-menu .options-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 4px;
+    font-size: 0.9em;
+    color: var(--color-foreground);
+}
+
+#constraint-options-menu .options-item:last-child {
+    margin-bottom: 0;
+}

src/features/constraintMenu/constraintRegistry.ts

@@ -11,9 +11,16 @@ export interface Constraint {
 export class ConstraintRegistry {
     private constraints: Constraint[] = [];
     private updateCallbacks: (() => void)[] = [];
+    private selectedConstraints: string[] = ["ALL"];
 
     public setConstraints(constraints: string): void {
-        this.constraints = constraints.split("\r?\n").map(this.constraintFromLine);
+        const lines = constraints
+            .trim()
+            .split(/\r?\n(?=-)/)
+            .map(line => line.trim())
+            .filter(line => line.length > 0);
+
+        this.constraints = lines.map(this.constraintFromLine);
         this.constraintListChanged();
     }
 
@@ -26,6 +33,14 @@ export class ConstraintRegistry {
         this.constraintListChanged();
     }
 
+    public setSelectedConstraints(constraints: string[]): void {
+        this.selectedConstraints = constraints;
+    }
+
+    public getSelectedConstraints(): string[] {
+        return this.selectedConstraints;
+    }
+
     private constraintFromLine(line: string): Constraint {
         const parts = line.split(" ");
         if (parts.length < 2) {

src/features/constraintMenu/di.config.ts

@@ -1,19 +1,23 @@
 import { ContainerModule } from "inversify";
 import { EDITOR_TYPES } from "../../utils";
 import { ConstraintMenu } from "./ConstraintMenu";
-import { TYPES } from "sprotty";
+import { configureCommand, TYPES } from "sprotty";
 import { ConstraintRegistry } from "./constraintRegistry";
 import { SWITCHABLE } from "../settingsMenu/themeManager";
+import { ChooseConstraintCommand } from "./commands";
 
 // This module contains an UI extension that adds a tool palette to the editor.
 // This tool palette allows the user to create new nodes and edges.
 // Additionally it contains the tools that are used to create the nodes and edges.
 
-export const constraintMenuModule = new ContainerModule((bind) => {
+export const constraintMenuModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(ConstraintRegistry).toSelf().inSingletonScope();
 
     bind(ConstraintMenu).toSelf().inSingletonScope();
     bind(TYPES.IUIExtension).toService(ConstraintMenu);
     bind(EDITOR_TYPES.DefaultUIElement).toService(ConstraintMenu);
     bind(SWITCHABLE).toService(ConstraintMenu);
+
+    const context = { bind, unbind, isBound, rebind };
+    configureCommand(context, ChooseConstraintCommand);
 });