easydiffusion/ui/plugins/ui/modifiers-toggle.plugin.js

(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].dataset.fullName
                activeTags = activeTags.map(obj => {
                    if (obj.name === modifierName) {
                        return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))};
                    }
                    
                    return obj;
                });
                document.dispatchEvent(new Event('refreshImageModifiers'))
            }
        })
    }
})()