mka review (WIP)

kieler · May 14, 2024 · 5926d34 · 5926d34
1 parent d6a0487
commit 5926d34
Show file tree

Hide file tree

Showing 23 changed files with 492 additions and 254 deletions.
diff --git a/extension/src-diagram-snippets/actions.ts b/extension/src-diagram-snippets/actions.ts
@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2022 by
+ * Copyright 2022-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group

diff --git a/extension/src-diagram-snippets/css/diagram.css b/extension/src-diagram-snippets/css/diagram.css
@@ -1,220 +1,55 @@
+/*
+ * KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
+ *
+ * http://rtsys.informatik.uni-kiel.de/kieler
+ *
+ * Copyright 2023 by
+ * + Kiel University
+ *   + Department of Computer Science
+ *     + Real-Time and Embedded Systems Group
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 @import "./options.css";
 @import "./sidebar.css";
 @import "./theme.css";
-@import "./sprotty.css";
-@import "./sprotty-vscode.css";
+@import "./stpa-diagram.css";
+@import "./fta-diagram.css";
+@import "./context-menu.css";
 
-.vscode-high-contrast .stpa-node[aspect="0"], .vscode-high-contrast .stpa-edge-arrow[aspect="0"] {
-    fill: #AD0000;
-}
-.vscode-high-contrast .stpa-node[aspect="1"], .vscode-high-contrast .stpa-edge-arrow[aspect="1"] {
-    fill: #A85400;
-}
-.vscode-high-contrast .stpa-node[aspect="2"], .vscode-high-contrast .stpa-edge-arrow[aspect="2"] {
-    fill: #006600;
-}
-.vscode-high-contrast .stpa-node[aspect="3"], .vscode-high-contrast .stpa-edge-arrow[aspect="3"] {
-    fill: purple;
-}
-.vscode-high-contrast .stpa-node[aspect="4"], .vscode-high-contrast .stpa-edge-arrow[aspect="4"] {
-    fill: #0054A8;
-}
-.vscode-high-contrast .stpa-node[aspect="5"], .vscode-high-contrast .stpa-edge-arrow[aspect="5"] {
-    fill: #006161;
-}
-.vscode-high-contrast .stpa-node[aspect="6"], .vscode-high-contrast .stpa-edge-arrow[aspect="6"] {
-    fill: #616100;
-}
-.vscode-high-contrast .stpa-node[aspect="7"], .vscode-high-contrast .stpa-edge-arrow[aspect="7"] {
-    fill: #2f4f4f;
-}
-
-
-.vscode-high-contrast .stpa-edge[aspect="0"], .vscode-high-contrast .stpa-edge-arrow[aspect="0"] {
-    stroke: #AD0000;
-}
-.vscode-high-contrast .stpa-edge[aspect="1"], .vscode-high-contrast .stpa-edge-arrow[aspect="1"] {
-    stroke: #A85400;
-}
-.vscode-high-contrast .stpa-edge[aspect="2"], .vscode-high-contrast .stpa-edge-arrow[aspect="2"] {
-    stroke: #006600;
-}
-.vscode-high-contrast .stpa-edge[aspect="3"], .vscode-high-contrast .stpa-edge-arrow[aspect="3"] {
-    stroke: purple;
-}
-.vscode-high-contrast .stpa-edge[aspect="4"], .vscode-high-contrast .stpa-edge-arrow[aspect="4"] {
-    stroke: #0054A8;
-}
-.vscode-high-contrast .stpa-edge[aspect="5"], .vscode-high-contrast .stpa-edge-arrow[aspect="5"] {
-    stroke: #006161;
-}
-.vscode-high-contrast .stpa-edge[aspect="6"], .vscode-high-contrast .stpa-edge-arrow[aspect="6"] {
-    stroke: #616100;
-}
-.vscode-high-contrast .stpa-edge[aspect="7"], .vscode-high-contrast .stpa-edge-arrow[aspect="7"] {
-    stroke: #2f4f4f;
+.header {
+    text-decoration-line: underline;
+    font-weight: bold;
 }
 
-
+/* sprotty and black/white colors */
 .vscode-high-contrast .print-node {
     fill: black;
     stroke: white;
 }
 
-.vscode-high-contrast .print-edge {
-    stroke: white;
-}
-
-.vscode-high-contrast .print-edge-arrow {
-    fill: white;
-    stroke: white;
-}
-
 .vscode-high-contrast .sprotty-node {
     fill: #0c598d;
     stroke: black;
 }
 
