Add playground UI controls and data editor

[kujung-conalog]

• Introduce playground controls for rotate/flip, fit, and selection.
• Add data editor UI for JSON/form editing and element management.
• Improve selection UX and input affordances.

[gemini-code-assist]

Summary of Changes

Hello @kujung-conalog, 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 upgrades the patchmap development experience by introducing a new interactive playground. This environment provides users with intuitive UI controls for view manipulation, such as rotation and flipping, alongside a powerful data editor. The data editor allows for real-time modification of map elements through both JSON and a user-friendly form interface, making it easier to experiment with different map configurations and test the library's capabilities. These additions aim to streamline the process of designing and debugging patchmap layouts.

Highlights

• Playground UI Controls: Introduced new UI controls within the playground for manipulating the map view, including rotation, flipping along X and Y axes, and fitting the view to content. These controls enhance the interactive experience for testing and visualizing map data.
• Data Editor Integration: Added a comprehensive data editor to the playground, allowing users to view and modify map data. It supports both raw JSON editing and a structured form-based interface for easier element management.
• Element Management: The form-based data editor enables adding new elements (groups, grids, items, relations, and components) and deleting existing ones directly from a tree-like structure, simplifying the creation and modification of map configurations.
• Improved Selection UX: Enhanced the selection experience within the playground, allowing single and multiple element selections, and providing visual feedback on selected nodes in the data editor's tree view.
• Development Environment Setup: Updated package.json scripts and README files to include new commands (npm run dev, npm run playground) for easily launching the Vite-powered local playground.

🧠 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 a comprehensive playground for the patchmap library, which is a fantastic addition for development and demonstration purposes. The changes include new scripts in package.json, documentation updates, and the core playground implementation with UI controls, a data editor, and example scenarios.

The implementation is quite extensive. While it's great for a playground, some of the new JavaScript files, particularly playground/data-editor.js and playground/main.js, have become very large. For long-term maintainability, consider refactoring them into smaller, more focused modules in the future. For instance, the data editor logic could be split by feature (tree view, inspector), and the main script could separate UI binding from application logic.

Overall, this is a solid contribution that significantly improves the developer experience for this library.

[gemini-code-assist]

To improve maintainability, you can reuse the componentTypes Set that is already defined at the top of this file instead of hardcoding the array of component types here.

Additionally, consider defining ['group', 'grid', 'item', 'relations'] as a constant to avoid magic values.

Suggested change

	const types =
	parentType === 'item' || parentType === 'grid'
	? ['background', 'bar', 'icon', 'text']
	: ['group', 'grid', 'item', 'relations'];
	const types =
	parentType === 'item' || parentType === 'grid'
	? Array.from(componentTypes)
	: ['group', 'grid', 'item', 'relations'];