1+
2+ import { app } from "../../../scripts/app.js" ;
3+ import { api } from "../../../scripts/api.js" ;
4+ import { $el } from "../../../scripts/ui.js" ;
5+
6+ const link = document . createElement ( "link" ) ; link . rel = "stylesheet" ;
7+ link . href = "extensions/comfyui_controlnet_aux_pre/index.css" ;
8+ document . head . appendChild ( link ) ;
9+
10+ let preprolist = { } ; let controlnet = 'control_v11p_sd15_canny.pth' ;
11+
12+ function listsort ( listdata , valuestr ) { listdata . sort ( ( a , b ) => valuestr . includes ( b . name ) - valuestr . includes ( a . name ) ) ; } ;
13+
14+ function addhide ( el , searchValue ) { el . classList . toggle ( 'hide' , ! (
15+ el . dataset . name . toLowerCase ( ) . includes ( searchValue . toLowerCase ( ) ) ||
16+ el . dataset . tag . toLowerCase ( ) . includes ( searchValue . toLowerCase ( ) ) ||
17+ el . classList . contains ( 'Preprocessor-tag-selected' ) ) ) } ;
18+
19+ function getTagList ( ) { return preprolist [ controlnet ] . map ( ( tag , index ) => {
20+ return $el ( 'label.Preprocessor-tag' ,
21+ { dataset : { tag : tag . name , name : tag . name , index : index } ,
22+ $ : ( el ) => { el . firstChild . onclick = ( ) => { el . classList . toggle ( "Preprocessor-tag-selected" ) ; } ; } , } ,
23+ [ $el ( "input" , { type : 'checkbox' , name : tag . name } ) , $el ( "span" , { textContent : tag . name } ) ] ) ; } ) ; } ;
24+
25+ async function getprepro ( el ) { const resp = await api . fetchApi ( `/Preprocessor?name=${ controlnet } ) ;
26+ if ( resp . status === 200 ) { let data = await resp . json ( ) ; let mlist = [ "" , "none" ] ;
27+
28+ if ( controlnet . includes ( "canny" ) ) { mlist = [ "canny" , "CannyEdgePreprocessor" ] }
29+ else if ( controlnet . includes ( "depth" ) ) { mlist = [ "depth" , "MiDaS-DepthMapPreprocessor" ] }
30+ else if ( controlnet . includes ( "lineart" ) ) { mlist = [ "lineart" , "LineArtPreprocessor" ] }
31+ else if ( controlnet . includes ( "tile" ) ) { mlist = [ "tile" , "TilePreprocessor" ] }
32+ else if ( controlnet . includes ( "scrib" ) ) { mlist = [ "scrib" , "FakeScribblePreprocessor" ] }
33+ else if ( controlnet . includes ( "soft" ) ) { mlist = [ "soft" , "HEDPreprocessor" ] }
34+ else if ( controlnet . includes ( "pose" ) ) { mlist = [ "pose" , "DWPreprocessor" ] }
35+ else if ( controlnet . includes ( "normal" ) ) { mlist = [ "normal" , "BAE-NormalMapPreprocessor" ] }
36+ else if ( controlnet . includes ( "semseg" ) ) { mlist = [ "semseg" , "OneFormer-ADE20K-SemSegPreprocessor" ] }
37+ else if ( controlnet . includes ( "shuffle" ) ) { mlist = [ "shuffle" , "ShufflePreprocessor" ] }
38+ else if ( controlnet . includes ( "ioclab_sd15_recolor" ) ) { mlist = [ "image" , "ImageLuminanceDetector" ] }
39+ else if ( controlnet . includes ( "t2iadapter_color" ) ) { mlist = [ "color" , "ColorPreprocessor" ] }
40+ else if ( controlnet . includes ( "sketch" ) ) { mlist = [ "scrib" , "FakeScribblePreprocessor" ] }
41+
42+ document . querySelector ( '.search' ) . value = mlist [ 0 ] ; listsort ( data , mlist [ 1 ] ) ;
43+
44+ preprolist [ controlnet ] = data ; el . innerHTML = '' ; el . append ( ...getTagList ( ) ) ;
45+ el . children [ 0 ] . classList . add ( "Preprocessor-tag-selected" ) ; el . children [ 0 ] . children [ 0 ] . checked = true ;
46+ } } ;
47+
48+ app . registerExtension ( {
49+ name : 'comfy.ControlNet Preprocessors.Preprocessor Selector' ,
50+ async beforeRegisterNodeDef ( nodeType , nodeData , app ) {
51+ if ( nodeData . name == 'ControlNetPreprocessorSelector' ) { const onNodeCreated = nodeType . prototype . onNodeCreated ;
52+ nodeType . prototype . onNodeCreated = function ( ) { const styles_id = this . widgets . findIndex ( ( w ) => w . name == 'cn' ) ;
53+ this . setProperty ( "values" , [ ] ) ; this . setSize ( [ 300 , 350 ] ) ;
54+
55+ const toolsElement = $el ( 'div.tools' , [ //添加清空按钮搜索框
56+ $el ( 'button.delete' , { textContent : 'Empty' ,
57+ onclick :( ) => { selectorlist [ 0 ] . querySelectorAll ( ".search" ) . forEach ( el => { el . value = '' } ) ;
58+ selectorlist [ 1 ] . querySelectorAll ( ".Preprocessor-tag" ) . forEach ( el => {
59+ el . classList . remove ( "Preprocessor-tag-selected" ) ;
60+ el . classList . remove ( "hide" ) ; el . children [ 0 ] . checked = false } ) } } ) ,
61+
62+ $el ( 'textarea.search' , { placeholder :"🔎 search" ,
63+ oninput :( e ) => { let searchValue = e . target . value ;
64+ selectorlist [ 1 ] . querySelectorAll ( ".Preprocessor-tag" ) . forEach ( el => { addhide ( el , searchValue ) ; } ) } } )
65+ ] ) ;
66+ const stylesList = $el ( "ul.Preprocessor-list" , [ ] ) ;
67+ let selector = this . addDOMWidget ( 'select_styles' , "btn" , $el ( 'div.Preprocessor' , [ toolsElement , stylesList ] ) ) ;
68+ let selectorlist = selector . element . children ;
69+
70+ // 监听鼠标离开事件
71+ selectorlist [ 1 ] . addEventListener ( 'mouseleave' , function ( e ) { const searchValue = document . querySelector ( '.search' ) . value ;
72+ const selectedTags = Array . from ( this . querySelectorAll ( '.Preprocessor-tag-selected' ) ) . map ( el => el . dataset . tag ) ; // 当前选中的标签值
73+ listsort ( preprolist [ controlnet ] , selectedTags ) ; this . innerHTML = '' ; this . append ( ...getTagList ( ) ) ; // 重新排序
74+ this . querySelectorAll ( '.Preprocessor-tag' ) . forEach ( el => { // 遍历所有标签
75+ const isSelected = selectedTags . includes ( el . dataset . tag ) ; //标签的选中状态
76+ if ( isSelected ) { el . classList . add ( "Preprocessor-tag-selected" ) ; el . children [ 0 ] . checked = true ; } //更新样式标签的选中状态
77+ addhide ( el , searchValue ) ; } ) ; // 同时处理搜索和隐藏逻辑
78+ } ) ;
79+
80+ //根据controlnet模型返回预处理器列表
81+ Object . defineProperty ( this . widgets [ styles_id ] , 'value' , { get :( ) => { return controlnet } ,
82+ set :( value ) => { controlnet = value ; getprepro ( selectorlist [ 1 ] ) } } )
83+
84+ //根据选中状态返回预处理器
85+ let style_select_values = ''
86+ Object . defineProperty ( selector , "value" , {
87+ set : ( value ) => {
88+ selectorlist [ 1 ] . querySelectorAll ( ".Preprocessor-tag" ) . forEach ( el => {
89+ if ( value . split ( ',' ) . includes ( el . dataset . tag ) ) {
90+ el . classList . add ( "Preprocessor-tag-selected" ) ; el . children [ 0 ] . checked = true } } ) } ,
91+ get : ( ) => {
92+ selectorlist [ 1 ] . querySelectorAll ( ".Preprocessor-tag" ) . forEach ( el => {
93+ if ( el . classList . value . indexOf ( "Preprocessor-tag-selected" ) >= 0 ) {
94+ if ( ! this . properties [ "values" ] . includes ( el . dataset . tag ) ) {
95+ this . properties [ "values" ] . push ( el . dataset . tag ) ; } }
96+ else { if ( this . properties [ "values" ] . includes ( el . dataset . tag ) ) {
97+ this . properties [ "values" ] = this . properties [ "values" ] . filter ( v => v != el . dataset . tag ) ; } } } ) ;
98+ style_select_values = this . properties [ "values" ] . join ( ',' ) ;
99+ return style_select_values ; } } ) ;
100+
101+ getprepro ( selectorlist [ 1 ] ) ; return onNodeCreated ;
102+ }
103+ }
104+ }
105+ } )
0 commit comments