Allow constraint of resize axis

[edwh]

Thanks for the useful component.

I had the same requirement as #209. This change seems to do the trick for me, in the same kind of way as it already restricts dragging.

[mauricius]

Isn't it easier to just use the handles prop and define the handles that you want to enable? See also this story on Storybook.

[edwh]

I wanted the handles on the corners, where they would be more visible than in the middle.

[mauricius]

You can provide your own CSS to style handles and to set your desired position. Sorry, but it doesn't feel right to me to add a new prop for something that can be easily achieved with the current functionality.

[edwh]

It seems uglier to me to say that I should take the middle handle and style it so that it appears on the left. And I'm not sure how I could style it so that it appears on both the left and the right, which is what I want in my case.

But it's your code, and I'm grateful for it, and you're under no obligation to take the PR. Thanks for the useful library.

[mauricius]

I'm not sure I understand what you're saying. I think that an example can explain better than 1000 words. Will something like this https://codesandbox.io/s/condescending-bush-1q6l8?file=/src/App.vue work for you?

[edwh]

Thanks for taking the time to do a fiddle, that's kind.

What you've done works perfectly in terms of function. But I have several requirements:

• The resizing function is secondary. I want it to be available but I don't want or need it to be prominent - either in terms of size or position.
• I am using it on a Leaflet map, and I don't want to cover the attribution.
• I am concerned about mobile so I don't want to lose a significant proportion of screen space to the handles
• My user base already use corner handles in another scenario, but there aren't any centre handles. They aren't very IT literate, so they may not recognise a central handle at all, especially if it's different.

Here's what my PR allows me (red circles highlight the handles). I can have some handles there for people who want them, but they are not as prominent as a central dragger would be.

These are specific requirements to me. But I think the position of the handle and the function of the handle are two separate concepts.

Having said all that...it's your code. I have a fork, so if you don't like this change, then that's fine.

[mauricius]

I just changed the sandbox, based on your requirements. I still think that you can achieve what you want with the existing functionality and a bit of CSS. Take a look and let me know.

[edwh]

I want to be able to constrain the resize to just one axis. Your previous sandbox achieved that, by using just the middle handle.

But this sandbox has both handles, so the resize is not constrained to a single axis. That means I can resize the div to be wider than its parent, which I want to avoid - I want to just resize the height.

You can play with the version with the PR here: https://www.ilovefreegle.org/explore

[mauricius]

Ah ok, now I get it. I just updated the sandbox accordingly. If a single handle is ok you can style the bottom-middle handle and set its position to the bottom-right corner. Just like GitHub does for the reply textarea. Two handle in this case I don't think it's possible, unless you go with some CSS trickery. But I think that one of the examples in the sandbox can still work for you.

[edwh]

The lower one behaves as I would like - but I want two handles. Sorry :-).

Anyway, you've spent enough time on this. I'll use my fork, and you can come back to this if other people want similar function.

Thanks for your help.