Started guides

desktop/sources/scripts/commander.js

@@ -20,9 +20,11 @@ function Commander (ronin) {
     this._status.textContent = 'Idle. (zoom 100%)'
     this._input.focus()
     this.run()
+    this.hide()
   }
 
   this.run = function (txt = this._input.value) {
+    if (txt.indexOf('$') > -1) { console.log('Contains $'); return }
     console.log('========')
     const inter = new Lisp(txt, ronin.library)
     inter.toPixels()
@@ -33,6 +35,10 @@ function Commander (ronin) {
     this.run()
   }
 
+  this.setStatus = function (msg) {
+    this._status.textContent = `${msg}`
+  }
+
   this.update = function () {
 
   }
@@ -117,6 +123,26 @@ function Commander (ronin) {
     this._input.value = value
   }
 
+  // Display
+
+  this.show = function () {
+    console.log('show')
+    this.el.className = ''
+  }
+
+  this.hide = function () {
+    console.log('hide')
+    this.el.className = 'hidden'
+  }
+
+  this.toggle = function () {
+    if (this.el.className === 'hidden') {
+      this.show()
+    } else {
+      this.hide()
+    }
+  }
+
   // Events
 
   this.drag = (e) => {
@@ -132,12 +158,14 @@ function Commander (ronin) {
     if (!file || !file.name) { console.warn('File', 'Not a valid file.'); return }
     if (file.name.indexOf('.lisp') > -1) {
       const reader = new FileReader()
-      reader.onload = function (e) {
-        ronin.commander.load(e.target.result)
+      reader.onload = (e) => {
+        this.load(e.target.result)
+        this.show()
       }
       reader.readAsText(file)
     } else if (file.path) {
       this.injectPath(file.path)
+      this.show()
     }
   }
 }

desktop/sources/scripts/library.js

@@ -2,11 +2,28 @@ function Library (ronin) {
   this.clear = (rect = this.select_all()) => {
   }
 
+  // IO
+
+  this.open = (path, w = 1, h = 1) => {
+    ronin.surface.open(path, { w, h })
+    return path
+  }
+
+  this.save = function (path, type = 'jpg') {
+    console.log('save', path)
+    // TODO: Save file
+    return path
+  }
+
   this.draw = (path, rect) => {
     ronin.surface.draw(path, rect)
     return rect
   }
 
+  this.exit = () => {
+    // TODO: Closes Ronin
+  }
+
   // Rects
 
   this.pos = (x, y, t = 'pos') => {
@@ -26,7 +43,12 @@ function Library (ronin) {
   }
 
   this.frame = () => {
-    return this.rect(0, 0, Math.floor(window.innerWidth / 2) - 15, Math.floor(window.innerHeight) - 30)
+    return ronin.surface.getFrame()
+  }
+
+  this.center = () => {
+    const rect = this.frame()
+    return this.pos(rect.w / 2, rect.h / 2)
   }
 
   this.path = (path) => {
@@ -63,4 +85,10 @@ function Library (ronin) {
     console.log(any)
     return any
   }
+
+  //
+
+  this.of = function (h, k) {
+    return h[k]
+  }
 }

desktop/sources/scripts/ronin.js

@@ -1,6 +1,6 @@
 function Ronin () {
   const defaultTheme = {
-    background: '#eee',
+    background: '#222',
     f_high: '#000',
     f_med: '#999',
     f_low: '#ccc',
@@ -20,8 +20,12 @@ function Ronin () {
   this.library = new Library(this)
 
   this.install = function (host = document.body) {
-    this.commander.install(this.el)
-    this.surface.install(this.el)
+    this._wrapper = document.createElement('div')
+    this._wrapper.id = 'wrapper'
+
+    this.commander.install(this._wrapper)
+    this.surface.install(this._wrapper)
+    this.el.appendChild(this._wrapper)
     host.appendChild(this.el)
     this.theme.install()
   }
@@ -38,6 +42,10 @@ function Ronin () {
     this.theme.reset()
   }
 
+  this.log = function (msg) {
+    this.commander.setStatus(msg)
+  }
+
   this.load = function (content = this.default()) {
 
   }

desktop/sources/scripts/surface.js

@@ -29,6 +29,8 @@ function Surface (ronin) {
       this.strokeRect(shape, width, color)
     } else if (shape.t === 'line') {
       this.strokeLine(shape, width, color)
+    } else {
+      console.warn('Unknown type')
     }
   }
 
@@ -60,6 +62,8 @@ function Surface (ronin) {
   this.fill = (shape, color) => {
     if (shape.t === 'rect') {
       this.fillRect(shape, color)
+    } else {
+      console.warn('Unknown type')
     }
   }
 
@@ -75,7 +79,19 @@ function Surface (ronin) {
     this.context.closePath()
   }
 
-  this.draw = function (path, rect = this.getRect()) {
+  // IO
+
+  this.open = function (path, scale) {
+    const img = new Image()
+    img.src = path
+    img.onload = () => {
+      ronin.log(`Image(${img.width}x${img.height}), scale:${scale.w}:${scale.h}`)
+      this.resize({ w: img.width * scale.w, h: img.height * scale.h })
+      this.context.drawImage(img, 0, 0, img.width * scale.w, img.height * scale.h)
+    }
+  }
+
+  this.draw = function (path, rect = this.getFrame()) {
     const img = new Image()
     img.src = path
     img.onload = () => {
@@ -85,7 +101,7 @@ function Surface (ronin) {
     }
   }
 
-  this.clear = function (rect = this.getRect()) {
+  this.clear = function (rect = this.getFrame()) {
     this.context.clearRect(rect.x, rect.y, rect.w, rect.h)
   }
 
@@ -101,14 +117,16 @@ function Surface (ronin) {
   }
 
   this.maximize = function () {
-    this.resize(this.getRect())
+    this.resize(this.getFrame())
   }
 
   this.onResize = function () {
-    this.maximize()
+    if (ronin.commander._input.value === '') {
+      this.maximize()
+    }
   }
 
-  this.getRect = function () {
-    return { x: 0, y: 0, w: Math.floor(window.innerWidth / 2) - 30, h: Math.floor(window.innerHeight) - 60 }
+  this.getFrame = function () {
+    return { x: 0, y: 0, w: window.innerWidth - 60, h: window.innerHeight - 60, t: 'rect' }
   }
 }