terminal outline

web/app/sketcher/main2d.js

@@ -30,6 +30,9 @@ TCAD.App2D = function() {
   consoleBtn.click(function() {
     commandsWin.toggle();
   });
+  new TCAD.ui.Terminal(commandsWin, function(command) {
+    return "Command " + command + " executed";
+  });
 
   this.winManager.registerResize(dockEl, TCAD.ui.DIRECTIONS.EAST, function() {$('body').trigger('layout'); });
   $('body').on('layout', this.viewer.onWindowResize);

web/app/ui.js

@@ -4,7 +4,8 @@ TCAD.ui = {};
 TCAD.ui.Window = function(el, winManager) {
   this.root = el;
   this.neverOpened = !this.root.is(':visible');
-  this.tileUpRelative = $('body'); 
+  this.tileUpRelative = $('body');
+  this.onShowCallback = null;
   var root = this.root;
   var caption = this.root.find('.tool-caption');
   caption.each(function() {
@@ -20,11 +21,15 @@ TCAD.ui.Window = function(el, winManager) {
 };
 
 TCAD.ui.Window.prototype.toggle = function() {
-  if (!this.root.is(':visible')) {
+  var aboutToShow = !this.root.is(':visible');
+  if (aboutToShow) {
     this.tileUpPolicy(this.neverOpened, this.tileUpRelative);
   }
   this.neverOpened = false ;
   this.root.toggle();
+  if (aboutToShow && this.onShowCallback != null) {
+    this.onShowCallback(this);
+  }
 };
 
 TCAD.ui.Window.prototype.tileUpPolicy = function(firstTime, relativeEl) {
@@ -374,3 +379,23 @@ TCAD.ui.Dock.prototype.isVisible = function(viewName) {
 TCAD.ui._maskTest = function (mask, value) {
   return (mask & value) === value;
 };
+
+
+TCAD.ui.Terminal = function(win, commandProcessor) {
+  this.win = win;
+  win.onShowCallback = function() {
+    win.root.find('.terminal-input input').focus();
+  };
+
+  win.root.find('.terminal-input input').keyup(function(e){
+    if(e.keyCode == 13) {
+      var input = win.root.find('.terminal-input input');
+      var command = input.val();
+      var out = win.root.find('.terminal-output');
+      input.val('');
+      out.append($('<div>', {text: '> '+command, class: 'terminal-commandText'}));
+      var result = commandProcessor(command);
+      out.append($('<div>', {text: result, class: 'terminal-commandResult'}));
+    }
+  });
+};

web/css/app.css

@@ -252,4 +252,42 @@ html, body {
 
 .tc-ctrl input[type=text], .tc-ctrl select {
   color: #fff;
+}
+
+#commands .content {
+  color: #C4E1A4;
+  font-family: Monospace;
+}
+
+.terminal-output {
+  height: calc(100% - 30px);
+  vertical-align: bottom;
+}
+
+.terminal-input {
+  height: 30px;
+  vertical-align: bottom;
+}
+
+.terminal-input input {
+  color: #C4E1A4;
+  background: inherit;
+  outline: none;
+  border: 0;
+  margin-top: 4px;
+  padding: 3px;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: Monospace;
+  padding-left: 0;
+}
+
+.terminal-input input::-webkit-input-placeholder {
+  color: #777777;
+  font-style: italic;
+  font-family: Monospace;
+}  
+
+.terminal-commandText {
+  color: #777777;
 }

web/sketcher.html

@@ -120,9 +120,13 @@
     </div>
   </div>
 
-  <div id="commands" class="win" style="display: none; height: 300px; width: 500px;">
+  <div id="commands" class="win" style="display: none; height: 200px; width: 700px;">
     <div class="tool-caption" >COMMANDS</div>
-    <div class="content panel scroll" style="padding: 0;">
+    <div class="content panel" style="padding: 0;">
+      <div class='terminal-input'>
+        <input type="text" placeholder="(type a command)"/>
+      </div>
+      <div class='terminal-output scroll'></div>
     </div>
   </div>