Comments (6)
I've made a simple React component with hooks to add a child element into the ResizableRect.
Demo
https://codesandbox.io/s/5zk612nvk4
ResizableContent.jsx
import React, { Fragment, useState } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable'
const ResizableContent = (props) => {
const [width, setWidth] = useState(props.width)
const [height, setHeight] = useState(props.height)
const [top, setTop] = useState(props.top)
const [left, setLeft] = useState(props.left)
const [rotateAngle, setRotateAngle] = useState(props.rotateAngle)
const contentStyle = { width, height, top, left, transform: `rotate(${rotateAngle}deg)`, position: 'absolute' }
const handleResize = (style, isShiftKey, type) => {
let { top, left, width, height } = style
setWidth(Math.round(width))
setHeight(Math.round(height))
setTop(Math.round(top))
setLeft(Math.round(left))
}
const handleRotate = (rotateAngle) => {
setRotateAngle(rotateAngle)
}
const handleDrag = (deltaX, deltaY) => {
setLeft(left + deltaX)
setTop(top + deltaY)
}
return (
<Fragment>
<div style={contentStyle}>
{props.children}
</div>
<ResizableRect
top={top}
rotatable
left={left}
aspectRatio
minWidth={10}
width={width}
minHeight={10}
height={height}
onDrag={handleDrag}
onRotate={handleRotate}
onResize={handleResize}
zoomable='nw, ne, se, sw'
rotateAngle={rotateAngle} />
</Fragment>
)
}
export default ResizableContent
index.jsx
import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'
import ResizableContent from './ResizableContent'
const App = () => {
return (
<Fragment>
<ResizableContent
top={100}
left={100}
width={100}
height={100}
rotateAngle={0}>
<div className='content content1'>content 1</div>
</ResizableContent>
<ResizableContent
top={100}
left={300}
width={300}
height={300}
rotateAngle={0}>
<div className='content content2'>content 2</div>
</ResizableContent>
</Fragment>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
from react-resizable-rotatable-draggable.
I'm assuming you want to drag-drop and resize the button, right?
So what you need to do is passing left, top, width and height of this button to the component, and every handle function(e.g. handleResize) will return a corresponding value, then apply this value to your button. Hope that helps!
from react-resizable-rotatable-draggable.
I am stuck doing on the same thing, Would you be able to provide an quick example on this please ?
from react-resizable-rotatable-draggable.
I am stuck doing on the same thing, Would you be able to provide an quick example on this please ?
import React, { Component } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable'
class App extends Component {
constructor() {
super()
this.state = {
width: 100,
height: 100,
top: 100,
left: 100,
rotateAngle: 0
}
}
handleResize = (style, isShiftKey, type) => {
// type is a string and it shows which resize-handler you clicked
// e.g. if you clicked top-right handler, then type is 'tr'
let { top, left, width, height } = style
top = Math.round(top)
left = Math.round(left)
width = Math.round(width)
height = Math.round(height)
this.setState({
top,
left,
width,
height
})
}
handleRotate = (rotateAngle) => {
this.setState({
rotateAngle
})
}
handleDrag = (deltaX, deltaY) => {
this.setState({
left: this.state.left + deltaX,
top: this.state.top + deltaY
})
}
render() {
const {width, top, left, height, rotateAngle} = this.state
const buttonStyle = { width, height, top, left, transform: `rotate(${rotateAngle}deg)`, position: 'absolute' }
return (
<div className="App">
<button style={buttonStyle} />
<ResizableRect
left={left}
top={top}
width={width}
height={height}
rotateAngle={rotateAngle}
// aspectRatio={false}
// minWidth={10}
// minHeight={10}
zoomable='n, w, s, e, nw, ne, se, sw'
// rotatable={true}
// onRotateStart={this.handleRotateStart}
onRotate={this.handleRotate}
// onRotateEnd={this.handleRotateEnd}
// onResizeStart={this.handleResizeStart}
onResize={this.handleResize}
// onResizeEnd={this.handleUp}
// onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
// onDragEnd={this.handleDragEnd}
/>
</div>
)
}
}
export default App
Notice the only difference between this code and usage in the documentation is I added a button
tag
in the div.App
, and I apply the style in the state to this button, so that the button will always behaves the same way as the resizer does
from react-resizable-rotatable-draggable.
I am stuck doing on the same thing, Would you be able to provide an quick example on this please ?
import React, { Component } from 'react' import ResizableRect from 'react-resizable-rotatable-draggable' class App extends Component { constructor() { super() this.state = { width: 100, height: 100, top: 100, left: 100, rotateAngle: 0 } } handleResize = (style, isShiftKey, type) => { // type is a string and it shows which resize-handler you clicked // e.g. if you clicked top-right handler, then type is 'tr' let { top, left, width, height } = style top = Math.round(top) left = Math.round(left) width = Math.round(width) height = Math.round(height) this.setState({ top, left, width, height }) } handleRotate = (rotateAngle) => { this.setState({ rotateAngle }) } handleDrag = (deltaX, deltaY) => { this.setState({ left: this.state.left + deltaX, top: this.state.top + deltaY }) } render() { const {width, top, left, height, rotateAngle} = this.state const buttonStyle = { width, height, top, left, transfrom: `rotate(${rotateAngle}deg)`, position: 'absolute' } return ( <div className="App"> <button style={buttonStyle} /> <ResizableRect left={left} top={top} width={width} height={height} rotateAngle={rotateAngle} // aspectRatio={false} // minWidth={10} // minHeight={10} zoomable='n, w, s, e, nw, ne, se, sw' // rotatable={true} // onRotateStart={this.handleRotateStart} onRotate={this.handleRotate} // onRotateEnd={this.handleRotateEnd} // onResizeStart={this.handleResizeStart} onResize={this.handleResize} // onResizeEnd={this.handleUp} // onDragStart={this.handleDragStart} onDrag={this.handleDrag} // onDragEnd={this.handleDragEnd} /> </div> ) } } export default AppNotice the only difference between this code and usage in the documentation is I added a
button
tag
in thediv.App
, and I apply the style in the state to this button, so that the button will always behaves the same way as the resizer does
Resize proper working , but rotate not working with this code
from react-resizable-rotatable-draggable.
oops, I made a typo in the buttonStyle, it should be transform
instead of transfrom
.
updated
from react-resizable-rotatable-draggable.
Related Issues (20)
- Can't create custom styles for Component HOT 2
- unable to work with touch devices
- How to get ‘e’? HOT 1
- Not an issue more of curiosity HOT 1
- 兄弟,为什么不在组件内支持放置子组件呢? HOT 1
- Transformed parent
- Is this project being maintained? I want to contribute to it during Hacktoberfest!
- Warning: Prop `className` did not match. Server: "StyledRect-sc-1uso172-0 eRDgKF rect single-resizer" Client: "StyledRect-sc-1uso172-0 gblcbk rect single-resizer"
- Consider accepting Components or Elements as children HOT 1
- How do i disable dragging and resizing? HOT 1
- Easy method to show or hide 'handles and controls'?
- Add argument in handleResize or handleDrag method HOT 1
- can i add components or content inside the resizable box, if yes then how ? HOT 3
- Disable resize borders when component is not selected HOT 1
- Need boundary limit for the component HOT 1
- TypeError: Cannot read property 'getBoundingClientRect' of undefined HOT 1
- react 17+ support HOT 1
- Snapping/Snap to grid HOT 1
- Need zIndex prop for ResizableRect
- Consider removing dependency to styled-components HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-resizable-rotatable-draggable.