search

pixelass / react-mops

🐶 Modify Orientation Position Size
https://react-mops.netlify.com/
MIT License
44 stars 7 forks source link

Is translate3d(-50%, -50%, 0) needed on wrapperStyle? #8

Open bluematter opened 5 years ago

bluematter commented 5 years ago

Problem

I am using React DND to handle dragging. I need it because redux is implemented under the hood which gives me the ability to have one drag layer and multiple layers subscribed to the movements.

I have a HOC that wraps a component and manages the x, y transform. So I am wrapping your lib with the x,y positioning. Your lib is being used for the wonderful handle logic that moves from the different corners.

I'll send the values to a higher level and rerender down to resize all the elements wrapped.

Solution

I'd simply like to see if we could remove the translate3d(-50%, -50%, 0) set on the wrapperStyle or have a way to override it.

Alternatives

I am considering managing my own state. However, I can't really do much because wrapperStyle always overrides style https://github.com/dekk-app/react-mops/blob/master/packages/react-mops/src/box.tsx#L283

Screen Recording 2019-10-04 at 10 58 AM

pixelass commented 5 years ago

I am currently working on v2 which provides hooks to build your own component. This will allow you to define your own Element and handle the style.

v1 is still rather limited in mixing with other components. You can use the as prop to render custom elements but as you correctly stated the styles are overwritten. The translation is needed since the positioning is based on the element center.

This library is still young and was extracted from an app I'm working on, so its features were based on my initial needs. Future version will add more flexibility.

pixelass commented 5 years ago

Can you create a codesandbox to illustrate your issue? Maybe I can find a fix for you.

pixelass commented 5 years ago

@bluematter Can you create a codesandbox of your issue?

Template: https://codesandbox.io/s/react-mops-issue-template-jodfo

I am closing in on v2 and would like to see if you issue can be tackled with the new mechanisms.

bluematter commented 5 years ago

I'll see if I can put something together soon. Currently hitting it hard on https://storycreatorapp.com. Dragging and dropping is one of the main features of the app.

I am using https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer. Redux is being used under the hood. Then I have another resizing element that listens to the drag and uses CSS transforms to move.

The reason I am doing this is that I believe it's a better UX to have the content in the drag be hidden and the resizer be shown.

Screen Shot 2019-10-08 at 5 05 09 PM

I really like your library and think its awesome work. I am struggling with getting the performance down and want a solution that is a little less of a headache. However, there are limitations, this being one of them.

pixelass commented 5 years ago

Performance has been improved in v2. I‘ll ping you if I have an alpha/beta