Fix preview interactivity and resetting alignment

Author: Ives van Hoorne

packages/app/src/app/components/Preview/DevTools/index.js

@@ -235,9 +235,6 @@ export default class DevTools extends React.PureComponent<Props, State> {
         e.stopPropagation();
         this.handleClick();
       } else {
-        // We do this to force a recalculation of the iframe height, this doesn't
-        // happen when pointer events are disabled and in turn disables scroll.
-        // It's hacky, but it's to fix a bug in the browser.
         setTimeout(() => {
           const height = this.state.height;
           if (height > 64) {

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

@@ -63,33 +63,36 @@ class FlyingContainer extends React.Component<Props, State> {
   handleStartDrag = () => {
     this.setState({ dragging: true });
     this.setResizingStarted();
-
-    if (this.props.onPositionChange) {
-      this.props.onPositionChange();
-    }
   };
 
   handleStopDrag = (e, data) => {
-    const { x, y } = data;
+    const { x, y, deltaX, deltaY } = data;
+    const delta = deltaX + deltaY;
     this.setState({ dragging: false });
 
+    this.setResizingStopped(delta);
+
     // We only set the bounds in the global store on stop, otherwise there are
     // other components constantly recalculating while dragging -> lag
     this.props.signals.editor.setPreviewBounds({ x, y });
-    this.setResizingStopped();
   };
 
   setResizingStarted = () => {
     this.props.signals.editor.resizingStarted();
-
-    if (this.props.onPositionChange) {
-      this.props.onPositionChange();
-    }
   };
 
-  setResizingStopped = () => {
+  setResizingStopped = (delta = -1) => {
     this.props.signals.editor.resizingStopped();
 
+    if (delta !== 0) {
+      if (this.props.onPositionChange) {
+        this.props.onPositionChange();
+      }
+      this.fixPreviewInteractivity();
+    }
+  };
+
+  fixPreviewInteractivity = () => {
     // We do this to force a recalculation of the iframe height, this doesn't
     // happen when pointer events are disabled and in turn disables scroll.
     // It's hacky, but it's to fix a bug in the browser.

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

@@ -444,7 +444,13 @@ class EditorPreview extends React.Component<Props, State> {
                 this.devtools = component;
               }
             }}
-            setDragging={() => this.props.signals.editor.resizingStarted()}
+            setDragging={dragging => {
+              if (dragging) {
+                this.props.signals.editor.resizingStarted();
+              } else {
+                this.props.signals.editor.resizingStopped();
+              }
+            }}
             sandboxId={sandbox.id}
             shouldExpandDevTools={store.preferences.showDevtools}
             zenMode={preferences.settings.zenMode}