extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-12-27 09:28:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from JeLuF/AJNdrag

Browse Source 
Only activate the dragOver event listener when dragging tasks
This commit is contained in:
AssassinJN 2022-12-19 14:39:27 -05:00 committed by GitHub
commit e33c858829
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ui/media/js/main.js
View File

@ -104,29 +104,6 @@ imagePreview.addEventListener('drop', function(ev) {
} }
}) })
let startX, startY;
imagePreview.addEventListener("dragover", (event) => {
imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => {
if(itc != event.target.closest(".imageTaskContainer")){
itc.classList.remove('dropTargetBefore','dropTargetAfter');
}
});
if(event.target.closest(".imageTaskContainer")){
if(startX && startY){
console.log('x: '+startX+" : "+event.target.closest(".imageTaskContainer").offsetLeft);
console.log('y: '+startY+" : "+event.target.closest(".imageTaskContainer").offsetTop);
if(event.target.closest(".imageTaskContainer").offsetTop > startY){
event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter');
}else if(event.target.closest(".imageTaskContainer").offsetTop < startY){
event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore');
}else if (event.target.closest(".imageTaskContainer").offsetLeft > startX){
event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter');
}else if (event.target.closest(".imageTaskContainer").offsetLeft < startX){
event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore');
}
}
}
});
let showConfigToggle = document.querySelector('#configToggleBtn') let showConfigToggle = document.querySelector('#configToggleBtn')
@ -781,6 +758,28 @@ function createInitImageHover(taskEntry) {
$tooltip.find('button').on('click', (e) => { onUseAsInputClick(null,img) } ) $tooltip.find('button').on('click', (e) => { onUseAsInputClick(null,img) } )
} }
let startX, startY;
function onTaskEntryDragOver(event) {
imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => {
if(itc != event.target.closest(".imageTaskContainer")){
itc.classList.remove('dropTargetBefore','dropTargetAfter');
}
});
if(event.target.closest(".imageTaskContainer")){
if(startX && startY){
if(event.target.closest(".imageTaskContainer").offsetTop > startY){
event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter');
}else if(event.target.closest(".imageTaskContainer").offsetTop < startY){
event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore');
}else if (event.target.closest(".imageTaskContainer").offsetLeft > startX){
event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter');
}else if (event.target.closest(".imageTaskContainer").offsetLeft < startX){
event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore');
}
}
}
}
function createTask(task) { function createTask(task) {
let taskConfig = '' let taskConfig = ''
@ -837,8 +836,10 @@ function createTask(task) {
imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => { imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => {
itc.classList.remove('dropTargetBefore','dropTargetAfter'); itc.classList.remove('dropTargetBefore','dropTargetAfter');
}); });
imagePreview.removeEventListener("dragover", onTaskEntryDragOver );
}) })
taskEntry.addEventListener('dragstart', function(e) { taskEntry.addEventListener('dragstart', function(e) {
imagePreview.addEventListener("dragover", onTaskEntryDragOver );
e.dataTransfer.setData("text/plain", taskEntry.id); e.dataTransfer.setData("text/plain", taskEntry.id);
startX = e.target.closest(".imageTaskContainer").offsetLeft; startX = e.target.closest(".imageTaskContainer").offsetLeft;
startY = e.target.closest(".imageTaskContainer").offsetTop; startY = e.target.closest(".imageTaskContainer").offsetTop;