cropper: fixed empty logo case

src/components/panels/EditorPanel.jsx

@@ -103,14 +103,6 @@ class Component extends React.PureComponent<Props, void> {
               <Icon icon="icon-trash-4" />
             </button>
 
-            <button
-              className={classnames('disabled', { active: mode === MODES.SHOTTER })}
-              onClick={this.props.takeAShot}
-              // onClick={getTilePlacement}
-            >
-              <Icon icon="icon-shot-3" />
-            </button>
-
             <button
               className={classnames('disabled', { active: mode === MODES.LOGO })}
             >
@@ -147,20 +139,6 @@ class Component extends React.PureComponent<Props, void> {
         </div>
 
         <div className={classnames('panel right', { active: !editing })}>
-          <div className="control-bar">
-            <button
-              className={classnames('disabled', { active: mode === MODES.SHOTTER })}
-              onClick={this.startShotterMode}
-            >
-              <Icon icon="icon-shot-3" />
-              <span>
-                СНИМОК
-              </span>
-            </button>
-          </div>
-
-          <div className="control-sep" />
-
           <div className="control-bar">
             <button className="primary single" onClick={this.props.startEditing}>
               <Icon icon="icon-route-2" />

src/components/panels/UserPanel.jsx

@@ -5,18 +5,17 @@ import { SERVER } from '$constants/api';
 import { DEFAULT_USER, ROLES } from '$constants/auth';
 import { UserButton } from '$components/user/UserButton';
 import { UserMenu } from '$components/user/UserMenu';
-import { setUser, userLogout } from '$redux/user/actions';
+import { setUser, userLogout, takeAShot } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import type { UserType } from '$constants/types';
-import { MODES } from '$constants/modes';
-import classnames from 'classnames';
 import { Icon } from '$components/panels/Icon';
 
 type Props = {
   user: UserType,
   userLogout: Function,
   setUser: Function,
+  takeAShot: Function,
 };
 
 export class Component extends React.PureComponent<Props, void> {
@@ -92,9 +91,7 @@ export class Component extends React.PureComponent<Props, void> {
 
           <div className="control-bar">
             <button
-              className="disabled"
+              onClick={this.props.takeAShot}
-              // className={classnames({ active: mode === MODES.SHOTTER })}
-              // onClick={this.startShotterMode}
             >
               <Icon icon="icon-shot-3" />
             </button>
@@ -107,6 +104,6 @@ export class Component extends React.PureComponent<Props, void> {
 
 
 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);

src/components/renderer/Renderer.jsx

@@ -16,15 +16,20 @@ type Props = {
 };
 
 type State = {
-
+  opacity: Number,
 };
 
 class Component extends React.Component<Props, State> {
+  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<Props, State> {
   }
 
   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<Props, State> {
     regionEl.append(this.logo);
   };
 
-  moveLogo = ({ x, y, width, height }) => {
-    if (!this.logo) return;
-
-    this.logo.style.color = 'blue';
-  };
-
   croppr;
 
-  getImage = () => {
+  getImage = () => this.props.cropAShot(this.croppr.getValue());
-    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<Props, State> {
       <div>
         <div
           className="renderer-shade"
-          style={{
+          style={{ padding, paddingBottom }}
-            padding,
-            paddingBottom,
-          }}
         >
           <div
-            style={{ width, height }}
+            style={{ width, height, opacity }}
           >
             <img
               src={data}
@@ -121,6 +112,7 @@ class Component extends React.Component<Props, State> {
               onClick={this.props.hideRenderer}
             >
               <Icon icon="icon-cancel-1" />
+              <span>Отмена</span>
             </button>
 
             <button

src/redux/user/sagas.js

@@ -264,10 +264,13 @@ function* getCropData({
   canvas.height = height;
   const ctx = canvas.getContext('2d');
   const image = yield imageFetcher(data);
-  const logoImage = yield imageFetcher(LOGOS[logo][1]);
 
   ctx.drawImage(image, -x, -y);
-  ctx.drawImage(logoImage, width - logoImage.width, height - logoImage.height);
+
+  if (logo && LOGOS[logo][1]) {
+    const logoImage = yield imageFetcher(LOGOS[logo][1]);
+    ctx.drawImage(logoImage, width - logoImage.width, height - logoImage.height);
+  }
 
   return yield canvas.toDataURL('image/jpeg');
 }

src/styles/panel.less

@@ -79,6 +79,7 @@
       font-size: 14px;
       font-weight: 500;
       margin-left: 8px;
+      text-transform: uppercase;
     }
 
     &:first-child {

src/styles/renderer.less

@@ -17,6 +17,7 @@
     align-items: center;
     justify-content: center;
     position: relative;
+    transition: opacity 250ms;
   }
 
   img#rendererOutput {