move Editor, ContextualListener, ContextView, CommandInterpreter to EditorPanel

src/app.js

@@ -24,7 +24,6 @@ var BrowserfilesTree = require('./app/files/browser-files-tree')
 var chromeCloudStorageSync = require('./app/files/chromeCloudStorageSync')
 var SharedFolder = require('./app/files/shared-folder')
 var Config = require('./config')
-var Editor = require('./app/editor/editor')
 var Renderer = require('./app/ui/renderer')
 var Compiler = require('remix-solidity').Compiler
 var executionContext = require('./execution-context')
@@ -40,12 +39,9 @@ var Txlistener = remixLib.execution.txListener
 var EventsDecoder = remixLib.execution.EventsDecoder
 var CompilerImport = require('./app/compiler/compiler-imports')
 var FileManager = require('./app/files/fileManager')
-var ContextualListener = require('./app/editor/contextualListener')
-var ContextView = require('./app/editor/contextView')
 var BasicReadOnlyExplorer = require('./app/files/basicReadOnlyExplorer')
 var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
 var toolTip = require('./app/ui/tooltip')
-var CommandInterpreter = require('./lib/cmdInterpreter')
 var TransactionReceiptResolver = require('./transactionReceiptResolver')
 var SourceHighlighter = require('./app/editor/sourceHighlighter')
 
