From 28c9e6ba5724087e5180ae968b193ab1aa5d1759 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 13 May 2023 23:05:54 -0500
Subject: [PATCH] Fix editor and consolidate file upload widget

---
 src/lib/components/ImageUpload.svelte       |   6 ++
 src/lib/components/Modal.svelte             |  33 +++---
 src/lib/components/NumberInput.svelte       | 110 ++++++++++++++++++++
 src/lib/components/gradio/app/Column.svelte |  58 +++++++++++
 src/lib/components/gradio/app/Row.svelte    |  60 +++++++++++
 src/lib/widgets/ImageEditorWidget.svelte    | 110 +++++++++++++++-----
 6 files changed, 341 insertions(+), 36 deletions(-)
 create mode 100644 src/lib/components/NumberInput.svelte
 create mode 100644 src/lib/components/gradio/app/Column.svelte
 create mode 100644 src/lib/components/gradio/app/Row.svelte

diff --git a/src/lib/components/ImageUpload.svelte b/src/lib/components/ImageUpload.svelte
index 14b2144..1eb2c7f 100644
--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -33,6 +33,7 @@
 		uploaded: ComfyImageLocation[];
 		upload_error: any;
 		clear: undefined;
+		image_clicked: undefined;
 	}>();
 
  if (value) {
@@ -58,6 +59,10 @@
      dispatch("clear")
  }
 
