Skip to content

Commit

Permalink
add improved canvas navigation
Browse files Browse the repository at this point in the history 
fix add lora temp
  • Loading branch information
@diStyApps
diStyApps committed Dec 11, 2024
1 parent 7c3c8dd commit 6d50a00
Show file tree
Hide file tree
Showing 20 changed files with 1,514 additions and 1,293 deletions.
2 changes: 1 addition & 1 deletion __init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
NODE_DISPLAY_NAME_MAPPINGS: Dict[str, str] = {}
APP_CONFIGS: List[AppConfig] = []
APP_NAME: str = "Flow"
APP_VERSION: str = "0.4.3"
APP_VERSION: str = "0.4.4"
PURPLE = "\033[38;5;129m"
RESET = "\033[0m"
FLOWMSG = f"{PURPLE}Flow{RESET}"
Expand Down
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[project]
name = "comfyui-disty-flow"
description = "Flow is a custom node designed to provide a more user-friendly interface for ComfyUI by acting as an alternative user interface for running workflows. It is not a replacement for workflow creation.\nFlow is currently in the early stages of development, so expect bugs and ongoing feature enhancements. With your support and feedback, Flow will settle into a steady stream."
version = "0.4.3"
version = "0.4.4"
license = {file = "LICENSE"}

[project.urls]
Expand Down
218 changes: 153 additions & 65 deletions web/core/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
--color-button-primary-text: #f4b6ff;
--color-button-primary-text-hover: #131312;
--color-button-primary-active: #8621b7;
--color-button-primary-active-strong: #c96af8;

--color-button-primary-text-active: #8621b7;
--color-button-secondary: #131312;
--color-button-secondary-hover: #8621b7;
Expand Down Expand Up @@ -702,7 +704,16 @@ input[type="number"] {
border-bottom: 1px solid var(--color-border);
}


