sketchily 0.3.0 → 1.0.0

data/README.md

@@ -18,6 +18,12 @@ Or install it yourself as:
 
     $ gem install sketchily
 
+**Note:** sketchily will **automatically** add the following files to your asset precompilation list:
+
+    sketchily.css sketchily.js sketchily_embed.js canvg/canvg.js canvg/rgbcolor.js extensions/ext-*.js locale/lang.*.js
+
+Other html files and images used by svg-edit will also be precompiled.
+
 ## Usage
 
 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
 
 - Both of these functions work exactly like the equivalent `hidden_field` functions, except that svg-edit is displayed instead.
 - The `f.sketchily` format accepts a method name and an options hash.
-- The sketchily format accepts an object name, a method name and an options hash.
+- The `sketchily` format (called without the form builder object) accepts an object name, a method name and an options hash.
 - The `sketchily_tag` format accepts a tag name, the svg string to be edited and an options hash.
 
 Currently available options are:
@@ -51,27 +57,32 @@ Currently available options are:
 
 It is recommended that the database entries associated with sketchily form elements be of type `text`.
 
+The following examples assume that the database table for `@my_object` has a `sketch` column of type `text`.
+
 Example usage (haml):
 
-    = form_for @shirt do |f|
-      f.text_field :title
-      f.sketchily :svg
+```haml
+= form_for @my_object do |f|
+  = f.sketchily :sketch, :hide_menu => true
+```
 
 ### `sketchily_show` helper
 
 - This function takes the base64-encoded SVG string as an argument and an options hash.
-- The SVG string can be directly read from the field used by the previous functions.
+- The SVG string can be directly read from the field used by the `sketchily` and `sketchily_tag` functions.
 
 Currently available options are:
 
-- `width`
-- `height`
+- `width` (width of resulting image object)
+- `height` (height of resulting image object)
 
-Passing only one of those options should keep the aspect ratio constant in most browsers.
+Passing only one of those options should keep the aspect ratio of the SVG constant in most browsers.
 
 Example usage (haml):
 
-    = sketchily_show @shirt.svg, :width => "500"
+```haml
+= sketchily_show @my_object.sketch, :width => "500"
+```
 
 ## Browser Support
 

data/app/assets/javascripts/sketchily.js

@@ -0,0 +1,10 @@
+//= require jquery
+//= require js-hotkeys/jquery.hotkeys.min
+//= require jquerybbq/jquery.bbq.min
+//= require svgicons/jquery.svgicons
+//= require jgraduate/jquery.jgraduate.min
+//= require spinbtn/JQuerySpinBtn.min
+//= require touch
+//= require svgedit.compiled
+//= require jquery-ui/jquery-ui-1.8.17.custom.min
+//= require jgraduate/jpicker

data/app/assets/javascripts/sketchily.js~

@@ -0,0 +1,2 @@
+//= require jquery
+//= require 

data/app/assets/javascripts/sketchily_embed.js

@@ -0,0 +1,3 @@
+//= require jquery
+//= require embedapi
+//= require svgutils

data/app/assets/javascripts/sketchily_embed.js~

@@ -0,0 +1,2 @@
+//= require embedapi
+//= require svgutils

data/app/assets/stylesheets/sketchily.css

@@ -0,0 +1,7 @@
+/*
+ *= require_self
+ *= require jgraduate/css/jPicker
+ *= require jgraduate/css/jgraduate
+ *= require svg-editor
+ *= require spinbtn/JQuerySpinBtn
+ */

data/app/assets/stylesheets/sketchily.css~

@@ -0,0 +1,6 @@
+/*
+ *= require_self
+ *= require jgraduate/css/jPicker
+ *= require jgraduate/css/jgraduate
+ *= svg-editor
+ */

data/app/views/sketchily/_embed.html.erb

@@ -13,8 +13,7 @@
    hide_image_tool ||= false
    hide_hyperlink_tool ||= false %>
 
