sketch 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +2 -0
- data/Gemfile +1 -0
- data/README.markdown +27 -0
- data/lib/sketch.rb +2 -0
- data/lib/sketch/base.rb +8 -1
- data/lib/sketch/circle.rb +3 -3
- data/lib/sketch/element.rb +13 -0
- data/lib/sketch/ellipse.rb +2 -0
- data/lib/sketch/polygon.rb +16 -0
- data/lib/sketch/rect.rb +2 -0
- data/lib/sketch/star.rb +21 -0
- data/sketch.version +1 -1
- data/test/base_test.rb +11 -0
- data/test/element_test.rb +16 -0
- metadata +10 -5
data/.gitignore
CHANGED
data/Gemfile
CHANGED
data/README.markdown
CHANGED
@@ -1,6 +1,9 @@
|
|
1
1
|
Introducing Sketch
|
2
2
|
====================
|
3
3
|
|
4
|
+
Sketch allows you to create reuseable, inheritable visual
|
5
|
+
elements which can then be rendered on the web.
|
6
|
+
|
4
7
|
|
5
8
|
Examples
|
6
9
|
-------
|
@@ -9,4 +12,28 @@ _basic syntax_
|
|
9
12
|
|
10
13
|
class Smile < Sketch::Base
|
11
14
|
|
15
|
+
_html5's data attribute_
|
16
|
+
|
17
|
+
For svg elements and sketches, you can add data which can then be
|
18
|
+
retrieved via javascript.
|
19
|
+
|
20
|
+
Circle.new(:klass => 'data-point',
|
21
|
+
:data => {:country_name => 'USA',
|
22
|
+
:gdp => '13.1 Trillion'})
|
23
|
+
|
24
|
+
will produce this HTML... note then underscores become dashes.
|
25
|
+
This is because data-country_name freaks me out.
|
26
|
+
|
27
|
+
<circle class="data-point"
|
28
|
+
data-country-name="USA"
|
29
|
+
data-gdp="13.1 Trillion" />
|
30
|
+
|
31
|
+
The you can retrieve the data using jQuery, like this:
|
32
|
+
|
33
|
+
$('.data-point').click(function()
|
34
|
+
{
|
35
|
+
country_name = $(this).data('country-name');
|
36
|
+
gdp = $(this).data('gdp');
|
37
|
+
alert( country_name + ' has a gdp of ' + gdp );
|
38
|
+
});
|
12
39
|
|
data/lib/sketch.rb
CHANGED
@@ -6,6 +6,7 @@ class Sketch < Valuable
|
|
6
6
|
has_value :width
|
7
7
|
has_value :baseProfile, :alias => :base_profile
|
8
8
|
has_value :doctype
|
9
|
+
has_value :data, :default => {}
|
9
10
|
|
10
11
|
def draw(canvas)
|
11
12
|
raise NotImplementedError
|
@@ -42,6 +43,7 @@ require 'sketch/element'
|
|
42
43
|
require 'sketch/canvas'
|
43
44
|
|
44
45
|
require 'sketch/circle'
|
46
|
+
require 'sketch/polygon'
|
45
47
|
require 'sketch/ellipse'
|
46
48
|
require 'sketch/rect'
|
47
49
|
require 'sketch/rectangle'
|
data/lib/sketch/base.rb
CHANGED
@@ -4,10 +4,17 @@ module Sketch::Base
|
|
4
4
|
|
5
5
|
#svg is heavy in dashes. Ruby symbols can't handle them.
|
6
6
|
attributes.each do |name, value|
|
7
|
+
next if name == :data
|
7
8
|
out[name.to_s.gsub('_', '-')] = value
|
8
9
|
end
|
9
10
|
|
10
|
-
|
11
|
+
if attributes.has_key?( :data )
|
12
|
+
attributes[:data].each do |name, value|
|
13
|
+
out["data-#{name.to_s.gsub('_', '-')}"] = value
|
14
|
+
end
|
15
|
+
end
|
16
|
+
|
17
|
+
out['class'] = out.delete('klass') if out.has_key?('klass')
|
11
18
|
|
12
19
|
out
|
13
20
|
end
|
data/lib/sketch/circle.rb
CHANGED
@@ -4,11 +4,11 @@ class Sketch::Circle < Sketch::Element
|
|
4
4
|
has_value :cy
|
5
5
|
has_value :r, :alias => :radius
|
6
6
|
has_value :fill
|
7
|
+
has_value :fill_opacity
|
7
8
|
has_value :stroke
|
8
9
|
has_value :stroke_width
|
9
10
|
|
10
|
-
|
11
|
-
|
12
|
-
end
|
11
|
+
central_point :cx, :cy
|
12
|
+
|
13
13
|
end
|
14
14
|
|
data/lib/sketch/element.rb
CHANGED
@@ -4,6 +4,7 @@ class Sketch::Element < Valuable
|
|
4
4
|
has_value :id
|
5
5
|
has_value :klass
|
6
6
|
has_value :style
|
7
|
+
has_value :data, :default => {}
|
7
8
|
|
8
9
|
def draw(canvas)
|
9
10
|
canvas.send( self.svg_node, svg_attributes )
|
@@ -12,5 +13,17 @@ class Sketch::Element < Valuable
|
|
12
13
|
def svg_node
|
13
14
|
self.class.name.split('::').last.downcase
|
14
15
|
end
|
16
|
+
|
17
|
+
class << self
|
18
|
+
def central_point( x_param = :x, y_param = :y )
|
19
|
+
define_method :point= do |coordinates|
|
20
|
+
attributes[x_param], attributes[y_param] = *coordinates
|
21
|
+
end
|
22
|
+
|
23
|
+
define_method :point do
|
24
|
+
[attributes[x_param], attributes[y_param]]
|
25
|
+
end
|
26
|
+
end
|
27
|
+
end
|
15
28
|
end
|
16
29
|
|
data/lib/sketch/ellipse.rb
CHANGED
@@ -0,0 +1,16 @@
|
|
1
|
+
class Sketch::Polygon < Sketch::Element
|
2
|
+
|
3
|
+
has_collection :points
|
4
|
+
has_value :fill
|
5
|
+
has_value :stroke
|
6
|
+
has_value :stroke_width
|
7
|
+
has_value :fill_rule
|
8
|
+
|
9
|
+
def svg_attributes
|
10
|
+
out = super
|
11
|
+
out['points'] = attributes[:points].map{|point| point.join(',')}.join(' ')
|
12
|
+
out
|
13
|
+
end
|
14
|
+
|
15
|
+
end
|
16
|
+
|
data/lib/sketch/rect.rb
CHANGED
data/lib/sketch/star.rb
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
class Sketch::Star < Sketch::Element
|
2
|
+
|
3
|
+
has_value :x
|
4
|
+
has_value :y
|
5
|
+
has_value :radius
|
6
|
+
has_value :orientation, :default => 0
|
7
|
+
|
8
|
+
central_point :x, :y
|
9
|
+
|
10
|
+
def draw(canvas)
|
11
|
+
top = [x, y - radius]
|
12
|
+
mid_right = [x + radius, y-(.3*radius)]
|
13
|
+
lower_right = [x + (0.6 * radius), y + radius]
|
14
|
+
lower_left = [x - (0.6 * radius), y + radius]
|
15
|
+
mid_left = [x - radius, y-(0.3*radius)]
|
16
|
+
points = [ top, lower_right, mid_left, mid_right, lower_left, top ]
|
17
|
+
points.each{|point| point.join(',')}
|
18
|
+
points = points.join(' ')
|
19
|
+
canvas.polygon( :points => points)
|
20
|
+
end
|
21
|
+
end
|
data/sketch.version
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.2
|
data/test/base_test.rb
CHANGED
@@ -12,5 +12,16 @@ class SketchTest < Test::Unit::TestCase
|
|
12
12
|
Squigly.new.draw(canvas)
|
13
13
|
end
|
14
14
|
|
15
|
+
def test_that_underscores_become_dashes
|
16
|
+
canvas = stub
|
17
|
+
canvas.expects(:squigly).with(has_entry('reflective-coating', 'dark'))
|
18
|
+
Squigly.new(:reflective_coating => 'dark').draw(canvas)
|
19
|
+
end
|
20
|
+
|
21
|
+
def test_that_data_is_added_in_html5_format
|
22
|
+
canvas = stub
|
23
|
+
canvas.expects(:squigly).with('data-visit-id' => 21)
|
24
|
+
Squigly.new(:data => {:visit_id => 21}).draw(canvas)
|
25
|
+
end
|
15
26
|
end
|
16
27
|
|
@@ -0,0 +1,16 @@
|
|
1
|
+
require 'helper'
|
2
|
+
|
3
|
+
class ElementTest < Test::Unit::TestCase
|
4
|
+
|
5
|
+
def test_that_point_is_broken_into_coordinates
|
6
|
+
c = Sketch::Circle.new(:point => [10, 20])
|
7
|
+
assert_equal 10, c.cx
|
8
|
+
assert_equal 20, c.cy
|
9
|
+
end
|
10
|
+
|
11
|
+
def test_that_coordinates_are_available_as_point
|
12
|
+
r = Sketch::Rectangle.new(:x => 33, :y => 55)
|
13
|
+
assert_equal [33, 55], r.point
|
14
|
+
end
|
15
|
+
end
|
16
|
+
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sketch
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 27
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.0.
|
9
|
+
- 2
|
10
|
+
version: 0.0.2
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Johnathon Wright
|
@@ -15,7 +15,8 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2011-
|
18
|
+
date: 2011-11-10 00:00:00 -06:00
|
19
|
+
default_executable:
|
19
20
|
dependencies:
|
20
21
|
- !ruby/object:Gem::Dependency
|
21
22
|
name: valuable
|
@@ -69,16 +70,20 @@ files:
|
|
69
70
|
- lib/sketch/element.rb
|
70
71
|
- lib/sketch/ellipse.rb
|
71
72
|
- lib/sketch/path.rb
|
73
|
+
- lib/sketch/polygon.rb
|
72
74
|
- lib/sketch/rect.rb
|
73
75
|
- lib/sketch/rectangle.rb
|
76
|
+
- lib/sketch/star.rb
|
74
77
|
- sketch.gemspec
|
75
78
|
- sketch.version
|
76
79
|
- test/.canvas_test.rb.swp
|
77
80
|
- test/base_test.rb
|
78
81
|
- test/canvas_test.rb
|
79
82
|
- test/doctype_test.rb
|
83
|
+
- test/element_test.rb
|
80
84
|
- test/helper.rb
|
81
85
|
- test/svg_namespace_test.rb
|
86
|
+
has_rdoc: true
|
82
87
|
homepage: http://sketch.mustmodify.com/
|
83
88
|
licenses:
|
84
89
|
- MIT
|
@@ -108,7 +113,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
108
113
|
requirements: []
|
109
114
|
|
110
115
|
rubyforge_project:
|
111
|
-
rubygems_version: 1.
|
116
|
+
rubygems_version: 1.6.2
|
112
117
|
signing_key:
|
113
118
|
specification_version: 3
|
114
119
|
summary: build SVG images
|