sketchily 0.3.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. data/README.md +20 -9
  2. data/app/assets/javascripts/sketchily.js +10 -0
  3. data/app/assets/javascripts/sketchily.js~ +2 -0
  4. data/app/assets/javascripts/sketchily_embed.js +3 -0
  5. data/app/assets/javascripts/sketchily_embed.js~ +2 -0
  6. data/app/assets/stylesheets/sketchily.css +7 -0
  7. data/app/assets/stylesheets/sketchily.css~ +6 -0
  8. data/app/views/sketchily/_embed.html.erb +1 -2
  9. data/app/views/sketchily/_embed.html.erb~ +2 -2
  10. data/lib/sketchily.rb +10 -4
  11. data/lib/sketchily.rb~ +12 -4
  12. data/lib/sketchily/railtie.rb~ +8 -0
  13. data/lib/sketchily/sketchily.rb +1 -0
  14. data/lib/sketchily/sketchily.rb~ +28 -0
  15. data/lib/sketchily/sketchily_tag.rb +1 -0
  16. data/lib/sketchily/sketchily_tag.rb~ +15 -0
  17. data/lib/sketchily/version.rb +1 -1
  18. data/lib/sketchily/version.rb~ +1 -1
  19. data/vendor/assets/svg-edit-2.6/browser-not-supported.html +2 -2
  20. data/vendor/assets/svg-edit-2.6/browser-not-supported.html~ +27 -0
  21. data/vendor/assets/svg-edit-2.6/embedapi.html +2 -2
  22. data/vendor/assets/svg-edit-2.6/embedapi.html~ +56 -0
  23. data/vendor/assets/svg-edit-2.6/extensions/ext-grid.js +1 -1
  24. data/vendor/assets/svg-edit-2.6/extensions/ext-grid.js~ +184 -0
  25. data/vendor/assets/svg-edit-2.6/locale/lang.ro.js +2 -2
  26. data/vendor/assets/svg-edit-2.6/locale/lang.ro.js~ +234 -0
  27. data/vendor/assets/svg-edit-2.6/spinbtn/JQuerySpinBtn.css +1 -1
  28. data/vendor/assets/svg-edit-2.6/spinbtn/JQuerySpinBtn.css~ +41 -0
  29. data/vendor/assets/svg-edit-2.6/svg-editor.html +2 -45
  30. data/vendor/assets/svg-edit-2.6/svg-editor.html~ +746 -0
  31. data/vendor/assets/svg-edit-2.6/svg-editor.js +1 -1
  32. data/vendor/assets/svg-edit-2.6/svg-editor.js~ +4969 -0
  33. metadata +18 -2
data/README.md CHANGED
@@ -18,6 +18,12 @@ Or install it yourself as:
18
18
 
19
19
  $ gem install sketchily
20
20
 
21
+ **Note:** sketchily will **automatically** add the following files to your asset precompilation list:
22
+
23
+ sketchily.css sketchily.js sketchily_embed.js canvg/canvg.js canvg/rgbcolor.js extensions/ext-*.js locale/lang.*.js
24
+
25
+ Other html files and images used by svg-edit will also be precompiled.
26
+
21
27
  ## Usage
22
28
 
23
29
  Sketchily adds new form elements which can be accessed by calling:
@@ -33,7 +39,7 @@ This gem also adds a helper method that can be called to display the resulting S
33
39
 
34
40
  - Both of these functions work exactly like the equivalent `hidden_field` functions, except that svg-edit is displayed instead.
35
41
  - The `f.sketchily` format accepts a method name and an options hash.
36
- - The sketchily format accepts an object name, a method name and an options hash.
42
+ - The `sketchily` format (called without the form builder object) accepts an object name, a method name and an options hash.
37
43
  - The `sketchily_tag` format accepts a tag name, the svg string to be edited and an options hash.
38
44
 
39
45
  Currently available options are:
@@ -51,27 +57,32 @@ Currently available options are:
51
57
 
52
58
  It is recommended that the database entries associated with sketchily form elements be of type `text`.
53
59
 
60
+ The following examples assume that the database table for `@my_object` has a `sketch` column of type `text`.
61
+
54
62
  Example usage (haml):
55
63
 
