Backup_Repos/jsketcher
1
0
Fork 0
mirror of https://github.com/xibyte/jsketcher synced 2025-12-15 12:53:52 +01:00
Code Issues Projects Releases Wiki Activity

mobile freindly mouse code cleanup

Browse source
This commit is contained in:
mmiscool 2023-08-25 02:30:36 +00:00
parent 92cf2ce9a9
commit c244bc26d5
4 changed files with 79 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
web/mouse.html
View file

@ -117,7 +117,6 @@
overflow-x: hidden;
overflow-y: hidden;
overflow: hidden;
}
iframe {
@ -128,8 +127,6 @@
border: 0px;
z-index: 1;
overflow: hidden;
zoom: 0.25;
}
@ -145,18 +142,6 @@
margin: 20px;
float: left;
}
#saveSettings {
width: 100%;
height: 100%;
font-size: large;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: #4CAF50;
}
</style>
<body>
@ -195,18 +180,28 @@
}
#settings>div {
border: 2px dashed rgba(0, 0, 0, 0.4);
border: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 10px;
margin: 0px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: klarge;
background-color: rgb(173, 157, 130);
}
#settingsWindowLabel1 {
grid-area: 1 / 1 / 2 / 2;
}
#settingsWindow1 {
#saveSettings {
grid-area: 1 / 2 / 2 / 6;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ff0000;
}
#settingsWindowLabel2 {
@ -245,7 +240,7 @@
grid-area: 6 / 1 / 7 / 2;
}
#settingsWindow6 {
#fullscreenToggle {
grid-area: 6 / 2 / 7 / 4;
}
@ -270,10 +265,8 @@
<div id="settings">
<div id="settingsWindowLabel1"></div>
<div id="settingsWindow1">
<button id="saveSettings">Close Settings</button>
<div id="saveSettings">
Close Settings
</div>
@ -284,21 +277,22 @@
<output>.6</output>
</div>
<div id="settingsWindowLabel3"></div>
<div id="toggleUItabs">
Toggel Tabs
</div>
<div id="settingsWindowLabel4"></div>
<div id="toggleUIoverlay">
Toggle objects overlay
</div>
<div id="settingsWindowLabel5"></div>
<div id="toggleUItoolbar">
Toggle menues
</div>
<div id="fullscreenToggle">
Toggle fullscreen mode
⛶
</div>
</div>

44
web/mouse/checkIfMobile.js
View file

@ -1,22 +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 { }
}
// 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 {}
}

47
web/mouse/mouseController.js
View file

