UX improvements

src/lib/components/BlockContainer.svelte

@@ -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'/>

src/lib/components/ComfyProperties.svelte

@@ -103,6 +103,7 @@
                             {:else if spec.type === "number"}
                                 <label class="number-wrapper">
                                     <BlockTitle>{spec.name}</BlockTitle>
+                                    <div class="number">
                                         <input
                                             type="number"
                                             value={target.attrs[spec.name]}
@@ -110,6 +111,7 @@
                                             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}
                                         />

src/lib/stores/layoutState.ts

@@ -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: [],

src/lib/widgets/RangeWidget.svelte

@@ -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}

src/scss/ux.scss

@@ -152,19 +152,18 @@ body {
      }
  }
 
-.widget.selected {
+.animation-wrapper > .widget:not(.selected) {
-    background: var(--ae-primary-color) !important;
-}
-
-.animation-wrapper > .widget {
     background: var(--ae-panel-bg-color) !important;
 }
 
-.container.z-index2 > .block > .v-pane > .animation-wrapper > .widget:not(.edit) {
+.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%;
 
@@ -226,10 +225,15 @@ div.float {
     color: var(--ae-primary-color)!important;
 }
 
-.widget.edit {
+.widget {
+    &.selected {
+        background: var(--ae-primary-color) !important;
+    }
+    &.edit:not(.selected) {
         border-width: 2px;
         border-color: var(--ae-primary-color) !important;
     }
+}
 
 .target-name {
     background: var(--ae-subpanel-bg-color);
@@ -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;