.dropdown-stepper-container {
display: flex;
flex-direction: column;
background-color: var(--color-background-secondary);
color: var(--color-primary-text);
width: 100%;
margin-bottom: 4px;
padding: 5px;
font-weight: bold;
}
select {
width: 100%;
padding: 8px;
Expand Down Expand Up @@ -806,7 +817,7 @@ button {
border: none;
background-color: var(--color-background-secondary);
font-size: 1.2em;
color: var(--color-secondary);
color: var(--color-button-secondary-text);
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
Expand Down Expand Up @@ -1857,6 +1868,7 @@ html:not(.css-loading) body {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 6px;

border: 1px dashed var(--color-border);
}
Expand Down Expand Up @@ -1886,7 +1898,7 @@ html:not(.css-loading) body {
display: none;
}
.cbp-brush-ui-content {
padding: 10px;
padding:10px 0 ;
display: flex;
flex-direction: column;
gap: 10px;
Expand Down Expand Up @@ -2014,46 +2026,106 @@ html:not(.css-loading) body {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mbp-container {
/* --mbp-primary: var(--color-button-primary);
--mbp-primary-hover: var(--color-button-primary-hover);
--mbp-bg: var(--color-background-secondary);
--mbp-border: var(--color-border);
--mbp-text: var(--color-primary-text);
--mbp-icon: var(--color-primary); */
padding: 0.5rem;
/* --mbp-primary: var(--color-button-primary);
--mbp-primary-hover: var(--color-button-primary-hover);
--mbp-bg: var(--color-background-secondary);
--mbp-border: var(--color-border);
--mbp-text: var(--color-primary-text);
--mbp-icon: var(--color-primary); */
padding: 1rem;
}
.mbp-config-section {
/* padding: 0.5rem; */
/* border: solid 1px var(--color-button-primary-hover); */
/* background-color: var(--color-background-secondary); */

}

.mbp-config-item-buttons-group{
/* background: red; */
display: flex;
align-items: center;
flex-direction: row;
color: var(--color-button-secondary-text);

}
.mbp-config-item {
display: flex;
align-items: center;
/* flex-direction: column; */
justify-content: space-between;
margin-bottom: 10px;
/* border: 1px dashed var(--color-border); */
padding: 2px;
background-color: var(--color-background-secondary);
width: 100%;
border: none;

}
.mbp-config-item #DecrementButton,.mbp-config-item #IncrementButton{
/* background-color: #570d7b; */
flex: 1;
color: var(--color-button-secondary-text);
}
.mbp-config-item-saving {
display: flex;
align-items: center;
flex-direction: column;
border: none;

}

.mbp-config-item-saving label {
margin-bottom: 0.3rem;

}
.mbp-config-item .maskConfigInput{
/* background-color: #570d7b; */
width: 100%;
flex: 2;
text-align: center;
border: none;

}
.mbp-config-item-label{
margin: 0 6px;
}
.mbp-header {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}

.mbp-header .mbp-select {
flex: 1;
flex: 1;
}

.mbp-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border: 1px solid var(--mbp-border);
background: var(--color-button-primary) ;
/* border-radius: 0.375rem; */
cursor: pointer;
transition: all 0.2s;
color: var(--mbp-icon);
min-width: 36px;
height: 36px;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
/* border: 1px solid var(--mbp-border); */
background: var(--color-button-primary) ;
cursor: pointer;
transition: all 0.2s;
color: var(--color-button-secondary-text);
min-width: 36px;
height: 36px;
width: 100%;
}
.mbp-button.active {
border: dashed 1px var(--color-button-primary-text);
}

.mbp-button:hover {
background: var(--color-button-primary-hover);
color: var(--mbp-primary);
background: var(--color-button-primary-hover);
color: var(--mbp-primary);
}
#saveMaskBtn{

}

.mbp-button svg {
Expand All @@ -2080,23 +2152,24 @@ html:not(.css-loading) body {
}

.mbp-select {
padding: 0.5rem;
border: none;
background: var(--color-background);
color: var(--mbp-text);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1.25rem;
padding-right: 2.5rem;
height: 36px;
outline: none;
padding: 0.5rem;
background: var(--color-background);
color: var(--mbp-text);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1.25rem;
padding-right: 2.5rem;
height: 36px;
outline: none;
border: none;

}
.mbp-select:hover {
/* background: var(--color-button-primary-hover); */
border-top: solid 1px var(--color-button-primary-hover);
/* background: var(--color-button-primary-hover); */
/* border-top: solid 1px var(--color-button-primary-hover); */
}

.mbp-button-group {
Expand All @@ -2110,24 +2183,29 @@ html:not(.css-loading) body {
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
border: 1px dashed var(--color-border);
/* border: 1px dashed var(--color-border); */
padding: 2px;
background: var(--color-background-secondary);

}

.mbp-toggle {
position: relative;
display: inline-block;
width: 40px;
height: 100%;
border-left: 1px dashed var(--color-border);
/* border: 1px solid var(--color-border); */
background: var(--color-background-secondary);
align-items: center;


padding: 5px;
}

.mbp-toggle input {
opacity: 0;
width: 0;
height: 0;
}

.mbp-toggle-slider {
position: absolute;
cursor: pointer;
Expand All @@ -2139,56 +2217,66 @@ html:not(.css-loading) body {
/* background-color: var(--color-background-secondary); */
transition: .4s;
}

.mbp-toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 2px;
bottom: 0px;
left: -2px;
bottom: 5px;
background-color: var(--color-button-secondary);
transition: .4s;
}

.mbp-toggle-slider:after {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 2px;
bottom: 0px;
left: -2px;
bottom: 5px;
background-color: var(--color-button-primary);
transition: .4s;
border-radius: 45px;

}

.mbp-toggle input:checked + .mbp-toggle-slider {
/* background-color: var(--color-button-secondary-active); */

}

.mbp-toggle input:checked + .mbp-toggle-slider:before {
transform: translateX(20px);
}


.mbp-toggle input:checked + .mbp-toggle-slider:after {
transform: translateX(20px);
background-color: var(--color-button-secondary-active);

background-color: var(--color-button-primary-text);
}
.mbp-label {
font-size: 0.75rem;
color: var(--mbp-text);
user-select: none;
padding: 0 6px;
/* font-size: 0.75rem; */
color: var(--mbp-text);
user-select: none;
padding: 0 6px;
}

.mbp-button-group {
display: flex;
gap: 0.5rem;
margin: 0.75rem 0;

display: flex;
gap: 0.5rem;
margin: 0.75rem 0;
}


.upper-canvas, .lower-canvas {
pointer-events: auto !important;
}

/* .mbp-config-section{
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
border: 1px dashed var(--color-border);
background-color: var(--color-background-secondary);
} */
3 changes: 2 additions & 1 deletion web/core/js/common/components/DataComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { store } from '../scripts/stateManagerMain.js';
import { updateWorkflow } from './workflowManager.js';

function getNestedValue(obj, path) {
// console.log('getNestedValue', obj, path);
return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined) ? acc[key] : undefined, obj);
}

Expand All @@ -25,7 +26,7 @@ class DataComponent {
const data = getNestedValue(state, this.dataPath);

if (data === undefined) {
console.warn(`DataComponent [${this.id}]: No data found at path "${this.dataPath}" in the store.`);
// console.warn(`DataComponent [${this.id}]: No data found at path "${this.dataPath}" in the store.`);
return;
}

Expand Down
Loading

0 comments on commit 6d50a00

Please sign in to comment.