[Enhancement] Multiple alignment options

[andreyvital]

Hey @DWilliames — thanks for this plugin, it's a life-saver!

Do I have any syntax for applying middle + center? I tried Group [cm], Group [c m] and Group [c, m] but it doesn't kick in :(

If there's no support for this at moment, it would be nice as an enhancement. We could combine vertical + horizontal alignment strategies. Freaking cool.

Once again, thanks a lot buddy! 🍻

[DWilliames]

Thanks for reaching out @CentaurWarchief!

Unfortunately it doesn't support multiple alignments at the moment. I never thought there would be a case that someone would need it.

Just curious; in what scenario would you want middle + center?

[andreyvital]

Well, let's say that I have a rectangle with a triangle inside, I want to keep it in the middle, plus in the center if I resize the rectangle both ways

I'm new to Sketch, so I am probably messing up somewhere

[DWilliames]

Ah cool! @CentaurWarchief. Thanks makes sense. Yeah I'll try an incorporate multiple alignments.

I was thinking, to just separate them by a space? e.g. [m c] or [c m] Does that seem like the best approach?

The only thing is, that it won't work with spacing as well. e.g. [10v m c], since it's impossible to align them in the middle, centre, and still space them vertically :P

[andreyvital]

Correct @DWilliames — in this case we shouldn't consider 10v/h. But it does make a lot of sense to have control of both axes.

Here's a diagram I drew:

So whenever I'd use one of those, it would be always relative to the rectangle size, instead of a fixed number like [10 10]. I often have issues with "that" 'cause like... what if I want all my button defaults to go 150/width—40/height, I wouldn't be able without something like this—just because paddings are within the rectangle, so if I grow its width & height, it would sum the paddings. See what I mean?

Right, you can argue that I can minus top and left from the rectangle width/height, but... you know, you did the plugin for us to get away from math class and avoid manual calculations 😝

Thanks, David!

[andreyvital]

Btw, the syntax should always follow: [y-axis x-axis], hence: [t m] as for top/middle

[vic-tian]

A case for middle/center are various elements with graphics centered, or buttons. I think it is a valid case. Another one would be image that should be centered within an element.

I would like to use [ c m ]. Have you thought for percentage or negative values (using CSS):

[ 50% 50%] or [-10v m]

Thanks for this plugin, it is amazing!

A design case for multiple layout options - the icons should be always centered, and 20px from the top, the text is centered and fixed size. I used Anima app auto layout with pins to maintain the icon and text block in the center, but I can see how this would be redone with Paddy to be much easier to work with.

[DWilliames]

Totally makes sense to make it work for [c m].

@vic-topcoder Paddy should already work for negative values. [-10v m] should do as intended already; as far as I'm aware :P

I hadn't thought of percentages though. How would you envision that working?

[DWilliames]

@CentaurWarchief I have just released version 1.0.3 that should now work with multiple alignment options. I'll close this issue for now. If you find the issue still persists, then please re-open it. 👍

[andreyvital]

Thanks @DWilliames — such a great improvement!