Skip to content

Commit 9b463d1

Browse files
diStyAppsdiStyApps
committed
fix toggle component
1 parent 20442f6 commit 9b463d1

File tree

7 files changed

+232
-21
lines changed

7 files changed

+232
-21
lines changed

‎flow/constants.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
from pathlib import Path
44
import re
55
APP_NAME = "Flow"
6-
APP_VERSION = "0.4.6"
6+
APP_VERSION = "0.4.7"
77
FLOWMSG = f"\033[38;5;129mFlow - {APP_VERSION}\033[0m"
88
APP_CONFIGS = []
99

‎flow/route_manager.py‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
# flow/route_manager.py
2-
31
from aiohttp import web
42
from pathlib import Path
53

‎pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[project]
22
name = "comfyui-disty-flow"
33
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."
4-
version = "0.4.6"
4+
version = "0.4.7"
55
license = {file = "LICENSE"}
66

77
[project.urls]

‎web/core/css/main.css‎

Lines changed: 178 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2279,4 +2279,181 @@ html:not(.css-loading) body {
22792279
padding: 10px;
22802280
border: 1px dashed var(--color-border);
22812281
background-color: var(--color-background-secondary);
2282-
} */
2282+
} */
2283+
2284+
.toggle-component-wrapper {
2285+
display: flex;
2286+
align-items: center;
2287+
/* margin: 0.5em; */
2288+
width: 100%;
2289+
background-color: var(--color-background-secondary);
2290+
margin-bottom: 0.5em;
2291+
/* padding: 6px 0; */
2292+
height: 100%;
2293+
}
2294+
2295+
.toggle-label-container {
2296+
display: flex;
2297+
align-items: center;
2298+
margin-left: 4px;
2299+
flex: 1;
2300+
min-width: 100px;
2301+
/* background: red; */
2302+
font-weight: bold;
2303+
2304+
2305+
}
2306+
2307+
.toggle-label-container img.toggle-icon {
2308+
width: 1em;
2309+
height: 1em;
2310+
/* margin-right: 0.5em; */
2311+
2312+
}
2313+
2314+
.toggle-label-container .toggle-label {
2315+
/* font-size: 1em; */
2316+
white-space: nowrap;
2317+
2318+
}
2319+
2320+
.toggle-component {
2321+
position: relative;
2322+
/* flex-shrink: 0; */
2323+
/* padding: 0; */
2324+
2325+
/* background: blue; */
2326+
display: flex;
2327+
height: 100%;
2328+
padding: 6px 0;
2329+
padding-left: 10px ;
2330+
2331+
2332+
2333+
}
2334+
.toggle-component:hover {
2335+
cursor: pointer;
2336+
background-color: var(--color-background);
2337+
}
2338+
.toggle, .toggle:before, .slot__label, .curtain {
2339+
transition-property: background-color, transform, visibility;
2340+
transition-duration: 0.25s;
2341+
transition-timing-function: ease-in, cubic-bezier(0.6,0.2,0.4,1.5), linear;
2342+
2343+
}
2344+
.toggle:before, .slot, .slot__label {
2345+
display: block;
2346+
2347+
}
2348+
.toggle:before, .curtain {
2349+
position: absolute;
2350+
2351+
}
2352+
2353+
.toggle:checked, .curtain {
2354+
2355+
}
2356+
2357+
.toggle:focus {
2358+
outline: transparent;
2359+
2360+
}
2361+
2362+
.toggle {
2363+
width: 0.9em;
2364+
height: 1em;
2365+
border-radius: 50%;
2366+
-webkit-appearance: none;
2367+
-moz-appearance: none;
2368+
appearance: none;
2369+
-webkit-tap-highlight-color: transparent;
2370+
vertical-align: middle;
2371+
/* margin-right: 0.15em; */
2372+
/* Start as a hollow circle to simulate no "O" when off */
2373+
background: transparent;
2374+
border: 0.25em solid var(--color-primary-text);
2375+
position: relative;
2376+
cursor: pointer;
2377+
user-select: none;
2378+
vertical-align: middle;
2379+
2380+
}
2381+
2382+
.toggle:before {
2383+
content: none;
2384+
}
2385+
2386+
.toggle:checked {
2387+
/* background: #2b7f3a; */
2388+
/* border-color: #2b7f3a; */
2389+
/* background: transparent; */
2390+
border-color: var(--color-button-secondary-text);
2391+
2392+
}
2393+
2394+
.slot {
2395+
display: inline-block;
2396+
vertical-align: middle;
2397+
font-size: 17px;
2398+
/* letter-spacing: 0.2em; */
2399+
line-height: 1em;
2400+
overflow: hidden;
2401+
height: 1em;
2402+
/* text-indent: -0.8em; */
2403+
/* -webkit-text-stroke: 0.03em #fff; */
2404+
user-select: none;
2405+
font-weight: bold;
2406+
padding-right: 6px;
2407+
color: var(--color-primary-text);
2408+
}
2409+
2410+
.slot__label {
2411+
transform-origin: 50% 0;
2412+
/* color: red; */
2413+
/* background: green; */
2414+
letter-spacing: 0.2em;
2415+
line-height: 0.8em;
2416+
overflow: hidden;
2417+
height: 1em;
2418+
text-indent: -0.8em;
2419+
2420+
2421+
}
2422+
2423+
.slot__label:nth-child(2) {
2424+
transform-origin: 50% 100%;
2425+
}
2426+
2427+
.toggle:checked ~ .slot .slot__label {
2428+
transform: translateY(-50%) scaleY(0);
2429+
color: var(--color-button-secondary-text);
2430+
2431+
}
2432+
2433+
.toggle:checked ~ .slot .slot__label:nth-child(2) {
2434+
transform: translateY(-100%) scaleY(1);
2435+
}
2436+
.curtain {
2437+
transform: scaleX(0);
2438+
transform-origin: 0 50%;
2439+
z-index: -1;
2440+
width: 100%;
2441+
height: 100%;
2442+
top: 0;
2443+
left: 0;
2444+
}
2445+
2446+
2447+
.toggle:checked ~ .curtain {
2448+
transform: scaleX(1);
2449+
}
2450+
2451+
@media (max-width: 600px) {
2452+
.toggle-component-wrapper {
2453+
max-width: 100%;
2454+
}
2455+
.toggle-label-container {
2456+
flex: none;
2457+
min-width: 80px;
2458+
}
2459+
}

