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>

ui/media/js/image-modifiers.js

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

ui/media/js/main.js

@@ -938,8 +938,9 @@ function getPrompts() {
     prompts = prompts.map(prompt => prompt.trim())
     prompts = prompts.filter(prompt => prompt !== '')
 
-    if (activeTags.length > 0) {
+    const newTags = activeTags.filter(tag => tag.inactive === undefined || tag.inactive === false)
-        const promptTags = activeTags.map(x => x.name).join(", ")
+    if (newTags.length > 0) {
+        const promptTags = newTags.map(x => x.name).join(", ")
         prompts = prompts.map((prompt) => `${prompt}, ${promptTags}`)
     }
 

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

@@ -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)
+            }
+        })
+    }
+})()