From beb7bfbbd50fe42133e0d9967e32f11293f63be7 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Thu, 30 Dec 2021 20:47:23 +0100 Subject: [PATCH] fake layout fix --- apps/remix-ide/src/app.js | 185 ++++++++++++------ apps/remix-ide/src/app/panels/layout.ts | 4 +- apps/remix-ide/src/app/panels/main-view.js | 4 +- apps/remix-ide/src/app/panels/tab-proxy.js | 2 - apps/remix-ide/src/framingService.js | 3 - apps/remix-ide/src/remixAppManager.js | 1 - .../panel/src/lib/main/main-panel.css | 3 +- .../panel/src/lib/main/main-panel.tsx | 32 +-- 8 files changed, 153 insertions(+), 81 deletions(-) diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 6b397e858c..3fba7b12b6 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -2,7 +2,6 @@ import { RunTab, makeUdapp } from './app/udapp' import { RemixEngine } from './remixEngine' import { RemixAppManager } from './remixAppManager' -import { MainView } from './app/panels/main-view' import { ThemeModule } from './app/tabs/theme-module' import { NetworkModule } from './app/tabs/network-module' import { Web3ProviderModule } from './app/tabs/web3-provider' @@ -11,11 +10,17 @@ import { HiddenPanel } from './app/components/hidden-panel' import { VerticalIcons } from './app/components/vertical-icons' import { LandingPage } from './app/ui/landing-page/landing-page' import { MainPanel } from './app/components/main-panel' -import { FramingService } from './framingService' import { WalkthroughService } from './walkthroughService' -import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener } from '@remix-project/core-plugin' +import { + OffsetToLineColumnConverter, + CompilerMetadata, + CompilerArtefacts, + FetchAndCompile, + CompilerImports, + EditorContextListener +} from '@remix-project/core-plugin' import migrateFileSystem from './migrateFileSystem' import Registry from './app/state/registry' @@ -68,13 +73,27 @@ class AppComponent { // load file system self._components.filesProviders = {} self._components.filesProviders.browser = new FileProvider('browser') - Registry.getInstance().put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' }) - self._components.filesProviders.localhost = new RemixDProvider(self.appManager) - Registry.getInstance().put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' }) + Registry.getInstance().put({ + api: self._components.filesProviders.browser, + name: 'fileproviders/browser' + }) + self._components.filesProviders.localhost = new RemixDProvider( + self.appManager + ) + Registry.getInstance().put({ + api: self._components.filesProviders.localhost, + name: 'fileproviders/localhost' + }) self._components.filesProviders.workspace = new WorkspaceFileProvider() - Registry.getInstance().put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' }) + Registry.getInstance().put({ + api: self._components.filesProviders.workspace, + name: 'fileproviders/workspace' + }) - Registry.getInstance().put({ api: self._components.filesProviders, name: 'fileproviders' }) + Registry.getInstance().put({ + api: self._components.filesProviders, + name: 'fileproviders' + }) migrateFileSystem(self._components.filesProviders.browser) } @@ -94,8 +113,15 @@ class AppComponent { 'remix-beta.ethereum.org': 25, 'remix.ethereum.org': 23 } - self.showMatamo = (matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')) - self.walkthroughService = new WalkthroughService(appManager, self.showMatamo) + self.showMatamo = + matomoDomains[window.location.hostname] && + !Registry.getInstance() + .get('config') + .api.exists('settings/matomo-analytics') + self.walkthroughService = new WalkthroughService( + appManager, + self.showMatamo + ) const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080'] // workaround for Electron support @@ -114,7 +140,9 @@ class AppComponent { // ----------------- editor service ---------------------------- const editor = new Editor() // wrapper around ace editor Registry.getInstance().put({ api: editor, name: 'editor' }) - editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile()) + editor.event.register('requiringToSaveCurrentfile', () => + fileManager.saveCurrentFile() + ) // ----------------- fileManager service ---------------------------- const fileManager = new FileManager(editor, appManager) @@ -131,7 +159,10 @@ class AppComponent { const compilerMetadataGenerator = new CompilerMetadata() // ----------------- compilation result service (can keep track of compilation results) ---------------------------- const compilersArtefacts = new CompilerArtefacts() // store all the compilation results (key represent a compiler name) - Registry.getInstance().put({ api: compilersArtefacts, name: 'compilersartefacts' }) + Registry.getInstance().put({ + api: compilersArtefacts, + name: 'compilersartefacts' + }) // service which fetch contract artifacts from sourve-verify, put artifacts in remix and compile it const fetchAndCompile = new FetchAndCompile() @@ -142,19 +173,22 @@ class AppComponent { const hardhatProvider = new HardhatProvider(blockchain) // ----------------- convert offset to line/column service ----------- const offsetToLineColumnConverter = new OffsetToLineColumnConverter() - Registry.getInstance().put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' }) + Registry.getInstance().put({ + api: offsetToLineColumnConverter, + name: 'offsettolinecolumnconverter' + }) // -------------------Terminal---------------------------------------- - makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl)) + makeUdapp(blockchain, compilersArtefacts, domEl => terminal.logHtml(domEl)) const terminal = new Terminal( { appManager, blockchain }, { - getPosition: (event) => { + getPosition: event => { const limitUp = 36 const limitDown = 20 const height = window.innerHeight - let newpos = (event.pageY < limitUp) ? limitUp : event.pageY - newpos = (newpos < height - limitDown) ? newpos : height - limitDown + let newpos = event.pageY < limitUp ? limitUp : event.pageY + newpos = newpos < height - limitDown ? newpos : height - limitDown return height - newpos } } @@ -190,19 +224,25 @@ class AppComponent { // self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal) Registry.getInstance().put({ api: self.mainview, name: 'mainview' }) const tabProxy = new TabProxy(fileManager, editor) - self.engine.register([ - appPanel, - tabProxy - ]) + self.engine.register([appPanel, tabProxy]) // those views depend on app_manager self.menuicons = new VerticalIcons(appManager) self.sidePanel = new SidePanel(appManager, self.menuicons) self.hiddenPanel = new HiddenPanel() - const pluginManagerComponent = new PluginManagerComponent(appManager, self.engine) + const pluginManagerComponent = new PluginManagerComponent( + appManager, + self.engine + ) const filePanel = new FilePanel(appManager) - const landingPage = new LandingPage(appManager, self.menuicons, fileManager, filePanel, contentImport) + const landingPage = new LandingPage( + appManager, + self.menuicons, + fileManager, + filePanel, + contentImport + ) self.settings = new SettingsTab( Registry.getInstance().get('config').api, editor, @@ -220,7 +260,10 @@ class AppComponent { ]) // CONTENT VIEWS & DEFAULT PLUGINS - const compileTab = new CompileTab(Registry.getInstance().get('config').api, Registry.getInstance().get('filemanager').api) + const compileTab = new CompileTab( + Registry.getInstance().get('config').api, + Registry.getInstance().get('filemanager').api + ) const run = new RunTab( blockchain, Registry.getInstance().get('config').api, @@ -256,10 +299,10 @@ class AppComponent { ]) self.layout.panels = { - tabs: { plugin:tabProxy, active: true }, - editor: { plugin:editor, active: true }, - main: { plugin:appPanel, active: false }, - terminal: { plugin:terminal, active: true }, + tabs: { plugin: tabProxy, active: true }, + editor: { plugin: editor, active: true }, + main: { plugin: appPanel, active: false }, + terminal: { plugin: terminal, active: true } } } @@ -275,53 +318,81 @@ class AppComponent { try { self.engine.register(await self.appManager.registeredPlugins()) } catch (e) { - console.log('couldn\'t register iframe plugins', e.message) + console.log("couldn't register iframe plugins", e.message) } await self.appManager.activatePlugin(['layout', 'editor']) - await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter']) + await self.appManager.activatePlugin([ + 'theme', + 'fileManager', + 'compilerMetadata', + 'compilerArtefacts', + 'network', + 'web3Provider', + 'offsetToLineColumnConverter' + ]) await self.appManager.activatePlugin(['mainPanel']) await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs']) await self.appManager.activatePlugin(['sidePanel']) // activating host plugin separately await self.appManager.activatePlugin(['home']) await self.appManager.activatePlugin(['settings', 'config']) - await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport']) + await self.appManager.activatePlugin([ + 'hiddenPanel', + 'pluginManager', + 'contextualListener', + 'terminal', + 'blockchain', + 'fetchAndCompile', + 'contentImport' + ]) await self.appManager.activatePlugin(['settings']) await self.appManager.activatePlugin(['walkthrough']) - self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => { - await self.appManager.registerContextMenuItems() - }) + self.appManager.on( + 'filePanel', + 'workspaceInitializationCompleted', + async () => { + await self.appManager.registerContextMenuItems() + } + ) await self.appManager.activatePlugin(['filePanel']) // Set workspace after initial activation self.appManager.on('editor', 'editorMounted', () => { if (Array.isArray(self.workspace)) { - self.appManager.activatePlugin(self.workspace).then(async () => { - try { - if (params.deactivate) { - await self.appManager.deactivatePlugin(params.deactivate.split(',')) + self.appManager + .activatePlugin(self.workspace) + .then(async () => { + try { + if (params.deactivate) { + await self.appManager.deactivatePlugin( + params.deactivate.split(',') + ) + } + } catch (e) { + console.log(e) + } + if (params.code) { + // if code is given in url we focus on solidity plugin + self.menuicons.select('solidity') + } else { + // If plugins are loaded from the URL params, we focus on the last one. + if ( + self.appManager.pluginLoader.current === 'queryParams' && + self.workspace.length > 0 + ) { self.menuicons.select(self.workspace[self.workspace.length - 1]) } } - } catch (e) { - console.log(e) - } - if (params.code) { - // if code is given in url we focus on solidity plugin - self.menuicons.select('solidity') - } else { - // If plugins are loaded from the URL params, we focus on the last one. - if (self.appManager.pluginLoader.current === 'queryParams' && self.workspace.length > 0) self.menuicons.select(self.workspace[self.workspace.length - 1]) - } - - if (params.call) { - const callDetails = params.call.split('//') - if (callDetails.length > 1) { - toolTip(`initiating ${callDetails[0]} ...`) - // @todo(remove the timeout when activatePlugin is on 0.3.0) - self.appManager.call(...callDetails).catch(console.error) + + if (params.call) { + const callDetails = params.call.split('//') + if (callDetails.length > 1) { + toolTip(`initiating ${callDetails[0]} ...`) + // @todo(remove the timeout when activatePlugin is on 0.3.0) + self.appManager.call(...callDetails).catch(console.error) + } } - } - }).catch(console.error) + }) + .catch(console.error) } }) // activate solidity plugin diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts index 3f98da0f85..05fbe1642d 100644 --- a/apps/remix-ide/src/app/panels/layout.ts +++ b/apps/remix-ide/src/app/panels/layout.ts @@ -22,12 +22,12 @@ interface panels { export class Layout extends Plugin { event: any panels: panels - constructor() { + constructor () { super(profile) this.event = new EventEmitter() } - async onActivation(): Promise { + async onActivation (): Promise { console.log('layout plugin activated') this.on('fileManager', 'currentFileChanged', () => { this.panels.editor.active = true diff --git a/apps/remix-ide/src/app/panels/main-view.js b/apps/remix-ide/src/app/panels/main-view.js index 142dc6f96c..c1e59925c7 100644 --- a/apps/remix-ide/src/app/panels/main-view.js +++ b/apps/remix-ide/src/app/panels/main-view.js @@ -87,7 +87,7 @@ export class MainView { } self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta)) - // mv + // mv if (self.txListener) { self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => { self.txListener.setListenOnNetwork(listenOnNetWork) @@ -211,7 +211,7 @@ export class MainView { return self._components.terminal.registerCommand(name, command, opts) } - // rm + // rm updateTerminalFilter (filter) { this._components.terminal.updateJournal(filter) } diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js index f7842242e9..1b776f1db8 100644 --- a/apps/remix-ide/src/app/panels/tab-proxy.js +++ b/apps/remix-ide/src/app/panels/tab-proxy.js @@ -288,7 +288,6 @@ export class TabProxy extends Plugin { } renderComponent () { - const onSelect = (index) => { if (this.loadedTabs[index]) { const name = this.loadedTabs[index].name @@ -316,7 +315,6 @@ export class TabProxy extends Plugin { } renderTabsbar () { - return this.el } } diff --git a/apps/remix-ide/src/framingService.js b/apps/remix-ide/src/framingService.js index 8e37f8efb3..d7c2a1c5f8 100644 --- a/apps/remix-ide/src/framingService.js +++ b/apps/remix-ide/src/framingService.js @@ -1,9 +1,6 @@ export class FramingService { constructor (verticalIcons, layout) { this.verticalIcons = verticalIcons - this.mainPanel = mainView.getAppPanel() - this.mainView = mainView - this.resizeFeature = resizeFeature } start (params) { diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js index d56357ae6d..ba56282dfc 100644 --- a/apps/remix-ide/src/remixAppManager.js +++ b/apps/remix-ide/src/remixAppManager.js @@ -1,6 +1,5 @@ /* global localStorage, fetch */ import { PluginManager } from '@remixproject/engine' -import { IframeReactPlugin } from '@remix-ui/app' import { EventEmitter } from 'events' import QueryParams from './lib/query-params' import { PermissionHandler } from './app/ui/persmission-handler' diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.css b/libs/remix-ui/panel/src/lib/main/main-panel.css index 5e1dc17d54..d569338fab 100644 --- a/libs/remix-ui/panel/src/lib/main/main-panel.css +++ b/libs/remix-ui/panel/src/lib/main/main-panel.css @@ -4,4 +4,5 @@ height : 100%; width : 100%; position: relative; - } \ No newline at end of file + } + 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 458ae37c17..d51facfe87 100644 --- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx +++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx @@ -1,5 +1,5 @@ import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context' -import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line +import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react' // eslint-disable-line import DragBar from '../dragbar/dragbar' import RemixUIPanelPlugin from '../plugins/panel-plugin' import { PluginRecord } from '../types' @@ -16,14 +16,15 @@ const RemixUIMainPanel = () => { const refs = [tabsRef, editorRef, mainPanelRef, terminalRef] const _adjustLayout = (delta: number) => { - if(!delta) return + if (!delta) return + console.log('adjustLayout', delta, terminalRef.current) const limitDown = 32 const containerHeight = window.innerHeight const tmp = delta - limitDown delta = tmp > 0 ? tmp : 0 let mainPanelHeight = containerHeight - delta mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight - //self.editor.resize((document.querySelector('#editorWrap') || {}).checked) + // self.editor.resize((document.querySelector('#editorWrap') || {}).checked) editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`) terminalRef.current?.setAttribute('style', `height: ${delta}px`) mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`) @@ -32,7 +33,7 @@ const RemixUIMainPanel = () => { } const renderPanels = () => { - //console.log(appContext) + // console.log(appContext) if (appContext) { console.log(appContext) const pluginPanels: PluginRecord[] = [] @@ -40,8 +41,8 @@ const RemixUIMainPanel = () => { pluginPanels.push({ profile: panel.plugin.profile, active: panel.active, - view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar(): panel.plugin.render(), - class: panel.plugin.profile.name + view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(), + class: panel.plugin.profile.name + '-wrap' }) }) // console.log(pluginPanels) @@ -53,13 +54,18 @@ const RemixUIMainPanel = () => { } } + useLayoutEffect(() => { + _adjustLayout(323) + }) + useEffect(() => { renderPanels() console.log(appContext.layout) - appContext.layout.event.on('change',() => { + appContext.layout.event.on('change', () => { console.log('change') renderPanels() }) + }, []) return ( @@ -68,12 +74,12 @@ const RemixUIMainPanel = () => { console.log(pluginRecord) return ( <> - {(pluginRecord.profile.name === 'terminal') ? :<>} - + {(pluginRecord.profile.name === 'terminal') ? : <>} + ) })}