Feature/scale #388
Feature/scale #388
Conversation
|
@wootencl Wooo!! so cool!! At first thanks for you r great work!! I'll review it later please just a moment :) |
| @@ -120,6 +120,7 @@ export type ResizableProps = { | |||
| onResize?: ResizeCallback, | |||
| onResizeStop?: ResizeCallback, | |||
| defaultSize?: Size, | |||
| scale: number | |||
There was a problem hiding this comment.
Could you please make it optional and I think it is better to use tuple [number, number] for this type.
This is because It is able to set scale individually for X and Y axis 馃檹
There was a problem hiding this comment.
Happy to go with the tuple approach. One comment would be for react-draggable the PR I introduced is not a tuple and follows the approach of a unified scale (x and y being identical). Will need to account for that in react-rnd, but something that can be handled when that time arrives .
As for the optionality, the reason I didn't make it optional was linting issues. At current, it is technically optional as the value will be set to 1 via the defaultProps. Flow will throw an error though as it doesn't have the ability to deduce a value is being passed/set via defaultProps (see this issue).
Can go the route of not using defaultProps and setting the value in the onMouseMove though if that's desired.
Hopefully that makes sense. Happy to expand further if not 馃檪.
There was a problem hiding this comment.
Hmm I see. Let's leave it as it is for now.
LGTM.
| @@ -408,7 +411,7 @@ export default class Resizable extends React.Component<ResizableProps, State> { | |||
| const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX; | |||
| const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY; | |||
| const { direction, original, width, height } = this.state; | |||
| const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props; | |||
| const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth, scale } = this.props; | |||
There was a problem hiding this comment.
If it make optional, we should set default value like following.
const scale = this.props.scale || [1,1];
| @@ -0,0 +1,27 @@ | |||
| /* eslint-disable */ | |||
| scale={0.5} | ||
| style={style} | ||
| defaultSize={{ | ||
| width: 200, |
| @@ -438,19 +441,19 @@ export default class Resizable extends React.Component<ResizableProps, State> { | |||
| let newWidth = original.width; | |||
| let newHeight = original.height; | |||
| if (/right/i.test(direction)) { | |||
| newWidth = original.width + (clientX - original.x); | |||
| newWidth = original.width + ((clientX - original.x) / scale); | |||
There was a problem hiding this comment.
we need to chane it like following
newWidth = original.width + ((clientX - original.x) / scale[0]);
| @@ -895,3 +895,27 @@ test.serial('should render a handleComponent for right', async t => { | |||
| t.is(node.childElementCount, 1); | |||
| t.is(handleNode.getAttribute('class'), 'customHandle-right'); | |||
| }); | |||
|
|
|||
|
@wootencl 4.10.0 published |
馃憢 Hello @bokuweb!
Added a new prop to allow for scaling of parent elements. My hope is that if/when I can get this PR merged over at
react-draggablewe can add scaling toreact-rndwhich would ideally resolve a few issues in that project as well.Happy to make any required changes as needed!