[FEAT] Add a new API to zoom the BPMN diagram #1988
Merged
Conversation
This file contains 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
tbouffard
added
enhancement
|
♻️ PR Preview 6dcb1b8 has been successfully destroyed since this PR has been closed.
🤖 By surge-preview |
|
♻️ PR Preview 6dcb1b8 has been successfully destroyed since this PR has been closed.
🤖 By surge-preview |
The API lets do zoom in and zoom out from the center of the bpmn-container.
Introduce the `Navigation` class that exposes all diagram navigation features. It also includes the existing `fit`
function. The former one that is defined in `BpmnVisualization` class is deprecated to not break compatibility. It will
be removed in a future release.
The demo and the diagram test page displays zoom buttons to demonstrate the usage of the new API.
In the demo page:
- the zoom buttons replace the zoom debounce/throttle settings. They were only displayed for information and weren't
useful for the end user.
- some elements like labels could previously get focus. This is now fixed.
Refactor
- In BpmnGraph, the `cumulativeZoomFactor` has been renamed into `currentZoomLevel` for clarification.
Rationale: in mxGraph code, `factor` properties are not naming scale values, but a value used to multiply the scale.
Here, we use something related to the scale, so we couldn't keep using the `factor` name.
- In e2e tests, clarify the signature of the `pageTester.mouseZoom` utils method:
- Use zoomType instead of `deltaX` values. Arbitrary `deltaX` values were used at several places. The value is too
much tight to the mouse event implementation. The zoom type is now clearer and this reduces usage of duplicated
constants.
- Put the xTimes parameter at the end of the signature to allow default values. This also makes the signature
consistent with the new `doZoomWithButton` function.
tbouffard
changed the title
|
Kudos, SonarCloud Quality Gate passed! |
csouchet
reviewed
Jun 1, 2022
| it.each(['zoom in', 'zoom out'])(`ctrl + mouse: %s`, async (zoomMode: string) => { | ||
| const deltaX = zoomMode === 'zoom in' ? -100 : 100; | ||
| await pageTester.mouseZoom(1, { x: containerCenter.x + 200, y: containerCenter.y }, deltaX); | ||
| it.each([ZoomType.In, ZoomType.Out])(`ctrl + mouse: zoom %s`, async (zoomType: ZoomType) => { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The API lets do zoom in and zoom out from the center of the
bpmn-container.Introduce the
Navigationclass that exposes all diagram navigation features. It also includes the existingfitfunction. The former one that is defined in
BpmnVisualizationclass is deprecated to not break compatibility. It willbe removed in a future release.
IMPORTANT: the new Zoom API doesn't go through the throtlle/debounce mechanism that exists when zooming with the scroll wheel.
The demo and the diagram test page displays zoom buttons to demonstrate the usage of the new API.
In the demo page:
useful for the end user.
Refactor
cumulativeZoomFactorhas been renamed intocurrentZoomLevelfor clarification.Rationale: in mxGraph code,
factorproperties are not naming scale values, but a value used to multiply the scale.Here, we use something related to the scale, so we couldn't keep using the
factorname.pageTester.mouseZoomutils method:deltaXvalues. ArbitrarydeltaXvalues were used at several places. The value is toomuch tight to the mouse event implementation. The zoom type is now clearer and this reduces usage of duplicated
constants.
consistent with the new
doZoomWithButtonfunction.closes #1487
API usage
zoom
fit
before (now deprecated)
now
E2E tests
Initially, it was planned to do cross button and mouse zoom tests. It seems that we are not computing the center of the container in the same way so we see some small discrepancies.
In a first implementation, only one test is performed.
Screenshots
demo page in action
demo_page_zoom.mp4
diagram-navigation.html test page