UI adjustments if template is built-in

.gitignore

@@ -9,3 +9,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /dist
+/stats.html

package.json

@@ -28,6 +28,7 @@
     "jsdom": "^22.0.0",
     "prettier": "^2.8.7",
     "prettier-plugin-svelte": "^2.10.0",
+    "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.61.0",
     "svelte": "^3.58.0",
     "svelte-check": "^3.2.0",

pnpm-lock.yaml

@@ -97,9 +97,6 @@ importers:
       '@types/dompurify':
         specifier: ^3.0.2
         version: 3.0.2
-      '@zerodevx/svelte-json-view':
-        specifier: ^1.0.5
-        version: 1.0.5(svelte@3.58.0)
       canvas-to-svg:
         specifier: ^1.0.3
         version: 1.0.3
@@ -212,6 +209,9 @@ importers:
       prettier-plugin-svelte:
         specifier: ^2.10.0
         version: 2.10.0(prettier@2.8.7)(svelte@3.58.0)
+      rollup-plugin-visualizer:
+        specifier: ^5.9.0
+        version: 5.9.0
       sass:
         specifier: ^1.61.0
         version: 1.61.0
@@ -3455,14 +3455,6 @@ packages:
       pretty-format: 27.5.1
     dev: false
 
-  /@zerodevx/svelte-json-view@1.0.5(svelte@3.58.0):
-    resolution: {integrity: sha512-oQDI9v0dJEte6PYVDVjLOjU58AOoWLYRXjghKggFpZXrglWJJqoMeDe14Jrd0cs6NPcPogT/aR/LtkuW2Z1GkQ==}
-    peerDependencies:
-      svelte: ^3.55.1
-    dependencies:
-      svelte: 3.58.0
-    dev: false
-
   /@zerodevx/svelte-toast@0.9.3(svelte@3.58.0):
     resolution: {integrity: sha512-VPKWR4A9y01fyXRscu9HiTj7tV2hFrpRKZvGwMmaPXfHIXR1D9+NNsz0HXcQ7qZ0C5UaHS3n9uNtPtIcAXT7RQ==}
     peerDependencies:
@@ -4487,6 +4479,11 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  /define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+    dev: true
+
   /delaunator@5.0.0:
     resolution: {integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==}
     dependencies:
@@ -5806,6 +5803,12 @@ packages:
     dependencies:
       has: 1.0.3
 
+  /is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dev: true
+
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -5852,6 +5855,13 @@ packages:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
     dev: false
 
+  /is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+    dev: true
+
   /isarray@0.0.1:
     resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
     dev: false
@@ -7065,6 +7075,15 @@ packages:
       mimic-fn: 2.1.0
     dev: true
 
+  /open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
   /optionator@0.9.1:
     resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
     engines: {node: '>= 0.8.0'}
@@ -7656,6 +7675,22 @@ packages:
     resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==}
     dev: false
 
+  /rollup-plugin-visualizer@5.9.0:
+    resolution: {integrity: sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      source-map: 0.7.4
+      yargs: 17.7.1
+    dev: true
+
   /rollup@2.79.1:
     resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
     engines: {node: '>=10.0.0'}

src/lib/components/ComfyApp.ts

@@ -307,6 +307,8 @@ export default class ComfyApp {
             if (errors && errors.length > 0)
                 error = "Error(s) loading builtin templates:\n" + errors.join("\n");
 
+            console.log(`Loaded {templates.length} builtin templates.`);
+
             return [templates, error]
         })
 
@@ -651,10 +653,12 @@ export default class ComfyApp {
             // Queue prompt using ctrl or command + enter
             if ((e.ctrlKey || e.metaKey) && (e.key === "Enter" || e.code === "Enter" || e.keyCode === 10)) {
                 e.preventDefault();
+                e.stopImmediatePropagation();
                 this.runDefaultQueueAction();
             }
             else if ((e.ctrlKey) && (e.key === "s" || e.code === "KeyS")) {
                 e.preventDefault();
+                e.stopImmediatePropagation();
                 this.saveStateToLocalStorage();
             }
         });

src/lib/components/ComfyTemplates.svelte

