mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-26 09:19:43 +00:00
Apply new code format standard (#217)
This commit is contained in:
Chenlei Hu
@@ -1,20 +1,20 @@
|
||||
import { app } from "../../scripts/app";
|
||||
import { ComfyDialog, $el } from "../../scripts/ui";
|
||||
import { ComfyApp } from "../../scripts/app";
|
||||
import { app } from '../../scripts/app'
|
||||
import { ComfyDialog, $el } from '../../scripts/ui'
|
||||
import { ComfyApp } from '../../scripts/app'
|
||||
|
||||
export class ClipspaceDialog extends ComfyDialog {
|
||||
static items = [];
|
||||
static instance = null;
|
||||
static items = []
|
||||
static instance = null
|
||||
|
||||
static registerButton(name, contextPredicate, callback) {
|
||||
const item = $el("button", {
|
||||
type: "button",
|
||||
const item = $el('button', {
|
||||
type: 'button',
|
||||
textContent: name,
|
||||
contextPredicate: contextPredicate,
|
||||
onclick: callback,
|
||||
});
|
||||
onclick: callback
|
||||
})
|
||||
|
||||
ClipspaceDialog.items.push(item);
|
||||
ClipspaceDialog.items.push(item)
|
||||
}
|
||||
|
||||
static invalidatePreview() {
|
||||
@@ -24,161 +24,161 @@ export class ClipspaceDialog extends ComfyDialog {
|
||||
ComfyApp.clipspace.imgs.length > 0
|
||||
) {
|
||||
const img_preview = document.getElementById(
|
||||
"clipspace_preview"
|
||||
) as HTMLImageElement;
|
||||
'clipspace_preview'
|
||||
) as HTMLImageElement
|
||||
if (img_preview) {
|
||||
img_preview.src =
|
||||
ComfyApp.clipspace.imgs[ComfyApp.clipspace["selectedIndex"]].src;
|
||||
img_preview.style.maxHeight = "100%";
|
||||
img_preview.style.maxWidth = "100%";
|
||||
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;
|
||||
const self = ClipspaceDialog.instance
|
||||
// allow reconstruct controls when copying from non-image to image content.
|
||||
const children = $el("div.comfy-modal-content", [
|
||||
const children = $el('div.comfy-modal-content', [
|
||||
self.createImgSettings(),
|
||||
...self.createButtons(),
|
||||
]);
|
||||
...self.createButtons()
|
||||
])
|
||||
|
||||
if (self.element) {
|
||||
// update
|
||||
self.element.removeChild(self.element.firstChild);
|
||||
self.element.appendChild(children);
|
||||
self.element.removeChild(self.element.firstChild)
|
||||
self.element.appendChild(children)
|
||||
} else {
|
||||
// new
|
||||
self.element = $el("div.comfy-modal", { parent: document.body }, [
|
||||
children,
|
||||
]);
|
||||
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.",
|
||||
$el('p', {}, [
|
||||
'Unable to find the features to edit content of a format stored in the current Clipspace.'
|
||||
])
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
ClipspaceDialog.invalidatePreview();
|
||||
ClipspaceDialog.invalidatePreview()
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super()
|
||||
}
|
||||
|
||||
createButtons() {
|
||||
const buttons = [];
|
||||
const buttons = []
|
||||
|
||||
for (let idx in ClipspaceDialog.items) {
|
||||
const item = ClipspaceDialog.items[idx];
|
||||
const item = ClipspaceDialog.items[idx]
|
||||
if (!item.contextPredicate || item.contextPredicate())
|
||||
buttons.push(ClipspaceDialog.items[idx]);
|
||||
buttons.push(ClipspaceDialog.items[idx])
|
||||
}
|
||||
|
||||
buttons.push(
|
||||
$el("button", {
|
||||
type: "button",
|
||||
textContent: "Close",
|
||||
$el('button', {
|
||||
type: 'button',
|
||||
textContent: 'Close',
|
||||
onclick: () => {
|
||||
this.close();
|
||||
},
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
);
|
||||
)
|
||||
|
||||
return buttons;
|
||||
return buttons
|
||||
}
|
||||
|
||||
createImgSettings() {
|
||||
if (ComfyApp.clipspace.imgs) {
|
||||
const combo_items = [];
|
||||
const imgs = ComfyApp.clipspace.imgs;
|
||||
const combo_items = []
|
||||
const imgs = ComfyApp.clipspace.imgs
|
||||
|
||||
for (let i = 0; i < imgs.length; i++) {
|
||||
combo_items.push($el("option", { value: i }, [`${i}`]));
|
||||
combo_items.push($el('option', { value: i }, [`${i}`]))
|
||||
}
|
||||
|
||||
const combo1 = $el(
|
||||
"select",
|
||||
'select',
|
||||
{
|
||||
id: "clipspace_img_selector",
|
||||
id: 'clipspace_img_selector',
|
||||
onchange: (event) => {
|
||||
ComfyApp.clipspace["selectedIndex"] = event.target.selectedIndex;
|
||||
ClipspaceDialog.invalidatePreview();
|
||||
},
|
||||
ComfyApp.clipspace['selectedIndex'] = event.target.selectedIndex
|
||||
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",
|
||||
'select',
|
||||
{
|
||||
id: "clipspace_img_paste_mode",
|
||||
id: 'clipspace_img_paste_mode',
|
||||
onchange: (event) => {
|
||||
ComfyApp.clipspace["img_paste_mode"] = event.target.value;
|
||||
},
|
||||
ComfyApp.clipspace['img_paste_mode'] = event.target.value
|
||||
}
|
||||
},
|
||||
[
|
||||
$el("option", { value: "selected" }, "selected"),
|
||||
$el("option", { value: "all" }, "all"),
|
||||
$el('option', { value: 'selected' }, 'selected'),
|
||||
$el('option', { value: 'all' }, 'all')
|
||||
]
|
||||
) as HTMLSelectElement;
|
||||
combo2.value = ComfyApp.clipspace["img_paste_mode"];
|
||||
) as HTMLSelectElement
|
||||
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", ondragstart: () => false }, [])]
|
||||
);
|
||||
'td',
|
||||
{ align: 'center', width: '100px', height: '100px', colSpan: '2' },
|
||||
[$el('img', { id: 'clipspace_preview', ondragstart: () => false }, [])]
|
||||
)
|
||||
|
||||
const row3 = $el("tr", {}, [td]);
|
||||
const row3 = $el('tr', {}, [td])
|
||||
|
||||
return $el("table", {}, [row1, row2, row3]);
|
||||
return $el('table', {}, [row1, row2, row3])
|
||||
} else {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
createImgPreview() {
|
||||
if (ComfyApp.clipspace.imgs) {
|
||||
return $el("img", { id: "clipspace_preview", ondragstart: () => false });
|
||||
} else return [];
|
||||
return $el('img', { id: 'clipspace_preview', ondragstart: () => false })
|
||||
} else return []
|
||||
}
|
||||
|
||||
show() {
|
||||
const img_preview = document.getElementById("clipspace_preview");
|
||||
ClipspaceDialog.invalidate();
|
||||
const img_preview = document.getElementById('clipspace_preview')
|
||||
ClipspaceDialog.invalidate()
|
||||
|
||||
this.element.style.display = "block";
|
||||
this.element.style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
app.registerExtension({
|
||||
name: "Comfy.Clipspace",
|
||||
name: 'Comfy.Clipspace',
|
||||
init(app) {
|
||||
app.openClipspace = function () {
|
||||
if (!ClipspaceDialog.instance) {
|
||||
ClipspaceDialog.instance = new ClipspaceDialog();
|
||||
ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate;
|
||||
ClipspaceDialog.instance = new ClipspaceDialog()
|
||||
ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate
|
||||
}
|
||||
|
||||
if (ComfyApp.clipspace) {
|
||||
ClipspaceDialog.instance.show();
|
||||
} else app.ui.dialog.show("Clipspace is Empty!");
|
||||
};
|
||||
},
|
||||
});
|
||||
ClipspaceDialog.instance.show()
|
||||
} else app.ui.dialog.show('Clipspace is Empty!')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user