UI adjustments if template is built-in

2023-05-25 20:59:25 -05:00
parent 5d45bb96b9
commit 00d7bbf42c
9 changed files with 72 additions and 20 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /dist
+/stats.html
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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'}
--- a/src/lib/components/ComfyApp.ts
+++ b/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();
            }
        });
--- a/src/lib/components/ComfyTemplates.svelte
+++ b/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;
--- a/src/lib/components/GlobalModal.svelte
+++ b/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}
+                    {#if !button.hidden}
                        <Button variant={button.variant} disabled={button.disabled} on:click={() => onButtonClicked(modal, button, closeDialog)}>
                            {button.name}
                        </Button>
+                    {/if}
                {/each}
            {/if}
            {#if modal.showCloseButton}
--- a/src/lib/components/modal/EditTemplateModal.svelte
+++ b/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="Author" disabled={!editable} 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="Name" disabled={!isEditable} bind:value={$state.name} lines={1} max_lines={1} />
+                        <Textbox label="Author" disabled={!isEditable} bind:value={$state.author} lines={1} max_lines={1} />
+                        <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} />
--- a/src/lib/stores/modalState.ts
+++ b/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 {
--- a/vite.config.ts
+++ b/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: [
                {