fake layout fix

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' })
+    Registry.getInstance().put({
-    self._components.filesProviders.localhost = new RemixDProvider(self.appManager)
+      api: self._components.filesProviders.browser,
-    Registry.getInstance().put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' })
+      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.showMatamo =
-    self.walkthroughService = new WalkthroughService(appManager, 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
+          let newpos = event.pageY < limitUp ? limitUp : event.pageY
-          newpos = (newpos < height - limitDown) ? newpos : height - limitDown
+          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([
+    self.engine.register([appPanel, tabProxy])
-      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 },
+      tabs: { plugin: tabProxy, active: true },
-      editor: { plugin:editor, active: true },
+      editor: { plugin: editor, active: true },
-      main: { plugin:appPanel, active: false },
+      main: { plugin: appPanel, active: false },
-      terminal: { plugin:terminal, active: true },
+      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 () => {
+    self.appManager.on(
-      await self.appManager.registerContextMenuItems()
+      '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 () => {
+        self.appManager
-          try {
+          .activatePlugin(self.workspace)
-            if (params.deactivate) {
+          .then(async () => {
-              await self.appManager.deactivatePlugin(params.deactivate.split(','))
+            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.call) {
-          }
+              const callDetails = params.call.split('//')
-          if (params.code) {
+              if (callDetails.length > 1) {
-            // if code is given in url we focus on solidity plugin
+                toolTip(`initiating ${callDetails[0]} ...`)
-            self.menuicons.select('solidity')
+                // @todo(remove the timeout when activatePlugin is on 0.3.0)
-          } else {
+                self.appManager.call(...callDetails).catch(console.error)
-            // 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)
             }
-          }
+          })
-        }).catch(console.error)
+          .catch(console.error)
       }
     })
     // activate solidity plugin

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<void> {
+  async onActivation (): Promise<void> {
     console.log('layout plugin activated')
     this.on('fileManager', 'currentFileChanged', () => {
       this.panels.editor.active = true

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)
   }

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
   }
 }

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) {

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'

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

@@ -4,4 +4,5 @@
     height            : 100%;
     width             : 100%;
     position: relative;
-  }  
+  }  
+

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(),
+          view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
-          class: panel.plugin.profile.name
+          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') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={()=>{}} refObject={terminalRef}></DragBar>:<></>}
+            {(pluginRecord.profile.name === 'terminal') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : <></>}
-          <RemixUIPanelPlugin
+            <RemixUIPanelPlugin
-            ref={refs[i]}
+              ref={refs[i]}
-            key={pluginRecord.profile.name}
+              key={pluginRecord.profile.name}
-            pluginRecord={pluginRecord}
+              pluginRecord={pluginRecord}
-          />
+            />
           </>
         )
       })}