From 00d7bbf42cc7efbeaf0c473c04193299941f5fec Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Thu, 25 May 2023 20:59:25 -0500 Subject: [PATCH] UI adjustments if template is built-in --- .gitignore | 1 + package.json | 1 + pnpm-lock.yaml | 57 +++++++++++++++---- src/lib/components/ComfyApp.ts | 4 ++ src/lib/components/ComfyTemplates.svelte | 6 +- src/lib/components/GlobalModal.svelte | 10 ++-- .../components/modal/EditTemplateModal.svelte | 10 +++- src/lib/stores/modalState.ts | 1 + vite.config.ts | 2 + 9 files changed, 72 insertions(+), 20 deletions(-) diff --git a/.gitignore b/.gitignore index 702a941..0482290 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ node_modules vite.config.js.timestamp-* vite.config.ts.timestamp-* /dist +/stats.html diff --git a/package.json b/package.json index 6ea0caf..16e1bc8 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8314f4f..b2f5c1f 100644 --- 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'} diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 10a89b8..1639d93 100644 --- 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(); } }); diff --git a/src/lib/components/ComfyTemplates.svelte b/src/lib/components/ComfyTemplates.svelte index f8f1d7e..5abf3f7 100644 --- 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; diff --git a/src/lib/components/GlobalModal.svelte b/src/lib/components/GlobalModal.svelte index 4a0262e..9bf1528 100644 --- 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 @@
{#if modal != null && modal.buttons?.length > 0} {#each modal.buttons as button} - + {#if !button.hidden} + + {/if} {/each} {/if} {#if modal.showCloseButton} diff --git a/src/lib/components/modal/EditTemplateModal.svelte b/src/lib/components/modal/EditTemplateModal.svelte index c36e36a..9979f22 100644 --- 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 @@ Metadata
- - - + + + diff --git a/src/lib/stores/modalState.ts b/src/lib/stores/modalState.ts index 116a3ce..504ee32 100644 --- 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 { diff --git a/vite.config.ts b/vite.config.ts index 97fb2bc..25f1aab 100644 --- 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: [ {