Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(DockView): add ShowPin parameter #155

Merged
merged 9 commits into from
Dec 3, 2024
Merged

Conversation

ArgoZhang
Copy link
Contributor

@ArgoZhang ArgoZhang commented Dec 3, 2024

add ShowPin parameter

Summary of the changes (Less than 80 chars)

Description

fixes #154

Customer Impact

Regression?

  • Yes
  • No

[If yes, specify the version the behavior has regressed from]

Risk

  • High
  • Medium
  • Low

[Justify the selection above]

Verification

  • Manual (required)
  • Automated

Packaging changes reviewed?

  • Yes
  • No
  • N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Merge the latest code from the main branch

Summary by Sourcery

Add a 'ShowPin' parameter to the DockView component to allow control over the visibility of pin icons. Enhance the component to support floating groups with customizable positions and dimensions, and introduce drawer handles for better management of floating groups.

New Features:

  • Introduce a 'ShowPin' parameter to control the visibility of pin icons in the DockView component.

Enhancements:

  • Enhance the DockView component to support floating groups with customizable positions and dimensions.
  • Add functionality to create and manage drawer handles for floating groups in the DockView component.

Copy link

sourcery-ai bot commented Dec 3, 2024

Reviewer's Guide by Sourcery

This PR adds a new ShowPin parameter to the DockView component, implementing a pin/auto-hide functionality for floating panels. The changes include significant updates to the docking system's UI behavior, panel management, and styling.

Sequence diagram for panel pinning and auto-hide functionality

sequenceDiagram
    participant User
    participant DockView
    participant Panel
    participant Group
    User->>DockView: Click pin button
    DockView->>Panel: Toggle pin state
    Panel->>Group: Update visibility
    Group->>DockView: Adjust layout
    DockView->>User: Update UI with new panel state
Loading

Class diagram for DockViewConfig with ShowPin parameter

classDiagram
    class DockViewConfig {
        bool ShowClose
        bool ShowPin
        bool ShowMaximize
    }
    note for DockViewConfig "ShowPin is a new parameter added to control the visibility of the pin button."
Loading

File-Level Changes

Change Details Files
Added pin/auto-hide functionality for floating panels
  • Added ShowPin parameter to control pin button visibility
  • Implemented pin/pushpin icons and associated UI controls
  • Added drawer-style behavior for auto-hidden panels
  • Created drawer button UI for accessing hidden panels
src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.cs
src/components/BootstrapBlazor.DockView/Components/DockViewConfig.cs
src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js
src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css
Enhanced floating panel positioning and layout management
  • Improved panel position calculation and storage
  • Added support for anchored positioning (top/right/bottom/left)
  • Enhanced panel size management and constraints
  • Implemented z-index management for overlapping panels
src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js
Improved panel state management and persistence
  • Enhanced panel configuration saving and loading
  • Added support for persisting panel positions and dimensions
  • Improved panel visibility state handling
  • Added panel active state tracking
src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js
src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js
src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js

Assessment against linked issues

Issue Objective Addressed Explanation
#154 Add ShowPin parameter to DockView component

Possibly linked issues


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

@bb-auto bb-auto bot added the enhancement New feature or request label Dec 3, 2024
@bb-auto bb-auto bot added this to the v9.0.0 milestone Dec 3, 2024
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

Overall Comments:

  • Consider removing or restoring the commented out code sections to improve maintainability and reduce confusion. If the code is no longer needed, it should be deleted rather than left commented out.
Here's what I looked at during the review
  • 🟡 General issues: 1 issue found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟡 Complexity: 2 issues found
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

arialLevelTracker.push(this._element);
}
bringToFront() {
arialLevelTracker.push(this._element);
}
setBounds(bounds = {}) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (complexity): Consider extracting overlay positioning logic into a reusable helper function.

The Overlay positioning logic could be simplified by extracting the common positioning calculations into a helper function. This would reduce code duplication and improve maintainability. Here's a suggested approach:

private calculatePosition(bounds: {
  top?: number;
  left?: number;
  bottom?: number;
  right?: number;
  width?: number;
  height?: number;
}) {
  const containerRect = this.options.container.getBoundingClientRect();
  const overlayRect = this._element.getBoundingClientRect();
  const result = { ...bounds };

  if ('top' in bounds) {
    result.top = Math.max(0, bounds.top);
    result.bottom = 'auto';
    this.verticalAlignment = 'top';
  } else if ('bottom' in bounds) {
    result.bottom = Math.max(0, bounds.bottom); 
    result.top = 'auto';
    this.verticalAlignment = 'bottom';
  }

  if ('left' in bounds) {
    result.left = Math.max(0, bounds.left);
    result.right = 'auto'; 
    this.horizontalAlignment = 'left';
  } else if ('right' in bounds) {
    result.right = Math.max(0, bounds.right);
    result.left = 'auto';
    this.horizontalAlignment = 'right'; 
  }

  return result;
}

