From 06d8ffb71e4a54c30e50ef6b8fb9198e6e0cd24c Mon Sep 17 00:00:00 2001 From: "Dr.Lt.Data" Date: Mon, 1 May 2023 08:39:05 +0900 Subject: [PATCH] make default img_paste_mode to 'selected' refactor space -> tab --- web/extensions/core/clipspace.js | 126 +++++++++++++++---------------- web/scripts/app.js | 70 ++++++++--------- 2 files changed, 98 insertions(+), 98 deletions(-) diff --git a/web/extensions/core/clipspace.js b/web/extensions/core/clipspace.js index 73d225d76..2661e3c9a 100644 --- a/web/extensions/core/clipspace.js +++ b/web/extensions/core/clipspace.js @@ -19,42 +19,39 @@ export class ClipspaceDialog extends ComfyDialog { } static invalidatePreview() { - if(ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0) { - const img_preview = document.getElementById("clipspace_preview"); - if(img_preview) { - img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src; - img_preview.style.maxHeight = "100%"; - img_preview.style.maxWidth = "100%"; - } + if(ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0) { + const img_preview = document.getElementById("clipspace_preview"); + if(img_preview) { + img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src; + img_preview.style.maxHeight = "100%"; + img_preview.style.maxWidth = "100%"; + } } } - static invalidate() { - if(ClipspaceDialog.instance) { - const self = ClipspaceDialog.instance; - // allow reconstruct controls when copying from non-image to image content. - const children = $el("div.comfy-modal-content",[ - self.createImgSettings(), - ...self.createButtons() - ]); + static invalidate() { + if(ClipspaceDialog.instance) { + const self = ClipspaceDialog.instance; + // allow reconstruct controls when copying from non-image to image content. + const children = $el("div.comfy-modal-content", [ self.createImgSettings(), ...self.createButtons() ]); - if(self.element) { - // update - self.element.removeChild(self.element.firstChild); - self.element.appendChild(children); - } - else { - // new - self.element = $el("div.comfy-modal", { parent: document.body }, [children,]); - } + if(self.element) { + // update + self.element.removeChild(self.element.firstChild); + self.element.appendChild(children); + } + else { + // new + self.element = $el("div.comfy-modal", { parent: document.body }, [children,]); + } - if(self.element.children[0].children.length <= 1) { - self.element.children[0].appendChild($el("p", {}, ["Unable to find the features to edit content of a format stored in the current Clipspace."])); - } + if(self.element.children[0].children.length <= 1) { + self.element.children[0].appendChild($el("p", {}, ["Unable to find the features to edit content of a format stored in the current Clipspace."])); + } - ClipspaceDialog.invalidatePreview(); - } - } + ClipspaceDialog.invalidatePreview(); + } + } constructor() { super(); @@ -66,7 +63,7 @@ export class ClipspaceDialog extends ComfyDialog { for(let idx in ClipspaceDialog.items) { const item = ClipspaceDialog.items[idx]; if(!item.contextPredicate || item.contextPredicate()) - buttons.push(ClipspaceDialog.items[idx]); + buttons.push(ClipspaceDialog.items[idx]); } buttons.push( @@ -82,7 +79,7 @@ export class ClipspaceDialog extends ComfyDialog { createImgSettings() { if(ComfyApp.clipspace.imgs) { - const combo_items = []; + const combo_items = []; const imgs = ComfyApp.clipspace.imgs; for(let i=0; i < imgs.length; i++) { @@ -95,36 +92,39 @@ export class ClipspaceDialog extends ComfyDialog { ClipspaceDialog.invalidatePreview(); } }, combo_items); - const row1 = - $el("tr", {},[ - $el("td", {}, [$el("font", {color:"white"}, ["Select Image"])]), - $el("td", {}, [combo1]) - ]); + const row1 = + $el("tr", {}, + [ + $el("td", {}, [$el("font", {color:"white"}, ["Select Image"])]), + $el("td", {}, [combo1]) + ]); const combo2 = $el("select", - {id:"clipspace_img_paste_mode", onchange:(event) => { - ComfyApp.clipspace['img_paste_mode'] = event.target.value; - } }, - [ - $el("option", {value:'all'}, 'all'), - $el("option", {value:'selected'}, 'selected') - ]); + {id:"clipspace_img_paste_mode", onchange:(event) => { + ComfyApp.clipspace['img_paste_mode'] = event.target.value; + } }, + [ + $el("option", {value:'selected'}, 'selected'), + $el("option", {value:'all'}, 'all') + ]); + combo2.value = ComfyApp.clipspace['img_paste_mode']; - const row2 = - $el("tr", {},[ - $el("td", {}, [$el("font", {color:"white"}, ["Paste Mode"])]), - $el("td", {}, [combo2]) - ]); + const row2 = + $el("tr", {}, + [ + $el("td", {}, [$el("font", {color:"white"}, ["Paste Mode"])]), + $el("td", {}, [combo2]) + ]); - const td = $el("td", {align:'center', width:'100px', height:'100px', colSpan:'2'}, - [ $el("img",{id:"clipspace_preview"},[]) ] - ); + const td = $el("td", {align:'center', width:'100px', height:'100px', colSpan:'2'}, + [ $el("img",{id:"clipspace_preview"},[]) ] + ); - const row3 = - $el("tr", {}, [td]); + const row3 = + $el("tr", {}, [td]); - return $el("table", {}, [row1, row2, row3]); + return $el("table", {}, [row1, row2, row3]); } else { return []; @@ -153,15 +153,15 @@ app.registerExtension({ app.openClipspace = function () { if(!ClipspaceDialog.instance) { - ClipspaceDialog.instance = new ClipspaceDialog(app); - ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate; - } + ClipspaceDialog.instance = new ClipspaceDialog(app); + ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate; + } - if(ComfyApp.clipspace) { - ClipspaceDialog.instance.show(); - } - else - app.ui.dialog.show("Clipspace is Empty!"); + if(ComfyApp.clipspace) { + ClipspaceDialog.instance.show(); + } + else + app.ui.dialog.show("Clipspace is Empty!"); }; } }); \ No newline at end of file diff --git a/web/scripts/app.js b/web/scripts/app.js index 832efef47..181c54800 100644 --- a/web/scripts/app.js +++ b/web/scripts/app.js @@ -144,7 +144,7 @@ export class ComfyApp { callback: (obj) => { var widgets = null; if(this.widgets) { - widgets = this.widgets.map(({ type, name, value }) => ({ type, name, value })); + widgets = this.widgets.map(({ type, name, value }) => ({ type, name, value })); } var imgs = undefined; @@ -166,12 +166,12 @@ export class ComfyApp { 'original_imgs': orig_imgs, 'images': this.images, 'selectedIndex': 0, - 'img_paste_mode': 'all' + 'img_paste_mode': 'selected' // reset to default im_paste_mode state on copy action }; - if(ComfyApp.clipspace_invalidate_handler) { - ComfyApp.clipspace_invalidate_handler(); - } + if(ComfyApp.clipspace_invalidate_handler) { + ComfyApp.clipspace_invalidate_handler(); + } } }); @@ -185,30 +185,30 @@ export class ComfyApp { if(ComfyApp.clipspace.imgs && this.imgs) { var filename = ""; if(this.images && ComfyApp.clipspace.images) { - if(ComfyApp.clipspace['img_paste_mode'] == 'selected') { - app.nodeOutputs[this.id + ""].images = this.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]]; + if(ComfyApp.clipspace['img_paste_mode'] == 'selected') { + app.nodeOutputs[this.id + ""].images = this.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]]; - } - else - app.nodeOutputs[this.id + ""].images = this.images = ComfyApp.clipspace.images; + } + else + app.nodeOutputs[this.id + ""].images = this.images = ComfyApp.clipspace.images; } - if(ComfyApp.clipspace.imgs) { - // deep-copy to cut link with clipspace - if(ComfyApp.clipspace['img_paste_mode'] == 'selected') { - const img = new Image(); - img.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src; - this.imgs = [img]; - } - else { - const imgs = []; - for(let i=0; i obj.name === 'image'); - if(index >= 0 && filename != "") { - this.widgets[index].value = filename; - if(this.widgets_values != undefined) { - this.widgets_values[index] = filename; - } - } + // for Load Image node. + if(this.widgets) { + const index = this.widgets.findIndex(obj => obj.name === 'image'); + if(index >= 0 && filename != "") { + this.widgets[index].value = filename; + if(this.widgets_values != undefined) { + this.widgets_values[index] = filename; + } + } } }