the problem when when using transform: scale()

[mfma]

When the parent box add "transform:scale()", rnd is incorrect to drag or resize it。

[bokuweb]

@mfma Could you please provide reproduced project on webpackbin with latest version rnd? https://www.webpackbin.com/bins/-Ku4nRhImIfnt9N08lGu

[ryanlegler]

See example below where I've added a "transform:scale()" to parent div.
https://www.webpackbin.com/bins/-KwaJCSIKJcVRtsZ5Hn4

[bokuweb]

@ryanlegler Thanks. If you set transform:scale to Rnd component directly, transform is overwritten by react-draggable probably.

See related issue, #185

[ryanlegler]

@bokuweb thanks for your response - I think the issue described here is slightly different than the related issue you linked to. The scale in question is on a parent div of the react-draggable component. The issue isn't that the scale is overwritten, it's that the pixel calculation made by react-rnd are incorrect because of the scaled context that it's in. From digging around a bit i found this: https://github.com/mzabriskie/react-draggable/pull/217/files Looks like this issue is being looked at. Hopefully the pull request will get merged in so the scale param could be exposed in react-rnd.

[koutsenko]

Any news?

[g33kidd]

Doesn't look like that PR has been merged yet 😢 would love to see this!

[gaddafirusli]

Would love to get this one merged too. Any updates?

[travisdahl]

I was hoping as an escape hatch that this would work, but alas, it does not...

    const style = {
      transform: `translate(${x}px, ${y}px) scale(0.8) !important`
    };

      <Rnd
        style={style}
...

there appears to be no way around it.

[vanya2h]

+1. Still can't solve this problem
But this looks like good escape https://github.com/mzabriskie/react-draggable/pull/217/files

[cadrell0]

The scale prop has been implemented in react-draggable and re-resizable

bokuweb/re-resizable#388
react-grid-layout/react-draggable#352

[AhmadMayo]

Is this going to be fixed anytime soon? Do you need any assistance to make this fix?

[mecawish]

Hi! Can we update the react-draggable dependency to the current version? It seems that the scale issue is already addressed there.

[bokuweb]

@mfma @ryanlegler @koutsenko @g33kidd @gaddafirusli @travisdahl @kv9991 @cadrell0 @AhmedSayed77 @mecawish

Sorry for late. Please try v9.1.1.

https://codesandbox.io/s/vmo9ypvwl7

[mecawish]

Working now. Thank you so much, @bokuweb !

[Hello-Tan]

@mfma @ryanlegler @koutsenko @ g33kidd @gaddafirusli @travisdahl @ kv9991 @ cadrell0 @ AhmedSayed77 @mecawish

对不起我迟到了。请尝试v9.1.1。

https://codesandbox.io/s/vmo9ypvwl7

expect support rotate

[kele5240]

i can't use rotate when i use Rnd

[dengnan123]

@mfma @ryanlegler @koutsenko @g33kidd @gaddafirusli @travisdahl @kv9991 @cadrell0 @AhmedSayed77 @mecawish

Sorry for late. Please try v9.1.1.

https://codesandbox.io/s/vmo9ypvwl7

good!