@@ -146,7 +146,8 @@
              {
                  name: "Save",
                  variant: "primary",
-                 onClick: saveTemplate
+                 onClick: saveTemplate,
+                 hidden: layout.template.isBuiltIn
              },
              {
                  name: "Download",
@@ -158,7 +159,7 @@
                  name: "Delete",
                  variant: "secondary",
                  onClick: deleteTemplate,
-                 disabled: layout.template.isBuiltIn
+                 hidden: layout.template.isBuiltIn
              },
              {
                  name: "Close",
@@ -250,6 +251,7 @@
  }
 
  .template-entry {
+     min-width: 12rem;
      padding: 1.0rem;
      display: flex;
      flex-direction: column;

src/lib/components/GlobalModal.svelte

@@ -13,7 +13,7 @@
  }
 
  function onButtonClicked(modal: ModalData, button: ModalButton, closeDialog: Function) {
-     if (button.disabled)
+     if (button.disabled || button.hidden)
          return;
 
      if (button.onClick(modal) === false)
@@ -42,9 +42,11 @@
         <div slot="buttons" class="buttons" let:closeDialog>
             {#if modal != null && modal.buttons?.length > 0}
                 {#each modal.buttons as button}
-                    <Button variant={button.variant} disabled={button.disabled} on:click={() => onButtonClicked(modal, button, closeDialog)}>
+                    {#if !button.hidden}
-                        {button.name}
+                        <Button variant={button.variant} disabled={button.disabled} on:click={() => onButtonClicked(modal, button, closeDialog)}>
-                    </Button>
+                            {button.name}
+                        </Button>
+                    {/if}
                 {/each}
             {/if}
             {#if modal.showCloseButton}

src/lib/components/modal/EditTemplateModal.svelte

@@ -27,6 +27,10 @@
  let showAllJSON: number = 0;
  let createdAt = "";
 
+ let isEditable = true;
+
+ $: isEditable = editable && templateAndSvg && !templateAndSvg.isBuiltIn;
+
  $: {
      rawTemplate = { ...templateAndSvg };
      rawTemplate.svg = undefined;
@@ -100,9 +104,9 @@
                 <Block>
                     <BlockTitle>Metadata</BlockTitle>
                     <div>
-                        <Textbox label="Name" disabled={!editable} bind:value={$state.name} lines={1} max_lines={1} />
+                        <Textbox label="Name" disabled={!isEditable} bind:value={$state.name} lines={1} max_lines={1} />
-                        <Textbox label="Author" disabled={!editable} bind:value={$state.author} lines={1} max_lines={1} />
+                        <Textbox label="Author" disabled={!isEditable} bind:value={$state.author} lines={1} max_lines={1} />
-                        <Textbox label="Description" disabled={!editable} bind:value={$state.description} lines={5} max_lines={5} />
+                        <Textbox label="Description" disabled={!isEditable} bind:value={$state.description} lines={5} max_lines={5} />
                         <Row>
                             <Textbox label="Created At" disabled={true} bind:value={createdAt} lines={1} max_lines={1} />
                             <Textbox label="Size" disabled={true} value="{(templateAndSvg.svg.length/1024).toFixed(2)} KB" lines={1} max_lines={1} />

src/lib/stores/modalState.ts

@@ -9,6 +9,7 @@ export type ModalButton = {
     variant: "primary" | "secondary",
     onClick: (state: ModalData) => boolean | void,
     disabled?: boolean,
+    hidden?: boolean,
     closeOnClick?: boolean
 }
 export interface ModalData {

vite.config.ts

@@ -7,6 +7,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
 import removeConsole from 'vite-plugin-svelte-console-remover';
 import glsl from 'vite-plugin-glsl';
 import { execSync } from "child_process"
+import { visualizer } from "rollup-plugin-visualizer";
 
 const isProduction = process.env.NODE_ENV === "production";
 console.log("Production build: " + isProduction)
@@ -30,6 +31,7 @@ export default defineConfig({
         isProduction && removeConsole(),
         glsl(),
         svelte(),
+        visualizer(),
         viteStaticCopy({
             targets: [
                 {