diff --git a/css/main.css b/css/main.css index f00328c6605c0d682601d84060e5ff08785e80c0..b1ef03a8e609293c697e5187b834095f0f5c6399 100644 --- a/css/main.css +++ b/css/main.css @@ -156,17 +156,27 @@ hr { font-family: Courier, monospace; font-size: 13px; line-height: 30px; - resize: none; height: 400px; width: 100%; - border-width: 0px; background-color: rgba(255,255,255,0.5); + white-space: pre-wrap; + padding: 15px 0 15px 20px; + overflow: auto; } #gcodeEditor:focus { outline-width: 0; } +#gcodeHighlighter{ + padding: 0 0 0 10px; + width: 100%; + margin: 0 0 0 -10px; + left: -15px; + display: inline-block; + background-color: rgba(255, 255, 0, 0.35); +} + input.numberInput{ width:22%; display: inline; diff --git a/js/cam/Assembler.js b/js/cam/Assembler.js index 1ef826c3d1656fb1778e71089702508ad7064c0f..5a147cf91e2108752a8f64f9dc7140cc4bdfb034 100644 --- a/js/cam/Assembler.js +++ b/js/cam/Assembler.js @@ -147,7 +147,7 @@ Assembler = Backbone.Model.extend({ this.get("exporter").simulate(allLines[currentLine], this.get("machine"), this.get("originPosition"), function(){ currentLine++; - self.set("simLineNumber", currentLine, {silent:true}); + self.set("simLineNumber", currentLine); self._stockSimulation(); }); } else { diff --git a/js/menus/AnimationMenuView.js b/js/menus/AnimationMenuView.js index 89f5b748a4ba1bf1033a7b759055f86eb5d5229c..1d06aa21c2f5ebe97cd88132b64cd2bec55f19a8 100644 --- a/js/menus/AnimationMenuView.js +++ b/js/menus/AnimationMenuView.js @@ -22,7 +22,13 @@ AnimationMenuView = Backbone.View.extend({ //bind events this.listenTo(this.model, "change:stockSimulationPlaying", this.render); - this.listenTo(dmaGlobals.assembler, "change", this.render); + var self = this; + this.listenTo(dmaGlobals.assembler, "change", function(){ + //ignore simLineNumber for render calls + if (_.isEqual(_.keys(dmaGlobals.assembler.changedAttributes()), ["simLineNumber"])) return; + self.render(); + }); + this.listenTo(dmaGlobals.assembler, "change:simLineNumber", this._drawGcodeHighlighter); $(document).bind('keyup', {state:false}, this._codeEdit); }, @@ -62,10 +68,24 @@ AnimationMenuView = Backbone.View.extend({ dmaGlobals.assembler.set("simSpeed", $(e.target)[0].value); }, + _drawGcodeHighlighter: function(){ + var lineNum = dmaGlobals.assembler.get("simLineNumber"); + if (lineNum == 0) return; + var code = dmaGlobals.assembler.get("dataOut").split("\n"); + code[lineNum] = "<span id='gcodeHighlighter'>" + code[lineNum] + "</span>"; + var newText = code.join("\n"); + var $editor = $('#gcodeEditor'); + $editor.html(newText); + var highlighterHeight = $("#gcodeHighlighter").position().top - $editor.position().top; + var desiredHeight = $editor.height()/2; + if (highlighterHeight > desiredHeight) $editor.scrollTop($editor.scrollTop()+highlighterHeight-desiredHeight); + }, + render: function(){ if (this.model.get("currentTab") != "animate") return; if (dmaGlobals.assembler.get("needsPostProcessing")) dmaGlobals.assembler.postProcess(); this.$el.html(this.template(_.extend(this.model.toJSON(), dmaGlobals.assembler.toJSON()))); + if (!dmaGlobals.appState.get("stockSimulationPlaying")) this._drawGcodeHighlighter();//in case of code pause $('#speedSlider').slider({ formatter: function(value) { @@ -88,7 +108,7 @@ AnimationMenuView = Backbone.View.extend({ <input id="speedSlider" data-slider-id="speedSlider" type="text" data-slider-min="1" data-slider-max="10" data-slider-step="1" data-slider-value="<%= simSpeed %>"/>\ <br/><a href="#" id="saveSendMenu" class=" btn btn-block btn-lg btn-default">Save</a><br/>\ Assembly Time: <br/><br/>\ - <textarea id="gcodeEditor"><%= dataOut %></textarea><br/><br/>\ + <div id="gcodeEditor" contenteditable><%= dataOut %></div><br/><br/>\ <a href="#" id="overrideEdits" class=" btn btn-block btn-lg btn-default">Undo Changes</a><br/>\ ')