Panel resizing

Author: murilopolese

ui/arduino/main.css

@@ -269,12 +269,18 @@ button.small .icon {
   transition: height 0.15s;
 }
 
-#panel.closed {
-  height: 45px;
+#panel {
+  min-height: 45px;
 }
 
-#panel.open {
-  height: 320px;
+#panel #drag-handle {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+#panel #drag-handle:active {
+  cursor: grabbing;
 }
 
 .panel-bar {
@@ -300,6 +306,7 @@ button.small .icon {
 .panel-bar .term-operations.hidden {
   opacity: 0;
   transition-delay: 0.15s;
+  pointer-events: none;
 }
 .panel-bar .term-operations.visible {
   opacity: 1;

ui/arduino/main.js

@@ -1,4 +1,6 @@
-const PANEL_HEIGHT = 320
+const PANEL_CLOSED = 45
+const PANEL_TOO_SMALL = 65
+const PANEL_DEFAULT = 320
 
 function App(state, emit) {
   if (state.diskNavigationRoot == null) {

ui/arduino/store.js

@@ -33,8 +33,6 @@ async function store(state, emitter) {
   state.isConnected = false
   state.connectedPort = null
 
-
-  state.isPanelOpen = false
   state.isSaving = false
   state.savingProgress = 0
   state.isTransferring = false
@@ -53,6 +51,14 @@ async function store(state, emitter) {
   state.openFiles.push(newFile)
   state.editingFile = newFile.id
 
+  state.savedPanelHeight = PANEL_DEFAULT
+  state.panelHeight = PANEL_CLOSED
+  state.resizePanel = function(e) {
+    state.panelHeight = (PANEL_CLOSED/2) + document.body.clientHeight - e.clientY
+    state.savedPanelHeight = state.panelHeight
+    emitter.emit('render')
+  }
+
   // START AND BASIC ROUTING
   emitter.on('select-disk-navigation-root', async () => {
     const folder = await selectDiskFolder()
@@ -110,8 +116,8 @@ async function store(state, emitter) {
     // Connected and ready
     state.isConnecting = false
     state.isConnected = true
-    if (state.view === 'editor') {
-      state.isPanelOpen = true
+    if (state.view === 'editor' && state.panelHeight <= PANEL_CLOSED) {
+      state.panelHeight = state.savedPanelHeight
     }
     state.connectedPort = path
 
@@ -138,7 +144,7 @@ async function store(state, emitter) {
   emitter.on('disconnect', async () => {
     await serial.disconnect()
     state.isConnected = false
-    state.isPanelOpen = false
+    state.panelHeight = PANEL_CLOSED
     state.boardFiles = []
     state.boardNavigationPath = '/'
     emitter.emit('refresh-files')
@@ -155,9 +161,9 @@ async function store(state, emitter) {
   // CODE EXECUTION
   emitter.on('run', async () => {
     log('run')
-    state.isPanelOpen = true
     const openFile = state.openFiles.find(f => f.id == state.editingFile)
     const code = openFile.editor.editor.state.doc.toString()
+    emitter.emit('open-panel')
     emitter.emit('render')
     try {
       await serial.get_prompt()
@@ -168,13 +174,19 @@ async function store(state, emitter) {
   })
   emitter.on('stop', async () => {
     log('stop')
-    state.isPanelOpen = true
+    if (state.panelHeight <= PANEL_CLOSED) {
+      state.panelHeight = state.savedPanelHeight
+    }
+    emitter.emit('open-panel')
     emitter.emit('render')
     await serial.get_prompt()
   })
   emitter.on('reset', async () => {
     log('reset')
-    state.isPanelOpen = true
+    if (state.panelHeight <= PANEL_CLOSED) {
+      state.panelHeight = state.savedPanelHeight
+    }
+    emitter.emit('open-panel')
     emitter.emit('render')
     await serial.reset()
     emitter.emit('update-files')
@@ -183,16 +195,28 @@ async function store(state, emitter) {
 
   // PANEL
   emitter.on('open-panel', () => {
-    state.isPanelOpen = true
+    state.panelHeight = state.savedPanelHeight
     emitter.emit('render')
+    setTimeout(() => {
+      state.cache(XTerm, 'terminal').resizeTerm()
+    }, 200)
   })
   emitter.on('close-panel', () => {
-    state.isPanelOpen = false
+    state.savedPanelHeight = state.panelHeight
+    state.panelHeight = 0
     emitter.emit('render')
   })
   emitter.on('clear-terminal', () => {
     state.cache(XTerm, 'terminal').term.clear()
   })
+  emitter.on('start-resizing-panel', () => {
+    log('start-resizing-panel')
+    window.addEventListener('mousemove', state.resizePanel)
+  })
+  emitter.on('stop-resizing-panel', () => {
+    log('stop-resizing-panel')
+    window.removeEventListener('mousemove', state.resizePanel)
+  })
 
   // SAVING
   emitter.on('save', async () => {

ui/arduino/views/components/elements/terminal.js

@@ -21,12 +21,13 @@ class XTerm extends Component {
   }
 
   resizeTerm() {
+    // XXX: This should not be querying the DOM like that :o
     if (document.querySelector('#panel')) {
-      let handleSize = 45
       const parentStyle = window.getComputedStyle(document.querySelector('#panel'))
       const parentWidth = parseInt(parentStyle.getPropertyValue('width'))
+      const parentHeight = parseInt(parentStyle.getPropertyValue('height'))
       const cols = Math.floor(parentWidth / this.term._core._renderService.dimensions.actualCellWidth) - 6
-      const rows = Math.floor((PANEL_HEIGHT-handleSize) / this.term._core._renderService.dimensions.actualCellHeight) - 2
+      const rows = Math.floor((parentHeight-PANEL_CLOSED) / this.term._core._renderService.dimensions.actualCellHeight) - 2
       this.term.resize(cols, rows)
     }
   }

ui/arduino/views/components/repl-panel.js

@@ -1,25 +1,27 @@
 function ReplPanel(state, emit) {
-  let height = state.isPanelOpen ? PANEL_HEIGHT : 45
-
   const onToggle = () => {
-    if (state.isPanelOpen) {
+    if (state.panelHeight > PANEL_CLOSED) {
       emit('close-panel')
     } else {
       emit('open-panel')
     }
   }
   const panelOpenClass = state.isPanelOpen ? 'open' : 'closed'
-  const termOperationsVisibility = state.isPanelOpen ? 'visible' : 'hidden'
+  const termOperationsVisibility = state.panelHeight > PANEL_TOO_SMALL ? 'visible' : 'hidden'
   const terminalDisabledClass = state.isConnected ? 'terminal-enabled' : 'terminal-disabled'
 
   return html`
-    <div id="panel" class="${panelOpenClass}">
+    <div id="panel" style="height: ${state.panelHeight}px">
       <div class="panel-bar">
+        <div id="drag-handle"
+          onmousedown=${() => emit('start-resizing-panel')}
+          onmouseup=${() => emit('stop-resizing-panel')}
+          ></div>
         <div class="term-operations ${termOperationsVisibility}">
           ${ReplOperations(state, emit)}
         </div>
         ${Button({
-          icon: `arrow-${state.isPanelOpen ? 'down' : 'up'}.svg`,
+          icon: `arrow-${state.panelHeight > PANEL_CLOSED ? 'down' : 'up'}.svg`,
           size: 'small',
           onClick: onToggle
         })}