First steps towards wiring

.idea/jsLibraryMappings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <includedPredefinedLibrary name="Node.js Core" />
-  </component>
-</project>

.idea/misc.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager" version="2" assert-keyword="false" jdk-15="false" />
-</project>

static/compiler.js

@@ -0,0 +1,83 @@
+define(function (require) {
+    "use strict";
+    var CodeMirror = require('codemirror');
+    var $ = require('jquery');
+    require('asm-mode');
+
+    var options = require('options');
+    var compilers = options.compilers;
+
+    function Compiler(hub, container, state) {
+        var self = this;
+        var domRoot = container.getElement();
+        domRoot.html($('#compiler').html());
+
+        var outputEditor = CodeMirror.fromTextArea(domRoot.find("textarea")[0], {
+            lineNumbers: true,
+            mode: "text/x-asm",
+            readOnly: true,
+            gutters: ['CodeMirror-linenumbers'],
+            lineWrapping: true
+        });
+
+        function resize() {
+            outputEditor.setSize(domRoot.width(), domRoot.height());
+            outputEditor.refresh();
+        }
+
+        container.on('resize', resize);
+        container.on('open', resize);
+        container.setTitle("Compiled");
+        container.on('close', function () {
+            hub.removeCompiler(self);
+        });
+
+        this.source = state.source || 1;
+        this.sourceEditor = null;
+    }
+
+    var debouncedAjax = _.debounce($.ajax, 500);
+
+    Compiler.prototype.compile = function (fromEditor) {
+        var self = this;
+        if (!this.sourceEditor) return;
+        var request = {
+            fromEditor: fromEditor,
+            source: this.sourceEditor.getSource(),
+            compiler: compilers[0].id, // TODO
+            options: "-O1", // TODO
+            filters: {}
+        };
+        debouncedAjax({
+            type: 'POST',
+            url: '/compile',
+            dataType: 'json',
+            contentType: 'application/json',
+            data: JSON.stringify(request),
+            success: function (result) {
+                self.onCompileResponse(request, result);
+            },
+            error: function (xhr, e_status, error) {
+                console.log("AJAX request failed, reason : " + error);
+            },
+            cache: false
+        });
+    };
+
+    Compiler.prototype.onCompileResponse = function (request, result) {
+        console.log(request, result);
+    };
+
+    Compiler.prototype.onEditorListChange = function () {
+        // TODO: if we can't find our source, select none?
+        // TODO: Update dropdown of source
+    };
+    Compiler.prototype.onEditorChange = function (editor) {
+        if (editor.getId() == this.source) {
+            this.sourceEditor = editor;
+            this.compile();
+        }
+    };
+
+    return Compiler;
+});

static/editor.js

