diagram snippets

extension/.eslintrc.json

@@ -31,6 +31,7 @@
         "dist",
         "**/*.d.ts",
         "webpack.config.js",
-        "pack"
+        "pack",
+        "**/generated/"
     ]
 }

extension/package.json

@@ -96,6 +96,11 @@
                     "type": "boolean",
                     "default": true,
                     "description": "Check whether all UCAs are covered by safety requirements"
+                },
+                "pasta.stpa.snippets": {
+                    "type": "string[]",
+                    "default": [],
+                    "description": "Diagram snippets for STPA"
                 }
             }
         },
@@ -186,6 +191,11 @@
                 "command": "pasta.fta.minimalCutSets",
                 "title": "Generate the minimal cut sets",
                 "category": "Cut Sets"
+            },
+            {
+                "command": "pasta.stpa.snippets.add",
+                "title": "Add STPA Diagram Snippet",
+                "category": "STPA Snippets"
             }
         ],
         "menus": {
@@ -215,8 +225,7 @@
                     "when": "pasta-diagram-focused"
                 },
                 {
-                    "command": "pasta.diagram.export",
-                    "when": "pasta-diagram-focused"
+                    "command": "pasta.diagram.export"
                 },
                 {
                     "command": "pasta.stpa.checks.setCheckResponsibilitiesForConstraints",
@@ -246,6 +255,10 @@
                     "command": "pasta.stpa.ft.generation",
                     "when": "editorLangId == 'stpa'"
                 },
+                {
+                    "command": "pasta.stpa.snippets.add",
+                    "when": "editorLangId == 'stpa'"
+                },
                 {
                     "command": "pasta.fta.cutSets",
                     "when": "editorLangId == 'fta'"
@@ -288,6 +301,11 @@
                     "command": "pasta.stpa.ft.generation",
                     "when": "editorLangId == 'stpa'",
                     "group": "stpa"
+                },
+                {
+                    "command": "pasta.stpa.snippets.add",
+                    "when": "editorLangId == 'stpa'",
+                    "group": "navigation"
                 }
             ],
             "pasta.stpa.checks": [
@@ -396,7 +414,25 @@
                 "command": "pasta.IDs.redo",
                 "when": "editorTextFocus"
             }
-        ]
+        ],
+        "viewsContainers": {
+            "activitybar": [
+              {
+                "id": "pasta",
+                "title": "PASTA",
+                "icon": "./icon.png"
+              }
+            ]
+          },
+          "views": {
+            "pasta": [
+              {
+                "type": "webview",
+                "id": "stpa-snippets",
+                "name": "STPA Snippets"
+              }
+            ]
+          }
     },
     "activationEvents": [
         "onLanguage:stpa",

extension/src-diagram-snippets/actions.ts

@@ -0,0 +1,62 @@
+/*
+ * KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
+ *
+ * http://rtsys.informatik.uni-kiel.de/kieler
+ *
+ * Copyright 2022-2024 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
+ */
+
+interface Action {
+    kind: string;
+}
+
+/** Message to the language server to add definition of a selected snippet in the editor. */
+export interface ExecuteSnippetAction extends Action {
+    kind: typeof ExecuteSnippetAction.KIND;
+    id: string;
+}
+
+export namespace ExecuteSnippetAction {
+    export const KIND = "executeSnippet";
+
+    export function create(id: string): ExecuteSnippetAction {
+        return {
+            kind: KIND,
+            id,
+        };
+    }
+
+    export function isThisAction(action: Action): action is ExecuteSnippetAction {
+        return action.kind === ExecuteSnippetAction.KIND;
+    }
+}
+
+/** Message to the language server to add a snippet to the librabry. */
+export interface AddSnippetAction extends Action {
+    kind: typeof AddSnippetAction.KIND;
+    text: string;
+}
+
+export namespace AddSnippetAction {
+    export const KIND = "addSnippet";
+
+    export function create(text: string): AddSnippetAction {
+        return {
+            kind: KIND,
+            text,
+        };
+    }
+
+    export function isThisAction(action: Action): action is AddSnippetAction {
+        return action.kind === AddSnippetAction.KIND;
+    }
+}

extension/src-diagram-snippets/css/diagram.css

@@ -0,0 +1,157 @@
+/*
+ * 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 "./stpa-diagram.css";
+
+.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 .sprotty-node {
+    fill: #0c598d;
+    stroke: black;
+}
+
+.vscode-dark .print-node {
+    fill: var(--dark-node);
+    stroke: var(--vscode-editor-foreground);
+}
+
+.vscode-dark .sprotty-node {
+    fill: #0c598d;
+    stroke: black;
+}
+
+.vscode-light .print-node {
+    fill: var(--light-node);
+    stroke: black;
+}
+
+.vscode-light .sprotty-node {
+    fill: #50b1f1;
+    stroke: black;
+}
+
+.print-edge {
+    stroke: var(--vscode-editor-foreground);
+}
+
+.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);
+}
+
+.node-selected {
+    stroke-width: 5;
+    stroke: var(--vscode-button-hover-background);
+}
+
+/* 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;
+    stroke: black;
+    stroke-width: 2px;
+}
+
+.sprotty-edge {
+    fill: none;
+    stroke: var(--vscode-editorActiveLineNumber-foreground);
+    stroke-width: 2px;
+}
+
+body[class='vscode-light'] .sprotty-edge-arrow {
+    fill: black
+}
+
+.sprotty-edge-arrow {
+    fill: var(--vscode-editorActiveLineNumber-foreground);
+}
+
+.sprotty-edge>.sprotty-routing-handle {
+    fill: var(--vscode-editor-selectionBackground);
+    stroke: none;
+    z-index: 1000;
+}
+
+.sprotty-edge>.sprotty-routing-handle[data-kind='line'] {
+    opacity: 0.35;
+}
+
+.sprotty-edge>.sprotty-routing-handle.selected {
+    fill: var(--vscode-editor-selectionHighlightBackground);
+}
+
+.sprotty-edge>.sprotty-routing-handle.mouseover {
+    stroke: var(--vscode-editor-symbolHighlightBackground);
+    stroke-width: 1;
+}
+
+.sprotty-edge.mouseover:not(.selected) {
+    stroke-width: 3px;
+}
+
+.sprotty-hidden {
+    width: 0px;
+    height: 0px;
+}