- Fixed some bugs

- Changed icon bar positioning to the border of the screen - Implemented the DAMN subcategory view on the node panel!!! xD (you can disable it in the settings if you don't want it) - Added the ability to disable the "Auto Show" feature - Added the ability to view folders inside the workflow panel - Added some tooltips for better UX - Changed the Custom Node Categories icon (I didn't like the old one) - Added a little icon in custom categories and folders/subcategories - Added the ability to move workflows in custom categories via the context menu - Added the ability to open workflows in another TAB
Nuked88 · Jun 4, 2024 · 9d5350c · 9d5350c
1 parent 12f688c
commit 9d5350c
Show file tree

Hide file tree

Showing 19 changed files with 857 additions and 317 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # Config file
 app/settings.json
+app/settings.json.bak
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

diff --git a/README.md b/README.md
@@ -11,6 +11,25 @@ For what i know nobody did it, so i did it.
 Maybe you don't need it. I need it >.< 
 
 # Updates
+
+- 04-06-2024
+  - Fixed some bugs
+  - Changed icon bar positioning to the border of the screen
+  - Implemented the DAMN subcategory view on the node panel!!! xD (you can disable it in the settings if you don't want it)
+  - Added the ability to disable the "Auto Show" feature
+  - Added the ability to view folders inside the workflow panel
+  - Added some tooltips for better UX
+  - Changed the Custom Node Categories icon (I didn't like the old one)
+  - Added a little icon in custom categories and folders/subcategories
+  - Added the ability to move workflows in custom categories via the context menu
+  - Added the ability to open workflows in another TAB
+
+NOTE: If you had some custom categories in the workflow panel, at the first start they will be migrated to the new system (since I did a full rewrite to support the folders). It is possible that you need to refresh the page more than once to see them again. Also, a backup of the settings.json will be created before the migration in case anything goes wrong.
+
+NOTE2: I hope I did not break anything T_T
+
+
+
 - 25-05-2024
   - Fixed some bugs
   - Added Templates support**
@@ -66,6 +85,11 @@ NOTE: If you choose to use a different method to install the ComfyUI-N-Sidebar,
 1. Navigate to the cloned repo e.g. `custom_nodes/ComfyUI-N-Sidebar`
 2. `git pull`
 
+
+# Settings
+The most important settings are stored in `custom_nodes/ComfyUI-N-Sidebar/settings.json`
+
+
 # Keyboard Shortcuts
 
 - `Alt+Z` to toggle show/hide sidebar
@@ -129,6 +153,10 @@ PS: Workflow Path
 - [x] Color integration with Jovimetrix
 - [x] Better search
 - [x] Custom Categories!!
+- [x] Workflows
+- [x] Templates
+- [ ] Custom Shortcuts
+- [ ] Export and Import Settings
 
 
 

diff --git a/__init__.py b/__init__.py
@@ -5,6 +5,8 @@
 import json
 from collections import OrderedDict
 from pathlib import Path
+import base64
+import shutil
 
 
 
@@ -53,6 +55,55 @@ def add_item(self, parameter_name, value):
         self.data[parameter_name] = value
         self.write_json_file()
 
+def generate_id(file_path):
+
+    encoded_bytes = base64.b64encode(file_path.encode('utf-8'))
+    encoded_str = str(encoded_bytes, 'utf-8')
+    return encoded_str
+
+
+"""
+def scan_directory(directory, workflows_dict, existing_names, main_path = ''):
+    for entry in os.scandir(directory):
+        if entry.is_file() and entry.name.endswith('.json'):
+            base_name = entry.name[:-5]  # Remove the '.json' extension
+            #unique_name = base_name
+            
+            #if unique_name in workflows_dict:
+            #    folder_name = os.path.basename(directory)
+            #    unique_name = f"{base_name} (from {folder_name})"
+            
+            subfolder = entry.path.replace(main_path, '').replace(entry.name, '')
+
+            workflows_dict[base_name] = {"name": base_name,"path": entry.path, "subfolder": subfolder}
+            existing_names.add(base_name)
+        elif entry.is_dir():
+            scan_directory(entry.path, workflows_dict, existing_names,main_path)
+
+"""
+
+def scan_directory(directory, workflows_dict, existing_names, main_path=''):
+    for entry in os.scandir(directory):
+        if entry.is_file() and entry.name.endswith('.json'):
+            base_name = entry.name[:-5]  # Remove the '.json' extension
+            subfolder = entry.path.replace(main_path, '').replace(entry.name, '')
+
+            unique_id = generate_id(entry.path)
+            workflows_dict[unique_id] = {
+                "name": base_name,
+                "path": entry.path,
+                "subfolder": subfolder
+            }
+            existing_names.add(base_name)
+        elif entry.is_dir():
+            scan_directory(entry.path, workflows_dict, existing_names, main_path)
+
+
+
+
+
+
+
 
 # If is different from ComfyUISidebar, change it
 if __package__ != "ComfyUI-N-Sidebar":
@@ -109,25 +160,31 @@ def add_item(self, parameter_name, value):
         list_panels_array.append(folder)
 
 
+@server.PromptServer.instance.routes.get("/sidebar/backup" )
+async def s_get(request):
+    backup_path = file_path + ".bak"
+
+    try:
+        # Crea una copia di settings.json come settings.json.bak
+        shutil.copyfile(file_path, backup_path)
+    except Exception as e:
+        result = {"result": "ERROR", "message": str(e)}
+        return web.json_response(result, content_type='application/json')
+
+    result = {"result": "OK"}
+    return web.json_response(result, content_type='application/json')
+
+
 
 @server.PromptServer.instance.routes.get("/sidebar/workflows" )
 async def s_get(request):
     workflows_dict = {}
     existing_names = set()
 
     for list_workflows in workflow_dirs:
-        for entry in os.scandir(list_workflows):
-            if entry.is_file() and entry.name.endswith('.json'):
-                base_name = entry.name[:-5]  # Remove the '.json' extension
-                unique_name = base_name
-
-                if unique_name in workflows_dict:
-                    folder_name = os.path.basename(list_workflows)
-                    unique_name = f"{base_name} (from {folder_name})"
-
-                workflows_dict[unique_name] = entry.path
-                existing_names.add(unique_name)
-    sorted_workflows_dict = dict(sorted(workflows_dict.items()))
+        scan_directory(list_workflows, workflows_dict, existing_names, list_workflows)
+
+    sorted_workflows_dict = dict(sorted(workflows_dict.items(), key=lambda x: x[1]["name"].lower()))
 
     return web.json_response(sorted_workflows_dict, content_type='application/json')
 
@@ -153,10 +210,10 @@ async def s_get(request):
         if not path.exists():
                 raise FileNotFoundError(f"The system cannot find the path specified: {path}")
 
-            # Ottieni la directory e il nuovo percorso
         new_path = path.with_name(newName).with_suffix('.json')
+
         if new_path.exists():
-             result = {"result": "File already exists!"}
+            result = {"result": "File already exists!"}
         else:
             #rename 
             os.rename(path, new_path)

diff --git a/app/css/base_style.css b/app/css/base_style.css
@@ -25,9 +25,10 @@
 
         padding-left: 5px;
         padding-right: 5px;
-        margin-bottom: 8px;
+        /*margin-bottom: 8px;*/
         margin-top: 0;
         padding-top: 5px;
+        width: 100%;
     }
 
     .sidebar li {
@@ -78,7 +79,7 @@
         width: calc(100% - 75px);
         margin-top: 5px;
         margin-bottom: 10px;
-        margin-left: 10px;
+        margin-left: 44px;
 
         z-index: 400;
 
@@ -133,7 +134,10 @@
         font-size: 15px;
         padding-bottom: 8px;
     }
-
+    .sidebarCategory {
+        border-bottom:var(--comfy-input-bg) solid 1px;
+        text-wrap: nowrap;
+    }
     #sidebarCustomNodes {
         list-style-type: none;
         font-family: 'Open Sans', sans-serif;
@@ -165,9 +169,30 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        max-width: calc(100% - 39px);
+        /*max-width: calc(100% - 39px);*/
     }
 
