JaredTherriault
7ceb555e56
-ImageDrawer (image feed, lora picker, image history, etc) -EditAttention improvements -Status indicators (percentage in title, favicon, progress bar on floating menu) -Font control for textareas -Token count node -png_info manipulation nodes -Synced string literals with external text files -Parameter lists -Save Video improvements over VHS -Custom modal to replace lightbox -Mouse over images to see exif/png_info -Yet another dynamic prompts implementation with randomization controls -Yet another Wildcards implementation -Commenting out prompts support (just add # before each line you want to be ignored or encapsulate specific text on a line with ## on either side "## Commented text ##") built into Wildcards node, will be separated next time -Prompt Editor (search and replace text in any text, intended for prompts to change certain trigger words, for example an embedding named '3mb3dd1n4' can be changed to 'embedding') -Selector nodes that can be randomized based on seed (e.g. to select a random checkpoint name) -Get Temp Directory, Get Output Directory
159 lines
3.4 KiB
JavaScript
159 lines
3.4 KiB
JavaScript
import { $el } from "/scripts/ui.js";
|
|
|
|
$el("style", {
|
|
textContent: `
|
|
.JNodes-image-drawer--top, .JNodes-image-drawer--bottom {
|
|
width: 100vw;
|
|
min-height: 0px;
|
|
max-height: calc(var(--max-size, 20) * 1vh);
|
|
}
|
|
.JNodes-image-drawer--top {
|
|
top: 0;
|
|
}
|
|
.JNodes-image-drawer--bottom {
|
|
bottom: 0;
|
|
flex-direction: column-reverse;
|
|
padding-top: 1px;
|
|
}
|
|
.JNodes-image-drawer--left, .JNodes-image-drawer--right {
|
|
top: 0;
|
|
height: 100vh;
|
|
min-width: 100px;
|
|
max-width: calc(var(--max-size, 10) * 1vw);
|
|
}
|
|
.JNodes-image-drawer--left {
|
|
left: 0;
|
|
}
|
|
.JNodes-image-drawer--right {
|
|
right: 0;
|
|
}
|
|
|
|
.JNodes-image-drawer--left .JNodes-image-drawer-menu, .JNodes-image-drawer--right .JNodes-image-drawer-menu {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.JNodes-image-drawer-btn {
|
|
background-color:var(--comfy-input-bg);
|
|
border-radius:5px;
|
|
border:2px solid var(--border-color);
|
|
color: var(--fg-color);
|
|
cursor:pointer;
|
|
display:inline-block;
|
|
flex: 0 1 fit-content;
|
|
text-decoration:none;
|
|
}
|
|
.JNodes-image-drawer-btn.sizing-btn:checked {
|
|
filter: invert();
|
|
}
|
|
.JNodes-image-drawer-btn:hover {
|
|
filter: brightness(1.2);
|
|
}
|
|
.JNodes-image-drawer-btn:active {
|
|
position:relative;
|
|
top:1px;
|
|
}
|
|
|
|
.JNodes-image-drawer-menu section {
|
|
border-radius: 5px;
|
|
background: rgba(0,0,0,0.6);
|
|
padding: 0 5px;
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.JNodes-image-drawer-menu section span {
|
|
white-space: nowrap;
|
|
width: 100px;
|
|
}
|
|
.JNodes-image-drawer-menu section input {
|
|
flex: 1 1 100%;
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
}
|
|
|
|
.sizing-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.size-controls-flyout {
|
|
position: absolute;
|
|
transform: scaleX(0%);
|
|
transition: 200ms ease-out;
|
|
transition-delay: 500ms;
|
|
z-index: 102;
|
|
width: 300px;
|
|
}
|
|
|
|
.sizing-menu:hover .size-controls-flyout {
|
|
transform: scale(1, 1);
|
|
transition: 200ms linear;
|
|
transition-delay: 0;
|
|
}
|
|
.JNodes-image-drawer--bottom .size-controls-flyout {
|
|
transform: scale(1,0);
|
|
transform-origin: bottom;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.JNodes-image-drawer--top .size-controls-flyout {
|
|
transform: scale(1,0);
|
|
transform-origin: top;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.JNodes-image-drawer--left .size-controls-flyout {
|
|
transform: scale(0, 1);
|
|
transform-origin: left;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.JNodes-image-drawer--right .size-controls-flyout {
|
|
transform: scale(0, 1);
|
|
transform-origin: right;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.JNodes-image-drawer-list {
|
|
flex: 1 1 auto;
|
|
overflow-y: scroll;
|
|
display: grid;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
grid-auto-rows: min-content;
|
|
grid-template-columns: repeat(var(--img-sz, 3), 1fr);
|
|
transition: 100ms linear;
|
|
scrollbar-gutter: stable both-edges;
|
|
padding: 5px;
|
|
background: var(--comfy-input-bg);
|
|
border-radius: 5px;
|
|
margin: 5px;
|
|
margin-top: 0px;
|
|
}
|
|
.JNodes-image-drawer-list:empty {
|
|
display: none;
|
|
}
|
|
.JNodes-image-drawer-list::-webkit-scrollbar {
|
|
background: var(--comfy-input-bg);
|
|
border-radius: 5px;
|
|
}
|
|
.JNodes-image-drawer-list::-webkit-scrollbar-thumb {
|
|
background:var(--comfy-menu-bg);
|
|
border: 5px solid transparent;
|
|
border-radius: 8px;
|
|
background-clip: content-box;
|
|
color: rgb(255,255,255);
|
|
}
|
|
.JNodes-image-drawer-list::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-color);
|
|
background-clip: content-box;
|
|
}
|
|
.JNodes-image-drawer-list div:hover {
|
|
filter: brightness(1.05);
|
|
}`,
|
|
parent: document.body,
|
|
});
|