-
-
-
-.vscode-dark .stpa-node[aspect="0"], .vscode-dark .stpa-edge-arrow[aspect="0"] {
-    fill: #AD0000;
-}
-.vscode-dark .stpa-node[aspect="1"], .vscode-dark .stpa-edge-arrow[aspect="1"] {
-    fill: #A85400;
-}
-.vscode-dark .stpa-node[aspect="2"], .vscode-dark .stpa-edge-arrow[aspect="2"] {
-    fill: #006600;
-}
-.vscode-dark .stpa-node[aspect="3"], .vscode-dark .stpa-edge-arrow[aspect="3"] {
-    fill: purple;
-}
-.vscode-dark .stpa-node[aspect="4"], .vscode-dark .stpa-edge-arrow[aspect="4"] {
-    fill: #0054A8;
-}
-.vscode-dark .stpa-node[aspect="5"], .vscode-dark .stpa-edge-arrow[aspect="5"] {
-    fill: #006161;
-}
-.vscode-dark .stpa-node[aspect="6"], .vscode-dark .stpa-edge-arrow[aspect="6"] {
-    fill: #616100;
-}
-.vscode-dark .stpa-node[aspect="7"], .vscode-dark .stpa-edge-arrow[aspect="7"] {
-    fill: #2f4f4f;
-}
-
-
-.vscode-dark .stpa-edge[aspect="0"], .vscode-dark .stpa-edge-arrow[aspect="0"] {
-    stroke: #AD0000;
-}
-.vscode-dark .stpa-edge[aspect="1"], .vscode-dark .stpa-edge-arrow[aspect="1"] {
-    stroke: #A85400;
-}
-.vscode-dark .stpa-edge[aspect="2"], .vscode-dark .stpa-edge-arrow[aspect="2"] {
-    stroke: #006600;
-}
-.vscode-dark .stpa-edge[aspect="3"], .vscode-dark .stpa-edge-arrow[aspect="3"] {
-    stroke: purple;
-}
-.vscode-dark .stpa-edge[aspect="4"], .vscode-dark .stpa-edge-arrow[aspect="4"] {
-    stroke: #0054A8;
-}
-.vscode-dark .stpa-edge[aspect="5"], .vscode-dark .stpa-edge-arrow[aspect="5"] {
-    stroke: #006161;
-}
-.vscode-dark .stpa-edge[aspect="6"], .vscode-dark .stpa-edge-arrow[aspect="6"] {
-    stroke: #616100;
-}
-.vscode-dark .stpa-edge[aspect="7"], .vscode-dark .stpa-edge-arrow[aspect="7"] {
-    stroke: #2f4f4f;
-}
-
-
 .vscode-dark .print-node {
-    fill: black;
-    stroke: white;
-}
-
-.vscode-dark .print-edge {
-    stroke: white;
-}
-
-.vscode-dark .print-edge-arrow {
-    fill: white;
-    stroke: white;
+    fill: var(--dark-node);
+    stroke: var(--vscode-editor-foreground);
 }
 
 .vscode-dark .sprotty-node {
     fill: #0c598d;
     stroke: black;
 }
 
-
-
-
-.vscode-light .stpa-node[aspect="0"], .vscode-light .stpa-edge-arrow[aspect="0"] {
-    fill: #ff7a7a;
-}
-.vscode-light .stpa-node[aspect="1"], .vscode-light .stpa-edge-arrow[aspect="1"] {
-    fill: #ffa852;
-}
-.vscode-light .stpa-node[aspect="2"], .vscode-light .stpa-edge-arrow[aspect="2"] {
-    fill: #00eb00;
-}
-.vscode-light .stpa-node[aspect="3"], .vscode-light .stpa-edge-arrow[aspect="3"] {
-    fill: #ff6bff;
-}
-.vscode-light .stpa-node[aspect="4"], .vscode-light .stpa-edge-arrow[aspect="4"] {
-    fill: #66b3ff;
-}
-.vscode-light .stpa-node[aspect="5"], .vscode-light .stpa-edge-arrow[aspect="5"] {
-    fill: #00cccc;
-}
-.vscode-light .stpa-node[aspect="6"], .vscode-light .stpa-edge-arrow[aspect="6"] {
-    fill: #cccc00;
-}
-.vscode-light .stpa-node[aspect="7"], .vscode-light .stpa-edge-arrow[aspect="7"] {
-    fill: #8fbcbc;
-}
-
-
-.vscode-light .stpa-edge[aspect="0"], .vscode-light .stpa-edge-arrow[aspect="0"] {
-    stroke: #ff7a7a;
-}
-.vscode-light .stpa-edge[aspect="1"], .vscode-light .stpa-edge-arrow[aspect="1"] {
-    stroke: #ffa852;
-}
-.vscode-light .stpa-edge[aspect="2"], .vscode-light .stpa-edge-arrow[aspect="2"] {
-    stroke: #00eb00;
-}
-.vscode-light .stpa-edge[aspect="3"], .vscode-light .stpa-edge-arrow[aspect="3"] {
-    stroke: #ff6bff;
-}
-.vscode-light .stpa-edge[aspect="4"], .vscode-light .stpa-edge-arrow[aspect="4"] {
-    stroke: #66b3ff;
-}
-.vscode-light .stpa-edge[aspect="5"], .vscode-light .stpa-edge-arrow[aspect="5"] {
-    stroke: #00cccc;
-}
-.vscode-light .stpa-edge[aspect="6"], .vscode-light .stpa-edge-arrow[aspect="6"]{
-    stroke: #cccc00;
-}
-.vscode-light .stpa-edge[aspect="7"], .vscode-light .stpa-edge-arrow[aspect="7"] {
-    stroke: #8fbcbc;
-}
-
-
 .vscode-light .print-node {
-    fill: white;
-    stroke: black;
-}
-
-.vscode-light .print-edge {
-    stroke: black;
-}
-
-.vscode-light .print-edge-arrow {
-    fill: black;
+    fill: var(--light-node);
     stroke: black;
 }
 
