Added align to text shape

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.

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; }
+}

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.

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)

examples/tools/guides.lisp

@@ -1,6 +1,4 @@
-(clear)
 ; guides
-(fill (frame) "white")
 (def frame-rect (frame))
 (defn draw-cross 
   (pos)