+ function onImgClicked() {
+     dispatch("image_clicked")
+ }
+
  interface GradioUploadResponse {
      error?: string;
      files?: Array<ComfyImageLocation>;
@@ -205,6 +210,7 @@
                 <ModifyUpload on:clear={handle_clear} absolute />
                 <img src={convertComfyOutputToComfyURL(firstImage)}
                      alt={firstImage.filename}
+                     on:click={onImgClicked}
                      bind:this={imgElem}
                      bind:naturalWidth={imgWidth}
                      bind:naturalHeight={imgHeight}
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 7f542d9..83200e0 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -4,7 +4,7 @@
 
 	export let showModal; // boolean
 	export let closeOnClick = true; // boolean
-	export let showCloseButton = true; // boolean
+    export const closeDialog = _ => doClose();
 
 	let dialog; // HTMLDialogElement
 
@@ -32,19 +32,21 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <dialog
-	bind:this={dialog}
-	on:close={close}
+    bind:this={dialog}
+    on:close={close}
     on:cancel={doClose}
-	on:click|self={close}
+    on:click|self={close}
 >
-	<div on:click|stopPropagation>
-		<slot name="header" />
-		<slot />
-		<!-- svelte-ignore a11y-autofocus -->
-        {#if showCloseButton}
-            <Button variant="secondary" on:click={doClose}>Close</Button>
-        {/if}
-	</div>
+    <div on:click|stopPropagation>
+        <slot name="header" />
+        <slot />
+        <div class="button-row">
+            <slot name="buttons">
+                <!-- svelte-ignore a11y-autofocus -->
+                <Button variant="secondary" on:click={doClose}>Close</Button>
+            </slot>
+        </div>
+    </div>
 </dialog>
 
 <style>
@@ -53,6 +55,7 @@
 		border-radius: 0.2em;
 		border: none;
 		padding: 0;
+        overflow: hidden;
 	}
 	dialog::backdrop {
 		background: rgba(0, 0, 0, 0.3);
@@ -85,4 +88,10 @@
 	button {
 		display: block;
 	}
+
+ .button-row {
+     display: flex;
+     flex-direction: row;
+     gap: var(--spacing-sm);
+ }
 </style>
diff --git a/src/lib/components/NumberInput.svelte b/src/lib/components/NumberInput.svelte
new file mode 100644
index 0000000..0a574c4
--- /dev/null
+++ b/src/lib/components/NumberInput.svelte
@@ -0,0 +1,110 @@
+
+<script lang="ts">
+	import { BlockTitle } from "@gradio/atoms";
+	import { createEventDispatcher } from "svelte";
+
+ export let value: number = 0;
+ export let min: number = -1024
+ export let max: number = 1024
+ export let step: number = 1;
+ export let label: string = "";
+ export let disabled: boolean = false;
+ let inputValue = value;
+
+ const dispatch = createEventDispatcher<{ change: number; release: number }>();
+
+ function handle_input(e: Event) {
+     const element = e.currentTarget as HTMLInputElement;
+     let newValue = parseFloat(element.value);
+     if (isNaN(newValue)) {
+         newValue = min;
+     }
+     inputValue = Math.min(Math.max(inputValue, min), max);
+     value = inputValue;
+     dispatch("release", value);
+ }
+
+ function handle_release(e: MouseEvent) {
+     dispatch("release", value);
+ }
+
+ $: {
+     inputValue = value;
+     dispatch("change", value);
+ }
+
+ const clamp = () => {
+     value = Math.min(Math.max(value, min), max);
+     dispatch("release", value);
+ };
+</script>
+
+<div class="wrap">
+    <div class="head">
+        <label>
+            <BlockTitle>{label}</BlockTitle>
+        </label>
+        <input
+            data-testid="number-input"
+            type="number"
+            bind:value={inputValue}
+            on:input={handle_input}
+            min={min}
+            max={max}
+            on:blur={clamp}
+            {step}
+            {disabled}
+            on:pointerup={handle_release}
+        />
+    </div>
+</div>
+
+<style lang="scss">
+ .wrap {
+     display: flex;
+     flex-direction: column;
+     width: 100%;
+     height: 100%;
+ }
+
+ .head {
+     display: flex;
+
+     > label {
+         padding: 0.5rem 1.0rem;
+     }
+ }
+ input[type="number"] {
+     display: block;
+     width: 100%;
+     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);
+     color: var(--body-text-color);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+     text-align: center;
+ }
+ input:disabled {
+     -webkit-text-fill-color: var(--body-text-color);
+     -webkit-opacity: 1;
+     opacity: 1;
+ }
+
+ input[type="number"]:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ input::placeholder {
+     color: var(--input-placeholder-color);
+ }
+
+ input[disabled] {
+     cursor: not-allowed;
+ }
+</style>
diff --git a/src/lib/components/gradio/app/Column.svelte b/src/lib/components/gradio/app/Column.svelte
new file mode 100644
index 0000000..77da7a1
--- /dev/null
+++ b/src/lib/components/gradio/app/Column.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { create_classes } from "@gradio/utils";
+	import type { Styles } from "@gradio/utils";
+
+	export let scale: number = 1;
+	export let min_width: number = 0;
+	export let elem_id: string = "";
+	export let elem_classes: Array<string> = [];
+	export let visible: boolean = true;
+	export let variant: "default" | "panel" | "compact" = "default";
+	export let style: Styles = {};
+</script>
+
+<div
+	id={elem_id}
+	class={elem_classes.join(" ")}
+	class:gap={style.gap !== false}
+	class:compact={variant === "compact"}
+	class:panel={variant === "panel"}
+	class:hide={!visible}
+	style={`min-width: min(${min_width}px, 100%); flex-grow: ${scale}`}
+>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+	}
+
+	div > :global(*),
+	div > :global(.form > *) {
+		width: var(--size-full);
+	}
+
+	.gap {
+		gap: var(--layout-gap);
+	}
+
+	.hide {
+		display: none;
+	}
+
+	.compact > :global(*),
+	.compact :global(.box) {
+		border-radius: 0;
+	}
+
+	.compact,
+	.panel {
+		border: solid var(--panel-border-width) var(--panel-border-color);
+		border-radius: var(--container-radius);
+		background: var(--panel-background-fill);
+		padding: var(--spacing-lg);
+	}
+</style>
diff --git a/src/lib/components/gradio/app/Row.svelte b/src/lib/components/gradio/app/Row.svelte
new file mode 100644
index 0000000..84a61fa
--- /dev/null
+++ b/src/lib/components/gradio/app/Row.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Styles } from "@gradio/utils";
+
+	export let style: Styles = {};
+	export let elem_id: string;
+	export let elem_classes: Array<string> = [];
+	export let visible: boolean = true;
+	export let variant: "default" | "panel" | "compact" = "default";
+    export let min_width: string = "160px";
+</script>
+
+<div
+	class:compact={variant === "compact"}
+	class:panel={variant === "panel"}
+	class:unequal-height={style.equal_height === false}
+	class:stretch={style.equal_height}
+	class:hide={!visible}
+	id={elem_id}
+	class={elem_classes.join(" ")}
+    style="--row-min-width: {min_width}"
+>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--layout-gap);
+		width: var(--size-full);
+	}
+
+	.hide {
+		display: none;
+	}
+	.compact > :global(*),
+	.compact :global(.box) {
+		border-radius: 0;
+	}
+	.compact,
+	.panel {
+		border-radius: var(--container-radius);
+		background: var(--background-fill-secondary);
+		padding: var(--size-2);
+	}
+	.unequal-height {
+		align-items: flex-start;
+	}
+
+	.stretch {
+		align-items: stretch;
+	}
+
+	div > :global(*),
+	div > :global(.form > *) {
+		flex: 1 1 0%;
+		flex-wrap: wrap;
+		min-width: min(--row-min-width, 100%);
+	}
+</style>
diff --git a/src/lib/widgets/ImageEditorWidget.svelte b/src/lib/widgets/ImageEditorWidget.svelte
index 3ea2cf7..e302a32 100644
--- a/src/lib/widgets/ImageEditorWidget.svelte
+++ b/src/lib/widgets/ImageEditorWidget.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
  import { type WidgetLayout } from "$lib/stores/layoutState";