@@ -223,93 +58,93 @@
     stroke: black;
 }
 
-
-
-
-
-
-.vscode-light .focused {
-    background-color: #e4e6f1;
+.print-edge {
+    stroke: var(--vscode-editor-foreground);
 }
 
-.vscode-dark .focused {
-    background-color: #37373d;
-}
-
-.stpa-node {
-    stroke: black;
-}
-
-.parent-node {
-    fill-opacity: 0.1;
+.print-edge-arrow {
+    fill: var(--vscode-editor-foreground);
+    stroke: var(--vscode-editor-foreground);
 }
 
+/* Selected node */
 .sprotty-node.selected {
     stroke-width: 2;
     stroke: var(--vscode-button-hover-background);
 }
 
-.parent-selected {
-    fill-opacity: 0.4;
+.node-selected {
+    stroke-width: 5;
+    stroke: var(--vscode-button-hover-background);
 }
 
-.hidden {
-    opacity: 0.4;
+/* greyed out element */
+.greyed-out {
+    opacity: 0.2;
 }
 
+/* label */
 body[class='vscode-light'] .sprotty-label {
     fill: black;
     stroke-width: 0;
+    cursor: default;
 }
+
 .sprotty-label {
     fill: var(--vscode-editorActiveLineNumber-foreground);
     stroke-width: 0;
+    font-family: Arial, sans-serif;
+    cursor: default;
 }
 
 .sprotty-button {
     fill: var(--vscode-editorActiveLineNumber-foreground);
 }
 
+/* Sprotty edges */
 body[class='vscode-light'] .sprotty-edge .sprotty-label {
     fill: black
 }
+
 .sprotty-edge .sprotty-label {
     fill: var(--vscode-editorActiveLineNumber-foreground);
 }
 
 body[class='vscode-light'] .sprotty-edge {
-    fill:none;
+    fill: none;
     stroke: black;
     stroke-width: 2px;
 }
+
 .sprotty-edge {
-    fill:none;
+    fill: none;
     stroke: var(--vscode-editorActiveLineNumber-foreground);
     stroke-width: 2px;
 }
 
 body[class='vscode-light'] .sprotty-edge-arrow {
-    fill:black
+    fill: black
 }
+
 .sprotty-edge-arrow {
-    fill:var(--vscode-editorActiveLineNumber-foreground);
+    fill: var(--vscode-editorActiveLineNumber-foreground);
 }
 
-.sprotty-edge > .sprotty-routing-handle {
+.sprotty-edge>.sprotty-routing-handle {
     fill: var(--vscode-editor-selectionBackground);
     stroke: none;
     z-index: 1000;
 }
 
-.sprotty-edge > .sprotty-routing-handle[data-kind='line'] {
+.sprotty-edge>.sprotty-routing-handle[data-kind='line'] {
     opacity: 0.35;
 }
 
-.sprotty-edge > .sprotty-routing-handle.selected {
+.sprotty-edge>.sprotty-routing-handle.selected {
     fill: var(--vscode-editor-selectionHighlightBackground);
 }
 
-.sprotty-edge > .sprotty-routing-handle.mouseover {
+.sprotty-edge>.sprotty-routing-handle.mouseover {
     stroke: var(--vscode-editor-symbolHighlightBackground);
     stroke-width: 1;
 }
@@ -321,4 +156,4 @@ body[class='vscode-light'] .sprotty-edge-arrow {
 .sprotty-hidden {
     width: 0px;
     height: 0px;
-}
+}
diff --git a/extension/src-diagram-snippets/css/options.css b/extension/src-diagram-snippets/css/options.css
@@ -169,9 +169,9 @@
 .options__selection {
     padding: 4px 6px;
 
-    border: 2px solid var(--stpa-color-sidebar-trigger-background-hover);
+    border: 1px solid var(--vscode-editor-foreground);
     border-radius: var(--stpa-border-radius-default);
-    background: var(--stpa-color-sidebar-trigger-background-active);
+    background: var(--vscode-input-background);
     color: var(--stpa-color-sidebar-font-primary);
     cursor: pointer;
     font-size: 1rem;