mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-22 16:23:28 +01:00
Toggle image modifiers plugin (#558)
* Toggle image modifiers plugin Right-click on image modifiers to temporarily turn them off without removing them. To quickly iterate and experiment with various combinations. Please note this plugin required a minor tweak in getPrompts() to add support for image modifier inactive state. * Fix tag matching Co-authored-by: cmdr2 <secondary.cmdr2@gmail.com>
This commit is contained in:
parent
c9a0d090cb
commit
ca9413ccf4
@ -219,7 +219,7 @@ function refreshTagsList() {
|
||||
editorModifierTagsList.appendChild(tag.element)
|
||||
|
||||
tag.element.addEventListener('click', () => {
|
||||
let idx = activeTags.indexOf(tag)
|
||||
let idx = activeTags.findIndex(o => { return o.name === tag.name })
|
||||
|
||||
if (idx !== -1) {
|
||||
toggleCardState(activeTags[idx].name, false)
|
||||
|
@ -938,8 +938,9 @@ function getPrompts() {
|
||||
prompts = prompts.map(prompt => prompt.trim())
|
||||
prompts = prompts.filter(prompt => prompt !== '')
|
||||
|
||||
if (activeTags.length > 0) {
|
||||
const promptTags = activeTags.map(x => x.name).join(", ")
|
||||
const newTags = activeTags.filter(tag => tag.inactive === undefined || tag.inactive === false)
|
||||
if (newTags.length > 0) {
|
||||
const promptTags = newTags.map(x => x.name).join(", ")
|
||||
prompts = prompts.map((prompt) => `${prompt}, ${promptTags}`)
|
||||
}
|
||||
|
||||
|
53
ui/plugins/ui/modifiers-toggle.plugin.js
Normal file
53
ui/plugins/ui/modifiers-toggle.plugin.js
Normal file
@ -0,0 +1,53 @@
|
||||
(function () {
|
||||
"use strict"
|
||||
|
||||
var styleSheet = document.createElement("style");
|
||||
styleSheet.textContent = `
|
||||
.modifier-card-tiny.modifier-toggle-inactive {
|
||||
background: transparent;
|
||||
border: 2px dashed red;
|
||||
opacity:0.2;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
|
||||
// observe for changes in tag list
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
if (editorModifierTagsList.childNodes.length > 0) {
|
||||
ModifierToggle()
|
||||
}
|
||||
// })
|
||||
})
|
||||
|
||||
observer.observe(editorModifierTagsList, {
|
||||
childList: true
|
||||
})
|
||||
|
||||
function ModifierToggle() {
|
||||
let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
|
||||
overlays.forEach (i => {
|
||||
i.oncontextmenu = (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (i.parentElement.classList.contains('modifier-toggle-inactive')) {
|
||||
i.parentElement.classList.remove('modifier-toggle-inactive')
|
||||
}
|
||||
else
|
||||
{
|
||||
i.parentElement.classList.add('modifier-toggle-inactive')
|
||||
}
|
||||
// refresh activeTags
|
||||
let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
|
||||
activeTags = activeTags.map(obj => {
|
||||
if (obj.name === modifierName) {
|
||||
return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))};
|
||||
}
|
||||
|
||||
return obj;
|
||||
});
|
||||
console.log(activeTags)
|
||||
}
|
||||
})
|
||||
}
|
||||
})()
|
Loading…
Reference in New Issue
Block a user