+    .displayName{
+        float: left;
+    width: 87%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+   /* margin: 2% auto;*/
+    /*display: flex;*/
+    align-items: center;
+    padding-left: 3%;
+    /*height: 14px;*/
+    }
+    .categoryName{
+
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+
+
+    }
 
     .content_sidebar::-webkit-scrollbar {
         margin-top: 0.5rem;
@@ -260,11 +285,15 @@
         display: none;
     }
 
-    .sidebarCategory .pinButton {
+    .sidebarCategory .pinButton, .sidebarItem .pinButton {
         background-color: transparent;
         border: 0;
         position: absolute;
-        right: 0;
+        width: 10%;
+        float: left;
+        /* padding-top: 4px; */
+        /* font-size: 39px; */
+        height: 1.5em;
     }
 
     #sb_scrollToTopButton.closed {
@@ -276,8 +305,13 @@
         background-color: transparent;
         border: 0;
 
-        position: absolute;
-        right: 0;
+        /*position: absolute; 
+        right: 0;*/
+
+        position: relative;
+        width: 10%;
+        float: left;
+
     }
 
     .previewButton {
@@ -294,12 +328,12 @@
 
     .svg_class {
         width: 24px;
-        height: 24px;
+        height: 18px;
         fill: var(--border-color);
         cursor: pointer;
-        /* hacky fix */
+        /* hacky fix 
         margin-top: -5px;
-        margin-left: -25px;
+        margin-left: -25px;*/
     }
 
     .pin_normal {

diff --git a/app/html/sidebar.html b/app/html/sidebar.html
@@ -4,13 +4,25 @@
         <span class="clearIcon">&times;</span>
         <span class="searchCategoryIcon">C</span>
     </div>
+    <div id="sidebar_views">
+        <div class="view_button" id="switch_sidebar" title="Toggle Sidebar">☰</div>
+        <div class="view_button" id="switch_home" data-content="home" title="Home"><svg xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"
+                style="enable-background:new 0 0 100 100; fill:var(--input-text);" xml:space="preserve">
+                <g>
+                    <path
+                        d="M29,82h13V63.1c0-1.7,1.3-3,3-3h10.3c1.7,0,3,1.3,3,3V82H71c1.7,0,3-1.3,3-3V43.2c0-0.8-0.3-1.6-0.9-2.1l-21-21   c-1.2-1.2-3.1-1.2-4.2,0l-21,21c-0.6,0.6-0.9,1.3-0.9,2.1V79C26,80.7,27.3,82,29,82z" />
+                </g>
+            </svg></div>
+        <div class="view_button" id="switch_settings" title="Settings">⚙</div>
+    </div>
     <div class="content_sidebar" id="content_sidebar_home" data-expanded="false" data-content="panel_content_home">
 
 
         <div id="spacer"></div>
         <label class="sb_label" id="sb_label_pinned">PINNED</label>
         <ul id="sidebarBookmarks"></ul>
-        <label class="sb_label" id="sb_label_custom">CUSTOM NODES<button class="expand_node">
+        <label class="sb_label" id="sb_label_custom">CUSTOM NODES<button class="expand_node" title="Expand/Collapse">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" enable-background="new 0 0 52 52"
                     xml:space="preserve">
                     <path
@@ -26,18 +38,7 @@
         <ul id="sidebarCustomNodes"></ul>
     </div>
 
-    <div id="sidebar_views">
-        <div class="view_button" id="switch_sidebar">☰</div>
-        <div class="view_button" id="switch_home" data-content="home"><svg xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"
-                style="enable-background:new 0 0 100 100; fill:var(--input-text);" xml:space="preserve">
-                <g>
-                    <path
-                        d="M29,82h13V63.1c0-1.7,1.3-3,3-3h10.3c1.7,0,3,1.3,3,3V82H71c1.7,0,3-1.3,3-3V43.2c0-0.8-0.3-1.6-0.9-2.1l-21-21   c-1.2-1.2-3.1-1.2-4.2,0l-21,21c-0.6,0.6-0.9,1.3-0.9,2.1V79C26,80.7,27.3,82,29,82z" />
-                </g>
-            </svg></div>
-        <div class="view_button" id="switch_settings">⚙</div>
-    </div>
+
     <div class="dragHandle" id="dragHandle"></div>
     <div id="previewDiv"></div>
     <div id="sb-modal-backdrop-settings" class="sb-modal-backdrop-settings sb_hidden"></div>