Preserve full names for shortened modifiers (#945)

* Preserve full names for shortened modifiers

The PR https://github.com/cmdr2/stable-diffusion-ui/pull/779/files added code to preserve the full names of truncated image modifiers, but only in the "short image modifiers" code path. This PR fixes that by preserving the full car name for truncated modifier names too.

* Pick the full modifier name

The previous code selected the entire innerText from the modifier-car-label element, but for truncated modifiers this would also include the tooltip text. This modification fixes that by only picking specifically the full modifier name.

* Only pick the full modifier name

Previous code would pick up the tooltip text too, causing a mismatch of strings in the comparison.

* Display the truncated image modifier names

What we process and compare is always the full image modifier string, but we still want to display a shortened string when applicable.
This commit is contained in:
patriceac 2023-02-28 01:12:24 -08:00 committed by GitHub
parent 3024465086
commit 0e57487774
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -48,7 +48,6 @@ function createModifierCard(name, previews, removeBy) {
if(cardLabel.length <= maxLabelLength) {
label.querySelector('p').innerText = cardLabel
label.querySelector('p').dataset.fullName = name // preserve the full name
} else {
const tooltipText = document.createElement('span')
tooltipText.className = 'tooltip-text'
@ -59,6 +58,7 @@ function createModifierCard(name, previews, removeBy) {
label.querySelector('p').innerText = cardLabel.substring(0, maxLabelLength) + '...'
}
label.querySelector('p').dataset.fullName = name // preserve the full name
return modifierCard
}
@ -155,7 +155,7 @@ async function loadModifiers() {
function refreshModifiersState(newTags) {
// clear existing modifiers
document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
const modifierName = modifierCard.querySelector('.modifier-card-label').innerText
const modifierName = modifierCard.querySelector('.modifier-card-label p').dataset.fullName // pick the full modifier name
if (activeTags.map(x => x.name).includes(modifierName)) {
modifierCard.classList.remove(activeCardClass)
modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
@ -167,12 +167,13 @@ function refreshModifiersState(newTags) {
newTags.forEach(tag => {
let found = false
document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
const modifierName = modifierCard.querySelector('.modifier-card-label').innerText
const modifierName = modifierCard.querySelector('.modifier-card-label p').dataset.fullName
const shortModifierName = modifierCard.querySelector('.modifier-card-label p').innerText
if (trimModifiers(tag) == trimModifiers(modifierName)) {
// add modifier to active array
if (!activeTags.map(x => x.name).includes(tag)) { // only add each tag once even if several custom modifier cards share the same tag
const imageModifierCard = modifierCard.cloneNode(true)
imageModifierCard.querySelector('.modifier-card-label p').innerText = tag
imageModifierCard.querySelector('.modifier-card-label p').innerText = shortModifierName
activeTags.push({
'name': modifierName,
'element': imageModifierCard,