Improved page scaling by using the device emulation api and made click events more reliable

Assets/Resources/Prefabs/UI/FrameITUI.prefab

@@ -406,12 +406,12 @@ PrefabInstance:
     - target: {fileID: 8553388048532215990, guid: 884ac57de337c364391b247761071fb1,
         type: 3}
       propertyPath: m_AnchorMax.y
-      value: 1
+      value: 0
       objectReference: {fileID: 0}
     - target: {fileID: 8553388048532215990, guid: 884ac57de337c364391b247761071fb1,
         type: 3}
       propertyPath: m_AnchorMin.y
-      value: 1
+      value: 0
       objectReference: {fileID: 0}
     - target: {fileID: 8553388048532215990, guid: 884ac57de337c364391b247761071fb1,
         type: 3}
@@ -561,7 +561,7 @@ PrefabInstance:
     - target: {fileID: 6500467619489830996, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}
       propertyPath: m_AnchoredPosition.y
-      value: 605880
+      value: 146554910
       objectReference: {fileID: 0}
     - target: {fileID: 7849991042685492731, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}
@@ -611,7 +611,7 @@ PrefabInstance:
     - target: {fileID: 7989559431199338490, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}
       propertyPath: m_AnchoredPosition.y
-      value: -33660
+      value: -8136900
       objectReference: {fileID: 0}
     - target: {fileID: 8004702056544321748, guid: 292834880e6f0e54186b873acc62d3f2,
         type: 3}

Assets/Resources/Prefabs/UI/Ingame/HidingCanvas.prefab

@@ -3467,6 +3467,11 @@ PrefabInstance:
       propertyPath: targetUrl
       value: http://127.0.0.1:5500/scrollView.html
       objectReference: {fileID: 0}
+    - target: {fileID: 2459857651630437765, guid: 1e9d514b702f5784791a4df8d22e1866,
+        type: 3}
+      propertyPath: PageScaleFactor
+      value: 4
+      objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_Pivot.x
@@ -3490,7 +3495,7 @@ PrefabInstance:
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_AnchorMax.y
-      value: 0
+      value: 1
       objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
@@ -3505,12 +3510,12 @@ PrefabInstance:
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_SizeDelta.x
-      value: 32
+      value: 890
       objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_SizeDelta.y
-      value: 32
+      value: 0
       objectReference: {fileID: 0}
     - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
@@ -3572,6 +3577,11 @@ PrefabInstance:
       propertyPath: m_LocalEulerAnglesHint.z
       value: 0
       objectReference: {fileID: 0}
+    - target: {fileID: 2974656142881083530, guid: 1e9d514b702f5784791a4df8d22e1866,
+        type: 3}
+      propertyPath: m_ConstrainProportionsScale
+      value: 1
+      objectReference: {fileID: 0}
     - target: {fileID: 8825460134736404412, guid: 1e9d514b702f5784791a4df8d22e1866,
         type: 3}
       propertyPath: m_Name
@@ -3603,12 +3613,6 @@ MonoBehaviour:
   m_Script: {fileID: 11500000, guid: 534d25977ad35154781c29672ce2bb13, type: 3}
   m_Name: 
   m_EditorClassIdentifier: 
-  onHintRequested:
-    m_PersistentCalls:
-      m_Calls: []
-  onClick:
-    m_PersistentCalls:
-      m_Calls: []
 --- !u!1001 &3298748675541104415
 PrefabInstance:
   m_ObjectHideFlags: 0
@@ -3749,7 +3753,7 @@ PrefabInstance:
     - target: {fileID: 4838871000058222821, guid: 49deb83b881477047bfac0ee629a7ae9,
         type: 3}
       propertyPath: m_AnchoredPosition.y
-      value: -0.000030517578
+      value: 0
       objectReference: {fileID: 0}
     m_RemovedComponents: []
   m_SourcePrefab: {fileID: 100100000, guid: 49deb83b881477047bfac0ee629a7ae9, type: 3}

Assets/Scripts/UI/InGame/ScrollDetails.cs

@@ -70,7 +70,7 @@ private void ShowScroll(Scroll newScroll)
 
         var description = newScroll.description;
         // if description is a html description, extract the alternative text representation
-        if (newScroll.description.StartsWith("<scroll-description"))
+        if (Regex.IsMatch(newScroll.description, ".*<scroll-description.*"))
         {
             description = Regex.Match(newScroll.description, "<scroll-description [^>]* alt=((?>\\\")|(?>\\'))([^>]*?)\\1[^>]*>").Groups[2].Value;
         }

Assets/Scripts/UI/InGame/WebViewController.cs

@@ -10,6 +10,7 @@
 using System.Collections.Generic;
 using System.IO;
 using System.Linq;
+using System.Text.RegularExpressions;
 using UnityEngine;
 using UnityEngine.Events;
 
