Skip to content

fix: Pins and dragging improvements#222

Merged
GabiGrin merged 6 commits intoflydelabs:mainfrom
Wr4th100:Wr4th100/pins-drag-improvements
Apr 12, 2025
Merged

fix: Pins and dragging improvements#222
GabiGrin merged 6 commits intoflydelabs:mainfrom
Wr4th100:Wr4th100/pins-drag-improvements

Conversation

@Wr4th100
Copy link
Copy Markdown
Contributor

@Wr4th100 Wr4th100 commented Apr 12, 2025

/claim #218
Fixes #218

Changes:

  • Implemented a new design for hover and proximity states for the pin-handles.
  • Improved the connection creation process by expanding the drag-and-drop area around pin-handles, making it easier and user-friendly.
  • Aligned all pin-handles precisely to the center of their respective pins.
  • Ensured label consistency by setting a fixed font size for the .pin-inner class.

Video:

2025-04-12.16-01-26.mp4

@GabiGrin
Copy link
Copy Markdown
Contributor

GabiGrin commented Apr 12, 2025

@Wr4th100 looking much better now!
2 things before we can merge this:

  1. The design is not pixel pefect, see below
  2. can we increase the "proximity area" further, say 2x, without breaking anything else (as in anything that can cause interfering with other elements, selecting other nodes, etc)?

Expected design of handle:
Screenshot 2025-04-12 at 13 50 55

Actual:
Screenshot 2025-04-12 at 13 51 01

Adjusted the pin handle appearance by reducing the width of circles to
match the required design.
Expanded the projection area's width to receive connections.
Updated the RGB Variable to HEX Code.
@GabiGrin
Copy link
Copy Markdown
Contributor

Screenshot 2025-04-12 at 14 32 20 @Wr4th100 almost there! see how first circle is darker than expected Screenshot 2025-04-12 at 14 32 52

Also, while not explicitly mentioned, should work ok in light mode as well (inverse colors):
Screenshot 2025-04-12 at 14 33 31

@Wr4th100
Copy link
Copy Markdown
Contributor Author

Screenshot 2025-04-12 at 14 32 20 @Wr4th100 almost there! see how first circle is darker than expected Screenshot 2025-04-12 at 14 32 52

Also, while not explicitly mentioned, should work ok in light mode as well (inverse colors): Screenshot 2025-04-12 at 14 33 31

I have corrected the pins to work on light mode as well. And the border color for the first circle has been lightened.

Current border:
Screenshot_20250412_173315

Current Light Mode implementation:
Screenshot_20250412_171459

@Wr4th100 Wr4th100 changed the title Wr4th100/pins drag improvements fix: Pins and dragging improvements Apr 12, 2025
@GabiGrin
Copy link
Copy Markdown
Contributor

Screen.Recording.2025-04-12.at.15.52.02.mov

@Wr4th100 just pulled the latest changes and this is how it looks on my end - looks like a regression

@GabiGrin GabiGrin self-requested a review April 12, 2025 13:03
@Wr4th100
Copy link
Copy Markdown
Contributor Author

Screen.Recording.2025-04-12.at.15.52.02.mov

@Wr4th100 just pulled the latest changes and this is how it looks on my end - looks like a regression

Sorry about that—my mistake! It should be fixed now, please take another look.

Copy link
Copy Markdown
Contributor

@GabiGrin GabiGrin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good now, awesome job!

@GabiGrin GabiGrin enabled auto-merge (squash) April 12, 2025 13:03
@GabiGrin GabiGrin merged commit ee02778 into flydelabs:main Apr 12, 2025
1 check passed
@Wr4th100 Wr4th100 deleted the Wr4th100/pins-drag-improvements branch April 12, 2025 16:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Node pins & dragging improvements

2 participants