- import { Block, BlockTitle } from "@gradio/atoms";
- import { get, type Writable, writable } from "svelte/store";
+ import { Block } from "@gradio/atoms";
+ import { TextBox } from "@gradio/form";
+ import Row from "$lib/components/gradio/app/Row.svelte";
+ import { get, type Writable } from "svelte/store";
  import Modal from "$lib/components/Modal.svelte";
  import { Button } from "@gradio/button";
- import type { ComfyImageEditorNode, ComfyImageLocation, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
- import { Embed as Klecks, KL, KlApp, klHistory, type KlAppOptionsEmbed } from "klecks";
+ import type { ComfyImageEditorNode, ComfyImageLocation } from "$lib/nodes/ComfyWidgetNodes";
+ import { Embed as Klecks } from "klecks";
 
  import "klecks/style/style.scss";
  import ImageUpload from "$lib/components/ImageUpload.svelte";
- import { uploadImageToComfyUI, type ComfyUploadImageAPIResponse, convertComfyOutputToComfyURL, type ComfyBoxImageMetadata, comfyFileToComfyBoxMetadata, comfyBoxImageToComfyURL, comfyBoxImageToComfyFile } from "$lib/utils";
+ import { uploadImageToComfyUI, type ComfyBoxImageMetadata, comfyFileToComfyBoxMetadata, comfyBoxImageToComfyURL, comfyBoxImageToComfyFile, type ComfyUploadImageType } from "$lib/utils";
  import notify from "$lib/notify";
+ import NumberInput from "$lib/components/NumberInput.svelte";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
@@ -40,6 +43,7 @@
          node = widget.node as ComfyImageEditorNode
          nodeValue = node.value;
          attrsChanged = widget.attrsChanged;
+         status = $nodeValue && $nodeValue.length > 0 ? "uploaded" : "empty"
      }
  };
 
@@ -67,7 +71,7 @@
      const ctx = canvas.getContext('2d');
      ctx.save();
      ctx.fillStyle = fill,
-     ctx.fillRect(0, 0, canvas.width, canvas.height);
+           ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.restore();
      return canvas;
  }
@@ -97,25 +101,45 @@
  }
 
  const FILENAME: string = "ComfyUITemp.png";
- // const SUBFOLDER: string = "ComfyBox_Editor";
+ const SUBFOLDER: string = "ComfyBox_Editor";
+ const DIRECTORY: ComfyUploadImageType = "input";
 
  async function submitKlecksToComfyUI(onSuccess: () => void, onError: () => void) {
      const blob = kl.getPNG();
 
-     await uploadImageToComfyUI(blob, FILENAME, "input")
+     status = "uploading"
+
+     await uploadImageToComfyUI(blob, FILENAME, DIRECTORY, SUBFOLDER)
          .then((entry: ComfyImageLocation) => {
              const meta: ComfyBoxImageMetadata = comfyFileToComfyBoxMetadata(entry);
              $nodeValue = [meta] // TODO more than one image
+             status = "uploaded"
              notify("Saved image to ComfyUI!", { type: "success" })
              onSuccess();
          })
          .catch(err => {
              notify(`Failed to upload image from editor: ${err}`, { type: "error", timeout: 10000 })
+             status = "error"
+             uploadError = err;
              $nodeValue = []
              onError();
          })
  }
 
