Align preview and set min width/height (codesandbox#519)

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/FlyingContainer.js

@@ -1,4 +1,5 @@
-import React, { MouseEvent } from 'react';
+// @flow
+import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 
 import { TweenMax, Elastic } from 'gsap';
@@ -17,8 +18,35 @@ import {
   ResizingNotice,
 } from './elements';
 
-class FlyingContainer extends React.Component {
-  state = { resizing: false, dragging: false };
+type Props = {
+  signals: any,
+  store: any,
+  children: (funcs: { resize: Function }) => React.Node,
+  onPositionChange?: () => void,
+};
+
+type State = {
+  resizing: boolean,
+  dragging: boolean,
+  x: ?number,
+  y: ?number,
+  width: ?number,
+  height: ?number,
+};
+
+class FlyingContainer extends React.Component<Props, State> {
+  state = {
+    resizing: false,
+    dragging: false,
+    x: undefined,
+    y: undefined,
+    width: undefined,
+    height: undefined,
+  };
+
+  el: ?HTMLElement;
+  initialWidth: ?number;
+  initialHeight: ?number;
 
   updateBounds = el => {
     if (el) {
@@ -34,6 +62,10 @@ class FlyingContainer extends React.Component {
   handleStartDrag = () => {
     this.setState({ dragging: true });
     this.setResizingStarted();
+
+    if (this.props.onPositionChange) {
+      this.props.onPositionChange();
+    }
   };
 
   handleStopDrag = (e, data) => {
@@ -48,6 +80,10 @@ class FlyingContainer extends React.Component {
 
   setResizingStarted = () => {
     this.props.signals.editor.resizingStarted();
+
+    if (this.props.onPositionChange) {
+      this.props.onPositionChange();
+    }
   };
 
   setResizingStopped = () => {
@@ -115,10 +151,10 @@ class FlyingContainer extends React.Component {
       const update = {};
 
       if (vertical) {
-        update.height = newSizeY;
+        update.height = Math.max(48, newSizeY);
       }
       if (horizontal) {
-        update.width = newSizeX;
+        update.width = Math.max(48, newSizeX);
       }
 
       if (changePositionY) {

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.js

@@ -13,7 +13,15 @@ type Props = {
   signals: any,
 };
 
-class Preview extends React.Component<Props> {
+type State = {
+  aligned: ?'right' | 'bottom',
+};
+
+class Preview extends React.Component<Props, State> {
+  state = {
+    aligned: 'right',
+  };
+
   onPreviewInitialized = preview => {
     let preventCodeExecution = false;
     const disposeHandleProjectViewChange = reaction(
@@ -93,7 +101,20 @@ class Preview extends React.Component<Props> {
 
   componentWillReceiveProps(props: Props) {
     const { width, height } = props;
-    if (width && height) {
+
+    if (this.state.aligned) {
+      if (width !== this.props.width || height !== this.props.height) {
+        if (this.state.aligned === 'bottom') {
+          this.props.signals.editor.setPreviewBounds(
+            this.getBottomCoordinates(props)
+          );
+        } else {
+          this.props.signals.editor.setPreviewBounds(
+            this.getRightCoordinates(props)
+          );
+        }
+      }
+    } else if (width && height) {
       let newWidth = props.store.editor.previewWindow.width;
       if (
         width - 16 <
@@ -173,6 +194,24 @@ class Preview extends React.Component<Props> {
     });
   };
 
+  resetAlignment = () => {
+    this.setState({ aligned: null });
+  };
+
+  getBottomCoordinates = (props = this.props) => ({
+    x: 0,
+    y: (props.height || 0) / 2 - 16,
+    width: (props.width || 0) - 16,
+    height: (props.height || 0) / 2,
+  });
+
+  getRightCoordinates = (props = this.props) => ({
+    x: 0,
+    y: 0,
+    width: (props.width || 0) / 2,
+    height: (props.height || 0) - 16,
+  });
+
   render() {
     const { store, signals } = this.props;
 
@@ -182,7 +221,7 @@ class Preview extends React.Component<Props> {
     };
 
     return (
-      <FlyingContainer>
+      <FlyingContainer onPositionChange={this.resetAlignment}>
         {({ resize }) => (
           <BasePreview
             onInitialized={this.onPreviewInitialized}
@@ -207,22 +246,14 @@ class Preview extends React.Component<Props> {
             onToggleProjectView={() => signals.editor.projectViewToggled()}
             showDevtools={store.preferences.showDevtools}
             isResizing={store.editor.isResizing}
-            alignRight={() =>
-              resize({
-                x: 0,
-                y: 0,
-                width: (this.props.width || 0) / 2,
-                height: (this.props.height || 0) - 16,
-              })
-            }
-            alignBottom={() =>
-              resize({
-                x: 0,
-                y: (this.props.height || 0) / 2 - 16,
-                width: (this.props.width || 0) - 16,
-                height: (this.props.height || 0) / 2,
-              })
-            }
+            alignRight={() => {
+              resize(this.getRightCoordinates());
+              this.setState({ aligned: 'right' });
+            }}
+            alignBottom={() => {
+              resize(this.getBottomCoordinates());
+              this.setState({ aligned: 'bottom' });
+            }}
           />
         )}
       </FlyingContainer>

packages/common/utils/keybindings.js

@@ -53,39 +53,6 @@ export const KEYBINDINGS = {
     signal: 'workspace.toggleCurrentWorkspaceItem',
   },
 
-  'editor.editor-mode': {
-    title: 'Editor View',
-    type: 'View',
-    bindings: [[metaKey, 'K', 'E']],
-    signal: 'preferences.viewModeChanged',
-    payload: {
-      showEditor: true,
-      showPreview: false,
-    },
-  },
-
-  'editor.preview-mode': {
-    title: 'Preview View',
-    type: 'View',
-    bindings: [[metaKey, 'K', 'P']],
-    signal: 'preferences.viewModeChanged',
-    payload: {
-      showEditor: false,
-      showPreview: true,
-    },
-  },
-
-  'editor.split-mode': {
-    title: 'Split View',
-    type: 'View',
-    bindings: [[metaKey, 'K', 'S']],
-    signal: 'preferences.viewModeChanged',
-    payload: {
-      showEditor: true,
-      showPreview: true,
-    },
-  },
-
   'editor.zen-mode': {
     title: 'Toggle Zen Mode',
     type: 'View',