-<%= javascript_include_tag "embedapi" %>
-<%= javascript_include_tag "svgutils" %>
+<%= javascript_include_tag "sketchily_embed" %>
 
 <script type="text/javascript">
   <%= render :partial => "sketchily/embed",

data/app/views/sketchily/_embed.html.erb~

@@ -8,12 +8,12 @@
    canvas_width ||= 640
    canvas_height ||= 480
    canvas_expansion ||= 3
-   hide_menu ||= false
    hide_rulers ||= false
+   hide_menu ||= false
    hide_image_tool ||= false
    hide_hyperlink_tool ||= false %>
 
-<%= javascript_include_tag "embedapi" %>
+<%= javascript_include_tag "sketchily_embed" %>
 <%= javascript_include_tag "svgutils" %>
 
 <script type="text/javascript">

data/lib/sketchily.rb

@@ -1,4 +1,10 @@
+require "sketchily/engine"
+require "sketchily/sketchily"
+require "sketchily/sketchily_tag"
+
 module Sketchily
+  ASSET_FILES = %w(sketchily.css sketchily.js sketchily_embed.js canvg/canvg.js canvg/rgbcolor.js extensions/ext-*.js locale/lang.*.js)
+
   OPTIONS = [:width, :height, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :hide_image_tool, :hide_hyperlink_tool]
 
   ROOT = File.expand_path('../..', __FILE__)
@@ -6,12 +12,12 @@ module Sketchily
   VIEW = ActionView::Base.new
   VIEW.view_paths << "#{ROOT}/app/views"
 
+  ActiveSupport.on_load(:before_initialize) do
+    Rails.configuration.assets.precompile += Sketchily::ASSET_FILES
+  end
+
   def self.render(options = {}, local_assigns = {}, &block)
     VIEW.render(options, local_assigns, &block)
   end
 end
 
-require "sketchily/engine"
-require "sketchily/sketchily"
-require "sketchily/sketchily_tag"
-

data/lib/sketchily.rb~

@@ -1,17 +1,25 @@
+require "sketchily/engine"
+require "sketchily/sketchily"
+require "sketchily/sketchily_tag"
+
 module Sketchily
-  OPTIONS = [:width, :height, :canvas_width, :canvas_height, :canvas_expansion, :hide_menu, :hide_rulers, :hide_image_tool, :hide_hyperlink_tool]
+  ASSET_FILES = %w(sketchily.css sketchily.js sketchily_embed.js canvg/canvg.js canvg/rgbcolor.js extensions/ext-*.js locale/lang.*.js)
+
+  OPTIONS = [:width, :height, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :hide_image_tool, :hide_hyperlink_tool]
 
   ROOT = File.expand_path('../..', __FILE__)
 
   VIEW = ActionView::Base.new
   VIEW.view_paths << "#{ROOT}/app/views"
 
+  ActiveSupport.on_load(:before_initialize) do
+    Rails.configuration.assets.precompile += Sketchily::ASSET_FILES
+  end
+
   def self.render(options = {}, local_assigns = {}, &block)
     VIEW.render(options, local_assigns, &block)
   end
 end
 
-require "sketchily/engine"
-require "sketchily/sketchily"
-require "sketchily/sketchily_tag"
+
 

data/lib/sketchily/railtie.rb~

@@ -0,0 +1,8 @@
+module Sketchily
+  class Railtie < Rails::Railtie
+    initializer "precompile_sketchily_assets", :before => :environment do |app|
+mkdir 'sup'
+      app.config.assets.precompile += Sketchily::ASSET_FILES
+    end
+  end
+end

data/lib/sketchily/sketchily.rb

@@ -26,3 +26,4 @@ end
 
 ActionView::Helpers::FormBuilder.send :include, Sketchily::FormBuilderInstanceMethods
 ActionView::Base.send :include, Sketchily::ActionViewBaseInstanceMethods
+

data/lib/sketchily/sketchily.rb~

