minimize terminal

apps/remix-ide/src/app.js

@@ -302,7 +302,7 @@ class AppComponent {
       tabs: { plugin: tabProxy, active: true },
       editor: { plugin: editor, active: true },
       main: { plugin: appPanel, active: false },
-      terminal: { plugin: terminal, active: true }
+      terminal: { plugin: terminal, active: true, minimized: false }
     }
   }
 

apps/remix-ide/src/app/panels/layout.ts

@@ -5,12 +5,14 @@ import QueryParams from '../../lib/query-params'
 
 const profile: Profile = {
   name: 'layout',
-  description: 'layout'
+  description: 'layout',
+  methods: ['minimize']
 }
 
 interface panelState {
   active: boolean
   plugin: Plugin
+  minimized: boolean
 }
 interface panels {
   tabs: panelState
@@ -77,7 +79,15 @@ export class Layout extends Plugin {
     })
     const queryParams = new QueryParams()
     const params = queryParams.get()
-    // if (params.minimizeterminal) // this.mainView.minimizeTerminal()
+    if (params.minimizeterminal) {
+      this.panels.terminal.minimized = true
+      this.event.emit('change', null)
+    }
     // if (params.minimizesidepanel) // this.resizeFeature.hidePanel()
   }
+
+  minimize (name: string, minimized:boolean): void {
+    this.panels[name].minimized = minimized
+    this.event.emit('change', null)
+  }
 }

apps/remix-ide/src/lib/panels-resize.js

@@ -1,88 +0,0 @@
-const yo = require('yo-yo')
-const csjs = require('csjs-inject')
-
-const css = csjs`
-  .dragbar            {
-    width             : 2px;
-    height            : 100%;
-    cursor            : col-resize;
-    z-index           : 999;
-  }
-  .ghostbar           {
-    width             : 3px;
-    background-color  : var(--primary);
-    opacity           : 0.5;
-    position          : absolute;
-    cursor            : col-resize;
-    z-index           : 9999;
-    top               : 0;
-    bottom            : 0;
-  }
-`
-
-export default class PanelsResize {
-  constructor (panel) {
-    this.panel = panel
-    const string = panel.style.minWidth
-    this.minWidth = string.length > 2 ? parseInt(string.substring(0, string.length - 2)) : 0
-  }
-
-  render () {
-    this.ghostbar = yo`<div class=${css.ghostbar}></div>`
-
-    const mousedown = (event) => {
-      event.preventDefault()
-      if (event.which === 1) {
-        moveGhostbar(event)
-        document.body.appendChild(this.ghostbar)
-        document.addEventListener('mousemove', moveGhostbar)
-        document.addEventListener('mouseup', removeGhostbar)
-        document.addEventListener('keydown', cancelGhostbar)
-      }
-    }
-
-    const cancelGhostbar = (event) => {
-      if (event.keyCode === 27) {
-        document.body.removeChild(this.ghostbar)
-        document.removeEventListener('mousemove', moveGhostbar)
-        document.removeEventListener('mouseup', removeGhostbar)
-        document.removeEventListener('keydown', cancelGhostbar)
-      }
-    }
-
-    const moveGhostbar = (event) => {
-      this.ghostbar.style.left = event.x + 'px'
-    }
-
-    const removeGhostbar = (event) => {
-      document.body.removeChild(this.ghostbar)
-      document.removeEventListener('mousemove', moveGhostbar)
-      document.removeEventListener('mouseup', removeGhostbar)
-      document.removeEventListener('keydown', cancelGhostbar)
-      this.setPosition(event)
-    }
-
-    return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
-  }
-
-  calculatePanelWidth (event) {
-    return event.x - this.panel.offsetLeft
-  }
-
-  setPosition (event) {
-    const panelWidth = this.calculatePanelWidth(event)
-    // close the panel if the width is less than a minWidth
-    if (panelWidth > this.minWidth - 10 || this.panel.style.display === 'none') {
-      this.panel.style.width = panelWidth + 'px'
-      this.showPanel()
-    } else this.hidePanel()
-  }
-
-  hidePanel () {
-    this.panel.style.display = 'none'
-  }
-
-  showPanel () {
-    this.panel.style.display = 'flex'
-  }
-}

libs/remix-ui/panel/src/lib/main/main-panel.tsx

@@ -24,10 +24,10 @@ const RemixUIMainPanel = () => {
           profile: panel.plugin.profile,
           active: panel.active,
           view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
-          class: panel.plugin.profile.name + '-wrap'
+          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized' : '')
         })
       })
