elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-28 05:48:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

drag fix

Browse Source
This commit is contained in:
steveseguin 2023-04-13 02:19:13 -04:00
parent 04f454aabf
commit 7e3c2983f3
2 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -56,7 +56,7 @@
<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" /> <meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="./main.css?ver=292" /> <link rel="stylesheet" href="./main.css?ver=293" />
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script> <script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
<style id="lightbox-animations" type="text/css"></style> <style id="lightbox-animations" type="text/css"></style>
<!-- <link rel="manifest" href="manifest.json" /> --> <!-- <link rel="manifest" href="manifest.json" /> -->

120
lib.js
View File

@ -2182,38 +2182,46 @@ function makeMiniDraggableElement(elmnt) {
function makeDraggableElement(element) { function makeDraggableElement(element) {
let isDragging = false; if (session.disableMouseEvents){return;} // this is here for a reason. :P
let initialX;
let currentX; element.initialX;
let xOffset = 0; element.initialY;
let initialY; element.currentX;
let currentY; element.xOffset = 0;
let yOffset = 0; element.currentY;
element.yOffset = 0;
element.isDragging = false;
element.dragElement = true;
element.addEventListener('mousedown', dragStart); element.addEventListener('mousedown', dragStart);
document.addEventListener('mouseup', dragEnd);
function dragStart(e) { function dragStart(e) {
initialX = e.clientX - xOffset; element.initialX = e.clientX - element.xOffset;
initialY = e.clientY - yOffset; element.initialY = e.clientY - element.yOffset;
document.addEventListener('mousemove', drag); document.addEventListener('mousemove', drag);
isDragging = true; document.addEventListener('mouseup', dragEnd);
document.addEventListener('onmouseleave', dragEnd);
document.addEventListener('onmouseenter', dragEnd);
element.isDragging = true;
} }
function dragEnd(e) { function dragEnd(e) {
initialX = currentX; element.initialX = element.currentX;
initialY = currentY; element.initialY = element.currentY;
document.removeEventListener('mousemove', drag); document.removeEventListener('mousemove', drag);
isDragging = false; document.removeEventListener('mouseup', dragEnd);
updateMixer(); document.removeEventListener('onmouseleave', dragEnd);
document.removeEventListener('onmouseenter', dragEnd);
element.isDragging = false;
} }
function drag(e) { function drag(e) {
if (isDragging) { if (element.isDragging) {
currentX = (e.clientX - initialX); element.currentX = (e.clientX - element.initialX);
currentY = (e.clientY - initialY); element.currentY = (e.clientY - element.initialY);
// Get the dimensions of the viewport // Get the dimensions of the viewport
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
@ -2242,25 +2250,25 @@ function makeDraggableElement(element) {
} }
// Adjust the position if it's going beyond the boundaries // Adjust the position if it's going beyond the boundaries
let realX = currentX + leftOffset; let realX = element.currentX + leftOffset;
let realY = currentY + topOffset; let realY = element.currentY + topOffset;
if (realX > maxX) { if (realX > maxX) {
currentX = maxX - leftOffset; element.currentX = maxX - leftOffset;
} else if (realX < minX) { } else if (realX < minX) {
currentX = minX - leftOffset; element.currentX = minX - leftOffset;
} }
if (realY > maxY) { if (realY > maxY) {
currentY = maxY - topOffset; element.currentY = maxY - topOffset;
} else if (realY < minY) { } else if (realY < minY) {
currentY = minY - topOffset; element.currentY = minY - topOffset;
} }
// Update the position and offset // Update the position and offset
xOffset = currentX; element.xOffset = element.currentX;
yOffset = currentY; element.yOffset = element.currentY;
element.style.transform = `translate(${currentX}px, ${currentY}px)`; element.style.transform = `translate(${element.currentX}px, ${element.currentY}px)`;
} }
} }
@ -3514,6 +3522,43 @@ var updateMixerTimer = null;
var updateMixerActive = false; var updateMixerActive = false;
//var cleanupTimeout = null; //var cleanupTimeout = null;
function updateMixer(e=false){ function updateMixer(e=false){
var controlBar = document.getElementById("subControlButtons");
if (controlBar && controlBar.dragElement && !controlBar.isDragging){
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
// Calculate real boundaries (parent position: fixed issues)
let topOffset = 0;
let leftOffset = 0;
let elementOffset = controlBar;
while (elementOffset) {
topOffset += elementOffset.offsetTop;
leftOffset += elementOffset.offsetLeft;
elementOffset = elementOffset.offsetParent;
}
let realX = controlBar.xOffset + leftOffset;
let realY = controlBar.yOffset + topOffset;
let maxX = vw - controlBar.offsetWidth;
let maxY = vh - controlBar.offsetHeight;
if (realX > maxX) {
controlBar.xOffset = maxX - leftOffset;
} else if (realX < 0) {
controlBar.xOffset = 0 - leftOffset;
}
if (realY > maxY) {
controlBar.yOffset = maxY - topOffset;
} else if (realY < 0) {
controlBar.yOffset = 0 - topOffset;
}
controlBar.style.transform = `translate(${controlBar.xOffset}px, ${controlBar.yOffset}px)`;
}
if (session.manual === true){return;} if (session.manual === true){return;}
else if (!session.switchMode && session.director){return;} else if (!session.switchMode && session.director){return;}
else if (session.windowed){return;} else if (session.windowed){return;}
@ -3528,7 +3573,7 @@ function updateMixer(e=false){
return; return;
} }
updateMixerActive=true; updateMixerActive=true;
log("updating mixer"); errorlog("updating mixer");
//console.log((new Error()).stack); // useful for breakpoints; finding what called updateMixer. //console.log((new Error()).stack); // useful for breakpoints; finding what called updateMixer.
@ -3548,19 +3593,6 @@ function updateMixer(e=false){
function updateMixerRun(e=false){ // this is the main auto-mixing code. It's a giant function that runs when there are changes to screensize, video track statuses, etc. function updateMixerRun(e=false){ // this is the main auto-mixing code. It's a giant function that runs when there are changes to screensize, video track statuses, etc.
try { try {
let controlButtons = getById("subControlButtons");
if (controlButtons.dragElement){
if (parseInt(controlButtons.style.top) > 53-parseInt(controlButtons.clientHeight)){
controlButtons.style.top = parseInt(53 - controlButtons.clientHeight)+"px";
} else if (parseInt(controlButtons.style.top) < parseInt(53 - window.innerHeight) ){
controlButtons.style.top = parseInt( 53 - window.innerHeight)+"px";
}
if (parseInt(controlButtons.style.left) < 0){
controlButtons.style.left = "0px";
} else if (parseInt(controlButtons.style.left) > parseInt( window.innerWidth - controlButtons.offsetWidth) ){
controlButtons.style.left = parseInt( window.innerWidth - controlButtons.offsetWidth )+"px";
}
}
if (session.switchMode){} if (session.switchMode){}
else if (session.director){return;} else if (session.director){return;}
@ -3594,7 +3626,7 @@ function updateMixerRun(e=false){ // this is the main auto-mixing code. It's a
var h = window.innerHeight - hi; var h = window.innerHeight - hi;
if (session.dedicatedControlBarSpace || window.innerHeight<=700 ){ if (session.dedicatedControlBarSpace || window.innerHeight<=700 ){ // # This needs to be reviewed.
if (document.getElementById("controlButtons") && !session.overlayControls){ if (document.getElementById("controlButtons") && !session.overlayControls){
var h = window.innerHeight - hi - document.getElementById("controlButtons").offsetHeight; var h = window.innerHeight - hi - document.getElementById("controlButtons").offsetHeight;
} else { } else {