Update

src/lib/components/ComfyApp.svelte

@@ -7,6 +7,8 @@
  import ComfyApp, { type SerializedAppState } from "./ComfyApp";
  import { Checkbox } from "@gradio/form"
  import widgetState from "$lib/stores/widgetState";
+ import nodeState from "$lib/stores/nodeState";
+ import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
  import { download } from "$lib/utils"
 
@@ -23,8 +25,6 @@
  let queue: ComfyQueue = undefined;
  let mainElem: HTMLDivElement;
  let containerElem: HTMLDivElement;
- let nodesLocked: boolean = false;
- let graphLocked: boolean = false;
  let resizeTimeout: typeof Timer = -1;
 
  function refreshView(event?: Event) {
@@ -37,8 +37,8 @@
      app.queuePrompt(0, 1);
  }
 
- $: if (app) app.lCanvas.allow_dragnodes = !nodesLocked;
- $: if (app) app.lCanvas.allow_interaction = !graphLocked;
+ $: if (app) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked;
+ $: if (app) app.lCanvas.allow_interaction = !$uiState.graphLocked;
 
  let graphSize = null;
 
@@ -102,6 +102,12 @@
  onMount(async () => {
      app = new ComfyApp();
 
+// TODO dedup
+     app.eventBus.on("nodeAdded", nodeState.nodeAdded);
+     app.eventBus.on("nodeRemoved", nodeState.nodeRemoved);
+     app.eventBus.on("configured", nodeState.configureFinished);
+     app.eventBus.on("cleared", nodeState.clear);
+
      app.eventBus.on("nodeAdded", widgetState.nodeAdded);
      app.eventBus.on("nodeRemoved", widgetState.nodeRemoved);
      app.eventBus.on("configured", widgetState.configureFinished);
@@ -167,8 +173,9 @@
         <Button variant="secondary" on:click={doSave}>
             Save
         </Button>
-        <Checkbox label="Lock Nodes" bind:value={nodesLocked}/>
-        <Checkbox label="Disable Interaction" bind:value={graphLocked}/>
+        <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
+        <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/>
+        <Checkbox label="Enable UI Editing" bind:value={$uiState.unlocked}/>
     </div>
     <LightboxModal />
 </div>

src/lib/components/ComfyPane.svelte

@@ -8,6 +8,8 @@
  import TextWidget from "$lib/widgets/TextWidget.svelte";
  import widgetState, { type WidgetDrawState, type WidgetUIState } from "$lib/stores/widgetState";
  import queueState from "$lib/stores/queueState";
+ import nodeState from "$lib/stores/nodeState";
+ import uiState from "$lib/stores/uiState";
 
  import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
 
@@ -21,6 +23,7 @@
 
  export let dragItems: DragItem[] = [];
  let dragDisabled = true;
+ let unlockUI = false;
  const flipDurationMs = 200;
 
  const handleConsider = evt => {
@@ -76,6 +79,11 @@
 
      return null;
  }
+
+ function updateNodeName(node: LGraphNode, value: string) {
+ console.log("CHA")
+    nodeState.nodeStateChanged(node);
+ }
 </script>
 
 
@@ -89,11 +97,22 @@
         {@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>{node.title}</BlockTitle>
+                    <BlockTitle>
+                    {#if $uiState.unlocked}
+                        <input 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} />
@@ -145,4 +164,9 @@
      opacity: 0.5;
      margin: 0;
  }
+
+ .node-type {
+      font-size: smaller;
+      color: var(--neutral-400);
+  }
 </style>