Improve node moving UX

[meowvelous-elixia]

• refactor: update selectNodes and unselectNodes to handle multiple topics
• refactor: consolidate moveNode logic for improved clarity and maintai…
• fix: adjust scrollIntoView logic to improve visibility threshold

[gemini-code-assist]

Summary of Changes

Hello @meowvelous-elixia, 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 significantly enhances the user experience for node manipulation within the mind map application. It refactors node movement operations into a unified function, making the codebase more maintainable, and improves visibility during interactions by adjusting the scrollIntoView behavior. Additionally, it refines node selection and deselection to better support multiple topics.

Highlights

• Improved scrollIntoView Threshold: The scrollIntoView function now triggers earlier, when an element is within 50 pixels of the viewport edge, enhancing user experience by ensuring elements are visible before they are fully out of view.
• Consolidated Node Movement Logic: The moveNodeIn function has been refactored and merged into a single, more general moveNode helper function, which now handles 'in', 'before', and 'after' node movements, improving code clarity and maintainability.
• Enhanced Node Selection Handling: The selectNodes and unselectNodes functions were updated to explicitly handle multiple topics, aligning with the goal of better managing node selections.
• Automatic Node Expansion on Move-In: When moving a node into a collapsed parent, the parent node will now automatically expand, improving the drag-and-drop experience.
• Post-Move Scroll Adjustment: After a node movement operation, the view will automatically scroll to ensure the last moved node is visible, preventing it from being off-screen.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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 several valuable improvements to the node moving user experience and related code structure. The consolidation of node moving logic into a single moveNode function is a great refactoring that enhances maintainability. The adjustments to scrollIntoView logic, both by adding a visibility threshold and by explicitly calling it after a move, directly address UX concerns. Additionally, renaming parameters for clarity in selectNodes and unselectNodes is a good touch. Overall, these are solid changes. I have a couple of minor suggestions to further improve code quality.

[gemini-code-assist]

The value 50 is used as a magic number. To improve readability and maintainability, please extract it into a named constant (e.g., const VIEWPORT_MARGIN = 50;) at a higher scope and use the constant here.

[gemini-code-assist]

This comment is in Chinese, while the rest of the codebase is primarily in English. For consistency and to make the code more accessible to a wider range of contributors, please translate this comment to English.

Suggested change

	// 这部分还是比较混乱，移动等 api 不会清除选择再重新选择，
	// 在 selectNodes 里 scrollIntoView 也没效果，所以在这里单独 scrollIntoView
	// The move API does not clear and re-select nodes, and scrollIntoView has no effect
	// in selectNodes. Therefore, scrollIntoView is called here to ensure the node is visible.