Then simplify setBounds() and setupDrag() to use this helper:

setBounds(bounds = {}) {
  const position = this.calculatePosition(bounds);
  Object.entries(position).forEach(([key, value]) => {
    this._element.style[key] = value === 'auto' ? value : `${value}px`;
  });
  this._onDidChange.fire();
}

This refactoring:

  1. Centralizes position calculation logic
  2. Reduces code duplication
  3. Makes the positioning behavior more maintainable
  4. Preserves all existing functionality including boundary checks

@@ -74,3 +75,50 @@
}
}
}

const setVisible = DockviewComponent.prototype.setVisible
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (complexity): Consider splitting the setVisible method into smaller focused functions for better separation of concerns

The setVisible method mixes multiple concerns and uses nested conditionals. Consider extracting the z-index and sash management into focused helper functions:

function updateGroupZIndex(groupElement, isVisible) {
  groupElement.parentElement.style.zIndex = isVisible ? 'initial' : '-1';
}

function updateSashesForBranch(branch, isVisible) {
  const {orientation, splitview: {sashes}} = branch;
  const sizeStr = branch.size - 2 + 'px';

  sashes?.forEach(sash => {
    const shouldHide = !isVisible && (
      (sash.container.style.left === '0px' && sash.container.style.top === '0px') ||
      (orientation === 'HORIZONTAL' && sash.container.style.left === sizeStr) ||
      (orientation === 'VERTICAL' && sash.container.style.top === sizeStr)
    );
    sash.container.style.zIndex = shouldHide ? '-1' : '99';
  });
}

DockviewComponent.prototype.setVisible = function(...args) {
  setVisible.apply(this, args);
  const [group, isVisible] = args;
  const branch = getBranchByGroup(group);

  updateGroupZIndex(group.element, isVisible);
  updateSashesForBranch(branch, isVisible);
}

This refactoring:

  • Separates z-index management from sash positioning logic
  • Reduces nesting by extracting conditional logic
  • Makes the code more maintainable and testable
  • Preserves all existing functionality

const json = dockview.toJSON();
if(dockview.floatingGroups && dockview.floatingGroups.length > 0) {
json.floatingGroups.forEach((fg, index) => {
const width = dockview.floatingGroups[index].group.width
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)

Suggested change
const width = dockview.floatingGroups[index].group.width
const {width} = dockview.floatingGroups[index].group


ExplanationObject destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.

From the Airbnb Javascript Style Guide

@@ -163,7 +164,7 @@
if (index > -1) {
this._listeners.splice(index, 1);
}
else if (Emitter.ENABLE_TRACKING);
else if (Emitter.ENABLE_TRACKING) ;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change
else if (Emitter.ENABLE_TRACKING) ;
else if (Emitter.ENABLE_TRACKING) {


ExplanationIt is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

});
}

const autoHide = group => {
const dockview = group.api.accessor;
const type = group.model.location.type
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)

Suggested change
const type = group.model.location.type
const {type} = group.model.location


ExplanationObject destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.

From the Airbnb Javascript Style Guide

dock(group, 'drawer')
}
if(type == 'grid'){
if (!canFloat(group)) return;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change
if (!canFloat(group)) return;
if (!canFloat(group)) {


ExplanationIt is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).


btn.addEventListener('click', () => {
const fgWrapper = floatingGroup.element.parentElement
const activePanel = floatingGroup.activePanel
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)

Suggested change
const activePanel = floatingGroup.activePanel
const {activePanel} = floatingGroup


ExplanationObject destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.

From the Airbnb Javascript Style Guide

btn.addEventListener('click', () => {
const fgWrapper = floatingGroup.element.parentElement
const activePanel = floatingGroup.activePanel
const parentElement = activePanel.view.content.element.parentElement
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)

Suggested change
const parentElement = activePanel.view.content.element.parentElement
const {parentElement} = activePanel.view.content.element


ExplanationObject destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.

From the Airbnb Javascript Style Guide

const title = group.activePanel?.title || group.panels[0]?.title
const groupId = group.api.accessor.id + '_' + group.id
const btnEle = group.api.accessor.element.parentElement.parentElement.querySelector(`.bb-dockview-btn-wrapper>[groupId="${groupId}"]`)
if(!btnEle) return
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change
if(!btnEle) return
if (!btnEle) {


ExplanationIt is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

@ArgoZhang ArgoZhang merged commit 2b3938f into master Dec 3, 2024
1 check failed
@ArgoZhang ArgoZhang deleted the feat-dockview-autoHide branch December 3, 2024 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat(DockView): add ShowPin parameter
2 participants