Refactor Web Editor

frontend/webEditor/.gitignore

@@ -1,2 +1,2 @@
 node_modules
-dist
+dist

frontend/webEditor/.husky/pre-commit

@@ -2,8 +2,8 @@
 set -e
 
 # Only run when WebEditor files are staged (optional guard)
-if git diff --cached --name-only --diff-filter=ACMRT | grep -q '^Frontend/WebEditor/'; then
+if git diff --cached --name-only --diff-filter=ACMRT | grep -q '^frontend/webEditor/'; then
   REPO_ROOT="$(git rev-parse --show-toplevel)"
-  cd "$REPO_ROOT/Frontend/WebEditor"
+  cd "$REPO_ROOT/frontend/webEditor"
   npx lint-staged
-fi
+fi

frontend/webEditor/package.json

@@ -1,30 +1,30 @@
 {
     "name": "data-flow-analysis-web-editor",
-    "version": "0.1.0",
+    "version": "0.0.0",
     "private": true,
     "repository": {
         "type": "git",
-        "url": "https://github.com/DataFlowAnalysis/WebEditor.git"
+        "url": "https://github.com/DataFlowAnalysis/OnlineEditor.git"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.35.0",
+        "@eslint/eslintrc": "^3.3.3",
+        "@eslint/js": "^9.39.1",
         "@fortawesome/fontawesome-free": "^7.0.0",
-        "@vscode/codicons": "^0.0.39",
-        "eslint": "^9.32.0",
+        "@vscode/codicons": "^0.0.43",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "husky": "^9.1.7",
         "inversify": "^6.2.2",
-        "lint-staged": "^16.1.6",
+        "lint-staged": "^16.2.7",
         "monaco-editor": "^0.52.2",
-        "prettier": "^3.6.2",
+        "prettier": "^3.7.4",
         "reflect-metadata": "^0.2.2",
         "sprotty": "^1.4.0",
         "sprotty-elk": "^1.4.0",
         "sprotty-protocol": "^1.4.0",
         "typescript": "^5.8.3",
-        "typescript-eslint": "^8.44.0",
-        "vite": "^7.1.7"
+        "typescript-eslint": "^8.48.1",
+        "vite": "^7.2.6"
     },
     "scripts": {
         "dev": "vite",

frontend/webEditor/src/common/commonStyling.css → frontend/webEditor/src/accordionUiExtension/accordion.css

@@ -1,29 +1,3 @@
-.ui-float {
-    position: absolute;
-    border-radius: 10px;
-    background-color: var(--color-primary);
-}
-
-/* Styling for keyboard symbols.
-   Copied from the example at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
-   with adapted colors */
-kbd {
-    background-color: var(--color-primary);
-    color: var(--color-foreground);
-
-    border-radius: 3px;
-    border: 1px solid var(--color-foreground);
-    box-shadow:
-        0 1px 1px var(--color-foreground),
-        0 2px 0 0 var(--color-background) inset;
-    display: inline-block;
-    font-size: 0.85em;
-    font-weight: 700;
-    line-height: 1;
-    padding: 2px 4px;
-    white-space: nowrap;
-}
-
 /* accordion */
 .accordion-content {
     display: grid;
@@ -47,7 +21,7 @@ kbd {
     transition:
         grid-template-rows 300ms ease,
         /* ease-out animation: https://cubic-bezier.com/#0,.7,.4,1 */ /* mirrored version of the curve above */
-            grid-template-columns 300ms cubic-bezier(0, 0.7, 0.4, 1),
+        grid-template-columns 300ms cubic-bezier(0, 0.7, 0.4, 1),
         padding-top 300ms ease;
 
     /* space between accordion button and the content, otherwise they would be directly next to each other without any spacing */
@@ -68,26 +42,26 @@ kbd {
     -webkit-user-select: none;
     user-select: none;
 
-    /* Default orientation of the arrow: pointing down */
-    --arrow-scale: 1;
+    /* Default orientation of the chevron: pointing down */
+    --chevron-scale: 1;
 }
 
-.accordion-button.flip-arrow {
-    /* Default orientation of the arrow: pointing up */
-    --arrow-scale: -1;
+.accordion-button.flip-chevron {
+    /* Default orientation of the chevron: pointing up */
+    --chevron-scale: -1;
 }
 
-.accordion-button.cevron-right {
+.accordion-button.chevron-right {
     /* space for the icon */
     padding-right: 2em;
 }
 
-.accordion-button.cevron-left {
+.accordion-button.chevron-left {
     /* space for the icon */
     padding-left: 2em;
 }
 
-.accordion-button.cevron-right::after {
+.accordion-button.chevron-right::after {
     content: "";
     background-image: url("@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg");
     right: 1em;
@@ -103,10 +77,10 @@ kbd {
 
     vertical-align: text-top;
     transition: transform 500ms ease;
-    transform: scaleY(var(--arrow-scale));
+    transform: scaleY(var(--chevron-scale));
 }
 
-.accordion-button.cevron-left::before {
+.accordion-button.chevron-left::before {
     content: "";
     background-image: url("@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg");
     left: 1em;
@@ -122,15 +96,15 @@ kbd {
 
     vertical-align: text-top;
     transition: transform 500ms ease;
-    transform: scaleY(var(--arrow-scale));
+    transform: scaleY(var(--chevron-scale));
 }
 
 .accordion-state:checked ~ label .accordion-button::after {
-    /* flip arrow in y direction */
-    transform: scaleY(calc(var(--arrow-scale) * -1));
+    /* flip chevron in y direction */
+    transform: scaleY(calc(var(--chevron-scale) * -1));
 }
 
 .accordion-state:checked ~ label .accordion-button::before {
-    /* flip arrow in y direction */
-    transform: scaleY(calc(var(--arrow-scale) * -1));
+    /* flip chevron in y direction */
+    transform: scaleY(calc(var(--chevron-scale) * -1));
 }

frontend/webEditor/src/accordionUiExtension/index.ts

@@ -0,0 +1,63 @@
+import { AbstractUIExtension } from "sprotty";
+import { injectable } from "inversify";
+import "./accordion.css";
+
+/**
+ * Base class for an expandable accordion floating element
+ */
+@injectable()
+export abstract class AccordionUiExtension extends AbstractUIExtension {
+    constructor(
+        private chevronPosition: "left" | "right",
+        private chevronOrientation: "up" | "down",
+    ) {
+        super();
+    }
+
+    protected initializeContents(containerElement: HTMLElement): void {
+        containerElement.classList.add("ui-float");
+
+        // create hidden checkbox used for toggling
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        const checkboxId = this.id() + "-checkbox";
+        checkbox.id = checkboxId;
+        checkbox.classList.add("accordion-state");
+        checkbox.hidden = true;
+
+        // create clickable label for the checkbox
+        const label = document.createElement("label");
+        label.htmlFor = checkboxId;
+        // create header inside label
+        const header = document.createElement("div");
+        header.classList.add(`chevron-${this.chevronPosition}`, "accordion-button");
+        if (this.chevronOrientation === "up") {
+            header.classList.add("flip-chevron");
+        }
+        this.initializeHeaderContent(header);
+        label.appendChild(header);
+
+        // create content holder and initialize it
+        const accordionContent = document.createElement("div");
+        accordionContent.classList.add("accordion-content");
+        const contentHolder = document.createElement("div");
+        this.initializeHidableContent(contentHolder);
+        accordionContent.appendChild(contentHolder);
+
+        containerElement.appendChild(checkbox);
+        containerElement.appendChild(label);
+        containerElement.appendChild(accordionContent);
+    }
+
+    /**
+     * Initializes the hidable content of the accordion element
+     * @param contentElement The containing element of the content
+     */
+    protected abstract initializeHidableContent(contentElement: HTMLElement): void;
+
+    /**
+     * Initializes the header of the accordion element
+     * @param contentElement The containing element of the header
+     */
+    protected abstract initializeHeaderContent(headerElement: HTMLElement): void;
+}

frontend/webEditor/src/annotation/DFDNodeAnnotation.ts

@@ -0,0 +1,6 @@
+export interface DfdNodeAnnotation {
+    message: string;
+    color?: string;
+    icon?: string;
+    tfg?: number;
+}

frontend/webEditor/src/assets/commonStyling.css

@@ -0,0 +1,25 @@
+.ui-float {
+    position: absolute;
+    border-radius: 10px;
+    background-color: var(--color-primary);
+}
+
+/* Styling for keyboard symbols.
+   Copied from the example at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
+   with adapted colors */
+kbd {
+    background-color: var(--color-primary);
+    color: var(--color-foreground);
+
+    border-radius: 3px;
+    border: 1px solid var(--color-foreground);
+    box-shadow:
+        0 1px 1px var(--color-foreground),
+        0 2px 0 0 var(--color-background) inset;
+    display: inline-block;
+    font-size: 0.85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+}

frontend/webEditor/src/page.css → frontend/webEditor/src/assets/page.css

@@ -15,11 +15,20 @@ body {
    and absolute top/left/bottom/right values. */
 #sprotty {
     position: relative;
+    height: 100vh;
+    width: 100vw;
+    /*temporary*/
+    font-family:
+        Helvetica Neue,
+        Helvetica,
+        Arial,
+        sans-serif;
+    padding: 0;
 }
 
 svg.sprotty-graph {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     outline: none;
 }