Merge pull request #139 from DataFlowAnalysis/add-all

sebinside · web-flow · commit 7904f1599857 · 2025-07-10T11:07:06.000+02:00
Add feature to add and delete labels to selected nodes
diff --git a/src/features/labels/commands.ts b/src/features/labels/commands.ts
@@ -4,6 +4,8 @@ import {
     CommandExecutionContext,
     CommandReturn,
     ISnapper,
+    isSelected,
+    SChildElementImpl,
     SModelElementImpl,
     SNodeImpl,
     SParentElementImpl,
@@ -15,93 +17,146 @@ import { LabelAssignment, LabelTypeRegistry } from "./labelTypeRegistry";
 import { snapPortsOfNode } from "../dfdElements/portSnapper";
 import { EditorModeController } from "../editorMode/editorModeController";
 
-export interface AddLabelAssignmentAction extends Action {
-    kind: typeof AddLabelAssignmentAction.TYPE;
-    element: ContainsDfdLabels & SNodeImpl;
+interface LabelAction extends Action {
+    element?: ContainsDfdLabels & SNodeImpl;
     labelAssignment: LabelAssignment;
 }
-export namespace AddLabelAssignmentAction {
-    export const TYPE = "add-label-assignment";
-    export function create(
-        element: ContainsDfdLabels & SNodeImpl,
-        labelAssignment: LabelAssignment,
-    ): AddLabelAssignmentAction {
-        return {
-            kind: TYPE,
-            element,
-            labelAssignment,
-        };
-    }
-}
-
-@injectable()
-export class AddLabelAssignmentCommand extends Command {
-    public static readonly KIND = AddLabelAssignmentAction.TYPE;
-    private hasBeenAdded = false;
-
+abstract class LabelCommand extends Command {
     @inject(EditorModeController)
     @optional()
-    private readonly editorModeController?: EditorModeController;
+    protected readonly editorModeController?: EditorModeController;
+
+    protected elements?: SModelElementImpl[];
 
     constructor(
-        @inject(TYPES.Action) private action: AddLabelAssignmentAction,
-        @inject(TYPES.ISnapper) private snapper: ISnapper,
+        @inject(TYPES.Action) protected action: LabelAction,
+        @inject(TYPES.ISnapper) protected snapper: ISnapper,
     ) {
         super();
     }
 
-    execute(context: CommandExecutionContext): CommandReturn {
+    protected fetchElements(context: CommandExecutionContext): SModelElementImpl[] {
         if (this.editorModeController?.isReadOnly()) {
-            return context.root;
+            return [];
         }
 
-        // Check whether the element already has a label with the same type and value assigned
-        this.hasBeenAdded =
-            this.action.element.labels.find((as) => {
-                return (
-                    as.labelTypeId === this.action.labelAssignment.labelTypeId &&
-                    as.labelTypeValueId === this.action.labelAssignment.labelTypeValueId
-                );
-            }) === undefined;
+        const allElements = getAllElements(context.root.children);
+        const selectedElements = allElements.filter((element) => isSelected(element));
 
-        if (this.hasBeenAdded) {
-            this.action.element.labels.push(this.action.labelAssignment);
+        const selectionHasElement =
+            selectedElements.find((element) => element.id === this.action.element?.id) !== undefined;
+        if (selectionHasElement) {
+            return selectedElements;
         }
+        return this.action.element ? [this.action.element] : selectedElements;
+    }
+
+    protected addLabel(context: CommandExecutionContext) {
+        if (this.editorModeController?.isReadOnly()) {
+            return context.root;
+        }
+
+        if (this.elements === undefined) {
+            this.elements = this.fetchElements(context);
+        }
+
+        this.elements.forEach((element) => {
+            if (containsDfdLabels(element)) {
+                const hasBeenAdded =
+                    element.labels.find((as) => {
+                        return (
+                            as.labelTypeId === this.action.labelAssignment.labelTypeId &&
+                            as.labelTypeValueId === this.action.labelAssignment.labelTypeValueId
+                        );
+                    }) !== undefined;
+                if (!hasBeenAdded) {
+                    element.labels.push(this.action.labelAssignment);
+                    if (element instanceof SNodeImpl) {
+                        snapPortsOfNode(element, this.snapper);
+                    }
+                }
+            }
+        });
 
-        snapPortsOfNode(this.action.element, this.snapper);
         return context.root;
     }
 
-    undo(context: CommandExecutionContext): CommandReturn {
+    protected removeLabel(context: CommandExecutionContext) {
         if (this.editorModeController?.isReadOnly()) {
             return context.root;
         }
 
-        const labels = this.action.element.labels;
-        const idx = labels.indexOf(this.action.labelAssignment);
-        if (idx >= 0 && this.hasBeenAdded) {
-            labels.splice(idx, 1);
+        if (this.elements === undefined) {
+            this.elements = this.fetchElements(context);
         }
 
-        snapPortsOfNode(this.action.element, this.snapper);
+        this.elements.forEach((element) => {
+            if (containsDfdLabels(element)) {
+                const labels = element.labels;
+                const idx = labels.findIndex(
+                    (l) =>
+                        l.labelTypeId == this.action.labelAssignment.labelTypeId &&
+                        l.labelTypeValueId == this.action.labelAssignment.labelTypeValueId,
+                );
+                if (idx >= 0) {
+                    labels.splice(idx, 1);
+                    if (element instanceof SNodeImpl) {
+                        snapPortsOfNode(element, this.snapper);
+                    }
+                }
+            }
+        });
+
         return context.root;
     }
+}
+
+export interface AddLabelAssignmentAction extends LabelAction {
+    kind: typeof AddLabelAssignmentAction.TYPE;
+}
+export namespace AddLabelAssignmentAction {
+    export const TYPE = "add-label-assignment";
+    export function create(
+        labelAssignment: LabelAssignment,
+        element?: ContainsDfdLabels & SNodeImpl,
+    ): AddLabelAssignmentAction {
+        return {
+            kind: TYPE,
+            element,
+            labelAssignment,
+        };
+    }
+}
+
+@injectable()
+export class AddLabelAssignmentCommand extends LabelCommand {
+    public static readonly KIND = AddLabelAssignmentAction.TYPE;
+
+    constructor(@inject(TYPES.Action) action: AddLabelAssignmentAction, @inject(TYPES.ISnapper) snapper: ISnapper) {
+        super(action, snapper);
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        return this.addLabel(context);
+    }
+
+    undo(context: CommandExecutionContext): CommandReturn {
+        return this.removeLabel(context);
+    }
 
     redo(context: CommandExecutionContext): CommandReturn {
         return this.execute(context);
     }
 }
 
-export interface DeleteLabelAssignmentAction extends Action {
+export interface DeleteLabelAssignmentAction extends LabelAction {
     kind: typeof DeleteLabelAssignmentAction.TYPE;
-    element: ContainsDfdLabels & SNodeImpl;
-    labelAssignment: LabelAssignment;
 }
 export namespace DeleteLabelAssignmentAction {
     export const TYPE = "delete-label-assignment";
     export function create(
-        element: ContainsDfdLabels & SNodeImpl,
         labelAssignment: LabelAssignment,
+        element?: ContainsDfdLabels & SNodeImpl,
     ): DeleteLabelAssignmentAction {
         return {
             kind: TYPE,
@@ -112,46 +167,19 @@ export namespace DeleteLabelAssignmentAction {
 }
 
 @injectable()
-export class DeleteLabelAssignmentCommand extends Command {
+export class DeleteLabelAssignmentCommand extends LabelCommand {
     public static readonly KIND = DeleteLabelAssignmentAction.TYPE;
 
-    @inject(EditorModeController)
-    @optional()
-    private readonly editorModeController?: EditorModeController;
-
-    constructor(
-        @inject(TYPES.Action) private action: DeleteLabelAssignmentAction,
-        @inject(TYPES.ISnapper) private snapper: ISnapper,
-    ) {
-        super();
+    constructor(@inject(TYPES.Action) action: DeleteLabelAssignmentAction, @inject(TYPES.ISnapper) snapper: ISnapper) {
+        super(action, snapper);
     }
 
     execute(context: CommandExecutionContext): CommandReturn {
-        if (this.editorModeController?.isReadOnly()) {
-            return context.root;
-        }
-
-        const labels = this.action.element.labels;
-
-        const idx = labels.indexOf(this.action.labelAssignment);
-        if (idx >= 0) {
-            labels.splice(idx, 1);
-        }
-
-        snapPortsOfNode(this.action.element, this.snapper);
-        return context.root;
+        return this.removeLabel(context);
     }
 
     undo(context: CommandExecutionContext): CommandReturn {
-        if (this.editorModeController?.isReadOnly()) {
-            return context.root;
-        }
-
-        const labels = this.action.element.labels;
-        labels.push(this.action.labelAssignment);
-
-        snapPortsOfNode(this.action.element, this.snapper);
-        return context.root;
+        return this.addLabel(context);
     }
 
     redo(context: CommandExecutionContext): CommandReturn {
@@ -314,3 +342,14 @@ export class DeleteLabelTypeCommand extends Command {
         return this.execute(context);
     }
 }
+
+function getAllElements(elements: readonly SChildElementImpl[]): SModelElementImpl[] {
+    const elementsList: SModelElementImpl[] = [];
+    for (const element of elements) {
+        elementsList.push(element);
+        if ("children" in element) {
+            elementsList.push(...getAllElements(element.children));
+        }
+    }
+    return elementsList;
+}
diff --git a/src/features/labels/dropListener.ts b/src/features/labels/dropListener.ts
@@ -55,6 +55,6 @@ export class DfdLabelMouseDropListener extends MouseListener {
 
         const labelAssignment = JSON.parse(labelAssignmentJson) as LabelAssignment;
         this.logger.info(this, "Adding label assignment to element", dfdLabelElement, labelAssignment);
-        return [AddLabelAssignmentAction.create(dfdLabelElement, labelAssignment), CommitModelAction.create()];
+        return [AddLabelAssignmentAction.create(labelAssignment, dfdLabelElement), CommitModelAction.create()];
     }
 }
diff --git a/src/features/labels/labelRenderer.tsx b/src/features/labels/labelRenderer.tsx
@@ -48,7 +48,7 @@ export class DfdNodeLabelRenderer {
         const radius = height / 2;
 
         const deleteLabelHandler = () => {
-            const action = DeleteLabelAssignmentAction.create(node, label);
+            const action = DeleteLabelAssignmentAction.create(label, node);
             this.actionDispatcher.dispatch(action);
         };
 
diff --git a/src/features/labels/labelTypeEditor.ts b/src/features/labels/labelTypeEditor.ts
@@ -11,7 +11,7 @@ import {
     TYPES,
 } from "sprotty";
 import { LabelAssignment, LabelType, LabelTypeRegistry, LabelTypeValue } from "./labelTypeRegistry";
-import { DeleteLabelTypeAction, DeleteLabelTypeValueAction } from "./commands";
+import { AddLabelAssignmentAction, DeleteLabelTypeAction, DeleteLabelTypeValueAction } from "./commands";
 import { LABEL_ASSIGNMENT_MIME_TYPE } from "./dropListener";
 import { Action } from "sprotty-protocol";
 import { snapPortsOfNode } from "../dfdElements/portSnapper";
@@ -261,6 +261,39 @@ export class LabelTypeEditorUI extends AbstractUIExtension implements KeyListene
             event.dataTransfer?.setData(LABEL_ASSIGNMENT_MIME_TYPE, assignmentJson);
         };
 
+        valueInput.onclick = () => {
+            if (valueInput.getAttribute("clicked") === "true") {
+                return;
+            }
+
+            valueInput.setAttribute("clicked", "true");
+            setTimeout(() => {
+                if (valueInput.getAttribute("clicked") === "true") {
+                    this.actionDispatcher.dispatch(
+                        AddLabelAssignmentAction.create({
+                            labelTypeId: labelType.id,
+                            labelTypeValueId: labelTypeValue.id,
+                        }),
+                    );
+                    valueInput.removeAttribute("clicked");
+                }
+            }, 500);
+        };
+        valueInput.ondblclick = () => {
+            valueInput.removeAttribute("clicked");
+            valueInput.focus();
+        };
+        valueInput.onfocus = (event) => {
+            // we check for the single click here, since this gets triggered before the ondblclick event
+            if (valueInput.getAttribute("clicked") !== "true") {
+                event.preventDefault();
+                // the blur needs to occur with a delay, as otherwise chromium browsers prevent the drag
+                setTimeout(() => {
+                    valueInput.blur();
+                }, 0);
+            }
+        };
+
         valueElement.appendChild(valueInput);
 
         const deleteButton = document.createElement("button");
diff --git a/src/features/serialize/defaultDiagram.json b/src/features/serialize/defaultDiagram.json
@@ -209,7 +209,7 @@
                             "height": -1
                         },
                         "strokeWidth": 0,
-                        "selected": true,
+                        "selected": false,
                         "hoverFeedback": false,
                         "opacity": 1,
                         "behavior": "forward items",

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,6 @@ export class DfdLabelMouseDropListener extends MouseListener {`
`55`	`55`
`56`	`56`	`const labelAssignment = JSON.parse(labelAssignmentJson) as LabelAssignment;`
`57`	`57`	`this.logger.info(this, "Adding label assignment to element", dfdLabelElement, labelAssignment);`
`58`		`- return [AddLabelAssignmentAction.create(dfdLabelElement, labelAssignment), CommitModelAction.create()];`
	`58`	`+ return [AddLabelAssignmentAction.create(labelAssignment, dfdLabelElement), CommitModelAction.create()];`
`59`	`59`	`}`
`60`	`60`	`}`