main view

apps/remix-ide/src/app.js

@@ -49,6 +49,7 @@ const TestTab = require('./app/tabs/test-tab')
 const FilePanel = require('./app/panels/file-panel')
 const Editor = require('./app/editor/editor')
 const Terminal = require('./app/panels/terminal')
+const { TabProxy } = require('./app/panels/tab-proxy.js')
 
 class AppComponent {
   constructor () {
@@ -82,6 +83,7 @@ class AppComponent {
     // APP_MANAGER
     const appManager = self.appManager
     const pluginLoader = self.appManager.pluginLoader
+    self.panels = {}
     self.workspace = pluginLoader.get()
     self.engine = new RemixEngine()
     self.engine.register(appManager)
@@ -182,12 +184,12 @@ class AppComponent {
 
     // LAYOUT & SYSTEM VIEWS
     const appPanel = new MainPanel()
-    self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
+    // 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,
-      self.mainview.tabProxy
+      tabProxy
     ])
 
     // those views depend on app_manager
@@ -249,6 +251,13 @@ class AppComponent {
       filePanel.hardhatHandle,
       filePanel.slitherHandle
     ])
+
+    self.panels = {
+      main: appPanel,
+      editor: editor,
+      terminal: terminal,
+      tabs: tabProxy
+    }
   }
 
   async activate () {
@@ -268,6 +277,7 @@ class AppComponent {
 
     await self.appManager.activatePlugin(['editor'])
     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'])
@@ -314,10 +324,10 @@ class AppComponent {
     // activate solidity plugin
     self.appManager.activatePlugin(['solidity', 'udapp'])
     // Load and start the service who manager layout and frame
-    const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, null)
+    // const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, null)
 
-    if (params.embed) framingService.embed()
+    // if (params.embed) framingService.embed()
-    framingService.start(params)
+    // framingService.start(params)
   }
 }
 

apps/remix-ide/src/app/components/hidden-panel.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-import { RemixPanel } from '@remix-ui/panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
 
 const profile = {
   name: 'hiddenPanel',
@@ -33,6 +33,6 @@ export class HiddenPanel extends AbstractPanel {
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixPanel header={<></>} plugins={this.plugins}/>, this.el)
+    ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.el)
   }
 }

apps/remix-ide/src/app/components/main-panel.tsx

@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixPanel } from '@remix-ui/panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 
 const profile = {
@@ -51,6 +51,6 @@ export class MainPanel extends AbstractPanel {
     }
 
     renderComponent () {
-      ReactDOM.render(<RemixPanel header={<></>} plugins={this.plugins}/>, this.element)
+      ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.element)
     }
 }

apps/remix-ide/src/app/components/panel.ts

@@ -9,6 +9,7 @@ type PluginRecord = {
   profile: Profile
   view: any
   active: boolean
+  class?: string
 }
 export class AbstractPanel extends HostPlugin {
   events: EventEmitter
@@ -31,7 +32,8 @@ export class AbstractPanel extends HostPlugin {
     this.plugins[profile.name] = {
       profile: profile,
       view: view,
-      active: false
+      active: false,
+      class: 'plugItIn'
     }
   }
 

apps/remix-ide/src/app/components/side-panel.tsx

@@ -2,11 +2,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { AbstractPanel } from './panel'
-import { RemixPanel } from '@remix-ui/panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixAppManager } from '../../remixAppManager'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/panel-header'
+import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
@@ -90,6 +90,6 @@ export class SidePanel extends AbstractPanel {
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins}/>, this.sideelement)
+    ReactDOM.render(<RemixPluginPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins}/>, this.sideelement)
   }
 }

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

@@ -0,0 +1,15 @@
+import { Plugin } from '@remixproject/engine'
+import { Profile } from '@remixproject/plugin-utils'
+const EventManager = require('../../lib/events')
+
+const profile:Profile = {
+  name: 'layout',
+  description: 'layout'
+}
+export class Layout extends Plugin {
+  event: any
+  constructor () {
+    super(profile)
+    this.event = new EventManager()
+  }
+}

apps/remix-ide/src/app/panels/main-view-react.tsx

