Trying to select pixels

desktop/sources/scripts/commander.js

@@ -62,6 +62,7 @@ function Commander (ronin) {
     this.mouseRect.a.y = e.offsetY
     this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
     this.capture()
+    this.show()
   }
 
   this.onMouseMove = (e) => {
@@ -83,6 +84,7 @@ function Commander (ronin) {
     this.mouseRect.b.y = e.offsetY
     this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
     this.commit()
+    this._input.focus()
   }
 
   // Injection
@@ -124,11 +126,15 @@ function Commander (ronin) {
   // Display
 
   this.show = function () {
-    this.el.className = ''
+    if (this.el.className !== '') {
+      this.el.className = ''
+    }
   }
 
   this.hide = function () {
-    this.el.className = 'hidden'
+    if (this.el.className !== 'hidden') {
+      this.el.className = 'hidden'
+    }
   }
 
   this.toggle = function () {

desktop/sources/scripts/library.js

@@ -9,7 +9,7 @@ function Library (ronin) {
     return path
   }
 
-  this.save = function (path, type = 'jpg') {
+  this.save = (path, type = 'jpg') => {
     console.log('save', path)
     // TODO: Save file
     return path
@@ -20,6 +20,10 @@ function Library (ronin) {
     return rect
   }
 
+  this.select = (rect = this.frame()) => {
+    return ronin.surface.select(rect)
+  }
+
   this.exit = () => {
     // TODO: Closes Ronin
   }
@@ -141,48 +145,53 @@ function Library (ronin) {
 
   //
 
-  this.of = function (h, k) {
+  this.of = (h, k) => {
     return h[k]
   }
 
   // Math
 
-  this.add = function (...args) {
+  this.add = (...args) => {
     return args.reduce((sum, val) => sum + val)
   }
 
-  this.sub = function (...args) {
+  this.sub = (...args) => {
     return args.reduce((sum, val) => sum - val)
   }
 
-  this.mul = function (...args) {
+  this.mul = (...args) => {
     return args.reduce((sum, val) => sum * val)
   }
 
-  this.div = function (...args) {
+  this.div = (...args) => {
     return args.reduce((sum, val) => sum / val)
   }
 
-  this.mod = function (a, b) {
+  this.mod = (a, b) => {
     return a % b
   }
 
-  this.clamp = function (val, min, max) {
+  this.clamp = (val, min, max) => {
     return Math.min(max, Math.max(min, val))
   }
 
-  this.step = function (val, step) {
+  this.step = (val, step) => {
     return Math.round(val / step) * step
   }
 
   // Generics
 
-  this.echo = function (...args) {
+  this.echo = (...args) => {
     console.log(args.reduce((acc, val) => { return acc + val + ' ' }, ''))
     return args
   }
 
-  this.test = function (name, a, b) {
+  this.print = (arg) => {
+    console.log(arg)
+    return arg
+  }
+
+  this.test = (name, a, b) => {
     if (a !== b) {
       console.warn('failed ' + name, a, b)
     } else {

desktop/sources/scripts/surface.js

@@ -7,7 +7,6 @@ function Surface (ronin) {
   this.install = function (host) {
     host.appendChild(this.el)
     window.addEventListener('resize', (e) => { this.onResize() }, false)
-
     this.el.addEventListener('mousedown', ronin.commander.onMouseDown, false)
     this.el.addEventListener('mousemove', ronin.commander.onMouseMove, false)
     this.el.addEventListener('mouseup', ronin.commander.onMouseUp, false)
@@ -22,6 +21,15 @@ function Surface (ronin) {
 
   }
 
+  this.select = function (rect) {
+    const img = this.context.getImageData(rect.x, rect.y, rect.w, rect.h)
+    const pixels = []
+    for (let i = 0, loop = img.data.length; i < loop; i += 4) {
+      pixels.push({ r: img.data[i], g: img.data[i + 1], b: img.data[i + 2], a: img.data[i + 3] })
+    }
+    return pixels
+  }
+
   // Shape
 
   this.stroke = (shape, width, color) => {

examples/pixels.lisp

@@ -0,0 +1,9 @@
+; pixels
+
+((clear)
+
+  ; Draw photo 
+  
+  (draw (path "/Users/VillaMoirai/Desktop/510.jpg"))
+  (print (select (rect 0 0 10 10)))
+)