‎web/core/js/common/components/ToggleComponent.js‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,36 +15,46 @@ class ToggleComponent {
1515
...config
1616
};
1717
this.workflow = workflow;
18-
this.value = this.config.defaultValue;
18+
this.value = typeof this.config.defaultValue === "boolean"
19+
? (this.config.defaultValue ? 1 : 0)
20+
: (this.config.defaultValue === "true" ? 1 : 0);
21+
22+
console.log("ToggleComponent", this.value, this.config.id, this.config.defaultValue);
1923

2024
this.buildUI();
2125
this.initializeUI();
2226
}
2327

2428
buildUI() {
29+
const toggleId = `${this.config.id}Toggle`;
30+
2531
const html = `
2632
<div class="toggle-component-wrapper">
2733
${this.config.labelPosition === 'left' ? this.getLabelHTML() : ''}
2834
<div class="toggle-component">
29-
<label class="toggle-switch">
30-
<input
31-
type="checkbox"
32-
id="${this.config.id}Toggle"
33-
class="toggle-input"
34-
${this.value ? 'checked' : ''}
35-
aria-checked="${this.value}"
36-
role="switch"
37-
>
38-
<span class="slider"></span>
35+
<input
36+
id="${toggleId}"
37+
class="toggle"
38+
type="checkbox"
39+
role="switch"
40+
name="toggle"
41+
value="on"
42+
${this.value ? 'checked' : ''}
43+
aria-checked="${this.value}"
44+
>
45+
<label for="${toggleId}" class="slot">
46+
<span class="slot__label">OFF</span>
47+
<span class="slot__label">ON</span>
3948
</label>
49+
<div class="curtain"></div>
4050
</div>
4151
${this.config.labelPosition === 'right' ? this.getLabelHTML() : ''}
4252
</div>
4353
`;
4454
this.container.innerHTML = html;
4555

46-
this.inputElement = document.getElementById(`${this.config.id}Toggle`);
47-
this.labelElement = this.container.querySelector('.toggle-label');
56+
this.inputElement = this.container.querySelector(`#${toggleId}`);
57+
this.labelElement = this.container.querySelector('.toggle-label-container');
4858

4959
this.attachEventListeners();
5060
}
@@ -65,7 +75,7 @@ class ToggleComponent {
6575
}
6676

6777
updateValue(newValue) {
68-
this.value = newValue;
78+
this.value = newValue ? 1 : 0;
6979
this.updateDisplay();
7080
this.updateExternalConfig();
7181
}
@@ -99,7 +109,6 @@ class ToggleComponent {
99109
target[pathParts[pathParts.length - 1]] = this.value;
100110
}
101111

102-
103112
attachEventListeners() {
104113
if (this.inputElement) {
105114
this.inputElement.addEventListener('change', (event) => {

‎web/core/js/common/scripts/templates.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -924,5 +924,32 @@ const componentTemplates = {
924924
}
925925
}
926926
},
927+
Toggle_ON : {
928+
type: 'component',
929+
nodeClass: null,
930+
component: {
931+
type: 'Toggle',
932+
params: {
933+
label: 'Prompt',
934+
defaultValue: true,
935+
nodePath: '{nodeId}.inputs.boolean',
936+
}
937+
}
938+
},
939+
940+
Toggle_OFF : {
941+
type: 'component',
942+
nodeClass: null,
943+
component: {
944+
type: 'toggle',
945+
params: {
946+
label: 'Toggle',
947+
defaultValue: false,
948+
nodePath: '{nodeId}.inputs.boolean',
949+
}
950+
}
951+
},
952+
927953
};
954+
928955
export { componentTemplates };

‎web/core/js/common/scripts/ui_utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const addWidgetMenuRight = (menuRight) => {
5353
const flowButton = createWidget({
5454
className: 'comfyui-button comfyui-menu-mobile-collapse primary',
5555
text: '',
56-
tooltip: 'Start Flow',
56+
tooltip: 'Launch Flow',
5757
includeIcon: true,
5858
svgMarkup: getFlowIcon(),
5959
});

0 commit comments

Comments
 (0)