mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Refactor editor.js for es6

Browse Source
pull/3094/head
Grandschtroumpf 6 years ago
parent fe3ea4518f
commit 1efef9c889
1 changed files with 242 additions and 204 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 366
      src/app/editor/editor.js

366
src/app/editor/editor.js
Unescape View File

@ -49,72 +49,97 @@ document.head.appendChild(yo`
.highlightreference { .highlightreference {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: ${styles.editor.backgroundColor_Editor_Context_Highlights}; background-color: ${
styles.editor.backgroundColor_Editor_Context_Highlights
};
opacity: 0.7 opacity: 0.7
} }
.highlightreferenceline { .highlightreferenceline {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: ${styles.editor.backgroundColor_Editor_Context_Highlights}; background-color: ${
styles.editor.backgroundColor_Editor_Context_Highlights
};
opacity: 0.7 opacity: 0.7
} }
.highlightcode { .highlightcode {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: ${styles.editor.backgroundColor_Editor_Context_Error_Highlights}; background-color: ${
styles.editor.backgroundColor_Editor_Context_Error_Highlights
};
} }
</style> </style>
`) `)
function Editor (opts = {}, localRegistry) { class Editor {
var self = this /*
var el = yo`<div id="input"></div>` // Private
var editor = ace.edit(el) _components
_deps
// Public
editor
event
sessions
modes
sourceAnnotations
readOnlySessions
previousInput
saveTimeout
sourceHighlighters
currentSession
emptySession
*/
constructor(opts = {}, localRegistry) {
const el = yo`<div id="input"></div>`
this.editor = ace.edit(el)
if (styles.appProperties.aceTheme) { if (styles.appProperties.aceTheme) {
editor.setTheme('ace/theme/' + styles.appProperties.aceTheme) this.editor.setTheme('ace/theme/' + styles.appProperties.aceTheme)
} }
self._components = {} this._components = {}
self._components.registry = localRegistry || globalRegistry this._components.registry = localRegistry || globalRegistry
self._deps = { this._deps = {
fileManager: self._components.registry.get('filemanager').api, fileManager: this._components.registry.get('filemanager').api,
config: self._components.registry.get('config').api config: this._components.registry.get('config').api
} }
ace.acequire('ace/ext/language_tools') ace.acequire('ace/ext/language_tools')
editor.setOptions({ this.editor.setOptions({
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
enableLiveAutocompletion: true enableLiveAutocompletion: true
}) })
var flowCompleter = { const flowCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) { getCompletions: function(editor, session, pos, prefix, callback) {
// @TODO add here other propositions // @TODO add here other propositions
} }
} }
langTools.addCompleter(flowCompleter) langTools.addCompleter(flowCompleter)
el.className += ' ' + css['ace-editor'] el.className += ' ' + css['ace-editor']
el.editor = editor // required to access the editor during tests el.editor = this.editor // required to access the editor during tests
self.render = function () { return el } this.render = () => el
var event = new EventManager()
self.event = event this.event = new EventManager()
var sessions = {} this.sessions = {}
var sourceAnnotations = [] this.sourceAnnotations = []
var readOnlySessions = {} this.readOnlySessions = {}
var currentSession
this.emptySession = this._createSession('')
var emptySession = createSession('') this.modes = {
var modes = { sol: 'ace/mode/solidity',
'sol': 'ace/mode/solidity', js: 'ace/mode/javascript',
'js': 'ace/mode/javascript', py: 'ace/mode/python',
'py': 'ace/mode/python', vy: 'ace/mode/python',
'vy': 'ace/mode/python', txt: 'ace/mode/text',
'txt': 'ace/mode/text', json: 'ace/mode/json',
'json': 'ace/mode/json', abi: 'ace/mode/json'
'abi': 'ace/mode/json' }
}
/** Listen on Gutter Mouse Down */
editor.on('guttermousedown', function (e) { this.editor.on('guttermousedown', e => {
var target = e.domEvent.target var target = e.domEvent.target
if (target.className.indexOf('ace_gutter-cell') === -1) { if (target.className.indexOf('ace_gutter-cell') === -1) {
return return
@ -123,38 +148,77 @@ function Editor (opts = {}, localRegistry) {
var breakpoints = e.editor.session.getBreakpoints() var breakpoints = e.editor.session.getBreakpoints()
for (var k in breakpoints) { for (var k in breakpoints) {
if (k === row.toString()) { if (k === row.toString()) {
event.trigger('breakpointCleared', [currentSession, row]) this.event.trigger('breakpointCleared', [this.currentSession, row])
e.editor.session.clearBreakpoint(row) e.editor.session.clearBreakpoint(row)
e.stop() e.stop()
return return
} }
} }
self.setBreakpoint(row) this.setBreakpoint(row)
event.trigger('breakpointAdded', [currentSession, row]) this.event.trigger('breakpointAdded', [this.currentSession, row])
e.stop() e.stop()
}) })
this.displayEmptyReadOnlySession = function () { this.previousInput = ''
currentSession = null this.saveTimeout = null
editor.setSession(emptySession) // Do setup on initialisation here
editor.setReadOnly(true) this.editor.on('changeSession', () => {
this._onChange()
this.event.trigger('sessionSwitched', [])
this.editor.getSession().on('change', () => {
this._onChange()
this.event.trigger('contentChanged', [])
})
})
// Unmap ctrl-t & ctrl-f
this.editor.commands.bindKeys({ 'ctrl-t': null })
this.editor.setShowPrintMargin(false)
this.editor.resize(true)
this.sourceHighlighters = new SourceHighlighters()
} }
this.setBreakpoint = function (row, css) { _onChange() {
editor.session.setBreakpoint(row, css) var currentFile = this._deps.config.get('currentFile')
if (!currentFile) {
return
}
var input = this.get(currentFile)
if (!input) {
return
}
// if there's no change, don't do anything
if (input === this.previousInput) {
return
} }
this.previousInput = input
this.editorFontSize = function (incr) { // fire storage update
editor.setFontSize(editor.getFontSize() + incr) // NOTE: save at most once per 5 seconds
if (this.saveTimeout) {
window.clearTimeout(this.saveTimeout)
}
this.saveTimeout = window.setTimeout(() => {
this._deps.fileManager.saveCurrentFile()
}, 5000)
} }
this.setText = function (text) { _switchSession(path) {
if (currentSession && sessions[currentSession]) { this.currentSession = path
sessions[currentSession].setValue(text) this.editor.setSession(this.sessions[this.currentSession])
this.editor.setReadOnly(this.readOnlySessions[this.currentSession])
this.editor.focus()
} }
_getMode(path) {
var ext = path.indexOf('.') !== -1 ? /[^.]+$/.exec(path) : null
if (ext) ext = ext[0]
return ext && this.modes[ext] ? this.modes[ext] : this.modes['txt']
} }
function createSession (content, mode) { _createSession(content, mode) {
var s = new ace.EditSession(content) var s = new ace.EditSession(content)
s.setMode(mode || 'ace/mode/text') s.setMode(mode || 'ace/mode/text')
s.setUndoManager(new ace.UndoManager()) s.setUndoManager(new ace.UndoManager())
@ -163,37 +227,48 @@ function Editor (opts = {}, localRegistry) {
return s return s
} }
function switchSession (path) { find(string) {
currentSession = path return this.editor.find(string)
editor.setSession(sessions[currentSession])
editor.setReadOnly(readOnlySessions[currentSession])
editor.focus()
} }
function getMode (path) { displayEmptyReadOnlySession() {
var ext = path.indexOf('.') !== -1 ? /[^.]+$/.exec(path) : null this.currentSession = null
if (ext) ext = ext[0] this.editor.setSession(this.emptySession)
return ext && modes[ext] ? modes[ext] : modes['txt'] this.editor.setReadOnly(true)
}
setBreakpoint(row, css) {
this.editor.session.setBreakpoint(row, css)
}
editorFontSize(incr) {
this.editor.setFontSize(this.editor.getFontSize() + incr)
}
setText(text) {
if (this.currentSession && this.sessions[this.currentSession]) {
this.sessions[this.currentSession].setValue(text)
}
} }
this.open = function (path, content) { open(path, content) {
if (!sessions[path]) { if (!this.sessions[path]) {
var session = createSession(content, getMode(path)) var session = this._createSession(content, this._getMode(path))
sessions[path] = session this.sessions[path] = session
readOnlySessions[path] = false this.readOnlySessions[path] = false
} else if (sessions[path].getValue() !== content) { } else if (this.sessions[path].getValue() !== content) {
sessions[path].setValue(content) this.sessions[path].setValue(content)
} }
switchSession(path) this._switchSession(path)
} }
this.openReadOnly = function (path, content) { openReadOnly(path, content) {
if (!sessions[path]) { if (!this.sessions[path]) {
var session = createSession(content, getMode(path)) var session = this._createSession(content, this._getMode(path))
sessions[path] = session this.sessions[path] = session
readOnlySessions[path] = true this.readOnlySessions[path] = true
} }
switchSession(path) this._switchSession(path)
} }
/** /**
@ -201,7 +276,7 @@ function Editor (opts = {}, localRegistry) {
* *
* @return {String} content of the file referenced by @arg path * @return {String} content of the file referenced by @arg path
*/ */
this.currentContent = function () { currentContent() {
return this.get(this.current()) return this.get(this.current())
} }
@ -211,11 +286,11 @@ function Editor (opts = {}, localRegistry) {
* *
* @return {String} content of the file referenced by @arg path * @return {String} content of the file referenced by @arg path
*/ */
this.get = function (path) { get(path) {
if (!path || currentSession === path) { if (!path || this.currentSession === path) {
return editor.getValue() return this.editor.getValue()
} else if (sessions[path]) { } else if (this.sessions[path]) {
return sessions[path].getValue() return this.sessions[path].getValue()
} }
} }
@ -225,36 +300,41 @@ function Editor (opts = {}, localRegistry) {
* *
* @return {String} path of the current session * @return {String} path of the current session
*/ */
this.current = function () { current() {
if (editor.getSession() === emptySession) { if (this.editor.getSession() === this.emptySession) {
return return
} }
return currentSession return this.currentSession
} }
this.getCursorPosition = function () { getCursorPosition() {
return editor.session.doc.positionToIndex(editor.getCursorPosition(), 0) return this.editor.session.doc.positionToIndex(
this.editor.getCursorPosition(),
0
)
} }
this.discardCurrentSession = function () { discardCurrentSession() {
if (sessions[currentSession]) { if (this.sessions[this.currentSession]) {
delete sessions[currentSession] delete this.sessions[this.currentSession]
currentSession = null this.currentSession = null
} }
} }
this.discard = function (path) { discard(path) {
if (sessions[path]) delete sessions[path] if (this.sessions[path]) delete this.sessions[path]
if (currentSession === path) currentSession = null if (this.currentSession === path) this.currentSession = null
} }
this.resize = function (useWrapMode) { resize(useWrapMode) {
editor.resize() this.editor.resize()
var session = editor.getSession() var session = this.editor.getSession()
session.setUseWrapMode(useWrapMode) session.setUseWrapMode(useWrapMode)
if (session.getUseWrapMode()) { if (session.getUseWrapMode()) {
var characterWidth = editor.renderer.characterWidth var characterWidth = this.editor.renderer.characterWidth
var contentWidth = editor.container.ownerDocument.getElementsByClassName('ace_scroller')[0].clientWidth var contentWidth = this.editor.container.ownerDocument.getElementsByClassName(
'ace_scroller'
)[0].clientWidth
if (contentWidth > 0) { if (contentWidth > 0) {
session.setWrapLimit(parseInt(contentWidth / characterWidth, 10)) session.setWrapLimit(parseInt(contentWidth / characterWidth, 10))
@ -262,89 +342,47 @@ function Editor (opts = {}, localRegistry) {
} }
} }
this.addMarker = function (lineColumnPos, source, cssClass) { addMarker(lineColumnPos, source, cssClass) {
var currentRange = new Range(lineColumnPos.start.line, lineColumnPos.start.column, lineColumnPos.end.line, lineColumnPos.end.column) var currentRange = new Range(
if (sessions[source]) { lineColumnPos.start.line,
return sessions[source].addMarker(currentRange, cssClass) lineColumnPos.start.column,
lineColumnPos.end.line,
lineColumnPos.end.column
)
if (this.sessions[source]) {
return this.sessions[source].addMarker(currentRange, cssClass)
} }
return null return null
} }
this.scrollToLine = function (line, center, animate, callback) { scrollToLine(line, center, animate, callback) {
editor.scrollToLine(line, center, animate, callback) this.editor.scrollToLine(line, center, animate, callback)
}
this.removeMarker = function (markerId, source) {
if (sessions[source]) {
sessions[source].removeMarker(markerId)
}
}
this.clearAnnotations = function () {
sourceAnnotations = []
editor.getSession().clearAnnotations()
} }
this.addAnnotation = function (annotation) { removeMarker(markerId, source) {
sourceAnnotations[sourceAnnotations.length] = annotation if (this.sessions[source]) {
this.setAnnotations(sourceAnnotations) this.sessions[source].removeMarker(markerId)
} }
this.setAnnotations = function (sourceAnnotations) {
editor.getSession().setAnnotations(sourceAnnotations)
} }
this.gotoLine = function (line, col) { clearAnnotations() {
editor.focus() this.sourceAnnotations = []
editor.gotoLine(line + 1, col - 1, true) this.editor.getSession().clearAnnotations()
} }
this.find = (string) => editor.find(string) addAnnotation(annotation) {
this.sourceAnnotations[this.sourceAnnotations.length] = annotation
this.previousInput = '' this.setAnnotations(this.sourceAnnotations)
this.saveTimeout = null
// Do setup on initialisation here
editor.on('changeSession', function () {
editorOnChange(self)
event.trigger('sessionSwitched', [])
editor.getSession().on('change', function () {
editorOnChange(self)
event.trigger('contentChanged', [])
})
})
// Unmap ctrl-t & ctrl-f
editor.commands.bindKeys({ 'ctrl-t': null })
editor.setShowPrintMargin(false)
editor.resize(true)
this.sourceHighlighters = new SourceHighlighters()
} }
function editorOnChange (self) { setAnnotations(sourceAnnotations) {
var currentFile = self._deps.config.get('currentFile') this.editor.getSession().setAnnotations(sourceAnnotations)
if (!currentFile) {
return
}
var input = self.get(currentFile)
if (!input) {
return
}
// if there's no change, don't do anything
if (input === self.previousInput) {
return
} }
self.previousInput = input
// fire storage update gotoLine(line, col) {
// NOTE: save at most once per 5 seconds this.editor.focus()
if (self.saveTimeout) { this.editor.gotoLine(line + 1, col - 1, true)
window.clearTimeout(self.saveTimeout)
} }
self.saveTimeout = window.setTimeout(() => {
self._deps.fileManager.saveCurrentFile()
}, 5000)
} }
module.exports = Editor module.exports = Editor

Write Preview
Loading…
Cancel
Save