Add initial sketch at output window

static/compiler.js

@@ -32,6 +32,8 @@ define(function (require) {
     var colour = require('colour');
     var Toggles = require('toggles');
     var FontScale = require('fontscale');
+    var output = require('output');
+
     require('asm-mode');
     require('selectize');
 
@@ -53,6 +55,7 @@ define(function (require) {
         this.filters = new Toggles(this.domRoot.find(".filters"), state.filters);
         this.source = "";
         this.assembly = [];
+        this.lastResult = null;
         this.lastRequestRespondedTo = "";
 
         this.debouncedAjax = _.debounce($.ajax, 250);
@@ -103,6 +106,21 @@ define(function (require) {
 
         this.filters.on('change', _.bind(this.onFilterChange, this));
 
+        function findParentRowOrColumn(elem) {
+            while (elem) {
+                if (elem.isRow || elem.isColumn) return elem;
+                elem = elem.parent;
+            }
+            return elem;
+        }
+
+        var outputConfig = output.getComponent(this.id, this.sourceEditorId);
+
+        this.domRoot.find(".status").click(_.bind(function () {
+            var insertPoint = findParentRowOrColumn(this.container)
+                || this.container.layoutManager.root.contentItems[0];
+            insertPoint.addChild(outputConfig);
+        }, this));
         container.on('destroy', function () {
             self.eventHub.unsubscribe();
             self.eventHub.emit('compilerClose', self.id);
@@ -112,9 +130,10 @@ define(function (require) {
         container.on('open', function () {
             self.eventHub.emit('compilerOpen', self.id);
         });
-        self.eventHub.on('editorChange', this.onEditorChange, this);
-        self.eventHub.on('editorClose', this.onEditorClose, this);
-        self.eventHub.on('colours', this.onColours, this);
+        this.eventHub.on('editorChange', this.onEditorChange, this);
+        this.eventHub.on('editorClose', this.onEditorClose, this);
+        this.eventHub.on('colours', this.onColours, this);
+        this.eventHub.on('resendCompilation', this.onResendCompilation, this);
         this.updateCompilerName();
         this.updateButtons();
     }
@@ -234,6 +253,7 @@ define(function (require) {
     }
 
     Compiler.prototype.onCompileResponse = function (request, result) {
+        this.lastResult = result;
         ga('send', 'event', 'Compile', request.compiler, request.options, result.code);
         ga('send', 'timing', 'Compile', 'Timing', Date.now() - request.timestamp);
         this.outputEditor.operation(_.bind(function () {
@@ -332,19 +352,25 @@ define(function (require) {
         this.domRoot.find(".full-compiler-name").text(compilerVersion);
     };
 
+    Compiler.prototype.onResendCompilation = function (id) {
+        if (id == this.id && this.lastResult) {
+            this.eventHub.emit('compileResult', this.id, this.compiler, this.lastResult);
+        }
+    };
+
     return {
         Compiler: Compiler,
         getComponent: function (editorId) {
             return {
                 type: 'component',
-                componentName: 'compilerOutput',
+                componentName: 'compiler',
                 componentState: {source: editorId}
             };
         },
         getComponentWith: function (editorId, filters, options, compilerId) {
             return {
                 type: 'component',
-                componentName: 'compilerOutput',
+                componentName: 'compiler',
                 componentState: {
                     source: editorId,
                     filters: filters,

static/editor.js

@@ -160,6 +160,7 @@ define(function (require) {
         this.eventHub.on('compilerOpen', this.onCompilerOpen, this);
         this.eventHub.on('compilerClose', this.onCompilerClose, this);
         this.eventHub.on('compileResult', this.onCompileResponse, this);
+        this.eventHub.on('selectLine', this.onSelectLine, this);
 
         var compilerConfig = compiler.getComponent(this.id);
 
@@ -303,6 +304,12 @@ define(function (require) {
         this.numberUsedLines();
     };
 
+    Editor.prototype.onSelectLine = function (id, lineNum) {
+        if (id === this.id) {
+            this.editor.setSelection({line: lineNum - 1, ch: 0}, {line: lineNum, ch: 0});
+        }
+    }
+
     return {
         Editor: Editor,
         getComponent: function (id) {
@@ -310,9 +317,6 @@ define(function (require) {
                 type: 'component',
                 componentName: 'codeEditor',
                 componentState: {id: id},
-                // TODO: making this non closeable breaks placement
-                // See: https://github.com/deepstreamIO/golden-layout/issues/17
-                // https://github.com/deepstreamIO/golden-layout/issues/60 and others
                 isClosable: false
             };
         },

static/explorer.css

@@ -183,3 +183,8 @@ span.icon {
     width: 10px;
     left: -2.5px;
 }
+
+pre.content {
+    width: 100%;
+    height: 100%;
+}

static/hub.js

@@ -30,6 +30,7 @@ define(function (require) {
     var options = require('options');
     var editor = require('editor');
     var compiler = require('compiler');
+    var output = require('output');
 
     function Hub(layout, defaultSrc) {
         this.layout = layout;
@@ -43,7 +44,11 @@ define(function (require) {
             });
         layout.registerComponent(compiler.getComponent().componentName,
             function (container, state) {
-                return self.compilerOutputFactory(container, state);
+                return self.compilerFactory(container, state);
+            });
+        layout.registerComponent(output.getComponent().componentName,
+            function (container, state) {
+                return self.outputFactory(container, state);
             });
         var removeId = function (id) {
             self.ids[id] = false;
@@ -67,10 +72,14 @@ define(function (require) {
         return new editor.Editor(this, state, container, options.language, this.defaultSrc);
     };
 
-    Hub.prototype.compilerOutputFactory = function (container, state) {
+    Hub.prototype.compilerFactory = function (container, state) {
         return new compiler.Compiler(this, container, state);
     };
 
+    Hub.prototype.outputFactory = function (container, state) {
+        return new output.Output(this, container, state);
+    };
+
     function WrappedEventHub(eventHub) {
         this.eventHub = eventHub;
         this.subscriptions = [];

static/index.html

@@ -156,6 +156,10 @@
         </div>
     </div>
 
+    <div id="compiler-output">
+        <pre class="content"></pre>
+    </div>
+
     <div class="urls">
         <div class="input-group">
             <input type="text"

static/main.js

@@ -87,12 +87,17 @@ define(function (require) {
     });
 
     if (!config) {
-        // TODO: find old storage and convert
         var savedState = localStorage.getItem('gl');
         config = savedState !== null ? JSON.parse(savedState) : defaultConfig;
     }
 
-    var layout = new GoldenLayout(config, root);
+    var layout;
+    try {
+        layout = new GoldenLayout(config, root);
+    } catch (e) {
+        console.log("Caught " + e + " during layout; using default layout");
+        layout = new GoldenLayout(defaultConfig, root);
+    }
     layout.on('stateChanged', function () {
         var state = JSON.stringify(layout.toConfig());
         localStorage.setItem('gl', state);

static/output.js

@@ -0,0 +1,108 @@
+// Copyright (c) 2012-2016, Matt Godbolt
+//
+// All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are met:
+//
+//     * Redistributions of source code must retain the above copyright notice,
+//       this list of conditions and the following disclaimer.
+//     * Redistributions in binary form must reproduce the above copyright
+//       notice, this list of conditions and the following disclaimer in the
+//       documentation and/or other materials provided with the distribution.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+// POSSIBILITY OF SUCH DAMAGE.
+
+define(function (require) {
+    "use strict";
+
+    function Output(hub, container, state) {
+        var self = this;
+        this.container = container;
+        this.compilerId = state.compiler;
+        this.editorId = state.editor;
+        this.eventHub = hub.createEventHub();
+        this.domRoot = container.getElement();
+        this.domRoot.html($('#compiler-output').html());
+        this.contentRoot = this.domRoot.find(".content");
+        this.compiler = null;
+
+        this.eventHub.on('compileResult', this.onCompileResult, this);
+        this.eventHub.emit('resendCompilation', this.compilerId);
+
+        this.updateCompilerName();
+    }
+
+    var lineRe = /^\/tmp\/[^:]+(:([0-9]+))?(:([0-9]+))?:\s*(.*)/;
+
+    function parseLines(lines, callback) {
+        _.forEach(lines.split('\n'), function (line) {
+            line = line.trim();
+            if (line !== "") {
+                var match = line.match(lineRe);
+                if (match) {
+                    callback(parseInt(match[2]), match[5].trim());
+                } else {
+                    callback(null, line);
+                }
+            }
+        });
+    }
+
+    Output.prototype.onCompileResult = function (id, compiler, result) {
+        if (id !== this.compilerId) return;
+        this.compiler = compiler;
+
+        this.contentRoot.empty();
+
+        parseLines(result.stdout + result.stderr, _.bind(function (lineNum, msg) {
+            this.add(msg, lineNum);
+        }, this));
+
+        this.add("Compiler exited with result code " + result.code);
+
+        this.updateCompilerName();
+    };
+
+    Output.prototype.add = function (msg, lineNum) {
+        var elem = $('<div></div>').appendTo(this.contentRoot);
+        if (lineNum) {
+            elem.html($('<a href="#">').text(lineNum + " : " + msg)).click(_.bind(function (e) {
+                this.eventHub.emit('selectLine', this.editorId, lineNum);
+                // do not bring user to the top of index.html
+                // http://stackoverflow.com/questions/3252730
+                e.preventDefault();
+                return false;
+            }, this));
+        } else {
+            elem.text(msg);
+        }
+    }
+
+    Output.prototype.updateCompilerName = function () {
+        var name = "#" + this.compilerId;
+        if (this.compiler) name += " with " + this.compiler.name;
+        this.container.setTitle(name);
+    }
+
+    return {
+        Output: Output,
+        getComponent: function (compiler, editor) {
+            return {
+                type: 'component',
+                componentName: 'output',
+                componentState: {compiler: compiler, editor: editor},
+            };
+        }
+    };
+});