extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-04-13 22:18:21 +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 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>

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

@ -87,9 +87,9 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
modifiersEl.appendChild(modifierCard)
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
activeTags = activeTags.filter(x => x.name != modifierName)
activeTags = activeTags.filter(x => trimModifiers(x.name) != trimModifiers(modifierName))
toggleCardState(modifierCard, false)
} else {
// add modifier to active array
@ -120,6 +120,10 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
return e
}
function trimModifiers(tag) {
return tag.replace(/^\(+|\)+$/g, '').replace(/^\[+|\]+$/g, '')
}
async function loadModifiers() {
try {
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')
overlays.forEach (i => {
i.onwheel = (e) => {
e.preventDefault()
if (e.ctrlKey == true) {
e.preventDefault()
const delta = Math.sign(event.deltaY)
let s = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
if (delta < 0) {
// wheel scrolling up
if (s.substring(0, 1) == '[' && s.substring(s.length-1) == ']') {
s = s.substring(1, s.length - 1)
}
else
{
if (s.substring(0, 10) !== '('.repeat(10) && s.substring(s.length-10) !== ')'.repeat(10)) {
s = '(' + s + ')'
const delta = Math.sign(event.deltaY)
let s = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
if (delta < 0) {
// wheel scrolling up
if (s.substring(0, 1) == '[' && s.substring(s.length-1) == ']') {
s = s.substring(1, s.length - 1)
}
else
{
if (s.substring(0, 10) !== '('.repeat(10) && s.substring(s.length-10) !== ')'.repeat(10)) {
s = '(' + s + ')'
}
}
}
}
else{
// wheel scrolling down
if (s.substring(0, 1) == '(' && s.substring(s.length-1) == ')') {
s = s.substring(1, s.length - 1)
}
else
{
if (s.substring(0, 10) !== '['.repeat(10) && s.substring(s.length-10) !== ']'.repeat(10)) {
s = '[' + s + ']'
else{
// wheel scrolling down
if (s.substring(0, 1) == '(' && s.substring(s.length-1) == ')') {
s = s.substring(1, s.length - 1)
}
else
{
if (s.substring(0, 10) !== '['.repeat(10) && s.substring(s.length-10) !== ']'.repeat(10)) {
s = '[' + s + ']'
}
}
}
}
i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText = s
// update activeTags
for (let it = 0; it < overlays.length; it++) {
if (i == overlays[it]) {
activeTags[it].name = s
break
i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText = s
// update activeTags
for (let it = 0; it < overlays.length; it++) {
if (i == overlays[it]) {
activeTags[it].name = s
break
}
}
}
}