@@ -0,0 +1,28 @@
+module Sketchily
+  module FormBuilderInstanceMethods
+    def sketchily(method, options = {})
+      Sketchily.render(:partial => "sketchily/sketchily",
+        :locals => {:template => @template, :object_name => @object_name,
+                    :method => method, :options => objectify_options(options)}).html_safe
+    end
+
+    def svg_edit(method, options = {})
+      sketchily(method, options)
+    end
+  end
+
+  module ActionViewBaseInstanceMethods
+    def sketchily(object_name, method, options = {})
+      Sketchily.render(:partial => "sketchily/sketchily",
+        :locals => {:template => self, :object_name => object_name,
+                    :method => method, :options => options}).html_safe
+    end
+
+    def svg_edit(object_name, method, options = {})
+      sketchily(object_name, method, options)
+    end
+  end
+end
+
+ActionView::Helpers::FormBuilder.send :include, Sketchily::FormBuilderInstanceMethods
+ActionView::Base.send :include, Sketchily::ActionViewBaseInstanceMethods

data/lib/sketchily/sketchily_tag.rb

@@ -13,3 +13,4 @@ module SketchilyTag
 end
 
 ActionView::Base.send :include, SketchilyTag::ActionViewBaseInstanceMethods
+

data/lib/sketchily/sketchily_tag.rb~

@@ -0,0 +1,15 @@
+module SketchilyTag
+  module ActionViewBaseInstanceMethods
+    def sketchily_tag(name, value = nil, options = {})
+      Sketchily.render(:partial => "sketchily/sketchily_tag",
+        :locals => {:name => name, :id => sanitize_to_id(name),
+                    :value => value, :options => options}).html_safe
+    end
+
+    def svg_edit_tag(name, value = nil, options = {})
+      sketchily_tag(name, value, options)
+    end
+  end
+end
+
+ActionView::Base.send :include, SketchilyTag::ActionViewBaseInstanceMethods

data/lib/sketchily/version.rb

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "0.3.0"
+  VERSION = "1.0.0"
 end

data/lib/sketchily/version.rb~

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "0.2.0"
+  VERSION = "0.4.0"
 end

data/vendor/assets/svg-edit-2.6/browser-not-supported.html

@@ -4,8 +4,8 @@
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
 <link rel="icon" type="image/png" href="/assets/images/logo.png"/>
-<link rel="stylesheet" href="svg-editor.css" type="text/css"/>
-<script type="text/javascript" src="jquery.js"></script>
+<link rel="stylesheet" href="/assets/sketchily.css" type="text/css"/>
+<script type="text/javascript" src="/assets/sketchily.js"></script>
 <title>Browser does not support SVG | SVG-edit</title>
 </head>
 <body>

data/vendor/assets/svg-edit-2.6/browser-not-supported.html~

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
+<link rel="icon" type="image/png" href="/assets/images/logo.png"/>
+<link rel="stylesheet" href="/assets/sketchily.css" type="text/css"/>
+<script type="text/javascript" src="/assets/jquery.js"></script>
+<title>Browser does not support SVG | SVG-edit</title>
+</head>
+<body>
+
+<div id="browser-not-supported">
+<img style="float:left;padding:10px;" src="/assets/images/logo.png" width="48" height="48" alt="SVG-edit logo" /><br />
+<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>
+<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>
+<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>
+
+<script type="text/javascript">
+var viewportHeight =(window.innerHeight ? window.innerHeight : $(window).height()) - 140;
+document.write('<iframe width="100%" height="'+viewportHeight+'" src="http://caniuse.com/#cats=SVG"></iframe>');
+</script>
+
+</div>
+
+</body>
+</html>

data/vendor/assets/svg-edit-2.6/embedapi.html

@@ -5,7 +5,7 @@
 </head>
 <body>
 
-    <script type="text/javascript" src="/assets/embedapi.js"></script>
+    <script type="text/javascript" src="/assets/sketchily.js"></script>
     <script type="text/javascript">
         var svgCanvas = null;
 
@@ -51,6 +51,6 @@
     <button onclick="saveSvg();">Save data</button>
     <br/>
 
