diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index f073392..5eed69c 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -103,14 +103,6 @@ class Component extends React.PureComponent { - - - - -
-
@@ -107,6 +104,6 @@ export class Component extends React.PureComponent { const mapStateToProps = ({ user: { user } }) => ({ user }); -const mapDispatchToProps = dispatch => bindActionCreators({ setUser, userLogout }, dispatch); +const mapDispatchToProps = dispatch => bindActionCreators({ setUser, userLogout, takeAShot }, dispatch); export const UserPanel = connect(mapStateToProps, mapDispatchToProps)(Component); diff --git a/src/components/renderer/Renderer.jsx b/src/components/renderer/Renderer.jsx index fddff6d..d79f1e2 100644 --- a/src/components/renderer/Renderer.jsx +++ b/src/components/renderer/Renderer.jsx @@ -16,15 +16,20 @@ type Props = { }; type State = { - + opacity: Number, }; class Component extends React.Component { + state = { + opacity: 0, + }; + onImageLoaded = () => { this.croppr = new Croppr(this.image, { - onCropMove: this.moveLogo, onInitialize: this.onCropInit, }); + + this.setState({ opacity: 1 }); }; componentWillUnmount() { @@ -32,13 +37,9 @@ class Component extends React.Component { } onCropInit = (crop) => { - - const { regionEl, box } = crop; const scale = ((box.x2 - box.x1) / window.innerWidth); - console.log('CROP', crop, scale); - this.logo = document.createElement('div'); this.logo.className = 'renderer-logo'; this.logo.style.transform = `scale(${scale})`; @@ -50,20 +51,13 @@ class Component extends React.Component { regionEl.append(this.logo); }; - moveLogo = ({ x, y, width, height }) => { - if (!this.logo) return; - - this.logo.style.color = 'blue'; - }; - croppr; - getImage = () => { - this.props.cropAShot(this.croppr.getValue()); - }; + getImage = () => this.props.cropAShot(this.croppr.getValue()); render() { const { data } = this.props; + const { opacity } = this.state; const { innerWidth, innerHeight } = window; const padding = 30; const paddingBottom = 80; @@ -80,13 +74,10 @@ class Component extends React.Component {
{ onClick={this.props.hideRenderer} > + Отмена