56
- = form_for @shirt do |f|
57
- f.text_field :title
58
- f.sketchily :svg
64
+ ```haml
65
+ = form_for @my_object do |f|
66
+ = f.sketchily :sketch, :hide_menu => true
67
+ ```
59
68
 
60
69
  ### `sketchily_show` helper
61
70
 
62
71
  - This function takes the base64-encoded SVG string as an argument and an options hash.
63
- - The SVG string can be directly read from the field used by the previous functions.
72
+ - The SVG string can be directly read from the field used by the `sketchily` and `sketchily_tag` functions.
64
73
 
65
74
  Currently available options are:
66
75
 
67
- - `width`
68
- - `height`
76
+ - `width` (width of resulting image object)
77
+ - `height` (height of resulting image object)
69
78
 
70
- Passing only one of those options should keep the aspect ratio constant in most browsers.
79
+ Passing only one of those options should keep the aspect ratio of the SVG constant in most browsers.
71
80
 
72
81
  Example usage (haml):
73
82
 
74
- = sketchily_show @shirt.svg, :width => "500"
83
+ ```haml
84
+ = sketchily_show @my_object.sketch, :width => "500"
85
+ ```
75
86
 
76
87
  ## Browser Support
77
88
 
@@ -0,0 +1,10 @@
1
+ //= require jquery
2
+ //= require js-hotkeys/jquery.hotkeys.min
3
+ //= require jquerybbq/jquery.bbq.min
4
+ //= require svgicons/jquery.svgicons
5
+ //= require jgraduate/jquery.jgraduate.min
6
+ //= require spinbtn/JQuerySpinBtn.min
7
+ //= require touch
8
+ //= require svgedit.compiled
9
+ //= require jquery-ui/jquery-ui-1.8.17.custom.min
10
+ //= require jgraduate/jpicker
@@ -0,0 +1,2 @@
1
+ //= require jquery
2
+ //= require
@@ -0,0 +1,3 @@
1
+ //= require jquery
2
+ //= require embedapi
3
+ //= require svgutils
@@ -0,0 +1,2 @@
1
+ //= require embedapi
2
+ //= require svgutils
@@ -0,0 +1,7 @@
1
+ /*
2
+ *= require_self
3
+ *= require jgraduate/css/jPicker
4
+ *= require jgraduate/css/jgraduate
5
+ *= require svg-editor
6
+ *= require spinbtn/JQuerySpinBtn
7
+ */
@@ -0,0 +1,6 @@
1
+ /*
2
+ *= require_self
3
+ *= require jgraduate/css/jPicker
4
+ *= require jgraduate/css/jgraduate
5
+ *= svg-editor
6
+ */
@@ -13,8 +13,7 @@
13
13
  hide_image_tool ||= false
14
14
  hide_hyperlink_tool ||= false %>
15
15
 
16
- <%= javascript_include_tag "embedapi" %>
17
- <%= javascript_include_tag "svgutils" %>
16
+ <%= javascript_include_tag "sketchily_embed" %>
18
17
 
19
18
  <script type="text/javascript">
20
19
  <%= render :partial => "sketchily/embed",
@@ -8,12 +8,12 @@
8
8
  canvas_width ||= 640
9
9
  canvas_height ||= 480
10
10
  canvas_expansion ||= 3
11
- hide_menu ||= false
12
11
  hide_rulers ||= false
12
+ hide_menu ||= false
13
13
  hide_image_tool ||= false
14
14
  hide_hyperlink_tool ||= false %>
15
15
 
16
- <%= javascript_include_tag "embedapi" %>
16
+ <%= javascript_include_tag "sketchily_embed" %>
17
17
  <%= javascript_include_tag "svgutils" %>
18
18
 
19
19
  <script type="text/javascript">
data/lib/sketchily.rb CHANGED
@@ -1,4 +1,10 @@
1
+ require "sketchily/engine"
2
+ require "sketchily/sketchily"
3
+ require "sketchily/sketchily_tag"
4
+
1
5
  module Sketchily
6
+ ASSET_FILES = %w(sketchily.css sketchily.js sketchily_embed.js canvg/canvg.js canvg/rgbcolor.js extensions/ext-*.js locale/lang.*.js)
7
+
2
8
  OPTIONS = [:width, :height, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :hide_image_tool, :hide_hyperlink_tool]
3
9
 
4
10
  ROOT = File.expand_path('../..', __FILE__)