-    <iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>    
+    <iframe src="/assets/svg-editor.html" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>    
 </body>
 </html>

data/vendor/assets/svg-edit-2.6/embedapi.html~

@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" >
+<head>
+    <title></title>
+</head>
+<body>
+
+    <script type="text/javascript" src="/assets/sketchily.js"></script>
+    <script type="text/javascript">
+        var svgCanvas = null;
+
+        function init_embed() {
+            var frame = document.getElementById('svgedit');
+			svgCanvas = new embedded_svg_edit(frame);
+			
+			// Hide main button, as we will be controlling new/load/save etc from the host document
+			var doc;
+			doc = frame.contentDocument;
+			if (!doc)
+			{
+				doc = frame.contentWindow.document;
+			}
+			
+			var mainButton = doc.getElementById('main_button');
+			mainButton.style.display = 'none';            
+        }
+        
+        function handleSvgData(data, error) {
+			if (error)
+			{
+				alert('error ' + error);
+			}
+            else
+			{
+				alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
+			}			
+        }
+        
+        function loadSvg() {
+            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>';
+            svgCanvas.setSvgString(svgexample);
+        }
+		
+		function saveSvg() {			
+			svgCanvas.getSvgString()(handleSvgData);
+		}
+    </script>
+
+
+    <button onclick="loadSvg();">Load example</button>
+    <button onclick="saveSvg();">Save data</button>
+    <br/>
+
+    <iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>    
+</body>
+</html>

data/vendor/assets/svg-edit-2.6/extensions/ext-grid.js

@@ -59,7 +59,7 @@ svgEditor.addExtension("view_grid", function(s) {
         });
         
         gridPattern.appendChild(gridimg);
-        $('#svgroot defs').append(gridPattern);
+        $('#canvasGrid').append(gridPattern);
 
         // grid-box
         var gridBox = svgdoc.createElementNS(svgns, "rect");

data/vendor/assets/svg-edit-2.6/extensions/ext-grid.js~

