fix: color picker indicator not updating on hex change with delayed updates

[mck]

Fixes #704

Problem

When delayed updates are enabled and a user manually types a new hex value, the color picker's visual indicator (color ball) would immediately show the new color, but the system would still have the old color value. This created a confusing visual inconsistency.

Root Cause

The ColorField component was using the same local state (val) for both the color ball background and the text input value. When delayed updates were enabled, the local state would update immediately but the port value wouldn't update until the user clicked save.

Solution

I modified two components:

1. ColorField component (packages/graph-editor/src/components/controls/color.tsx):

   • Added logic to calculate colorBallValue that shows the actual port value when delayed updates are enabled
   • Pass separate value (for color ball) and textValue (for text input) props to ColorPickerPopover

2. ColorPickerPopover component (packages/graph-editor/src/components/colorPicker/index.tsx):

   • Added optional textValue prop
   • Color ball uses value prop (actual port value)
   • Text input uses textValue prop when provided (temporary user input)

Result

• When delayed updates are disabled: Behavior unchanged - both color ball and text input show the same value and update immediately
• When delayed updates are enabled: Color ball shows the actual saved color, text input shows what the user is typing, providing clear visual feedback about saved vs. editing state

Changes Made

• Modified packages/graph-editor/src/components/controls/color.tsx
• Modified packages/graph-editor/src/components/colorPicker/index.tsx
• Added unit tests in packages/graph-editor/src/components/controls/color.test.tsx

Backward Compatibility

• The textValue prop is optional, so all existing usages continue to work unchanged
• No breaking changes to the API

Testing

• Added comprehensive unit tests to verify the fix works correctly
• Tests cover both delayed and non-delayed update scenarios
• Verified that the color ball shows the correct value in each case

Demo

Before the fix:

• User types new hex value → color ball immediately shows new color but system still has old value
• Visual inconsistency between what's displayed and what's actually saved

After the fix:

• User types new hex value → color ball shows actual saved color, text input shows what user is typing
• Clear visual distinction between saved state and editing state

---

Pull Request opened by Augment Code with guidance from the PR author

[changeset-bot]

⚠️ No Changeset found

Latest commit: aa4b41a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR