neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

UX improvements

Browse Source
This commit is contained in:
space-nuko
2023-05-05 06:11:05 -05:00
parent 9afe6b21a2
commit 267106bed4
5 changed files with 71 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/BlockContainer.svelte
View File

@@ -72,7 +72,9 @@
{@const hidden = item?.attrs?.hidden}
<div class="animation-wrapper"
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}>
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
>
<WidgetContainer dragItem={item} zIndex={zIndex+1} />
{#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
<div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>

18
src/lib/components/ComfyProperties.svelte
View File

@@ -103,13 +103,15 @@
{:else if spec.type === "number"}
<label class="number-wrapper">
<BlockTitle>{spec.name}</BlockTitle>
<input
type="number"
value={target.attrs[spec.name]}
step={1}
on:change={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
on:input={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
/>
<div class="number">
<input
type="number"
value={target.attrs[spec.name]}
step={1}
on:change={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
on:input={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
/>
</div>
</label>
{:else if spec.type === "enum"}
<label class="select-wrapper">
@@ -135,7 +137,7 @@
<TextBox
value={node.properties[spec.name]}
on:change={(e) => updateProperty(spec, e.detail)}
on:input={(e) => updateAttribute(spec, e.detail)}
on:input={(e) => updateProperty(spec, e.detail)}
label={spec.name}
max_lines={1}
/>

30
src/lib/stores/layoutState.ts
View File

@@ -21,6 +21,16 @@ export type LayoutState = {
isMenuOpen: boolean
}
export type Attributes = {
direction: "horizontal" | "vertical",
title: string,
showTitle: boolean,
classes: string,
blockVariant?: "block" | "hidden",
hidden?: boolean,
flexGrow?: number
}
export type AttributesSpec = {
name: string,
type: string,
@@ -61,6 +71,12 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
editable: true,
values: ["horizontal", "vertical"]
},
{
name: "flexGrow",
type: "number",
location: "widget",
editable: true
},
{
name: "classes",
type: "string",
@@ -102,15 +118,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
];
export { ALL_ATTRIBUTES };
export type Attributes = {
direction: "horizontal" | "vertical",
title: string,
showTitle: boolean,
classes: string,
blockVariant?: "block" | "hidden",
hidden?: boolean
}
export interface IDragItem {
type: string,
id: DragItemID,
@@ -190,6 +197,7 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
direction: "vertical",
classes: "",
blockVariant: "block",
flexGrow: 100,
...attrs
}
}
@@ -216,6 +224,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
showTitle: true,
direction: "horizontal",
classes: "",
flexGrow: 100,
...attrs
}
}
@@ -413,6 +422,7 @@ function initDefaultLayout() {
store.set({
root: null,
allItems: {},
allItemsByNode: {},
currentId: 0,
currentSelection: [],
isMenuOpen: false,
@@ -487,6 +497,8 @@ function deserialize(data: SerializedLayoutState, graph: LGraph) {
attrsChanged: writable(false)
};
dragItem.attrs.flexGrow = 100;
const dragEntry: DragItemEntry = {
dragItem,
children: [],

15
src/lib/widgets/RangeWidget.svelte
View File

@@ -37,9 +37,22 @@
$nodeValue = option
}
}
let gradient: string = ""
let elem: HTMLDivElement = null;
$: if (elem && node !== null && option !== null && (!$propsChanged || $propsChanged)) {
const slider = elem.querySelector("input[type='range']") as any
//const range_selectors = "[id$='_clone']:is(input[type='range'])";
let spacing = ((slider.step / ( slider.max - slider.min )) * 100.0);
let tsp = 'max(3px, calc('+spacing+'% - 2px))';
let fsp = 'max(4px, calc('+spacing+'% + 0px))';
const style = elem.style;
style.setProperty('--ae-slider-bg-overlay', 'repeating-linear-gradient( 90deg, transparent, transparent '+tsp+', var(--ae-input-border-color) '+tsp+', var(--ae-input-border-color) '+fsp+' )');
}
</script>
<div class="wrapper gradio-slider">
<div class="wrapper gradio-slider" bind:this={elem}>
{#if node !== null && option !== null}
<Range
bind:value={option}

36
src/scss/ux.scss
View File

@@ -152,21 +152,20 @@ body {
}
}
.widget.selected {
background: var(--ae-primary-color) !important;
}
.animation-wrapper > .widget {
.animation-wrapper > .widget:not(.selected) {
background: var(--ae-panel-bg-color) !important;
}
.container.z-index2 > .block > .v-pane > .animation-wrapper > .widget:not(.edit) {
padding: var(--ae-inside-padding-size) !important;
border: 1px solid var(--ae-panel-border-color) !important;
.container {
.z-index0, .z-index1, .z-index2 {
> .block > .v-pane > .animation-wrapper > .widget:not(.edit) {
padding: var(--ae-inside-padding-size) !important;
border: 1px solid var(--ae-panel-border-color) !important;
}
}
}
.widget:has(> .gradio-button) {
height: 100%;
height: 100%;
.gradio-button {
height: 100%;
@@ -226,9 +225,14 @@ div.float {
color: var(--ae-primary-color)!important;
}
.widget.edit {
border-width: 2px;
border-color: var(--ae-primary-color) !important;
.widget {
&.selected {
background: var(--ae-primary-color) !important;
}
&.edit:not(.selected) {
border-width: 2px;
border-color: var(--ae-primary-color) !important;
}
}
.target-name {
@@ -722,6 +726,12 @@ input[type=range]::-ms-fill-upper {
}
.widget > .wrapper.comfy-combo .svelte-select {
--font-size: 13px;
--height: 32px;
--input-padding: 0px;
--chevron-height: 32px;
--padding: 0 0 0 8px;
background: var(--ae-input-bg-color) !important;
border-radius: 0px !important;
border-color: var(--ae-input-border-color) !important;