@@ -0,0 +1,184 @@
+/*
+ * ext-grid.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Redou Mine
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+
+// Dependencies:
+// 1) units.js
+// 2) everything else
+
+svgEditor.addExtension("view_grid", function(s) {
+
+    var svgdoc = document.getElementById("svgcanvas").ownerDocument,
+			svgns = "http://www.w3.org/2000/svg",
+			dims = svgEditor.curConfig.dimensions,
+			svgroot = s.svgroot;
+
+	var showGrid = false;
+    var assignAttributes = svgCanvas.assignAttributes;
+    
+    var hcanvas = document.createElement('canvas');
+    $(hcanvas).hide().appendTo('body');
+
+    var canvasgrid = svgdoc.createElementNS(svgns, "svg");
+    assignAttributes(canvasgrid, {
+        'id': 'canvasGrid',
+        'width': '100%',
+        'height': '100%',
+        'x': 0,
+        'y': 0,
+        'overflow': 'visible',
+        'display': 'none'
+    });
+    
+    var canvBG = $('#canvasBackground');
+    canvBG.append(canvasgrid);
+
+        // grid-pattern
+        var gridPattern = svgdoc.createElementNS(svgns, "pattern");
+        assignAttributes(gridPattern, {
+            'id': 'gridpattern',
+            'patternUnits': 'userSpaceOnUse',
+            'x': 0, //-(value.strokeWidth / 2), // position for strokewidth
+            'y': 0, //-(value.strokeWidth / 2), // position for strokewidth
+            'width': 100,
+            'height': 100
+        });
+        
+        var gridimg = svgdoc.createElementNS(svgns, "image");
+        assignAttributes(gridimg, {
+            'x': 0,
+            'y': 0,
+            'width': 100,
+            'height': 100
+        });
+        
+        gridPattern.appendChild(gridimg);
+        $('#svgroot defs').append(gridPattern);
+
+        // grid-box
+        var gridBox = svgdoc.createElementNS(svgns, "rect");
+        assignAttributes(gridBox, {
+            'width': '100%',
+            'height': '100%',
+            'x': 0,
+            'y': 0,
+            'stroke-width': 0,
+            'stroke': 'none',
+            'fill': 'url(#gridpattern)',
+            'style': 'pointer-events: none; display:visible;'
+        });
+        $('#canvasGrid').append(gridBox);
+//     });
+
+	function updateGrid(zoom) {
+		// TODO: Try this with <line> elements, then compare performance difference
+	
+		var bgwidth = +canvBG.attr('width');
+		var bgheight = +canvBG.attr('height');
+		
+		var units = svgedit.units.getTypeMap();
+		var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
+		var r_intervals = [.01, .1, 1, 10, 100, 1000];
+	
+		var d = 0;
+		var is_x = (d === 0);
+		var dim = is_x ? 'x' : 'y';
+		var lentype = is_x?'width':'height';
+		var c_elem = svgCanvas.getContentElem();
+		var content_d = c_elem.getAttribute(dim)-0;
+		
+		var hcanv = hcanvas;
+		
+		var u_multi = unit * zoom;
+		
+		// Calculate the main number interval
+		var raw_m = 100 / u_multi;
+		var multi = 1;
+		for(var i = 0; i < r_intervals.length; i++) {
+			var num = r_intervals[i];
+			multi = num;
+			if(raw_m <= num) {
+				break;
+			}
+		}
+		
+		var big_int = multi * u_multi;
+
+		// Set the canvas size to the width of the container
+		hcanv.width = big_int;
+		hcanv.height = big_int;
+		var ctx = hcanv.getContext("2d");
+
+		var ruler_d = 0; 
+		var cur_d = .5;
+		
+		var part = big_int / 10;
+
+		ctx.globalAlpha = 0.2;
+		ctx.strokeStyle = "#000";
+		for(var i = 1; i < 10; i++) {
+			var sub_d = Math.round(part * i) + .5;
+// 					var line_num = (i % 2)?12:10;
+			var line_num = 0;
+			ctx.moveTo(sub_d, big_int);
+			ctx.lineTo(sub_d, line_num);
+			ctx.moveTo(big_int, sub_d);
+			ctx.lineTo(line_num ,sub_d);
+		}
+		ctx.stroke();
+		ctx.beginPath();  
+		ctx.globalAlpha = 0.5;
+		ctx.moveTo(cur_d, big_int);
+		ctx.lineTo(cur_d, 0);
+
+		ctx.moveTo(big_int, cur_d);
+		ctx.lineTo(0, cur_d);
+		ctx.stroke();
+
+		var datauri = hcanv.toDataURL('image/png');
+		gridimg.setAttribute('width', big_int);
+		gridimg.setAttribute('height', big_int);
+		gridimg.parentNode.setAttribute('width', big_int);
+		gridimg.parentNode.setAttribute('height', big_int);
+		svgCanvas.setHref(gridimg, datauri);
+	}
+
+    return {
+        name: "view_grid",
+        svgicons: "/assets/extensions/grid-icon.xml",
+
+        zoomChanged: function(zoom) {
+            // update size
+            if(showGrid) updateGrid(zoom);
+        },
+
+        buttons: [{
+            id: "view_grid",
+            type: "context",
+            panel: "editor_panel",
+            title: "Show/Hide Grid",
+            events: {
+                'click': function() {
+                    var gr = !$('#view_grid').hasClass('push_button_pressed');
+                    if (gr) {
+                        svgEditor.curConfig.showGrid = showGrid = true;
+                        $('#view_grid').addClass('push_button_pressed').removeClass('tool_button');
+                        $('#canvasGrid').attr('display', 'normal');
+                        updateGrid(svgCanvas.getZoom());
+                    }
+                    else {
+                        svgEditor.curConfig.showGrid = showGrid = false;
+                        $('#view_grid').removeClass('push_button_pressed').addClass('tool_button');
+                        $('#canvasGrid').attr('display', 'none');
+                    }
+                }
+            }
+}]
+        };
+    });