@@ -6,12 +12,12 @@ module Sketchily
6
12
  VIEW = ActionView::Base.new
7
13
  VIEW.view_paths << "#{ROOT}/app/views"
8
14
 
15
+ ActiveSupport.on_load(:before_initialize) do
16
+ Rails.configuration.assets.precompile += Sketchily::ASSET_FILES
17
+ end
18
+
9
19
  def self.render(options = {}, local_assigns = {}, &block)
10
20
  VIEW.render(options, local_assigns, &block)
11
21
  end
12
22
  end
13
23
 
14
- require "sketchily/engine"
15
- require "sketchily/sketchily"
16
- require "sketchily/sketchily_tag"
17
-
data/lib/sketchily.rb~ CHANGED
@@ -1,17 +1,25 @@
1
+ require "sketchily/engine"
2
+ require "sketchily/sketchily"
3
+ require "sketchily/sketchily_tag"
4
+
1
5
  module Sketchily
2
- OPTIONS = [:width, :height, :canvas_width, :canvas_height, :canvas_expansion, :hide_menu, :hide_rulers, :hide_image_tool, :hide_hyperlink_tool]
6
+ ASSET_FILES = %w(sketchily.css sketchily.js sketchily_embed.js canvg/canvg.js canvg/rgbcolor.js extensions/ext-*.js locale/lang.*.js)
7
+
8
+ OPTIONS = [:width, :height, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :hide_image_tool, :hide_hyperlink_tool]
3
9
 
4
10
  ROOT = File.expand_path('../..', __FILE__)
5
11
 
6
12
  VIEW = ActionView::Base.new
7
13
  VIEW.view_paths << "#{ROOT}/app/views"
8
14
 
15
+ ActiveSupport.on_load(:before_initialize) do
16
+ Rails.configuration.assets.precompile += Sketchily::ASSET_FILES
17
+ end
18
+
9
19
  def self.render(options = {}, local_assigns = {}, &block)
10
20
  VIEW.render(options, local_assigns, &block)
11
21
  end
12
22
  end
13
23
 
14
- require "sketchily/engine"
15
- require "sketchily/sketchily"
16
- require "sketchily/sketchily_tag"
24
+
17
25
 
@@ -0,0 +1,8 @@
1
+ module Sketchily
2
+ class Railtie < Rails::Railtie
3
+ initializer "precompile_sketchily_assets", :before => :environment do |app|
4
+ mkdir 'sup'
5
+ app.config.assets.precompile += Sketchily::ASSET_FILES
6
+ end
7
+ end
8
+ end
@@ -26,3 +26,4 @@ end
26
26
 
27
27
  ActionView::Helpers::FormBuilder.send :include, Sketchily::FormBuilderInstanceMethods
28
28
  ActionView::Base.send :include, Sketchily::ActionViewBaseInstanceMethods
29
+
@@ -0,0 +1,28 @@
1
+ module Sketchily
2
+ module FormBuilderInstanceMethods
3
+ def sketchily(method, options = {})
4
+ Sketchily.render(:partial => "sketchily/sketchily",
5
+ :locals => {:template => @template, :object_name => @object_name,
6
+ :method => method, :options => objectify_options(options)}).html_safe
7
+ end
8
+
9
+ def svg_edit(method, options = {})
10
+ sketchily(method, options)
11
+ end
12
+ end
13
+
14
+ module ActionViewBaseInstanceMethods
15
+ def sketchily(object_name, method, options = {})
16
+ Sketchily.render(:partial => "sketchily/sketchily",
17
+ :locals => {:template => self, :object_name => object_name,
18
+ :method => method, :options => options}).html_safe
19
+ end
20
+
21
+ def svg_edit(object_name, method, options = {})
22
+ sketchily(object_name, method, options)
23
+ end
24
+ end
25
+ end
26
+
27
+ ActionView::Helpers::FormBuilder.send :include, Sketchily::FormBuilderInstanceMethods
28
+ ActionView::Base.send :include, Sketchily::ActionViewBaseInstanceMethods
@@ -13,3 +13,4 @@ module SketchilyTag
13
13
  end
14
14
 
15
15
  ActionView::Base.send :include, SketchilyTag::ActionViewBaseInstanceMethods
