Image upload widget

This commit is contained in:
space-nuko
2023-05-08 18:08:28 -05:00
parent 5feffcfa17
commit 0f50dbae87
15 changed files with 380 additions and 48 deletions

View File

@@ -78,7 +78,7 @@
<div class="animation-wrapper"
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
style={item?.attrs?.style || ""}
>
<WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
{#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
@@ -183,6 +183,7 @@
.animation-wrapper {
position: relative;
flex-grow: 100;
flex-basis: 0;
}
.handle-widget:hover {

View File

@@ -80,7 +80,7 @@
<div class="animation-wrapper"
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
style={item?.attrs?.style || ""}
>
<WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
{#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
@@ -238,6 +238,7 @@
.animation-wrapper {
position: relative;
flex-grow: 100;
flex-basis: 0;
}
.handle-hidden {

View File

@@ -715,7 +715,8 @@ export default class ComfyApp {
comfyInput.config.values = def["input"]["required"][comfyInput.name][0];
const inputNode = node.getInputNode(index)
if (inputNode && "doAutoConfig" in inputNode) {
if (inputNode && "doAutoConfig" in inputNode && comfyInput.widgetNodeType === inputNode.type) {
console.debug("[ComfyApp] Reconfiguring combo widget", inputNode.type, comfyInput.config.values)
const comfyComboNode = inputNode as nodes.ComfyComboNode;
comfyComboNode.doAutoConfig(comfyInput)
if (!comfyInput.config.values.includes(get(comfyComboNode.value))) {

View File

@@ -92,7 +92,7 @@
<div class="animation-wrapper"
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}>
style={item?.attrs?.style || ""}>
<Block>
<label for={String(item.id)}>
<BlockTitle><strong>Tab {i+1}:</strong> {tabName}</BlockTitle>
@@ -198,6 +198,7 @@
.animation-wrapper {
position: relative;
flex-grow: 100;
flex-basis: 0;
}
.handle-widget:hover {

View File

@@ -0,0 +1,38 @@
<script lang="ts">
export let type: "video" | "image" | "audio" | "file" | "csv" = "file";
const defs = {
image: "interface.drop_image",
video: "interface.drop_video",
audio: "interface.drop_audio",
file: "interface.drop_file",
csv: "interface.drop_csv"
};
</script>
<div class="wrap">
{"Drop Image here"}
<span class="or">- {"or"} -</span>
{"Click to Upload"}
</div>
<style>
.wrap {
display: flex;
flex-direction: column;
justify-content: center;
min-height: var(--size-60);
color: var(--block-label-text-color);
line-height: var(--line-md);
}
.or {
color: var(--body-text-color-subdued);
}
@media (--screen-md) {
.wrap {
font-size: var(--text-lg);
}
}
</style>