Investigate on the scrolling and zooming behavior

[tyf0420]

Task

Investigate on the scrolling and zooming behavior.

1. Look in to how similar products (draw.io, alteryx, rapidminer) handle zoom and scroll. (Also check the canvas space limit)
2. Modify the current behavior of mouse scrolling.
   • Check the code at component/workflow-editor/workflow-editor.component.ts
   • Check JointJS documentation
3. Try to add the size limit to the paper.

Investigate similar products

Product Name	Picture	whether handle zoom while scrolling (mousewheel event)	whether the paper/canvas size is fixed / has limit	what happen when scrolling (mousewheel event)	what happen when click+mousemove (mousemove event)	how to select multiple operators
draw.io		No	Yes	move the canvas	select multiple operators	click+mousemove / shift+click
Alteryx		No	Yes	move the canvas (only up and down, the horizontal move must be done by clicking the scrolling bar)	select multiple operators	click+mousemove / shift+click
RapidMiner		No	Yes	nothing (the canvas is fixed)	select multiple operators	click+mousemove / shift+click
Texera (before any changes)		Yes	No	zoom	move the canvas	shift+click

*After the comparison, Texera is different from other three products in some ways. It cannot select multiple operators using click+mousemove, so it may be a little troublesome if user wants to select many operators simultaneously.

Modify the current behavior of mouse scrolling

In the workspace/component/workflow-editor/workflow-editor.component.ts, there is a function called handlePaperMouseZoom(), which handles zoom events when user slides the mouse wheel. So I just comment out line 132 in function ngAfterViewInit.

ngAfterViewInit() {
...
// this.handlePaperMouseZoom();
...
}

But after commenting out the function handlePaperMouseZoom(), when scrolling the mouse wheel, the canvas is fixed, nothing would be down. The canvas would not move as scrolling.

[tyf0420]

Task

Modify the scrolling and zooming behavior.

1. Enable the zooming while scrolling and pressing the command key.
2. Move the canvas while scrolling.

Enable the zooming

Add one more condition to the original function which controls zooming functionaility, this.handlePaperMouseZoom(), so the paper would only move while scrolling and pressing metaKey (command key on Macintosh keyboards, Windows key on Windows keyboards) or ctrlKey.

Move the canvas while scrolling

Can move the canvas while scrolling, but there are some bugs.

Problem: In the current method that handles user mouse drag events to pan JointJS paper, it calculates the pan offset between user click on the mouse and then release the mouse (based on the coordinate of PointerDown (mouse down) and the coordinate of mousemove event).

However, for the WheelEvent (Events that occur due to the user moving a mouse wheel or similar input device), it is hard to use coordinate because the mouse actually doesn't move when scrolling, so I cannot use coordinate differences to calculate the pan offset.

Now I'm emulating the coordinate method, but create one more private variable to make a record of coordinate, and change that coordinate by deltaX or deltaY (The deltaY property returns a positive value when scrolling down, and a negative value when scrolling up, otherwise 0).

[tyf0420]

Task

1. Fix the bug of scrolling behavior.
2. Set the canvas limit based on the bounding operators. (emulate g6-editor)

Fix the bug of scrolling behavior

Already fixed the bug of scrolling. Now while users are scrolling, the canvas would move smoothly. Mainly use this.getJointPaper().translate() to get the current position/translate, and event.deltaX, event.deltaY to get pan offset.

Set the canvas limit

Set the canvas limit based on the bounding operators. (emulate the behaviors in g6-editor)

If the operator has already been placed near the bound, and then the window/canvas is shrank, the operator would automatically modify its position.

[tyf0420]

835

Finished this issue.