cleanup virtual touchpad code.

xibyte · Aug 24, 2023 · 378353e · 378353e
1 parent 5ac1a0c
commit 378353e
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 64 deletions.
diff --git a/web/index.html b/web/index.html
@@ -20,34 +20,7 @@
 
   <script src="./static/index.bundle.js"></script>
 
-  <script>
-    // check for common mobile user agents
-    if (
-      navigator.userAgent.match(/Android/i) ||
-      navigator.userAgent.match(/webOS/i) ||
-      navigator.userAgent.match(/iPhone/i) ||
-      navigator.userAgent.match(/iPad/i) ||
-      navigator.userAgent.match(/iPod/i) ||
-      navigator.userAgent.match(/BlackBerry/i) ||
-      navigator.userAgent.match(/Windows Phone/i)
-    ) {
-      // the user is using a mobile device, so redirect to the mobile version of the website
-      try {
-        //detect iframe parent and see if it is the mobile mouse
-        //if frame is loaded in mouse page do nothing otherwise redirect to mouse page
-        if ( window.location.pathname == window.parent.location.pathname ) {
-          //test if parent is mobile mouse emulator page and redirect if not
-          if (!window.parent.location.pathname.includes("/mouse.html")){
-            window.location = "./mouse.html" + window.location.search;
-          }
-        }
-      } catch { }
-    }
-
-
-
-  </script>
-
+  <script src="./mouse/checkIfMobile.js"></script>
 
 </body>
 

diff --git a/web/mouse.html b/web/mouse.html
@@ -160,7 +160,7 @@
 </style>
 
 <body>
-    <iframe id="jsketcher" title="JSketcher" scrolling="no"></iframe>
+    <iframe id="pointerTarget" scrolling="no"></iframe>
 
     <div id="holderHolder">
         <div id="FakeMouseHolder">

