fix: add findActiveAnchor fallback for bound flicking #851
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.
Issue
#850
https://codepen.io/malangfox/pen/WNmPemg
Pressing the moveTo button, opening the console, and dragging the flicking should reproduce it.
Details
Position is not reachable error occurs when using the
moveTo
method for the first panel withbound: true
.In the above demo, when 4 Panels are placed, the total number of Anchors is 2.
This is because the Panel labeled 1 and the Panel labeled 2 share the same Anchor point.
Similarly, the panel with 3 and the panel with 4 share the same anchor point.
This is because there is no way to send Panels 1 / 4 to the center with the bound option enabled, which removes the left and right empty spaces.
This means that in this situation, only the Anchor points of Panel 2 and Panel 3 exist.
If we use the
moveTo
method with Panel 1, the Anchor point we stop at is the Anchor of Panel 2, but the index of the active Panel in the flicking will be the first Panel.In this situation,
moveToPosition
, which calculates the arrival point at the end of a drag withmoveType: "snap"
, has the following logic.and
findActiveAnchor
behaves as follows.The
activeIndex
is Panel 1, but none of the anchors corresponds to Panel 1, so it returns null.Since
activeAnchor
is null, an error message is raised via Promise.reject.I handled the exception of the
findActiveAnchor
by returning the closest Anchor to the active panel's position as a fallback if no corresponding Anchor for the active panel exists.