@@ -5,10 +5,13 @@ define(function (require) {
     require('codemirror/mode/d/d');
     require('codemirror/mode/go/go');
     require('codemirror/mode/rust/rust');
-    require('asm-mode');
 
-    return function Editor(container, lang) {
+    function Editor(hub, id, container, lang) {
+        var self = this;
+        this.id = id;
         var domRoot = container.getElement();
+        domRoot.html($('#codeEditor').html());
+
         var cmMode;
         switch (lang.toLowerCase()) {
             default:
@@ -28,7 +31,7 @@ define(function (require) {
                 break;
         }
 
-        var cppEditor = CodeMirror.fromTextArea(domRoot.find("textarea")[0], {
+        this.editor = CodeMirror.fromTextArea(domRoot.find("textarea")[0], {
             lineNumbers: true,
             matchBrackets: true,
             useCPP: true,
@@ -37,21 +40,33 @@ define(function (require) {
 
         // With reference to "fix typing '#' in emacs mode"
         // https://github.com/mattgodbolt/gcc-explorer/pull/131
-        cppEditor.setOption("extraKeys", {
+        this.editor.setOption("extraKeys", {
             "Alt-F": false
         });
-        // cppEditor.on("change", function () {
-        //     if ($('.autocompile').hasClass('active')) {
-        //         onEditorChange();
-        //     }
-        // });
+        this.editor.on("change", function () {
+            hub.onEditorChange(self);
+        });
+
         function resize() {
-            cppEditor.setSize(domRoot.width(), domRoot.height());
-            cppEditor.refresh();
+            self.editor.setSize(domRoot.width(), domRoot.height());
+            self.editor.refresh();
         }
 
         container.on('resize', resize);
         container.on('open', resize);
+        container.on('close', function () {
+            hub.removeEditor(self);
+        });
         container.setTitle(lang + " source");
+    }
+
+    Editor.prototype.getSource = function () {
+        return this.editor.getValue();
+    };
+
+    Editor.prototype.getId = function () {
+        return this.id;
     };
+
+    return Editor;
 });

static/hub.js

@@ -0,0 +1,83 @@
+define(function (require) {
+    "use strict";
+
+    var _ = require('underscore');
+    var options = require('options');
+    var Editor = require('editor');
+    var Compiler = require('compiler');
+
+    function Hub(layout) {
+        this.layout = layout;
+        this.compilers = [];
+        this.editors = {};
+        this.initialised = false;
+
+        var self = this;
+        layout.registerComponent('codeEditor', function (container, state) {
+            return self.codeEditorFactory(container, state);
+        });
+        layout.registerComponent('compilerOutput', function (container, state) {
+            return self.compilerOutputFactory(container, state);
+        });
+        layout.init();
+
+        this.initialised = true;
+
+        _.each(this.editors, function (editor) {
+            self.onEditorChange(editor);
+        });
+        this.onEditorListChange();
+    }
+
+    Hub.prototype.addCompiler = function (compiler) {
+        this.compilers.push(compiler);
+    };
+    Hub.prototype.removeCompiler = function (compiler) {
+        this.compilers = _.without(this.compilers, compiler);
+    };
+
+    Hub.prototype.addEditor = function (editor) {
+        this.editors[editor.getId()] = editor;
+        this.onEditorListChange();
+    };
+    Hub.prototype.removeEditor = function (editor) {
+        delete this.editors[editor.getId()];
+        this.onEditorListChange();
+    };
+
+    Hub.prototype.onEditorListChange = function () {
+        if (!this.initialised) return;
+        _.each(this.compilers, function (compiler) {
+            compiler.onEditorListChange();
+        });
+    };
+
+    Hub.prototype.nextEditorId = function () {
+        for (var i = 1; i < 100000; ++i) {
+            if (!this.editors[i]) return i;
+        }
+        throw "Ran out of ids!?";
+    };
+
+    Hub.prototype.codeEditorFactory = function (container, state) {
+        var id = state.id || this.nextEditorId();
+        var editor = new Editor(this, id, container, options.language);
+        this.addEditor(editor);
+        return editor;
+    };
+
+    Hub.prototype.compilerOutputFactory = function (container, state) {
+        var compiler = new Compiler(this, container, state);
+        this.addCompiler(compiler);
+        return compiler;
+    };
+
+    Hub.prototype.onEditorChange = function (editor) {
+        if (!this.initialised) return;
+        _.each(this.compilers, function (compiler) {
+            compiler.onEditorChange(editor);
+        });
+    };
+
+    return Hub;
+});

static/index.html

@@ -68,6 +68,10 @@
     <textarea>// Type your code here, or load an example.</textarea>
 </div>
 
+<div id="compiler" class="template">
+    <textarea>    mov eax, $20</textarea>
+</div>
+
 <div class="container-fluid" id="#root"></div>
 
 <div class="template lang c">// Type your code here, or load an example.

static/main.js

@@ -23,18 +23,11 @@ define(function (require) {
     var _ = require('underscore');
     var $ = require('jquery');
     var GoldenLayout = require('goldenlayout');
-    var Editor = require('editor');
+    var Hub = require('hub');
 
     analytics.initialise();
     sharing.initialise();
 
-    function codeEditorFactory(container, state) {
-        var template = $('#codeEditor');
-        var options = state.options;
-        container.getElement().html(template.html());
-        return new Editor(container, options.language);
-    }
-
     var options = require('options');
     var config = {
         content: [{
@@ -42,11 +35,14 @@ define(function (require) {
             content: [{
                 type: 'component',
                 componentName: 'codeEditor',
-                componentState: {options: options}
+                componentState: {}
+            }, {
+                type: 'component',
+                componentName: 'compilerOutput',
+                componentState: {}
             }]
         }]
     };
     var myLayout = new GoldenLayout(config, $("#root")[0]);
-    myLayout.registerComponent('codeEditor', codeEditorFactory);
-    myLayout.init();
+    var hub = new Hub(myLayout);
 });