diff --git a/web/mouse/checkIfMobile.js b/web/mouse/checkIfMobile.js
@@ -0,0 +1,22 @@
+    // check for common mobile user agents
+    if (
+        navigator.userAgent.match(/Android/i) ||
+        navigator.userAgent.match(/webOS/i) ||
+        navigator.userAgent.match(/iPhone/i) ||
+        navigator.userAgent.match(/iPad/i) ||
+        navigator.userAgent.match(/iPod/i) ||
+        navigator.userAgent.match(/BlackBerry/i) ||
+        navigator.userAgent.match(/Windows Phone/i)
+      ) {
+        // the user is using a mobile device, so redirect to the mobile version of the website
+        try {
+          //detect iframe parent and see if it is the mobile mouse
+          //if frame is loaded in mouse page do nothing otherwise redirect to mouse page
+          if ( window.location.pathname == window.parent.location.pathname ) {
+            //test if parent is mobile mouse emulator page and redirect if not
+            if (!window.parent.location.pathname.includes("/mouse.html")){
+              window.location = "./mouse.html" + window.location.search;
+            }
+          }
+        } catch { }
+      }
diff --git a/web/mouse/mouseController.js b/web/mouse/mouseController.js
@@ -1,6 +1,3 @@
-pointerImage =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQMAAAAB/jzhAAAABlBMVEX/AAAAAABBoxIDAAAAAnRSTlP/AOW3MEoAAABISURBVHicPc6xCQAgDETRhBQpM0JGyWjBTR3BAQTlW9g8uOK4kz5nS0FCgIOBgjwaChICHAwU5NFQkBDgYKA//hroYHdyY/W+8QFAUbYNynAAAAAASUVORK5CYII=";
-
 document.body.innerHTML += `
   <svg id="cursor" xmlns="http://www.w3.org/2000/svg" viewBox="-10003 -10003 20010 20010">
   <path d="M 0 0 L 0 10000 Z M 0 0 L 0 -10000 M 0 0 L -10000 0 M 0 0 L 10000 0 M 25 0 A 1 1 0 0 0 -25 0 A 1 1 0 0 0 25 0" stroke="black" stroke-width="3" fill="none"/>
@@ -31,17 +28,17 @@ var lastTouchY = 0;
 
 var speed = 0.6;
 
-const pointerTarget = document.getElementById("jsketcher").contentWindow;
+const pointerTarget = document.getElementById("pointerTarget");
+
 function sendNewEvent(eventType) {
   let obj = JSON.parse(JSON.stringify(mouseObject));
   obj.eventType = eventType;
   //console.log("sending this", obj);
-  pointerTarget.postMessage(obj);
+  return pointerTarget.contentWindow.postMessage(obj);
 }
 
 document.getElementById("touchpadArea").addEventListener("touchstart", function (event) {
-  //document.body.requestFullscreen();
-  console.log(event.touches);
+  if (window.innerHeight !== screen.height) document.body.requestFullscreen();
 
   if (event.touches.length == 1){
     lastTouchX = event.touches[0].clientX;
@@ -67,7 +64,11 @@ document.getElementById("touchpadArea").addEventListener("touchend", function (e
   }
 });
 
-document.getElementById("touchpadArea").addEventListener("click", function (event) {
+document.getElementById("touchpadArea").addEventListener("click", async function (event) {
+  // //alert(await sendNewEvent("whatUnderTouchLocation"));
+  // let bla =  await sendNewEvent("whatUnderTouchLocation");
+  // console.log(bla)
+
   document.getElementById("leftMouseButton").click();
 });
 
@@ -250,17 +251,18 @@ document.getElementById("ScrollWheel").addEventListener("touchmove", async funct
 });
 
 window.addEventListener("message", function (event) {
-  console.log("Message received from the child: " + event.data); // Message received from child
+  //console.log("Message received from the child: " + event.data); // Message received from child
   if (event.data == "showTouchpad") toggleMousepad("show");
 });
 
-var iframe = document.getElementById("jsketcher");
 
-iframe.onload = function () {
+
+pointerTarget.onload = function () {
   const elem = document.createElement(`script`);
   elem.src = "./mouse/virtualMousePointer.js";
+  elem.type="module";
 
-  iframe.contentDocument.body.appendChild(elem);
+  pointerTarget.contentDocument.body.appendChild(elem);
 
   console.log(window.location);
 };
@@ -269,7 +271,7 @@ document.body.onload = function () {
   try {
     document.getElementById("mouseSpeed").value = localStorage.mouseSpeed;
   } catch {}
-  iframe.src = "./" + window.location.search;
+  pointerTarget.src = "./" + window.location.search;
   //console.log("dats the window locations", window.location.search);
 };
 

diff --git a/web/mouse/virtualMousePointer.css b/web/mouse/virtualMousePointer.css
diff --git a/web/mouse/virtualMousePointer.js b/web/mouse/virtualMousePointer.js
@@ -1,8 +1,8 @@
 //Allways keep page at propper position,
 // prevents page scrolling acidentally due to html elements going out of view.
-mouseDebugger = false;
+let mouseDebugger = false;
 
-uiElementsToggle = {
+let uiElementsToggle = {
   toggleUItabs: "none",
   toggleUIoverlay: "none",
   toggleUItoolbar: "none",
@@ -26,9 +26,9 @@ function setDisplayValueByClassName(clssOfItem, newDsiplayValue) {
   } catch {}
 }
 
-mouseOverList = [];
+var mouseOverList = [];
 
-theToolbar = document.getElementsByClassName("x-Toolbar disable-selection condensed x-Toolbar-flat")[0];
+let theToolbar = document.getElementsByClassName("x-Toolbar disable-selection condensed x-Toolbar-flat")[0];
 theToolbar.style.display = "none";
 theToolbar.style.position = "fixed";
 theToolbar.style.left = "30px";
@@ -56,20 +56,29 @@ var lastThingToDo = {
 };
 var shiftKey = false;
 
-scaleFactor = 2;
+let scaleFactor = 2;
+let absoluteX = 0;
+let absoluteY = 0;
+let deltaY;
+let eventType;;
+
 window.addEventListener(
   "message",
    (event) => {
     const thingToDo = event.data;
     if (typeof thingToDo !== "object") return;
 
+    // if (thingToDo == "whatUnderTouchLocation"){
+    //   return "here is my message";
+    // }
+
     absoluteX = thingToDo.absoluteX ? thingToDo.absoluteX : "";
     absoluteY = thingToDo.absoluteY ? thingToDo.absoluteY : "";
 
     if (mouseDebugger) console.log(absoluteX, absoluteY);
 
     deltaY = thingToDo.deltaY ? thingToDo.deltaY : "";
-    eventType = thingToDo.eventType ? thingToDo.eventType : "";
+   eventType = thingToDo.eventType ? thingToDo.eventType : "";
 
     if (eventType == "toggleUItabs") {
       uiElementsToggle.toggleUItabs = uiElementsToggle.toggleUItabs == "none" ? "" : "none";
@@ -154,10 +163,15 @@ window.addEventListener(
 
 
     lastThingToDo = thingToDo;
-    stoplooping = "";
+
+
+    //let stoplooping = "";
+
     const itemsUnderMouse = document.elementsFromPoint(absoluteX, absoluteY);
 
-    stoplooping =  doTheProperEvents(itemsUnderMouse[0]);
+    doTheProperEvents(itemsUnderMouse[0]);
+
+    // stoplooping =  doTheProperEvents(itemsUnderMouse[0]);
     // if (itemsUnderMouse[0].nodeName == "CANVAS" && stoplooping !== "stop") {
     //    itemsUnderMouse.forEach( (item, key) => {
     //     if (key !== 0) stoplooping =  doTheProperEvents(item);
@@ -191,7 +205,7 @@ window.addEventListener(
       ]);
     });
 
-    //__CAD_APP.pickControlService.pickListMode = false;
+    __CAD_APP.pickControlService.pickListMode = false;
   },
   true
 );
@@ -263,7 +277,7 @@ window.addEventListener(
 }
 
  function exicuteEvents(TargetElement, eventTypes, eventToSend = {}) {
-  eventTemplate = JSON.parse(JSON.stringify(eventToSend));
+  const eventTemplate = JSON.parse(JSON.stringify(eventToSend));
   eventTypes.forEach( (enenvtToFire, key) => {
     eventTemplate.type = enenvtToFire;
      exicuteEvent(TargetElement, eventTemplate);