feat: add standalone image, text, and rect element types

[MinCrohn]

Summary:

This update introduces three new standalone display elements—Rect, Image, and Text—providing more flexibility for map creation. It also enhances the core engine with support for asynchronous asset loading and more robust attribute preservation during updates.

✨ Key Features:

• New Standalone Elements: You can now add rectangles, images, and text objects directly to the map as independent elements.

• Asynchronous Image Loading: Images can be loaded via URLs or asset keys. The engine now handles the loading state asynchronously, ensuring the UI remains responsive.

• Advanced Text Layout: New text elements support word wrapping based on container size.

🛠 Usage Example:

// Drawing new standalone elements
patchmap.draw([
  {
    type: 'rect',
    id: 'my-rect',
    size: { width: 100, height: 50 },
    fill: 'blue',
    radius: 8 // Supports rounded corners
  },
  {
    type: 'image',
    id: 'my-logo',
    source: 'https://example.com/logo.png',
    size: { width: 50, height: 50 }
  },
  {
    type: 'text',
    text: 'Hello World'
  }
]);

🔍 Changes:

• Implemented Rect, Image, and Text display classes and registered them in the element registry.
• Updated Sourceable mixin to use Assets.load for external URL support.
• Introduced TextLayoutable and ElementTextLayoutable mixins for sophisticated text rendering.
• Refactored UpdateCommand to use deep-cloning for attribute preservation.
• Added comprehensive Zod schemas for new elements to ensure data integrity.

💡 Why is this needed?

Previously, basic shapes and images had to be wrapped in complex components. Providing these as standalone elements simplifies map definitions for users. Additionally, supporting direct URL sources for images is a critical requirement for dynamic maps that fetch assets from external APIs.

---

Technical Notes:

• Sourceable now uses a token-based system to prevent race conditions during async loads.

• Separated LabelTextStyle (for components) from ElementTextStyle (for standalone text) to provide tailored styling options.

[gemini-code-assist]

Summary of Changes

Hello @MinCrohn, 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 expands the capabilities of map creation by introducing three new fundamental display elements: Rectangles, Images, and Text. These elements can now be used independently, offering greater flexibility and ease of use for developers. Beyond new element types, the PR also includes critical infrastructure improvements such as asynchronous asset loading for images, which is vital for dynamic maps fetching external resources, and a more robust attribute preservation mechanism for updates, enhancing the reliability of state management and undo/redo functionality.

Highlights

• New Standalone Display Elements: Introduced Rect, Image, and Text as independent elements that can be added directly to the map, simplifying map creation by removing the need to wrap basic shapes and images in complex components.
• Asynchronous Asset Loading: Enhanced the core engine to support asynchronous loading of images via URLs or asset keys, ensuring the UI remains responsive during asset retrieval. A token-based system was implemented in the Sourceable mixin to prevent race conditions during these async loads.
• Advanced Text Layout: New text elements now support sophisticated text rendering features, including word wrapping based on container size, auto-font sizing, and overflow handling (e.g., ellipsis).
• Robust Attribute Preservation: Refactored the UpdateCommand to use deep-cloning for attribute preservation, ensuring that all existing attributes are correctly maintained during partial updates and properly restored during undo/redo operations.
• Comprehensive Zod Schemas: Added detailed Zod schemas for the new Image, Text, and Rect elements to enforce data integrity and provide clear validation for their properties.

🧠 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 new standalone Rect, Image, and Text elements, which is a great enhancement for API flexibility. The implementation is robust, with excellent handling of asynchronous asset loading in the Sourceable mixin, including race condition prevention. The refactoring of text styling into multiple schemas and mixins (LabelTextStyle, ElementTextStyle, TextLayoutable) is a solid architectural improvement that clarifies intent and separates concerns. The fix in UpdateCommand to correctly preserve attributes during undo operations is a critical improvement for history management. Overall, this is a high-quality contribution with thoughtful design and necessary test coverage. I've identified one high-severity issue where a validation rule was accidentally removed during refactoring.