From 956d523a4a1222fc99d6a80a87232ee8ef524301 Mon Sep 17 00:00:00 2001 From: Jacques Distler Date: Sat, 20 Feb 2010 23:54:20 -0600 Subject: [PATCH] Change default line thickness The default stroke-width on various SVG elements is now 2 (rather than 5). Also, sync with latest SVG-Edit. --- public/svg-edit/clipart/moon.svg | 13 ++ public/svg-edit/clipart/star.svg | 4 + public/svg-edit/clipart/sun.svg | 3 + .../svg-edit/editor/images/svg_edit_icons.svg | 108 ++------------ public/svg-edit/editor/locale/lang.en.js | 1 + public/svg-edit/editor/svg-editor.css | 4 +- public/svg-edit/editor/svg-editor.html | 9 +- public/svg-edit/editor/svg-editor.js | 21 ++- public/svg-edit/editor/svgcanvas.js | 134 +++++++++++++++++- 9 files changed, 194 insertions(+), 103 deletions(-) create mode 100644 public/svg-edit/clipart/moon.svg create mode 100644 public/svg-edit/clipart/star.svg create mode 100644 public/svg-edit/clipart/sun.svg diff --git a/public/svg-edit/clipart/moon.svg b/public/svg-edit/clipart/moon.svg new file mode 100644 index 00000000..d5caac04 --- /dev/null +++ b/public/svg-edit/clipart/moon.svg @@ -0,0 +1,13 @@ + + + + Layer 1 + + + + + + + + + diff --git a/public/svg-edit/clipart/star.svg b/public/svg-edit/clipart/star.svg new file mode 100644 index 00000000..c5aa58a1 --- /dev/null +++ b/public/svg-edit/clipart/star.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/svg-edit/clipart/sun.svg b/public/svg-edit/clipart/sun.svg new file mode 100644 index 00000000..df2f5b77 --- /dev/null +++ b/public/svg-edit/clipart/sun.svg @@ -0,0 +1,3 @@ + + +image/svg+xml diff --git a/public/svg-edit/editor/images/svg_edit_icons.svg b/public/svg-edit/editor/images/svg_edit_icons.svg index 713e707e..00a0ffde 100644 --- a/public/svg-edit/editor/images/svg_edit_icons.svg +++ b/public/svg-edit/editor/images/svg_edit_icons.svg @@ -1,4 +1,4 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -385,6 +292,19 @@ + + + + + + + + + + + + + diff --git a/public/svg-edit/editor/locale/lang.en.js b/public/svg-edit/editor/locale/lang.en.js index 397da0a1..cbc68a2a 100644 --- a/public/svg-edit/editor/locale/lang.en.js +++ b/public/svg-edit/editor/locale/lang.en.js @@ -101,6 +101,7 @@ {"id": "tool_fhrect", "title": "Free-Hand Rectangle"}, {"id": "tool_group", "title": "Group Elements"}, {"id": "tool_image", "title": "Image Tool"}, +{"id": "tool_import", "textContent": "Import Image"}, {"id": "tool_italic", "title": "Italic Text"}, {"id": "tool_line", "title": "Line Tool"}, {"id": "tool_move_bottom", "title": "Move to Bottom"}, diff --git a/public/svg-edit/editor/svg-editor.css b/public/svg-edit/editor/svg-editor.css index eb570d08..22795574 100644 --- a/public/svg-edit/editor/svg-editor.css +++ b/public/svg-edit/editor/svg-editor.css @@ -568,12 +568,12 @@ span.zoom_tool { -webkit-border-radius: 5px; } -#svg_editor #main_menu li#tool_open { +#svg_editor #main_menu li#tool_open, #svg_editor #main_menu li#tool_import { position: relative; overflow: hidden; } -#tool_open input { +#tool_open input, #tool_import input { -moz-transform: scale(4,2); /* Not entirely necessary, but keeps it nice and big for OS X*/ height: 100%; position: absolute; diff --git a/public/svg-edit/editor/svg-editor.html b/public/svg-edit/editor/svg-editor.html index 01b1b504..9b984376 100644 --- a/public/svg-edit/editor/svg-editor.html +++ b/public/svg-edit/editor/svg-editor.html @@ -100,6 +100,13 @@ script type="text/javascript" src="locale/locale.min.js"> Open Image [O] + +
  • Save Image [S] @@ -419,7 +426,7 @@ script type="text/javascript" src="locale/locale.min.js">
    100 %
    - + ').change(function() { + $('#main_menu').hide(); + if(this.files.length==1) { + var reader = new FileReader(); + reader.onloadend = function(e) { + svgCanvas.importSvgString(e.target.result); + updateCanvas(); + }; + reader.readAsText(this.files[0]); + } + }); + $("#tool_import").show().prepend(inp2); } @@ -2764,7 +2780,7 @@ function svg_edit_setup() { updateCanvas(true); }); -// var revnums = "svg-editor.js ($Rev: 1414 $) "; +// var revnums = "svg-editor.js ($Rev: 1421 $) "; // revnums += svgCanvas.getVersion(); // $('#copyright')[0].setAttribute("title", revnums); return svgCanvas; @@ -2835,6 +2851,7 @@ function svg_edit_setup() { '#tool_clear div,#layer_new':'new_image', '#tool_save div':'save', '#tool_open div div':'open', + '#tool_import div div':'import', '#tool_source':'source', '#tool_docprops > div':'docprops', '#tool_wireframe':'wireframe', diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js index 000d592f..c650aa23 100644 --- a/public/svg-edit/editor/svgcanvas.js +++ b/public/svg-edit/editor/svgcanvas.js @@ -114,7 +114,7 @@ var isOpera = !!window.opera, "radialGradient": ["class", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "id", "r", "requiredFeatures", "spreadMethod", "systemLanguage", "xlink:href"], "rect": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "width", "x", "y"], "stop": ["class", "id", "offset", "requiredFeatures", "stop-color", "stop-opacity", "style", "systemLanguage"], - "svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "markdown", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "transform", "viewBox", "width", "xmlns", "xmlns:se", "xmlns:xlink"], + "svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "markdown", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xmlns", "xmlns:se", "xmlns:xlink", "y"], "switch": ["class", "id", "requiredFeatures", "systemLanguage"], "symbol": ["class", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "preserveAspectRatio", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "viewBox"], "text": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "transform", "x", "xml:space", "y"], @@ -1169,7 +1169,7 @@ function BatchCommand(text) { stroke: "#000000", stroke_paint: null, stroke_opacity: 1, - stroke_width: 5, + stroke_width: 2, stroke_style: 'none', opacity: 1 } @@ -2819,7 +2819,6 @@ function BatchCommand(text) { start_transform = mouse_target.getAttribute("transform"); var tlist = canvas.getTransformList(mouse_target); - switch (current_mode) { case "select": started = true; @@ -5525,6 +5524,9 @@ function BatchCommand(text) { this.open = function() { // Nothing by default, handled by optional widget/extension }; + this.import = function() { + // Nothing by default, handled by optional widget/extension + }; // Function: save // Serializes the current drawing into SVG XML text and returns it to the 'saved' handler. @@ -5681,6 +5683,128 @@ function BatchCommand(text) { return true; }; + // Function: importSvgString + // This function imports the input SVG XML into the current layer in the drawing + // + // Parameters: + // xmlString - The SVG as XML text. + // + // Returns: + // This function returns false if the import was unsuccessful, true otherwise. + + // TODO: create a new layer for the imported SVG + // TODO: properly size the new group + this.importSvgString = function(xmlString) { + try { + // convert string into XML document + var newDoc = Utils.text2xml(xmlString); + // run it through our sanitizer to remove anything we do not support + sanitizeSvg(newDoc.documentElement); + + var batchCmd = new BatchCommand("Change Source"); + + // import new svg document into our document + var importedNode = svgdoc.importNode(newDoc.documentElement, true); + + if (current_layer) { + // add all children of the imported to the we create + var g = svgdoc.createElementNS(svgns, "g"); + while (importedNode.hasChildNodes()) { g.appendChild(importedNode.firstChild); } + current_layer.appendChild(g); + } + + // change image href vals if possible +// $(svgcontent).find('image').each(function() { +// var image = this; +// preventClickDefault(image); +// var val = this.getAttributeNS(xlinkns, "href"); +// if(val.indexOf('data:') === 0) { +// // Check if an SVG-edit data URI +// var m = val.match(/svgedit_url=(.*?);/); +// if(m) { +// var url = decodeURIComponent(m[1]); +// $(new Image()).load(function() { +// image.setAttributeNS(xlinkns,'xlink:href',url); +// }).attr('src',url); +// } +// } +// // Add to encodableImages if it loads +// canvas.embedImage(val); +// }); + + // Fix XML for Opera/Win/Non-EN + if(!support.goodDecimals) { + canvas.fixOperaXML(svgcontent, importedNode); + } + + // recalculate dimensions on the top-level children so that unnecessary transforms + // are removed + var deepdive = function(node) { + if (node.nodeType == 1) { + var children = node.childNodes; + var i = children.length; + while (i--) { deepdive(children.item(i)); } + try { + recalculateDimensions(node); + } catch(e) { console.log(e); } + } + } + deepdive(importedNode); + +// var content = $(svgcontent); + +// var attrs = { +// id: 'svgcontent', +// overflow: 'visible' +// }; + + // determine proper size +// if (content.attr("viewBox")) { +// var vb = content.attr("viewBox").split(' '); +// attrs.width = vb[2]; +// attrs.height = vb[3]; +// } +// // handle content that doesn't have a viewBox +// else { +// $.each(['width', 'height'], function(i, dim) { +// // Set to 100 if not given +// var val = content.attr(dim) || 100; +// +// if((val+'').substr(-1) === "%") { +// // Use user units if percentage given +// attrs[dim] = parseInt(val); +// } else { +// attrs[dim] = convertToNum(dim, val); +// } +// }); +// } + +// content.attr(attrs); + batchCmd.addSubCommand(new InsertElementCommand(svgcontent)); + // update root to the correct size +// var changes = content.attr(["width", "height"]); +// batchCmd.addSubCommand(new ChangeElementCommand(svgroot, changes)); + + // reset zoom + current_zoom = 1; + + // identify layers +// identifyLayers(); + + // reset transform lists + svgTransformLists = {}; + canvas.clearSelection(); + + addCommandToHistory(batchCmd); + call("changed", [svgcontent]); + } catch(e) { + console.log(e); + return false; + } + + return true; + }; + // Layer API Functions // Group: Layers @@ -7475,9 +7599,11 @@ function BatchCommand(text) { $.each(elems, function(i, elem) { var cur_bb = bboxes[i]; + if (cur_bb) { var offset = getOffset(elem); max_x = Math.max(max_x, cur_bb.x + cur_bb.width + offset); max_y = Math.max(max_y, cur_bb.y + cur_bb.height + offset); + } }); full_bb.width = max_x - min_x; @@ -7754,7 +7880,7 @@ function BatchCommand(text) { // Function: getVersion // Returns a string which describes the revision number of SvgCanvas. this.getVersion = function() { - return "svgcanvas.js ($Rev: 1409 $)"; + return "svgcanvas.js ($Rev: 1422 $)"; }; this.setUiStrings = function(strs) {