feat(DockView2): collapse panel to nearest edge#394
Merged
Conversation
Reviewer's Guide by SourceryThis pull request introduces a feature that allows panels to collapse to the nearest edge. It includes updates to the project version, CSS adjustments, and JavaScript enhancements for better handling of dockview elements. The changes involve updating the project version, removing dark theme CSS rules, adding new CSS variables and rules, and modifying JavaScript functions to handle new parameters and behaviors. Sequence diagram for autoHide functionsequenceDiagram
participant Group
participant Dockview
participant FloatingGroup
Group->>Group: getParams()
alt canFloat(group)
Group->>Dockview: createFloatingGroup(group, rect, 'drawer')
Dockview->>FloatingGroup: createFloatingGroup(group, rect, 'drawer')
FloatingGroup-->>Dockview: floatingGroup
alt floatingGroup
Dockview->>FloatingGroup: createDrawerHandle(floatingGroup, isRight)
Dockview->>Dockview: saveConfig(dockview)
end
else canFloat(group) == false
Group-->>Group: return
end
Sequence diagram for createDrawerHandle functionsequenceDiagram
participant FloatingGroup
participant Dockview
FloatingGroup->>FloatingGroup: element.parentElement.classList.add('dv-resize-container-drawer')
FloatingGroup->>FloatingGroup: element.parentElement.classList.add(className)
FloatingGroup->>FloatingGroup: createDrawerBtn(floatingGroup, isRight)
FloatingGroup->>Dockview: btn.addEventListener('click')
activate Dockview
Dockview->>FloatingGroup: fgWrapper.classList.contains('active')
alt fgWrapper.classList.contains('active')
FloatingGroup->>FloatingGroup: fgWrapper.classList.remove('active')
FloatingGroup->>FloatingGroup: parentElement.classList.remove('active')
else not fgWrapper.classList.contains('active')
FloatingGroup->>FloatingGroup: btn.classList.add('active')
FloatingGroup->>FloatingGroup: fgWrapper.classList.add('active')
FloatingGroup->>FloatingGroup: parentElement.classList.add('active')
end
Dockview->>Dockview: saveConfig(dockview)
deactivate Dockview
Updated class diagram for OverlayclassDiagram
class Overlay {
- _element: HTMLElement
- options: Object
+ Overlay(options: Object)
+ getElement(): HTMLElement
}
note for Overlay "Added className option to Overlay class for better customization"
File-Level Changes
Assessment against linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @ArgoZhang - I've reviewed your changes - here's some feedback:
Overall Comments:
- Consider adding comments to the javascript code to explain the purpose and functionality of the functions.
- It might be helpful to include a brief explanation of the new CSS variables and their intended use in the CSS file.
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.
| dockview.groups.forEach(group => { | ||
| observeGroup(group) | ||
| }) | ||
| dockview.element.querySelector('&>.dv-dockview>.dv-branch-node').addEventListener('click', function (e) { |
There was a problem hiding this comment.
suggestion (bug_risk): Review use of '&>' in query selectors.
Standard querySelector syntax does not support the '&>' combinator. It is advisable to replace '&>' with the appropriate direct child selector (e.g., '>') to ensure reliable element selection in all browsers.
Suggested implementation:
dockview.element.querySelector('> .dv-dockview > .dv-branch-node').addEventListener('click', function (e) { this.parentElement.querySelectorAll('> .dv-resize-container-drawer').forEach(item => { this.closest('.bb-dockview').querySelectorAll('> .bb-dockview-aside > .bb-dockview-aside-button').forEach(item => {| }) | ||
| if (fgWrapper.style.left == '-1px') { | ||
| fgWrapper.style.left = '-9999px' | ||
| btn.parentElement.parentElement.querySelectorAll('&>.bb-dockview-aside>.bb-dockview-aside-button').forEach(btnEle => { |
There was a problem hiding this comment.
suggestion (bug_risk): Correct the child combinator selector to avoid errors.
Similar to the previous query selector issue, the use of '&>' is non-standard. Please update these selectors to use the correct syntax for directly targeting child elements (e.g. ">.bb-dockview-aside > .bb-dockview-aside-button") to ensure proper element matching.
Suggested change
| btn.parentElement.parentElement.querySelectorAll('&>.bb-dockview-aside>.bb-dockview-aside-button').forEach(btnEle => { | |
| btn.parentElement.parentElement.querySelectorAll('>.bb-dockview-aside > .bb-dockview-aside-button').forEach(btnEle => { |
|
|
||
| const createDrawerHandle = (floatingGroup) => { | ||
| function getOffsetFromDockview(element) { | ||
| let offsetLeft = element.offsetLeft; |
There was a problem hiding this comment.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)
Suggested change
| let offsetLeft = element.offsetLeft; | |
| let {offsetLeft} = element; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
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
2 participants
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.
Link issues
fixes #393
Summary By Copilot
This pull request includes several updates to the
BootstrapBlazor.DockViewcomponent, focusing on version updates, CSS adjustments, and JavaScript enhancements for better handling of dockview elements. The most important changes include updating the project version, removing dark theme CSS rules, adding new CSS variables and rules, and modifying JavaScript functions to handle new parameters and behaviors.Version Update:
src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj: Updated the project version from9.1.8to9.1.9.CSS Adjustments:
src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css: Removed dark theme CSS rules to simplify styling.src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css: Added new CSS variables and rules for dockview elements, including aside width and hover effects. [1] [2] [3]JavaScript Enhancements:
src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js: Enhanced theOverlayandDockviewComponentclasses to include optional class names for better customization. [1] [2]src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js: Updated various functions to handle new parameters such asdirectionand improved the logic for drawer handling and overlay changes. [1] [2] [3] [4] [5] [6] [7] [8]src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js: Modified theinitDockviewfunction to observe new parameters and handle click events for better user interaction. [1] [2]These updates aim to improve the flexibility, usability, and maintainability of the
BootstrapBlazor.DockViewcomponent.Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Enhance DockView component to support collapsing panels to the nearest edge with improved drawer and aside functionality
New Features:
Enhancements:
Chores: