Disable interaction, read only checkboxes

package.json

@@ -37,9 +37,9 @@
     "@gradio/button": "workspace:*",
     "@gradio/client": "workspace:*",
     "@gradio/form": "workspace:*",
+    "@gradio/gallery": "workspace:*",
     "@gradio/icons": "workspace:*",
     "@gradio/theme": "workspace:*",
-    "@gradio/gallery": "workspace:*",
     "@gradio/upload": "workspace:*",
     "@gradio/utils": "workspace:*",
     "@litegraph-ts/core": "workspace:*",
@@ -48,6 +48,7 @@
     "pollen-css": "^4.6.2",
     "radix-icons-svelte": "^1.2.1",
     "svelte-preprocess": "^5.0.3",
+    "svelte-select": "^5.5.3",
     "svelte-splitpanes": "^0.7.13",
     "tailwindcss": "^3.3.1",
     "typed-emitter": "github:andywer/typed-emitter",

pnpm-lock.yaml

@@ -30,6 +30,7 @@ importers:
       svelte-check: ^3.2.0
       svelte-dnd-action: ^0.9.22
       svelte-preprocess: ^5.0.3
+      svelte-select: ^5.5.3
       svelte-splitpanes: ^0.7.13
       tailwindcss: ^3.3.1
       typed-emitter: github:andywer/typed-emitter
@@ -54,6 +55,7 @@ importers:
       pollen-css: 4.6.2
       radix-icons-svelte: 1.2.1
       svelte-preprocess: 5.0.3_3gubijbxbisgisegeglxqngyuq
+      svelte-select: 5.5.3
       svelte-splitpanes: 0.7.13_svelte@3.58.0
       tailwindcss: 3.3.1
       typed-emitter: github.com/andywer/typed-emitter/9a139b6fa0ec6b0db6141b5b756b784e4f7ef4e4
@@ -290,6 +292,16 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@floating-ui/core/1.2.6:
+    resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
+    dev: false
+
+  /@floating-ui/dom/1.2.6:
+    resolution: {integrity: sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw==}
+    dependencies:
+      '@floating-ui/core': 1.2.6
+    dev: false
+
   /@humanwhocodes/config-array/0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
@@ -1637,6 +1649,13 @@ packages:
       svelte: 3.58.0
     dev: true
 
+  /svelte-floating-ui/1.2.8:
+    resolution: {integrity: sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==}
+    dependencies:
+      '@floating-ui/core': 1.2.6
+      '@floating-ui/dom': 1.2.6
+    dev: false
+
   /svelte-hmr/0.15.1_svelte@3.58.0:
     resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
@@ -1693,6 +1712,13 @@ packages:
       svelte: 3.58.0
       typescript: 5.0.3
 
+  /svelte-select/5.5.3:
+    resolution: {integrity: sha512-0QIiEmyon3bqoenFtR/BhamMpMmzOWWg1ctE7xxwP7nEnZhAGGoTra1HPPfEyT6C6gVaOFgCpdBaZoM8DEHlEw==}
+    dependencies:
+      '@floating-ui/dom': 1.2.6
+      svelte-floating-ui: 1.2.8
+    dev: false
+
   /svelte-splitpanes/0.7.13_svelte@3.58.0:
     resolution: {integrity: sha512-LiAf4OEZqRJanoax9mextXtQ0JzrdCqX2tOgVO+yJu2XNyGz5j5fGbw8+5AXgOasPi/m1nv8n2Lt+XYFRfvIGg==}
     peerDependencies:

src/lib/components/ComfyApp.svelte

@@ -5,17 +5,22 @@
  import { Button } from "@gradio/button";
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp, { type SerializedAppState } from "./ComfyApp";
+ import { Checkbox } from "@gradio/form"
  import widgetState from "$lib/stores/widgetState";
  import { ImageViewer } from "$lib/ImageViewer";
+ import { download } from "$lib/utils"
 
  import { LGraph, LGraphNode } from "@litegraph-ts/core";
 	import LightboxModal from "./LightboxModal.svelte";
+	import { Block } from "@gradio/atoms";
 
  let app: ComfyApp = undefined;
  let imageViewer: ImageViewer;
  let uiPane: ComfyUIPane = undefined;
  let mainElem: HTMLDivElement;
  let containerElem: HTMLDivElement;
+ let nodesLocked: boolean = false;
+ let graphLocked: boolean = false;
  let resizeTimeout: typeof Timer = -1;
 
  function refreshView(event?: Event) {
@@ -29,6 +34,9 @@
      app.queuePrompt(0, 1, state);
  }
 
