Display mask on image upload

src/lib/components/ImageUpload.svelte

@@ -18,6 +18,7 @@
  export let elem_classes: string[] = []
  export let style: string = ""
  export let label: string = ""
+ export let mask: ComfyImageLocation | null;
  // let propsChanged: Writable<number> | null = null;
  let dragging = false;
  let pending_upload = false;
@@ -172,6 +173,15 @@
                      bind:naturalWidth={imgWidth}
                      bind:naturalHeight={imgHeight}
                 />
+                {#key mask}
+                    {#if mask}
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <img src={convertComfyOutputToComfyURL(mask)}
+                            alt={firstImage.filename}
+                            on:click={onImgClicked}
+                        />
+                    {/if}
+                {/key}
             {:else}
                 <Upload
                     file_count={fileCount}
@@ -201,6 +211,9 @@
      }
 
      img {
+         position: absolute;
+         top: 0;
+         left: 0;
          width: 100%;
          height: 100%;
          max-width: 100%;

src/lib/widgets/ImageUploadWidget.svelte

@@ -52,12 +52,19 @@
  };
 
  let hasImage = false;
-
  $: hasImage = $nodeValue && $nodeValue.length > 0;
  $: if (!hasImage) {
      editMask = false;
  }
 
+ let mask: ComfyImageLocation | null;
+ $: if (hasImage && canMask) {
+     mask = $nodeValue[0].children?.find(i => i.tags.includes("mask"))?.comfyUIFile;
+ }
+ else {
+     mask = null;
+ }
+
  const MASK_FILENAME: string = "ComfyBoxMask.png"
 
  async function onMaskReleased(e: CustomEvent<MaskCanvasData>) {
@@ -122,6 +129,7 @@
          // TODO other child image types preserved here?
          image.children = [];
      }
+     mask = null;
      if (maskCanvasComp) {
          maskCanvasComp.clearStrokes();
      }
@@ -232,6 +240,7 @@
                 <ImageUpload value={_value}
                              bind:imgWidth={$imgWidth}
                              bind:imgHeight={$imgHeight}
+                             {mask}
                              fileCount={"single"}
                              elem_classes={[]}
                              style={""}