Made the ScrollView run on a Node server, to allow the use of three.js

Moved all ScrollView related Files into a new Folder for that.

.gitignore

@@ -81,3 +81,5 @@ Assets/StreamingAssets/frameit-mmt.jar
 Assets/StreamingAssets/frameit-mmt.jar.meta
 Assets/StreamingAssets/StreamToDataPath_withHandler/tmp.json
 Assets/StreamingAssets/StreamToDataPath_withHandler/tmp.json.meta
+/Assets/StreamingAssets/ScrollView_Server/node_modules
+Assets/StreamingAssets/ScrollView_Server/node_modules.meta

Assets/Scripts/UI/InGame/WebViewController.cs

@@ -23,7 +23,7 @@ private void Awake()
     {
         webViewComponent = GetComponent<WebViewComponent>();
         WebViewComponent.serializerSettings.Converters.Add(new FactObjectUIConverter());
-        webViewComponent.targetUrl = Path.Join(CommunicationEvents.Get_DataPath(), "scrollView.html");
+        webViewComponent.targetUrl = Path.Join(CommunicationEvents.Get_DataPath(), "../ScrollView_Server/scrollView.html");
         webViewComponent.OnWebViewComponentReady += OnWebViewComponentReady;
 
         // TODO: handle webViewComponent.onDomDocumentUpdated

Assets/StreamingAssets/ScrollView_Server.meta

+fileFormatVersion: 2
+guid: b246cdf29bb2a4a46bfde090f9fb1b4b
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Assets/StreamingAssets/ScrollView_Server/package-lock.json.meta

+fileFormatVersion: 2
+guid: 95e6348e2abe7c14db53f58f9d41129d
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Assets/StreamingAssets/ScrollView_Server/package.json

+{
+  "dependencies": {
+    "three": "^0.172.0"
+  },
+  "devDependencies": {
+    "vite": "^6.0.11"
+  }
+}

Assets/StreamingAssets/ScrollView_Server/package.json.meta

+fileFormatVersion: 2
+guid: ee8e4c4eff362f64091b134f3c3ea0b9
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html.meta → Assets/StreamingAssets/ScrollView_Server/scrollView.html.meta

 fileFormatVersion: 2
-guid: 1d3e2132e24f19e41970733210b72ac6
+guid: 51b152fdcb0069c4f8be1d715abb767c
 DefaultImporter:
   externalObjects: {}
   userData: 

Assets/StreamingAssets/StreamToDataPath_withHandler/scroll_interaction.meta → Assets/StreamingAssets/ScrollView_Server/scroll_interaction.meta

 fileFormatVersion: 2
-guid: c135f4fc25ecfc745a294bbcae38777f
+guid: 6c80f0cfb687586488462c73db884287
 folderAsset: yes
 DefaultImporter:
   externalObjects: {}

Assets/StreamingAssets/ScrollView_Server/scroll_interaction/.SetScrollContent.js

+let currentScrollRef = "" // ref of the scroll currently displayed 
+
+function RenderScroll() {
+    const scroll = JSON.parse(document.querySelector("#Unity-Data-Interface").dataset.scrollDynamic);
+    console.log(scroll.requiredFacts);
+    const scrollContainer = document.querySelector("#scrollContainer");
+
+    // replace the description if the scroll changed, otherwise only its content needs update
+    if (scroll.ref != currentScrollRef) {
+        currentScrollRef = scroll.ref;
+        scrollContainer.innerHTML = scroll.description;
+    }
+
+    // go through the facts in the scroll, show their labels and add dropzones
+    scroll.requiredFacts.forEach(fact => {
+        $("[data-slot-id='" + fact.ref.uri + "']")
+            .text(fact.label)
+            .attr("dropzone", "copy")
+            //.attr("data-fact-id", fact.df == null ? "" : fact.df.ref.uri)
+    })
+
+    // acquired facts only need updated labels
+    scroll.acquiredFacts.forEach(fact => {
+        $("[data-solution-id='" + fact.ref.uri + "']")
+            .text(fact.label)
+    })
+    console.log(scroll.label + 'Scroll rendered')
+}
+
+
+$(function () {
+    RenderScroll()
+});
\ No newline at end of file

Assets/StreamingAssets/StreamToDataPath_withHandler/scroll_interaction/SetScrollContent.js → Assets/StreamingAssets/ScrollView_Server/scroll_interaction/SetScrollContent.js

@@ -25,43 +25,4 @@ function RenderScroll() {
     })
     console.log('Scroll rendered')
 }