@@ -1,30 +0,0 @@
-import { EditorContextListener } from '@remix-project/core-plugin'
-import { Plugin } from '@remixproject/engine'
-import { Profile } from '@remixproject/plugin-utils'
-import { MainPanel } from '../components/main-panel'
-const EventManager = require('../../lib/events')
-
-const profile:Profile = {
-  name: 'mainview',
-  description: 'main panel'
-}
-export class MainViewReact extends Plugin {
-  fileManager: Plugin
-  event: any
-  tabProxy: Plugin
-  editor: Plugin
-  mainPanel: MainPanel
-  terminal: Plugin
-  appManager: Plugin
-  contextualListener: EditorContextListener
-  constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
-    super(profile)
-    this.fileManager = fileManager
-    this.event = new EventManager()
-    this.editor = editor
-    this.terminal = terminal
-    this.appManager = appManager
-    this.mainPanel = mainPanel
-    this.contextualListener = contextualListener
-  }
-}

apps/remix-ide/src/app/panels/main-view.js

@@ -73,6 +73,7 @@ export class MainView {
       self._view.editor.style.display = 'block'
       self._view.mainPanel.style.display = 'none'
     })
+    // when no tab is selected count 0 open home tab
     self.tabProxy.event.on('tabCountChanged', (count) => {
       if (!count) this.editor.displayEmptyReadOnlySession()
     })
@@ -86,17 +87,20 @@ export class MainView {
     }
 
     self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
+    // mv 
     if (self.txListener) {
       self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => {
         self.txListener.setListenOnNetwork(listenOnNetWork)
       })
     }
   }
+  // rm
 
   _terminalTopOffset () {
     return this._deps.config.get('terminal-top-offset') || 150
   }
 
+  /* can be rm */
   _adjustLayout (direction, delta) {
     var limitUp = 0
     var limitDown = 32
@@ -127,6 +131,7 @@ export class MainView {
     }
   }
 
+  /* plugin calls */
   minimizeTerminal () {
     this._adjustLayout('top')
   }
@@ -135,20 +140,24 @@ export class MainView {
     this._adjustLayout('top', offset || this._terminalTopOffset())
   }
 
+  // rm
   getTerminal () {
     return this._components.terminal
   }
 
+  // rm
   getEditor () {
     var self = this
     return self.editor
   }
 
+  // rm
   refresh () {
     var self = this
     self._view.tabs.onmouseenter()
   }
 
