Merge branch 'alanaV11' into pebr/neo-style

2025-09-26 18:59:42 +02:00 · 2024-06-03 13:33:26 +02:00
parent 9fca13ca19 b9b678a429
commit 195ea6405a
17 changed files with 544 additions and 116 deletions
--- a/cypress/platform/knsv-pos.html
+++ b/cypress/platform/knsv-pos.html
@@ -0,0 +1,152 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background: #333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+
+        /* background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
+        background-size: 20px 20px;
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
+      }
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+      /* tspan {
+              font-size: 6px !important;
+            } */
+    </style>
+  </head>
+  <body>
+    <pre id="diagram" class="mermaid"></pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        startOnLoad: false,
+        // look: 'handdrawn',
+        layout: 'fixed',
+        fontFamily: 'Kalam',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        logLevel: 0,
+      });
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+      let code = `
+stateDiagram
+  S:Stillas
+  T:Tiger
+  U:Ulv
+
+  S --> T: angrepp
+  T --> U: Apa
+  T --> V: Varg
+        `;
+
+      const positions = {
+        nodes: {
+          S: { x: 0, y: 0 },
+          T: { x: 100, y: 100, width: 100, height: 100 },
+          U: { x: 200, y: 200 },
+          V: { x: 300, y: 100 },
+        },
+        edges: {
+          edge0: {
+            points: [
+              { x: 0, y: 0 },
+              { x: 50, y: 0 },
+              { x: 100, y: 100 },
+            ],
+          },
+          edge1: {
+            points: [
+              { x: 100, y: 100 },
+              { x: 200, y: 200 },
+            ],
+          },
+          edge2: {
+            points: [
+              { x: 100, y: 100 },
+              { x: 175, y: 80 },
+              { x: 200, y: 120 },
+              { x: 300, y: 100 },
+            ],
+          },
+        },
+      };
+
+      const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
+      // console.log(svg);
+      const elem = document.querySelector('#diagram');
+      elem.innerHTML = svg;
+    </script>
+  </body>
+</html>
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -80,52 +80,23 @@
  init: {
  "theme":"base",
  "fontFamily": "Kalam",
-  "themeVariables": {
-    "background": "#FFFFFF",
-    "primaryColor": "#7bdfa7",
-    "primaryTextColor": "#3c3c3b",
-    "secondaryColor": "#642470",
-    "secondaryTextColor": "#3c3c3b",
-    "tertiaryColor": "#1c736D",
-    "tertiaryTextColor": "#3c3c3b",
-    "noteBkgColor": "#9fd8ef",
-    "loopTextColor": "#636362",
-    "labelBoxBkgColor": "#642470",
-    "labelBoxBorderColor": "#642470",
-    "labelTextColor": "#d4d4d4",
-    "signalTextColor": "#636362",
-    "signalColor": "#642470"
-  }
-  }
-}%%
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{
-  init: {
-    "theme":"base",
-  "fontFamily": "Forth Bold",
-  "themeVariables": {
-    "background": "#FFFFFF",
-    "primaryColor": "#7bdfa7",
-    "primaryTextColor": "#3c3c3b",
-    "secondaryColor": "#642470",
-    "secondaryTextColor": "#3c3c3b",
-    "tertiaryColor": "#1c736D",
-    "tertiaryTextColor": "#3c3c3b",
-    "noteBkgColor": "#9fd8ef",
-    "loopTextColor": "#636362",
-    "labelBoxBkgColor": "#642470",
-    "labelBoxBorderColor": "#642470",
-    "labelTextColor": "#d4d4d4",
-    "signalTextColor": "#636362",
-    "signalColor": "#642470"
-  }
+  "themeVariables":
+    {
+      "background": "#FFFFFF",
+      "primaryColor": "#7bdfa7",
+      "primaryTextColor": "#3c3c3b",
+      "secondaryColor": "#642470",
+      "secondaryTextColor": "#3c3c3b",
+      "tertiaryColor": "#1c736D",
+      "tertiaryTextColor": "#3c3c3b",
+      "noteBkgColor": "#9fd8ef",
+      "loopTextColor": "#636362",
+      "labelBoxBkgColor": "#642470",
+      "labelBoxBorderColor": "#642470",
+      "labelTextColor": "#d4d4d4",
+      "signalTextColor": "#636362",
+      "signalColor": "#642470"
+    }
  }
 }%%
 sequenceDiagram
@@ -136,30 +107,42 @@ sequenceDiagram
      </pre
    >

-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
+    <pre id="diagram" class="mermaid">
 stateDiagram
-      A --> B
+  S:Stillas
+  T:Tiger
+  U:Ulv
      </pre
    >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
+stateDiagram
+  state "This is a state description" as S
+      </pre
+    >
+    <pre id="diagram" class="mermaid2">
      %%{init: {"layout": "elk", "mergeEdges": true} }%%
 flowchart
      A --> B(This is B)
      </pre
    >
    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%%
-stateDiagram
-  State T0 {
-    direction LR
-    A --> B
-  }
-  State T1 {
-    [*] --> NumLockOff
-    NumLockOff --> NumLockOn : EvNumLockPressed
-    NumLockOn --> NumLockOff : EvNumLockPressed
-  }
+      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
+      stateDiagram
+    state if_state &lt;&lt;choice&gt;&gt;
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+      </pre
+    >
+    <pre id="diagram" class="mermaid2">
+      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
+      stateDiagram
+    state if_state &lt;&lt;choice&gt;&gt;
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
      </pre
    >
    <pre id="diagram" class="mermaid2">
@@ -250,16 +233,17 @@ stateDiagram-v2
        console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'base',
+        // theme: 'base',
        handdrawnSeed: 12,
        look: 'handdrawn',
        'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
        // layout: 'dagre',
-        layout: 'elk',
+        // layout: 'elk',
+        layout: 'fixed',
        flowchart: { titleTopMargin: 10 },
        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        fontFamily: 'courier',
+        fontFamily: 'Kalam',
+        // fontFamily: 'courier',
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
@@ -275,10 +259,12 @@ stateDiagram-v2
        console.error('In parse error:');
        console.error(err);
      };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
+      void (async () => {
+        const { svg } = await mermaid.render('the-id-of-the-svg', code);
+        console.log(svg);
+        const elem = document.querySelector('#graph-to-be');
+        elem.innerHTML = svg;
+      })();
    </script>
  </body>
 </html>