Jump to content
derBingle

Workflow Canvas alignment guides

Recommended Posts

First, thanks for the app that makes life so much easier!

 

When I'm creating new workflows, it would be great to be able to see when two inputs are aligned in the canvas. It may sound silly request, but I think the visual design of workflows really helps people understand how they work.

 

The current grid snapping helps, but if alignment guides appeared when things are aligned and/or evenly spaced, a la Pages or Keynote, would be super helpful and make all our Workflows that much better.

 

I added a screenshot with what alignment guides might look like just for reference

 

Thanks!

example.png

Share this post


Link to post
Share on other sites

@vitor not really related - that post is for Alfred v2 where workflow layout was fixed to 4 pre-defined columns. I've worked on auto layout systems in the past, and these are hardly ever effective, as while you can do some automatic arbitrary layout, you can never get in the head of the user and how they actually want it laid out.

 

@derBingle I'll add a ticket for this, as it's actually something I've thought about a few times in the past :)

 

Cheers,

Andrew

Share this post


Link to post
Share on other sites

Decided to sneak this into the upcoming 3.4 release, this will be in the next pre-release (probably tomorrow), available as an option from the popup menu on the workflow editor canvas :)

 

alignment guides.png

 

It essentially shows guides for the object you are currently interacting with (hover / drag).

 

Cheers,

Andrew

Share this post


Link to post
Share on other sites

Hi @Andrew, I like this new feature, but I find it a little too much intrusive at the moment... what about making the guidelines appear when we click and hold an object instead of directly when we are hovering it ? I think this is how most applications with draggable components work. Or some applications show the guidelines when two components move into an aligned position. With this last method we could see that we are aligned even when we move an object with the arrows... Nevertheless, I like the feature, just giving some ideas ;) !

Share this post


Link to post
Share on other sites

Though I understand the sentiment, I disagree completely with @GuiB.

 

If the guidelines only appeared when clicking and holding, making sure everything was properly aligned would take longer and be a chore, not to mention we could inadvertently move something. As it is, we can check everything fast.

 

Showing the guides only when objects align is less flexible and would require more coding to make the feature work. When most other software does it, it doesn’t typically just show the guides, it snaps the objects into alignment (though I don’t think that’s what being asked, but it’s a tangential point).

Share this post


Link to post
Share on other sites

@GuiB I've actually already made a few tweaks for the next build where you can leave this disabled and just hold the options key when you want to see the alignment guides. This will be in pre-release later today, or possibly tomorrow.

 

Cheers,

Andrew

Share this post


Link to post
Share on other sites

@vitor I understand what you mean and yes the way you describe it makes sense that it's faster to align with the way it's now implemented. However, I think we just have different workflow for that, I like to align the object directly when it is created instead of aligning everything when all the objects are on the canvas. As for showing the guides when the objects align, I'm completely with you and don't think this is really needed to be implemented for Alfred, I was mainly thinking of a way to show the guides when we move an object with the arrow keys. I was thinking that maybe the guides could pop for 1 second or something like that when the moved object align with another... but I know this would take more time coding and I'm not sure the extra work would be that much worth it.

 

@Andrew I like your idea and was also thinking that maybe a faster way to toggle the feature would make it for me, but was wondering what would be the best and fastest way without changing the interface and, now that you say it, I think that your solution would be the best to suit both way of building a workflow (my way and vitor's way). So, thanks for having another look at it! Also, to give you some more ideas... maybe this is part of your tweaks for the next build, but I thought that to make it works with the move by arrow keys, the option key could show de guides when the cursor is over an object (like it is now), but it could also show the guides of an object when it is selected. I mean, the user click on an object, this object is now selected/highlighted, now the option key would show the guides of this object even if the cursor is moved away from it (so we keep the guides possible when moving with the arrows). However, if the cursor is now moved over another object while holding the option key, then the object with the cursor above gets the attention and the guides are showed for it. Again, I'm just giving some ideas ;)

 

--- Update ---

Just went to see if there was an update to Alfred and there was one... so I just updated it and like it better this way! Thanks! Now I would just say, what do you think of the idea to show the guides on the selected object to allow to show it when we move with the arrows? I understand this could give more trouble than it worth (ex: what to do if multiple objects are selected ? and then if the mouse is over an object, show the guides of the selected object(s) or just the one with the mouse above ?), so I'll let you decide if this is wanted or not since it may be enough as it is now.

Edited by GuiB
Update

Share this post


Link to post
Share on other sites

@GuiB It's always going to work on (initially) hovered object, but it should work when using the arrow keys... which it's not. I'll make sure that's fixed before the general release.

Share this post


Link to post
Share on other sites

Just throwing together a quick workflow this morning and did the pre-release update to check out the feature. Just wanted to hop back in and say great job! It makes so much easier to make everything look the way you want!

 

Much appreciated, @Andrew!

Share this post


Link to post
Share on other sites

@Andrew sorry for the delay! I've tested with the updated Alfred pre-release and I confirm that now the guides stay while holding the options key even if the object move past the cursor. So thanks again and I think you've got the right balance between feature usability and simplicity! Great work! :)

Share this post


Link to post
Share on other sites

(I wasn't sure if I should open up a new topic or bump this one with a comment, so feel free to move it if necessary.)

 

The guides have made it so much better... thanks again for them, @Andrew!

 

Now the only thing I miss from laying other apps is the relative spacing guides, so I can know that my objects are equally spaced from each other, like the "Show guides for relative spacing" preference in Keynote. Here's a gif of the feature, just for reference.

 

Thanks!

Share this post


Link to post
Share on other sites
On 02/10/2017 at 7:13 PM, derBingle said:

my objects are equally spaced from each other

 

I'm fairly certain there is a touch of "snap to grid" at a couple of points when your elements get close together. At least, I don't think I've imagined it…

 

I think having an actual grid is complicated by the fact that elements can have fairly arbitrary heights due to comments.

Share this post


Link to post
Share on other sites

@deanishe Interesting! I hadn't noticed them snapping into place in relation to one another, gonna have to go check it out now. I know the elements snap to grid in general, because at times I've actually resorted to counting the snaps to grid to make sure elements were equally spaced... one of those ridiculous OCD moments, I guess! :P

 

The use case for the relative spacing guides would be in workflows like the screenshot below—it'd be nice to just have a little visual confirmation that the white space between the three objects is equal.

 

alfred-example.png

Edited by derBingle
image size

Share this post


Link to post
Share on other sites

I've just poked it with a stick a bit. Basically, Alfred only lets you position elements at 10px intervals. If you want to ensure perfect alignment, select your element(s) and use the arrow keys (or SHIFT+arrow keys) for positioning.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...