@@ -61,7 +62,7 @@ private void DocumentUpdatedHandler(documentUpdatedEvent _)
     private async void RegisterBrowserEventhandlers()
     {
         // register js event handlers in the browser
-        _ = webViewComponent.tab.Evaluate("dropZones = document.querySelectorAll('[dropzone=\"copy\"]'); dropZones.forEach( dropZone => dropZone.addEventListener(\"drop\", ev => dropHandler(ev, \"DropEvent\")) )");
+        _ = webViewComponent.tab.Evaluate("addDropZoneEventListeners()");
         
         // register c# event handlers
         // get the dropzones from the scroll and add the event handler to track when something is dropped
@@ -86,10 +87,22 @@ private async void SetScrollContent(Scroll scroll)
         DomNodeWrapper scrollContainer = await document.querySelectorAsync("#scrollContainer");
 
         var description = scroll.description;
-        // if scroll is a lagacy plain text scroll, generate html with slots for the required facts
-        if (!scroll.description.StartsWith("<scroll-description"))
+        if (Regex.IsMatch(description, ".*<scroll-description.*"))
         {
-            // generate slots for a plane text scroll description
+            description = Regex.Replace(description, "<scroll-slot([^>]*)>([^<]*)</scroll-slot>", match =>
+            {
+                Debug.LogWarning($"Regex: Value'{match.Value}', Group[{match.Groups.Count - 1}]={match.Groups[match.Groups.Count -1]}");
+                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;
+                return $"<mi dropzone='copy' data-slot-id='{slotId}' {(assignment.IsSet ? $"data-fact-id='{assignment.fact.Id}'" : "")} {extraAttributes}>{label}</mi>";
+            });
+        }
+        else
+        {
+            // scroll is a lagacy plain text scroll, generate html with slots for the required facts
             var factSlots = SwitchScrollUI.activeScrollData.Assignments
                 .Where(pair => pair.Value.IsVisible)
                 .Select(pair =>
@@ -123,6 +136,14 @@ private async void DropzoneAttributeModifiedHandler(attributeModifiedEvent attri
                 throw new Exception("data-slot-id attribute not found on dropzone");
             }
 
+            // if fact has been unasigned from the scroll
+            if (attributeModifiedEvent.value == "null")
+            {
+                // remove fact from slot
+                SwitchScrollUI.activeScrollData.AssignFact(slot, null);
+                return;
+            }
+
             // get the fact from the fact id
             if (!FactRecorder.AllFacts.TryGetValue(attributeModifiedEvent.value, out Fact fact))
             {

Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html

@@ -4,9 +4,6 @@
   <title>Scroll View</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
-    body {
-      font-size: 100px;
-    }
     [dropzone] {
       background-color: grey;
     }
@@ -72,7 +69,7 @@
       </mtable>
     </math>
   </div>
-  <button type="button" title="Apply the scroll" onclick="applyScroll()">Magic</button><br>
+  <button type="button" title="Apply the scroll" onclick="applyScroll('')">Magic</button><br>
   <button type="button" title="Hint" onclick="getHint('http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC')">Hint</button>
 </body>
   <script>
@@ -192,6 +189,7 @@
   /** @param {DragEvent} event  */
   function dropHandler(event) {
     event.preventDefault()
+    console.log("dropHandler", event)
 
     const data = event.dataTransfer.getData("application/json")
     //const data = event.dataTransfer.getData("text/plain")
@@ -220,21 +218,27 @@
     element.dataset.factId = fact.id
   }
 
-  
-  /*
-  * debug functions
-  */
-  
-  /** @param {DragEvent} event  */
-  function printHandler(event, evName) {
-      let items = event.dataTransfer.types
-      console.log(`${evName} getData: '${event.dataTransfer.getData("application/json")}'`, items)
-      console.log(`${evName} getData: '${event.dataTransfer.types}'`, items)
-  }
-  /** @param {DragEvent} event  */
-  function printPreventDefaultHandler(event, evName) {
-      printHandler(event, evName)
+  /** @param {MouseEvent} event  */
+  function clickHandler(event) {
     event.preventDefault()
+    console.log("clickHandler")
+    console.log("clickHandler", event)
+    switch (event.button) {
+      case 0:
+        console.log("Left button clicked")
+        event.target.fact = null
+        event.target.dataset.factId = null
+        break
+      case 1:
+        console.log("Middle button clicked")
+        break
+      case 2:
+        console.log("Right button clicked")
+        getHint(event.target.dataset.slotId)
+        break
+      default:
+        console.log("Unknown button clicked")
+    }
   }
 
   /*
@@ -249,10 +253,29 @@
   //document.addEventListener("dragend", ev => printHandler(ev, "DragEndEvent"))
   
   // select all dropzones and add drop event listeners
-  let dropZones = document.querySelectorAll('[dropzone="copy"]')
-  dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
+  //let dropZones = document.querySelectorAll('[dropzone="copy"]')
+  //dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
+  
+  /** select all dropzones and add drop event listeners */
+  function addDropZoneEventListeners() {
+    console.log("addDropZoneEventListeners")
+    document.querySelectorAll('[dropzone="copy"]')
+      .forEach( dropZone => {
+        dropZone.removeEventListener("drop", dropHandler)
+        dropZone.removeEventListener("click", clickHandler)
+        dropZone.removeEventListener("contextmenu", clickHandler)
+        //dropZone.addEventListener("dragover", ev => ev.preventDefault())
+        dropZone.addEventListener("drop", dropHandler)
+        dropZone.addEventListener("click", clickHandler)
+        dropZone.addEventListener("contextmenu", clickHandler)
+      })
+  }
+  //addDropZoneEventListeners()
   </script>
 
+
+
+
   <!--<script src="visualiseCursor.mjs" defer type="module"></script>-->
   <!--<script>
   /* mouse and pointer event handling */

bessw.unity.webview @ b54ce216

-Subproject commit 8cd56ed2cf3b543fcc6d895932a6f13e6b9400fd
+Subproject commit b54ce216768ba77511fd87b5c17739232e0c5775