Cleaned up the commander

desktop/sources/links/main.css

@@ -1,4 +1,4 @@
-body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace; background:000; -webkit-app-region: drag; -webkit-user-select: none;}
+body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular",courier,monospace; background:000; -webkit-app-region: drag; -webkit-user-select: none; font-size:12px;}
 *:focus {outline: none; }
 
 yu { display:block; }
@@ -11,8 +11,9 @@ yu { display:block; }
 #below { z-index:799; position: absolute; }
 
 #ronin { background:var(--b_low); height: 100vh; width:100vw; }
-#commander { z-index: 9000; top: 15px; position: absolute; transition: all 150ms; left: 15px; width: 300px; height: calc(100vh - 60px); border-radius: 3px; padding: 15px;}
+#commander { z-index: 9000; top: 15px; position: absolute; transition: all 150ms; left: 15px; width: calc(50vw - 60px); height: calc(100vh - 60px); padding: 15px; border-right: 1px solid #333;}
-#commander textarea { background: none; width: 100%; height: calc(100% - 45px); resize: none; font-size: 12px;color: white; }
+#commander textarea { background: none; width: 100%; height: calc(100vh - 75px); resize: none; font-size: 12px;color: white; }
+#commander div#status { color:#555; }
 
 #commander.hidden { top:-40px; }
 #commander.visible { top:0px; }

desktop/sources/scripts/core/commander.js

@@ -1,23 +1,45 @@
 function Commander () {
   this.el = document.createElement('yu')
   this.el.id = 'commander'
-  this.input_el = document.createElement('textarea')
+  this._input = document.createElement('textarea')
-  this.input_el.value = `
+  this._status = document.createElement('div')
+  this._status.id = 'status'
+
+  this.install = function (host) {
+    this.el.appendChild(this._input)
+    this.el.appendChild(this._status)
+    host.appendChild(this.el)
+
+    this._input.addEventListener('input', this.onInput)
+  }
+
+  this.start = function () {
+    this._input.value = `
+; Get Image
+
+(load "../media/test.png" 
+  (rect 0 0 600 600))
+
+; Some operations
+
 (scale 0.5 0.5 
   (resize 150 150 
     (crop 
       (rect 0 0 300 300))))`.trim()
 
-  this.install = function () {
+    this._status.textContent = 'Idle.'
-    this.el.appendChild(this.input_el)
+
-    ronin.el.appendChild(this.el)
+    this._input.focus()
-    this.input_el.focus()
   }
 
   this.update = function () {
 
   }
 
+  this.onInput = function () {
+
+  }
+
   this.getQuery = function () {
 
   }

desktop/sources/scripts/layers/guide.js

@@ -13,10 +13,6 @@ function Guide () {
       this.draw_inspector()
     }
 
-    if (ronin.commander.input_el.value == '~') {
-      this.toggle_color_picker(true)
-    }
-
     // Brush mirrors
     for (id in ronin.brush.pointers) {
       var pointer = ronin.brush.pointers[id]

desktop/sources/scripts/ronin.js

@@ -57,7 +57,7 @@ function Ronin () {
     this.frame.width = window.innerWidth
     this.frame.height = window.innerHeight
 
-    this.commander.install()
+    this.commander.install(this.el)
     this.frame.install()
 
     this.cursor.target = this.layers.above
@@ -73,6 +73,8 @@ function Ronin () {
 
   this.start = function () {
     this.theme.start()
+    this.commander.start()
+
     window.addEventListener('dragover', ronin.io.drag_over)
     window.addEventListener('drop', ronin.io.drop)
     ronin.frame.el.addEventListener('mousedown', ronin.cursor.mouse_down)
@@ -81,13 +83,11 @@ function Ronin () {
     ronin.frame.el.addEventListener('contextmenu', ronin.cursor.mouse_alt)
     window.addEventListener('keydown', ronin.keyboard.key_down)
     window.addEventListener('keyup', ronin.keyboard.key_up)
-    ronin.commander.input_el.addEventListener('input', ronin.commander.on_input)
 
     console.log('Ronin', 'Started')
     this.above.update()
     this.below.update()
     this.guide.update()
-    this.commander.update()
 
     this.load()
   }