Lots more implementation

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

Note: cell_px is currently unconfigurable
This commit is contained in:
Andy Meneely
2020-11-17 12:17:48 -05:00
parent 2969957c5b
commit f8eaf757a2
9 changed files with 100 additions and 14 deletions
+45
View File
@@ -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
+47
View File
@@ -0,0 +1,47 @@
require_relative '../../lib/squib'
# 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
# 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,
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',
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
# HOWEVER! Shorthands don't combine in an "extends" situation,
# e.g. this won't work:
# parent:
# x: middle
# child:
# 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
+2
View File
@@ -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
+13
View File
@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

+7
View File
@@ -0,0 +1,7 @@
example:
x: 0.15in
y: middle
stroke_color: blue
width: 30
height: 30