@ -259,89 +259,89 @@ export class CustomNodesInstaller extends ComfyDialog {
}
}
invalidate _checks ( is _checked , install _state ) {
if ( is _checked ) {
for ( let i in this . grid _rows ) {
let data = this . grid _rows [ i ] . data ;
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . disabled = data . installed != install _state ;
if ( checkbox . disabled ) {
for ( let j in buttons ) {
buttons [ j ] . style . display = 'none' ;
}
}
else {
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
}
this . checkbox _all . disabled = false ;
}
else {
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( checkbox . check )
return ; // do nothing
}
// every checkbox is unchecked -> enable all checkbox
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . disabled = false ;
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
this . checkbox _all . checked = false ;
this . checkbox _all . disabled = true ;
}
}
check _all ( is _checked ) {
if ( is _checked ) {
// lookup first checked item's state
let check _state = null ;
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( checkbox . checked ) {
check _state = this . grid _rows [ i ] . data . installed ;
}
}
if ( check _state == null )
return ;
// check only same state items
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( this . grid _rows [ i ] . data . installed == check _state )
checkbox . checked = true ;
}
}
else {
// uncheck all
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . checked = false ;
checkbox . disabled = false ;
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
this . checkbox _all . disabled = true ;
}
}
invalidate _checks ( is _checked , install _state ) {
if ( is _checked ) {
for ( let i in this . grid _rows ) {
let data = this . grid _rows [ i ] . data ;
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . disabled = data . installed != install _state ;
if ( checkbox . disabled ) {
for ( let j in buttons ) {
buttons [ j ] . style . display = 'none' ;
}
}
else {
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
}
this . checkbox _all . disabled = false ;
}
else {
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( checkbox . check )
return ; // do nothing
}
// every checkbox is unchecked -> enable all checkbox
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . disabled = false ;
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
this . checkbox _all . checked = false ;
this . checkbox _all . disabled = true ;
}
}
check _all ( is _checked ) {
if ( is _checked ) {
// lookup first checked item's state
let check _state = null ;
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( checkbox . checked ) {
check _state = this . grid _rows [ i ] . data . installed ;
}
}
if ( check _state == null )
return ;
// check only same state items
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( this . grid _rows [ i ] . data . installed == check _state )
checkbox . checked = true ;
}
}
else {
// uncheck all
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . checked = false ;
checkbox . disabled = false ;
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
this . checkbox _all . disabled = true ;
}
}
async createGrid ( ) {
var grid = document . createElement ( 'table' ) ;
@ -349,24 +349,24 @@ export class CustomNodesInstaller extends ComfyDialog {
this . grid _rows = { } ;
let self = this ;
let self = this ;
var thead = document . createElement ( 'thead' ) ;
var tbody = document . createElement ( 'tbody' ) ;
var thead = document . createElement ( 'thead' ) ;
var tbody = document . createElement ( 'tbody' ) ;
var headerRow = document . createElement ( 'tr' ) ;
thead . style . position = "sticky" ;
thead . style . top = "0px" ;
thead . style . borderCollapse = "collapse" ;
thead . style . tableLayout = "fixed" ;
thead . style . borderCollapse = "collapse" ;
thead . style . tableLayout = "fixed" ;
var header0 = document . createElement ( 'th' ) ;
header0 . style . width = "20px" ;
this . checkbox _all = $el ( "input" , { type : 'checkbox' , id : 'check_all' } , [ ] ) ;
header0 . appendChild ( this . checkbox _all ) ;
this . checkbox _all . checked = false ;
this . checkbox _all . disabled = true ;
this . checkbox _all . addEventListener ( 'change' , function ( ) { self . check _all . call ( self , self . checkbox _all . checked ) ; } ) ;
this . checkbox _all = $el ( "input" , { type : 'checkbox' , id : 'check_all' } , [ ] ) ;
header0 . appendChild ( this . checkbox _all ) ;
this . checkbox _all . checked = false ;
this . checkbox _all . disabled = true ;
this . checkbox _all . addEventListener ( 'change' , function ( ) { self . check _all . call ( self , self . checkbox _all . checked ) ; } ) ;
var header1 = document . createElement ( 'th' ) ;
header1 . innerHTML = ' ID ' ;
@ -380,7 +380,7 @@ export class CustomNodesInstaller extends ComfyDialog {
var header4 = document . createElement ( 'th' ) ;
header4 . innerHTML = 'Description' ;
header4 . style . width = "60%" ;
// header4.classList.add('expandable-column');
// header4.classList.add('expandable-column');
var header5 = document . createElement ( 'th' ) ;
header5 . innerHTML = 'Install' ;
header5 . style . width = "130px" ;
@ -398,7 +398,7 @@ export class CustomNodesInstaller extends ComfyDialog {
header5 . style . position = "sticky" ;
header5 . style . top = "0px" ;
thead . appendChild ( headerRow ) ;
thead . appendChild ( headerRow ) ;
headerRow . appendChild ( header0 ) ;
headerRow . appendChild ( header1 ) ;
headerRow . appendChild ( header2 ) ;
@ -421,28 +421,28 @@ export class CustomNodesInstaller extends ComfyDialog {
let dataRow = document . createElement ( 'tr' ) ;
let data0 = document . createElement ( 'td' ) ;
let checkbox = $el ( "input" , { type : 'checkbox' , id : ` check_ ${ i } ` } , [ ] ) ;
data0 . appendChild ( checkbox ) ;
checkbox . checked = false ;
checkbox . addEventListener ( 'change' , function ( ) { self . invalidate _checks . call ( self , checkbox . checked , data . installed ) ; } ) ;
let checkbox = $el ( "input" , { type : 'checkbox' , id : ` check_ ${ i } ` } , [ ] ) ;
data0 . appendChild ( checkbox ) ;
checkbox . checked = false ;
checkbox . addEventListener ( 'change' , function ( ) { self . invalidate _checks . call ( self , checkbox . checked , data . installed ) ; } ) ;
var data1 = document . createElement ( 'td' ) ;
data1 . style . textAlign = "center" ;
data1 . innerHTML = i + 1 ;
var data2 = document . createElement ( 'td' ) ;
data2 . style . maxWidth = "100px" ;
data2 . style . maxWidth = "100px" ;
data2 . className = "cm-node-author"
data2 . textContent = ` ${ data . author } ` ;
data2 . style . whiteSpace = "nowrap" ;
data2 . style . overflow = "hidden" ;
data2 . style . overflow = "hidden" ;
data2 . style . textOverflow = "ellipsis" ;
var data3 = document . createElement ( 'td' ) ;
data3 . style . maxWidth = "200px" ;
data3 . style . wordWrap = "break-word" ;
var data3 = document . createElement ( 'td' ) ;
data3 . style . maxWidth = "200px" ;
data3 . style . wordWrap = "break-word" ;
data3 . className = "cm-node-name"
data3 . innerHTML = ` <a href= ${ data . reference } target="_blank"><font color="skyblue"><b> ${ data . title } </b></font></a> ` ;
data3 . innerHTML = ` <a href= ${ data . reference } target="_blank"><font color="skyblue"><b> ${ data . title } </b></font></a> ` ;
if ( data . installed == 'Fail' )
data3 . innerHTML = ' <font color="BLACK"><B>(IMPORT FAILED)</B></font>' + data3 . innerHTML ;
@ -452,7 +452,7 @@ export class CustomNodesInstaller extends ComfyDialog {
let conflicts = this . conflict _mappings [ data . files [ 0 ] ] ;
if ( conflicts ) {
let buf = '<BR><BR><FONT color="#AA3333"><B>Conflicted Nodes: </B><BR>' ;
let buf = '<p class="cm-conflicted-nodes-text"><B><font color="BLACK">Conflicted Nodes:</FONT> </B><BR>' ;
for ( let k in conflicts ) {
let node _name = conflicts [ k ] [ 0 ] ;
@ -464,13 +464,13 @@ export class CustomNodesInstaller extends ComfyDialog {
extension _name = extension _name . slice ( 0 , - 4 ) ;
}
buf += ` ${ node _name } [ ${ extension _name } ], ` ;
buf += ` <B> ${ node _name } </B> [${ extension _name } ], ` ;
}
if ( buf . endsWith ( ', ' ) ) {
buf = buf . slice ( 0 , - 2 ) ;
}
buf += "</FONT >" ;
buf += "</p >" ;
data4 . innerHTML += buf ;
}
@ -537,7 +537,7 @@ export class CustomNodesInstaller extends ComfyDialog {
installBtn . style . color = 'white' ;
}
let j = i ;
let j = i ;
if ( installBtn2 != null ) {
installBtn2 . style . width = "120px" ;
installBtn2 . addEventListener ( 'click' , function ( ) {
@ -587,28 +587,28 @@ export class CustomNodesInstaller extends ComfyDialog {
let buttons = [ ] ;
if ( installBtn ) {
buttons . push ( installBtn ) ;
}
buttons . push ( installBtn ) ;
}
if ( installBtn2 ) {
buttons . push ( installBtn2 ) ;
}
buttons . push ( installBtn2 ) ;
}
if ( installBtn3 ) {
buttons . push ( installBtn3 ) ;
}
buttons . push ( installBtn3 ) ;
}
this . grid _rows [ i ] = { data : data , buttons : buttons , checkbox : checkbox , control : dataRow } ;
}
const panel = document . createElement ( 'div' ) ;
panel . style . width = "100%" ;
panel . style . width = "100%" ;
panel . appendChild ( grid ) ;
function handleResize ( ) {
const parentHeight = self . element . clientHeight ;
const gridHeight = parentHeight - 200 ;
function handleResize ( ) {
const parentHeight = self . element . clientHeight ;
const gridHeight = parentHeight - 200 ;
grid . style . height = gridHeight + "px" ;
}
grid . style . height = gridHeight + "px" ;
}
window . addEventListener ( "resize" , handleResize ) ;
grid . style . position = "relative" ;
@ -620,7 +620,7 @@ export class CustomNodesInstaller extends ComfyDialog {
this . element . style . width = "80%" ;
this . element . appendChild ( panel ) ;
handleResize ( ) ;
handleResize ( ) ;
}
createFilterCombo ( ) {
@ -658,8 +658,8 @@ export class CustomNodesInstaller extends ComfyDialog {
self . apply _searchbox ( ) ;
} ) ;
if ( self . filter ) {
combo . value = self . filter ;
if ( self . filter ) {
combo . value = self . filter ;
}
return combo ;