feat(DockView): update dockview 4.7.1#565
Merged
Conversation
|
Thanks for your PR, @zhaijunlei955. Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
Reviewer's GuideThis PR updates the dockview package to v4.7.1 by adding layout-normalization and node-cloning utilities, introducing GPU-accelerated style helpers and CSS hints, improving drag-and-drop disable handling, enhancing overlay rendering via RAF-based caching, exposing a popout restoration promise with delayed creation, refining panel-move and group-activation logic, removing duplicate event classes, and applying compatibility fixes in group, panel and config modules. Class diagram for new and updated Dockview drag-and-drop handlersclassDiagram
class DragHandler {
-el
-disabled
+constructor(el, disabled)
+setDisabled(disabled)
+isCancelled(event)
+configure()
}
class TabDragHandler {
+constructor(element, accessor, group, panel, disabled)
}
class GroupDragHandler {
+constructor(element, accessor, group, disabled)
}
DragHandler <|-- TabDragHandler
DragHandler <|-- GroupDragHandler
TabDragHandler o-- Tab
GroupDragHandler o-- VoidContainer
class Tab {
-dragHandler: TabDragHandler
+updateDragAndDropState()
}
class VoidContainer {
-handler: GroupDragHandler
+updateDragAndDropState()
}
Class diagram for new PositionCache and OverlayRenderContainer changesclassDiagram
class PositionCache {
-cache: Map
-currentFrameId: int
-rafId: int
+getPosition(element)
+invalidate()
+scheduleFrameUpdate()
}
class OverlayRenderContainer {
-positionCache: PositionCache
-pendingUpdates: Set
+updateAllPositions()
+add(panel, referenceContainer)
}
OverlayRenderContainer o-- PositionCache
Class diagram for DockviewComponent popout restoration and normalizationclassDiagram
class DockviewComponent {
-_popoutRestorationPromise: Promise
+get popoutRestorationPromise()
+fromJSON(data)
+orthogonalize(position, options)
}
class Gridview {
+normalize()
}
DockviewComponent o-- Gridview
Class diagram for new GPU-optimized style helpersclassDiagram
class GPUOptimizedHelpers {
+setGPUOptimizedBounds(element, bounds)
+setGPUOptimizedBoundsFromStrings(element, bounds)
+checkBoundsChanged(element, bounds)
}
Class diagram for moveAlwaysRenderPanel and panel changesclassDiagram
class Panel {
+moveAlwaysRenderPanel(panel)
}
Class diagram for config saveParamsIsActive logicclassDiagram
class DockviewConfig {
+saveParamsIsActive(dockview)
}
File-Level Changes
Possibly 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 there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js:9799` </location>
<code_context>
this.doRemoveGroup(sourceGroup, { skipActive: true });
}
+ // Check if destination group is empty - if so, force render the component
+ const isDestinationGroupEmpty = destinationGroup.model.size === 0;
this.movingLock(() => {
var _a;
return destinationGroup.model.openPanel(removedPanel, {
index: destinationIndex,
- skipSetActive: (_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false,
+ skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) && !isDestinationGroupEmpty,
skipSetGroupActive: true,
});
</code_context>
<issue_to_address>
skipSetActive logic may be confusing when destination group is empty.
Document or refactor the logic so that callers are aware skipSetActive will be set to false when the destination group is empty, even if they pass true.
</issue_to_address>
### Comment 2
<location> `src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css:13` </location>
<code_context>
border-radius: 2px;
background-color: transparent;
+ /* GPU optimizations */
+ will-change: background-color, transform;
+ transform: translate3d(0, 0, 0);
+ backface-visibility: hidden;
transition-property: background-color;
transition-timing-function: ease-in-out;
</code_context>
<issue_to_address>
Consider limiting will-change usage to avoid excessive GPU layers.
Limit will-change to elements where GPU acceleration provides a clear benefit to prevent unnecessary memory and performance overhead.
Suggested implementation:
```
/* GPU optimizations */
/* Removed will-change to avoid unnecessary GPU layers */
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
```
```
/* GPU optimizations */
will-change: transform, opacity;
transform: translate3d(0, 0, 0);
```
</issue_to_address>
### Comment 3
<location> `src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js:560` </location>
<code_context>
observeOverlayChange(overlay, floatingGroup)
observeGroup(floatingGroup)
createGroupActions(floatingGroup, groupType)
+ if(floatingGroup.panels.length == 1) {
+ moveAlwaysRenderPanel(floatingGroup.activePanel)
+ }
return floatingGroup
</code_context>
<issue_to_address>
moveAlwaysRenderPanel is only called for single-panel floating groups.
This logic may not handle multi-panel floating groups correctly. Please review whether always-render panels should be moved for all group sizes.
</issue_to_address>
### Comment 4
<location> `src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js:28` </location>
<code_context>
})
}
+const moveAlwaysRenderPanel = panel => {
+ if (panel.group.model.location.type === 'floating' && panel.renderer == 'always') {
+ if (panel === panel.group.activePanel) {
</code_context>
<issue_to_address>
moveAlwaysRenderPanel mutates parentEle property on DOM element.
Attaching custom properties to DOM elements can cause conflicts and is not recommended. Use a WeakMap or similar structure to associate data with elements instead.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+9799
to
+9804
| const isDestinationGroupEmpty = destinationGroup.model.size === 0; | ||
| this.movingLock(() => { | ||
| var _a; | ||
| return destinationGroup.model.openPanel(removedPanel, { | ||
| index: destinationIndex, | ||
| skipSetActive: (_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false, | ||
| skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) && !isDestinationGroupEmpty, |
There was a problem hiding this comment.
question: skipSetActive logic may be confusing when destination group is empty.
Document or refactor the logic so that callers are aware skipSetActive will be set to false when the destination group is empty, even if they pass true.
Comment on lines
+13
to
+15
| will-change: background-color, transform; | ||
| transform: translate3d(0, 0, 0); | ||
| backface-visibility: hidden; |
There was a problem hiding this comment.
suggestion (performance): Consider limiting will-change usage to avoid excessive GPU layers.
Limit will-change to elements where GPU acceleration provides a clear benefit to prevent unnecessary memory and performance overhead.
Suggested implementation:
/* GPU optimizations */
/* Removed will-change to avoid unnecessary GPU layers */
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
/* GPU optimizations */
will-change: transform, opacity;
transform: translate3d(0, 0, 0);
Comment on lines
+560
to
+561
| if(floatingGroup.panels.length == 1) { | ||
| moveAlwaysRenderPanel(floatingGroup.activePanel) |
There was a problem hiding this comment.
question: moveAlwaysRenderPanel is only called for single-panel floating groups.
This logic may not handle multi-panel floating groups correctly. Please review whether always-render panels should be moved for all group sizes.
| }) | ||
| } | ||
|
|
||
| const moveAlwaysRenderPanel = panel => { |
There was a problem hiding this comment.
suggestion: moveAlwaysRenderPanel mutates parentEle property on DOM element.
Attaching custom properties to DOM elements can cause conflicts and is not recommended. Use a WeakMap or similar structure to associate data with elements instead.
| // Use traditional positioning for overlay containers | ||
| const left = box.left - box2.left; | ||
| const top = box.top - box2.top; | ||
| const width = box.width; |
There was a problem hiding this comment.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)
Suggested change
| const width = box.width; | |
| const {width} = box; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
| const left = box.left - box2.left; | ||
| const top = box.top - box2.top; | ||
| const width = box.width; | ||
| const height = box.height; |
There was a problem hiding this comment.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)
Suggested change
| const height = box.height; | |
| const {height} = box; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
ArgoZhang
changed the title
ArgoZhang
approved these changes
Sep 2, 2025
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 #566
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Upgrade Dockview to version 4.7.1 with compatibility and performance improvements
New Features:
Bug Fixes:
Enhancements:
Build: