Skip to content

Commit 280869e

Browse files
STRMLSTRML
committed
refactor(Resizable): apply transformScale only once and add examples
1 parent 3178a83 commit 280869e

4 files changed

Lines changed: 68 additions & 15 deletions

File tree

‎examples/ExampleLayout.js‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,12 +111,12 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
111111
</ResizableBox>
112112
</div>
113113

114-
<h3>Absolutely Positioned layout</h3>
114+
<h3>Absolutely Positioned Layout</h3>
115115
<div className="layoutRoot absoluteLayout">
116-
<ResizableBox className="box absolutely-positioned top-aligned left-aligned" height={200} width={200} resizeHandles={['se', 'e', 's']}>
116+
<ResizableBox className="box absolutely-positioned top-aligned left-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
117117
<span className="text">Top-left Aligned</span>
118118
</ResizableBox>
119-
<ResizableBox className="box absolutely-positioned bottom-aligned left-aligned" height={200} width={200} resizeHandles={['ne', 'e', 'n']}>
119+
<ResizableBox className="box absolutely-positioned bottom-aligned left-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
120120
<span className="text">Bottom-left Aligned</span>
121121
</ResizableBox>
122122
{/* See implementation of `onResizeAbsolute` for how this can be moved around its container */}
@@ -137,14 +137,61 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
137137
<span className="text">{"Raw use of <Resizable> element with controlled position. Resize and reposition in all directions."}</span>
138138
</div>
139139
</Resizable>
140-
<ResizableBox className="box absolutely-positioned top-aligned right-aligned" height={200} width={200} resizeHandles={['sw', 'w', 's']}>
140+
<ResizableBox className="box absolutely-positioned top-aligned right-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
141141
<span className="text">Top-right Aligned</span>
142142
</ResizableBox>
143-
<ResizableBox className="box absolutely-positioned bottom-aligned right-aligned" height={200} width={200} resizeHandles={['nw', 'w', 'n']}>
143+
<ResizableBox className="box absolutely-positioned bottom-aligned right-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
144144
<span className="text">Bottom-right Aligned</span>
145145
</ResizableBox>
146146
</div>
147147

148+
<h3>Scaled Absolute Layout</h3>
149+
<div>
150+
<small>
151+
If you are nesting Resizables in an element with <code>transform: scale(n)</code>, be sure to pass the same <code>n</code>&nbsp;
152+
as the <code>transformScale</code> property.
153+
<br />
154+
This box has scale 0.75.
155+
</small>
156+
</div>
157+
<div className="layoutRoot absoluteLayout scaledLayout">
158+
<ResizableBox className="box absolutely-positioned top-aligned left-aligned" width={200} height={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
159+
<span className="text">{"<ResizableBox> with incorrect scale 1"}</span>
160+
</ResizableBox>
161+
162+
<ResizableBox className="box absolutely-positioned bottom-aligned left-aligned" width={200} height={200} transformScale={0.75} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
163+
<span className="text">{"<ResizableBox> with correct scale 0.75"}</span>
164+
</ResizableBox>
165+
166+
{/* See implementation of `onResizeAbsolute` for how this can be moved around its container */}
167+
<Resizable
168+
className="box absolutely-positioned"
169+
height={this.state.absoluteHeight}
170+
width={this.state.absoluteWidth}
171+
onResize={this.onResizeAbsolute}
172+
transformScale={0.75}
173+
resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
174+
>
175+
<div
176+
style={{
177+
width: this.state.absoluteWidth,
178+
height: this.state.absoluteHeight,
179+
margin: `${this.state.absoluteTop} 0 0 ${this.state.absoluteLeft}`,
180+
}}
181+
>
182+
<span className="text">{"Raw use of <Resizable> element with controlled position. Resize and reposition in all directions."}</span>
183+
</div>
184+
</Resizable>
185+
186+
<ResizableBox className="box absolutely-positioned top-aligned right-aligned" width={200} height={200} transformScale={0.75} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
187+
<span className="text">{"<ResizableBox> with correct scale 0.75"}</span>
188+
</ResizableBox>
189+
190+
<ResizableBox className="box absolutely-positioned bottom-aligned right-aligned" width={200} height={200} transformScale={0.75} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
191+
<span className="text">{"<ResizableBox> with correct scale 0.75"}</span>
192+
</ResizableBox>
193+
</div>
194+
148195
</div>
149196
);
150197
}

‎examples/example.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
justify-content: center;
1111
align-items: center;
1212
}
13+
.scaledLayout {
14+
width: 125%;
15+
left: -12.5%;
16+
transform: scale(0.75);
17+
margin-top: -7.5%;
18+
}
1319

1420
.box {
1521
display: flex;

‎lib/Resizable.js‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,6 @@ export default class Resizable extends React.Component<Props, ResizableState> {
9494
// Reset data in case it was left over somehow (should not be possible)
9595
if (handlerName === 'onResizeStart') this.resetData();
9696

97-
// Handle scale parameters
98-
deltaX /= this.props.transformScale;
99-
deltaY /= this.props.transformScale;
100-
10197
// Axis restrictions
10298
const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && axis !== 'n' && axis !== 's';
10399
const canDragY = (this.props.axis === 'both' || this.props.axis === 'y') && axis !== 'e' && axis !== 'w';
@@ -118,11 +114,11 @@ export default class Resizable extends React.Component<Props, ResizableState> {
118114
// Only checking 'n', 'w' since resizing by 's', 'w' won't affect the overall position on page,
119115
if (axisH === 'w') {
120116
const deltaLeftSinceLast = handleRect.left - this.lastHandleRect.left;
121-
deltaX += deltaLeftSinceLast / this.props.transformScale;
117+
deltaX += deltaLeftSinceLast;
122118
}
123-
if(axisV === 'n') {
119+
if (axisV === 'n') {
124120
const deltaTopSinceLast = handleRect.top - this.lastHandleRect.top;
125-
deltaY += deltaTopSinceLast / this.props.transformScale;
121+
deltaY += deltaTopSinceLast;
126122
}
127123
}
128124
// Storage of last rect so we know how much it has really moved.
@@ -132,9 +128,9 @@ export default class Resizable extends React.Component<Props, ResizableState> {
132128
if (axisH === 'w') deltaX = -deltaX;
133129
if (axisV === 'n') deltaY = -deltaY;
134130

135-
// Update w/h by the deltas.
136-
let width = this.props.width + (canDragX ? deltaX : 0);
137-
let height = this.props.height + (canDragY ? deltaY : 0);
131+
// Update w/h by the deltas. Also factor in transformScale.
132+
let width = this.props.width + (canDragX ? deltaX / this.props.transformScale : 0);
133+
let height = this.props.height + (canDragY ? deltaY / this.props.transformScale : 0);
138134

139135
// Run user-provided constraints.
140136
[width, height] = this.runConstraints(width, height);

‎lib/propTypes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,10 @@ export const resizableProps = {
123123
* 'ne' - Northeast handle (top-center)
124124
* */
125125
resizeHandles: PropTypes.arrayOf(PropTypes.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
126+
127+
/*
128+
* If `transform: scale(n)` is set on the parent, this should be set to `n`.
129+
* */
126130
transformScale: PropTypes.number,
127131
/*
128132
* Initial width

0 commit comments

Comments
 (0)