holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #680 from AssassinJN/beta

Browse Source 
Drag and Drop Styles
This commit is contained in:
cmdr2 2022-12-20 10:19:30 +05:30 committed by GitHub
commit ba5c54043b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/media/css/main.css
View File

@ -405,6 +405,22 @@ img {
.imageTaskContainer > div > .collapsible-handle { .imageTaskContainer > div > .collapsible-handle {
display: none; display: none;
} }
.dropTargetBefore::before{
content: "";
border: 1px solid #fff;
margin-bottom: -2px;
display: block;
box-shadow: 0 0 5px #fff;
transform: translate(0px, -14px);
}
.dropTargetAfter::after{
content: "";
border: 1px solid #fff;
margin-bottom: -2px;
display: block;
box-shadow: 0 0 5px #fff;
transform: translate(0px, 14px);
}
.drag-handle { .drag-handle {
margin-right: 6px; margin-right: 6px;
cursor: move; cursor: move;

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

@ -104,6 +104,8 @@ imagePreview.addEventListener('drop', function(ev) {
} }
}) })
let showConfigToggle = document.querySelector('#configToggleBtn') let showConfigToggle = document.querySelector('#configToggleBtn')
// let configBox = document.querySelector('#config') // let configBox = document.querySelector('#config')
// let outputMsg = document.querySelector('#outputMsg') // let outputMsg = document.querySelector('#outputMsg')
@ -756,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 = ''
@ -803,12 +827,22 @@ function createTask(task) {
</div>` </div>`
createCollapsibles(taskEntry) createCollapsibles(taskEntry)
let draghandle = taskEntry.querySelector('.drag-handle') let draghandle = taskEntry.querySelector('.drag-handle')
draghandle.addEventListener('mousedown', (e) => { taskEntry.setAttribute('draggable',true)}) draghandle.addEventListener('mousedown', (e) => { taskEntry.setAttribute('draggable',true)})
draghandle.addEventListener('mouseup', (e) => { taskEntry.setAttribute('draggable',false)}) draghandle.addEventListener('mouseup', (e) => { taskEntry.setAttribute('draggable',false)})
taskEntry.addEventListener('dragend', (e) => { taskEntry.setAttribute('draggable',false)}) taskEntry.addEventListener('dragend', (e) => {
taskEntry.setAttribute('draggable',false);
imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => {
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;
startY = e.target.closest(".imageTaskContainer").offsetTop;
}) })