Merge pull request ilian6806#15 from ilian6806/develop

Latest SD version support
Fxvoid · Apr 1, 2023 · 0fd00f9 · 0fd00f9
2 parents 39d29d9 + ade184a
commit 0fd00f9
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 73 deletions.
diff --git a/javascript/state.core.js b/javascript/state.core.js
@@ -7,12 +7,10 @@ state.core = (function () {
     const ELEMENTS = {
         'prompt': 'prompt',
         'negative_prompt': 'neg_prompt',
-        'sampling': 'sampling',
         'sampling_steps': 'steps',
         'restore_faces': 'restore_faces',
         'tiling': 'tiling',
         'hires_fix': 'enable_hr',
-        'hires_upscaler': 'hr_upscaler',
         'hires_steps': 'hires_steps',
         'hires_scale': 'hr_scale',
         'hires_resize_x': 'hr_resize_x',
@@ -31,6 +29,11 @@ state.core = (function () {
         'resize_mode': 'resize_mode',
     };
 
+    const SELECTS = {
+        'sampling': 'sampling',
+        'hires_upscaler': 'hr_upscaler',
+    };
+
     const MULTI_SELECTS = {
         'styles': 'styles'
     };
@@ -79,6 +82,14 @@ state.core = (function () {
             });
         }
 
+        for (const [settingId, element] of Object.entries(SELECTS)) {
+            TABS.forEach(tab => {
+                if (config.hasSetting(settingId, tab)) {
+                    handleSavedSelects(`${tab}_${element}`);
+                }
+            });
+        }
+
         for (const [settingId, element] of Object.entries(MULTI_SELECTS)) {
             TABS.forEach(tab => {
                 if (config.hasSetting(settingId, tab)) {
@@ -134,15 +145,28 @@ state.core = (function () {
                 }
             }
         }
+        // Use this when onUiTabChange is fixed
+        // onUiTabChange(function () {
+        //     store.set('tab', gradioApp().querySelector('#tabs .tab-nav button.selected').textContent);
+        // });
+        bindTabClickEvents();
+    }
 
-        onUiTabChange(function () {
-            store.set('tab', get_uiCurrentTab().textContent);
+    function bindTabClickEvents() {
+        Array.from(gradioApp().querySelectorAll('#tabs .tab-nav button')).forEach(tab => {
+            tab.removeEventListener('click', storeTab);
+            tab.addEventListener('click', storeTab);
         });
     }
 
+    function storeTab() {
+        store.set('tab', gradioApp().querySelector('#tabs .tab-nav button.selected').textContent);
+        bindTabClickEvents(); // dirty hack here...
+    }
+
     function handleSavedInput(id) {
 
-        const elements = gradioApp().querySelectorAll(`#${id} textarea, #${id} select, #${id} input`);
+        const elements = gradioApp().querySelectorAll(`#${id} textarea, #${id} input`);
         const events = ['change', 'input'];
 
         if (! elements || ! elements.length) {
@@ -190,50 +214,14 @@ state.core = (function () {
         });
     }
 
-    function handleSavedMultiSelects(id) {
-
-        const select = gradioApp().querySelector(`#${id} .items-center.relative`);
-
-        try {
-            let value = store.get(id);
-
-            if (value) {
-
-                value = value.split(',');
-
-                if (value.length) {
-
-                    let input = select.querySelector('input');
-
-                    let selectOption = function () {
-                        if (! value.length) {
-                            state.utils.triggerMouseEvent(input, 'blur');
-                            return;
-                        }
-                        let option = value.pop();
-                        state.utils.triggerMouseEvent(input);
-                        setTimeout(() => {
-                            let items = Array.from(select.parentNode.querySelectorAll('ul li'));
-                            items.forEach(li => {
-                                if (li.lastChild.wholeText.trim() === option) {
-                                    state.utils.triggerMouseEvent(li, 'mousedown');
-                                    return false;
-                                }
-                            });
-                            setTimeout(selectOption, 100);
-                        }, 100);
-                    }
-                    selectOption();
-                }
-            }
-        } catch (error) {
-            console.error('[state]: Error:', error);
-        }
+    function handleSavedSelects(id) {
+        const select = gradioApp().getElementById(`${id}`);
+        state.utils.handleSelect(select, id, store);
+    }
 
-        state.utils.onContentChange(select, function (el) {
-            const selected = Array.from(el.querySelectorAll('.token > span')).map(item => item.textContent);
-            store.set(id, selected);
-        });
+    function handleSavedMultiSelects(id) {
+        const select = gradioApp().getElementById(`${id}`);
+        state.utils.handleMultipleSelect(select, id, store);
     }
 
     function handleExtensions(config) {

diff --git a/javascript/state.ext.control-net.js b/javascript/state.ext.control-net.js
@@ -10,13 +10,16 @@ state.extensions['control-net'] = (function () {
 
     function handleToggle() {
         let value = store.get('toggled');
-        let toggleBtn = container.querySelector('div.cursor-pointer');
+        let toggleBtn = container.querySelector('div.cursor-pointer, .label-wrap');
+
         if (value && value === 'true') {
             state.utils.triggerEvent(toggleBtn, 'click');
+            load();
         }
         toggleBtn.addEventListener('click', function () {
-            let span = this.querySelector('.transition');
-            store.set('toggled', !span.classList.contains('rotate-90'));
+            let span = this.querySelector('.transition, .icon');
+            store.set('toggled', span.style.transform !== 'rotate(90deg)');
+            load();
         });
     }
 
@@ -66,18 +69,11 @@ state.extensions['control-net'] = (function () {
 
     function handleSelects() {
         cnTabs.forEach(({ container, store }) => {
-            let selects = container.querySelectorAll('select');
-            selects.forEach(function (select) {
-                let label = select.previousElementSibling;
-                let id = state.utils.txtToId(label.textContent);
+            container.querySelectorAll('.gradio-dropdown').forEach(select => {
+                let id = state.utils.txtToId(select.querySelector('label').firstChild.textContent);
                 let value = store.get(id);
-                if (value) {
-                    state.utils.setValue(select, value, 'change');
-                }
-                select.addEventListener('change', function () {
-                    store.set(id, this.value);
-                });
-                if (id === 'preprocessor' && value && value !== 'none') {
+                state.utils.handleSelect(select, id, store);
+                if (id === 'preprocessor' && value && value.toLowerCase() !== 'none') {
                     state.utils.onNextUiUpdates(handleSliders); // update new sliders if needed
                 }
             });
@@ -124,19 +120,24 @@ state.extensions['control-net'] = (function () {
     }
 
     function load() {
-        handleToggle();
-        handleTabs();
-        handleCheckboxes();
-        handleSelects();
-        handleSliders();
-        handleRadioButtons();
+        setTimeout(function () {
+            handleTabs();
+            handleCheckboxes();
+            handleSelects();
+            handleSliders();
+            handleRadioButtons();
+        }, 500);
     }
 
     function init() {
 
         container = gradioApp().getElementById('controlnet');
         store = new state.Store('ext-control-net');
 
+        if (! container) {
+            return;
+        }
+
         let tabs = container.querySelectorAll('.tabitem');
 
         if (tabs.length) {
@@ -154,6 +155,7 @@ state.extensions['control-net'] = (function () {
             }];
         }
 
+        handleToggle();
         load();
     }
 

diff --git a/javascript/state.utils.js b/javascript/state.utils.js
@@ -54,6 +54,83 @@ state.utils = {
             subtree: true
         });
     },
+    handleSelect: function handleSelect(select, id, store) {
+        try {
+            let value = store.get(id);
+
+            if (value) {
+
+                let input = select.querySelector('input');
+                state.utils.triggerMouseEvent(input, 'focus');
+
+                setTimeout(() => {
+                    let items = Array.from(select.querySelectorAll('ul li'));
+                    items.forEach(li => {
+                        if (li.lastChild.wholeText.trim() === value) {
+                            state.utils.triggerMouseEvent(li, 'mousedown');
+                            return false;
+                        }
+                    });
+                    state.utils.triggerMouseEvent(input, 'blur');
+                }, 100);
+            }
+
+            setTimeout(() => {
+                state.utils.onContentChange(select, function (el) {
+                    const selected = el.querySelector('span.single-select');
+                    if (selected) {
+                        store.set(id, selected.textContent);
+                    }
+                });
+            }, 150);
+        } catch (error) {
+            console.error('[state]: Error:', error);
+        }
+    },
+    handleMultipleSelect: function handleMultipleSelect(select, id, store) {
+        try {
+            let value = store.get(id);
+
+            if (value) {
+
+                value = value.split(',').reverse();
+
+                if (value.length) {
+
+                    let input = select.querySelector('input');
+
+                    let selectOption = function () {
+
+                        if (! value.length) {
+                            state.utils.triggerMouseEvent(input, 'blur');
+                            return;
+                        }
+
+                        let option = value.pop();
+                        state.utils.triggerMouseEvent(input, 'focus');
+
+                        setTimeout(() => {
+                            let items = Array.from(select.querySelectorAll('ul li'));
+                            items.forEach(li => {
+                                if (li.lastChild.wholeText.trim() === option) {
+                                    state.utils.triggerMouseEvent(li, 'mousedown');
+                                    return false;
+                                }
+                            });
+                            setTimeout(selectOption, 100);
+                        }, 100);
+                    }
+                    selectOption();
+                }
+            }
+            state.utils.onContentChange(select, function (el) {
+                const selected = Array.from(el.querySelectorAll('.token > span')).map(item => item.textContent);
+                store.set(id, selected);
+            });
+        } catch (error) {
+            console.error('[state]: Error:', error);
+        }
+    },
     txtToId: function txtToId(txt) {
         return txt.split(' ').join('-').toLowerCase();
     },
@@ -78,7 +155,7 @@ state.utils = {
     },
     onNextUiUpdates: function (func) {
         // brute force this to to ensure that the method is called after next few updates
-        onUiUpdate(this.callXTimes(function () { setTimeout(func, 10); }, 50));
+        onUiUpdate(this.callXTimes(function () { setTimeout(func, 5); }, 150));
     }
 };
 
@@ -104,10 +181,6 @@ state.utils.html = {
         btn.innerHTML = text;
         btn.onclick = onclick || function () {};
         btn.className = 'gr-button gr-button-lg gr-button-primary';
-        this.setStyle(btn, {
-            'margin-left': '5px',
-            'margin-right': '5px'
-        });
         return btn;
     }
 };
diff --git a/style.css b/style.css
@@ -0,0 +1,10 @@
+#settings_state_buttons button {
+    color: white;
+    background: rgb(249, 115, 22);
+    border-radius: 8px;
+    padding: 5px 15px;
+    font-weight: bold;
+    font-size: 16px;
+    margin-left: 5px;
+    margin-right: 5px;
+}