Give the cropper an initial size (wulkano#671)

renderer/containers/action-bar.js

@@ -92,8 +92,17 @@ export default class ActionBarContainer extends Container {
 
   toggleAdvanced = () => {
     if (!this.cropperContainer.state.isFullscreen) {
-      const {advanced} = this.state;
+      const {advanced, screenWidth} = this.state;
       this.updateSettings({advanced: !advanced});
+
+      if (!advanced) {
+        const width = screenWidth * 0.2;
+        const height = width * 0.75; // 4:3
+        this.cropperContainer.setSize({
+          width,
+          height
+        });
+      }
     }
   }
 

renderer/containers/cropper.js

@@ -67,7 +67,7 @@ export default class CropperContainer extends Container {
 
   setDisplay = display => {
     const {width: screenWidth, height: screenHeight, isActive, id, cropper = {}} = display;
-    const {x, y, width, height, ratio} = cropper;
+    const {x, y, width, height, ratio = [4, 3]} = cropper;
 
     setScreenSize(screenWidth, screenHeight);
     this.setState({
@@ -78,9 +78,9 @@ export default class CropperContainer extends Container {
       displayId: id,
       x: x || screenWidth / 2,
       y: y || screenHeight / 2,
-      width: width || 0,
-      height: height || 0,
-      ratio: ratio || [1, 1]
+      width,
+      height,
+      ratio
     });
     this.actionBarContainer.setInputValues({width, height});
   }
@@ -124,6 +124,16 @@ export default class CropperContainer extends Container {
     this.setState(updates);
   }
 
+  setSize = ({width: defaultWidth, height: defaultHeight}) => {
+    let {width, height} = this.state;
+    width = width || defaultWidth;
+    height = height || defaultHeight;
+    const updates = {width, height};
+    this.settings.set('cropper', updates);
+    this.setState(updates);
+    this.actionBarContainer.setInputValues(updates);
+  }
+
   bindCursor = cursorContainer => {
     this.cursorContainer = cursorContainer;
   }