sketchily 1.3.0 → 1.4.0

data/README.md

@@ -59,8 +59,8 @@ 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)
-- `bkgd_url` canvas background raster image url (not saved with image)
+- `bkgd_color` canvas background color (3 or 6 hex digit html color format; not saved with image; see sketchily_show)
+- `bkgd_url` canvas background image url (not saved with image; see bkgd_file option for sketchily_show)
 
 - `canvas_width` initial canvas width
 - `canvas_height` initial canvas height
@@ -68,8 +68,9 @@ Currently available options are:
 
 - `hide_rulers` true if you want to hide the canvas rulers
 - `hide_menu` true if you want svg-edit's menu to be hidden
-- `hide_image_tool` true if you want to hide the image tool button
-- `hide_hyperlink_tool` true if you want to hide the hyperlink tool button
+- `hide_image_tool` true if you want to hide the `image tool` button
+
+- `show_hyperlink_tool` true if you want to show the `hyperlink tool` button (see explanation below)
 
 - `show_layers` (true if you want the layer selector to display automatically when the editor is loaded)
 
@@ -81,6 +82,10 @@ Currently available options are:
 
 - 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 sketchily_show.
+The sketchily_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.
+
 Sketchily 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.
@@ -103,8 +108,11 @@ Example usage (haml):
 
 Currently available options are:
 
-- `width` (width of resulting image object)
-- `height` (height of resulting image object)
+- `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.
 

data/app/helpers/sketchily_helper.rb

@@ -1,5 +1,31 @@
 module SketchilyHelper
   def sketchily_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.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
+print doc.to_xml
+      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
 

data/app/helpers/sketchily_helper.rb~

@@ -0,0 +1,36 @@
+module SketchilyHelper
+  def sketchily_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;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.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
+print doc.to_xml
+      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
+
+  def svg_show(uri, options = {})
+    sketchily_show(uri, options)
+  end
+end
+

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

@@ -13,7 +13,7 @@
    hide_rulers ||= false
    hide_menu ||= false
    hide_image_tool ||= false
-   hide_hyperlink_tool ||= false
+   show_hyperlink_tool ||= false
    show_layers ||= false
    url ||= nil
 %>
@@ -47,7 +47,7 @@
                          :value => value,
                          :hide_menu => hide_menu,
                          :hide_image_tool => hide_image_tool,
-                         :hide_hyperlink_tool => hide_hyperlink_tool,
+                         :show_hyperlink_tool => show_hyperlink_tool,
                          :url => url} %>
 </script>
 

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

@@ -5,7 +5,7 @@
    # Additionally, they may override the following variables:
    width ||= "750px"
    height ||= "650px"
-   bkgd_color ||= "FFFFFF"
+   bkgd_color ||= "FFF"
    bkgd_url ||= ""
    canvas_width ||= 640
    canvas_height ||= 480
@@ -13,7 +13,7 @@
    hide_rulers ||= false
    hide_menu ||= false
    hide_image_tool ||= false
-   hide_hyperlink_tool ||= false
+   show_hyperlink_tool ||= false
    show_layers ||= false
    url ||= nil
 %>
@@ -46,8 +46,8 @@
              :locals => {:id => id,
                          :value => value,
                          :hide_menu => hide_menu,
+                         :show_hyperlink_tool => show_hyperlink_tool,
                          :hide_image_tool => hide_image_tool,
-                         :hide_hyperlink_tool => hide_hyperlink_tool,
                          :url => url} %>
 </script>
 

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

@@ -5,7 +5,7 @@
    # value
    # hide_menu
    # hide_image_tool
-   # hide_hyperlink_tool 
+   # show_hyperlink_tool
    # url %>
 
 var svgCanvas_<%= id %> = null;
@@ -48,13 +48,13 @@ function initEmbed_<%= id %>() {
     var toolsTop = doc.getElementById('tools_top');
     toolsTop.style.left = '5px';
   <% end %>
-  
+
   <% if hide_image_tool %>
     var imageTool = doc.getElementById('tool_image');
     imageTool.parentNode.removeChild(imageTool);
   <% end %>
 
-  <% if hide_hyperlink_tool %>
+  <% unless show_hyperlink_tool %>
     var hyperlinkTool = doc.getElementById('tool_make_link');
     hyperlinkTool.parentNode.removeChild(hyperlinkTool);
   <% end %>

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

@@ -5,7 +5,7 @@
    # value
    # hide_menu
    # hide_image_tool
-   # hide_hyperlink_tool 
+   # show_hyperlink_tool
    # url %>
 
 var svgCanvas_<%= id %> = null;
@@ -48,19 +48,21 @@ function initEmbed_<%= id %>() {
     var toolsTop = doc.getElementById('tools_top');
     toolsTop.style.left = '5px';
   <% end %>
+
+  <% unless show_hyperlink_tool %>
+    var hyperlinkTool = doc.getElementById('tool_make_link');
+    hyperlinkTool.parentNode.removeChild(hyperlinkTool);
+  <% end %>
   
   <% if hide_image_tool %>
     var imageTool = doc.getElementById('tool_image');
     imageTool.parentNode.removeChild(imageTool);
   <% end %>
 
-  <% if hide_hyperlink_tool %>
-    var hyperlinkTool = doc.getElementById('tool_make_link');
-    hyperlinkTool.parentNode.removeChild(hyperlinkTool);
+  <% unless url %>
+    svgCanvas_<%= id %>.setSvgString(sketchily_decode64("<%= value.try(:squish) %>"));
   <% end %>
 
-  svgCanvas_<%= id %>.setSvgString(sketchily_decode64("<%= value.try(:squish) %>"));
-
   attachSubmitHandler_<%= id %>();
 }
 

data/lib/sketchily/version.rb

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "1.3.0"
+  VERSION = "1.4.0"
 end

data/lib/sketchily/version.rb~

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "1.2.0"
+  VERSION = "1.3.0"
 end

data/lib/sketchily.rb

@@ -5,7 +5,7 @@ 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)
 
-  SKETCHILY_OPTIONS = [:width, :height, :bkgd_color, :bkgd_url, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :hide_image_tool, :hide_hyperlink_tool, :show_layers, :url]
+  SKETCHILY_OPTIONS = [:width, :height, :bkgd_color, :bkgd_url, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :hide_image_tool, :show_hyperlink_tool, :show_layers, :url]
   TAG_OPTIONS = [:id, :value, :index]
   OPTIONS = SKETCHILY_OPTIONS + TAG_OPTIONS
 

data/lib/sketchily.rb~

@@ -5,7 +5,7 @@ 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)
 
-  SKETCHILY_OPTIONS = [:width, :height, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :hide_image_tool, :hide_hyperlink_tool, :show_layers, :url]
+  SKETCHILY_OPTIONS = [:width, :height, :bkgd_color, :bkgd_url, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :hide_menu, :show_hyperlink_tool, :hide_image_tool, :show_layers, :url]
   TAG_OPTIONS = [:id, :value, :index]
   OPTIONS = SKETCHILY_OPTIONS + TAG_OPTIONS