Open
Conversation
Related to #39 --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/six7/figma-batch-styler/issues/39?shareId=XXXX-XXXX-XXXX-XXXX).
Reviewer's Guide by SourceryThis 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 interactionsequenceDiagram
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 componentsclassDiagram
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
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
There was a problem hiding this comment.
👍 Looks good to me! Reviewed everything up to ab2252c in 54 seconds
More details
- Looked at
139lines of code in3files - Skipped
0files when reviewing. - Skipped posting
3drafted comments based on config settings.
1. src/PluginUI.svelte:100
- Draft comment:
Consider refactoring the resizing logic into a reusable component or utility function to avoid code duplication. This logic is repeated in both PluginUI.svelte and Selector.svelte. - Reason this comment was not posted:
Confidence changes required:50%
The code for resizing the panel in both PluginUI.svelte and Selector.svelte is almost identical. This duplication can be avoided by creating a reusable component or utility function for resizing, which would make the codebase cleaner and easier to maintain.
2. src/PluginUI.svelte:113
- Draft comment:
Consider usingrequestAnimationFramefor updating the panel's dimensions inhandleMouseMoveto improve performance and avoid layout thrashing. This is applicable in both PluginUI.svelte and Selector.svelte. - Reason this comment was not posted:
Confidence changes required:50%
ThehandleMouseMovefunction in both PluginUI.svelte and Selector.svelte directly manipulates the DOM by setting the style properties. This can lead to layout thrashing if not handled properly. Consider using requestAnimationFrame to batch these updates for better performance.
3. src/PluginUI.svelte:103
- Draft comment:
Ensure that event listeners added inhandleMouseDownare always removed inhandleMouseUpto prevent memory leaks. This is correctly implemented here and in Selector.svelte. - Reason this comment was not posted:
Confidence changes required:20%
ThehandleMouseDownfunction in both PluginUI.svelte and Selector.svelte adds event listeners to the document. It's important to ensure these listeners are removed to prevent memory leaks. The current implementation does this correctly, but it's worth noting as a best practice.
Workflow ID: wflow_mpit7ukP1QUPbyJh
You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @six7 - I've reviewed your changes - here's some feedback:
Overall Comments:
- Consider extracting the resize logic into a reusable component or directive since it's duplicated between PluginUI.svelte and Selector.svelte
Here's what I looked at during the review
- 🟡 General issues: 2 issues found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Complexity: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| document.documentElement.addEventListener('mouseup', handleMouseUp); | ||
| } | ||
|
|
||
| function handleMouseMove(event) { |
There was a problem hiding this comment.
suggestion: Consider adding minimum/maximum size constraints to prevent invalid dimensions
The panel could be resized to very small or very large dimensions. Consider adding bounds checking like: const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, startWidth + event.clientX - startX));
Suggested implementation:
const MIN_WIDTH = 200; // Minimum width in pixels
const MAX_WIDTH = 800; // Maximum width in pixels
const MIN_HEIGHT = 100; // Minimum height in pixels
const MAX_HEIGHT = 600; // Maximum height in pixels
function handleMouseMove(event) {
if (!isResizing) return;
const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, startWidth + event.clientX - startX));
const newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, startHeight + event.clientY - startY));
The specific MIN/MAX values I've suggested (200/800px for width, 100/600px for height) should be adjusted based on your application's specific needs and design requirements. You may want to:
- Consider making these constants configurable via props if this is a reusable component
- Adjust the values based on the viewport size or other UI constraints in your application
| @@ -96,6 +96,33 @@ | |||
| trackData(event.data.pluginMessage.data); | |||
| } | |||
There was a problem hiding this comment.
suggestion: Consider extracting resize functionality into a reusable component or utility
This resize logic is duplicated in Selector.svelte. Consider creating a shared component or utility function to handle resize behavior.
There was a problem hiding this comment.
👍 Looks good to me! Incremental review on 5c7b14f in 32 seconds
More details
- Looked at
13lines of code in1files - Skipped
0files when reviewing. - Skipped posting
1drafted comments based on config settings.
1. src/PluginUI.svelte:12
- Draft comment:
Typo in import statement. ReplaceBxxxuttonwithButton.
Button,
- Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable:
While this is a clear typo that would break the build, one of our rules explicitly states "Do NOT comment on anything that would be obviously caught by the build, such as variable renames, file renames, or changed imports." This is exactly that case - a broken import that would be immediately caught by the build system.
The typo is very obvious and the suggestion is correct. Maybe build errors aren't always clear about the exact fix needed?
While build errors might sometimes be cryptic, a missing import error would clearly point to this line, and the correct import name would be obvious given the context of the design system library.
We should delete this comment because it violates our rule about not commenting on issues that would be caught by the build system.
Workflow ID: wflow_Ovccfn98tfTKGMr4
You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related to #39
For more details, open the Copilot Workspace session.
Summary by Sourcery
New Features:
Important
Adds resizing functionality to plugin and style selector panels, with mouse event handling in
PluginUI.svelte,Selector.svelte, andcode.ts.PluginUI.svelteand style selector inSelector.svelteusing mouse events.figma.ui.onmessageincode.tsto handle "resize" messages and adjust UI size..resize-handlediv toPluginUI.svelteandSelector.sveltefor user interaction.handleMouseDown,handleMouseMove, andhandleMouseUpfunctions in bothPluginUI.svelteandSelector.svelteto manage resizing logic.PluginUI.svelteby renamingBxxxuttontoButton.This description was created by
for 5c7b14f. It will automatically update as commits are pushed.