16
+
@@ -0,0 +1,15 @@
1
+ module SketchilyTag
2
+ module ActionViewBaseInstanceMethods
3
+ def sketchily_tag(name, value = nil, options = {})
4
+ Sketchily.render(:partial => "sketchily/sketchily_tag",
5
+ :locals => {:name => name, :id => sanitize_to_id(name),
6
+ :value => value, :options => options}).html_safe
7
+ end
8
+
9
+ def svg_edit_tag(name, value = nil, options = {})
10
+ sketchily_tag(name, value, options)
11
+ end
12
+ end
13
+ end
14
+
15
+ ActionView::Base.send :include, SketchilyTag::ActionViewBaseInstanceMethods
@@ -1,3 +1,3 @@
1
1
  module Sketchily
2
- VERSION = "0.3.0"
2
+ VERSION = "1.0.0"
3
3
  end
@@ -1,3 +1,3 @@
1
1
  module Sketchily
2
- VERSION = "0.2.0"
2
+ VERSION = "0.4.0"
3
3
  end
@@ -4,8 +4,8 @@
4
4
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
5
5
  <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
6
6
  <link rel="icon" type="image/png" href="/assets/images/logo.png"/>
7
- <link rel="stylesheet" href="svg-editor.css" type="text/css"/>
8
- <script type="text/javascript" src="jquery.js"></script>
7
+ <link rel="stylesheet" href="/assets/sketchily.css" type="text/css"/>
8
+ <script type="text/javascript" src="/assets/sketchily.js"></script>
9
9
  <title>Browser does not support SVG | SVG-edit</title>
10
10
  </head>
11
11
  <body>
@@ -0,0 +1,27 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
6
+ <link rel="icon" type="image/png" href="/assets/images/logo.png"/>
7
+ <link rel="stylesheet" href="/assets/sketchily.css" type="text/css"/>
8
+ <script type="text/javascript" src="/assets/jquery.js"></script>
9
+ <title>Browser does not support SVG | SVG-edit</title>
10
+ </head>
11
+ <body>
12
+
13
+ <div id="browser-not-supported">
14
+ <img style="float:left;padding:10px;" src="/assets/images/logo.png" width="48" height="48" alt="SVG-edit logo" /><br />
15
+ <p>Sorry, but your browser does not support SVG. Below is a list of alternate browsers and versions that support SVG and SVG-edit (from <a href="http://caniuse.com/#cats=SVG">caniuse.com</a>).</p>
16
+ <p>Try the latest version of <a href="http://www.getfirefox.com">Firefox</a>, <a href="http://www.google.com/chrome/">Google Chrome</a>, <a href="http://www.apple.com/safari/download/">Safari</a>, <a href="http://www.opera.com/download/">Opera</a> or <a href="http://windows.microsoft.com/ie9">Internet Explorer<a/>.</p>
17
+ <p>If you are unable to install one of these and must use an old version of Internet Explorer, you can install the <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame plugin</a>.</p>
18
+
19
+ <script type="text/javascript">
20
+ var viewportHeight =(window.innerHeight ? window.innerHeight : $(window).height()) - 140;
21
+ document.write('<iframe width="100%" height="'+viewportHeight+'" src="http://caniuse.com/#cats=SVG"></iframe>');
22
+ </script>
23
+
24
+ </div>
25
+
26
+ </body>
27
+ </html>
@@ -5,7 +5,7 @@
5
5
  </head>
6
6
  <body>
7
7
 
8
- <script type="text/javascript" src="/assets/embedapi.js"></script>
8
+ <script type="text/javascript" src="/assets/sketchily.js"></script>
9
9
  <script type="text/javascript">
10
10
  var svgCanvas = null;
11
11
 
@@ -51,6 +51,6 @@
51
51
  <button onclick="saveSvg();">Save data</button>
52
52
  <br/>
53
53
 
54
- <iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>
54
+ <iframe src="/assets/svg-editor.html" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>
55
55
  </body>