+ $: if (app) app.lCanvas.allow_dragnodes = !nodesLocked;
+ $: if (app) app.lCanvas.allow_interaction = !graphLocked;
+
  let graphSize = null;
 
  function toggleGraph() {
@@ -55,7 +63,8 @@
 
  let graphResizeTimer: typeof Timer = -1;
 
- function serializeAppState(graph: LGraph): SerializedAppState {
+ function serializeAppState(): SerializedAppState {
+     const graph = app.lGraph;
      const frontendState = get(widgetState);
 
      const serializedGraph = graph.serialize()
@@ -79,6 +88,7 @@
      }
 
      return {
+         createdBy: "ComfyBox",
          version: 1,
          workflow: serializedGraph,
          panes: serializedPaneOrder
@@ -86,7 +96,7 @@
  }
 
  function doAutosave(graph: LGraph): void {
-     const savedWorkflow = serializeAppState(graph);
+     const savedWorkflow = serializeAppState();
      localStorage.setItem("workflow", JSON.stringify(savedWorkflow))
  }
 
@@ -94,6 +104,16 @@
      uiPane.restore(workflow.panes);
  }
 
+ function doSave(): void {
+     if (!app?.lGraph)
+         return;
+
+     const date = new Date();
+     const formattedDate = date.toISOString().replace(/:/g, '-').replace(/\.\d{3}/g, '').replace('T', '_').replace("Z", "");
+
+     download(`workflow-${formattedDate}.json`, JSON.stringify(serializeAppState()), "application/json")
+ }
+
  onMount(async () => {
      app = new ComfyApp();
 
@@ -155,9 +175,11 @@
         <Button variant="secondary" on:click={toggleSidebar}>
             Toggle Sidebar
         </Button>
-        <Button variant="secondary" on:click={() => { if (app?.lGraph) doAutosave(app.lGraph) }}>
+        <Button variant="secondary" on:click={doSave}>
             Save
         </Button>
+        <Checkbox label="Lock Nodes" bind:value={nodesLocked}/>
+        <Checkbox label="Disable Interaction" bind:value={graphLocked}/>
     </div>
     <LightboxModal />
 </div>
@@ -187,6 +209,9 @@
  }
 
  #bottombar {
+     display: flex;
+     flex-wrap: wrap;
+     gap: var(--layout-gap);
      margin: 10px;
  }
 

src/lib/components/ComfyApp.ts

@@ -30,6 +30,7 @@ export type SerializedPanes = {
 }
 
 export type SerializedAppState = {
+    createdBy: "ComfyBox",
     version: number,
     panes: SerializedPanes,
     workflow: SerializedLGraph

src/lib/utils.ts

@@ -0,0 +1,13 @@
+export function download(filename: string, text: string, type: string = "text/plain") {
+    const blob = new Blob([text], { type: type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    setTimeout(function() {
+        a.remove();
+        window.URL.revokeObjectURL(url);
+    }, 0);
+}

src/lib/widgets/ComboWidget.svelte

@@ -1,23 +1,31 @@
 <script lang="ts">
  import type { WidgetUIState } from "$lib/stores/widgetState";
+ import { BlockTitle } from "@gradio/atoms";
  import { Dropdown } from "@gradio/form";
+ import Select from 'svelte-select';
  export let item: WidgetUIState | null = null;
+
+ let option: any = null;
+
+ $: if(item && !option) option = item.value;
 </script>
 
 <div class="wrapper">
     {#if item}
-        <Dropdown
-            bind:value={item.value}
-            choices={item.widget.options.values}
-            multiselect={false}
-            max_choices={1}
-            label={item.widget.name}
-            show_label={true}
-            disabled={item.widget.options.values.length === 0}
-            on:change
-            on:select
-            on:blur
-        />
+        <label>
+            <BlockTitle show_label={true}>{item.widget.name}</BlockTitle>
+            <Select
+                bind:value={option}
+                bind:justValue={item.value}
+                bind:items={item.widget.options.values}
+                disabled={item.widget.options.values.length === 0}
+                clearable={false}
+                on:change
+                on:select
+                on:filter
+                on:blur
+            />
+        </label>
     {/if}
 </div>
 
@@ -26,4 +34,8 @@
      padding: 2px;
      width: 100%;
  }
+
+ :global(.svelte-select-list) {
+     z-index: var(--layer-5) !important;
+ }
 </style>