From 267106bed4b9c4b5645f4113aceff2b2d36e82db Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 5 May 2023 06:11:05 -0500
Subject: [PATCH] UX improvements

---
 src/lib/components/BlockContainer.svelte  |  4 ++-
 src/lib/components/ComfyProperties.svelte | 18 +++++++-----
 src/lib/stores/layoutState.ts             | 30 +++++++++++++------
 src/lib/widgets/RangeWidget.svelte        | 15 +++++++++-
 src/scss/ux.scss                          | 36 +++++++++++++++--------
 5 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index 6329b59..14a0318 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/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'/>
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 6f874f2..82b7c03 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -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}
                                         />
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index c37a316..33edb54 100644
--- a/src/lib/stores/layoutState.ts
+++ b/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: [],
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index 2ce7780..e908c2d 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/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}
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index fe17f4c..8df7a08 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -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;