+ let closeDialog = null;
+
+ async function saveAndClose() {
+     console.log(closeDialog, kl)
+     if (!closeDialog || !kl)
+         return;
+
+     submitKlecksToComfyUI(() => {}, () => {});
+     closeDialog()
+ }
+
+ let blankImageWidth = 512;
+ let blankImageHeight = 512;
+
  async function openImageEditor() {
      if (!editorRoot)
          return;
@@ -134,12 +158,12 @@
      console.warn("[ImageEditorWidget] OPENING", widget, $nodeValue)
 
      let canvas = null;
-     let width = 512;
-     let height = 512;
+     let width = blankImageWidth;
+     let height = blankImageHeight;
 
      if ($nodeValue && $nodeValue.length > 0) {
          const comfyImage = $nodeValue[0];
-         const comfyURL = convertComfyOutputToComfyURL(comfyImage);
+         const comfyURL = comfyBoxImageToComfyURL(comfyImage);
          [canvas, width, height] = await generateImageCanvas(comfyURL);
      }
      else {
@@ -162,7 +186,7 @@
      }, 1000);
  }
 
- let status = "none"
+ let status = "empty";
  let uploadError = null;
 
  function onUploading() {
@@ -181,14 +205,16 @@
  function onClear() {
      console.warn("CLEAR!!!")
      uploadError = null;
-     status = "none"
+     status = "empty"
+     $nodeValue = []
  }
 
  function onUploadError(e: CustomEvent<any>) {
      console.warn("ERROR!!!")
      status = "error"
      uploadError = e.detail
-     notify(`Failed to upload image to ComfyUI: ${err}`, { type: "error", timeout: 10000 })
+     $nodeValue = []
+     notify(`Failed to upload image to ComfyUI: ${uploadError}`, { type: "error", timeout: 10000 })
  }
 
  function onChange(e: CustomEvent<ComfyImageLocation[]>) {
@@ -200,7 +226,7 @@
  else
      _value = []
 
- $: canEdit = status === "none" || status === "uploaded";
+ $: canEdit = status === "empty" || status === "uploaded";
 </script>
 
 <div class="wrapper comfy-image-editor">
@@ -217,6 +243,7 @@
                      on:upload_error={onUploadError}
                      on:clear={onClear}
                      on:change={onChange}
+                     on:image_clicked={openImageEditor}
         />
     {:else}
         <div class="comfy-image-editor-panel">
@@ -232,24 +259,59 @@
                          on:upload_error={onUploadError}
                          on:clear={onClear}
                          on:change={onChange}
+                         on:image_clicked={openImageEditor}
             />
-            <Modal bind:showModal closeOnClick={false} on:close={disposeEditor}>
+            <Modal bind:showModal closeOnClick={false} on:close={disposeEditor} bind:closeDialog>
                 <div>
                     <div id="klecks-loading-screen">
                         <span id="klecks-loading-screen-text"></span>
                     </div>
                     <div class="image-editor-root" bind:this={editorRoot} />
                 </div>
+                <div slot="buttons">
+                    <Button variant="primary" on:click={saveAndClose}>
+                        Save and Close
+                    </Button>
+                    <Button variant="secondary" on:click={closeDialog}>
+                        Discard Edits
+                    </Button>
+                </div>
             </Modal>
             <Block>
-                <Button variant="primary" disabled={!canEdit} on:click={openImageEditor}>
-                    Edit Image
-                </Button>
-                <BlockTitle>Status: {status}</BlockTitle>
-                {#if uploadError}
-                    <div>
-                        Upload error: {uploadError}
-                    </div>
+                {#if !$nodeValue || $nodeValue.length === 0}
+                    <Row>
+                        <Row>
+                            <Button variant="secondary" disabled={!canEdit} on:click={openImageEditor}>
+                                Create Image
+                            </Button>
+                            <div>
+                                <TextBox show_label={false} disabled={true} value="Status: {status}"/>
+                            </div>
+                            {#if uploadError}
+                                <div>
+                                    Upload error: {uploadError}
+                                </div>
+                            {/if}
+                        </Row>
+                        <Row>
+                            <NumberInput label={"Width"} min={64} max={2048} step={64} bind:value={blankImageWidth} />
+                            <NumberInput label={"Height"} min={64} max={2048} step={64} bind:value={blankImageHeight} />
+                        </Row>
+                    </Row>
+                {:else}
+                    <Row>
+                        <Button variant="secondary" disabled={!canEdit} on:click={openImageEditor}>
+                            Edit Image
+                        </Button>
+                        <div>
+                            <TextBox show_label={false} disabled={true} value="Status: {status}"/>
+                        </div>
+                        {#if uploadError}
+                            <div>
+                                Upload error: {uploadError}
+                            </div>
+                        {/if}
+                    </Row>
                 {/if}
             </Block>
         </div>