Finished pick implementation

README.md

@@ -72,6 +72,8 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(clone a b)` 
 - `(drag ~rect)` Drag a part of the canvas.
 - `(view a b)` View a part of the canvas.
+- `(pick shape)` Pick the color of a pos or the average color of a rect.
+- `(color r g b ~a)` Convert an RGBa value to hex.
 - `(theme variable ~el)` 
 - `(pixels rect fn ~q)` 
 - `(saturation pixel q)` Change the saturation of pixels.

desktop/sources/scripts/commander.js

@@ -156,6 +156,8 @@ function Commander (ronin) {
     } else if (word.substr(0, 4) === 'view' && shape.line) {
       const rect = shape.rect
       this._input.value = this.cache.replace('$view', `(view (rect ${rect.x} ${rect.y} ${rect.w} ${rect.h}) $rect)`)
+    } else if (word.substr(0, 2) === 'xy' && shape.x) {
+      this._input.value = this.cache.replace('$xy', `${shape.x} ${shape.y}`)
     } else if (word.substr(0, 1) === 'x' && shape.x) {
       this._input.value = this.cache.replace('$x', `${shape.x}`)
     } else if (word.substr(0, 1) === 'y' && shape.y) {

desktop/sources/scripts/library.js

@@ -195,9 +195,8 @@ function Library (ronin) {
     return this.color(sum[0] / count, sum[1] / count, sum[2] / count)
   }
 
-  this.color = (r, g, b, a = 1) => {
-    const hex = '#' + ('0' + parseInt(r, 10).toString(16)).slice(-2) + ('0' + parseInt(g, 10).toString(16)).slice(-2) + ('0' + parseInt(b, 10).toString(16)).slice(-2)
-    return { r, g, b, a, hex }
+  this.color = (r, g, b, a = 1) => { // Convert an RGBa value to hex.
+    return '#' + ('0' + parseInt(r, 10).toString(16)).slice(-2) + ('0' + parseInt(g, 10).toString(16)).slice(-2) + ('0' + parseInt(b, 10).toString(16)).slice(-2)
   }
 
   this.theme = (variable, el = document.documentElement) => {

desktop/sources/scripts/surface.js

@@ -29,14 +29,13 @@ function Surface (ronin) {
     context.beginPath()
     this.trace(shape, context)
     context.lineWidth = width
-    context.strokeStyle = color
+    context.strokeStyle = `${color}`
     if (isText(shape)) {
       context.textAlign = shape.a
       context.font = `${shape.p}px ${shape.f}`
       context.strokeText(shape.t, shape.x, shape.y)
     } else if (isSvg(shape)) {
       context.lineWidth = width
-      context.strokeStyle = color
       context.save()
       context.translate(shape.x, shape.y)
       context.stroke(new Path2D(shape.d))
@@ -51,7 +50,7 @@ function Surface (ronin) {
 
   this.fill = (shape, color, context = this.context) => {
     context.beginPath()
-    context.fillStyle = color
+    context.fillStyle = `${color}`
     this.trace(shape, context)
     if (isText(shape)) {
       context.textAlign = shape.a
@@ -59,7 +58,6 @@ function Surface (ronin) {
       context.font = `${shape.p}px ${shape.f}`
       context.fillText(shape.t, shape.x, shape.y)
     } else if (isSvg(shape)) {
-      context.fillStyle = color
       context.save()
       context.translate(shape.x, shape.y)
       context.fill(new Path2D(shape.d))