From 8de3ba10bc10ffb876ecef32a028a0c8b1c30019 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Mon, 29 Jul 2019 16:15:21 +0900
Subject: [PATCH] Finished pick implementation

---
 README.md                            | 2 ++
 desktop/sources/scripts/commander.js | 2 ++
 desktop/sources/scripts/library.js   | 5 ++---
 desktop/sources/scripts/surface.js   | 6 ++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 65c878e..148ebfe 100644
--- a/README.md
+++ b/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.
diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js
index b64230f..627cba6 100644
--- a/desktop/sources/scripts/commander.js
+++ b/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) {
diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js
index 8ea3308..37bedc9 100644
--- a/desktop/sources/scripts/library.js
+++ b/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) => {
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index e35192b..98f9dc6 100644
--- a/desktop/sources/scripts/surface.js
+++ b/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))