Resize panel

[six7]

Related to #39

---

For more details, open the Copilot Workspace session.

Summary by Sourcery

New Features:

• Allow users to resize the plugin panel and the style selector panels.

---

[!IMPORTANT] Adds resizing functionality to plugin and style selector panels, with mouse event handling in PluginUI.svelte, Selector.svelte, and code.ts.

• Behavior:
  • Adds resizing functionality to plugin panel in PluginUI.svelte and style selector in Selector.svelte using mouse events.
  • Updates figma.ui.onmessage in code.ts to handle "resize" messages and adjust UI size.
• UI Components:
  • Adds .resize-handle div to PluginUI.svelte and Selector.svelte for user interaction.
  • Implements handleMouseDown, handleMouseMove, and handleMouseUp functions in both PluginUI.svelte and Selector.svelte to manage resizing logic.
• Misc:
  • Fixes typo in PluginUI.svelte by renaming Bxxxutton to Button.

^{This description was created by for 5c7b14f8967b9f2c7061d48e4d05c3f5feff0113. It will automatically update as commits are pushed.}

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This pull request implements panel resizing functionality for the plugin's UI. It allows users to adjust the height and width of the plugin panel by dragging a resize handle.

Sequence diagram for panel resize interaction

sequenceDiagram
    actor User
    participant UI as Plugin UI
    participant Figma as Figma API

    User->>UI: Mousedown on resize handle
    activate UI
    Note right of UI: Store initial dimensions and mouse position
    UI->>UI: Add mousemove listener
    UI->>UI: Add mouseup listener
    deactivate UI

    User->>UI: Mousemove
    activate UI
    UI->>UI: Calculate new dimensions
    UI->>UI: Update panel size
    deactivate UI

    User->>UI: Mouseup
    activate UI
    UI->>UI: Remove mousemove listener
    UI->>UI: Remove mouseup listener
    UI->>Figma: Resize UI message
    Figma->>Figma: Update plugin window size
    deactivate UI

Class diagram for updated UI components

classDiagram
    class PluginUI {
        -boolean isResizing
        -number startX
        -number startY
        -number startWidth
        -number startHeight
        +handleMouseDown(event)
        +handleMouseMove(event)
        +handleMouseUp()
    }

    class Selector {
        -boolean isResizing
        -number startY
        -number startHeight
        +handleMouseDown(event)
        +handleMouseMove(event)
        +handleMouseUp()
    }

    note for PluginUI "Added resize functionality"
    note for Selector "Added vertical resize capability"

File-Level Changes

Change	Details	Files
Added resizing functionality to the main plugin UI panel.	Added event listeners for mouse down, mouse move, and mouse up events to handle resizing. Implemented logic to calculate and apply new width and height to the panel during resizing. Added a resize handle element to the bottom of the panel. Added a bind:this={panel} to the outer wrapper div to get a reference to the panel element.	src/PluginUI.svelte
Added resizing functionality to the style selector panel.	Added event listeners for mouse down, mouse move, and mouse up events to handle resizing. Implemented logic to calculate and apply new height to the panel during resizing. Added a resize handle element to the bottom of the panel. Added a bind:this={panel} to the outer wrapper div to get a reference to the panel element.	src/Selector.svelte
Added a message listener in the code.ts file to handle resize events from the UI.	Added an event listener for messages from the UI. Implemented logic to resize the plugin UI based on the message received.	src/code.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.