method_draw 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: bf121cd214ffb886459d28de2bef43d829701246
+  data.tar.gz: 601edad72d97d5c6916ea1491d3f28d78a4bec8d
+SHA512:
+  metadata.gz: e1e6327c1c19d5f17d99019d5539eba3eb7cccd952e26a2da477d230eead65b81fd4e50f02616c1236ddab482ce3d5d43aeccd56581fbeb0b0d67ae00b8c2c02
+  data.tar.gz: b7a7fc7516e44b2e3a674eb5d3ad03ef57af811bfa6c9efc87e73f485df4aa38b2514ff1b3eaebb60294c19616ccf0ee31e8e71d33417f6f923668dbf26501f4

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2013 Rice University
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,148 @@
+# MethodDraw
+
+MethodDraw allows the easy integration of [Method-Draw](https://github.com/duopixel/Method-Draw) with any rails application.
+
+_This Gem was adapted from the [Sketchily](https://github.com/lml/sketchily) gem._
+
+Currently supports and provides `method-draw`.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```rb
+gem 'method_draw'
+```
+
+And then execute:
+
+```sh
+$ bundle
+```
+
+Or install it yourself:
+
+```sh
+$ gem install method_draw
+```
+
+Also make sure your `application.js` includes some version of jquery. It usually does by default.
+If you use the jquery-rails gem, you will have something like this:
+
+```js
+//= require jquery
+//= require jquery_ujs
+```
+
+**Note:** method_draw will **automatically** add the following files to your asset precompilation list:
+
+    method_draw.css method_draw.js method_draw_embed.js method-draw-js/canvg/canvg.js method-draw-js/canvg/rgbcolor.js method-draw-js/extensions/ext-*.js
+
+Other html files and images used by method-draw will also be precompiled.
+
+## Usage
+
+MethodDraw adds new form elements which can be accessed by calling:
+
+- `f.method_draw` or simply `method_draw` from inside a `form_for @my_object |f|`
+- `method_draw_tag` from inside a `form_tag`
+
+This gem also adds a helper method that can be called to display the resulting SVG images (without an editor):
+
+- `method_draw_show` from any view template
+
+### `method_draw` and `method_draw_tag` functions
+
+- Both of these functions work exactly like the equivalent `hidden_field` functions, except that method-draw is displayed instead.
+- The `f.method_draw` format accepts a method name and an options hash.
+- The `method_draw` format (called without the form builder object) accepts an object name, a method name and an options hash.
+- The `method_draw_tag` format accepts a tag name, the svg string to be edited and an options hash.
+
+Currently available options are:
+
+- `width` total width of editor
+- `height` total height of editor
+
+- `bkgd_color` canvas background color (3 or 6 hex digit html color format; not saved with image; see method_draw_show)
+- `bkgd_url` canvas background image url (not saved with image; see bkgd_file option for method_draw_show)
+
+- `canvas_width` initial canvas width
+- `canvas_height` initial canvas height
+- `canvas_expansion` 0 if you want to disable scrolling
+
+- `hide_rulers` true if you want to hide the canvas rulers
+- `hide_menu` true if you want method-draw's menu to be hidden
+- `hide_image_tool` true if you want to hide the `image tool` button
+
+- `show_layers` (true if you want the layer selector to display automatically when the editor is loaded)
+
+- `url` override contents of the canvas with the svg file in the given url (careful: changes lost whenever editor is loaded)
+
+- `id` override the default id (see explanation below)
+- `value` override the default value (the svg itself; can be useful when using form_for)
+- `index` override the default index (affects the tag name; can be useful when using form_for)
+
+- `extensions` editor plugins (e.g. 'plugin.js' will load '/assets/extensions/plugin.js')
+
+- other standard html attributes for the input tag
+
+The `hyperlink tool` is disabled by default, as embedded links and scripts do not work with the display method used by method_draw_show.
+The method_draw_show helper will display svg's inside of <img> tags, which are treated as static images by most browsers.
+We consider this to be a necessary precaution when dealing with user-generated svg's.
+
+MethodDraw requires a unique `id` (by default, this is set in the same way as hidden_field) each time it is called in the same page.
+However, some uses of `form_for` can generate repeated ids (e.g. multiple `form_for @my_object.new` in the same page).
+In those cases, you need to generate and specify your own unique ids. A possible solution is to use one of the many uuid generator gems.
+
+It is recommended that the database entries associated with method_draw 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):
+
+```haml
+= form_for @my_object do |f|
+  = f.method_draw :sketch, :hide_menu => true
+```
+
+### `method_draw_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 `method_draw` and `method_draw_tag` functions.
+
+Currently available options are:
+
+- `width` width of resulting image object
+- `height` height of resulting image object
+
+- `bkgd_color` background color (3 or 6 hex digit html color format)
+- `bkgd_file` background image file path (must be a local image file)
+
+Passing only one of those options should keep the aspect ratio of the SVG constant in most browsers.
+
+Example usage (haml):
+
+```haml
+= method_draw_show @my_object.sketch, :width => "500"
+```
+
+## Browser Support
+
+Although more testing is needed, we currently believe method_draw supports any browsers that Method-Draw supports, namely:
+
+- Firefox 1.5+
+- Opera 9.50+
+- Safari 4+
+- Chrome 1+
+- IE 9+
+- IE 6+ (with the [Chrome Frame plugin](http://www.google.com/chromeframe)) 
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Create specs for your feature
+4. Ensure that all specs pass
+5. Commit your changes (`git commit -am 'Add some feature'`)
+6. Push to the branch (`git push origin my-new-feature`)
+7. Create new pull request

data/Rakefile

@@ -0,0 +1,23 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test => 'app:db:test:prepare') do |t|
+  t.libs << 'lib'
+  t.libs << 'spec'
+  t.pattern = 'spec/**/*_spec.rb'
+  t.verbose = false
+end
+
+task :default => :test
+

data/app/assets/javascripts/method_draw.js

@@ -0,0 +1,9 @@
+//= require method-draw-js/lib/jquery
+//= require method-draw-js/lib/js-hotkeys/jquery.hotkeys.min
+//= require method-draw-js/lib/jquerybbq/jquery.bbq.min
+//= require method-draw-js/icons/jquery.svgicons
+//= require method-draw-js/lib/jgraduate/jquery.jgraduate.min
+//= require method-draw-js/lib/touch
+//= require method-draw-js/method-draw.compiled
+//= require method-draw-js/lib/jquery-ui/jquery-ui-1.8.17.custom.min
+//= require method-draw-js/lib/jgraduate/jpicker

data/app/assets/javascripts/method_draw/base64.js

@@ -0,0 +1,95 @@
+// This code was written by Tyler Akins and has been placed in the
+// public domain.  It would be nice if you left this header intact.
+// Base64 code from Tyler Akins -- http://rumkin.com
+
+// schiller: Removed string concatenation in favour of Array.join() optimization,
+//           also precalculate the size of the array needed.
+
+// Function: method_draw_encode64
+// Converts a string to base64
+var method_draw_encode64 = function(input) {
+  // base64 strings are 4/3 larger than the original string
+  input = method_draw_convertToXMLReferences(input);
+  if(window.btoa) return window.btoa(input); // Use native if available
+  var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 );
+  var chr1, chr2, chr3;
+  var enc1, enc2, enc3, enc4;
+  var i = 0, p = 0;
+
+  do {
+	  chr1 = input.charCodeAt(i++);
+	  chr2 = input.charCodeAt(i++);
+	  chr3 = input.charCodeAt(i++);
+
+	  enc1 = chr1 >> 2;
+	  enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+	  enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+	  enc4 = chr3 & 63;
+
+	  if (isNaN(chr2)) {
+		  enc3 = enc4 = 64;
+	  } else if (isNaN(chr3)) {
+		  enc4 = 64;
+	  }
+
+	  output[p++] = KEYSTR.charAt(enc1);
+	  output[p++] = KEYSTR.charAt(enc2);
+	  output[p++] = KEYSTR.charAt(enc3);
+	  output[p++] = KEYSTR.charAt(enc4);
+  } while (i < input.length);
+
+  return output.join('');
+};
+
+// Function: method_draw_decode64
+// Converts a string from base64
+var method_draw_decode64 = function(input) {
+  if(window.atob) return window.atob(input);
+  var output = "";
+  var chr1, chr2, chr3 = "";
+  var enc1, enc2, enc3, enc4 = "";
+  var i = 0;
+
+   // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
+   input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+   do {
+	  enc1 = KEYSTR.indexOf(input.charAt(i++));
+	  enc2 = KEYSTR.indexOf(input.charAt(i++));
+	  enc3 = KEYSTR.indexOf(input.charAt(i++));
+	  enc4 = KEYSTR.indexOf(input.charAt(i++));
+
+	  chr1 = (enc1 << 2) | (enc2 >> 4);
+	  chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+	  chr3 = ((enc3 & 3) << 6) | enc4;
+
+	  output = output + String.fromCharCode(chr1);
+
+	  if (enc3 != 64) {
+	     output = output + String.fromCharCode(chr2);
+	  }
+	  if (enc4 != 64) {
+	     output = output + String.fromCharCode(chr3);
+	  }
+
+	  chr1 = chr2 = chr3 = "";
+	  enc1 = enc2 = enc3 = enc4 = "";
+
+   } while (i < input.length);
+   return unescape(output);
+};
+
+// Function: method_draw_convertToXMLReferences
+// Converts a string to use XML references
+var method_draw_convertToXMLReferences = function(input) {
+	var output = '';
+	for (var n = 0; n < input.length; n++){
+		var c = input.charCodeAt(n);
+		if (c < 128) {
+			output += input[n];
+		} else if(c > 127) {
+			output += ("&#" + c + ";");
+		}
+	}
+	return output;
+};

data/app/assets/javascripts/method_draw_embed.js

@@ -0,0 +1,76 @@
+//= require method-draw-js/src/embedapi
+//= require method_draw/base64
+
+var svgCanvas = svgCanvas || {};
+
+function submitHandler(event) {
+  var id = event.data;
+  svgCanvas[id].getSvgString()(function (data, error) {
+    handleSvgData(data, error, id);
+  });
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
+function attachSubmitHandler(event) {
+  var id = event.data;
+  $("input#" + id).closest("form").on("submit.svgedit_" + id, null, id, submitHandler);
+}
+
+function handleSvgData(data, error, id) {
+  if (error) {
+    alert('Error: ' + error);
+  }
+  else {
+    var input = $("input#" + id);
+    var form = input.closest("form");
+    input.attr("value", method_draw_encode64("<?xml version=\"1.0\"?>\n" + data));
+    form.off("submit.svgedit_" + id);
+    form.one("submit.svgedit_" + id, null, id, attachSubmitHandler);
+    form.submit();
+  }
+}
+
+function initEmbed(id, value, hide_menu, hide_image_tool, url) {
+  var frame = document.getElementById("svgedit_" + id);
+  svgCanvas[id] = new embedded_svg_edit(frame);
+
+  var doc = frame.contentDocument;
+  if (!doc) {
+    doc = frame.contentWindow.document;
+  }
+
+  if (hide_menu) {
+    var mainButton = doc.getElementById('main_button');
+    mainButton.parentNode.removeChild(mainButton);
+    var toolsTop = doc.getElementById('tools_top');
+    toolsTop.style.left = '5px';
+  }
+
+  if (hide_image_tool) {
+    var imageTool = doc.getElementById('tool_image');
+    imageTool.parentNode.removeChild(imageTool);
+  }
+
+  if (!url) {
+    svgCanvas[id].setSvgString(method_draw_decode64(value));
+  }
+
+  $("input#" + id).closest("form").on("submit.svgedit_" + id, null, id, submitHandler);
+
+  $("#svgedit_" + id).css('visibility', '');
+}
+
+function attachLoadHandler(id, value, hide_menu, hide_image_tool, url) {
+  var frame = $("#svgedit_" + id);
+  if (frame.attr('src')) {
+    frame.load(function () {
+      initEmbed(id, value, hide_menu, hide_image_tool, url);
+    });
+  }
+  else {
+    setTimeout(function () {
+      attachLoadHandler(id, value, hide_menu, hide_image_tool, url);
+    }, 0);
+  }
+}

data/app/assets/stylesheets/sketchily.css

@@ -0,0 +1,6 @@
+/*
+ *= require_self
+ *= require method-draw-js/jgraduate/css/jPicker
+ *= require method-draw-js/jgraduate/css/jgraduate
+ *= require method-draw-js/method-draw-compiled
+ */

data/app/helpers/method_draw_helper.rb

@@ -0,0 +1,35 @@
+module MethodDrawHelper
+  def method_draw_show(uri, options = {})
+    if options[:bkgd_color] || options[:bkgd_file]
+      require 'nokogiri'
+      doc = Nokogiri::XML(Base64.decode64(uri)) {|xml| xml.noblanks}
+
+      if options[:bkgd_file]
+        data_uri = "data:image/svg+xml;base64,#{Base64.strict_encode64(open(options[:bkgd_file]).read)}"
+        bkgd_file_node = Nokogiri::XML::Node.new 'g', doc
+        Nokogiri::XML::Builder.with(bkgd_file_node) do |xml|
+          xml.title 'Background Image Layer'
+          xml.image :id => 'background_image', :width => '100%', :height => '100%', :preserveAspectRatio => 'xMinYMin', 'xlink:href' => data_uri
+        end
+        doc.root.add_namespace "xlink", "http://www.w3.org/1999/xlink"
+        doc.at('g').before(bkgd_file_node)
+      end
+
+      if options[:bkgd_color]
+        bkgd_color_node = Nokogiri::XML::Node.new 'g', doc
+        Nokogiri::XML::Builder.with(bkgd_color_node) do |xml|
+          xml.title 'Background Color Layer'
+          xml.rect :id => 'background_color', :width => '100%', :height => '100%', :fill => "##{options[:bkgd_color]}"
+        end
+        doc.at('g').before(bkgd_color_node)
+      end
+
+      uri = Base64.strict_encode64(doc.to_xml)
+    end
+
+    "<img src='data:image/svg+xml;base64,#{uri}' #{"width='#{options[:width]}'" if options[:width]} #{"height='#{options[:height]}'" if options[:height]}/>".html_safe
+  end
+
+  alias_method :svg_show, :method_draw_show
+end
+

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

@@ -0,0 +1,51 @@
+<% # Clients of this partial must supply the following variables:
+   # id
+   # value
+   #
+   # Additionally, they may override the following variables:
+   width ||= "750px"
+   height ||= "650px"
+   bkgd_color ||= "FFF"
+   bkgd_url ||= ""
+   canvas_width ||= 640
+   canvas_height ||= 480
+   canvas_expansion ||= 3
+   hide_rulers ||= false
+   hide_menu ||= false
+   hide_image_tool ||= false
+   show_layers ||= false
+   url ||= nil
+   extensions ||= nil
+%>
+
+<% iframe_src = URI.parse("/assets/method-draw-js/index.html")
+
+   query_hash = {:dimensions => [canvas_width, canvas_height].join(','),
+                 :bkgd_color => bkgd_color,
+                 :bkgd_url => bkgd_url,
+                 :canvas_expansion => canvas_expansion,
+                 :showRulers => !hide_rulers,
+                 :showlayers => show_layers}
+   query_hash[:url] = url if url
+   query_hash[:source] = nil unless url
+   query_hash[:extensions] = extensions if extensions
+
+   iframe_src.query = query_hash.map{|k,v| "#{k}=#{v}"}.join('&') %>
+
+<%= javascript_include_tag "method_draw_embed" %>
+
+<%= content_tag(:iframe,
+                "svg-edit",
+                :src => iframe_src.to_s.html_safe,
+                :width => width,
+                :height => height,
+                :id => "svgedit_#{id}",
+                :style => "visibility: hidden") %>
+
+<script type="text/javascript">
+  attachLoadHandler("<%= id %>",
+                    "<%= value.try(:squish) %>",
+                    <%= hide_menu %>,
+                    <%= hide_image_tool %>,
+                    "<%= url %>");
+</script>