ui: set input/output draggable

packages/ui-default/components/scratchpad/DataInputComponent.jsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 export default function DataInputComponent(props) {
@@ -10,9 +9,8 @@ export default function DataInputComponent(props) {
     className,
     ...rest
   } = props;
-  const cn = classNames(className, 'flex-col flex-fill');
   return (
-    <div {...rest} className={cn}>
+    <div {...rest} className={className} style={{ height: '100%', width: '100%' }}>
       {html ? (
         <div
           className="scratchpad__data-input"

packages/ui-default/components/scratchpad/Panel.page.styl

@@ -6,3 +6,13 @@
   padding: rem(0 5px)
   font-size: rem($font-size-small)
   color: #FFF
+
+.splitpane-fill
+  display: flex
+  position: absolute
+  overflow: hidden
+  left: 0
+  width: 100%
+  top: 0
+  height: 100%
+  user-select: none

packages/ui-default/components/scratchpad/ScratchpadEditorContainer.tsx

@@ -8,17 +8,11 @@ interface ScratchpadOptions {
   value?: string;
   language?: string;
   handleUpdateCode?: (str: string, event: monaco.editor.IModelContentChangedEvent) => void;
-  mainSize?: number;
-  recordSize?: number;
-  pretestSize?: number;
 }
 
 export default connect((state: any) => ({
   value: state.editor.code,
   language: window.LANGS[state.editor.lang]?.monaco,
-  mainSize: state.ui.main.size,
-  pretestSize: state.ui.pretest.size,
-  recordSize: state.ui.records.size,
 }), (dispatch) => ({
   handleUpdateCode: (code: string) => {
     dispatch({
@@ -66,7 +60,7 @@ export default connect((state: any) => ({
 
   async componentDidUpdate(prevProps) {
     const {
-      value, language, mainSize, recordSize, pretestSize,
+      value, language,
     } = this.props;
     const { monaco } = await load([language]);
     const { editor, model } = this;
@@ -94,11 +88,6 @@ export default connect((state: any) => ({
       this.model = monaco.editor.getModel(uri) || monaco.editor.createModel(val, language, uri);
       editor.setModel(this.model);
     }
-    if (editor) {
-      if (prevProps.mainSize !== mainSize
-        || prevProps.recordSize !== recordSize
-        || prevProps.pretestSize !== pretestSize) editor.layout();
-    }
   }
 
   componentWillUnmount() {

packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx

@@ -1,3 +1,4 @@
+import { Allotment } from 'allotment';
 import AnsiUp from 'ansi_up';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -38,7 +39,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadPret
           </span>
         )}
       >
-        <div className="flex-row flex-fill">
+        <Allotment>
           <DataInput
             title={i18n('Input')}
             value={this.props.input}
@@ -49,7 +50,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadPret
             value={AU.ansi_to_html(this.props.output)}
             html
           />
-        </div>
+        </Allotment>
       </Panel>
     );
   }

packages/ui-default/components/scratchpad/index.tsx

@@ -67,6 +67,7 @@ export default function ScratchpadContainer() {
   const ui = useSelector<any, any>((state) => state.ui, _.isEqual);
 
   const handleChangeSize = _.debounce(() => {
+    ctx.scratchpad.editor?.layout?.();
     $('#scratchpad').trigger('vjScratchpadRelayout');
     forceUpdate();
   }, 500);
@@ -77,12 +78,10 @@ export default function ScratchpadContainer() {
     });
   };
 
-  const showSidebar = Object.keys(pages).length > 1;
-
   return (
     <Allotment onChange={handleChangeSize}>
-      <Allotment.Pane visible={showSidebar} minSize={50} maxSize={50}>
-        <div className="scratchpad__tablist" style={{ display: showSidebar ? 'block' : 'none' }}>
+      <Allotment.Pane visible={Object.keys(pages).length > 1} minSize={50} maxSize={50}>
+        <div className="scratchpad__tablist">
           {Object.keys(pages).map((key) => {
             const Component = pages[key].icon;
             return (

packages/ui-default/components/scratchpad/reducers/ui.ts

@@ -2,19 +2,13 @@ import Notification from 'vj/components/notification';
 import { i18n } from 'vj/utils';
 
 export default function reducer(state = {
-  main: {
-    size: '50%',
-    savedSize: '50%',
-  },
   pretest: {
     visible: ['default', 'fileio'].includes(UiContext.pdoc.config?.type)
       ? localStorage.getItem('scratchpad/pretest') === 'true'
       : false,
-    size: 200,
   },
   records: {
     visible: UiContext.canViewRecord && localStorage.getItem('scratchpad/records') === 'true',
-    size: 100,
     isLoading: false,
   },
   isPosting: false,
@@ -24,16 +18,6 @@ export default function reducer(state = {
   activePage: 'problem',
 }, action: any = {}) {
   switch (action.type) {
-    case 'SCRATCHPAD_UI_CHANGE_SIZE': {
-      const { uiElement, size } = action.payload;
-      return {
-        ...state,
-        [uiElement]: {
-          ...state[uiElement],
-          size,
-        },
-      };
-    }
     case 'SCRATCHPAD_UI_SET_VISIBILITY': {
       const { uiElement, visibility } = action.payload;
       localStorage.setItem(`scratchpad/${uiElement}`, visibility.toString());
@@ -130,20 +114,9 @@ export default function reducer(state = {
     }
     case 'SCRATCHPAD_SWITCH_TO_PAGE': {
       let newPage = action.payload;
-      let { size } = state.main;
-      if (newPage === state.activePage) {
-        newPage = null;
-        (size as any) = 0;
-      } else if (state.activePage === null) {
-        size = state.main.savedSize;
-      }
+      if (newPage === state.activePage) newPage = null;
       return {
         ...state,
-        main: {
-          ...state.main,
-          size,
-          savedSize: state.main.size,
-        },
         activePage: newPage,
       };
     }