From b828980f34469d69014df110cd638b11aa66467f Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sun, 28 Jul 2019 10:10:50 +0900
Subject: [PATCH] Added align to text shape

---
 README.md                          | 2 +-
 desktop/sources/links/main.css     | 6 ++++++
 desktop/sources/scripts/library.js | 4 ++--
 desktop/sources/scripts/surface.js | 5 ++++-
 examples/tools/guides.lisp         | 2 --
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d3018f8..2f4746b 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(rect x y w h)` Returns a rect shape.
 - `(circle cx cy r)` Returns a circle shape.
 - `(line ax ay bx by)` Returns a line shape.
-- `(text x y p t ~f)` Returns a text shape.
+- `(text x y p t ~a ~f)` Returns a text shape.
 - `(svg x y d)` Returns a svg shape.
 - `(offset a b)` Returns the offset between two pos.
 - `(stroke shape color ~thickness)` Strokes a shape.
diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css
index 94a2985..f200e2f 100644
--- a/desktop/sources/links/main.css
+++ b/desktop/sources/links/main.css
@@ -21,3 +21,9 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 
 #ronin #guide { background:none; }
 #ronin #surface { border-radius: 2px }
+
+@media (min-width: 720px) {
+  #ronin #wrapper #commander { width:400px; }
+  #ronin.hidden #wrapper #commander { margin-left:-430px; }
+  #ronin #surface,#ronin #guide { left:430px; }
+}
\ No newline at end of file
diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js
index 00b7783..4997969 100644
--- a/desktop/sources/scripts/library.js
+++ b/desktop/sources/scripts/library.js
@@ -74,8 +74,8 @@ function Library (ronin) {
     return { a: this.pos(ax, ay), b: this.pos(bx, by) }
   }
 
-  this.text = (x, y, p, t, f = 'Arial') => { // Returns a text shape.
-    return { x, y, p, t, f }
+  this.text = (x, y, p, t, a = 'left', f = 'Arial') => { // Returns a text shape.
+    return { x, y, p, t, a, f }
   }
 
   this.svg = (x, y, d) => { // Returns a svg shape.
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index cf5c69e..e35192b 100644
--- a/desktop/sources/scripts/surface.js
+++ b/desktop/sources/scripts/surface.js
@@ -31,6 +31,7 @@ function Surface (ronin) {
     context.lineWidth = width
     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)) {
@@ -53,6 +54,8 @@ function Surface (ronin) {
     context.fillStyle = color
     this.trace(shape, context)
     if (isText(shape)) {
+      context.textAlign = shape.a
+      console.log(shape)
       context.font = `${shape.p}px ${shape.f}`
       context.fillText(shape.t, shape.x, shape.y)
     } else if (isSvg(shape)) {
@@ -293,7 +296,7 @@ function Surface (ronin) {
     return shape.d
   }
   function isText (shape) {
-    return !isNaN(shape.x) && !isNaN(shape.y) && !isNaN(shape.p) && shape.t && shape.f
+    return !isNaN(shape.x) && !isNaN(shape.y) && shape.p && shape.t && shape.f && shape.a
   }
   function isLine (shape) {
     return shape.a && !isNaN(shape.a.x) && !isNaN(shape.a.y) && shape.b && !isNaN(shape.b.x) && !isNaN(shape.b.y)
diff --git a/examples/tools/guides.lisp b/examples/tools/guides.lisp
index d9b7396..b80718e 100644
--- a/examples/tools/guides.lisp
+++ b/examples/tools/guides.lisp
@@ -1,6 +1,4 @@
-(clear)
 ; guides
-(fill (frame) "white")
 (def frame-rect (frame))
 (defn draw-cross 
   (pos)