From 8ae1002d581bded33fa00900f8fdd5b3cbcd1168 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Mon, 13 Aug 2012 22:21:56 -0500 Subject: [PATCH] loading an image now updates canvas properties --- editor/sanitize.js | 4 ++-- editor/svg-editor.js | 14 +++++------ editor/svgcanvas.js | 56 ++++++++++++++++++++++++++++++++++++++------ 3 files changed, 58 insertions(+), 16 deletions(-) diff --git a/editor/sanitize.js b/editor/sanitize.js index 5924a59..7657cc8 100644 --- a/editor/sanitize.js +++ b/editor/sanitize.js @@ -58,7 +58,7 @@ var svgWhiteList_ = { "foreignObject": ["class", "font-size", "height", "id", "opacity", "requiredFeatures", "style", "transform", "width", "x", "y"], "g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "font-family", "font-size", "font-style", "font-weight", "text-anchor"], "image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"], - "line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"], + "line": ["shape-rendering", "class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"], "linearGradient": ["class", "id", "gradientTransform", "gradientUnits", "requiredFeatures", "spreadMethod", "systemLanguage", "x1", "x2", "xlink:href", "y1", "y2"], "marker": ["id", "class", "markerHeight", "markerUnits", "markerWidth", "orient", "preserveAspectRatio", "refX", "refY", "systemLanguage", "viewBox"], "mask": ["class", "height", "id", "maskContentUnits", "maskUnits", "width", "x", "y"], @@ -68,7 +68,7 @@ var svgWhiteList_ = { "polygon": ["class", "clip-path", "clip-rule", "id", "fill", "fill-opacity", "fill-rule", "filter", "id", "class", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "points", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], "polyline": ["class", "clip-path", "clip-rule", "id", "fill", "fill-opacity", "fill-rule", "filter", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "points", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], "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"], + "rect": ["shape-rendering", "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", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xmlns", "xmlns:se", "xmlns:xlink", "y"], "switch": ["class", "id", "requiredFeatures", "systemLanguage"], diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 421c806..5b70fe0 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -2838,13 +2838,13 @@ if (type == "stroke") cur = curConfig['initStroke']; if (type == "fill") cur = curConfig['initFill']; if (type == "canvas" && background) { - var rgb = background.getAttribute("fill").match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); - if (rgb) { - var hex = ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + - ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + - ("0" + parseInt(rgb[3],10).toString(16)).slice(-2); - cur = {color: hex, opacity: 1} - } + var rgb = background.getAttribute("fill").match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); + if (rgb) { + var hex = ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2); + cur = {color: hex, opacity: 1} + } } // set up gradients to be used for the buttons diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 5c6d8c7..f630814 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -5920,11 +5920,9 @@ this.setSvgString = function(xmlString) { } }); - // For Firefox: Put all paint elems in defs - if(svgedit.browser.isGecko()) { - content.find('linearGradient, radialGradient, pattern').appendTo(findDefs()); - } - + // Put all paint elems in defs + + content.find('linearGradient, radialGradient, pattern').appendTo(findDefs()); // Set ref element for elements @@ -5984,13 +5982,27 @@ this.setSvgString = function(xmlString) { // Just in case negative numbers are given or // result from the percs calculation - if(attrs.width <= 0) attrs.width = 100; - if(attrs.height <= 0) attrs.height = 100; + if(attrs.width <= 0) attrs.width = 200; + if(attrs.height <= 0) attrs.height = 200; content.attr(attrs); this.contentW = attrs['width']; this.contentH = attrs['height']; + $("#canvas_width").val(this.contentW) + $("#canvas_height").val(this.contentH) + var background = $("#canvas_background") + if (background.length) { + var opacity = background.attr("fill-opacity") + opacity = opacity ? parseInt(opacity)*100 : 100 + fill = this.getPaint(background.attr("fill"), opacity, "canvas") + svgEditor.paintBox.canvas.setPaint(fill) + } + else { + fill = this.getPaint("none", 100, "canvas") + svgEditor.paintBox.canvas.setPaint(fill) + } + batchCmd.addSubCommand(new InsertElementCommand(svgcontent)); // update root to the correct size var changes = content.attr(["width", "height"]); @@ -6015,6 +6027,36 @@ this.setSvgString = function(xmlString) { return true; }; + +this.getPaint = function(color, opac, type) { + // update the editor's fill paint + var opts = null; + if (color.indexOf("url(#") === 0) { + var refElem = svgCanvas.getRefElem(color); + if(refElem) { + refElem = refElem.cloneNode(true); + } else { + refElem = $("#" + type + "_color defs *")[0]; + } + + opts = { alpha: opac }; + opts[refElem.tagName] = refElem; + } + else if (color.indexOf("#") === 0) { + opts = { + alpha: opac, + solidColor: color.substr(1) + }; + } + else { + opts = { + alpha: opac, + solidColor: 'none' + }; + } + return new $.jGraduate.Paint(opts); +}; + // Function: importSvgString // This function imports the input SVG XML as a in the , then adds a // to the current layer.