-      // console.log(pluginPanels)
+      console.log(pluginPanels)
       setPlugins(pluginPanels)
     }
   }

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -103,3 +103,7 @@ iframe {
 .terminal-wrap {
     min-height: 35px;
 }
+
+.terminal-wrap.minimized {
+    height: 2rem !important;
+}

libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx

@@ -1,77 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-export const useDragTerminal = (minHeight: number, defaultPosition: number) => {
-  const [isOpen, setIsOpen] = useState(defaultPosition > minHeight)
-  const [lastYPosition, setLastYPosition] = useState(0)
-  const [terminalPosition, setTerminalPosition] = useState(defaultPosition)
-  // Used to save position of the terminal when it is closed
-  const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition)
-  const [isDragging, setIsDragging] = useState(false)
-
-  const handleDraggingStart = (event: React.MouseEvent) => {
-    setLastYPosition(event.clientY)
-    setIsDragging(true)
-  }
-
-  const handleDragging = (event: MouseEvent) => {
-    event.preventDefault()
-
-    if (isDragging) {
-      const mouseYPosition = event.clientY
-      const difference = lastYPosition - mouseYPosition
-      const newTerminalPosition = terminalPosition + difference
-      setTerminalPosition(newTerminalPosition)
-      setLastYPosition(mouseYPosition)
-    }
-  }
-
-  const handleDraggingEnd = () => {
-    if (!isDragging) return
-
-    setIsDragging(false)
-
-    // Check terminal position to determine if it should be open or closed
-    setIsOpen(terminalPosition > minHeight)
-  }
-
-  const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    if (isOpen) {
-      setLastTerminalPosition(terminalPosition)
-      setLastYPosition(0)
-      setTerminalPosition(minHeight)
-    } else {
-      setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition)
-    }
-
-    setIsOpen(!isOpen)
-  }
-
-  // Add event listeners for dragging
-  useEffect(() => {
-    document.addEventListener('mousemove', handleDragging)
-    document.addEventListener('mouseup', handleDraggingEnd)
-
-    return () => {
-      document.removeEventListener('mousemove', handleDragging)
-      document.removeEventListener('mouseup', handleDraggingEnd)
-    }
-  }, [handleDragging, handleDraggingEnd])
-
-  // Reset terminal position
-  useEffect(() => {
-    if (!terminalPosition) {
-      setTerminalPosition(defaultPosition)
-    }
-  }, [terminalPosition, setTerminalPosition])
-
-  return {
-    isOpen,
-    terminalPosition,
-    isDragging,
-    handleDraggingStart,
-    handleToggleTerminal
-  }
-}

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -18,7 +18,6 @@ import RenderKnownTransactions from './components/RenderKnownTransactions' // es
 import parse from 'html-react-parser'
 import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, UNKNOWN_TRANSACTION } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
-import { useDragTerminal } from './custom-hooks/useDragTerminal'
 
 /* eslint-disable-next-line */
 export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
@@ -29,7 +28,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const { call, _deps, on, config, event, gistHandler, version } = props.plugin
   const [_cmdIndex, setCmdIndex] = useState(-1)
   const [_cmdTemp, setCmdTemp] = useState('')
-
+  const [isOpen, setIsOpen] = useState<boolean>(true)
   const [newstate, dispatch] = useReducer(registerCommandReducer, initialState)
   const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState)
   const [, scriptRunnerDispatch] = useReducer(registerScriptRunnerReducer, initialState)
@@ -80,24 +79,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const terminalMenuOffsetHeight = (terminalMenu.current && terminalMenu.current.offsetHeight) || 35
   const terminalDefaultPosition = config.get('terminal-top-offset')
 
-  const {
-    isOpen,
-    isDragging,
-    terminalPosition,
-    handleDraggingStart,
-    handleToggleTerminal
-  } = useDragTerminal(terminalMenuOffsetHeight, terminalDefaultPosition)
-
-  // Check open state
-  useEffect(() => {
-    const resizeValue = isOpen ? [config.get('terminal-top-offset')] : []
-    event.trigger('resize', resizeValue)
-  }, [isOpen])
-
-  useEffect(() => {
-    event.trigger('resize', [terminalPosition])
-  }, [terminalPosition])
-
   const scrollToBottom = () => {
     messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
   }
@@ -433,6 +414,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: 0, showSuggestions: false }))
   }
 
+  const handleToggleTerminal = () => {
+    setIsOpen(!isOpen)
+    props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
+  }
+
   return (
     <div style={{ flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">