Better editing

package.json

@@ -46,8 +46,6 @@
     "@litegraph-ts/nodes-basic": "workspace:*",
     "@litegraph-ts/tsconfig": "workspace:*",
     "events": "^3.3.0",
-    "framework7": "^8.0.3",
-    "framework7-svelte": "^8.0.3",
     "pollen-css": "^4.6.2",
     "radix-icons-svelte": "^1.2.1",
     "svelte-preprocess": "^5.0.3",

pnpm-lock.yaml

@@ -43,12 +43,6 @@ importers:
       events:
         specifier: ^3.3.0
         version: 3.3.0
-      framework7:
-        specifier: ^8.0.3
-        version: 8.0.3
-      framework7-svelte:
-        specifier: ^8.0.3
-        version: 8.0.3
       pollen-css:
         specifier: ^4.6.2
         version: 4.6.2
@@ -3152,12 +3146,6 @@ packages:
       esutils: 2.0.3
     dev: true
 
-  /dom7@4.0.6:
-    resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
-    dependencies:
-      ssr-window: 4.0.2
-    dev: false
-
   /ecc-jsbn@0.1.2:
     resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==}
     dependencies:
@@ -3813,21 +3801,6 @@ packages:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
     dev: true
 
-  /framework7-svelte@8.0.3:
-    resolution: {integrity: sha512-SHirFqZBvm9E989Gyy59+pdBZdamZmqxLc/hklvorsY8llKpPuPBXbcS+fGvujvuhDq0fHHmN5tbLqYUPJ9Cyg==}
-    dev: false
-
-  /framework7@8.0.3:
-    resolution: {integrity: sha512-5DGd9J4OdTUn9hfrRaxDXYXF4hx2RAV+xy+9tzq0+R5d6DgjeE/WkqJ5ElDToww9IVAsafZcRwZodd+4a0wr/Q==}
-    dependencies:
-      dom7: 4.0.6
-      htm: 3.1.1
-      path-to-regexp: 6.2.1
-      skeleton-elements: 4.0.1
-      ssr-window: 4.0.2
-      swiper: 9.2.4
-    dev: false
-
   /fs-extra@10.1.0:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
@@ -4019,10 +3992,6 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
-  /htm@3.1.1:
-    resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
-    dev: false
-
   /html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
@@ -5174,10 +5143,6 @@ packages:
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  /path-to-regexp@6.2.1:
-    resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
-    dev: false
-
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -5683,10 +5648,6 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
 
-  /skeleton-elements@4.0.1:
-    resolution: {integrity: sha512-T7YSF/Vu/raUcM6v3HiE4VSY/OvrNflg8Dur3Zza6VVJkq4slxm4pJRpGLNhoOfblIPZLQKh1cu7ADKveyqm/Q==}
-    dev: false
-
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -5755,10 +5716,6 @@ packages:
       tweetnacl: 0.14.5
     dev: false
 
-  /ssr-window@4.0.2:
-    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
-    dev: false
-
   /stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -6177,13 +6134,6 @@ packages:
     resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
     engines: {node: '>= 8'}
 
-  /swiper@9.2.4:
-    resolution: {integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==}
-    engines: {node: '>= 4.7.0'}
-    dependencies:
-      ssr-window: 4.0.2
-    dev: false
-
   /sync-request@6.1.0:
     resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==}
     engines: {node: '>=8.0.0'}

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 ComfyApp from "./ComfyApp";
-	import type { LGraphNode } from "@litegraph-ts/core";
+ import type { LGraphNode } from "@litegraph-ts/core";
-	import type { DragItem } from "./ComfyUIPane";
+ 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}
+                    <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
-                    <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}>
+                        <BlockTitle>
-                        <Move/>
+                            {#if $uiState.unlocked}
-                    </div>
+                                <input class="edit-title" bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
-                {/if}
+                            {:else}
-                <label for={String(id)}>
+                                {node.title}
-                    <BlockTitle>
+                            {/if}
-                        {#if $uiState.unlocked}
+                            {#if node.title !== node.type}
-                            <input bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
+                                <span class="node-type">({node.type})</span>
-                        {:else}
+                            {/if}
-                            {node.title}
+                        </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}
+                    {/each}
-                            <span class="node-type">({node.type})</span>
+                    {#if $uiState.unlocked}
-                        {/if}
+                        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-                    </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}
-                {/each}
             </Block>
         </div>
     {/each}
@@ -138,18 +142,16 @@
 
  .handle {
      cursor: grab;
+     z-index: 99999;
      position: absolute;
-     top: 0;
      right: 0;
-     width: 32px;
+     top: 0;
-     height: 32px;
+     width: 100%;
-     padding: 0.5em;
+     height: 100%;
-     margin-right: 0.5em;
-     margin-top: 0.25em;
  }
 
  .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 { Range } from "@gradio/form";
- import { BlockTitle } from "@gradio/atoms";
- import { createEventDispatcher } from "svelte"
  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();
+         $itemValue = option
-         option = Math.min(Math.max(option, item.widget.options.min), item.widget.options.max);
      }
- };
+ }
-
 </script>
 
 <div class="wrapper">
-    {#if item !== null && option !== undefined}
+    {#if item && option}
-        <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>
         <Range
             bind:value={option}
-            min={item.widget.options.min}
+            minimum={item.widget.options.min}
-            max={item.widget.options.max}
+            maximum={item.widget.options.max}
             step={item.widget.options.step}
-            label={false}
+            label={item.widget.name}
-            on:rangeChanged={onRelease}
+            show_label={true}
-            on:rangeChange={onChange}
+            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/>
-    <ComfyApp/>
-</App>
 
 <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;
-}