56
56
  </html>
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" >
3
+ <head>
4
+ <title></title>
5
+ </head>
6
+ <body>
7
+
8
+ <script type="text/javascript" src="/assets/sketchily.js"></script>
9
+ <script type="text/javascript">
10
+ var svgCanvas = null;
11
+
12
+ function init_embed() {
13
+ var frame = document.getElementById('svgedit');
14
+ svgCanvas = new embedded_svg_edit(frame);
15
+
16
+ // Hide main button, as we will be controlling new/load/save etc from the host document
17
+ var doc;
18
+ doc = frame.contentDocument;
19
+ if (!doc)
20
+ {
21
+ doc = frame.contentWindow.document;
22
+ }
23
+
24
+ var mainButton = doc.getElementById('main_button');
25
+ mainButton.style.display = 'none';
26
+ }
27
+
28
+ function handleSvgData(data, error) {
29
+ if (error)
30
+ {
31
+ alert('error ' + error);
32
+ }
33
+ else
34
+ {
35
+ alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
36
+ }
37
+ }
38
+
39
+ function loadSvg() {
40
+ var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/></g></svg>';
41
+ svgCanvas.setSvgString(svgexample);
42
+ }
43
+
44
+ function saveSvg() {
45
+ svgCanvas.getSvgString()(handleSvgData);
46
+ }
47
+ </script>
48
+
49
+
50
+ <button onclick="loadSvg();">Load example</button>
51
+ <button onclick="saveSvg();">Save data</button>
52
+ <br/>
53
+
54
+ <iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>
55
+ </body>
56
+ </html>
@@ -59,7 +59,7 @@ svgEditor.addExtension("view_grid", function(s) {
59
59
  });
60
60
 
61
61
  gridPattern.appendChild(gridimg);
62
- $('#svgroot defs').append(gridPattern);
62
+ $('#canvasGrid').append(gridPattern);
63
63
 
64
64
  // grid-box
65
65
  var gridBox = svgdoc.createElementNS(svgns, "rect");
