mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-06 08:25:19 +01:00
cleanup virtual touchpad code.
This commit is contained in:
parent
5ac1a0cd99
commit
378353e260
6 changed files with 63 additions and 64 deletions
|
|
@ -20,34 +20,7 @@
|
||||||
|
|
||||||
<script src="./static/index.bundle.js"></script>
|
<script src="./static/index.bundle.js"></script>
|
||||||
|
|
||||||
<script>
|
<script src="./mouse/checkIfMobile.js"></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>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -160,7 +160,7 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<iframe id="jsketcher" title="JSketcher" scrolling="no"></iframe>
|
<iframe id="pointerTarget" scrolling="no"></iframe>
|
||||||
|
|
||||||
<div id="holderHolder">
|
<div id="holderHolder">
|
||||||
<div id="FakeMouseHolder">
|
<div id="FakeMouseHolder">
|
||||||
|
|
|
||||||
22
web/mouse/checkIfMobile.js
Normal file
22
web/mouse/checkIfMobile.js
Normal file
|
|
@ -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 { }
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,3 @@
|
||||||
pointerImage =
|
|
||||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQMAAAAB/jzhAAAABlBMVEX/AAAAAABBoxIDAAAAAnRSTlP/AOW3MEoAAABISURBVHicPc6xCQAgDETRhBQpM0JGyWjBTR3BAQTlW9g8uOK4kz5nS0FCgIOBgjwaChICHAwU5NFQkBDgYKA//hroYHdyY/W+8QFAUbYNynAAAAAASUVORK5CYII=";
|
|
||||||
|
|
||||||
document.body.innerHTML += `
|
document.body.innerHTML += `
|
||||||
<svg id="cursor" xmlns="http://www.w3.org/2000/svg" viewBox="-10003 -10003 20010 20010">
|
<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"/>
|
<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;
|
var speed = 0.6;
|
||||||
|
|
||||||
const pointerTarget = document.getElementById("jsketcher").contentWindow;
|
const pointerTarget = document.getElementById("pointerTarget");
|
||||||
|
|
||||||
function sendNewEvent(eventType) {
|
function sendNewEvent(eventType) {
|
||||||
let obj = JSON.parse(JSON.stringify(mouseObject));
|
let obj = JSON.parse(JSON.stringify(mouseObject));
|
||||||
obj.eventType = eventType;
|
obj.eventType = eventType;
|
||||||
//console.log("sending this", obj);
|
//console.log("sending this", obj);
|
||||||
pointerTarget.postMessage(obj);
|
return pointerTarget.contentWindow.postMessage(obj);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("touchpadArea").addEventListener("touchstart", function (event) {
|
document.getElementById("touchpadArea").addEventListener("touchstart", function (event) {
|
||||||
//document.body.requestFullscreen();
|
if (window.innerHeight !== screen.height) document.body.requestFullscreen();
|
||||||
console.log(event.touches);
|
|
||||||
|
|
||||||
if (event.touches.length == 1){
|
if (event.touches.length == 1){
|
||||||
lastTouchX = event.touches[0].clientX;
|
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();
|
document.getElementById("leftMouseButton").click();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -250,17 +251,18 @@ document.getElementById("ScrollWheel").addEventListener("touchmove", async funct
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener("message", function (event) {
|
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");
|
if (event.data == "showTouchpad") toggleMousepad("show");
|
||||||
});
|
});
|
||||||
|
|
||||||
var iframe = document.getElementById("jsketcher");
|
|
||||||
|
|
||||||
iframe.onload = function () {
|
|
||||||
|
pointerTarget.onload = function () {
|
||||||
const elem = document.createElement(`script`);
|
const elem = document.createElement(`script`);
|
||||||
elem.src = "./mouse/virtualMousePointer.js";
|
elem.src = "./mouse/virtualMousePointer.js";
|
||||||
|
elem.type="module";
|
||||||
|
|
||||||
iframe.contentDocument.body.appendChild(elem);
|
pointerTarget.contentDocument.body.appendChild(elem);
|
||||||
|
|
||||||
console.log(window.location);
|
console.log(window.location);
|
||||||
};
|
};
|
||||||
|
|
@ -269,7 +271,7 @@ document.body.onload = function () {
|
||||||
try {
|
try {
|
||||||
document.getElementById("mouseSpeed").value = localStorage.mouseSpeed;
|
document.getElementById("mouseSpeed").value = localStorage.mouseSpeed;
|
||||||
} catch {}
|
} catch {}
|
||||||
iframe.src = "./" + window.location.search;
|
pointerTarget.src = "./" + window.location.search;
|
||||||
//console.log("dats the window locations", window.location.search);
|
//console.log("dats the window locations", window.location.search);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
#cursor {
|
|
||||||
pointer-events: none;
|
|
||||||
/* doing this makes sure .elementFromPoint
|
|
||||||
do not acquires the image cursor object */
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* makes the cursor invisible */
|
|
||||||
|
|
||||||
* {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
//Allways keep page at propper position,
|
//Allways keep page at propper position,
|
||||||
// prevents page scrolling acidentally due to html elements going out of view.
|
// prevents page scrolling acidentally due to html elements going out of view.
|
||||||
mouseDebugger = false;
|
let mouseDebugger = false;
|
||||||
|
|
||||||
uiElementsToggle = {
|
let uiElementsToggle = {
|
||||||
toggleUItabs: "none",
|
toggleUItabs: "none",
|
||||||
toggleUIoverlay: "none",
|
toggleUIoverlay: "none",
|
||||||
toggleUItoolbar: "none",
|
toggleUItoolbar: "none",
|
||||||
|
|
@ -26,9 +26,9 @@ function setDisplayValueByClassName(clssOfItem, newDsiplayValue) {
|
||||||
} catch {}
|
} 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.display = "none";
|
||||||
theToolbar.style.position = "fixed";
|
theToolbar.style.position = "fixed";
|
||||||
theToolbar.style.left = "30px";
|
theToolbar.style.left = "30px";
|
||||||
|
|
@ -56,20 +56,29 @@ var lastThingToDo = {
|
||||||
};
|
};
|
||||||
var shiftKey = false;
|
var shiftKey = false;
|
||||||
|
|
||||||
scaleFactor = 2;
|
let scaleFactor = 2;
|
||||||
|
let absoluteX = 0;
|
||||||
|
let absoluteY = 0;
|
||||||
|
let deltaY;
|
||||||
|
let eventType;;
|
||||||
|
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
"message",
|
"message",
|
||||||
(event) => {
|
(event) => {
|
||||||
const thingToDo = event.data;
|
const thingToDo = event.data;
|
||||||
if (typeof thingToDo !== "object") return;
|
if (typeof thingToDo !== "object") return;
|
||||||
|
|
||||||
|
// if (thingToDo == "whatUnderTouchLocation"){
|
||||||
|
// return "here is my message";
|
||||||
|
// }
|
||||||
|
|
||||||
absoluteX = thingToDo.absoluteX ? thingToDo.absoluteX : "";
|
absoluteX = thingToDo.absoluteX ? thingToDo.absoluteX : "";
|
||||||
absoluteY = thingToDo.absoluteY ? thingToDo.absoluteY : "";
|
absoluteY = thingToDo.absoluteY ? thingToDo.absoluteY : "";
|
||||||
|
|
||||||
if (mouseDebugger) console.log(absoluteX, absoluteY);
|
if (mouseDebugger) console.log(absoluteX, absoluteY);
|
||||||
|
|
||||||
deltaY = thingToDo.deltaY ? thingToDo.deltaY : "";
|
deltaY = thingToDo.deltaY ? thingToDo.deltaY : "";
|
||||||
eventType = thingToDo.eventType ? thingToDo.eventType : "";
|
eventType = thingToDo.eventType ? thingToDo.eventType : "";
|
||||||
|
|
||||||
if (eventType == "toggleUItabs") {
|
if (eventType == "toggleUItabs") {
|
||||||
uiElementsToggle.toggleUItabs = uiElementsToggle.toggleUItabs == "none" ? "" : "none";
|
uiElementsToggle.toggleUItabs = uiElementsToggle.toggleUItabs == "none" ? "" : "none";
|
||||||
|
|
@ -154,10 +163,15 @@ window.addEventListener(
|
||||||
|
|
||||||
|
|
||||||
lastThingToDo = thingToDo;
|
lastThingToDo = thingToDo;
|
||||||
stoplooping = "";
|
|
||||||
|
|
||||||
|
//let stoplooping = "";
|
||||||
|
|
||||||
const itemsUnderMouse = document.elementsFromPoint(absoluteX, absoluteY);
|
const itemsUnderMouse = document.elementsFromPoint(absoluteX, absoluteY);
|
||||||
|
|
||||||
stoplooping = doTheProperEvents(itemsUnderMouse[0]);
|
doTheProperEvents(itemsUnderMouse[0]);
|
||||||
|
|
||||||
|
// stoplooping = doTheProperEvents(itemsUnderMouse[0]);
|
||||||
// if (itemsUnderMouse[0].nodeName == "CANVAS" && stoplooping !== "stop") {
|
// if (itemsUnderMouse[0].nodeName == "CANVAS" && stoplooping !== "stop") {
|
||||||
// itemsUnderMouse.forEach( (item, key) => {
|
// itemsUnderMouse.forEach( (item, key) => {
|
||||||
// if (key !== 0) stoplooping = doTheProperEvents(item);
|
// if (key !== 0) stoplooping = doTheProperEvents(item);
|
||||||
|
|
@ -191,7 +205,7 @@ window.addEventListener(
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
//__CAD_APP.pickControlService.pickListMode = false;
|
__CAD_APP.pickControlService.pickListMode = false;
|
||||||
},
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
@ -263,7 +277,7 @@ window.addEventListener(
|
||||||
}
|
}
|
||||||
|
|
||||||
function exicuteEvents(TargetElement, eventTypes, eventToSend = {}) {
|
function exicuteEvents(TargetElement, eventTypes, eventToSend = {}) {
|
||||||
eventTemplate = JSON.parse(JSON.stringify(eventToSend));
|
const eventTemplate = JSON.parse(JSON.stringify(eventToSend));
|
||||||
eventTypes.forEach( (enenvtToFire, key) => {
|
eventTypes.forEach( (enenvtToFire, key) => {
|
||||||
eventTemplate.type = enenvtToFire;
|
eventTemplate.type = enenvtToFire;
|
||||||
exicuteEvent(TargetElement, eventTemplate);
|
exicuteEvent(TargetElement, eventTemplate);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue