Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #4063 and add select button #4064

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

therealharshit
Copy link
Contributor

Fixes #4063 this issue arises after the commit b5be318 I have made the required changes to it fix this issue.
@walterbender please review.

Vedio:

fix-scroll.on.select.mp4

@walterbender
Copy link
Member

Works great but you can no longer scroll by dragging the canvas. Not sure what the solution is. Maybe right-mouse button to select? Or long press and drag to select? @pikurasa any suggestions?

@therealharshit
Copy link
Contributor Author

therealharshit commented Nov 19, 2024

Works great but you can no longer scroll by dragging the canvas. Not sure what the solution is. Maybe right-mouse button to select? Or long press and drag to select? @pikurasa any suggestions?

@walterbender I think scrolling canvas by dragging was never possible in MB, it can be scrolled with the help of arrow keys.
There was a bug in this b5be318 commit which introduced it and cause this issue.

@therealharshit
Copy link
Contributor Author

therealharshit commented Nov 19, 2024

@walterbender @pikurasa I think we should add a new feature in which we can use:

  1. Left-mouse button and drag to scroll the canvas.
  2. Rigth-mouse button and drag to select.

What do you think, should I work on it.

@walterbender
Copy link
Member

We also use long press as a way to indicate right-click on devices w/o buttons (or only single buttons).

@therealharshit
Copy link
Contributor Author

We also use long press as a way to indicate right-click on devices w/o buttons (or only single buttons).

@walterbender ok I'll work on it.
I think I should raise a new PR for these functionality?
Till then if you want you can merge this PR as it resolves the current issue.

@walterbender
Copy link
Member

I don't think it is prudent to merge as is since scrolling the block container is pretty fundamental whereas select is not.

@therealharshit
Copy link
Contributor Author

I don't think it is prudent to merge as is since scrolling the block container is pretty fundamental whereas select is not.

Ok I'll update my changes in this PR only.

@therealharshit
Copy link
Contributor Author

@walterbender I have updated my changes to:

  1. Left-click to scroll.
  2. Right-click to select

Vedio:

scroll-and-select.mp4

Please review.

@walterbender
Copy link
Member

It is working for me except that when I right-click, I also get the right-click menu. I can still select the region, but it is not a very good UX.

@walterbender
Copy link
Member

Also, we need to test on some touch devices.

@therealharshit
Copy link
Contributor Author

It is working for me except that when I right-click, I also get the right-click menu. I can still select the region, but it is not a very good UX.

I tested and I didn't get right-click menu when I did right click and drag on canvas to select, right click pie menu open only when we do right click on a block (I think that's fundamental).
@walterbender could you please retest? and please share how to reproduce that.

@walterbender
Copy link
Member

I have been testing with Firefox on Fedora. Now I cannot get right click to select. Not sure why. I'll test on Chroma as well.

@walterbender
Copy link
Member

Working again after a browser refresh.
Screenshot From 2024-11-21 11-32-03

@therealharshit
Copy link
Contributor Author

Previously I was testing it by launching from index.html but this time I have also tested it by launching local web server, and still I didn't get right click menu

pie-issue.mp4

you can see I tried reproducing it but It didn't show up.
I am on windows and testing it on chrome.

@walterbender could you please tell me which of the changes I made could have caused this? or is this issue existed before my changes?
Since I am unable to reproduce it, I need your assistance.

@walterbender
Copy link
Member

I tested on chrome with the local server too. Same problem. Question: Are you in advanced mode? The right-click menu only shows up in advanced mode. Also, it would be nice to treat long press as right click too.

@walterbender
Copy link
Member

Maybe a solution might be to add select to the right-hand menu instead of invoking it directly from right click and drag?

@therealharshit
Copy link
Contributor Author

I tested on chrome with the local server too. Same problem. Question: Are you in advanced mode? The right-click menu only shows up in advanced mode. Also, it would be nice to treat long press as right click too.

@walterbender yes I was in beginner mode that's why it was not showing.

@therealharshit
Copy link
Contributor Author

Maybe a solution might be to add select to the right-hand menu instead of invoking it directly from right click and drag?

@walterbender sounds good, I'll try to implement it.

@therealharshit
Copy link
Contributor Author

@walterbender Rather than adding select to right hand menu, I have added a select button which enable select mode and allows us to select by doing right-click and drag.

select.button.mp4

How it works:

  1. When we want to select we have to click select button which enable the select mode.
  2. We can select the blocks as we like by right-click and drag, and right-hand menu doesn't opens.
  3. After selecting we can disable select mode by again clicking the select button.
  4. When select mode is disabled and we are not selecting the right-hand menu can be opened by right click.

We can scroll the block container anytime by left-click and drag.
@walterbender please test and tell me your review whether this is fine or not.
I think select button svg needs to be updated as per theme of MB please help me with that.

@walterbender
Copy link
Member

walterbender commented Nov 24, 2024 via email

@therealharshit
Copy link
Contributor Author

@walterbender I have put the select button on right-hand menu, this is how it looks

select-on-menu.mp4

In select mode we can drag and select using either of the mouse button, but here it is preferred to use left-click and drag since it will not open right-menu.
We cannot scroll the block container in select mode, for that we have to disable select mode.
@walterbender please test and review.

@therealharshit therealharshit changed the title Fixes #4063 Canvas is scrolling on drag and select Fixes #4063 and add select button Nov 26, 2024
@walterbender
Copy link
Member

Looks like a big improvement. But maybe add a notification (textMsg) that selection is enabled (and another message for when it is disabled)?

@therealharshit
Copy link
Contributor Author

Looks like a big improvement. But maybe add a notification (textMsg) that selection is enabled (and another message for when it is disabled)?

@walterbender I have added the textMsg "Select is enabled" and "Select is disabled"

Vedio:

textMsg.mp4

Please review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Canvas is scrolling on drag and select
2 participants