@@ -237,7 +233,7 @@ class App {
     if (self._view.transactionDebugger.isActive) return
 
     self._components.fileManager.saveCurrentFile()
-    self._components.editor.clearAnnotations()
+    self._components.editorpanel.getEditor().clearAnnotations()
     var currentFile = self._components.config.get('currentFile')
     if (currentFile) {
       if (/.(.sol)$/.exec(currentFile)) {
@@ -469,39 +465,23 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   txlistener.startListening()
 
-  // ----------------- editor ----------------------------
-  this._components.editor = new Editor({}) // @TODO: put into editorpanel
-  var editor = self._components.editor // shortcut for the editor
-  registry.put({api: editor, name: 'editor'})
+  // TODO: There are still a lot of dep between editorpanel and filemanager
 
-  // ----------------- Command Interpreter -----------------
-  /*
-    this module basically listen on user input (from terminal && editor)
-    and interpret them as commands
-  */
-  var cmdInterpreter = new CommandInterpreter() // @TODO: put into editorpanel
+  // ----------------- editor panel ----------------------
+  self._components.editorpanel = new EditorPanel()
+  registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
 
-  registry.put({api: cmdInterpreter, name: 'cmdinterpreter'})
   // ----------------- file manager ----------------------------
-
   self._components.fileManager = new FileManager()
   var fileManager = self._components.fileManager
   registry.put({api: fileManager, name: 'filemanager'})
 
-  // ---------------- ContextualListener -----------------------
-  this._components.contextualListener = new ContextualListener()
-  registry.put({api: this._components.contextualListener, name: 'contextualListener'})
-
-  // ---------------- ContextView -----------------------
-  this._components.contextView = new ContextView()
-  registry.put({api: this._components.contextView, name: 'contextview'})
-
-  // ----------------- editor panel ----------------------
-  this._components.editorpanel = new EditorPanel()
-  registry.put({ api: this._components.editorpanel, name: 'editorpanel' })
-  this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
+  self._components.editorpanel.init()
+  self._components.fileManager.init()
 
-  this._view.centerpanel.appendChild(this._components.editorpanel.render())
+  self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
+  self._view.centerpanel.appendChild(self._components.editorpanel.render())
+  var editor = self._components.editorpanel.getEditor()
 
   // The event listener needs to be registered as early as possible, because the
   // parent will send the message upon the "load" event.

src/app/editor/contextView.js

@@ -14,13 +14,13 @@ var css = require('./styles/contextView-styles')
    - rename declaration/references
 */
 class ContextView {
-  constructor (localRegistry) {
+  constructor (opts, localRegistry) {
     const self = this
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
+    self.contextualListener = opts.contextualListener
+    self.editor = opts.editor
     self._deps = {
-      contextualListener: self._components.registry.get('contextualListener').api,
-      editor: self._components.registry.get('editor').api,
       compiler: self._components.registry.get('compiler').api,
       offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api,
       config: self._components.registry.get('config').api,
@@ -31,7 +31,7 @@ class ContextView {
     this._current
     this.sourceMappingDecoder = new SourceMappingDecoder()
     this.previousElement = null
-    self._deps.contextualListener.event.register('contextChanged', nodes => {
+    self.contextualListener.event.register('contextChanged', nodes => {
       this._nodes = nodes
       this.update()
     })
@@ -76,7 +76,7 @@ class ContextView {
       if (isDefinition(last)) {
         this._current = last
       } else {
-        var target = this._deps.contextualListener.declarationOf(last)
+        var target = this.contextualListener.declarationOf(last)
         if (target) {
           this._current = target
         } else {
@@ -94,7 +94,7 @@ class ContextView {
     var self = this
     function jumpToLine (lineColumn) {
       if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) {
-        self._deps.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
+        self.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
       }
     }
     if (self._deps.compiler.lastCompilationResult && self._deps.compiler.lastCompilationResult.data) {
@@ -119,12 +119,12 @@ class ContextView {
   _render (node, nodeAtCursorPosition) {
     if (!node) return yo`<div></div>`
     var self = this
-    var references = self._deps.contextualListener.referencesOf(node)
+    var references = self.contextualListener.referencesOf(node)
     var type = (node.attributes && node.attributes.type) ? node.attributes.type : node.name
     references = `${references ? references.length : '0'} reference(s)`
 
     var ref = 0
-    var nodes = self._deps.contextualListener.getActiveHighlights()
+    var nodes = self.contextualListener.getActiveHighlights()
     for (var k in nodes) {
       if (nodeAtCursorPosition.id === nodes[k].nodeId) {
         ref = k
@@ -161,7 +161,7 @@ class ContextView {
 
     function showGasEstimation () {
       if (node.name === 'FunctionDefinition') {
-        var result = self._deps.contextualListener.gasEstimation(node)
+        var result = self.contextualListener.gasEstimation(node)
         var executionCost = 'Execution cost: ' + result.executionCost + ' gas'
         var codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas'
         var estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}`

src/app/editor/contextualListener.js

@@ -9,14 +9,14 @@ var globalRegistry = require('../../global/registry')
   trigger contextChanged(nodes)
 */
 class ContextualListener {
-  constructor (localRegistry) {
+  constructor (opts, localRegistry) {
     var self = this
     this.event = new EventManager()
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
+    self.editor = opts.editor
     self._deps = {
       compiler: self._components.registry.get('compiler').api,
-      editor: self._components.registry.get('editor').api,
       config: self._components.registry.get('config').api,
       offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api
     }
@@ -37,12 +37,12 @@ class ContextualListener {
       }
     })
 
-    self._deps.editor.event.register('contentChanged', () => { this._stopHighlighting() })
+    self.editor.event.register('contentChanged', () => { this._stopHighlighting() })
 
     this.sourceMappingDecoder = new SourceMappingDecoder()
     this.astWalker = new AstWalker()
     setInterval(() => {
-      this._highlightItems(self._deps.editor.getCursorPosition(), self._deps.compiler.lastCompilationResult, self._deps.config.get('currentFile'))
+      this._highlightItems(self.editor.getCursorPosition(), self._deps.compiler.lastCompilationResult, self._deps.config.get('currentFile'))
     }, 1000)
   }
 
@@ -132,7 +132,7 @@ class ContextualListener {
       }
       var fileName = self._deps.compiler.getSourceName(position.file)
       if (fileName) {
-        return self._deps.editor.addMarker(lineColumn, fileName, css)
+        return self.editor.addMarker(lineColumn, fileName, css)
       }
     }
     return null
@@ -164,7 +164,7 @@ class ContextualListener {
     var self = this
     for (var eventKey in this._activeHighlights) {
       var event = this._activeHighlights[eventKey]
-      self._deps.editor.removeMarker(event.eventId, event.fileTarget)
+      self.editor.removeMarker(event.eventId, event.fileTarget)
     }
     this._activeHighlights = []
   }

src/app/files/fileManager.js

@@ -15,10 +15,12 @@ class FileManager {
   constructor (localRegistry) {
     this.tabbedFiles = {}
     this.event = new EventManager()
+    this._components = {}
+    this._components.registry = localRegistry || globalRegistry
+  }
 
+  init () {
     var self = this
-    self._components = {}
-    self._components.registry = localRegistry || globalRegistry
     self._deps = {
       compilerImport: self._components.registry.get('compilerimport').api,
       editor: self._components.registry.get('editor').api,

src/app/panels/editor-panel.js

@@ -4,8 +4,12 @@ var EventManager = remixLib.EventManager
 var $ = require('jquery')
 
 var Terminal = require('./terminal')
+var Editor = require('../editor/editor')
 var globalRegistry = require('../../global/registry')
 
+var CommandInterpreter = require('../../lib/cmdInterpreter')
+var ContextualListener = require('../editor/contextualListener')
+var ContextView = require('../editor/contextView')
 var styles = require('./styles/editor-panel-styles')
 var cssTabs = styles.cssTabs
 var css = styles.css
@@ -15,16 +19,15 @@ class EditorPanel {
     var self = this
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
+    self.event = new EventManager()
+  }
+  init () {
+    var self = this
     self._deps = {
       config: self._components.registry.get('config').api,
-      editor: self._components.registry.get('editor').api,
       txlistener: self._components.registry.get('txlistener').api,
-      contextView: self._components.registry.get('contextview').api,
-      udapp: self._components.registry.get('udapp').api,
-      cmdInterpreter: self._components.registry.get('cmdinterpreter').api,
       fileManager: self._components.registry.get('filemanager').api
     }
-    self.event = new EventManager()
     self.data = {
       _FILE_SCROLL_DELTA: 200,
       _layout: {
@@ -35,12 +38,16 @@ class EditorPanel {
       }
     }
     self._view = {}
+    var editor = new Editor({})
+    self._components.registry.put({api: editor, name: 'editor'})
+    var contextualListener = new ContextualListener({editor: editor})
     self._components = {
-      editor: self._deps.editor, // @TODO: instantiate in eventpanel instead of passing via `opts`
+      editor: editor,
+      contextualListener: contextualListener,
+      contextView: new ContextView({contextualListener: contextualListener, editor: editor}),
       terminal: new Terminal({
         api: {
-          cmdInterpreter: self._deps.cmdInterpreter,
-          udapp: self._deps.udapp,
+          cmdInterpreter: new CommandInterpreter(), // @TODO: put into editorpanel
           getPosition (event) {
             var limitUp = 36
             var limitDown = 20
@@ -52,6 +59,7 @@ class EditorPanel {
         }
       })
     }
+    
     self._components.terminal.event.register('filterChanged', (type, value) => {
       this.event.trigger('terminalFilterChanged', [type, value])
     })
@@ -93,6 +101,10 @@ class EditorPanel {
       self._components.terminal.scroll2bottom()
     }
   }
+  getEditor () {
+    var self = this
+    return self._components.editor
+  }
   refresh () {
     var self = this
     self._view.tabs.onmouseenter()
@@ -119,7 +131,7 @@ class EditorPanel {
       <div class=${css.content}>
         ${self._renderTabsbar()}
         <div class=${css.contextviewcontainer}>
-          ${self._deps.contextView.render()}
+          ${self._components.contextView.render()}
         </div>
         ${self._view.editor}
         ${self._view.terminal}
@@ -191,7 +203,7 @@ class EditorPanel {
       delete self._deps.fileManager.tabbedFiles[name]
       self._deps.fileManager.refreshTabs()
       if (Object.keys(self._deps.fileManager.tabbedFiles).length) {
-        self.switchFile(Object.keys(self._deps.fileManager.tabbedFiles)[0])
+        self._deps.fileManager.switchFile(Object.keys(self._deps.fileManager.tabbedFiles)[0])
       } else {
         self._deps.editor.displayEmptyReadOnlySession()
         self._deps.config.set('currentFile', '')