diff --git a/src/renderers/atomics/Image/index.jsx b/src/renderers/atomics/Image/index.jsx index e519c8bb..f9907209 100644 --- a/src/renderers/atomics/Image/index.jsx +++ b/src/renderers/atomics/Image/index.jsx @@ -13,13 +13,69 @@ export default class Image extends React.Component { sizeEditorVisible: false, tempLink: null, tempWidth: null, - tempHeight: null + tempHeight: null, + showChangeSizeIcon: true + } + initialLeft + initialTop + initialWidth + initialHeight + reSizeType + + changeSize = e => { + let type = this.reSizeType + if(!this.initialLeft){ + this.initialLeft = e.screenX + this.initialTop = e.screenY + } + if(type === 'rightbottom'){ + this.initialHeight += e.screenY-this.initialTop + this.initialWidth += e.screenX-this.initialLeft + } + if(type === 'leftbottom'){ + this.initialHeight += e.screenY-this.initialTop + this.initialWidth += -e.screenX+this.initialLeft + } + + + this.initialLeft = e.screenX + this.initialTop = e.screenY + } + + moveImage = (e) => { + + this.changeSize(e) + + this.setState({ + tempWidth: Math.abs(this.initialWidth), + tempHeight: Math.abs(this.initialHeight) + }) + } + + upImage = () => { + this.confirmImageSize() + document.removeEventListener('mousemove',this.moveImage) + document.removeEventListener('mouseup',this.upImage) + this.setState({showChangeSizeIcon : false}) + } + + repareChangeSize = type => (e) => { + this.reSizeType = type + this.setState({showChangeSizeIcon : true}) + const imageRect = this.imageElement.getBoundingClientRect() + this.initialLeft = this.initialTop = 0 + this.initialWidth = imageRect.width + this.initialHeight = imageRect.height + e.preventDefault() + let that = this + document.addEventListener('mousemove',that.moveImage) + document.addEventListener('mouseup',this.upImage) } render () { const { mediaData, language, imageControls } = this.props - const { toolbarVisible, toolbarOffset, linkEditorVisible, sizeEditorVisible } = this.state + const { toolbarVisible, toolbarOffset, linkEditorVisible, sizeEditorVisible, tempWidth, tempHeight, showChangeSizeIcon } = this.state const blockData = this.props.block.getData() let float = blockData.get('float') @@ -72,6 +128,7 @@ export default class Image extends React.Component { ref={instance => this.mediaEmbederInstance = instance} className='bf-image' > + {toolbarVisible ? (