sketchily 0.3.0 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
});
|