@@ -0,0 +1,184 @@
1
+ /*
2
+ * ext-grid.js
3
+ *
4
+ * Licensed under the Apache License, Version 2
5
+ *
6
+ * Copyright(c) 2010 Redou Mine
7
+ * Copyright(c) 2010 Alexis Deveria
8
+ *
9
+ */
10
+
11
+ // Dependencies:
12
+ // 1) units.js
13
+ // 2) everything else
14
+
15
+ svgEditor.addExtension("view_grid", function(s) {
16
+
17
+ var svgdoc = document.getElementById("svgcanvas").ownerDocument,
18
+ svgns = "http://www.w3.org/2000/svg",
19
+ dims = svgEditor.curConfig.dimensions,
20
+ svgroot = s.svgroot;
21
+
22
+ var showGrid = false;
23
+ var assignAttributes = svgCanvas.assignAttributes;
24
+
25
+ var hcanvas = document.createElement('canvas');
26
+ $(hcanvas).hide().appendTo('body');
27
+
28
+ var canvasgrid = svgdoc.createElementNS(svgns, "svg");
29
+ assignAttributes(canvasgrid, {
30
+ 'id': 'canvasGrid',
31
+ 'width': '100%',
32
+ 'height': '100%',
33
+ 'x': 0,
34
+ 'y': 0,
35
+ 'overflow': 'visible',
36
+ 'display': 'none'
37
+ });
38
+
39
+ var canvBG = $('#canvasBackground');
40
+ canvBG.append(canvasgrid);
41
+
42
+ // grid-pattern
43
+ var gridPattern = svgdoc.createElementNS(svgns, "pattern");
44
+ assignAttributes(gridPattern, {
45
+ 'id': 'gridpattern',
46
+ 'patternUnits': 'userSpaceOnUse',
47
+ 'x': 0, //-(value.strokeWidth / 2), // position for strokewidth
48
+ 'y': 0, //-(value.strokeWidth / 2), // position for strokewidth
49
+ 'width': 100,
50
+ 'height': 100
51
+ });
52
+
53
+ var gridimg = svgdoc.createElementNS(svgns, "image");
54
+ assignAttributes(gridimg, {
55
+ 'x': 0,
56
+ 'y': 0,
57
+ 'width': 100,
58
+ 'height': 100
59
+ });
60
+
61
+ gridPattern.appendChild(gridimg);
62
+ $('#svgroot defs').append(gridPattern);
63
+
64
+ // grid-box
65
+ var gridBox = svgdoc.createElementNS(svgns, "rect");
66
+ assignAttributes(gridBox, {
67
+ 'width': '100%',
68
+ 'height': '100%',
69
+ 'x': 0,
70
+ 'y': 0,
71
+ 'stroke-width': 0,
72
+ 'stroke': 'none',
73
+ 'fill': 'url(#gridpattern)',
74
+ 'style': 'pointer-events: none; display:visible;'
75
+ });
76
+ $('#canvasGrid').append(gridBox);
77
+ // });
78
+
79
+ function updateGrid(zoom) {
80
+ // TODO: Try this with <line> elements, then compare performance difference
81
+
82
+ var bgwidth = +canvBG.attr('width');
83
+ var bgheight = +canvBG.attr('height');
84
+
85
+ var units = svgedit.units.getTypeMap();
86
+ var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
87
+ var r_intervals = [.01, .1, 1, 10, 100, 1000];
88
+
89
+ var d = 0;
90
+ var is_x = (d === 0);
91
+ var dim = is_x ? 'x' : 'y';
92
+ var lentype = is_x?'width':'height';
93
+ var c_elem = svgCanvas.getContentElem();
94
+ var content_d = c_elem.getAttribute(dim)-0;
95
+
96
+ var hcanv = hcanvas;
97
+
98
+ var u_multi = unit * zoom;
99
+
100
+ // Calculate the main number interval
101
+ var raw_m = 100 / u_multi;
102
+ var multi = 1;
103
+ for(var i = 0; i < r_intervals.length; i++) {
104
+ var num = r_intervals[i];
105
+ multi = num;
106
+ if(raw_m <= num) {
107
+ break;
108
+ }
109
+ }
110
+
111
+ var big_int = multi * u_multi;
112
+
113
+ // Set the canvas size to the width of the container
114
+ hcanv.width = big_int;
115
+ hcanv.height = big_int;
116
+ var ctx = hcanv.getContext("2d");
117
+
118
+ var ruler_d = 0;
119
+ var cur_d = .5;
120
+
121
+ var part = big_int / 10;
122
+
123
+ ctx.globalAlpha = 0.2;
124
+ ctx.strokeStyle = "#000";
125
+ for(var i = 1; i < 10; i++) {
126
+ var sub_d = Math.round(part * i) + .5;
127
+ // var line_num = (i % 2)?12:10;
128
+ var line_num = 0;
129
+ ctx.moveTo(sub_d, big_int);
130
+ ctx.lineTo(sub_d, line_num);
131
+ ctx.moveTo(big_int, sub_d);
132
+ ctx.lineTo(line_num ,sub_d);
133
+ }
134
+ ctx.stroke();
135
+ ctx.beginPath();
136
+ ctx.globalAlpha = 0.5;
137
+ ctx.moveTo(cur_d, big_int);
138
+ ctx.lineTo(cur_d, 0);
139
+
140
+ ctx.moveTo(big_int, cur_d);
141
+ ctx.lineTo(0, cur_d);
142
+ ctx.stroke();
143
+
144
+ var datauri = hcanv.toDataURL('image/png');
145
+ gridimg.setAttribute('width', big_int);
146
+ gridimg.setAttribute('height', big_int);
147
+ gridimg.parentNode.setAttribute('width', big_int);
148
+ gridimg.parentNode.setAttribute('height', big_int);
149
+ svgCanvas.setHref(gridimg, datauri);
150
+ }
151
+
152
+ return {
153
+ name: "view_grid",
154
+ svgicons: "/assets/extensions/grid-icon.xml",
155
+
156
+ zoomChanged: function(zoom) {
157
+ // update size
158
+ if(showGrid) updateGrid(zoom);
159
+ },
160
+
161
+ buttons: [{
162
+ id: "view_grid",
163
+ type: "context",
164
+ panel: "editor_panel",
165
+ title: "Show/Hide Grid",
166
+ events: {
167
+ 'click': function() {
168
+ var gr = !$('#view_grid').hasClass('push_button_pressed');
169
+ if (gr) {
170
+ svgEditor.curConfig.showGrid = showGrid = true;
171
+ $('#view_grid').addClass('push_button_pressed').removeClass('tool_button');
172
+ $('#canvasGrid').attr('display', 'normal');
173
+ updateGrid(svgCanvas.getZoom());
174
+ }
175
+ else {
176
+ svgEditor.curConfig.showGrid = showGrid = false;
177
+ $('#view_grid').removeClass('push_button_pressed').addClass('tool_button');
178
+ $('#canvasGrid').attr('display', 'none');
179
+ }
180
+ }
181
+ }
182
+ }]
183
+ };
184
+ });