From 5926d3474b0b36c5587cdf711b066c875d3a3767 Mon Sep 17 00:00:00 2001 From: Jette Petzold Date: Tue, 14 May 2024 12:12:27 +0200 Subject: [PATCH] mka review (WIP) --- extension/src-diagram-snippets/actions.ts | 2 +- .../src-diagram-snippets/css/diagram.css | 279 +++----------- .../src-diagram-snippets/css/options.css | 4 +- .../src-diagram-snippets/css/sidebar.css | 5 +- .../src-diagram-snippets/css/stpa-diagram.css | 355 ++++++++++++++++++ extension/src-diagram-snippets/css/theme.css | 36 +- extension/src-diagram-snippets/html.tsx | 5 +- extension/src-diagram-snippets/jsx.ts | 2 + extension/src-diagram-snippets/main.ts | 2 +- .../src-diagram-snippets/mouseListener.ts | 2 +- .../src-language-server/snippets/actions.ts | 2 +- .../snippets/snippet-diagram-server.ts | 8 +- .../snippets/snippet-model.ts | 2 +- .../snippets/stpa-snippets.ts | 4 +- .../stpa/diagram/diagram-generator.ts | 3 +- extension/src-webview/css/diagram.css | 17 + extension/src-webview/css/sidebar.css | 2 +- extension/src-webview/snippets/actions.ts | 4 +- .../src-webview/snippets/snippet-models.ts | 2 +- .../src-webview/snippets/snippet-registry.ts | 2 +- .../src-webview/snippets/snippet-renderer.tsx | 2 +- extension/src/actions.ts | 4 +- extension/src/diagram-snippets-webview.ts | 2 +- 23 files changed, 492 insertions(+), 254 deletions(-) create mode 100644 extension/src-diagram-snippets/css/stpa-diagram.css diff --git a/extension/src-diagram-snippets/actions.ts b/extension/src-diagram-snippets/actions.ts index f0ab4736..9bc8b74d 100644 --- 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 index d1726b38..ab4f78df 100644 --- a/extension/src-diagram-snippets/css/diagram.css +++ b/extension/src-diagram-snippets/css/diagram.css @@ -1,147 +1,46 @@ +/* + * 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 { @@ -149,72 +48,8 @@ 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; -} +} \ No newline at end of file diff --git a/extension/src-diagram-snippets/css/options.css b/extension/src-diagram-snippets/css/options.css index bdf319b7..590d0a90 100644 --- 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; diff --git a/extension/src-diagram-snippets/css/sidebar.css b/extension/src-diagram-snippets/css/sidebar.css index 7c66350e..02b251b6 100644 --- a/extension/src-diagram-snippets/css/sidebar.css +++ b/extension/src-diagram-snippets/css/sidebar.css @@ -15,7 +15,7 @@ * SPDX-License-Identifier: EPL-2.0 */ -.sidebar { + .sidebar { box-sizing: border-box; position: fixed; top: 0; @@ -33,6 +33,7 @@ box-shadow: var(--stpa-sidebar-shadow); color: var(--stpa-color-sidebar-font-primary); font-size: var(--stpa-font-size-base); + font-family: Arial, sans-serif; transition: transform var(--stpa-transition); transform: translateX(100%); @@ -101,4 +102,4 @@ .sidebar__toggle-button--active { --background: var(--stpa-color-sidebar-trigger-background-active); -} \ No newline at end of file +} diff --git a/extension/src-diagram-snippets/css/stpa-diagram.css b/extension/src-diagram-snippets/css/stpa-diagram.css new file mode 100644 index 00000000..6512724e --- /dev/null +++ b/extension/src-diagram-snippets/css/stpa-diagram.css @@ -0,0 +1,355 @@ +/* + * KIELER - Kiel Integrated Environment for Layout Eclipse RichClient + * + * http://rtsys.informatik.uni-kiel.de/kielerMontreal, Québec, Kanada + * + * 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 "./theme.css"; + +.stpa-node { + stroke: black; +} + +/* Feedback edges */ +.feedback-edge { + stroke-dasharray: 5, 5; +} + +/* High contrast theme */ +.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; +} + +/* Dark theme */ +.vscode-dark .stpa-node[aspect="0"] { + fill: var(--dark-node); + stroke: var(--stpa-loss-dark); + stroke-width: 2; +} + +.vscode-dark .stpa-node[aspect="1"] { + fill: var(--dark-node); + stroke: var(--stpa-hazard-dark); + stroke-width: 2; +} + +.vscode-dark .stpa-node[aspect="2"] { + fill: var(--dark-node); + stroke: var(--stpa-sys-constraint-dark); + stroke-width: 2; +} + +.vscode-dark .stpa-node[aspect="3"] { + fill: var(--dark-node); + stroke: var(--stpa-responsibility-dark); + stroke-width: 2; +} + +.vscode-dark .stpa-node[aspect="4"] { + fill: var(--dark-node); + stroke: var(--stpa-uca-dark); + stroke-width: 2; +} + +.vscode-dark .stpa-node[aspect="5"] { + fill: var(--dark-node); + stroke: var(--stpa-cont-constraint-dark); + stroke-width: 2; +} + +.vscode-dark .stpa-node[aspect="6"] { + fill: var(--dark-node); + stroke: var(--stpa-scenario-dark); + stroke-width: 2; +} + +.vscode-dark .stpa-node[aspect="7"] { + fill: var(--dark-node); + stroke: var(--stpa-safety-requirement-dark); + stroke-width: 2; +} + + +.vscode-dark .stpa-edge-arrow[aspect="0"] { + fill: var(--stpa-loss-dark); +} + +.vscode-dark .stpa-edge-arrow[aspect="1"] { + fill: var(--stpa-hazard-dark); +} + +.vscode-dark .stpa-edge-arrow[aspect="2"] { + fill: var(--stpa-sys-constraint-dark); +} + +.vscode-dark .stpa-edge-arrow[aspect="3"] { + fill: var(--stpa-responsibility-dark); +} + +.vscode-dark .stpa-edge-arrow[aspect="4"] { + fill: var(--stpa-uca-dark); +} + +.vscode-dark .stpa-edge-arrow[aspect="5"] { + fill: var(--stpa-cont-constraint-dark); +} + +.vscode-dark .stpa-edge-arrow[aspect="6"] { + fill: var(--stpa-scenario-dark); +} + +.vscode-dark .stpa-edge-arrow[aspect="7"] { + fill: var(--stpa-safety-requirement-dark); +} + + +.vscode-dark .stpa-edge[aspect="0"], +.vscode-dark .stpa-edge-arrow[aspect="0"] { + stroke: var(--stpa-loss-dark); +} + +.vscode-dark .stpa-edge[aspect="1"], +.vscode-dark .stpa-edge-arrow[aspect="1"] { + stroke: var(--stpa-hazard-dark); +} + +.vscode-dark .stpa-edge[aspect="2"], +.vscode-dark .stpa-edge-arrow[aspect="2"] { + stroke: var(--stpa-sys-constraint-dark); +} + +.vscode-dark .stpa-edge[aspect="3"], +.vscode-dark .stpa-edge-arrow[aspect="3"] { + stroke: var(--stpa-responsibility-dark); +} + +.vscode-dark .stpa-edge[aspect="4"], +.vscode-dark .stpa-edge-arrow[aspect="4"] { + stroke: var(--stpa-uca-dark); +} + +.vscode-dark .stpa-edge[aspect="5"], +.vscode-dark .stpa-edge-arrow[aspect="5"] { + stroke: var(--stpa-cont-constraint-dark); +} + +.vscode-dark .stpa-edge[aspect="6"], +.vscode-dark .stpa-edge-arrow[aspect="6"] { + stroke: var(--stpa-scenario-dark); +} + +.vscode-dark .stpa-edge[aspect="7"], +.vscode-dark .stpa-edge-arrow[aspect="7"] { + stroke: var(--stpa-safety-requirement-dark); +} + +/* Light theme */ +.vscode-light .stpa-node[aspect="0"] { + fill: var(--light-node); + stroke: var(--stpa-loss-light); + stroke-width: 2; +} + +.vscode-light .stpa-node[aspect="1"] { + fill: var(--light-node); + stroke: var(--stpa-hazard-light); + stroke-width: 2; +} + +.vscode-light .stpa-node[aspect="2"] { + fill: var(--light-node); + stroke: var(--stpa-sys-constraint-light); + stroke-width: 2; +} + +.vscode-light .stpa-node[aspect="3"] { + fill: var(--light-node); + stroke: var(--stpa-responsibility-light); + stroke-width: 2; +} + +.vscode-light .stpa-node[aspect="4"] { + fill: var(--light-node); + stroke: var(--stpa-uca-light); + stroke-width: 2; +} + +.vscode-light .stpa-node[aspect="5"] { + fill: var(--light-node); + stroke: var(--stpa-cont-constraint-light); + stroke-width: 2; +} + +.vscode-light .stpa-node[aspect="6"] { + fill: var(--light-node); + stroke: var(--stpa-scenario-light); + stroke-width: 2; +} + +.vscode-light .stpa-node[aspect="7"] { + fill: var(--light-node); + stroke: var(--stpa-safety-requirement-light); + stroke-width: 2; +} + + +.vscode-light .stpa-edge-arrow[aspect="0"] { + fill: var(--stpa-loss-light); +} + +.vscode-light .stpa-edge-arrow[aspect="1"] { + fill: var(--stpa-hazard-light); +} + +.vscode-light .stpa-edge-arrow[aspect="2"] { + fill: var(--stpa-sys-constraint-light); +} + +.vscode-light .stpa-edge-arrow[aspect="3"] { + fill: var(--stpa-responsibility-light); +} + +.vscode-light .stpa-edge-arrow[aspect="4"] { + fill: var(--stpa-uca-light); +} + +.vscode-light .stpa-edge-arrow[aspect="5"] { + fill: var(--stpa-cont-constraint-light); +} + +.vscode-light .stpa-edge-arrow[aspect="6"] { + fill: var(--stpa-scenario-light); +} + +.vscode-light .stpa-edge-arrow[aspect="7"] { + fill: var(--stpa-safety-requirement-light); +} + + +.vscode-light .stpa-edge[aspect="0"], +.vscode-light .stpa-edge-arrow[aspect="0"] { + stroke: var(--stpa-loss-light); +} + +.vscode-light .stpa-edge[aspect="1"], +.vscode-light .stpa-edge-arrow[aspect="1"] { + stroke: var(--stpa-hazard-light); +} + +.vscode-light .stpa-edge[aspect="2"], +.vscode-light .stpa-edge-arrow[aspect="2"] { + stroke: var(--stpa-sys-constraint-light); +} + +.vscode-light .stpa-edge[aspect="3"], +.vscode-light .stpa-edge-arrow[aspect="3"] { + stroke: var(--stpa-responsibility-light); +} + +.vscode-light .stpa-edge[aspect="4"], +.vscode-light .stpa-edge-arrow[aspect="4"] { + stroke: var(--stpa-uca-light); +} + +.vscode-light .stpa-edge[aspect="5"], +.vscode-light .stpa-edge-arrow[aspect="5"] { + stroke: var(--stpa-cont-constraint-light); +} + +.vscode-light .stpa-edge[aspect="6"], +.vscode-light .stpa-edge-arrow[aspect="6"] { + stroke: var(--stpa-scenario-light); +} + +.vscode-light .stpa-edge[aspect="7"], +.vscode-light .stpa-edge-arrow[aspect="7"] { + stroke: var(--stpa-safety-requirement-light); +} \ No newline at end of file diff --git a/extension/src-diagram-snippets/css/theme.css b/extension/src-diagram-snippets/css/theme.css index cf663b74..335f5cb6 100644 --- a/extension/src-diagram-snippets/css/theme.css +++ b/extension/src-diagram-snippets/css/theme.css @@ -15,7 +15,7 @@ * SPDX-License-Identifier: EPL-2.0 */ -:root { + :root { /* Behavior and sizing variables */ --stpa-transition: 200ms ease-in-out; --stpa-border-radius-default: 4px; @@ -27,4 +27,38 @@ but rather scoped to where they should be applied). Allows for finer theme control. */ --stpa-color-sidebar-background: var(--vscode-sideBar-background); --stpa-color-sidebar-trigger-background: var(--vscode-sideBar-background); + + --stpa-color-sidebar-trigger-background-hover: var(--vscode-sideBar-background); + --stpa-color-sidebar-trigger-background-active: var(--vscode-sideBar-background); + --stpa-color-sidebar-hover-background: rgba(0, 0, 0, 0.15); + /* --stpa-color-sidebar-font-primary: hsl(0, 0%, 12%); + --stpa-color-sidebar-icon-primary: hsl(0, 0%, 24%); + --stpa-color-primary: #0552b5; */ + + + /* black/white colors */ + --dark-node: #ffffff00; + --light-node: white; + --highlight-node: #FF2828; + + /* Colors for stpa aspects */ + --stpa-loss-dark: #AD0000; + --stpa-hazard-dark: #A85400; + --stpa-sys-constraint-dark: #006600; + --stpa-responsibility-dark: purple; + --stpa-uca-dark: #0054A8; + --stpa-cont-constraint-dark: #006161; + --stpa-scenario-dark: #616100; + --stpa-safety-requirement-dark: #2f4f4f; + + --stpa-loss-light: #FF2828; + --stpa-hazard-light: #ffa852; + --stpa-sys-constraint-light: #00eb00; + --stpa-responsibility-light: #ff6bff; + --stpa-uca-light: #66b3ff; + --stpa-cont-constraint-light: #00cccc; + --stpa-scenario-light: #cccc00; + --stpa-safety-requirement-light: #8fbcbc; + + /* background: #feffe8 */ } diff --git a/extension/src-diagram-snippets/html.tsx b/extension/src-diagram-snippets/html.tsx index b66c1475..9c7e1ccb 100644 --- a/extension/src-diagram-snippets/html.tsx +++ b/extension/src-diagram-snippets/html.tsx @@ -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 @@ -24,7 +24,6 @@ const placeholderForSnippetsID = 'snippetPlaceholder'; export const textFieldID = 'snippetAddTextField'; export const buttonID = 'snippetAddBnt'; -// TODO: instead of defining an input tag, a msg could be send to the extension when clicking on the button. the extension can call windows.showInputBox/createInputBox or using a QuickInput /** * PASTA panel for the activity bar. * Consists of a text field and button to add custom diagram snippets. @@ -65,4 +64,4 @@ export function addSnippetsToPanel(snippets: VNode[]): void { }); } } -} \ No newline at end of file +} diff --git a/extension/src-diagram-snippets/jsx.ts b/extension/src-diagram-snippets/jsx.ts index d1531629..943aa016 100644 --- a/extension/src-diagram-snippets/jsx.ts +++ b/extension/src-diagram-snippets/jsx.ts @@ -14,6 +14,8 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ +/** needed to directly define HTML elements (see html.tsx file) */ + import { VNodeData, JsxVNodeChildren, JsxVNodeChild, jsx, FunctionComponent, VNode } from "snabbdom"; diff --git a/extension/src-diagram-snippets/main.ts b/extension/src-diagram-snippets/main.ts index cb701e4d..533d5449 100644 --- a/extension/src-diagram-snippets/main.ts +++ b/extension/src-diagram-snippets/main.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/mouseListener.ts b/extension/src-diagram-snippets/mouseListener.ts index cb91054e..9216a2e1 100644 --- a/extension/src-diagram-snippets/mouseListener.ts +++ b/extension/src-diagram-snippets/mouseListener.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-language-server/snippets/actions.ts b/extension/src-language-server/snippets/actions.ts index 67988d59..86165c16 100644 --- a/extension/src-language-server/snippets/actions.ts +++ b/extension/src-language-server/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-language-server/snippets/snippet-diagram-server.ts b/extension/src-language-server/snippets/snippet-diagram-server.ts index 074ca57b..99d6b32b 100644 --- a/extension/src-language-server/snippets/snippet-diagram-server.ts +++ b/extension/src-language-server/snippets/snippet-diagram-server.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 @@ -131,11 +131,7 @@ export abstract class SnippetDiagramServer extends DiagramServer { */ protected async parseable(snippet: LanguageSnippet): Promise { const graph = await this.snippetGraphGenerator.generateSnippetRoot(snippet); - if (graph) { - return true; - } else { - return false; - } + return graph ? true : false; } /** diff --git a/extension/src-language-server/snippets/snippet-model.ts b/extension/src-language-server/snippets/snippet-model.ts index c97a6bc8..058c47db 100644 --- a/extension/src-language-server/snippets/snippet-model.ts +++ b/extension/src-language-server/snippets/snippet-model.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-language-server/snippets/stpa-snippets.ts b/extension/src-language-server/snippets/stpa-snippets.ts index bcc156ce..ab895472 100644 --- a/extension/src-language-server/snippets/stpa-snippets.ts +++ b/extension/src-language-server/snippets/stpa-snippets.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 @@ -190,7 +190,7 @@ export class CustomCSSnippet extends STPALanguageSnippet { } /** - * Check whether the control structrue caption and graph name exists. If not, adds it to the baseCode. + * Check whether the control structure caption and graph name exist. If not, add them to the baseCode. */ protected checkCaption(): void { const splits = this.baseCode.split(/[^a-zA-Z0-9\{\}]/); diff --git a/extension/src-language-server/stpa/diagram/diagram-generator.ts b/extension/src-language-server/stpa/diagram/diagram-generator.ts index e3467239..787da486 100644 --- a/extension/src-language-server/stpa/diagram/diagram-generator.ts +++ b/extension/src-language-server/stpa/diagram/diagram-generator.ts @@ -15,12 +15,11 @@ * SPDX-License-Identifier: EPL-2.0 */ -import { AstNode, LangiumDocumentFactory, ParseResult } from "langium"; +import { AstNode, LangiumDocumentFactory } from "langium"; import { GeneratorContext, IdCache, IdCacheImpl } from "langium-sprotty"; import { SModelElement, SModelRoot, SNode } from "sprotty-protocol"; import { CancellationToken } from "vscode-languageserver"; import { URI } from 'vscode-uri'; -import { TextDocument } from "vscode-languageserver-textdocument"; import { Model } from "../../generated/ast"; import { LanguageSnippet, SnippetGraphGenerator } from "../../snippets/snippet-model"; import { StpaDocumentBuilder } from "../../stpa-document-builder"; diff --git a/extension/src-webview/css/diagram.css b/extension/src-webview/css/diagram.css index afdfae53..ab4f78df 100644 --- a/extension/src-webview/css/diagram.css +++ b/extension/src-webview/css/diagram.css @@ -1,3 +1,20 @@ +/* + * 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"; diff --git a/extension/src-webview/css/sidebar.css b/extension/src-webview/css/sidebar.css index 88416738..02b251b6 100644 --- a/extension/src-webview/css/sidebar.css +++ b/extension/src-webview/css/sidebar.css @@ -102,4 +102,4 @@ .sidebar__toggle-button--active { --background: var(--stpa-color-sidebar-trigger-background-active); -} \ No newline at end of file +} diff --git a/extension/src-webview/snippets/actions.ts b/extension/src-webview/snippets/actions.ts index 5b7228a4..ce6de516 100644 --- a/extension/src-webview/snippets/actions.ts +++ b/extension/src-webview/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 @@ -89,4 +89,4 @@ export namespace SendWebviewSnippetsAction { export function isThisAction(action: Action): action is SendWebviewSnippetsAction { return action.kind === SendWebviewSnippetsAction.KIND; } -} \ No newline at end of file +} diff --git a/extension/src-webview/snippets/snippet-models.ts b/extension/src-webview/snippets/snippet-models.ts index 10aacb95..41566c04 100644 --- a/extension/src-webview/snippets/snippet-models.ts +++ b/extension/src-webview/snippets/snippet-models.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-webview/snippets/snippet-registry.ts b/extension/src-webview/snippets/snippet-registry.ts index ac23d6d2..7d04e4fa 100644 --- a/extension/src-webview/snippets/snippet-registry.ts +++ b/extension/src-webview/snippets/snippet-registry.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-webview/snippets/snippet-renderer.tsx b/extension/src-webview/snippets/snippet-renderer.tsx index 81bf72c4..bec2de83 100644 --- a/extension/src-webview/snippets/snippet-renderer.tsx +++ b/extension/src-webview/snippets/snippet-renderer.tsx @@ -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/actions.ts b/extension/src/actions.ts index 734efd42..e59d875f 100644 --- a/extension/src/actions.ts +++ b/extension/src/actions.ts @@ -3,7 +3,7 @@ * * http://rtsys.informatik.uni-kiel.de/kieler * - * Copyright 2022-2023 by + * Copyright 2022-2024 by * + Kiel University * + Department of Computer Science * + Real-Time and Embedded Systems Group @@ -133,4 +133,4 @@ export namespace SendDefaultSnippetsAction { export function isThisAction(action: Action): action is SendDefaultSnippetsAction { return action.kind === SendDefaultSnippetsAction.KIND; } -} \ No newline at end of file +} diff --git a/extension/src/diagram-snippets-webview.ts b/extension/src/diagram-snippets-webview.ts index 887d3a65..487df0cd 100644 --- a/extension/src/diagram-snippets-webview.ts +++ b/extension/src/diagram-snippets-webview.ts @@ -126,4 +126,4 @@ export class DiagramSnippetWebview { this.webview.postMessage(message); } -} \ No newline at end of file +}