Merge pull request #2754 from LakshyaSatpal/fix-drag-console

[#2641] Fix sluggish console movement on dragging, in mobile view of browser window

Author: lindapaiste

client/modules/IDE/components/PreviewFrame.jsx

@@ -11,7 +11,7 @@ const Frame = styled.iframe`
   border-width: 0;
 `;
 
-function PreviewFrame({ fullView }) {
+function PreviewFrame({ fullView, isOverlayVisible }) {
   const iframe = useRef();
   const previewUrl = getConfig('PREVIEW_URL');
   useEffect(() => {
@@ -28,28 +28,36 @@ function PreviewFrame({ fullView }) {
     hid; microphone; magnetometer; midi; payment; usb; serial; vr; xr-spatial-tracking`;
 
   return (
-    <Frame
-      title="sketch preview"
-      src={frameUrl}
-      sandbox={sandboxAttributes}
-      allow={allow}
-      scrolling="auto"
-      allowtransparency
-      allowpaymentrequest
-      allowFullScreen
-      frameBorder="0"
-      ref={iframe}
-      fullView={fullView}
-    />
+    <>
+      <div
+        className="preview-frame-overlay"
+        style={{ display: isOverlayVisible ? 'block' : 'none' }}
+      />
+      <Frame
+        title="sketch preview"
+        src={frameUrl}
+        sandbox={sandboxAttributes}
+        allow={allow}
+        scrolling="auto"
+        allowtransparency
+        allowpaymentrequest
+        allowFullScreen
+        frameBorder="0"
+        ref={iframe}
+        fullView={fullView}
+      />
+    </>
   );
 }
 
 PreviewFrame.propTypes = {
-  fullView: PropTypes.bool
+  fullView: PropTypes.bool,
+  isOverlayVisible: PropTypes.bool
 };
 
 PreviewFrame.defaultProps = {
-  fullView: false
+  fullView: false,
+  isOverlayVisible: false
 };
 
 export default PreviewFrame;

client/modules/IDE/pages/IDEView.jsx

@@ -173,7 +173,9 @@ const IDEView = () => {
                     primary="second"
                     size={ide.consoleIsExpanded ? consoleSize : 29}
                     minSize={29}
-                    onChange={(size) => setConsoleSize(size)}
+                    onChange={(size) => {
+                      setConsoleSize(size);
+                    }}
                     allowResize={ide.consoleIsExpanded}
                     className="editor-preview-subpanel"
                   >
@@ -191,16 +193,10 @@ const IDEView = () => {
                       </h2>
                     </header>
                     <div className="preview-frame__content">
-                      <div
-                        className="preview-frame-overlay"
-                        style={{ display: isOverlayVisible ? 'block' : 'none' }}
+                      <PreviewFrame
+                        cmController={cmRef.current}
+                        isOverlayVisible={isOverlayVisible}
                       />
-                      <div>
-                        {((preferences.textOutput || preferences.gridOutput) &&
-                          ide.isPlaying) ||
-                          ide.isAccessibleOutputPlaying}
-                      </div>
-                      <PreviewFrame cmController={cmRef.current} />
                     </div>
                   </section>
                 </SplitPane>
@@ -215,11 +211,18 @@ const IDEView = () => {
                   split="horizontal"
                   primary="second"
                   minSize={200}
+                  onChange={() => {
+                    setIsOverlayVisible(true);
+                  }}
+                  onDragFinished={() => {
+                    setIsOverlayVisible(false);
+                  }}
                 >
                   <PreviewFrame
                     fullView
                     hide={!ide.isPlaying}
                     cmController={cmRef.current}
+                    isOverlayVisible={isOverlayVisible}
                   />
                   <Console />
                 </SplitPane>