Add an in-viewport color picker to the Gradient tool when double-clicking a color stop

[Keavon]

capture_50_.mp4

[gemini-code-assist]

Summary of Changes

Hello @Keavon, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant enhancement to the Gradient tool by adding an interactive, in-viewport color picker for gradient stops. This feature streamlines the workflow for adjusting gradient colors by allowing users to directly modify stop colors without needing to navigate to a separate panel. The changes span both the editor's Rust core and the Svelte frontend, ensuring a cohesive and responsive user experience.

Highlights

• In-Viewport Color Picker for Gradient Stops: Implemented a new in-viewport color picker that appears when a gradient stop is double-clicked, allowing for direct color manipulation at the stop's location.
• Gradient Tool Integration: The Gradient tool now manages the state and interaction for the color picker, including starting/committing undo transactions and updating the color of the selected gradient stop.
• Frontend UI Updates: Modified several frontend Svelte components to display, position, and interact with the new color picker, ensuring it stays anchored to the gradient stop during viewport transformations.
• Message Dispatching and WASM Bindings: New frontend messages and WASM bindings were added to facilitate communication between the editor core and the frontend for color picker operations.
• Input Handling Refinement: Adjusted input manager logic to prevent canvas interactions when a floating menu, such as the new color picker, is active.

Changelog

• editor/src/dispatcher.rs
  • Refactored message logging to correctly handle and block individual messages within batched messages, improving debug logging accuracy.
• editor/src/messages/frontend/frontend_message.rs
  • Added UpdateGradientStopColorPickerPosition message to send color and position data for the in-viewport color picker to the frontend.
• editor/src/messages/tool/tool_messages/gradient_tool.rs
  • Imported Color for gradient stop color manipulation.
  • Added new GradientToolMessage variants: StartTransactionForColorStop, CommitTransactionForColorStop, CloseStopColorPicker, and UpdateStopColor.
  • Updated process_message to handle the new color picker messages, managing undo transactions and updating gradient stop colors.
  • Introduced color_picker_editing_color_stop and color_picker_transaction_open fields to GradientToolData to track the color picker's state.
  • Added logic to process_event to update the color picker's position in the viewport and dismiss it when the selection changes.
  • Implemented logic to open the color picker when a gradient stop, start, or end point is double-clicked.
  • Created a dismiss_color_stop_color_picker helper function to centralize color picker dismissal logic.
  • Corrected DocumentMessage::AddTransaction to DocumentMessage::EndTransaction in apply_gradient_update.
• frontend/src/components/floating-menus/ColorPicker.svelte
  • Imported tick for asynchronous updates.
  • Added commitHistoryTransaction to the createEventDispatcher to signal when a color change transaction should be committed.
  • Made the watchOpen function asynchronous to ensure proper state updates.
  • Dispatched commitHistoryTransaction on pointer up events when dragging the picker track.
  • Exported a div function to allow external components to access the color picker's root DOM element.
• frontend/src/components/layout/FloatingMenu.svelte
  • Added a noPosition check to prevent automatic positioning for menus that are manually positioned.
  • Refined the notHoveringOverOwnSpawner logic to correctly handle cases where no spawner is present, preventing premature menu closure.
• frontend/src/components/panels/Document.svelte
  • Imported MenuDirection, Color, and the ColorPicker Svelte component.
  • Declared gradientStopPicker as a Svelte component reference.
  • Added state variables gradientStopPickerColor and gradientStopPickerPosition to manage the color picker's visibility and location.
  • Implemented gradientStopPickerDirection to dynamically determine the optimal display direction for the color picker based on available viewport space.
  • Subscribed to the UpdateGradientStopColorPickerPosition message to receive color and position updates from the editor core.
  • Rendered the ColorPicker component within the document panel, configured to display at the gradient stop's position and interact with the editor's API.
• frontend/src/components/widgets/inputs/ColorInput.svelte
  • Removed commented-out TextLabel element from the color button, cleaning up the component.
• frontend/src/io-managers/input.ts
  • Modified the isTargetingCanvas check to exclude elements within floating menus, preventing unintended canvas interactions when a menu is open.
• frontend/src/messages.ts
  • Defined the UpdateGradientStopColorPickerPosition class with color, x, and y properties for frontend message handling.
  • Added UpdateGradientStopColorPickerPosition to the messageMakers export.
• frontend/wasm/src/editor_api.rs
  • Added WASM bindings for updateGradientStopColor to change the color of the active gradient stop.
  • Added WASM bindings for startGradientStopColorTransaction and commitGradientStopColorTransaction to manage undo history for color changes.
  • Added WASM binding for closeGradientStopColorPicker to dismiss the color picker from the frontend.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces an in-viewport color picker for the Gradient tool, which appears when double-clicking a color stop. The implementation spans both backend and frontend, adding new messages for communication, updating the gradient tool's state machine, and creating the necessary UI components. The changes are well-structured and the new feature is a great addition. I've identified a couple of opportunities to reduce code duplication by using a newly introduced helper function.

[cubic-dev-ai]

3 issues found across 10 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="editor/src/messages/frontend/frontend_message.rs">

<violation number="1" location="editor/src/messages/frontend/frontend_message.rs:60">
P2: This variant uses the `Update` prefix but is placed in the `Display` section. Per the file's own organizational convention (each prefix group has a comment header), it should be moved to the `// Update prefix: give the frontend a new value or state for it to use` section alongside the other `Update*` variants. Alternatively, if this is intended to be a display action, rename it with a `Display` prefix.</violation>
</file>

<file name="frontend/src/components/panels/Document.svelte">

<violation number="1" location="frontend/src/components/panels/Document.svelte:419">
P1: Missing closing `]` in the CSS attribute selector will cause `querySelector` to throw a `DOMException` at runtime instead of returning `null`. The selector `"[data-floating-menu-content"` should be `"[data-floating-menu-content]"`.</violation>
</file>

<file name="editor/src/dispatcher.rs">

<violation number="1" location="editor/src/dispatcher.rs:364">
P2: Variable name `is_empty_batched` is misleading after the semantic change. It no longer checks whether the batch is empty — it checks whether *all* messages in the batch are blocked. Consider renaming to something like `is_all_blocked_batch` to reflect the new logic.

(Based on your team's feedback about using consistent, precise terminology in names and docs.) [FEEDBACK_USED]</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Add one-off context when rerunning by tagging @cubic-dev-ai with guidance or docs links (including llms.txt)
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}