From 838b3ce17b6fd5f3a3ec48ef22657baeb5b177ff Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Fri, 7 Apr 2023 17:53:48 -0500 Subject: [PATCH] Disable interaction, read only checkboxes --- litegraph | 2 +- package.json | 3 ++- pnpm-lock.yaml | 26 +++++++++++++++++++++ src/lib/components/ComfyApp.svelte | 31 ++++++++++++++++++++++--- src/lib/components/ComfyApp.ts | 1 + src/lib/utils.ts | 13 +++++++++++ src/lib/widgets/ComboWidget.svelte | 36 ++++++++++++++++++++---------- 7 files changed, 95 insertions(+), 17 deletions(-) create mode 100644 src/lib/utils.ts diff --git a/litegraph b/litegraph index 3a6bb54..e913f3c 160000 --- a/litegraph +++ b/litegraph @@ -1 +1 @@ -Subproject commit 3a6bb54d4834be7788c73f641f520dfdd4adc4c1 +Subproject commit e913f3c5bee6422e7f4bfd1a961adbfd1703ff9c diff --git a/package.json b/package.json index faff9d8..f87c7d1 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3248a76..1c32c05 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index 9a87049..8fd7c99 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/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 @@ - + + @@ -187,6 +209,9 @@ } #bottombar { + display: flex; + flex-wrap: wrap; + gap: var(--layout-gap); margin: 10px; } diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 3dbb880..d6298aa 100644 --- a/src/lib/components/ComfyApp.ts +++ b/src/lib/components/ComfyApp.ts @@ -30,6 +30,7 @@ export type SerializedPanes = { } export type SerializedAppState = { + createdBy: "ComfyBox", version: number, panes: SerializedPanes, workflow: SerializedLGraph diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..35c72e4 --- /dev/null +++ b/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); +} diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte index 26b5687..d75127c 100644 --- a/src/lib/widgets/ComboWidget.svelte +++ b/src/lib/widgets/ComboWidget.svelte @@ -1,23 +1,31 @@
{#if item} - +