extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-05-29 22:29:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #563 from patriceac/Mouse-wheel-behavior-fixes

Browse Source 
Improved Mouse Wheel UX with Image Modifiers
This commit is contained in:
cmdr2 2022-11-30 16:24:05 +05:30 committed by GitHub
commit ee66c799e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -86,7 +86,7 @@
</div> </div>
<div id="editor-inputs-tags-container" class="row"> <div id="editor-inputs-tags-container" class="row">
<label>Image Modifiers: <small>(click an Image Modifier to remove it)</small></label> <label>Image Modifiers: <small>(click an Image Modifier to remove it, use Ctrl+Mouse Wheel to adjust its weight)</small></label>
<div id="editor-inputs-tags-list"></div> <div id="editor-inputs-tags-list"></div>
</div> </div>

8
ui/media/js/image-modifiers.js
View File

@ -87,9 +87,9 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
modifiersEl.appendChild(modifierCard) modifiersEl.appendChild(modifierCard)
modifierCard.addEventListener('click', () => { modifierCard.addEventListener('click', () => {
if (activeTags.map(x => x.name).includes(modifierName)) { if (activeTags.map(x => trimModifiers(x.name)).includes(trimModifiers(modifierName))) {
// remove modifier from active array // remove modifier from active array
activeTags = activeTags.filter(x => x.name != modifierName) activeTags = activeTags.filter(x => trimModifiers(x.name) != trimModifiers(modifierName))
toggleCardState(modifierCard, false) toggleCardState(modifierCard, false)
} else { } else {
// add modifier to active array // add modifier to active array
@ -120,6 +120,10 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
return e return e
} }
function trimModifiers(tag) {
return tag.replace(/^\(+|\)+$/g, '').replace(/^\[+|\]+$/g, '')
}
async function loadModifiers() { async function loadModifiers() {
try { try {
let res = await fetch('/get/modifiers') let res = await fetch('/get/modifiers')

60
ui/plugins/ui/Modifiers-wheel.plugin.js
View File

@ -18,40 +18,42 @@
let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay') let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
overlays.forEach (i => { overlays.forEach (i => {
i.onwheel = (e) => { i.onwheel = (e) => {
e.preventDefault() if (e.ctrlKey == true) {
e.preventDefault()
const delta = Math.sign(event.deltaY) const delta = Math.sign(event.deltaY)
let s = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText let s = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
if (delta < 0) { if (delta < 0) {
// wheel scrolling up // wheel scrolling up
if (s.substring(0, 1) == '[' && s.substring(s.length-1) == ']') { if (s.substring(0, 1) == '[' && s.substring(s.length-1) == ']') {
s = s.substring(1, s.length - 1) s = s.substring(1, s.length - 1)
} }
else else
{ {
if (s.substring(0, 10) !== '('.repeat(10) && s.substring(s.length-10) !== ')'.repeat(10)) { if (s.substring(0, 10) !== '('.repeat(10) && s.substring(s.length-10) !== ')'.repeat(10)) {
s = '(' + s + ')' s = '(' + s + ')'
}
} }
} }
} else{
else{ // wheel scrolling down
// wheel scrolling down if (s.substring(0, 1) == '(' && s.substring(s.length-1) == ')') {
if (s.substring(0, 1) == '(' && s.substring(s.length-1) == ')') { s = s.substring(1, s.length - 1)
s = s.substring(1, s.length - 1) }
} else
else {
{ if (s.substring(0, 10) !== '['.repeat(10) && s.substring(s.length-10) !== ']'.repeat(10)) {
if (s.substring(0, 10) !== '['.repeat(10) && s.substring(s.length-10) !== ']'.repeat(10)) { s = '[' + s + ']'
s = '[' + s + ']' }
} }
} }
} i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText = s
i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText = s // update activeTags
// update activeTags for (let it = 0; it < overlays.length; it++) {
for (let it = 0; it < overlays.length; it++) { if (i == overlays[it]) {
if (i == overlays[it]) { activeTags[it].name = s
activeTags[it].name = s break
break }
} }
} }
} }