+  // rm logs
   log (data = {}) {
     var self = this
     var command = self._components.terminal.commands[data.type]
@@ -172,7 +181,7 @@ export class MainView {
     self._view.editor.style.display = 'none'
     self._view.mainPanel = self.mainPanel.render()
     self._view.terminal = self._components.terminal.render()
-
+    // rm contextview
     self._view.mainview = yo`
       <div class=${css.mainview}>
         ${self.tabProxy.renderTabsbar()}
@@ -192,12 +201,14 @@ export class MainView {
 
     return self._view.mainview
   }
+  // rm
 
   registerCommand (name, command, opts) {
     var self = this
     return self._components.terminal.registerCommand(name, command, opts)
   }
 
+  // rm 
   updateTerminalFilter (filter) {
     this._components.terminal.updateJournal(filter)
   }

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

@@ -5,6 +5,7 @@ import MatomoDialog from './modals/matomo'
 import AlertModal from './modals/alert'
 import AppContext from './context/context'
 import DragBar from './dragbar/dragbar'
+import { RemixUIMainPanel } from '@remix-ui/panel'
 interface IRemixAppUi {
   app: any
 }
@@ -69,7 +70,7 @@ const RemixApp = (props: IRemixAppUi) => {
   }
 
   return (
-    <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager }}>
+    <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager, panels: props.app.panels }}>
       <RemixSplashScreen hide={appReady}></RemixSplashScreen>
       <AlertModal></AlertModal>
       <MatomoDialog hide={!appReady}></MatomoDialog>
@@ -78,8 +79,9 @@ const RemixApp = (props: IRemixAppUi) => {
         {components.iconPanel}
         {components.sidePanel}
         <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
-        {components.mainPanel}
+        <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
-
+          <RemixUIMainPanel></RemixUIMainPanel>
+        </div>
       </div>
       {components.hiddenPanel}
     </AppContext.Provider>

libs/remix-ui/panel/src/index.ts

@@ -1 +1,2 @@
-export { default as RemixPanel } from './lib/remix-ui-panel'
+export { default as RemixPluginPanel } from './lib/plugins/remix-ui-panel'
+export { default as RemixUIMainPanel } from './lib/main/main-panel'

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

@@ -0,0 +1,6 @@
+.mainview            {
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+    width             : 100%;
+  }  

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

@@ -0,0 +1,52 @@
+import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
+import { editor } from 'monaco-editor'
+import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import { PluginRecord } from '../types'
+import './main-panel.css'
+
+const RemixUIMainPanel = () => {
+  const appContext = useContext(AppContext)
+  const tabsRef = useRef<HTMLDivElement>(null)
+  const mainPanelRef = useRef<HTMLDivElement>(null)
+  const terminalRef = useRef<HTMLDivElement>(null)
+  const editorRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+
+    console.log(appContext)
+    if(appContext) {
+      console.log(appContext)
+      tabsRef.current.appendChild(appContext.panels.tabs.renderTabsbar())
+      editorRef.current.appendChild(appContext.panels.editor.render())
+      mainPanelRef.current.appendChild(appContext.panels.main.render())
+      terminalRef.current.appendChild(appContext.panels.terminal.render())
+      console.log(appContext.panels.main.render())
+
+      const plugins: PluginRecord[] = [
+        {
+          profile: appContext.panels.tabs.profile,
+          active: true,
+          view: appContext.panels.tabs.renderTabsbar()
+        }
+      ]
+    }
+  }, [])
+
+  const components = {
+    tabs: <div ref={tabsRef}></div>,
+    editor: <div ref={editorRef}></div>,
+    main: <div ref={mainPanelRef}></div>,
+    terminal: <div ref={terminalRef}></div>
+  }
+
+
+
+  return (<div className='mainview'>
+    { components.tabs }
+    { components.editor }
+    { components.main }
+    { components.terminal }
+  </div>)
+}
+
+export default RemixUIMainPanel

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
-import { PluginRecord } from './types'
+import { PluginRecord } from '../types'
 import './panel.css'
 
 export interface RemixPanelProps {

libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx

@@ -1,26 +1,26 @@
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
-import { PluginRecord } from './types'
+import { PluginRecord } from '../types'
 import './panel.css'
 interface panelPLuginProps {
     pluginRecord: PluginRecord
 }
 
 const RemixUIPanelPlugin = (props: panelPLuginProps) => {
-  const sidePanelRef = useRef(null)
+  const PanelRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
-    if (sidePanelRef.current) {
+    if (PanelRef.current) {
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {
           setView(props.pluginRecord.view)
         } else {
-          sidePanelRef.current.appendChild(props.pluginRecord.view)
+          PanelRef.current.appendChild(props.pluginRecord.view)
         }
       }
     }
   }, [])
 
-  return <div className={props.pluginRecord.active ? 'plugItIn active' : 'd-none'} ref={sidePanelRef}>{view}</div>
+  return <div className={props.pluginRecord.active ? `${props.pluginRecord.class} active` : 'd-none'} ref={PanelRef}>{view}</div>
 }
 
 export default RemixUIPanelPlugin

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

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './panel.css'
-import RemixUIPanelHeader from './panel-header'
 import RemixUIPanelPlugin from './panel-plugin'
-import { PluginRecord } from './types'
+import { PluginRecord } from '../types'
 
 /* eslint-disable-next-line */
 export interface RemixPanelProps {
@@ -10,7 +9,7 @@ export interface RemixPanelProps {
   header: JSX.Element
 }
 
-export function RemixPanel (props: RemixPanelProps) {
+export function RemixPluginPanel (props: RemixPanelProps) {
   return (
     <>
       {props.header}
@@ -26,4 +25,4 @@ export function RemixPanel (props: RemixPanelProps) {
   )
 }
 
-export default RemixPanel
+export default RemixPluginPanel

libs/remix-ui/panel/src/lib/types/index.ts

@@ -4,4 +4,5 @@ export type PluginRecord = {
     profile: Profile
     view: any
     active: boolean
+    class?: string
   }