Visual/dragselection

[alanlong9278]

Description

Drag Selection with Fabric MarqueeSelection, includes hover, focused and selected status behavior.

• focused behavior would override selected behavior.
• selected behavior would disappear when adding or deleting steps.

Known issue

layoutNode and stepNode area is overlap. So ifCondition node will be selected when u just selected the ifCondition childNode. I will fix the bug in another pr that divides stepRenderer into layoutRenderer and leafRenderer.

Task Item

Please include the link to the related work item, like fix Something is not working

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Code refactor (non-breaking change which improve code quality, clean up, add tests, etc)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Doc update (document update)

Checklist

• I have added tests that prove my fix is effective or that my feature works
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have functionally tested my change

Screenshots

[cwhitten]

hey @alanlong9278 - great progress here and I'm glad we were able to use MarqueeSelection

some functional stuff that should be addressed:

1. Some of the border edges are is not visible for me. Sometimes it's the bottom edge, sometimes it's the top and right edges.
2. We should not track the bounds of the box outside the visual editor element. When it hits an edge, the selected area should no longer track the mouse and stay at the edge. If the mouse re-enters the visual editor element, the selected box should starting tracking the mouse again.
3. There is no way to de-select the a selected state. Clicking on a node or clicking in the grey area around the nodes should de-select the current selected state.
4. Hitting the bottom bounds of the visual editor parent element will scroll the page down. We should have the same behavior scrolling to the right of the visual editor.

[alanlong9278]

2. We should not track the bounds of the box outside the visual editor element. When it hits an edge, the selected area should no longer track the mouse and stay at the edge. If the mouse re-enters the visual editor element, the selected box should starting tracking the mouse again.
3. Hitting the bottom bounds of the visual editor parent element will scroll the page down. We should have the same behavior scrolling to the right of the visual editor.

2. The mouse behavior is controlled in the MarqueeSelection.
3. The implementation of the scroll effect is based on AutoScroll. It just support vertical scroll.

[cwhitten]

1. We should not track the bounds of the box outside the visual editor element. When it hits an edge, the selected area should no longer track the mouse and stay at the edge. If the mouse re-enters the visual editor element, the selected box should starting tracking the mouse again.
2. Hitting the bottom bounds of the visual editor parent element will scroll the page down. We should have the same behavior scrolling to the right of the visual editor.

1. The mouse behavior is controlled in the MarqueeSelection.
2. The implementation of the scroll effect is based on AutoScroll. It just support vertical scroll.

as I play with the control - you're right! that's not a great visual experience. i'm going to open an issue on the fabric-react project because I think that should be the default behavior.

[sangwoohaan]

Not sure whether this falls within the scope of this, but the individual node selection is missing the implementation of the selected state.
I'm working on designs to address the issues around the branch node that we discussed today.

[alanlong9278]

Some of the border edges are is not visible for me. Sometimes it's the bottom edge, sometimes it's the top and right edges.

@cwhitten fix the bug with using outline. it maybe due to the different resolution in Windows & Mac, you can try it again. And I tried to add integration test for the feature, but kept failing. Cypress is not good for supporting mouse event

stale