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

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

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>

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')

View File

@ -18,6 +18,7 @@
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) => {
if (e.ctrlKey == true) {
e.preventDefault() e.preventDefault()
const delta = Math.sign(event.deltaY) const delta = Math.sign(event.deltaY)
@ -55,6 +56,7 @@
} }
} }
} }
}
}) })
} }
})() })()