Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-01 19:51:54 +00:00
Code Issues Packages Projects Releases Wiki Activity
5,566 Commits 1,235 Branches 634 Tags
9350c857a24f634244aac26682d48bd344436fd3
Commit Graph

9 Commits

Author SHA1 Message Date
Christian Byrne
9350c857a2 style: use "text-button-icon" token for dropdown icons on Vue nodes (#6284) 
## Summary

Change these dropdown icons to match [the
design](https://www.figma.com/design/31uH3r4x3xbIctuRWYW6NM/V3---Vue-Nodes?node-id=6189-6820&m=dev).

**Before**

<img width="692" height="694" alt="Selection_2196"
src="https://github.com/user-attachments/assets/aa1fb135-0ad0-4ab6-8c79-7163349b5fae"
/>

**After**

<img width="600" height="602" alt="Selection_2195"
src="https://github.com/user-attachments/assets/742ddef4-4b51-48ba-98a0-9517267de0e1"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6284-style-use-text-button-icon-token-for-dropdown-icons-on-Vue-nodes-2976d73d365081d29d2aee51e836caaf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-25 22:36:01 -07:00
Christian Byrne
d54923f766 fix FLOAT widget incrementing broken & disabled state styles on widget number input (Vue) (#6036) 
## Summary

Align Vue node number widgets with Figma by centralising button styling
and surfacing disabled-state tokens in the design system.

## Changes

- **What**: Added shared
[`useNumberWidgetButtonPt`](src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts)
helper so both PrimeVue `InputNumber` widgets reuse the same Tailwind
token classes, and added the `color/tokens/alpha` values in
[`packages/design-system/src/css/style.css`](packages/design-system/src/css/style.css#L89-L212)
so semantic aliases remain token-driven ([PrimeVue passthrough
docs](https://www.primefaces.org/primevue/passthrough) w
[`color-mix`](https://www.w3.org/TR/css-color-5/#color-mix))

## Review Focus

Confirm hover/active/disabled colours match the design tokens in both
light and dark themes and that float precision still respects the
safe-range guard.

<img width="1377" height="1150" alt="Screenshot from 2025-10-12
17-53-23"
src="https://github.com/user-attachments/assets/c7d34870-5d07-4ce1-9272-7def7ae813b6"
/>

<img width="1377" height="1150" alt="Screenshot from 2025-10-12
17-53-32"
src="https://github.com/user-attachments/assets/86872ec8-979b-4586-879c-41a126a5f932"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6036-fix-disabled-state-styles-on-Vue-widget-number-input-INT-and-FLOAT-widgets-28b6d73d365081f8aef7fa860b641f7d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-12 23:34:08 -07:00
Christian Byrne
31c85387ba [style] match widget border/outline styles with designs (#6021) 
## Summary

Use semantic color variables from
https://github.com/Comfy-Org/ComfyUI_frontend/pull/6018 on widget
borders to match
[design](https://www.figma.com/design/vALUV83vIdBzEsTJAhQgXq/Comfy-Design-System?node-id=2-5739&m=dev)

The layouting of the widgets doesn't align yet, but it's somewhat
annoying to change the `WidgetSelect` height without using line height.
But, the gap should be 4 (16px) instead of 2, the height of the rows
should be 35px instead of 30px and the widgets should be 32px instead of
30px.

## Before

<img width="2061" height="1386" alt="Screenshot from 2025-10-11
12-23-24"
src="https://github.com/user-attachments/assets/5aa7ba1e-9309-4bd5-95b4-8d8e3d95b50b"
/>

<img width="2061" height="1386" alt="Screenshot from 2025-10-11
12-23-16"
src="https://github.com/user-attachments/assets/9dbabd1b-2174-4dfd-83c2-fef8178c7206"
/>

## After

<img width="2061" height="1386" alt="Screenshot from 2025-10-11
12-23-06"
src="https://github.com/user-attachments/assets/d0b0a611-e65b-462f-ad94-c42639502951"
/>

<img width="2061" height="1386" alt="Screenshot from 2025-10-11
12-22-57"
src="https://github.com/user-attachments/assets/64fb42c8-3d9a-4a2b-956f-482fcd63b64c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6021-style-match-widget-border-outline-styles-with-designs-2896d73d365081d18dd9cca41cc2b95e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-12 00:32:51 -07:00
Christian Byrne
06b0eecfe4 fix Vue node widgets should be in disabled state if their slots are connected with a link (#5834) 
## Summary

Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5692 by
making widget link connection status trigger on change so Vue widgets
with connected links could properly switch to the `disabled` state when
they are implicitly converted to inputs.

## Changes

- **What**: Added `node:slot-links:changed` event tracking and reactive
slot data synchronization for Vue widgets

```mermaid
graph TD
    A[Widget Link Change] --> B[NodeInputSlot.link setter]
    B --> C{Is Widget Input?}
    C -->|Yes| D[Trigger slot-links:changed]
    C -->|No| E[End]
    D --> F[Graph Event Handler]
    F --> G[syncNodeSlotData]
    G --> H[Update Vue Reactive Data]
    H --> I[Widget Re-render]
    
    style A fill:#f9f9f9,stroke:#333,color:#000
    style I fill:#f9f9f9,stroke:#333,color:#000
```

## Review Focus

Widget reactivity performance with frequent link changes and event
handler memory management in graph operations.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5834-fix-Vue-node-widgets-should-be-in-disabled-state-if-their-slots-are-connected-with-a-link-27c6d73d365081f6a6c3c1ddc3905c5e)
by [Unito](https://www.unito.io)
 2025-10-09 10:30:12 -07:00
Alexander Brown
37fab21daf Cleanup: YAGNI readonly props, private swap on ComfyApp, Canvas resize events simplification, v-memos on individual instances (#5869) 
## Summary

Assorted cleanup opportunities found while working through the Vue node
rendering logic cleanup.

## Review Focus

Am I wrong that the readonly logic was never actually executing because
it was defined as False in GraphCanvas when making each LGraphNode?

Is there an edge case or some other reason that the ResizeObserver
wouldn't work as a single signal to resize the canvas?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5869-Cleanup-YAGNI-readonly-props-private-swap-on-ComfyApp-Canvas-resize-events-simplificat-27e6d73d3650811ba1dcf29e8d43091e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-02 10:35:10 -07:00
Christian Byrne
75d31f9d57 fix large integer precision handling in Vue int widgets (#5787) 
## Summary

Fixed increment/decrement button lockup in number widgets when values
exceed JavaScript's safe integer limit (2^53 - 1).

## Changes

- **What**: Added precision-aware button disabling and user feedback to
`WidgetInputNumberInput` component using
[Number.isSafeInteger()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger)
- We still need to support values greater than 2^53 because they may be
in workflows.

## Review Focus

JavaScript floating-point precision behavior at scale - buttons hide
when arithmetic operations like `value + 1` would be unreliable due to
IEEE 754 limitations. Test coverage includes edge cases (NaN, Infinity)
and boundary conditions at MAX_SAFE_INTEGER.

```mermaid
graph TD
    A[User Input] --> B{Value > 2^53?}
    B -->|No| C[Show Buttons]
    B -->|Yes| D[Hide Buttons]
    D --> E[Show Tooltip]
    E --> F[User Can Still Type]
    
    style A fill:#f9f9f9,stroke:#333,color:#000
    style F fill:#f9f9f9,stroke:#333,color:#000
```

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5787-fix-large-integer-precision-handling-in-Vue-int-widgets-27a6d73d365081d9ae00e485740cfafb)
by [Unito](https://www.unito.io)
 2025-09-26 18:11:41 -07:00
Christian Byrne
ac93a6ba3f Disable number grouping (thousands comma separators) by default in Vue node number widgets (#5776) 
## Summary

Makes the
[useGrouping](https://primevue.org/inputnumber/#api.inputnumber.props.useGrouping)
prop for number widgets disabled by default, aligning with the old UI
(also requested via design). Node authors can still enable if they want
by setting prop explicitly.

## Changes

- **What**: Modified
[WidgetInputNumberInput](https://primevue.org/inputnumber/) to disable
`useGrouping` by default, requiring explicit opt-in via widget options
- **Testing**: Added component tests covering value binding, component
rendering, step calculations, and grouping behavior

## Review Focus

UX impact on existing nodes that may have relied on default grouping
behavior and test coverage for edge cases with precision calculations.

## Screenshots (if applicable)

*Before*:

<img width="1685" height="879" alt="Screenshot from 2025-09-25 11-34-34"
src="https://github.com/user-attachments/assets/432097ab-203d-4f86-8ca0-721b27ee33de"
/>

*After*:

<img width="1951" height="1175" alt="Screenshot from 2025-09-25
11-35-27"
src="https://github.com/user-attachments/assets/74d35b62-612e-4dbf-b6e2-0ac17af03ea1"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5776-Disable-number-grouping-thousands-comma-separators-by-default-in-Vue-node-number-widget-2796d73d365081369ca6c155335d0d57)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <448862+DrJKL@users.noreply.github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
 2025-09-25 17:46:46 -07:00
Alexander Brown
08220d50d9 Lint: Turn on rules that should allow for verbatimModuleSyntax (#5616) 
* lint: turn on type import rules setting up for verbatimModuleSyntax

* lint: --fix for type imports
 2025-09-16 22:03:41 -07:00
Rizumu Ayaka
6da2cf7b4d feat: vue based input number widget (#5435) 
* feat: vue based input number widget

* fix: remove min and max
 2025-09-08 23:34:07 -07:00