From 563f49c8e202280ae337bd78a949f699cafb6c17 Mon Sep 17 00:00:00 2001 From: Nuked88 Date: Sun, 18 Aug 2024 00:09:16 +0200 Subject: [PATCH] fix style --- app/css/base_style_sb.css | 1657 ++++++++++++------------ app/js/sidebar_node.js | 2586 +++++++++++++++++++------------------ pyproject.toml | 2 +- 3 files changed, 2131 insertions(+), 2114 deletions(-) diff --git a/app/css/base_style_sb.css b/app/css/base_style_sb.css index 3a6a21f..3443a86 100644 --- a/app/css/base_style_sb.css +++ b/app/css/base_style_sb.css @@ -1,824 +1,835 @@ - .litegraph .dialog { - z-index: 100 !important; - } - - .sidebar { - - position: absolute; - top: 0; - left: -250px; - left: -250px; - width: fit-content; - height: calc(100% - 19px); - color: var(--drag-text); - transition: left 0.3s ease; - z-index: 2; - padding-top: 19px; - left: 0; - user-select: none; - - - } - - .sidebar ul { - list-style-type: none; - /* border-bottom: 6px solid rgb(from var(--comfy-input-bg) r g b / 60%);*/ - - padding-left: 5px; - padding-right: 5px; - /*margin-bottom: 8px;*/ - margin-top: 0; - padding-top: 5px; - width: 100%; - } - - .sidebar li { - padding: 10px; - cursor: pointer; - user-select: none; - color: var(--input-text); - } - - .content_sidebar { - - background: rgb(from var(--comfy-menu-bg) r g b / 100%); - overflow-y: scroll; - overflow-x: hidden; - height: 100%; - float: left; - backdrop-filter: blur(5px); - width: calc(100% - 45px); - } - - .dragHandle { - position: relative; - float: left; - right: 0; - top: 0; - height: 100%; - width: 5px; - 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%); - } - - #searchInputSB { - box-sizing: border-box; - width: 100%; - border-radius: 5px; - padding: 10px; - border: none; - user-select: none; - background: var(--comfy-input-bg); - color: var(--input-text); - line-height: 1.4; - border: 1px solid var(--border-color); - } - - .sidebar-header { - position: absolute; - width: calc(100% - 75px); - margin-top: 5px; - margin-bottom: 10px; - margin-left: 44px; - - z-index: 400; - - } - - .clearIcon, .searchCategoryIcon, .clearIconCustomCategory, .searchCategoryIconCustomCategory, .clearIconCustomTemplate, .searchTemplateIconCustomTemplate, .clearIconCustomWorkflow, .searchWorkflowIconCustomWorkflow { - position: absolute; - padding: 5px; - right: 30px; - color: var(--input-text); - font-size: x-large; - cursor: pointer; - opacity: 0.5; - user-select: none; - line-height: 1.4; - top: 0; - } - - - .clearIcon:hover, .clearIconCustomCategory:hover, .clearIconCustomTemplate:hover, .clearIconCustomWorkflow:hover { - opacity: 1.0; - } - .clearIcon,.clearIconCustomTemplate,.clearIconCustomWorkflow { - line-height: 1.25 !important - } - - .searchCategoryIcon, .searchCategoryIconCustomCategory, .searchTemplateIconCustomTemplate, .searchWorkflowIconCustomWorkflow { - right: 0px; - padding: 3px; - font-size: larger; - background: var(--border-color); - color: var(--drag-text); - margin: 4px; - border-radius: 5px; - width: 18px; - text-align: center; - top: 0; - - - } - - .searchCategoryIcon:hover, .searchCategoryIconCustomCategory:hover, .searchTemplateIconCustomTemplate:hover, .searchWorkflowIconCustomWorkflow:hover { - opacity: 0.5; - } - - .sidebarCategory, #sidebarBookmarks { - list-style-type: none; - font-family: 'Open Sans', sans-serif; - text-transform: capitalize; - margin: 2px; - background-color: var(--comfy-input-bg); - opacity: 1; - border-radius: 8px; - padding-top: 11px; - 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; - text-transform: capitalize; - margin: 0px; - background-color: transparent; - opacity: 1; - border-radius: 8px; - font-size: 15px; - padding-left: 0; - padding-right: 0px; - padding-top: 0px; - padding-bottom: 40px; - } - - .sidebarItem:hover { - background: color-mix(in srgb, currentColor 15%, transparent); - } - - .sidebarItem { - list-style-type: none; - font-family: 'Open Sans', sans-serif; - text-transform: capitalize; - margin: 2px; - background: color-mix(in srgb, var(--border-color) 35%, transparent); - opacity: 1; - border-radius: 8px; - - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - /*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; - height: 1rem; - width: .5rem; - top: 10px; - } - - .content_sidebar::-webkit-scrollbar:horizontal { - height: .5rem; - width: 1rem - } - - .content_sidebar::-webkit-scrollbar-track { - background-color: transparent; - border-radius: 9999px - } - - .content_sidebar::-webkit-scrollbar-thumb { - --tw-border-opacity: 1; - background-color: hsla(0, 0%, 50%, .8); - border-color: rgba(255, 255, 255, 0, 0, 0); - border-radius: 9999px; - border-width: 1px - } - - .content_sidebar::-webkit-scrollbar-thumb:hover { - --tw-bg-opacity: 1; - - background-color: rgba(150, 150, 150, var(--tw-bg-opacity)) - } - - #spacer { - height: 45px; - } - - - .view_button { - position: relative; - float: unset; - cursor: pointer; - user-select: none; - padding: 5px; - font-size: 20px; - background-color: var(--comfy-input-bg); - opacity: 0.7; - border-radius: 5px; - - margin-top:2px; - } - .view_button:hover { - opacity: 1.0; - } - - #sidebar_views { - position: relative; - float: left; - text-align: center; - - cursor: pointer; - user-select: none; - padding: 0px 2px 2px 2px; - font-size: 20px; - border-bottom-right-radius: 5px; - border-top-right-radius: 5px; - height: 100%; - width: 30px; - border: 0; - border-left: 2px rgb(from var(--comfy-menu-bg) r g b / 100%); - border-style: solid; - padding-bottom: 0px; - backdrop-filter: blur(16px) !important; - background: rgb(from var(--comfy-menu-bg) r g b / 100%); - } - - - #searchInputSB.closed { - display: none; - } - - .content_sidebar.closed { - width: 0 !important; - } - - .searchCategoryIcon.closed { - display: none; - } - - .clearIcon.closed { - display: none; - } - - .sidebarCategory .pinButton, .sidebarItem .pinButton { - background-color: transparent; - border: 0; - position: absolute; - width: 10%; - float: left; - /* padding-top: 4px; */ - /* font-size: 39px; */ - height: 1.5em; - } - - #sb_scrollToTopButton.closed { - display: none !important; - } - - #sidebarBookmarks .pinButton { - - background-color: transparent; - border: 0; - - /*position: absolute; - right: 0;*/ - - position: relative; - width: 10%; - float: left; - - } - - .previewButton { - background-color: transparent; - border: 0; - position: absolute; - right: 35px; - } - - .pinned { - fill: var(--descrip-text) !important; - opacity: 1 !important; - } - - .svg_class { - width: 24px; - height: 18px; - fill: var(--border-color); - cursor: pointer; - /* hacky fix - margin-top: -5px; - margin-left: -25px;*/ - } - - .pin_normal { - opacity: 0.5; - } - - .pin_normal:hover { - opacity: 1; - } - - .svg_class:hover { - fill: var(--border-color); - - } - - - #sidebarBookmarks .sidebarItem { - margin-left: 10px; - margin-right: 29px; - - } - - .sb_label { - font-family: 'Open Sans', sans-serif; - position: relative; - margin: 5px; - font-weight: bold; - - background: var(--comfy-input-bg); - border-radius: 3px; - padding-left: 6px; - padding-right: 6px; - display: block; - width: calc(100% - 20px); - text-align: center; - user-select: none; - cursor: pointer; - } - - .expand_node, .pin_node { - position: absolute; - right: 5px; - background: transparent; - border: 0; - - } - - .expand_node svg, .pin_node svg { - - width: 20px; - height: 20px; - background: transparent; - fill: var(--input-text); - cursor: pointer; - } - - .sb_dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: grey; - } - - .node_header { - line-height: 1; - padding: 8px 13px 7px; - background: var(--comfy-input-bg); - margin-bottom: 5px; - font-size: 15px; - text-wrap: nowrap; - overflow: hidden; - } - - .headdot { - width: 10px; - height: 10px; - float: inline-start; - margin-right: 8px; - } - - .sb_hidden { - display: none; - } - - .IMAGE { - background-color: #64b5f6; - } - - .VAE { - background-color: #ff6e6e; - } - - .LATENT { - background-color: #ff9cf9; - } - - .MASK { - background-color: #81c784; - } - - .CONDITIONING { - background-color: #ffa931; - } - - .CLIP { - background-color: #ffd500; - } - - .MODEL { - background-color: #b39ddb; - } - - .CONTROL_NET { - background-color: #a5d6a7; - } - - - #previewDiv { - position: absolute; - background-color: var(--comfy-menu-bg); - font-family: 'Open Sans', sans-serif; - font-size: small; - color: var(--descrip-text); - border: 1px solid var(--descrip-text); - display: none; - min-width: 300px; - width: min-content; - height: fit-content; - z-index: 9999; - border-radius: 12px; - overflow: hidden; - font-size: 12px; - padding-bottom: 10px; - - } - - #previewDiv .sb_description { - margin: 10px; - padding: 6px; - background: var(--border-color); - border-radius: 5px; - font-style: italic; - font-weight: 500; - font-size: 0.9rem; - } - - .sb_table { - display: grid; - - grid-column-gap: 10px; - /* Spazio tra le colonne */ - width: 100%; - /* Imposta la larghezza della tabella al 100% del contenitore */ - } - - .sb_row { - display: grid; - grid-template-columns: 10px 1fr 1fr 1fr 10px; - grid-column-gap: 10px; - align-items: baseline; - padding-left: 9px; - padding-right: 9px; - } - - .sb_row_string { - grid-template-columns: 10px 1fr 1fr 10fr 1fr; - } - - .sb_col { - border: 0px solid #000; - display: flex; - align-items: flex-end; - flex-direction: row-reverse; - flex-wrap: nowrap; - align-content: flex-start; - justify-content: flex-end; - } - - .sb_inherit { - display: inherit; - } - - .long_field { - background: var(--bg-color); - border: 2px solid var(--border-color); - margin: 5px 5px 0 5px; - border-radius: 10px; - line-height: 1.7; - } - - .sb_arrow { - color: var(--fg-color); - } - - .sb_preview_badge { - text-align: center; - background: var(--comfy-input-bg); - font-weight: bold; - color: var(--error-text); - } - - #sb_scrollToTopButton { - position: absolute; - bottom: 5px; - right: 56px; - cursor: pointer; - display: none; - - border-radius: 20%; - background: var(--comfy-menu-bg); - padding: 4px; - border: 1px solid #4c4c4c; - } - - #sb_scrollToTopButton svg { - width: 20px; - height: 20px; - fill: var(--descrip-text); - } - - - - - .panel_sidebar{ - min-height: 200px; - - border-radius: 5px; - margin-left: 7px; - - } - - .panel_sidebar label{ - text-transform: uppercase; - } - - - - - - - .custom-menu { - box-shadow: inset 0px 0px 0px rgb(44 44 44 / 5%), inset 1px -1px 0px 0px rgb(22 22 22 / 50%), 0px 0px 9px 0px rgb(0, 0, 0); - font-family: Arial, sans-serif; - display: none; - position: absolute; - background-color: var(--bg-color); - border: 0px solid #313131; - color: var(--input-text); - padding: 5px 0; - border-radius: 5px; - z-index: 9999; - /* backdrop-filter: blur(5px); - background: rgb(from #353535 r g b / 50%);*/ - } - .custom-menu ul { - list-style-type: none; - padding: 0; - margin: 0; - width: 100%; - } - .custom-menu li { - padding: 8px 15px; - cursor: pointer; - - } - #menu-options li { - - min-width: 134px; - } - - - - .custom-menu .sub-menu li:first-child { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - - - .custom-menu .sub-menu li:last-child { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - } - .custom-menu li:hover { - background-color: var(--border-color); - } - .sub-menu { - - box-shadow: inset 0px 0px 0px rgb(44 44 44 / 5%), inset 1px -1px 0px 0px rgb(22 22 22 / 50%), 0px 0px 9px 0px rgb(0, 0, 0); - font-family: Arial, sans-serif; - display: none; - position: absolute; - top: 0; - left: 100%; - background-color: var(--bg-color); - border: 0px solid #313131; - border-radius: 5px; - border-top-left-radius: 0px; - - z-index: 1001; /* Ensure sub-menu appears above main menu */ - /* - backdrop-filter: blur(5px); - background: rgb(from #353535 r g b / 50%);*/ - } - - .cat_empty { - display: none !important; - } - - - - /* Settings */ - #switch_settings{ - bottom: 5px; - position: absolute; - width: 19px; - height: 20px; - line-height: 1; - } - - #sb_settingsDiv{ - outline: 0; - border: 0; - border-radius: 6px; - background: var(--bg-color); - color: var(--input-text); - box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.05), inset -1px -1px 0px rgba(0, 0, 0, 0.5), 2px 2px 20px rgb(0, 0, 0); - max-width: 800px; - box-sizing: border-box; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-size: 0.8rem; - padding: 5px 20px 20px 20px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1001; - text-transform: uppercase; - font-weight: bold; - } - #sb_settingsDiv .setting{ - height: 28px; - width: 450px; - margin-bottom: 7px; - } - #sb_settingsDiv .setting input[type="range"]{ - height: 28px; - - } - - #sb_settingsDiv .setting input[type="text"]{ - background: var(--comfy-menu-bg); - color: var(--drag-text); - padding: 5px; - float: right; - width: 129px; - margin-right: 47px; - border-radius: 5px; - border: solid 1px var(--descrip-text); - } - #sb_settingsDiv .setting textarea{ - background: var(--comfy-menu-bg); - color: var(--drag-text); - padding: 5px; - float: right; - width: calc(100% - 60px); - resize: vertical; - margin-right: 47px; - border-radius: 5px; - border: solid 1px var(--descrip-text); - } - #sb_settingsDiv .setting input[type="checkbox"]{ - width: 18px; - height: 18px; - } - #sb_settingsDiv .setting input{ - float: right; - } - #sb_settingsDiv .setting label{ - line-height: 1.8; - } - #sb_settingsDiv .slider-container{ - float: right; - width: 36px; - background: var(--comfy-menu-bg); - padding: 3px; - border-radius: 5px; - text-align: center; - margin: 5px auto; - } - - #sb_settingsDiv h1{ - margin: 0 0 20px 0; - padding: 0 0 5px 0; - text-align: center; - border-bottom: 5px solid var(--border-color); - text-transform: uppercase; - } - - #sb_settingsDiv button{ - - padding: 9px; - /* position: absolute; */ - bottom: 0; - width: 100%; - margin: 0 0 20px 0; - background: var(--comfy-menu-bg); - color: var(--input-text); - border: 1px solid var(--border-color); - border-radius: 5px; - cursor: pointer; - text-transform: uppercase; - font-weight: bold; - } - #sb_settingsDiv button:hover{ - filter: brightness(120%); - } - - #sb_settingsDiv i{ - margin-left: 4px; - color: #0075ff; - font-style: normal; - font-size: larger; - } - -/* MODALS */ -.sb-modal-title{ - position: absolute; - top: 4px; - margin-top: 0; - text-transform: uppercase; -} - -.sb-modal-backdrop, .sb-modal-backdrop-settings { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.2); /* Add desired opacity */ - z-index: 1000; /* Make sure the backdrop is behind the modal */ -} - - -#sb_settingsDiv select{ - background: var(--comfy-menu-bg); - color: var(--drag-text); - padding: 5px; - float: right; - width: 129px; - margin-right: 47px; - border-radius: 5px; - } - -.colorBlob { - float: right; - overflow: hidden; - margin-top: 34px; - width: 100%; - height: 125px; - border-radius: 6px; -} - -.colorBlob input[type='color'] { - width: 106%; - height: 112%; - margin: -6px; - } - - - - #switch_home,#switch_custom_view{ - width: 1.3rem; - height: 1.3rem; - } - - #switch_sidebar{ - - margin-top: 5px; - } - - #sbModal{ - display: none; - z-index: 9999; + + + + .litegraph .dialog { + z-index: 100 !important; + } + + .sidebar { + + position: absolute; + top: 0; + left: -250px; + left: -250px; + width: fit-content; + height: calc(100% - 19px); + color: var(--drag-text); + transition: left 0.3s ease; + z-index: 2; + padding-top: 19px; + left: 0; + user-select: none; + box-sizing: content-box; + + } + + + sidebar * { + box-sizing: revert; /* o qualsiasi valore tu voglia usare */ + } + + .sidebar ul { + list-style-type: none; + /* border-bottom: 6px solid rgb(from var(--comfy-input-bg) r g b / 60%);*/ + + padding-left: 5px; + padding-right: 5px; + /*margin-bottom: 8px;*/ + margin-top: 0; + padding-top: 5px; + width: 100%; + } + + .sidebar li { + padding: 10px; + cursor: pointer; + user-select: none; + color: var(--input-text); + } + + .content_sidebar { + + background: rgb(from var(--comfy-menu-bg) r g b / 100%); + overflow-y: scroll; + overflow-x: hidden; + height: 100%; + float: left; + backdrop-filter: blur(5px); + width: calc(100% - 45px); + } + + .dragHandle { + position: relative; + float: left; + right: 0; + top: 0; + height: 100%; + width: 5px; + 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%); + } + + #searchInputSB { + box-sizing: border-box; + width: 100%; + border-radius: 5px; + padding: 10px; + border: none; + user-select: none; + background: var(--comfy-input-bg); + color: var(--input-text); + line-height: 1.4; + border: 1px solid var(--border-color); + } + + .sidebar-header { + position: absolute; + width: calc(100% - 75px); + margin-top: 5px; + margin-bottom: 10px; + margin-left: 44px; + + z-index: 400; + + } + + .clearIcon, .searchCategoryIcon, .clearIconCustomCategory, .searchCategoryIconCustomCategory, .clearIconCustomTemplate, .searchTemplateIconCustomTemplate, .clearIconCustomWorkflow, .searchWorkflowIconCustomWorkflow { + position: absolute; + padding: 5px; + right: 30px; + color: var(--input-text); + font-size: x-large; + cursor: pointer; + opacity: 0.5; + user-select: none; + line-height: 1.4; + top: 0; + } + + + .clearIcon:hover, .clearIconCustomCategory:hover, .clearIconCustomTemplate:hover, .clearIconCustomWorkflow:hover { + opacity: 1.0; + } + .clearIcon,.clearIconCustomTemplate,.clearIconCustomWorkflow { + line-height: 1.25 !important + } + + .searchCategoryIcon, .searchCategoryIconCustomCategory, .searchTemplateIconCustomTemplate, .searchWorkflowIconCustomWorkflow { + right: 0px; + padding: 3px; + font-size: larger; + background: var(--border-color); + color: var(--drag-text); + margin: 4px; + border-radius: 5px; + width: 18px; + text-align: center; + top: 0; + box-sizing: content-box; + + } + + .searchCategoryIcon:hover, .searchCategoryIconCustomCategory:hover, .searchTemplateIconCustomTemplate:hover, .searchWorkflowIconCustomWorkflow:hover { + opacity: 0.5; + } + + .sidebarCategory, #sidebarBookmarks { + list-style-type: none; + font-family: 'Open Sans', sans-serif; + text-transform: capitalize; + margin: 2px; + background-color: var(--comfy-input-bg); + opacity: 1; + border-radius: 8px; + padding-top: 11px; + 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; + text-transform: capitalize; + margin: 0px; + background-color: transparent; + opacity: 1; + border-radius: 8px; + font-size: 15px; + padding-left: 0; + padding-right: 0px; + padding-top: 0px; + padding-bottom: 40px; + } + + .sidebarItem:hover { + background: color-mix(in srgb, currentColor 15%, transparent); + } + + .sidebarItem { + list-style-type: none; + font-family: 'Open Sans', sans-serif; + text-transform: capitalize; + margin: 2px; + background: color-mix(in srgb, var(--border-color) 35%, transparent); + opacity: 1; + border-radius: 8px; + + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + /*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; + height: 1rem; + width: .5rem; + top: 10px; + } + + .content_sidebar::-webkit-scrollbar:horizontal { + height: .5rem; + width: 1rem + } + + .content_sidebar::-webkit-scrollbar-track { + background-color: transparent; + border-radius: 9999px + } + + .content_sidebar::-webkit-scrollbar-thumb { + --tw-border-opacity: 1; + background-color: hsla(0, 0%, 50%, .8); + border-color: rgba(255, 255, 255, 0, 0, 0); + border-radius: 9999px; + border-width: 1px + } + + .content_sidebar::-webkit-scrollbar-thumb:hover { + --tw-bg-opacity: 1; + + background-color: rgba(150, 150, 150, var(--tw-bg-opacity)) + } + + #spacer { + height: 45px; + } + + + .view_button { + position: relative; + float: unset; + cursor: pointer; + user-select: none; + padding: 5px; + font-size: 20px; + background-color: var(--comfy-input-bg); + opacity: 0.7; + border-radius: 5px; + + margin-top:2px; + box-sizing: content-box; + } + .view_button:hover { + opacity: 1.0; + } + + #sidebar_views { + position: relative; + float: left; + text-align: center; + + cursor: pointer; + user-select: none; + padding: 0px 2px 2px 2px; + font-size: 20px; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; + height: 100%; + width: 30px; + border: 0; + border-left: 2px rgb(from var(--comfy-menu-bg) r g b / 100%); + border-style: solid; + padding-bottom: 0px; + backdrop-filter: blur(16px) !important; + background: rgb(from var(--comfy-menu-bg) r g b / 100%); + } + + + #searchInputSB.closed { + display: none; + } + + .content_sidebar.closed { + width: 0 !important; + } + + .searchCategoryIcon.closed { + display: none; + } + + .clearIcon.closed { + display: none; + } + + .sidebarCategory .pinButton, .sidebarItem .pinButton { + background-color: transparent; + border: 0; + position: absolute; + width: 10%; + float: left; + /* padding-top: 4px; */ + /* font-size: 39px; */ + height: 1.5em; + } + + #sb_scrollToTopButton.closed { + display: none !important; + } + + #sidebarBookmarks .pinButton { + + background-color: transparent; + border: 0; + + /*position: absolute; + right: 0;*/ + + position: relative; + width: 10%; + float: left; + + } + + .previewButton { + background-color: transparent; + border: 0; + position: absolute; + right: 35px; + } + + .pinned { + fill: var(--descrip-text) !important; + opacity: 1 !important; + } + + .svg_class { + width: 24px; + height: 18px; + fill: var(--border-color); + cursor: pointer; + /* hacky fix + margin-top: -5px; + margin-left: -25px;*/ + } + + .pin_normal { + opacity: 0.5; + } + + .pin_normal:hover { + opacity: 1; + } + + .svg_class:hover { + fill: var(--border-color); + + } + + + #sidebarBookmarks .sidebarItem { + margin-left: 10px; + margin-right: 29px; + + } + + .sb_label { + font-family: 'Open Sans', sans-serif; + position: relative; + margin: 5px; + font-weight: bold; + + background: var(--comfy-input-bg); + border-radius: 3px; + padding-left: 6px; + padding-right: 6px; + display: block; + width: calc(100% - 20px); + text-align: center; + user-select: none; + cursor: pointer; + } + + .expand_node, .pin_node { + position: absolute; + right: 5px; + background: transparent; + border: 0; + + } + + .expand_node svg, .pin_node svg { + + width: 20px; + height: 20px; + background: transparent; + fill: var(--input-text); + cursor: pointer; + } + + .sb_dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: grey; + } + + .node_header { + line-height: 1; + padding: 8px 13px 7px; + background: var(--comfy-input-bg); + margin-bottom: 5px; + font-size: 15px; + text-wrap: nowrap; + overflow: hidden; + } + + .headdot { + width: 10px; + height: 10px; + float: inline-start; + margin-right: 8px; + } + + .sb_hidden { + display: none; + } + + .IMAGE { + background-color: #64b5f6; + } + + .VAE { + background-color: #ff6e6e; + } + + .LATENT { + background-color: #ff9cf9; + } + + .MASK { + background-color: #81c784; + } + + .CONDITIONING { + background-color: #ffa931; + } + + .CLIP { + background-color: #ffd500; + } + + .MODEL { + background-color: #b39ddb; + } + + .CONTROL_NET { + background-color: #a5d6a7; + } + + + #previewDiv { + position: absolute; + background-color: var(--comfy-menu-bg); + font-family: 'Open Sans', sans-serif; + font-size: small; + color: var(--descrip-text); + border: 1px solid var(--descrip-text); + display: none; + min-width: 300px; + width: min-content; + height: fit-content; + z-index: 9999; + border-radius: 12px; + overflow: hidden; + font-size: 12px; + padding-bottom: 10px; + + } + + #previewDiv .sb_description { + margin: 10px; + padding: 6px; + background: var(--border-color); + border-radius: 5px; + font-style: italic; + font-weight: 500; + font-size: 0.9rem; + } + + .sb_table { + display: grid; + + grid-column-gap: 10px; + /* Spazio tra le colonne */ + width: 100%; + /* Imposta la larghezza della tabella al 100% del contenitore */ + } + + .sb_row { + display: grid; + grid-template-columns: 10px 1fr 1fr 1fr 10px; + grid-column-gap: 10px; + align-items: baseline; + padding-left: 9px; + padding-right: 9px; + } + + .sb_row_string { + grid-template-columns: 10px 1fr 1fr 10fr 1fr; + } + + .sb_col { + border: 0px solid #000; + display: flex; + align-items: flex-end; + flex-direction: row-reverse; + flex-wrap: nowrap; + align-content: flex-start; + justify-content: flex-end; + } + + .sb_inherit { + display: inherit; + } + + .long_field { + background: var(--bg-color); + border: 2px solid var(--border-color); + margin: 5px 5px 0 5px; + border-radius: 10px; + line-height: 1.7; + } + + .sb_arrow { + color: var(--fg-color); + } + + .sb_preview_badge { + text-align: center; + background: var(--comfy-input-bg); + font-weight: bold; + color: var(--error-text); + } + + #sb_scrollToTopButton { + position: absolute; + bottom: 5px; + right: 56px; + cursor: pointer; + display: none; + + border-radius: 20%; + background: var(--comfy-menu-bg); + padding: 4px; + border: 1px solid #4c4c4c; + } + + #sb_scrollToTopButton svg { + width: 20px; + height: 20px; + fill: var(--descrip-text); + } + + + + + .panel_sidebar{ + min-height: 200px; + + border-radius: 5px; + margin-left: 7px; + + } + + .panel_sidebar label{ + text-transform: uppercase; + } + + + + + + + .custom-menu { + box-shadow: inset 0px 0px 0px rgb(44 44 44 / 5%), inset 1px -1px 0px 0px rgb(22 22 22 / 50%), 0px 0px 9px 0px rgb(0, 0, 0); + font-family: Arial, sans-serif; + display: none; + position: absolute; + background-color: var(--bg-color); + border: 0px solid #313131; + color: var(--input-text); + padding: 5px 0; + border-radius: 5px; + z-index: 9999; + /* backdrop-filter: blur(5px); + background: rgb(from #353535 r g b / 50%);*/ + } + .custom-menu ul { + list-style-type: none; + padding: 0; + margin: 0; + width: 100%; + } + .custom-menu li { + padding: 8px 15px; + cursor: pointer; + + } + #menu-options li { + + min-width: 134px; + } + + + + .custom-menu .sub-menu li:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + + + .custom-menu .sub-menu li:last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + .custom-menu li:hover { + background-color: var(--border-color); + } + .sub-menu { + + box-shadow: inset 0px 0px 0px rgb(44 44 44 / 5%), inset 1px -1px 0px 0px rgb(22 22 22 / 50%), 0px 0px 9px 0px rgb(0, 0, 0); + font-family: Arial, sans-serif; + display: none; + position: absolute; + top: 0; + left: 100%; + background-color: var(--bg-color); + border: 0px solid #313131; + border-radius: 5px; + border-top-left-radius: 0px; + + z-index: 1001; /* Ensure sub-menu appears above main menu */ + /* + backdrop-filter: blur(5px); + background: rgb(from #353535 r g b / 50%);*/ + } + + .cat_empty { + display: none !important; + } + + + + /* Settings */ + #switch_settings{ + bottom: 5px; + position: absolute; + width: 19px; + height: 20px; + line-height: 1; + box-sizing: content-box; + } + + #sb_settingsDiv{ + outline: 0; + border: 0; + border-radius: 6px; + background: var(--bg-color); + color: var(--input-text); + box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.05), inset -1px -1px 0px rgba(0, 0, 0, 0.5), 2px 2px 20px rgb(0, 0, 0); + max-width: 800px; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 0.8rem; + padding: 5px 20px 20px 20px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1001; + text-transform: uppercase; + font-weight: bold; + } + #sb_settingsDiv .setting{ + height: 28px; + width: 450px; + margin-bottom: 7px; + } + #sb_settingsDiv .setting input[type="range"]{ + height: 28px; + + } + + #sb_settingsDiv .setting input[type="text"]{ + background: var(--comfy-menu-bg); + color: var(--drag-text); + padding: 5px; + float: right; + width: 129px; + margin-right: 47px; + border-radius: 5px; + border: solid 1px var(--descrip-text); + } + #sb_settingsDiv .setting textarea{ + background: var(--comfy-menu-bg); + color: var(--drag-text); + padding: 5px; + float: right; + width: calc(100% - 60px); + resize: vertical; + margin-right: 47px; + border-radius: 5px; + border: solid 1px var(--descrip-text); + } + #sb_settingsDiv .setting input[type="checkbox"]{ + width: 18px; + height: 18px; + } + #sb_settingsDiv .setting input{ + float: right; + } + #sb_settingsDiv .setting label{ + line-height: 1.8; + } + #sb_settingsDiv .slider-container{ + float: right; + width: 36px; + background: var(--comfy-menu-bg); + padding: 3px; + border-radius: 5px; + text-align: center; + margin: 5px auto; + } + + #sb_settingsDiv h1{ + margin: 0 0 20px 0; + padding: 0 0 5px 0; + text-align: center; + border-bottom: 5px solid var(--border-color); + text-transform: uppercase; + } + + #sb_settingsDiv button{ + + padding: 9px; + /* position: absolute; */ + bottom: 0; + width: 100%; + margin: 0 0 20px 0; + background: var(--comfy-menu-bg); + color: var(--input-text); + border: 1px solid var(--border-color); + border-radius: 5px; + cursor: pointer; + text-transform: uppercase; + font-weight: bold; + } + #sb_settingsDiv button:hover{ + filter: brightness(120%); + } + + #sb_settingsDiv i{ + margin-left: 4px; + color: #0075ff; + font-style: normal; + font-size: larger; + } + +/* MODALS */ +.sb-modal-title{ + position: absolute; + top: 4px; + margin-top: 0; + text-transform: uppercase; +} + +.sb-modal-backdrop, .sb-modal-backdrop-settings { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); /* Add desired opacity */ + z-index: 1000; /* Make sure the backdrop is behind the modal */ +} + + +#sb_settingsDiv select{ + background: var(--comfy-menu-bg); + color: var(--drag-text); + padding: 5px; + float: right; + width: 129px; + margin-right: 47px; + border-radius: 5px; + } + +.colorBlob { + float: right; + overflow: hidden; + margin-top: 34px; + width: 100%; + height: 125px; + border-radius: 6px; +} + +.colorBlob input[type='color'] { + width: 106%; + height: 112%; + margin: -6px; + } + + + + #switch_home,#switch_custom_view{ + width: 1.3rem; + height: 1.3rem; + + } + + #switch_sidebar{ + + margin-top: 5px; + } + + #sbModal{ + display: none; + z-index: 9999; } \ No newline at end of file diff --git a/app/js/sidebar_node.js b/app/js/sidebar_node.js index 08c2f8d..63a4fc9 100644 --- a/app/js/sidebar_node.js +++ b/app/js/sidebar_node.js @@ -1,1290 +1,1296 @@ - -import { api } from "../../../../scripts/api.js" -import { app } from "../../../../scripts/app.js"; -import { $el } from "../../../../scripts/ui.js"; -import { fuzzyMatch } from "./fts_fuzzy_match.js"; -import { GroupNodeConfig, GroupNodeHandler } from "../../../../extensions/core/groupNode.js"; - -const gnc = GroupNodeConfig; -//import {settingsSetup} from './functions/settings.jsb'; -console.time('execution time'); -const cnPath = "../extensions/ComfyUI-N-Sidebar/" -function jsloader(url) { - return new Promise((resolve, reject) => { - const script = document.createElement("script"); - const timestamp = new Date().getTime(); - script.src = `${url}?v=${timestamp}`; - script.type = "text/javascript"; - script.onload = () => resolve(script); - script.onerror = () => reject(new Error(`Failed to load script: ${url}`)); - document.head.appendChild(script); - }); -} - - - - -jsloader(cnPath + "js/functions/sb_fn.js"); -jsloader(cnPath + "js/functions/utils.js"); -jsloader(cnPath + "js/functions/settings.js"); - - - - -let CUSTOM_COLORS; -try { - var response = await api.fetchApi("/jovimetrix/config", { cache: "no-store" }) - const CONFIG_CORE = await response.json() - CUSTOM_COLORS = CONFIG_CORE?.user?.default?.color?.theme; -} catch (err) { - console.log(err) -} - -let categorySearchToggle = false; - -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"); - let sidebad_view_width = document.getElementById("sidebar_views").offsetWidth; - pinnedElement.querySelectorAll(".sidebarItem").forEach(function (item) { - - item.addEventListener("dragstart", function (event) { - dragItem = event.target; - }); - - item.addEventListener('touchstart', function (event) { - dragItem = event.target; - }); - - item.addEventListener('touchmove', function (event) { - event.preventDefault(); - const touch = event.touches[0]; - const dropZone = document.elementFromPoint(touch.clientX, touch.clientY).closest("ul"); - if (dropZone && dragItem) { - dropZone.appendChild(dragItem); // O usa insertBefore se necessario - } - }); - - item.addEventListener('touchend', function (event) { - if (dragItem) { - savePinnedItems(getSidebarItemIds()); - dragItem = null; - } - }); - - item.addEventListener('mouseover', function () { - if (this.classList.contains('sidebarItem') && this.tagName === 'LI') { - let descriptionDiv = ""; - const itemPosition = getElementPosition(this); - let previewDivTop = 0; - const [previewContent, node_description] = createNodePreview(item.id); - if (node_description) { - descriptionDiv = "
" + node_description + "
"; - } - previewDiv.innerHTML = previewContent + descriptionDiv; - previewDiv.style.display = 'block'; - const correction_offset = 45; - - if (itemPosition.top - this.offsetHeight >= 0 && itemPosition.top + previewDiv.offsetHeight < document.body.offsetHeight) { - previewDivTop = itemPosition.top - this.offsetHeight; - - } else if (itemPosition.top - this.offsetHeight - previewDiv.offsetHeight <= 0) { - previewDivTop = 0 + correction_offset; - } else { - previewDivTop = (itemPosition.top + this.offsetHeight) - previewDiv.offsetHeight; - } - let sidebar_width = parseInt(getVar("sidebarWidth")) || 500; - previewDiv.style.top = `${previewDivTop}px`; - const previewDivLeft = sidebar_width - sidebad_view_width + correction_offset; - - if (sbPosition == "left") { - previewDiv.style.left = `${previewDivLeft}px`; - } else { - previewDiv.style.right = `${previewDivLeft}px`; - } - } - }); - - item.addEventListener('mouseout', function () { - previewDiv.style.display = 'none'; - }); - - reloadCtxMenu(); - }); - - pinnedElement.addEventListener("dragover", function (event) { - event.preventDefault(); - }); - - pinnedElement.addEventListener("drop", function (event) { - event.preventDefault(); - if (dragItem) { - var dropZone = event.target.closest("ul"); - dropZone.insertBefore(dragItem, event.target); - dragItem = null; - savePinnedItems(getSidebarItemIds()); - } - }); -} - - -function saveSidebarWidth(sideb) { - const width = sideb.style.width; - document.cookie = setVar("sidebarWidth", width); -} - - -function restoreSidebarWidth() { - let width_sidebar = "auto"; - let cookieValue = getVar("sidebarWidth"); - if (cookieValue) { - width_sidebar = cookieValue; - } - return width_sidebar; - -} - - -async function pinItem(itemId) { - - const item = document.getElementById(itemId); - const sidebarBookmarks = document.getElementById("sidebarBookmarks"); - const pinnedItems = await loadPinnedItems(); - if (!pinnedItems.includes(itemId)) { - let addedItem = sidebarBookmarks.appendChild(item.cloneNode(true)); - - addedItem.lastChild.lastChild.childNodes[1].classList.add("pinned"); - pinnedItems.push(itemId); - savePinnedItems(pinnedItems); - postPinned(); - } - -} - - - -async function unpinItem(itemId) { - const item = document.getElementById(itemId); - const sidebarBookmarks = document.getElementById("sidebarBookmarks"); - const pinnedItems = await loadPinnedItems(); - if (pinnedItems.includes(itemId)) { - sidebarBookmarks.removeChild(item); - pinnedItems.splice(pinnedItems.indexOf(itemId), 1); - savePinnedItems(pinnedItems); - } -} - - -function removePinnedClass(itemId) { - - const sidebarItems = document.querySelectorAll(".sidebarItem"); - - - sidebarItems.forEach(function (item) { - - if (item.id === itemId) { - - const path = item.querySelector("path"); - if (path) { - path.classList.remove("pinned"); - } - } - }); -} - - -async function loadPinnedItemsAndAddToBookmarks() { - const pinnedItems = await loadPinnedItems(); - - - const sidebarBookmarks = document.getElementById("sidebarBookmarks"); - - - // delete pinned - const sidebarCategories = sidebarBookmarks.querySelectorAll(".sidebarItem"); - sidebarCategories.forEach(category => { category.remove(); }); - - - pinnedItems.forEach(itemId => { - pinItem(itemId); - const item = document.getElementById(itemId); - - - if (item) { - try{ - let addedItem = sidebarBookmarks.appendChild(item.cloneNode(true)); - addedItem.lastChild.lastChild.classList.add("pinned"); - - }catch(err){ } - } - }); - - - postPinned(); -} - - - - - -function toggleCollapsePinned() { - - // expand/collapse pinned - const sidebarBookmarks = document.getElementById('sidebarBookmarks'); - - if (sidebarBookmarks.style.display === 'none') { - sidebarBookmarks.style.display = 'block'; - setVar('sb_pinned_collapsed', 'block'); - } else { - sidebarBookmarks.style.display = 'none'; - setVar('sb_pinned_collapsed', 'none'); - } - -} - - -function toggleCollapseCustom() { - - if (sidebarCustomNodes.style.display === 'none') { - sidebarCustomNodes.style.display = 'block'; - setVar('sb_custom_collapsed', 'block'); - } else { - sidebarCustomNodes.style.display = 'none'; - setVar('sb_custom_collapsed', 'none'); - } - -} - -async function createCategoryList() { - - const data = LiteGraph.registered_node_types; - let categories = {}; - // const pinnedItems = loadPinnedItems(); - - //search init - //get class content_sidebar element - const categoriesList = document.getElementsByClassName("content_sidebar")[0]; - - const sidebar_main = document.getElementById('sidebar'); - //const categoriesList = document.getElementById("content_sidebar"); - const itemSearchInput = document.getElementById("searchInputSB"); - - itemSearchInput.addEventListener("input", async function () { - - // defaultSearchToggle = await getConfiguration("sb_search_type") - if (defaultSearchToggle == "original" && itemSearchInput.value != "") { - //search in all .sidebarItem - handleSearch(categorySearchToggle, "#content_sidebar_home", "searchInputSB") - } - else { - updateList(); - } - }); - - - const clearIcon = document.querySelector(".clearIcon"); - const searchCategoryIcon = document.querySelector(".searchCategoryIcon"); - clearIcon.addEventListener("click", async function () { - try { - - itemSearchInput.value = ""; - const searchTerm = updateList(); - } 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 = updateList(); - - } catch (error) { - - console.error("Error occurred during search:", error); - } - }); - //end search init - - - async function updateList() { - - - return new Promise(async (resolve, reject) => { - categories = {}; - - const itemSearchString = itemSearchInput.value.toLowerCase(); - - // delete all element conaining sidebarCategory class - - const sidebarCategories = categoriesList.querySelectorAll(".sidebarCategory"); - sidebarCategories.forEach(category => { - category.remove(); - }); - - let shortedArray = {}; - for (const objKey in data) { - try { - let searchable; - const category = data[objKey].category.toLowerCase(); - if (!categorySearchToggle) { - searchable = data[objKey].title.toLowerCase(); - } else { - searchable = category; - } - - - if (defaultSearchToggle == "normal") { - if (searchable.includes(itemSearchString) || itemSearchString === "") { - if (!categories[category]) { - categories[category] = []; - } - categories[category].push(data[objKey]); - //remove category if empty - - // if (categories[category].length === 0) { - // delete categories[category]; - // } - - } - } else { - if (itemSearchString === "") { - if (!categories[category]) { - categories[category] = []; - } - categories[category].push(data[objKey]); - - } else { - - - - // fuzzy search for eng - const [accepted, rank] = fuzzyMatch(itemSearchString, reverseAndAppend(cleanText(searchable))); - - - - if (accepted && rank >= 130) { - - if (!shortedArray[rank]) { - shortedArray[rank] = []; - } - shortedArray[rank].push(data[objKey]); - - - - } - - - } - } - - } catch (err) { - console.log(err); - } - } - if (itemSearchString != "") { - if (defaultSearchToggle !== "normal") { - - const ranks = Object.keys(shortedArray); - ranks.sort((a, b) => b - a); - - ranks.forEach(rank => { - - const dataArr = shortedArray[rank]; - dataArr.forEach(item => { - - if (!categories[item.category]) { - categories[item.category] = []; - } - categories[item.category].push(item); - }); - }); - } - } else { - defaultSearchOrder = await getConfiguration("sb_order_type") - if (defaultSearchOrder == "alphabetical") { - - const sortedCategoriesData = {}; - const sortedCategories = Object.keys(categories).sort(); - sortedCategories.forEach(category => { - - sortedCategoriesData[category] = categories[category]; - - }); - - categories = sortedCategoriesData; - - } - - } - - - - renderList(); - - resolve(itemSearchString); - - }); - } - - - function buildTree(categories, useSubcategories = true) { - const tree = {}; - - for (const category in categories) { - const parts = useSubcategories ? category.split('/').filter(part => part !== '') : [category]; - - let current = tree; - if (parts.length > 0 || !useSubcategories) { - - - for (const part of parts) { - if (!current[part]) { - current[part] = {}; - } - current = current[part]; - } - - if (!current.items) { - current.items = []; - } - - categories[category].forEach(displayName => { - current.items.push(displayName); - }); - } - } - - return tree; - } - - function createHtmlFromTree(tree, parentElement,pinnedItems) { - for (const key in tree) { - if (key !== 'items') { - const subfolderLi = document.createElement('li'); - subfolderLi.textContent = "🗀 " + key; - subfolderLi.classList.add('sidebarCategory'); - subfolderLi.dataset.nameworkflow = key; - - const subfolderUl = document.createElement('ul'); - subfolderUl.style.display = "none"; - subfolderUl.classList.add('subfolder'); - subfolderUl.dataset.subfolder = key; - subfolderUl.id = key + "_ul"; - subfolderUl.classList.add("displayNamesList"); - - subfolderLi.appendChild(subfolderUl); - parentElement.appendChild(subfolderLi); - - createHtmlFromTree(tree[key], subfolderUl,pinnedItems); - } - } - - if (tree.items) { - tree.items.forEach(displayName => { - try { - - const displayNameMain = document.createElement('div'); - displayNameMain.classList.add('displayName'); - displayNameMain.title = displayName.title; - displayNameMain.id = displayName.type; - displayNameMain.textContent = displayName.title; - const displayNameItem = document.createElement('li'); - displayNameItem.classList.add('sidebarItem'); - //displayNameItem.innerHTML = "
"+displayName.title+"
"; - displayNameItem.title = displayName.title; - displayNameItem.draggable = true; - displayNameItem.appendChild(displayNameMain); - - let color; - const nodeData = displayName?.nodeData; - // USE NODE'S DEFAULT COLOR, IF ANY - if (color === undefined && nodeData !== undefined) { - color = nodeData.color; - } - // JOVIMETRIX CUT-OUT FOR CUSTOM COLORED NODES - if (CUSTOM_COLORS) { - color = CUSTOM_COLORS[displayName.title]; - if (color === undefined && nodeData !== undefined) { - let k = nodeData.category; - while (k) { - color = CUSTOM_COLORS[k]; - if (color) { - color = color.title; - break; - } - const last = k.lastIndexOf('/'); - k = last !== -1 ? k.substring(0, last) : ''; - } - } - } - // APPLY THE COLOR, IF ANY - if (color) { - displayNameItem.style = `background: ${color}`; - } - // - - displayNameItem.id = displayName.type; - - /* Create Pin Button */ - - const pinButton = document.createElement('button'); - pinButton.classList.add('pinButton'); - - let add_class = ""; - - if (pinnedItems.includes(displayName.type)) { - add_class = "pinned"; - } - pinButton.innerHTML = ` - - - `; - - displayNameItem.appendChild(pinButton); - /* End Pin Button */ - - parentElement.appendChild(displayNameItem); - } catch (err) { - console.log(err); - } - }); - } - } - - - async function renderList() { - - return new Promise(async (resolve, reject) => { - const pinnedItems = await loadPinnedItems(); - // - const sidebarCustomNodes = document.getElementById("sidebarCustomNodes"); - - - let tree_view = await getConfiguration("sb_tree_view") || "multi"; - if (tree_view=="multi" ) { - tree_view = true; - } else{ - tree_view = false; - } - const tree = buildTree(categories,tree_view); - - - createHtmlFromTree(tree, sidebarCustomNodes,pinnedItems); - - - - if (!categorySearchToggle && itemSearchInput.value != "") { - sdExpandAll(1); - - } - - loadPinnedItemsAndAddToBookmarks(); - - - /* preview */ - - const sidebarItems_cat = document.querySelectorAll('.sidebarItem'); - const previewDiv = document.getElementById('previewDiv'); - let sidebad_view_width = document.getElementById("sidebar_views").offsetWidth; - sidebarItems_cat.forEach(item => { - - item.addEventListener('mouseover', function () { - - if (this.classList.contains('sidebarItem') && this.tagName === 'LI') { - let descriptionDiv = ""; - const itemPosition = getElementPosition(this); - let previewDivTop = 0; - const [previewContent, node_description] = createNodePreview(item.id); - if (node_description) { - descriptionDiv = "
" + node_description + "
"; - } - previewDiv.innerHTML = previewContent + descriptionDiv; - previewDiv.style.display = 'block'; - const correction_offset = 45; - - if (itemPosition.top - this.offsetHeight >= 0 && itemPosition.top + previewDiv.offsetHeight < document.body.offsetHeight) { - previewDivTop = itemPosition.top - this.offsetHeight - - } else if (itemPosition.top - this.offsetHeight - previewDiv.offsetHeight <= 0) { - previewDivTop = 0 + correction_offset; - - - } - else { - - previewDivTop = (itemPosition.top + this.offsetHeight) - previewDiv.offsetHeight; - } - - let sidebar_width = parseInt(getVar("sidebarWidth")) || 500; - - - previewDiv.style.top = `${previewDivTop}px`; - - - const previewDivLeft = sidebar_width - sidebad_view_width + correction_offset; - - if (sbPosition == "left") { - previewDiv.style.left = `${previewDivLeft}px`; - } else { - previewDiv.style.right = `${previewDivLeft}px`; - } - - } - }); - - item.addEventListener('mouseout', function () { - previewDiv.style.display = 'none'; - }) - - }); - - categoriesList.addEventListener('scroll', function () { - previewDiv.style.display = 'none'; - }); - - window.addEventListener('click', function (event) { - - if (!event.target.classList.contains('sidebarItem')) { - previewDiv.style.display = 'none'; - - } - }); - - - const categoryItems = document.querySelectorAll("#content_sidebar_home .sidebarCategory"); - categoryItems.forEach(function (folderItem) { - folderItem.addEventListener("click", function (event) { - - if (event.target === event.currentTarget) { - const displayNamesList = event.target.querySelector("ul"); - - displayNamesList.style.display = displayNamesList.style.display === "none" ? "block" : "none"; - - setNodeStatus('sb_categoryNodeStatus',displayNamesList.parentElement.dataset.nameworkflow, displayNamesList.style.display) - } - }); - - - - }); - - - - reloadCtxMenu() - resolve(); - }); - } - let udata = await updateList(); - - - - - const dragHandle = document.getElementById("dragHandle"); - - let isDragging = false; - let startX; - let startWidth; - - // Funzioni per gestire gli eventi del mouse - dragHandle.addEventListener("mousedown", function (event) { - isDragging = true; - startX = event.clientX; - startWidth = parseInt(window.getComputedStyle(sidebar_main).width); - }); - - document.addEventListener("mouseup", function () { - if (isDragging) { - isDragging = false; - saveSidebarWidth(sidebar_main); - } - }); - - document.addEventListener("mousemove", function (event) { - if (!isDragging) return; - - const delta = event.clientX - startX; - if (sbPosition === "left") { - sidebar_main.style.width = (startWidth + delta) + "px"; - } else { - sidebar_main.style.width = (startWidth - delta) + "px"; - } - }); - - // Funzioni per gestire gli eventi touch - dragHandle.addEventListener("touchstart", function (event) { - isDragging = true; - startX = event.touches[0].clientX; - startWidth = parseInt(window.getComputedStyle(sidebar_main).width); - }); - - document.addEventListener("touchend", function () { - if (isDragging) { - isDragging = false; - saveSidebarWidth(sidebar_main); - } - }); - - document.addEventListener("touchmove", function (event) { - if (!isDragging) return; - - const delta = event.touches[0].clientX - startX; - if (sbPosition === "left") { - sidebar_main.style.width = (startWidth + delta) + "px"; - } else { - sidebar_main.style.width = (startWidth - delta) + "px"; - } - }); - - - -} - - - - -async function addSidebar() { - - let draggedElementId; - const sidebar_width = restoreSidebarWidth(); - const response = await fetch(cnPath + 'html/sidebar.html'); - let html = await response.text(); - - html = html.replace(/{{sidebar_width}}/g, sidebar_width); - html = html.replace(/{{node_path}}/g, cnPath); - const canvas = $el("sidebar", { - parent: document.body, - innerHTML: html - }); - - document.getElementById("content_sidebar_home").addEventListener("click", async function (event) { - const clickedElement = event.target; - const pinnedItems = await loadPinnedItems(); - const pinButton = clickedElement.tagName; - - - if (pinButton == "rect" && clickedElement.classList.contains("pin_node")) { - let itemId; - try { - itemId = clickedElement.parentElement.parentElement.parentElement.id; - } catch (err) { - console.log(err); - } - - if (!pinnedItems.includes(itemId)) { - - const sidebarItemId = itemId; - pinItem(sidebarItemId); - clickedElement.parentElement.getElementsByClassName("pin_normal")[0].classList.add("pinned"); - - }//remove from sidebar - else { - if (clickedElement.parentElement.parentElement.parentElement.parentElement.id == "sidebarBookmarks") { - clickedElement.parentElement.parentElement.parentElement.remove(); - - const itemIndex = pinnedItems.indexOf(itemId); - - - removePinnedClass(itemId); - - if (itemIndex !== -1) { - pinnedItems.splice(itemIndex, 1); - savePinnedItems(pinnedItems); - } - } else { - - unpinItem(itemId); - } - - clickedElement.parentElement.getElementsByClassName("pin_normal")[0].classList.remove("pinned"); - } - - - } - else if ((pinButton == "rect") && clickedElement.classList.contains("expand_node")) { - - sdExpandAll(); - } - else if ((pinButton == "LABEL") && clickedElement.id === "sb_label_custom") { - - - toggleCollapseCustom(); - - } - - - - - }); - - - const sidebarItems = document.querySelectorAll(".sidebar li ul li"); - sidebarItems.forEach(item => { - item.draggable = true; - }); - - - - - function handleDrop(event) { - event.preventDefault(); - - if (event.srcElement.tagName.toLowerCase() != "canvas") { - return; - } - - const coord = convertCanvasToOffset(app.canvasEl.data.ds, [event.clientX, event.clientY]); - const x = coord[0]; - const y = coord[1]; - sidebarAddNode(draggedElementId, draggedElementId, x, y); - draggedElementId = null; - } - - function allowDrop(event) { - event.preventDefault(); - } - - - - function handleTouchMove(event) { - event.preventDefault(); - } - - function handleTouchEnd(event) { - event.preventDefault(); - - const touch = event.changedTouches[0]; - const dropZone = document.elementFromPoint(touch.clientX, touch.clientY); - - if (dropZone.tagName.toLowerCase() != "canvas") { - return; - } - - const coord = convertCanvasToOffset(app.canvasEl.data.ds, [touch.clientX, touch.clientY]); - const x = coord[0]; - const y = coord[1]; - sidebarAddNode(draggedElementId, draggedElementId, x, y); - draggedElementId = null; - } - - // const search_bar = document.getElementById('searchInputSB'); - - - - // Gestione degli eventi di trascinamento - canvas.addEventListener("dragstart", function (event) { - draggedElementId = event.target.id; - previewDiv.style.display = 'none'; - }); - - canvas.addEventListener("dragover", allowDrop); - - // Gestione degli eventi touch - canvas.addEventListener("touchstart", function (event) { - draggedElementId = event.target.id; - previewDiv.style.display = 'none'; - }); - - canvas.addEventListener("touchmove", handleTouchMove); - - canvas.addEventListener("touchend", handleTouchEnd); - - // Altri eventi - document.getElementById('switch_sidebar').addEventListener('click', function () { - toggleSHSB(); - }); - - document.addEventListener('drop', handleDrop); - - const pinnedLabel = document.getElementById("sb_label_pinned"); - pinnedLabel.addEventListener('click', function () { - toggleCollapsePinned(); - }); - - - createCategoryList(); - SidebarPostBoot(); -} - - -function toggleSHSB(force = undefined) { - const side_bars = document.querySelectorAll(".content_sidebar"); - const main_sidebar = document.getElementById('sidebar'); - const search_bar = document.getElementById('searchInputSB'); - const scrollToTopButton = document.getElementById("sb_scrollToTopButton"); - const clearIcon = document.querySelector(".clearIcon"); - const searchCategoryIcon = document.querySelector(".searchCategoryIcon"); - const switch_sidebar = document.getElementById('switch_sidebar'); - //search_bar.classList.toggle('closed',force); - - side_bars.forEach(side_bar => { - //side_bar.classList.toggle('closed',force); - - if (force !== undefined) { - if (force) { - side_bar.classList.add('closed'); - clearIcon.classList.add('closed'); - searchCategoryIcon.classList.add('closed'); - search_bar.classList.add('closed'); - scrollToTopButton.classList.add('closed'); - - } else { - side_bar.classList.remove('closed'); - clearIcon.classList.remove('closed'); - searchCategoryIcon.classList.remove('closed'); - search_bar.classList.remove('closed'); - scrollToTopButton.classList.remove('closed'); - setVar("sb_minimized", "true"); - } - } else { - - if (side_bar.classList.contains('closed')) { - side_bar.classList.remove('closed'); - clearIcon.classList.remove('closed'); - searchCategoryIcon.classList.remove('closed'); - search_bar.classList.remove('closed'); - //fix for keyboard shortcuts - if (getVar("sb_minimized") == "true") { - switch_sidebar.style.filter = "brightness(0.8)"; - } - - } else { - if (getVar("sb_minimized") == "false") { - side_bar.classList.add('closed'); - clearIcon.classList.add('closed'); - searchCategoryIcon.classList.add('closed'); - search_bar.classList.add('closed'); - scrollToTopButton.classList.add('closed'); - switch_sidebar.style.filter = "brightness(1.0)"; - } else { - switch_sidebar.style.filter = "brightness(0.8)"; - } - } - } - - }); - - - - if (getVar("sb_minimized") == "false") { - - if (force == undefined) { - setVar("sb_minimized", true); - } - main_sidebar.style.width = '45px'; - } else { - - if (force == undefined) { - setVar("sb_minimized", false); - main_sidebar.style.width = getVar("sidebarWidth") || '300px'; - } else if (force == true) { - - main_sidebar.style.width = '45px'; - - } else { - main_sidebar.style.width = getVar("sidebarWidth") || '300px'; - } - - } - - - - -} - -//option: disable auto-hide when minimized - -//Shortcuts - -function handleKeyPress(event) { - - // Per la combinazione Alt + X - if (event.altKey && (event.key.toLowerCase() === "x" || event.keyCode === 88)) { - // Toggle sidebar if it's closed - const side_bar = document.getElementById('content_sidebar_home'); - if (side_bar.classList.contains('closed')) { - toggleSHSB(); - } - // Focus on searchInputSB - searchInputSB.focus(); - } - - // Per la combinazione Alt + Z - if (event.altKey && (event.key.toLowerCase() === "z" || event.keyCode === 90)) { - toggleSHSB(); - } - if (event.altKey && (event.key.toLowerCase() === "g" || event.keyCode === 71)) { - showSettings(); - } - -} - - - - - -// Custom Node View -function processViews(viewsData, settingsData) { - - const sb = document.getElementById('sidebar'); - const sbv = document.getElementById('sidebar_views'); - - const promises = viewsData.map(async (view) => { - const icon = view.icon; - if (!icon) { - return; - } - const description = view.description; - - const div_view = document.createElement('div'); - div_view.classList = "content_sidebar sb_hidden"; - div_view.id = "panel_" + view.id; - div_view.dataset.content = view.id; - const bsb = document.getElementById('content_sidebar_home'); - // add button to sidebarviews - bsb.insertAdjacentElement('afterend', div_view); - - //console.log('Icon:', icon); - //console.log('Descr:', description); - //console.log('Panel:', view.panels); - //console.log('-------------------'); - - await Promise.all(view.panels.map(async (panel) => { - try { - const timestamp = new Date().getTime(); - const response = await fetch(cnPath + `panels/${panel}/${panel}.html?v=${timestamp}`); - const html = await response.text(); - - if (html !== "404: Not Found") { - //inherit width from bsb - const div_panel = document.createElement('div'); - div_panel.classList = "panel_sidebar"; - div_panel.id = "panel_" + panel; - - const div_panel_title = document.createElement('label'); - div_panel_title.classList = "panel_sidebar_title sb_label"; - div_panel_title.id = "panel_title_" + panel; - - div_panel_title.innerHTML = view.id.replace("_", " "); - - - - - div_panel.appendChild(div_panel_title); - - const canvas = $el("div", { - parent: div_panel, - innerHTML: html, - }); - - - div_view.insertAdjacentElement('beforeend', div_panel); - jsloader(`${cnPath}panels/${panel}/${panel}.jsb`); - //window.custom_templates(); - console.log("LOADING " + cnPath + `panels/${panel}/${panel}.js`) - } - } catch (error) { - console.error('Errore nel caricamento del file HTML:', error); - } - })); - - - - //sidebar menu - const div_button = document.createElement('div'); - - - div_button.classList = "view_button"; - div_button.id = "switch_" + view.id; - //inherit width from bsb - - div_button.dataset.tab = view.id; - div_button.title = description; - div_button.innerHTML += view.icon; - - div_button.addEventListener('click', function () { - const tabId = "panel_" + this.getAttribute('data-tab'); - switchTab(tabId) - if (getVar("sb_auto_hide") == "false" && getVar("sb_minimized") == "true") { - toggleSHSB(false); - } - }); - sbv.appendChild(div_button); - }); - return Promise.all(promises).then(() => { - - setTimeout(() => { - - settingsSetup(app, $el) - setContextMenu(settingsData, "#content_sidebar_home .sidebarItem", 1); - switchTab(getVar('sb_current_tab')); - const sidebar_view = document.getElementById('sidebar_views'); - const sidebar = document.getElementById('sidebar'); - - - - sidebar_view.addEventListener('mouseover', function () { - - if (getVar('sb_auto_hide') == "true") { - if (getVar('sb_minimized') == "true") { - toggleSHSB(false); - - } - } - }); - document.addEventListener('click', function (event) { - //if click is outside sidebar id element - if (!sidebar.contains(event.target)) { - if (getVar('sb_minimized') == "true") { - toggleSHSB(true); - } - } - - }); - }, 100); - - }); - - - -} - - - -async function loadData() { - - try { - const timestamp = new Date().getTime(); - const response1 = await fetch(`${cnPath}views/views.json?v=${timestamp}`); - const viewsData1 = await response1.json(); - const response2 = await fetch(`${cnPath}views/custom_views.json?v=${timestamp}`); - const viewsData2 = await response2.json(); - const allViewsData = [...viewsData1, ...viewsData2]; - const response3 = await fetch(`${cnPath}settings.json?v=${timestamp}`); - const settingsData = await response3.json(); - processViews(allViewsData, settingsData); - } catch (error) { - console.error('Error loading views:', error); - } - -} - - - - -async function SidebarPostBoot() { - console.log('SidebarPostBoot'); - - - - - const switch_home = document.getElementById("switch_home"); - - //only for home - switch_home.addEventListener('click', function () { - switchTab("content_sidebar_home", 1) - if (getVar("sb_auto_hide") == "false" && getVar("sb_minimized") == "true") { - toggleSHSB(false); - } - - - }); - - - - if (getVar("sb_minimized") == "false") { - const switch_sidebar = document.getElementById('switch_sidebar'); - switch_sidebar.style.filter = "brightness(0.8)"; - }else{ - console.log("test") - var sb_show_at_startup = getVar("sb_show_at_startup") || "false"; - - if (sb_show_at_startup == "false" ) { - toggleSHSB(true); - } - } - - - document.addEventListener("keydown", handleKeyPress); - const sb = document.getElementById('content_sidebar_home'); - const scrollToTopButton = document.getElementById("sb_scrollToTopButton"); - scrollToTopButton.addEventListener("click", function () { - sb.scrollTo({ - top: 0, - behavior: "smooth" - }); - }); - - - - sb.addEventListener("scroll", function () { - - if (sb.scrollTop > 0) { - scrollToTopButton.style.display = "block"; - } else { - scrollToTopButton.style.display = "none"; - } - }); - - const sidebarBookmarks = document.getElementById("sidebarBookmarks"); - if (getVar("sb_pinned_collapsed")) { - sidebarBookmarks.style.display = getVar('sb_pinned_collapsed'); - } - - if (getVar("sb_custom_collapsed")) { - sidebarCustomNodes.style.display = getVar('sb_custom_collapsed'); - } - loadData(); - /* - const sidebar_views = document.getElementById("sidebar_views"); - const sidebar = document.getElementById("sidebar"); - //if is hover sidebar_views - sidebar_views.addEventListener("mouseover", function() { - toggleSHSB(); - }) - //if is not hover sidebar_views - sidebar.addEventListener("mouseout", function() { - toggleSHSB(); - }) - */ -} - - -// Function to check if the element is not an empty object -function SidebarBoot() { - if (Object.keys(LiteGraph.registered_node_types).length > 10) { - // Execute the function when the element is not an empty object - // - //MIGRATION - migrationSettings() - - addSidebarStyles("css/base_style_sb.css"); - - addSidebar(); - - console.log('SidebarBoot'); - console.timeEnd('execution time'); - - - - } else { - // Retry after a period of time - setTimeout(SidebarBoot, 500); // Check every 100 milliseconds - } -} - -// Start checking the element -SidebarBoot(); + +import { api } from "../../../../scripts/api.js" +import { app } from "../../../../scripts/app.js"; +import { $el } from "../../../../scripts/ui.js"; +import { fuzzyMatch } from "./fts_fuzzy_match.js"; +import { GroupNodeConfig, GroupNodeHandler } from "../../../../extensions/core/groupNode.js"; + +const gnc = GroupNodeConfig; +//import {settingsSetup} from './functions/settings.jsb'; +console.time('execution time'); +const cnPath = "../extensions/ComfyUI-N-Sidebar/" +function jsloader(url) { + return new Promise((resolve, reject) => { + const script = document.createElement("script"); + const timestamp = new Date().getTime(); + script.src = `${url}?v=${timestamp}`; + script.type = "text/javascript"; + script.onload = () => resolve(script); + script.onerror = () => reject(new Error(`Failed to load script: ${url}`)); + document.head.appendChild(script); + }); +} + + + + +jsloader(cnPath + "js/functions/sb_fn.js"); +jsloader(cnPath + "js/functions/utils.js"); +jsloader(cnPath + "js/functions/settings.js"); + + + + +let CUSTOM_COLORS; + + +try { + var response = await api.fetchApi("/jovimetrix/config", { cache: "no-store" }) + const CONFIG_CORE = await response.json() + CUSTOM_COLORS = CONFIG_CORE?.user?.default?.color?.theme; +} catch (err) { + console.log(err) +} + +let categorySearchToggle = false; + +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"); + let sidebad_view_width = document.getElementById("sidebar_views").offsetWidth; + pinnedElement.querySelectorAll(".sidebarItem").forEach(function (item) { + + item.addEventListener("dragstart", function (event) { + dragItem = event.target; + }); + + item.addEventListener('touchstart', function (event) { + dragItem = event.target; + }); + + item.addEventListener('touchmove', function (event) { + event.preventDefault(); + const touch = event.touches[0]; + const dropZone = document.elementFromPoint(touch.clientX, touch.clientY).closest("ul"); + if (dropZone && dragItem) { + dropZone.appendChild(dragItem); // O usa insertBefore se necessario + } + }); + + item.addEventListener('touchend', function (event) { + if (dragItem) { + savePinnedItems(getSidebarItemIds()); + dragItem = null; + } + }); + + item.addEventListener('mouseover', function () { + if (this.classList.contains('sidebarItem') && this.tagName === 'LI') { + let descriptionDiv = ""; + const itemPosition = getElementPosition(this); + let previewDivTop = 0; + const [previewContent, node_description] = createNodePreview(item.id); + if (node_description) { + descriptionDiv = "
" + node_description + "
"; + } + previewDiv.innerHTML = previewContent + descriptionDiv; + previewDiv.style.display = 'block'; + const correction_offset = 45; + + if (itemPosition.top - this.offsetHeight >= 0 && itemPosition.top + previewDiv.offsetHeight < document.body.offsetHeight) { + previewDivTop = itemPosition.top - this.offsetHeight; + + } else if (itemPosition.top - this.offsetHeight - previewDiv.offsetHeight <= 0) { + previewDivTop = 0 + correction_offset; + } else { + previewDivTop = (itemPosition.top + this.offsetHeight) - previewDiv.offsetHeight; + } + let sidebar_width = parseInt(getVar("sidebarWidth")) || 500; + previewDiv.style.top = `${previewDivTop}px`; + const previewDivLeft = sidebar_width - sidebad_view_width + correction_offset; + + if (sbPosition == "left") { + previewDiv.style.left = `${previewDivLeft}px`; + } else { + previewDiv.style.right = `${previewDivLeft}px`; + } + } + }); + + item.addEventListener('mouseout', function () { + previewDiv.style.display = 'none'; + }); + + reloadCtxMenu(); + }); + + pinnedElement.addEventListener("dragover", function (event) { + event.preventDefault(); + }); + + pinnedElement.addEventListener("drop", function (event) { + event.preventDefault(); + if (dragItem) { + var dropZone = event.target.closest("ul"); + dropZone.insertBefore(dragItem, event.target); + dragItem = null; + savePinnedItems(getSidebarItemIds()); + } + }); +} + + +function saveSidebarWidth(sideb) { + const width = sideb.style.width; + document.cookie = setVar("sidebarWidth", width); +} + + +function restoreSidebarWidth() { + let width_sidebar = "auto"; + let cookieValue = getVar("sidebarWidth"); + if (cookieValue) { + width_sidebar = cookieValue; + } + return width_sidebar; + +} + + +async function pinItem(itemId) { + + const item = document.getElementById(itemId); + const sidebarBookmarks = document.getElementById("sidebarBookmarks"); + const pinnedItems = await loadPinnedItems(); + if (!pinnedItems.includes(itemId)) { + let addedItem = sidebarBookmarks.appendChild(item.cloneNode(true)); + + addedItem.lastChild.lastChild.childNodes[1].classList.add("pinned"); + pinnedItems.push(itemId); + savePinnedItems(pinnedItems); + postPinned(); + } + +} + + + +async function unpinItem(itemId) { + const item = document.getElementById(itemId); + const sidebarBookmarks = document.getElementById("sidebarBookmarks"); + const pinnedItems = await loadPinnedItems(); + if (pinnedItems.includes(itemId)) { + sidebarBookmarks.removeChild(item); + pinnedItems.splice(pinnedItems.indexOf(itemId), 1); + savePinnedItems(pinnedItems); + } +} + + +function removePinnedClass(itemId) { + + const sidebarItems = document.querySelectorAll(".sidebarItem"); + + + sidebarItems.forEach(function (item) { + + if (item.id === itemId) { + + const path = item.querySelector("path"); + if (path) { + path.classList.remove("pinned"); + } + } + }); +} + + +async function loadPinnedItemsAndAddToBookmarks() { + const pinnedItems = await loadPinnedItems(); + + + const sidebarBookmarks = document.getElementById("sidebarBookmarks"); + + + // delete pinned + const sidebarCategories = sidebarBookmarks.querySelectorAll(".sidebarItem"); + sidebarCategories.forEach(category => { category.remove(); }); + + + pinnedItems.forEach(itemId => { + pinItem(itemId); + const item = document.getElementById(itemId); + + + if (item) { + try{ + let addedItem = sidebarBookmarks.appendChild(item.cloneNode(true)); + addedItem.lastChild.lastChild.classList.add("pinned"); + + }catch(err){ } + } + }); + + + postPinned(); +} + + + + + +function toggleCollapsePinned() { + + // expand/collapse pinned + const sidebarBookmarks = document.getElementById('sidebarBookmarks'); + + if (sidebarBookmarks.style.display === 'none') { + sidebarBookmarks.style.display = 'block'; + setVar('sb_pinned_collapsed', 'block'); + } else { + sidebarBookmarks.style.display = 'none'; + setVar('sb_pinned_collapsed', 'none'); + } + +} + + +function toggleCollapseCustom() { + + if (sidebarCustomNodes.style.display === 'none') { + sidebarCustomNodes.style.display = 'block'; + setVar('sb_custom_collapsed', 'block'); + } else { + sidebarCustomNodes.style.display = 'none'; + setVar('sb_custom_collapsed', 'none'); + } + +} + +async function createCategoryList() { + + const data = LiteGraph.registered_node_types; + let categories = {}; + // const pinnedItems = loadPinnedItems(); + + //search init + //get class content_sidebar element + const categoriesList = document.getElementsByClassName("content_sidebar")[0]; + + const sidebar_main = document.getElementById('sidebar'); + //const categoriesList = document.getElementById("content_sidebar"); + const itemSearchInput = document.getElementById("searchInputSB"); + + itemSearchInput.addEventListener("input", async function () { + + // defaultSearchToggle = await getConfiguration("sb_search_type") + if (defaultSearchToggle == "original" && itemSearchInput.value != "") { + //search in all .sidebarItem + handleSearch(categorySearchToggle, "#content_sidebar_home", "searchInputSB") + } + else { + updateList(); + } + }); + + + const clearIcon = document.querySelector(".clearIcon"); + const searchCategoryIcon = document.querySelector(".searchCategoryIcon"); + clearIcon.addEventListener("click", async function () { + try { + + itemSearchInput.value = ""; + const searchTerm = updateList(); + } 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 = updateList(); + + } catch (error) { + + console.error("Error occurred during search:", error); + } + }); + //end search init + + + async function updateList() { + + + return new Promise(async (resolve, reject) => { + categories = {}; + + const itemSearchString = itemSearchInput.value.toLowerCase(); + + // delete all element conaining sidebarCategory class + + const sidebarCategories = categoriesList.querySelectorAll(".sidebarCategory"); + sidebarCategories.forEach(category => { + category.remove(); + }); + + let shortedArray = {}; + for (const objKey in data) { + try { + let searchable; + const category = data[objKey].category.toLowerCase(); + if (!categorySearchToggle) { + searchable = data[objKey].title.toLowerCase(); + } else { + searchable = category; + } + + + if (defaultSearchToggle == "normal") { + if (searchable.includes(itemSearchString) || itemSearchString === "") { + if (!categories[category]) { + categories[category] = []; + } + categories[category].push(data[objKey]); + //remove category if empty + + // if (categories[category].length === 0) { + // delete categories[category]; + // } + + } + } else { + if (itemSearchString === "") { + if (!categories[category]) { + categories[category] = []; + } + categories[category].push(data[objKey]); + + } else { + + + + // fuzzy search for eng + const [accepted, rank] = fuzzyMatch(itemSearchString, reverseAndAppend(cleanText(searchable))); + + + + if (accepted && rank >= 130) { + + if (!shortedArray[rank]) { + shortedArray[rank] = []; + } + shortedArray[rank].push(data[objKey]); + + + + } + + + } + } + + } catch (err) { + console.log(err); + } + } + if (itemSearchString != "") { + if (defaultSearchToggle !== "normal") { + + const ranks = Object.keys(shortedArray); + ranks.sort((a, b) => b - a); + + ranks.forEach(rank => { + + const dataArr = shortedArray[rank]; + dataArr.forEach(item => { + + if (!categories[item.category]) { + categories[item.category] = []; + } + categories[item.category].push(item); + }); + }); + } + } else { + defaultSearchOrder = await getConfiguration("sb_order_type") + if (defaultSearchOrder == "alphabetical") { + + const sortedCategoriesData = {}; + const sortedCategories = Object.keys(categories).sort(); + sortedCategories.forEach(category => { + + sortedCategoriesData[category] = categories[category]; + + }); + + categories = sortedCategoriesData; + + } + + } + + + + renderList(); + + resolve(itemSearchString); + + }); + } + + + function buildTree(categories, useSubcategories = true) { + const tree = {}; + + for (const category in categories) { + const parts = useSubcategories ? category.split('/').filter(part => part !== '') : [category]; + + let current = tree; + if (parts.length > 0 || !useSubcategories) { + + + for (const part of parts) { + if (!current[part]) { + current[part] = {}; + } + current = current[part]; + } + + if (!current.items) { + current.items = []; + } + + categories[category].forEach(displayName => { + current.items.push(displayName); + }); + } + } + + return tree; + } + + function createHtmlFromTree(tree, parentElement,pinnedItems) { + for (const key in tree) { + if (key !== 'items') { + const subfolderLi = document.createElement('li'); + subfolderLi.textContent = "🗀 " + key; + subfolderLi.classList.add('sidebarCategory'); + subfolderLi.dataset.nameworkflow = key; + + const subfolderUl = document.createElement('ul'); + subfolderUl.style.display = "none"; + subfolderUl.classList.add('subfolder'); + subfolderUl.dataset.subfolder = key; + subfolderUl.id = key + "_ul"; + subfolderUl.classList.add("displayNamesList"); + + subfolderLi.appendChild(subfolderUl); + parentElement.appendChild(subfolderLi); + + createHtmlFromTree(tree[key], subfolderUl,pinnedItems); + } + } + + if (tree.items) { + tree.items.forEach(displayName => { + try { + + const displayNameMain = document.createElement('div'); + displayNameMain.classList.add('displayName'); + displayNameMain.title = displayName.title; + displayNameMain.id = displayName.type; + displayNameMain.textContent = displayName.title; + const displayNameItem = document.createElement('li'); + displayNameItem.classList.add('sidebarItem'); + //displayNameItem.innerHTML = "
"+displayName.title+"
"; + displayNameItem.title = displayName.title; + displayNameItem.draggable = true; + displayNameItem.appendChild(displayNameMain); + + let color; + const nodeData = displayName?.nodeData; + // USE NODE'S DEFAULT COLOR, IF ANY + if (color === undefined && nodeData !== undefined) { + color = nodeData.color; + } + // JOVIMETRIX CUT-OUT FOR CUSTOM COLORED NODES + if (CUSTOM_COLORS) { + color = CUSTOM_COLORS[displayName.title]; + if (color === undefined && nodeData !== undefined) { + let k = nodeData.category; + while (k) { + color = CUSTOM_COLORS[k]; + if (color) { + color = color.title; + break; + } + const last = k.lastIndexOf('/'); + k = last !== -1 ? k.substring(0, last) : ''; + } + } + } + // APPLY THE COLOR, IF ANY + if (color) { + displayNameItem.style = `background: ${color}`; + } + // + + displayNameItem.id = displayName.type; + + /* Create Pin Button */ + + const pinButton = document.createElement('button'); + pinButton.classList.add('pinButton'); + + let add_class = ""; + + if (pinnedItems.includes(displayName.type)) { + add_class = "pinned"; + } + pinButton.innerHTML = ` + + + `; + + displayNameItem.appendChild(pinButton); + /* End Pin Button */ + + parentElement.appendChild(displayNameItem); + } catch (err) { + console.log(err); + } + }); + } + } + + + async function renderList() { + + return new Promise(async (resolve, reject) => { + const pinnedItems = await loadPinnedItems(); + // + const sidebarCustomNodes = document.getElementById("sidebarCustomNodes"); + + + let tree_view = await getConfiguration("sb_tree_view") || "multi"; + if (tree_view=="multi" ) { + tree_view = true; + } else{ + tree_view = false; + } + const tree = buildTree(categories,tree_view); + + + createHtmlFromTree(tree, sidebarCustomNodes,pinnedItems); + + + + if (!categorySearchToggle && itemSearchInput.value != "") { + sdExpandAll(1); + + } + + loadPinnedItemsAndAddToBookmarks(); + + + /* preview */ + + const sidebarItems_cat = document.querySelectorAll('.sidebarItem'); + const previewDiv = document.getElementById('previewDiv'); + let sidebad_view_width = document.getElementById("sidebar_views").offsetWidth; + sidebarItems_cat.forEach(item => { + + item.addEventListener('mouseover', function () { + + if (this.classList.contains('sidebarItem') && this.tagName === 'LI') { + let descriptionDiv = ""; + const itemPosition = getElementPosition(this); + let previewDivTop = 0; + const [previewContent, node_description] = createNodePreview(item.id); + if (node_description) { + descriptionDiv = "
" + node_description + "
"; + } + previewDiv.innerHTML = previewContent + descriptionDiv; + previewDiv.style.display = 'block'; + const correction_offset = 45; + + if (itemPosition.top - this.offsetHeight >= 0 && itemPosition.top + previewDiv.offsetHeight < document.body.offsetHeight) { + previewDivTop = itemPosition.top - this.offsetHeight + + } else if (itemPosition.top - this.offsetHeight - previewDiv.offsetHeight <= 0) { + previewDivTop = 0 + correction_offset; + + + } + else { + + previewDivTop = (itemPosition.top + this.offsetHeight) - previewDiv.offsetHeight; + } + + let sidebar_width = parseInt(getVar("sidebarWidth")) || 500; + + + previewDiv.style.top = `${previewDivTop}px`; + + + const previewDivLeft = sidebar_width - sidebad_view_width + correction_offset; + + if (sbPosition == "left") { + previewDiv.style.left = `${previewDivLeft}px`; + } else { + previewDiv.style.right = `${previewDivLeft}px`; + } + + } + }); + + item.addEventListener('mouseout', function () { + previewDiv.style.display = 'none'; + }) + + }); + + categoriesList.addEventListener('scroll', function () { + previewDiv.style.display = 'none'; + }); + + window.addEventListener('click', function (event) { + + if (!event.target.classList.contains('sidebarItem')) { + previewDiv.style.display = 'none'; + + } + }); + + + const categoryItems = document.querySelectorAll("#content_sidebar_home .sidebarCategory"); + categoryItems.forEach(function (folderItem) { + folderItem.addEventListener("click", function (event) { + + if (event.target === event.currentTarget) { + const displayNamesList = event.target.querySelector("ul"); + + displayNamesList.style.display = displayNamesList.style.display === "none" ? "block" : "none"; + + setNodeStatus('sb_categoryNodeStatus',displayNamesList.parentElement.dataset.nameworkflow, displayNamesList.style.display) + } + }); + + + + }); + + + + reloadCtxMenu() + resolve(); + }); + } + let udata = await updateList(); + + + + + const dragHandle = document.getElementById("dragHandle"); + + let isDragging = false; + let startX; + let startWidth; + + // Funzioni per gestire gli eventi del mouse + dragHandle.addEventListener("mousedown", function (event) { + isDragging = true; + startX = event.clientX; + startWidth = parseInt(window.getComputedStyle(sidebar_main).width); + }); + + document.addEventListener("mouseup", function () { + if (isDragging) { + isDragging = false; + saveSidebarWidth(sidebar_main); + } + }); + + document.addEventListener("mousemove", function (event) { + if (!isDragging) return; + + const delta = event.clientX - startX; + if (sbPosition === "left") { + sidebar_main.style.width = (startWidth + delta) + "px"; + } else { + sidebar_main.style.width = (startWidth - delta) + "px"; + } + }); + + // Funzioni per gestire gli eventi touch + dragHandle.addEventListener("touchstart", function (event) { + isDragging = true; + startX = event.touches[0].clientX; + startWidth = parseInt(window.getComputedStyle(sidebar_main).width); + }); + + document.addEventListener("touchend", function () { + if (isDragging) { + isDragging = false; + saveSidebarWidth(sidebar_main); + } + }); + + document.addEventListener("touchmove", function (event) { + if (!isDragging) return; + + const delta = event.touches[0].clientX - startX; + if (sbPosition === "left") { + sidebar_main.style.width = (startWidth + delta) + "px"; + } else { + sidebar_main.style.width = (startWidth - delta) + "px"; + } + }); + + + +} + + + + +async function addSidebar() { + + let draggedElementId; + const sidebar_width = restoreSidebarWidth(); + const timestamp = new Date().getTime(); + const response = await fetch(cnPath + 'html/sidebar.html?v=' + timestamp); + let html = await response.text(); + + html = html.replace(/{{sidebar_width}}/g, sidebar_width); + html = html.replace(/{{node_path}}/g, cnPath); + const canvas = $el("sidebar", { + parent: document.body, + innerHTML: html + }); + + + + + + document.getElementById("content_sidebar_home").addEventListener("click", async function (event) { + const clickedElement = event.target; + const pinnedItems = await loadPinnedItems(); + const pinButton = clickedElement.tagName; + + + if (pinButton == "rect" && clickedElement.classList.contains("pin_node")) { + let itemId; + try { + itemId = clickedElement.parentElement.parentElement.parentElement.id; + } catch (err) { + console.log(err); + } + + if (!pinnedItems.includes(itemId)) { + + const sidebarItemId = itemId; + pinItem(sidebarItemId); + clickedElement.parentElement.getElementsByClassName("pin_normal")[0].classList.add("pinned"); + + }//remove from sidebar + else { + if (clickedElement.parentElement.parentElement.parentElement.parentElement.id == "sidebarBookmarks") { + clickedElement.parentElement.parentElement.parentElement.remove(); + + const itemIndex = pinnedItems.indexOf(itemId); + + + removePinnedClass(itemId); + + if (itemIndex !== -1) { + pinnedItems.splice(itemIndex, 1); + savePinnedItems(pinnedItems); + } + } else { + + unpinItem(itemId); + } + + clickedElement.parentElement.getElementsByClassName("pin_normal")[0].classList.remove("pinned"); + } + + + } + else if ((pinButton == "rect") && clickedElement.classList.contains("expand_node")) { + + sdExpandAll(); + } + else if ((pinButton == "LABEL") && clickedElement.id === "sb_label_custom") { + + + toggleCollapseCustom(); + + } + + + + + }); + + + const sidebarItems = document.querySelectorAll(".sidebar li ul li"); + sidebarItems.forEach(item => { + item.draggable = true; + }); + + + + + function handleDrop(event) { + event.preventDefault(); + + if (event.srcElement.tagName.toLowerCase() != "canvas") { + return; + } + + const coord = convertCanvasToOffset(app.canvasEl.data.ds, [event.clientX, event.clientY]); + const x = coord[0]; + const y = coord[1]; + sidebarAddNode(draggedElementId, draggedElementId, x, y); + draggedElementId = null; + } + + function allowDrop(event) { + event.preventDefault(); + } + + + + function handleTouchMove(event) { + event.preventDefault(); + } + + function handleTouchEnd(event) { + event.preventDefault(); + + const touch = event.changedTouches[0]; + const dropZone = document.elementFromPoint(touch.clientX, touch.clientY); + + if (dropZone.tagName.toLowerCase() != "canvas") { + return; + } + + const coord = convertCanvasToOffset(app.canvasEl.data.ds, [touch.clientX, touch.clientY]); + const x = coord[0]; + const y = coord[1]; + sidebarAddNode(draggedElementId, draggedElementId, x, y); + draggedElementId = null; + } + + // const search_bar = document.getElementById('searchInputSB'); + + + + // Gestione degli eventi di trascinamento + canvas.addEventListener("dragstart", function (event) { + draggedElementId = event.target.id; + previewDiv.style.display = 'none'; + }); + + canvas.addEventListener("dragover", allowDrop); + + // Gestione degli eventi touch + canvas.addEventListener("touchstart", function (event) { + draggedElementId = event.target.id; + previewDiv.style.display = 'none'; + }); + + canvas.addEventListener("touchmove", handleTouchMove); + + canvas.addEventListener("touchend", handleTouchEnd); + + // Altri eventi + document.getElementById('switch_sidebar').addEventListener('click', function () { + toggleSHSB(); + }); + + document.addEventListener('drop', handleDrop); + + const pinnedLabel = document.getElementById("sb_label_pinned"); + pinnedLabel.addEventListener('click', function () { + toggleCollapsePinned(); + }); + + + createCategoryList(); + SidebarPostBoot(); +} + + +function toggleSHSB(force = undefined) { + const side_bars = document.querySelectorAll(".content_sidebar"); + const main_sidebar = document.getElementById('sidebar'); + const search_bar = document.getElementById('searchInputSB'); + const scrollToTopButton = document.getElementById("sb_scrollToTopButton"); + const clearIcon = document.querySelector(".clearIcon"); + const searchCategoryIcon = document.querySelector(".searchCategoryIcon"); + const switch_sidebar = document.getElementById('switch_sidebar'); + //search_bar.classList.toggle('closed',force); + + side_bars.forEach(side_bar => { + //side_bar.classList.toggle('closed',force); + + if (force !== undefined) { + if (force) { + side_bar.classList.add('closed'); + clearIcon.classList.add('closed'); + searchCategoryIcon.classList.add('closed'); + search_bar.classList.add('closed'); + scrollToTopButton.classList.add('closed'); + + } else { + side_bar.classList.remove('closed'); + clearIcon.classList.remove('closed'); + searchCategoryIcon.classList.remove('closed'); + search_bar.classList.remove('closed'); + scrollToTopButton.classList.remove('closed'); + setVar("sb_minimized", "true"); + } + } else { + + if (side_bar.classList.contains('closed')) { + side_bar.classList.remove('closed'); + clearIcon.classList.remove('closed'); + searchCategoryIcon.classList.remove('closed'); + search_bar.classList.remove('closed'); + //fix for keyboard shortcuts + if (getVar("sb_minimized") == "true") { + switch_sidebar.style.filter = "brightness(0.8)"; + } + + } else { + if (getVar("sb_minimized") == "false") { + side_bar.classList.add('closed'); + clearIcon.classList.add('closed'); + searchCategoryIcon.classList.add('closed'); + search_bar.classList.add('closed'); + scrollToTopButton.classList.add('closed'); + switch_sidebar.style.filter = "brightness(1.0)"; + } else { + switch_sidebar.style.filter = "brightness(0.8)"; + } + } + } + + }); + + + + if (getVar("sb_minimized") == "false") { + + if (force == undefined) { + setVar("sb_minimized", true); + } + main_sidebar.style.width = '45px'; + } else { + + if (force == undefined) { + setVar("sb_minimized", false); + main_sidebar.style.width = getVar("sidebarWidth") || '300px'; + } else if (force == true) { + + main_sidebar.style.width = '45px'; + + } else { + main_sidebar.style.width = getVar("sidebarWidth") || '300px'; + } + + } + + + + +} + +//option: disable auto-hide when minimized + +//Shortcuts + +function handleKeyPress(event) { + + // Per la combinazione Alt + X + if (event.altKey && (event.key.toLowerCase() === "x" || event.keyCode === 88)) { + // Toggle sidebar if it's closed + const side_bar = document.getElementById('content_sidebar_home'); + if (side_bar.classList.contains('closed')) { + toggleSHSB(); + } + // Focus on searchInputSB + searchInputSB.focus(); + } + + // Per la combinazione Alt + Z + if (event.altKey && (event.key.toLowerCase() === "z" || event.keyCode === 90)) { + toggleSHSB(); + } + if (event.altKey && (event.key.toLowerCase() === "g" || event.keyCode === 71)) { + showSettings(); + } + +} + + + + + +// Custom Node View +function processViews(viewsData, settingsData) { + + const sb = document.getElementById('sidebar'); + const sbv = document.getElementById('sidebar_views'); + + const promises = viewsData.map(async (view) => { + const icon = view.icon; + if (!icon) { + return; + } + const description = view.description; + + const div_view = document.createElement('div'); + div_view.classList = "content_sidebar sb_hidden"; + div_view.id = "panel_" + view.id; + div_view.dataset.content = view.id; + const bsb = document.getElementById('content_sidebar_home'); + // add button to sidebarviews + bsb.insertAdjacentElement('afterend', div_view); + + //console.log('Icon:', icon); + //console.log('Descr:', description); + //console.log('Panel:', view.panels); + //console.log('-------------------'); + + await Promise.all(view.panels.map(async (panel) => { + try { + const timestamp = new Date().getTime(); + const response = await fetch(cnPath + `panels/${panel}/${panel}.html?v=${timestamp}`); + const html = await response.text(); + + if (html !== "404: Not Found") { + //inherit width from bsb + const div_panel = document.createElement('div'); + div_panel.classList = "panel_sidebar"; + div_panel.id = "panel_" + panel; + + const div_panel_title = document.createElement('label'); + div_panel_title.classList = "panel_sidebar_title sb_label"; + div_panel_title.id = "panel_title_" + panel; + + div_panel_title.innerHTML = view.id.replace("_", " "); + + + + + div_panel.appendChild(div_panel_title); + + const canvas = $el("div", { + parent: div_panel, + innerHTML: html, + }); + + + div_view.insertAdjacentElement('beforeend', div_panel); + jsloader(`${cnPath}panels/${panel}/${panel}.jsb`); + //window.custom_templates(); + console.log("LOADING " + cnPath + `panels/${panel}/${panel}.js`) + } + } catch (error) { + console.error('Errore nel caricamento del file HTML:', error); + } + })); + + + + //sidebar menu + const div_button = document.createElement('div'); + + + div_button.classList = "view_button"; + div_button.id = "switch_" + view.id; + //inherit width from bsb + + div_button.dataset.tab = view.id; + div_button.title = description; + div_button.innerHTML += view.icon; + + div_button.addEventListener('click', function () { + const tabId = "panel_" + this.getAttribute('data-tab'); + switchTab(tabId) + if (getVar("sb_auto_hide") == "false" && getVar("sb_minimized") == "true") { + toggleSHSB(false); + } + }); + sbv.appendChild(div_button); + }); + return Promise.all(promises).then(() => { + + setTimeout(() => { + + settingsSetup(app, $el) + setContextMenu(settingsData, "#content_sidebar_home .sidebarItem", 1); + switchTab(getVar('sb_current_tab')); + const sidebar_view = document.getElementById('sidebar_views'); + const sidebar = document.getElementById('sidebar'); + + + + sidebar_view.addEventListener('mouseover', function () { + + if (getVar('sb_auto_hide') == "true") { + if (getVar('sb_minimized') == "true") { + toggleSHSB(false); + + } + } + }); + document.addEventListener('click', function (event) { + //if click is outside sidebar id element + if (!sidebar.contains(event.target)) { + if (getVar('sb_minimized') == "true") { + toggleSHSB(true); + } + } + + }); + }, 100); + + }); + + + +} + + + +async function loadData() { + + try { + const timestamp = new Date().getTime(); + const response1 = await fetch(`${cnPath}views/views.json?v=${timestamp}`); + const viewsData1 = await response1.json(); + const response2 = await fetch(`${cnPath}views/custom_views.json?v=${timestamp}`); + const viewsData2 = await response2.json(); + const allViewsData = [...viewsData1, ...viewsData2]; + const response3 = await fetch(`${cnPath}settings.json?v=${timestamp}`); + const settingsData = await response3.json(); + processViews(allViewsData, settingsData); + } catch (error) { + console.error('Error loading views:', error); + } + +} + + + + +async function SidebarPostBoot() { + console.log('SidebarPostBoot'); + + + + + const switch_home = document.getElementById("switch_home"); + + //only for home + switch_home.addEventListener('click', function () { + switchTab("content_sidebar_home", 1) + if (getVar("sb_auto_hide") == "false" && getVar("sb_minimized") == "true") { + toggleSHSB(false); + } + + + }); + + + + if (getVar("sb_minimized") == "false") { + const switch_sidebar = document.getElementById('switch_sidebar'); + switch_sidebar.style.filter = "brightness(0.8)"; + }else{ + var sb_show_at_startup = getVar("sb_show_at_startup") || "false"; + + if (sb_show_at_startup == "false" ) { + toggleSHSB(true); + } + } + + + document.addEventListener("keydown", handleKeyPress); + const sb = document.getElementById('content_sidebar_home'); + const scrollToTopButton = document.getElementById("sb_scrollToTopButton"); + scrollToTopButton.addEventListener("click", function () { + sb.scrollTo({ + top: 0, + behavior: "smooth" + }); + }); + + + + sb.addEventListener("scroll", function () { + + if (sb.scrollTop > 0) { + scrollToTopButton.style.display = "block"; + } else { + scrollToTopButton.style.display = "none"; + } + }); + + const sidebarBookmarks = document.getElementById("sidebarBookmarks"); + if (getVar("sb_pinned_collapsed")) { + sidebarBookmarks.style.display = getVar('sb_pinned_collapsed'); + } + + if (getVar("sb_custom_collapsed")) { + sidebarCustomNodes.style.display = getVar('sb_custom_collapsed'); + } + loadData(); + /* + const sidebar_views = document.getElementById("sidebar_views"); + const sidebar = document.getElementById("sidebar"); + //if is hover sidebar_views + sidebar_views.addEventListener("mouseover", function() { + toggleSHSB(); + }) + //if is not hover sidebar_views + sidebar.addEventListener("mouseout", function() { + toggleSHSB(); + }) + */ +} + + +// Function to check if the element is not an empty object +function SidebarBoot() { + if (Object.keys(LiteGraph.registered_node_types).length > 10) { + // Execute the function when the element is not an empty object + // + //MIGRATION + migrationSettings() + + addSidebarStyles("css/base_style_sb.css"); + + addSidebar(); + + console.log('SidebarBoot'); + console.timeEnd('execution time'); + + + + } else { + // Retry after a period of time + setTimeout(SidebarBoot, 500); // Check every 100 milliseconds + } +} + +// Start checking the element +SidebarBoot(); diff --git a/pyproject.toml b/pyproject.toml index 3e7ab82..b99bd33 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,7 +1,7 @@ [project] name = "comfyui-n-sidebar" description = "A simple sidebar for ComfyUI." -version = "1.2.7" +version = "1.2.8" license = { file = "LICENSE" } [project.urls]