diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 3fba7b12b6..b4eb1dfdfe 100644 --- a/apps/remix-ide/src/app.js +++ b/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 } } } diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts index 05fbe1642d..0ef900d9ed 100644 --- a/apps/remix-ide/src/app/panels/layout.ts +++ b/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) + } } diff --git a/apps/remix-ide/src/lib/panels-resize.js b/apps/remix-ide/src/lib/panels-resize.js deleted file mode 100644 index 157535a869..0000000000 --- a/apps/remix-ide/src/lib/panels-resize.js +++ /dev/null @@ -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`
` - - 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`
` - } - - 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' - } -} diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx index 512d83e92b..a5af90b1ca 100644 --- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx +++ b/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) } } diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css index c65731b855..7f01242c9f 100644 --- a/libs/remix-ui/panel/src/lib/plugins/panel.css +++ b/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; +} diff --git a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx deleted file mode 100644 index aba4bbf6a5..0000000000 --- a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx +++ /dev/null @@ -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) => { - 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 - } -} diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx index 0dd54256b5..df92ae9174 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/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 extends SyntheticEvent { @@ -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(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 (