-RenderScroll()
-// if (Regex.IsMatch(description, ".*<scroll-description.*"))
-// {
-//     // replace slot templates
-//     description = Regex.Replace(description, "<scroll-slot([^>]*)>([^<]*)</scroll-slot>", match =>
-//     {
-//         var extraAttributes = match.Groups[1].Value;
-//         var slotId = match.Groups[2].Value;
-//         var assignment = SwitchScrollUI.activeScrollData.Assignments[slotId];
-//         /** label of the assigned fact, or the slot label if nothing assigned */
-//         var label = assignment.IsSet    ? assignment.fact.GetLabel(StageStatic.stage.factState)
-//                                         : scroll.requiredFacts.Find(fact => fact.@ref.uri == slotId).label;
-//         /** id of the assigned fact. If nothing is assigned don't add the attribute */
-//         var fact_id = assignment.IsSet  ? $"data-fact-id='{assignment.fact.Id}'"
-//                                         : "";
-//         return $"<mi dropzone='copy' data-slot-id='{slotId}' {fact_id} {extraAttributes}>{label}</mi>";
-//     });
-//     // replace solution templates
-//     description = Regex.Replace(description, "<scroll-solution([^>]*)>([^<]*)</scroll-solution>", match =>
-//     {
-//         var extraAttributes = match.Groups[1].Value;
-//         var solutionId = match.Groups[2].Value;
-//         var label = scroll.acquiredFacts.Find(fact => fact.@ref.uri == solutionId).label;
-//         return $"<mi data-solution-id='{solutionId}' {extraAttributes}>{label}</mi>";
-//     });
-// }
-// else
-// {
-//     // scroll is a legacy plain text scroll, generate html with slots for the required facts
-//     var factSlots = SwitchScrollUI.activeScrollData.Assignments
-//         .Where(pair => pair.Value.IsVisible)
-//         .Select(pair =>
-//             @$"<span class='legacySlot' dropzone='copy' data-slot-id='{pair.Key}' {(pair.Value.IsSet ? $"data-fact-id='{pair.Value.fact.Id}'" : "")}>
-//                 {(pair.Value.IsSet ?
-//                     pair.Value.fact.GetLabel(StageStatic.stage.factState) :
-//                     scroll.requiredFacts.Find(fact => fact.@ref.uri == pair.Key).label )}
-//             </span>");
-
-//     description = $"<scroll-description><p>{scroll.description}</p><div id='legacySlots'>{String.Join("", factSlots)}</div></scroll-description>";
-// }
\ No newline at end of file
+RenderScroll()
\ No newline at end of file

Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html

