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

[bluematter]

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

[pixelass]

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]

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

[pixelass]

@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]

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.

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]

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