Lots more implementation

* implement middle+/-
* cells unit
* samples for both
* moved shorthands to the units/ field

Note: cell_px is currently unconfigurable

samples/units/_cells.rb

@@ -0,0 +1,45 @@
+require_relative '../../lib/squib'
+# Use the following header instead if you are copy-pasta'ing
+# require 'squib'
+
+Squib::Deck.new(width: '1.5in', height: '1.5in') do
+  background color: :white
+
+  # Squib has a custom unit, called "cell"
+  # A "cell" unit defaults to 75px, which at 300dpi is 1/8in or 3.175mm
+  # This is a very common multiple for layouts.
+  # This helps us lay things out in grids without doing much math in our heads
+  # Here's an example... with grid!
+  grid width: '1 cell', height: '1 cell'
+
+  # Plurals are fine or just 'c' as a unit is fine
+  # Whitespace is pretty lenient too.
+  rect fill_color: :blue,
+       x: '1 cell', y: '2 cells',
+       width: '1c', height: '1cell  '
+
+  # Technically, the "cell" is actually a "unit", so you can even combine
+  # with xywh shorhands!!
+  rect fill_color: :red,
+       x: 'middle + 0.5c', y: 'height - 1.5c',
+       width: '1c', height: '1c'
+
+  # And, unlike xywh shorthands, this applies basically everywhere we support
+  # unit conversion.
+  circle fill_color: :green,
+         x: '3c', y: '2c', radius: '1c'
+  # Decimals are fine too
+  circle fill_color: :green,
+         x: '5c', y: '2c', radius: '0.5c'
+  # Even dashes!
+  circle fill_color: '#0000', stroke_color: :purple,
+         x: '1c', y: '4c', radius: '0.5c', dash: '0.25c 0.25c'
+
+  # We can also do stuff in layout. Check out the yml file...
+  #  (even cleaner in Yaml since we don't need quotes!)
+  use_layout file: 'cells.yml'
+  rect layout: :example
+  rect layout: :extends_example
+
+  save_png prefix: 'cells_'
+end

samples/units/_shorthands.rb

@@ -1,35 +1,36 @@
 require_relative '../../lib/squib'
 
-# Lots of DSL methods have shorthands that are accepted for 
-# x, y, width, and height parameters. 
+# Lots of DSL methods have shorthands that are accepted for
+# x, y, width, and height parameters.
 Squib::Deck.new(width: '0.5in', height: '0.25in') do
   background color: :white
 
-  text str: 'xymiddle', font: 'Sans Bold 3', hint: :red, 
+  # middle for x and y will resolve to half the height
+  text str: 'xymiddle', font: 'Sans Bold 3', hint: :red,
        x: 'middle', y: :middle
-       
+
   # 'center' also works
-  rect width: 30, height: 30, 
+  rect width: 30, height: 30,
        x: :center, y: 'center'
 
   # Applies to shapes
   triangle x1: 20, y1: 20,
            x2: 60, y2: 20,
            x3: :middle, y3: :middle
-  
+
   # We can also do width-, height-, width/, height/
   rect x: 20, y: 5, stroke_color: :green,
   width: 'width - 0.1in', height: 10
-  
-  rect x: 10, y: 50, width: 10, height: 'height / 3', 
+
+  rect x: 10, y: 50, width: 10, height: 'height / 3',
        stroke_color: :purple
-       
+
   # Layouts apply this too.
   use_layout file: 'shorthands.yml'
   rect layout: :example
-  # The x and y coordinates can also be "centered", assuming the 
+  # The x and y coordinates can also be "centered", assuming the
 
-  # HOWEVER! Shorthands don't combine in an "extends" situation, 
+  # HOWEVER! Shorthands don't combine in an "extends" situation,
   # e.g. this won't work:
   # parent:
   #   x: middle
@@ -37,5 +38,10 @@ Squib::Deck.new(width: '0.5in', height: '0.25in') do
   #   extends: parent
   #   x: += 0.5in
 
+  # These shorthands are not intended for every xywh parameter or length parameter
+  # e.g. this won't work
+
+
+
   save_png prefix: 'shorthand_'
 end

samples/units/_units.rb

@@ -34,4 +34,6 @@ Squib::Deck.new(width: '1.5in', height: '1.5in') do
   svg file: '../spanner.svg', layout: :angled
 
   save prefix: 'units_', format: :png
+
+  # But wait... there's more! See _shorthands.rb for more fanciness with units
 end

samples/units/cells.yml

@@ -0,0 +1,13 @@
+example:
+  x: 2c
+  y: middle + 0.25 cells
+  width: 2 cell
+  height: 0.75cell
+  fill_color: cyan
+
+extends_example:
+  extends: example
+  x: += 2c
+  height: -= 0.25c
+  fill_color: yellow
+