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.
- data/README.md +20 -9
- data/app/assets/javascripts/sketchily.js +10 -0
- data/app/assets/javascripts/sketchily.js~ +2 -0
- data/app/assets/javascripts/sketchily_embed.js +3 -0
- data/app/assets/javascripts/sketchily_embed.js~ +2 -0
- data/app/assets/stylesheets/sketchily.css +7 -0
- data/app/assets/stylesheets/sketchily.css~ +6 -0
- data/app/views/sketchily/_embed.html.erb +1 -2
- data/app/views/sketchily/_embed.html.erb~ +2 -2
- data/lib/sketchily.rb +10 -4
- data/lib/sketchily.rb~ +12 -4
- data/lib/sketchily/railtie.rb~ +8 -0
- data/lib/sketchily/sketchily.rb +1 -0
- data/lib/sketchily/sketchily.rb~ +28 -0
- data/lib/sketchily/sketchily_tag.rb +1 -0
- data/lib/sketchily/sketchily_tag.rb~ +15 -0
- data/lib/sketchily/version.rb +1 -1
- data/lib/sketchily/version.rb~ +1 -1
- data/vendor/assets/svg-edit-2.6/browser-not-supported.html +2 -2
- data/vendor/assets/svg-edit-2.6/browser-not-supported.html~ +27 -0
- data/vendor/assets/svg-edit-2.6/embedapi.html +2 -2
- data/vendor/assets/svg-edit-2.6/embedapi.html~ +56 -0
- data/vendor/assets/svg-edit-2.6/extensions/ext-grid.js +1 -1
- data/vendor/assets/svg-edit-2.6/extensions/ext-grid.js~ +184 -0
- data/vendor/assets/svg-edit-2.6/locale/lang.ro.js +2 -2
- data/vendor/assets/svg-edit-2.6/locale/lang.ro.js~ +234 -0
- data/vendor/assets/svg-edit-2.6/spinbtn/JQuerySpinBtn.css +1 -1
- data/vendor/assets/svg-edit-2.6/spinbtn/JQuerySpinBtn.css~ +41 -0
- data/vendor/assets/svg-edit-2.6/svg-editor.html +2 -45
- data/vendor/assets/svg-edit-2.6/svg-editor.html~ +746 -0
- data/vendor/assets/svg-edit-2.6/svg-editor.js +1 -1
- data/vendor/assets/svg-edit-2.6/svg-editor.js~ +4969 -0
- 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
|
-
|
57
|
-
|
58
|
-
|
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
|
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
|
-
|
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
|
@@ -13,8 +13,7 @@
|
|
13
13
|
hide_image_tool ||= false
|
14
14
|
hide_hyperlink_tool ||= false %>
|
15
15
|
|
16
|
-
<%= javascript_include_tag "
|
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 "
|
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
|
-
|
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
|
-
|
15
|
-
require "sketchily/sketchily"
|
16
|
-
require "sketchily/sketchily_tag"
|
24
|
+
|
17
25
|
|
data/lib/sketchily/sketchily.rb
CHANGED
@@ -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
|
@@ -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
|
data/lib/sketchily/version.rb
CHANGED
data/lib/sketchily/version.rb~
CHANGED
@@ -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="
|
8
|
-
<script type="text/javascript" src="
|
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/
|
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>
|
@@ -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
|
+
});
|