Better editing

src/lib/components/ComfyPane.svelte

@@ -17,15 +17,17 @@
  // notice - fade in works fine but don't add svelte's fade-out (known issue)
  import {cubicIn} from 'svelte/easing';
  import { flip } from 'svelte/animate';
-	import ComfyApp from "./ComfyApp";
-	import type { LGraphNode } from "@litegraph-ts/core";
-	import type { DragItem } from "./ComfyUIPane";
+ import ComfyApp from "./ComfyApp";
+ import type { LGraphNode } from "@litegraph-ts/core";
+ import type { DragItem } from "./ComfyUIPane";
 
  export let dragItems: DragItem[] = [];
  let dragDisabled = true;
  let unlockUI = false;
  const flipDurationMs = 200;
 
+ $: dragDisabled = !$uiState.unlocked;
+
  const handleConsider = evt => {
      dragItems = evt.detail.items;
      // console.log(dragItems);
@@ -37,9 +39,13 @@
  };
 
  const startDrag = () => {
+     if (!$uiState.unlocked)
+         return
      dragDisabled = false;
  };
  const stopDrag = () => {
+     if (!$uiState.unlocked)
+         return
      dragDisabled = true;
  };
 
@@ -94,29 +100,27 @@
         {@const id = node.id}
         <div class="animation-wrapper" class:is-executing={dragItem.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
             <Block>
-                {#if $uiState.unlocked}
-                    <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}>
-                        <Move/>
-                    </div>
-                {/if}
-                <label for={String(id)}>
-                    <BlockTitle>
-                        {#if $uiState.unlocked}
-                            <input bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
-                        {:else}
-                            {node.title}
+                    <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+                        <BlockTitle>
+                            {#if $uiState.unlocked}
+                                <input class="edit-title" bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
+                            {:else}
+                                {node.title}
+                            {/if}
+                            {#if node.title !== node.type}
+                                <span class="node-type">({node.type})</span>
+                            {/if}
+                        </BlockTitle>
+                    </label>
+                    {#each $widgetState[id] as item}
+                        <svelte:component this={getComponentForWidgetState(item)} {item} />
+                        {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                         {/if}
-                        {#if node.title !== node.type}
-                            <span class="node-type">({node.type})</span>
-                        {/if}
-                    </BlockTitle>
-                </label>
-                {#each $widgetState[id] as item}
-                    <svelte:component this={getComponentForWidgetState(item)} {item} />
-                    {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/each}
+                    {#if $uiState.unlocked}
+                        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
                     {/if}
-                {/each}
             </Block>
         </div>
     {/each}
@@ -138,18 +142,16 @@
 
  .handle {
      cursor: grab;
+     z-index: 99999;
      position: absolute;
-     top: 0;
      right: 0;
-     width: 32px;
-     height: 32px;
-     padding: 0.5em;
-     margin-right: 0.5em;
-     margin-top: 0.25em;
+     top: 0;
+     width: 100%;
+     height: 100%;
  }
 
  .handle:hover {
-     background-color: lightblue;
+     background-color: #add8e680;
  }
 
  .drag-item-shadow {
@@ -166,4 +168,35 @@
      font-size: smaller;
      color: var(--neutral-400);
  }
+
+ .edit-title-label {
+     position: relative;
+     z-index: 100000;
+ }
+
+ .edit-title {
+     z-index: 100000;
+     display: block;
+     position: relative;
+     outline: none !important;
+     box-shadow: var(--input-shadow);
+     border: var(--input-border-width) solid var(--input-border-color);
+     border-radius: var(--input-radius);
+     background: var(--input-background-fill);
+     padding: var(--input-padding);
+     width: 100%;
+     color: var(--body-text-color);
+     font-weight: var(--input-text-weight);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+ }
+
+ .edit-title:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ .edit-title::placeholder {
+     color: var(--input-placeholder-color);
+ }
 </style>

src/lib/stores/uiState.ts

@@ -2,10 +2,13 @@ import { writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 
 export type UIState = {
+    nodesLocked: boolean,
+    graphLocked: boolean,
     unlocked: boolean,
 }
 
-const store: Writable<UIState> = writable({ unlocked: false })
+export type WritableUIStateStore = Writable<UIState>;
+const store: WritableUIStateStore = writable({ unlocked: false, graphLocked: true, nodesLocked:false })
 
 const uiStateStore: WritableUIStateStore =
 {

src/lib/widgets/RangeWidget.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
  import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
- import { Range } from "framework7-svelte";
- import { BlockTitle } from "@gradio/atoms";
- import { createEventDispatcher } from "svelte"
+ import { Range } from "@gradio/form";
  import { get } from "svelte/store";
  export let item: WidgetUIState | null = null;
  let itemValue: WidgetUIStateStore | null = null;
  let option: number | null = null;
 
- const dispatch = createEventDispatcher();
-
  $: if (item) {
      itemValue = item.value;
      updateOption(); // don't react on option
@@ -19,89 +15,29 @@
      option = get(itemValue);
  }
 
- function onMouseup(value: number) {
-     $itemValue = option
- }
-
- function onChange(e: Event) {
-     option = e.detail[0]
- }
-
  function onRelease(e: Event) {
-     option = e.detail[0]
-     $itemValue = option
- }
-
- const clamp = () => {
      if (itemValue && option) {
-         onMouseup();
-         option = Math.min(Math.max(option, item.widget.options.min), item.widget.options.max);
+         $itemValue = option
      }
- };
-
+ }
 </script>
 
 <div class="wrapper">
-    {#if item !== null && option !== undefined}
-        <div class="wrap">
-            <div class="head">
-                <BlockTitle>{item.widget.name}</BlockTitle>
-                <input
-                    type="number"
-                    bind:value={option}
-                    min={item.widget.options.min}
-                    max={item.widget.options.max}
-                    step={item.widget.options.step}
-                    on:blur={clamp}
-                    on:mouseup={onMouseup}
-                />
-            </div>
-        </div>
+    {#if item && option}
         <Range
             bind:value={option}
-            min={item.widget.options.min}
-            max={item.widget.options.max}
+            minimum={item.widget.options.min}
+            maximum={item.widget.options.max}
             step={item.widget.options.step}
-            label={false}
-            on:rangeChanged={onRelease}
-            on:rangeChange={onChange}
+            label={item.widget.name}
+            show_label={true}
+            on:release={onRelease}
+            on:change
         />
     {/if}
 </div>
 
 <style>
- .wrap {
-     display: flex;
-     flex-direction: column;
-     width: 100%;
- }
- .head {
-     display: flex;
-     justify-content: space-between;
- }
- input[type="number"] {
-     display: block;
-     position: relative;
-     outline: none !important;
-     box-shadow: var(--input-shadow);
-     border: var(--input-border-width) solid var(--input-border-color);
-     border-radius: var(--input-radius);
-     background: var(--input-background-fill);
-     padding: var(--size-2) var(--size-2);
-     height: var(--size-6);
-     color: var(--body-text-color);
-     font-size: var(--input-text-size);
-     line-height: var(--line-sm);
-     text-align: center;
- }
- input::placeholder {
-     color: var(--input-placeholder-color);
- }
-
- input[type="number"]:focus {
-     box-shadow: var(--input-shadow-focus);
-     border-color: var(--input-border-color-focus);
- }
  .wrapper {
      padding: 2px;
      width: 100%;

src/routes/+page.svelte

@@ -1,22 +1,12 @@
 <script lang="ts">
  import ComfyApp from "$lib/components/ComfyApp.svelte"
  import "@litegraph-ts/core/css/litegraph.css";
- import "framework7/css/bundle";
  import "../scss/global.scss";
 
  import { onMount } from 'svelte';
- import { f7, f7ready, App } from 'framework7-svelte';
- onMount(() => {
-     f7ready(() => {
-         // Framework7 initialized
-         f7.theme = "ios";
-     })
- })
 </script>
 
-<App>
-    <ComfyApp/>
-</App>
+<ComfyApp/>
 
 <style>
 :root {

src/routes/+page.ts

@@ -1,10 +1,5 @@
 import type { PageLoad } from "./$types"
 
-import Framework7 from 'framework7/lite-bundle';
-import Framework7Svelte from 'framework7-svelte';
-
-Framework7.use(Framework7Svelte)
-
 // `PageServerData` will contain everything from the layouts and also the
 // `data` from the `+page.server.ts` file.
 type OutputProps = {}

src/scss/global.scss

@@ -1,8 +1 @@
-button {
-    width: auto !important;
-}
 
-:root {
-    --f7-block-margin-vertical: 10px;
-    --f7-block-padding-horizontal: 0px;
-}