Add crystools ui display on the comfy new menu

README.md

@@ -52,6 +52,7 @@ git clone https://github.com/yolain/ComfyUI-Easy-Use
 
 **v1.2.0**
 
+- 当新菜单的位置在上或者下时增加上 crystools 的显示，推荐开两个就好（如果后续crystools有更新UI适配我可能会删除掉）
 - 增加 **easy sliderControl** - 滑块控制节点，当前可用于控制ipadapterMS的参数 (双击滑块可重置为默认值)
 - 增加 **layer_weights** 属性在 `easy ipadapterApplyADV` 节点
 

web/css/toolbar.css

@@ -214,4 +214,17 @@
 }
 .markdown-body .link{
     color:var(--theme-color-light)
+}
+
+#comfyui-menu-monitor{
+    width:120px;
+}
+#comfyui-menu-monitor #crystools-monitor-container{
+    margin:0 auto!important;
+}
+#comfyui-menu-monitor #crystools-monitor-container > div{
+    margin:2px 0!important;
+}
+#comfyui-menu-monitor #crystools-monitor-container > div > div > div{
+    padding:0 4px!important;
 }

web/js/easy/easy.js

@@ -387,8 +387,16 @@ class GuideDialog {
 // toolbar
 const toolBarId = "Comfy.EasyUse.toolBar"
 const getEnableToolBar = _ => app.ui.settings.getSettingValue(toolBarId, true)
-const getNewMenuPosition = _ => app.ui.settings.getSettingValue('Comfy.UseNewMenu', 'Disabled')
+const getNewMenuPosition = _ => {
+    try{
+        return app.ui.settings.getSettingValue('Comfy.UseNewMenu', 'Disabled')
+    }catch (e){
+        return 'Disabled'
+    }
+}
 
+let note = null
+let toolbar = null
 let enableToolBar = getEnableToolBar() && getNewMenuPosition() == 'Disabled'
 let disableRenderInfo = localStorage['Comfy.Settings.Comfy.EasyUse.disableRenderInfo'] ? true : false
 export function addToolBar(app) {
@@ -405,16 +413,49 @@ export function addToolBar(app) {
 		},
 	});
 }
-let note = null
-let toolbar = null
 function showToolBar(){
     if(toolbar) toolbar.style.display = 'flex'
 }
 function hideToolBar(){
     if(toolbar) toolbar.style.display = 'none'
 }
+let monitor = null
+function setCrystoolsUI(position){
+    const crystools = document.getElementById('crystools-root')?.children || null
+    if(crystools?.length>0){
+        if(!monitor){
+           for (let i = 0; i < crystools.length; i++) {
+                if (crystools[i].id === 'crystools-monitor-container') {
+                    monitor = crystools[i];
+                    break;
+                }
+           }
+        }
+        if(monitor){
+            if(position == 'Disabled'){
+                let replace = true
+                for (let i = 0; i < crystools.length; i++) {
+                    if (crystools[i].id === 'crystools-monitor-container') {
+                        replace = false
+                        break;
+                    }
+                }
+                document.getElementById('crystools-root').appendChild(monitor)
+            }
+            else {
+                let monitor_div = document.getElementById('comfyui-menu-monitor')
+                if(!monitor_div) app.menu.settingsGroup.element.before($el('div',{id:'comfyui-menu-monitor'},monitor))
+                else monitor_div.appendChild(monitor)
+            }
+        }
+    }
+}
 const changeNewMenuPosition = app.ui.settings.settingsLookup?.['Comfy.UseNewMenu']
-if(changeNewMenuPosition) changeNewMenuPosition.onChange = v => v == 'Disabled' ? showToolBar() : hideToolBar()
+if(changeNewMenuPosition) changeNewMenuPosition.onChange = v => {
+    v == 'Disabled' ? showToolBar() : hideToolBar()
+    setCrystoolsUI(v)
+}
+
 
 
 app.registerExtension({
@@ -534,7 +575,9 @@ app.registerExtension({
                 // content: "EasyUse Group Map",
                 classList: "comfyui-button comfyui-menu-mobile-collapse"
             });
-            app.menu?.actionsGroup.element.after(groupMap.element);
+            app.menu.actionsGroup.element.after(groupMap.element);
+            setCrystoolsUI(getNewMenuPosition())
+
             // const easyNewMenu = $el('div.easyuse-new-menu',[
             //    $el('div.easyuse-new-menu-intro',[
             //      $el('div.easyuse-new-menu-logo',{innerHTML:logoIcon}),