fix(dataZoom): prevent movement when zooming

[zhiyuc123]

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

prevent moving when chart is scaled to minSpan/maxSpan and moveOnMouseWheel = false

Fixed issues

#16144

Details

Before: What was the problem?

After: How does it behave after the fixing?

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

[github-actions]

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-19475@8abac91

[admsev]

@gooroodev review

[gooroodev]

1. Summary of Changes

The pull request modifies the behavior of the dataZoom feature to prevent movement when zooming. Specifically:

• It changes the scale variable from const to let to allow for reassignment.
• It adds a conditional check to determine if the scale should be set to 1 based on the minimum and maximum span constraints.
• It ensures that the range values are adjusted only if the conditions for the minimum and maximum span are not violated.

2. Issues, Bugs, or Typos in Code

• Issue: The scale calculation logic could be more readable and maintainable.
• Improvement Proposal: The conditional check and scale reassignment could be refactored for clarity.

Improved Code (Refactoring for Readability):

let scale = Math.max(1 / e.scale, 0);

// Restrict range.
const minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();

const isZoomingIn = scale < 1;
const isZoomingOut = scale > 1;
const isMinSpanReached = range[1] <= minMaxSpan.minSpan + range[0];
const isMaxSpanReached = range[1] >= minMaxSpan.maxSpan + range[0];

if ((isMinSpanReached && isZoomingIn) || (isMaxSpanReached && isZoomingOut)) {
    scale = 1;
}

range[0] = (range[0] - percentPoint) * scale + percentPoint;
range[1] = (range[1] - percentPoint) * scale + percentPoint;

sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);

this.range = range;

3. General Review of Code Quality and Style

• Variable Declaration: Changing scale from const to let is appropriate for reassignment.
• Conditional Logic: The added conditional checks are necessary to ensure that the zooming behavior respects the minimum and maximum span constraints.
• Code Readability: The refactored code improves readability by breaking down complex conditions into well-named boolean variables.
• Code Style: The code follows a consistent style, but readability can be enhanced by using descriptive variable names for conditions.

Overall, the changes are well-targeted and improve the functionality as intended. The proposed refactoring further enhances the clarity and maintainability of the code.

Yours, Gooroo.dev. To receive reviews automatically, install Github App