-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Scroll View</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style>
-    [dropzone] {
-      background-color: grey;
-      margin: 1px;
-      border-width: 1px;
-      border-style: dashed;
-    }
-    [data-fact-id] {
-        background-color: lightgray;
-    }
-    [data-hint-available] {
-      background-color: yellow
-    }
-    math {
-      display: inline-flex;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-    .legacySlot {
-      width: 100px;
-      height: 100px;
-      margin: 50px;
-      border-width: 1px;
-    }
-    #rectangle {
-      width: 10px;
-      height: 10px;
-      position: absolute;
-      background-color: red;
-    }
-  </style>
-</head>
-<body>
-  <div id="scrollContainer">
-    <div>No scroll selected</div>
-    <scroll-description title='OppositeLenScroll' alt='Given a triangle △A B C right-angled at ⊾C, the opposite side has length CA = tan(angleB) ⋅ BC.'>
-      <span>Given a triangle</span>
-      <math>
-          <mi>&xutri;<!-- △ --></mi>
-          <mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"></mi>
-          <mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?B"></mi>
-          <mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"></mi>
-      </math>
-      <span>right-angled at</span>
-      <math>
-          <!--<mi>&angrtvbd;</mi>--><!-- ⦝ -->
-          <mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC"></mi>
-      </math>,<br />
-      <span>the opposite side has length</span>
-      <math>
-          <mi data-solution-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA"></mi>
-          <mo>&equals;</mo>
-          <mrow>
-              <mi>tan</mi>
-              <!--<mo>&#8289;</mo>-->
-              <mo>(</mo>
-              <mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB"></mi>
-              <mo>)</mo>
-          </mrow>
-          <mo>&#8290;</mo>
-          <mi data-slot-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC"></mi>
-      </math>
-      <span>.</span>
-      <div>
-          <svg
-          width='50mm'
-          height='45mm'
-          viewBox='35 0 90 70'
-          version='1.1'
-          id='triangle'
-          xmlns='http://www.w3.org/2000/svg'
-          xmlns:svg='http://www.w3.org/2000/svg'>
-          <g id='shape'>
-              <path
-                  style='fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1'
-                  d='M 42.871972,64.67128 H 84.290656 V 7.6297578 Z'
-                  id='triangle' />
-              <path
-                  id='angleABC'
-                  style='fill:none;stroke:#000000;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1'
-                  d='m 46.024276,60.304806 a 5.3589964,5.3589964 0 0 1 2.252109,4.366474 h -5.358996 z' />
-              <g
-                  id='angleBCA'>
-                  <path
-                      style='fill:none;stroke:#000000;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1'
-                      id='rightAngle'
-                      d='m 78.972396,64.665062 a 5.3308268,5.3308268 0 0 1 5.330827,-5.330827 v 5.330827 z' />
-                  <circle
-                      style='fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1'
-                      id='rightAngleDot'
-                      cx='82.081886'
-                      cy='62.813831'
-                      r='0.32113415' />
-              </g>
-          </g>
-          <g
-              id='labels'
-              style='font-size:4.23333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583'
-          >
-              <text
-                  xml:space='preserve'
-                  x='39.242592'
-                  y='67.117035'
-                  id='pointB'
-                  style='fill:#0000ff'
-                  data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?B'>${lverb B}</text>
-              <text
-                  xml:space='preserve'
-                  x='85.100548'
-                  y='68.080437'
-                  id='pointC'
-                  style='fill:#0000ff'
-                  data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?C'>${lverb C}</text>
-              <text
-                  xml:space='preserve'
-                  x='84.650963'
-                  y='6.551136'
-                  id='pointA'
-                  style='fill:#0000ff'
-                  data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?A'>${lverb A}</text>
-              <text
-                  xml:space='preserve'
-                  x='48.234348'
-                  y='62.492699'
-                  id='angleAtB'
-                  style='fill:#ffcc00'
-                  data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB'>${lverb angleB}</text>
-              <text
-                  xml:space='preserve'
-                  x='71.548683'
-                  y='60.951256'
-                  id='rightAngleAtC'
-                  style='fill:#ffcc00'
-                  data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC'>${lverb rightAngleC}</text>
-              <text
-                  xml:space='preserve'
-                  x='59.409813'
-                  y='68.273117'
-                  id='distanceBC'
-                  style='fill:#008000'
-                  data-slot-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC'>${lverb distanceBC}</text>
-              <text
-                  xml:space='preserve'
-                  x='84.972092'
-                  y='35.260529'
-                  id='solutionCA'
-                  style='fill:#008000'
-                  data-solution-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA'>${lverb deducedLineCA}</text>
-          </g>
-          </svg>
-      </div>
-  </scroll-description>
-  </div>
-  <button type="button" title="Apply the scroll" onclick="applyScroll('')">Apply</button><br>
-  <p>You can right click on yellow slots to get a hint.</p>
-
-  <script>  
-    /** 
-     * Load all .js files for interactive scrolls. (So we can use e.g. Typescript)
-     * 
-     * This is no more dangerous than having this file in the streaming assets. 
-     * Any malicious code could just be written in here as well ¯\_(ツ)_/¯. 
-    */
-    function loadScript(url)
-    {    
-        const head = document.getElementsByTagName('head')[0];
-        const script = document.createElement('script');
-        script.type = 'text/javascript';
-        script.src = url;
-        head.appendChild(script);
-    }
-
-    loadScript("./scroll_interaction/Drop_facts.js")
-    loadScript("./scroll_interaction/SetScrollContent.js")
-
-  </script>
-  <data id="assignments" hidden data-assignments="{&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem?A&quot;:{&quot;Item1&quot;:&quot;(C)&quot;,&quot;Item2&quot;:&quot;http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact310&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem?B&quot;:{&quot;Item1&quot;:&quot;(B)&quot;,&quot;Item2&quot;:&quot;http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact309&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem?C&quot;:{&quot;Item1&quot;:&quot;C&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC&quot;:{&quot;Item1&quot;:&quot;⊾C&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC&quot;:{&quot;Item1&quot;:&quot;BC&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB&quot;:{&quot;Item1&quot;:&quot;∠ABC&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA&quot;:{&quot;Item1&quot;:&quot;CA&quot;,&quot;Item2&quot;:&quot;&quot;}}">hi</data>
-  
-  <!--<script src="visualiseCursor.mjs" defer type="module"></script>-->
-  <!--<script>
-  /* mouse and pointer event handling */
-  const rectangle = document.createElement("div");
-  rectangle.id = "rectangle";
-  
-  console.log("appendChild to", document.body)
-  document.body.appendChild(rectangle);
-  
-  function followCursor(event) {
-  const cursorX = event.clientX;
-  const cursorY = event.clientY +5;
-  //console.log(`MouseEvent X: ${cursorX}, Y: ${cursorY}, Event type: ${event.type}`, event);
-  rectangle.style.left = `${cursorX}px`;
-  rectangle.style.top = `${cursorY}px`;
-  }
-  
-  document.addEventListener("mousemove", followCursor);
-  document.addEventListener("pointermove", followCursor);
-  
-  document.addEventListener("mouseover", followCursor);
-  document.addEventListener("pointerover", followCursor);
-  
-  document.addEventListener("mouseout", followCursor);
-  document.addEventListener("pointerout", followCursor);
-  </script>-->
-</body>
-</html>