@ -38,25 +38,20 @@ function sendNewEvent(eventType) {
}
document.getElementById("touchpadArea").addEventListener("touchstart", function (event) {
if (window.innerHeight !== screen.height) document.body.requestFullscreen();
if (event.touches.length == 1){
if (event.touches.length == 1) {
lastTouchX = event.touches[0].clientX;
lastTouchY = event.touches[0].clientY;
}
if (event.touches.length ==2){
if (event.touches.length == 2) {
lastScrollY = event.touches[0].clientY;
zooming = true;
event.preventDefault();
}
});
document.getElementById("touchpadArea").addEventListener("touchend", function (event) {
if (event.touches.length ==2){
if (event.touches.length == 2) {
zooming = false;
mouseObject.deltaY = 0;
lastScrollY = 0;
@ -65,10 +60,6 @@ document.getElementById("touchpadArea").addEventListener("touchend", function (e
});
document.getElementById("touchpadArea").addEventListener("click", async function (event) {
// //alert(await sendNewEvent("whatUnderTouchLocation"));
// let bla = await sendNewEvent("whatUnderTouchLocation");
// console.log(bla)
document.getElementById("leftMouseButton").click();
});
@ -85,31 +76,31 @@ document.getElementById("touchpadArea").addEventListener("contextmenu", function
document.getElementById("touchpadArea").addEventListener("touchmove", function (event) {
event.preventDefault();
if (event.touches.length == 1){
if (event.touches.length == 1) {
let x = event.touches[0].clientX;
let y = event.touches[0].clientY;
let difrenceX = x - lastTouchX;
let difrenceY = y - lastTouchY;
lastTouchX = x;
lastTouchY = y;
mouseObject.absoluteX = mouseObject.absoluteX + difrenceX * speed;
mouseObject.absoluteY = mouseObject.absoluteY + difrenceY * speed;
mouseObject.absoluteX = mouseObject.absoluteX > 0 ? mouseObject.absoluteX : 1;
mouseObject.absoluteY = mouseObject.absoluteY > 0 ? mouseObject.absoluteY : 1;
cursor.style.left = mouseObject.absoluteX + "px";
cursor.style.top = mouseObject.absoluteY + "px";
sendNewEvent("mousemove");
}
if (event.touches.length == 2){
if (event.touches.length == 2) {
//zoom zoom zoom
console.log("zoom zoom zoom")
console.log("zoom zoom zoom");
let y = event.touches[0].clientY;
let difrenceY = y - lastScrollY;
@ -167,7 +158,7 @@ document.getElementById("rightMouseButton").addEventListener("click", function (
mouseObject.rightMouseDown = false;
event.target.style.backgroundColor = InactiveButtonBackgroundColor;
sendNewEvent("mousemove");
}else{
} else {
doRightClick();
}
});
@ -255,12 +246,10 @@ window.addEventListener("message", function (event) {
if (event.data == "showTouchpad") toggleMousepad("show");
});
pointerTarget.onload = function () {
const elem = document.createElement(`script`);
elem.src = "./mouse/virtualMousePointer.js";
elem.type="module";
elem.type = "module";
pointerTarget.contentDocument.body.appendChild(elem);
@ -298,3 +287,11 @@ document.getElementById("settingsButton").onclick = function (event) {
document.getElementById("settings").style.display = "";
//console.log("dats the window locations", window.location.search);
};
document.getElementById("fullscreenToggle").onclick = (event) => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
};

44
web/mouse/virtualMousePointer.js
View file

@ -60,11 +60,11 @@ let scaleFactor = 2;
let absoluteX = 0;
let absoluteY = 0;
let deltaY;
let eventType;;
let eventType;
window.addEventListener(
"message",
(event) => {
(event) => {
const thingToDo = event.data;
if (typeof thingToDo !== "object") return;
@ -78,7 +78,7 @@ window.addEventListener(
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";
@ -161,12 +161,10 @@ window.addEventListener(
eventType = "click";
}
lastThingToDo = thingToDo;
//let stoplooping = "";
const itemsUnderMouse = document.elementsFromPoint(absoluteX, absoluteY);
doTheProperEvents(itemsUnderMouse[0]);
@ -178,31 +176,21 @@ window.addEventListener(
// });
// }
let mouseOutObjects = [];
let newMouseOverList = [];
mouseOverList.forEach((item, key) => {
if (!itemsUnderMouse.includes(item)){
if (!itemsUnderMouse.includes(item)) {
mouseOutObjects.push(item);
}else{
} else {
newMouseOverList.push(item);
}
});
mouseOverList = newMouseOverList;
mouseOutObjects.forEach((item, key) => {
exicuteEvents(item, [
"mouseleave",
"mouseout",
"mouseexit",
"pointerleave",
"pointerout",
]);
exicuteEvents(item, ["mouseleave", "mouseout", "mouseexit", "pointerleave", "pointerout"]);
});
__CAD_APP.pickControlService.pickListMode = false;
@ -210,13 +198,13 @@ window.addEventListener(
true
);
function doTheProperEvents(item) {
function doTheProperEvents(item) {
if (eventType == "mousemove") {
exicuteEvents(item, ["mousemove", "mouseover"]);
exicuteEvents(item, ["mousemove", "mouseover"]);
if (!mouseOverList.includes(item)) {
mouseOverList.push(item);
exicuteEvents(item, ["mouseenter", "pointerenter"]);
exicuteEvents(item, ["mouseenter", "pointerenter"]);
}
}
@ -229,7 +217,7 @@ window.addEventListener(
}
if (eventType == "rightDragStart") {
exicuteEvents(item, ["contextmenu","auxclick", "mousedown", "pointerdown"], { button: 2 });
exicuteEvents(item, ["contextmenu", "auxclick", "mousedown", "pointerdown"], { button: 2 });
}
if (eventType == "rightDragEnd") {
@ -252,7 +240,7 @@ window.addEventListener(
}
}
function exicuteEvent(TargetElement, eventToSend = {}) {
function exicuteEvent(TargetElement, eventToSend = {}) {
eventToSend.clientX = absoluteX;
eventToSend.clientY = absoluteY;
eventToSend.x = absoluteX;
@ -266,7 +254,7 @@ window.addEventListener(
eventToSend = new MouseEvent(eventToSend.type, eventToSend);
try {
testResult = TargetElement.dispatchEvent(eventToSend);
testResult = TargetElement.dispatchEvent(eventToSend);
if (mouseDebugger) if (!testResult) console.log("event trigger failed", testResult, TargetElement, eventToSend);
//if (TargetElement.dispatchEvent(eventToSend) == false) console.log("event trigger failed", TargetElement, eventToSend);
return testResult;
@ -276,10 +264,10 @@ window.addEventListener(
}
}
function exicuteEvents(TargetElement, eventTypes, eventToSend = {}) {
function exicuteEvents(TargetElement, eventTypes, eventToSend = {}) {
const eventTemplate = JSON.parse(JSON.stringify(eventToSend));
eventTypes.forEach( (enenvtToFire, key) => {
eventTypes.forEach((enenvtToFire, key) => {
eventTemplate.type = enenvtToFire;
exicuteEvent(TargetElement, eventTemplate);
exicuteEvent(TargetElement, eventTemplate);
});
}