editor in class

frontend/index.js

@@ -76,13 +76,13 @@ function init () {
   })
   menu.sketches = sketches
 
-  keymaps.init ({
+  // keymaps.init ({
-    editor: editor,
+  //   editor: editor,
-    gallery: sketches,
+  //   gallery: sketches,
-    menu: menu,
+  //   menu: menu,
-    repl: repl,
+  //   repl: repl,
-    log: log
+  //   log: log
-  })
+  // })
 
   // define extra functions (eventually should be added to hydra-synth?)
 

frontend/src/editor/editor.js

@@ -6,138 +6,138 @@ require('codemirror-minified/addon/hint/show-hint')
 require('codemirror-minified/addon/selection/mark-selection')
 require('codemirror-minified/addon/comment/comment')
 
+const EventEmitter = require('events')
+
 var Mutator = require('../randomizer/Mutator.js');
 
 
 var isShowing = true
 
-var EditorClass = function () {
+module.exports = class Editor {
-	console.log("*** Editor class created");
+  constructor() {
-  var self = this
+    console.log("*** Editor class created");
+    var self = this
 
-	var container = document.createElement('div')
+    var container = document.createElement('div')
-  container.setAttribute('id','editor-container')
+    container.setAttribute('id', 'editor-container')
-  var el = document.createElement('TEXTAREA')
+    var el = document.createElement('TEXTAREA')
-  document.body.appendChild(container)
+    document.body.appendChild(container)
-  container.appendChild(el)
+    container.appendChild(el)
 
-  this.mutator = new Mutator(this);
+    this.mutator = new Mutator(this);
-  this.cm = CodeMirror.fromTextArea(el, {
+    this.cm = CodeMirror.fromTextArea(el, {
-    theme: 'tomorrow-night-eighties',
+      theme: 'tomorrow-night-eighties',
-    value: 'hello',
+      value: 'hello',
-    mode: {name: 'javascript', globalVars: true},
+      mode: { name: 'javascript', globalVars: true },
-    lineWrapping: true,
+      lineWrapping: true,
-    styleSelectedText: true
+      styleSelectedText: true
-  })
+    })
+    // console.log('code mirror', this.cm)
+    //this.cm.removeKeyMap()
 
- // console.log('code mirror', this.cm)
+    this.cm.refresh()
-	//this.cm.removeKeyMap()
 
-  this.cm.refresh()
+    this.show()
+    // // TO DO: add show code param
+    let searchParams = new URLSearchParams(window.location.search)
+    let showCode = searchParams.get('show-code')
 
-  this.show()
+    if (showCode === "false") {
-  // TO DO: add show code param
+      // console.log("not showing code")
-  let searchParams = new URLSearchParams(window.location.search)
-  let showCode = searchParams.get('show-code')
-
-    if(showCode == "false") {
-     // console.log("not showing code")
       var l = document.getElementsByClassName('CodeMirror-scroll')[0]
       l.style.display = 'none'
-    //  self.logElement.style.display = 'none'
+      //  self.logElement.style.display = 'none'
       isShowing = false
     }
-  //}
-}
-
-EditorClass.prototype.clear = function () {
-  this.cm.setValue('\n \n // Type some code on a new line (such as "osc().out()"), and press CTRL+shift+enter')
-}
-
-EditorClass.prototype.setValue = function (val) {
-  this.cm.setValue(val)
-}
-
-EditorClass.prototype.getValue = function () {
-  return this.cm.getValue()
-}
-
-EditorClass.prototype.hide = function () {
-  var l = document.getElementsByClassName('CodeMirror-scroll')[0]
-  var m = document.getElementById('modal-header')
-//   l.style.opacity = 0
-// //  this.logElement.style.opacity  = 0
-//   m.style.opacity = 0
-l.style.display = 'none'
-m.style.display = 'none'
-  this.isShowing = false
-}
-
-EditorClass.prototype.show = function () {
-  var l = document.getElementsByClassName('CodeMirror-scroll')[0]
-  var m = document.getElementById('modal-header')
-  // l.style.opacity= 1
-  // m.style.opacity = 1
-	l.style.display = 'block'
-	m.style.display = 'flex'
-//  this.logElement.style.opacity  = 1
-  this.isShowing = true
-}
-
-EditorClass.prototype.toggle = function () {
-  if (this.isShowing) {
-    this.hide()
-  } else {
-    this.show()
   }
+
+  clear() {
+    this.cm.setValue('\n \n // Type some code on a new line (such as "osc().out()"), and press CTRL+shift+enter')
+  }
+
+  setValue(val) {
+    this.cm.setValue(val)
+  }
+
+  getValue() {
+    return this.cm.getValue()
+  }
+
+  hide() {
+    var l = document.getElementsByClassName('CodeMirror-scroll')[0]
+    var m = document.getElementById('modal-header')
+    //   l.style.opacity = 0
+    // //  this.logElement.style.opacity  = 0
+    //   m.style.opacity = 0
+    l.style.display = 'none'
+    m.style.display = 'none'
+    this.isShowing = false
+  }
+
+  show() {
+    var l = document.getElementsByClassName('CodeMirror-scroll')[0]
+    var m = document.getElementById('modal-header')
+    // l.style.opacity= 1
+    // m.style.opacity = 1
+    l.style.display = 'block'
+    m.style.display = 'flex'
+    //  this.logElement.style.opacity  = 1
+    this.isShowing = true
+  }
+
+  toggle() {
+    if (this.isShowing) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  getLine() {
+    var c = this.cm.getCursor()
+    var s = this.cm.getLine(c.line)
+    //  this.cm.markText({line: c.line, ch:0}, {line: c.line+1, ch:0}, {className: 'styled-background'})
+    this.flashCode({ line: c.line, ch: 0 }, { line: c.line + 1, ch: 0 })
+    return s
+  }
+
+  flashCode(start, end) {
+    if (!start) start = { line: this.cm.firstLine(), ch: 0 }
+    if (!end) end = { line: this.cm.lastLine() + 1, ch: 0 }
+    var marker = this.cm.markText(start, end, { className: 'styled-background' })
+    setTimeout(() => marker.clear(), 300)
+  }
+
+
+  getCurrentBlock() { // thanks to graham wakefield + gibber
+    var editor = this.cm
+    var pos = editor.getCursor()
+    var startline = pos.line
+    var endline = pos.line
+    while (startline > 0 && editor.getLine(startline) !== '') {
+      startline--
+    }
+    while (endline < editor.lineCount() && editor.getLine(endline) !== '') {
+      endline++
+    }
+    var pos1 = {
+      line: startline,
+      ch: 0
+    }
+    var pos2 = {
+      line: endline,
+      ch: 0
+    }
+    var str = editor.getRange(pos1, pos2)
+
+    this.flashCode(pos1, pos2)
+
+    return {
+      start: pos1,
+      end: pos2,
+      text: str
+    }
+  }
+
 }
 
-EditorClass.prototype.getLine = function () {
-  var c = this.cm.getCursor()
-  var s = this.cm.getLine(c.line)
-//  this.cm.markText({line: c.line, ch:0}, {line: c.line+1, ch:0}, {className: 'styled-background'})
-  this.flashCode({line: c.line, ch:0}, {line: c.line+1, ch:0})
-  return s
-}
-
-EditorClass.prototype.flashCode = function (start, end) {
-	  if(!start) start = {line: this.cm.firstLine(), ch:0}
-		if(!end) end = {line: this.cm.lastLine() + 1, ch:0}
-    var marker = this.cm.markText(start, end, {className: 'styled-background'})
-    setTimeout(() =>   marker.clear(), 300)
-}
-
-
-EditorClass.prototype.getCurrentBlock = function () { // thanks to graham wakefield + gibber
-  var editor = this.cm
-  var pos = editor.getCursor()
-  var startline = pos.line
-  var endline = pos.line
-  while (startline > 0 && editor.getLine(startline) !== '') {
-    startline--
-  }
-  while (endline < editor.lineCount() && editor.getLine(endline) !== '') {
-    endline++
-  }
-  var pos1 = {
-    line: startline,
-    ch: 0
-  }
-  var pos2 = {
-    line: endline,
-    ch: 0
-  }
-  var str = editor.getRange(pos1, pos2)
-
-  this.flashCode(pos1, pos2)
-
-  return {
-    start: pos1,
-    end: pos2,
-    text: str
-  }
-}
-
-
-
-module.exports = EditorClass

frontend/src/repl.js

@@ -1,4 +1,4 @@
-const log = require('./log.js').log
+const log = require('./editor/log.js').log
 
 module.exports = {
   eval: (arg, callback) => {

package-lock.json

@@ -43,6 +43,11 @@
       "resolved": "https://registry.npmjs.org/dct/-/dct-0.1.0.tgz",
       "integrity": "sha512-/uUtEniuMq1aUxvLAoDtAduyl12oM1zhA/le2f83UFN/9+4KDHXFB6znEfoj5SDDLiTpUTr26NpxC7t8IFOYhQ=="
     },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+    },
     "fftjs": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/fftjs/-/fftjs-0.0.4.tgz",

package.json

@@ -20,6 +20,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "events": "^3.3.0",
     "hydra-synth": "^1.3.11"
   },
   "devDependencies": {}

yarn.lock

@@ -1128,7 +1128,7 @@ events@^1.0.2:
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
   integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
 
-events@^3.0.0:
+events@^3.0.0, events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==