Merge branch 'dev'

WebSocketClient/Dockerfile

@@ -9,7 +9,9 @@ COPY . .
 RUN npm run build
 
 # Install Nginx
-RUN apt-get update && apt-get install -y nginx
+RUN apt-get update
+RUN apt-get install -y nginx
+RUN apt-get clean
 
 # Copy your static files into the Nginx document root directory
 RUN cp -r dist/* /var/www/html/

WebSocketClient/dark_mode_dev_env.sh

@@ -0,0 +1,6 @@
+cp -r ./dist/assets/dark_modern* ./node_modules/.vite/deps/dark_modern.json
+cp -r ./dist/assets/dark_plus* ./node_modules/.vite/deps/dark_plus.json
+cp -r ./dist/assets/dark_vs* ./node_modules/.vite/deps/dark_vs.json
+cp -r ./dist/assets/light_modern* ./node_modules/.vite/deps/light_modern.json
+cp -r ./dist/assets/light_plus* ./node_modules/.vite/deps/light_plus.json
+cp -r ./dist/assets/light_vs* ./node_modules/.vite/deps/light_vs.json

WebSocketClient/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "./dark_mode_dev_env.sh && vite dev",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -28,6 +28,7 @@
     "@codingame/monaco-vscode-theme-service-override": "~1.83.2",
     "@viz-js/viz": "^3.2.3",
     "dotenv": "^16.3.1",
+    "intro.js": "^7.2.0",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.44.0",
     "monaco-editor-workers": "~0.44.0",

WebSocketClient/split.css

@@ -0,0 +1,35 @@
+.splitter {
+    width: 100%;
+    height: 80vh;
+    display: flex;
+
+}
+
+#separator {
+    cursor: col-resize;
+    background-color: #aaa;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 10px;
+    height: 100%;
+
+    /* Prevent the browser's built-in drag from interfering */
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#first {
+    background-color: rgb(255, 255, 255);
+    width: 100%;
+    height: 100%;
+    min-width: 10px;
+}
+
+#second {
+    background-color: rgb(255, 255, 255);
+    width: 0%;
+    height: 100%;
+    min-width: 10px;
+}

WebSocketClient/src/config.ts

@@ -2,4 +2,6 @@ export default {
     port: 30000,
     languageServerHostName: "localhost",
     debug: true,
+    MAX_NUMBER_LINES: 100,
+    MAX_NUMBER_CHARACTERS: 10000,
 };

WebSocketClient/src/intro.ts

@@ -0,0 +1,49 @@
+import introJs from "intro.js";
+import { sendGenerateGraphCommand } from "./main";
+
+
+export const initIntroJS = () => {
+
+
+    var intro = introJs();
+
+    intro.setOptions({
+        steps: [{
+            element: '#container', intro: 'This is the texteditor where you write and edit your uvl feature model.',
+        }, {
+            element: '.codelens-decoration', intro: 'You can use the buttons to activate and deactivate functionality.'
+        }, {
+            element: "[id='1']",
+            intro: 'Click here to visualize your feature model und click on it again to hide it again.'
+        }, {
+            element: "#separator", intro: 'You can change the size of the editor and the visualization with your mouse.'
+        }],
+    });
+
+    const button = document.getElementById("tutorialButton");
+
+    intro.onchange(function(targetElement) {
+        if(targetElement.id === "1"){
+            sendGenerateGraphCommand();
+        }
+
+      });
+
+    button?.addEventListener("click", () => {
+        intro.setOption("exitOnOverlayClick", false);
+        intro.setOption("overlayOpacity", 0);
+        intro.setOption("disableInteraction", true);
+        intro.setOption("highlightClass", "tmpClass");
+        intro.start();
+
+        var helperLayer = document.getElementsByClassName("tmpClass");
+        setTimeout(() => {
+            if(helperLayer[0] instanceof HTMLElement){
+                helperLayer[0].style["box-shadow"] = "rgb(255, 255, 255) 0px 0px 1px 2px, rgba(230, 230, 230, 0.44) 0px 0px 0px 5000px";
+            }
+        }, 100);
+
+
+    });
+
+}