Merge branch 'main' of https://github.com/Nuked88/ComfyUI-N-Sidebar
This commit is contained in:
Nuked
@@ -3,6 +3,10 @@ __pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
# vscode
|
||||
*.code-workspace
|
||||
.vscode/*
|
||||
|
||||
# C extensions
|
||||
*.so
|
||||
|
||||
|
||||
+57
-45
@@ -3,6 +3,17 @@ import { api } from "../../../scripts/api.js"
|
||||
import { app } from "../../../scripts/app.js";
|
||||
import { $el } from "../../../scripts/ui.js";
|
||||
|
||||
async function api_get(url) {
|
||||
var response = await api.fetchApi(url, { cache: "no-store" })
|
||||
return await response.json()
|
||||
}
|
||||
|
||||
let CUSTOM_COLORS;
|
||||
try {
|
||||
const CONFIG_CORE = await api_get("/jovimetrix/config")
|
||||
CUSTOM_COLORS = CONFIG_CORE?.user?.default?.color?.theme;
|
||||
} catch {}
|
||||
|
||||
|
||||
console.time('execution time');
|
||||
async function api_get(url) {
|
||||
@@ -27,6 +38,7 @@ function addSidebarStyles() {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -250px;
|
||||
left: -250px;
|
||||
width: fit-content;
|
||||
height: calc(100% - 19px);
|
||||
color: white;
|
||||
@@ -34,27 +46,27 @@ function addSidebarStyles() {
|
||||
z-index: 2;
|
||||
padding-top: 19px;
|
||||
left: 0;
|
||||
user-select: none;
|
||||
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sidebar ul {
|
||||
list-style-type: none;
|
||||
|
||||
|
||||
border-bottom: 6px solid #252525;
|
||||
background: #222;
|
||||
background: #222;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.sidebar li {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.content_sidebar {
|
||||
background-color: #353535; /*#3333337d;*/
|
||||
overflow-y: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
float:left;
|
||||
@@ -67,8 +79,8 @@ function addSidebarStyles() {
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
cursor: ew-resize;
|
||||
width: 10px;
|
||||
cursor: ew-resize;
|
||||
background: rgb(62,62,62);
|
||||
background: linear-gradient(90deg, rgb(62 62 62 / 46%) 0%, rgb(39 39 39 / 47%) 50%, rgb(28 28 28 / 31%) 100%);
|
||||
}
|
||||
@@ -78,7 +90,7 @@ function addSidebarStyles() {
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
@@ -88,10 +100,10 @@ function addSidebarStyles() {
|
||||
width: calc(100% - 49px);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
|
||||
margin-left: 10px;
|
||||
|
||||
z-index: 400;
|
||||
|
||||
|
||||
}
|
||||
.clearIcon,.searchCategoryIcon{
|
||||
position: absolute;
|
||||
@@ -120,7 +132,7 @@ function addSidebarStyles() {
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -210,7 +222,7 @@ function addSidebarStyles() {
|
||||
display: none;
|
||||
}
|
||||
#content_sidebar.closed {
|
||||
width: 0 !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
.searchCategoryIcon.closed {
|
||||
display: none;
|
||||
@@ -265,7 +277,7 @@ function addSidebarStyles() {
|
||||
}
|
||||
.svg_class:hover{
|
||||
fill: #4e4e4e;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -279,7 +291,7 @@ function addSidebarStyles() {
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
font-weight: bold;
|
||||
|
||||
|
||||
background: #1e1e1e;
|
||||
/* border: 2px solid; */
|
||||
border-radius: 3px;
|
||||
@@ -296,10 +308,10 @@ function addSidebarStyles() {
|
||||
right: 5px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
|
||||
}
|
||||
.expand_node svg , .pin_node svg {
|
||||
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
@@ -459,15 +471,15 @@ function setCookie(name, value, days) {
|
||||
function getSidebarItemIds() {
|
||||
const sidebarItems = document.querySelectorAll("#sidebarBookmarks .sidebarItem");
|
||||
const itemIds = [];
|
||||
|
||||
|
||||
sidebarItems.forEach(function(item) {
|
||||
itemIds.push(item.id);
|
||||
});
|
||||
|
||||
|
||||
return itemIds;
|
||||
}
|
||||
function postPinned() {
|
||||
|
||||
|
||||
|
||||
var dragItem = null;
|
||||
const pinnedElement= document.getElementById("sidebarBookmarks");
|
||||
@@ -620,7 +632,7 @@ function sdExpandAll() {
|
||||
if (side_bar_status === "true") {
|
||||
|
||||
display_value = "none";
|
||||
expand_node.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"
|
||||
expand_node.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
|
||||
<path d="M48,9.5C48,8.7,47.3,8,46.5,8h-41C4.7,8,4,8.7,4,9.5v3C4,13.3,4.7,14,5.5,14h41c0.8,0,1.5-0.7,1.5-1.5V9.5z"
|
||||
/>
|
||||
@@ -642,7 +654,7 @@ function sdExpandAll() {
|
||||
V39.5z"></path>
|
||||
<path d="M34.5,29c0.8,0,1.5-0.7,1.5-1.5v-3c0-0.8-0.7-1.5-1.5-1.5h-17c-0.8,0-1.5,0.7-1.5,1.5v3
|
||||
c0,0.8,0.7,1.5,1.5,1.5H34.5z"></path>
|
||||
|
||||
|
||||
<rect class="expand_node" style="opacity:0" x="0" y="0" width="52" height="52" />
|
||||
</svg>`;
|
||||
document.querySelector(".content_sidebar").dataset.expanded = "true";
|
||||
@@ -1041,13 +1053,13 @@ function addSidebar() {
|
||||
<span class="searchCategoryIcon">C</span>
|
||||
</div>
|
||||
<div class="content_sidebar" id ="content_sidebar" data-expanded="false" style="width:${sidebar_width};">
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="spacer"></div>
|
||||
<label class="sb_label">PINNED</label>
|
||||
<ul id="sidebarBookmarks"></ul>
|
||||
<label class="sb_label">CUSTOM NODES<button class="expand_node" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
|
||||
<path d="M48,9.5C48,8.7,47.3,8,46.5,8h-41C4.7,8,4,8.7,4,9.5v3C4,13.3,4.7,14,5.5,14h41c0.8,0,1.5-0.7,1.5-1.5V9.5z"
|
||||
/>
|
||||
@@ -1083,39 +1095,39 @@ function addSidebar() {
|
||||
|
||||
clearIcon.addEventListener("click", async function () {
|
||||
try {
|
||||
|
||||
|
||||
searchInput.value = "";
|
||||
|
||||
|
||||
|
||||
const searchTerm = await handleSearch();
|
||||
|
||||
|
||||
|
||||
//console.log("Search term cleared:", searchTerm);
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
|
||||
console.error("Error occurred during search:", error);
|
||||
}
|
||||
});
|
||||
|
||||
searchCategoryIcon.addEventListener("click", async function () {
|
||||
try {
|
||||
|
||||
|
||||
categorySearchToggle = !categorySearchToggle;
|
||||
|
||||
|
||||
|
||||
searchCategoryIcon.style.opacity = categorySearchToggle ? "1" : "0.5";
|
||||
|
||||
|
||||
|
||||
const searchTerm = await handleSearch();
|
||||
|
||||
|
||||
|
||||
//console.log("Search term:", searchTerm);
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
|
||||
console.error("Error occurred during search:", error);
|
||||
}
|
||||
});
|
||||
@@ -1189,9 +1201,9 @@ function addSidebar() {
|
||||
|
||||
function handleDrop(event) {
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
if (event.srcElement.tagName.toLowerCase() != "canvas") {
|
||||
return;
|
||||
return;
|
||||
}
|
||||
const coord = convertCanvasToOffset(app.canvasEl.data.ds, [event.clientX, event.clientY]);
|
||||
const x = coord[0];
|
||||
@@ -1242,7 +1254,7 @@ function addSidebar() {
|
||||
const categoryItems = document.querySelectorAll(".sidebarCategory li");
|
||||
const categories = document.querySelectorAll(".sidebarCategory");
|
||||
const listItems = document.querySelectorAll(".sidebar li");
|
||||
|
||||
|
||||
|
||||
/*reset*/
|
||||
categoryItems.forEach(category => {
|
||||
@@ -1282,7 +1294,7 @@ function addSidebar() {
|
||||
category.style.display = areAllHidden ? "none" : category.style.display;
|
||||
});
|
||||
|
||||
|
||||
|
||||
resolve(searchTerm);
|
||||
});
|
||||
}
|
||||
@@ -1290,11 +1302,11 @@ function addSidebar() {
|
||||
|
||||
search_bar.addEventListener("input", async (event) => {
|
||||
try {
|
||||
|
||||
|
||||
const searchTerm = await handleSearch(event);
|
||||
|
||||
} catch (error) {
|
||||
|
||||
|
||||
console.error("Error occurred during search:", error);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user