Botframework-composer: Flow Editor zoom in / zoom out

[yeze322]

In Flow Edtior, the canvas could be zoomed in / zoomed out by either keyboard shortcuts or a minimap.

1. Use Ctrl + Mouse wheel to zoom in / zoom out;
2. Use Mouse Right Click + drag to move the focus area.

[yeze322]

@sangwoohaan @DesignPolice guys do you think my solution is okay? Or do we have a UX design for

• What's the expected behavior to control the zoom of the action canvas?
• When it's zoomed in, shall we provide a way to move the focus window to a different area? (mouse drag or minimap?)

[sangwoohaan]

I don't think we are ready to move forward with this feature yet.

[bradrlaw]

@sangwoohaan The approach in ML Studio may be a viable option since they are both tackling the same key issue of navigating around a flow. They also put in buttons for quick resizing and you can move around the mini-map as well:

Another simple option could be using the design we have in viso, powerpoint, etc... Leave the area scrollable as it is now but have a slider or a popup for the zoom:

Code / Teams seem to differ a bit in behavior. They both support ctrl +/-, but only teams supports ctrl + scroll wheel.

[mareekuh]

@yeze322 please work with Vivek on this.
@vivekkshankar Please connect with Thad if there are any updates to what is currently in PVA. If not, enable the following (functionality & look and feel)

[DesignPolice]

Always nice to be CC’d on things – I can help til Thursday. 😊
m

From: mareekuh [e-mail]
Reply-To: microsoft/BotFramework-Composer [e-mail]
Date: Monday, September 14, 2020 at 2:44 PM
To: microsoft/BotFramework-Composer [e-mail]
Cc: Marc Bostian [e-mail], Mention [e-mail]
Subject: Re: [microsoft/BotFramework-Composer] Flow Editor zoom in / zoom out (#3449)

@yeze322https://github.com/yeze322 please work with Vivek on this.
@vivekkshankarhttps://github.com/vivekkshankar Please connect with Thad if there are any updates to what is currently in PVA. If not, enable the following (functionality & look and feel)

[Screen Shot 2020-09-14 at 2 40 34 PM]https://user-images.githubusercontent.com/48503434/93141251-b88e0b00-f698-11ea-969c-719a884abfdb.png
[Screen Shot 2020-09-14 at 2 40 28 PM]https://user-images.githubusercontent.com/48503434/93141255-b926a180-f698-11ea-9e00-f5dd2c07c4c1.png
[Screen Shot 2020-09-14 at 2 40 16 PM]https://user-images.githubusercontent.com/48503434/93141258-b9bf3800-f698-11ea-9838-952214d06e71.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/microsoft/BotFramework-Composer/issues/3449#issuecomment-692330659, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AKZA5RAWOK2QGBXOPCT4E63SF2FEPANCNFSM4OEOAQBQ.

[sangwoohaan]

It's a ghost!!!

[yeze322]

cc @alanlong9278

[vivekkshankar]

I took a stab at defining this: https://www.figma.com/file/deFhMPBnRWxTYiYDYqYxrc/Composer-Vivek?node-id=8457%3A0

@mareekuh I will connect with Thad but I do feel given that flows in composer tend to be more complex, I feel we need to invest in introducing semantic zoom (to ensure readability at smaller sizes) and not just physical zoom (Like what PVA does).