diff --git a/editor/svg-editor.css b/editor/svg-editor.css index 81c650b0..bf89ec9e 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -938,6 +938,16 @@ span.zoom_tool { z-index: 6; } +#save_output_btns { + display: none; + text-align: left; +} + +#save_output_btns p { + margin: .5em 1.5em; + display: inline-block; +} + #bg_blocks { overflow: auto; margin-left: 30px; diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 26af6000..f3bc2d87 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -562,6 +562,10 @@ script type="text/javascript" src="locale/locale.min.js"> +
+

Copy the contents of this box into a text editor, then save the file with a .svg extension.

+ +
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 7777b9d3..ca158ecf 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -540,6 +540,15 @@ // Opens the SVG in new window, with warning about Mozilla bug #308590 when applicable + var ua = navigator.userAgent; + + // Chrome 5 (and 6?) don't allow saving, show source instead ( http://code.google.com/p/chromium/issues/detail?id=46735 ) + // IE9 doesn't allow standalone Data URLs ( https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves ) + if((~ua.indexOf('Chrome') && $.browser.version >= 533) || ~ua.indexOf('MSIE')) { + showSourceEditor(0,true); + return; + } + var win = window.open("data:image/svg+xml;base64," + Utils.encode64(svg)); // Alert will only appear the first time saved OR the first time the bug is encountered @@ -549,7 +558,7 @@ var note = uiStrings.saveFromBrowser.replace('%s', 'SVG'); // Check if FF and has - if(navigator.userAgent.indexOf('Gecko/') !== -1) { + if(ua.indexOf('Gecko/') !== -1) { if(svg.indexOf('\ - \ - \ - \ - ', 'text/xml'); - - var boxgrad = svgdocbox.getElementById('gradbox_'); - boxgrad.id = 'gradbox_fill'; - svgdocbox.documentElement.setAttribute('width',16.5); - $('#fill_color').append( document.importNode(svgdocbox.documentElement,true) ); - boxgrad.id = 'gradbox_stroke'; - svgdocbox.documentElement.setAttribute('width',16.5); - $('#stroke_color').append( document.importNode(svgdocbox.documentElement,true) ); - $('#stroke_color rect').attr({ - 'fill': '#' + curConfig.initStroke.color, - 'opacity': curConfig.initStroke.opacity - }); - - $('#stroke_width').val(curConfig.initStroke.width); - $('#group_opacity').val(curConfig.initOpacity * 100); - - // Use this SVG elem to test vectorEffect support - var test_el = svgdocbox.documentElement.firstChild; - test_el.setAttribute('style','vector-effect:non-scaling-stroke'); - var supportsNonSS = (test_el.style.vectorEffect == 'non-scaling-stroke'); - test_el.removeAttribute('style'); - - // Use this to test support for blur element. Seems to work to test support in Webkit - var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur'); - if(typeof blur_test.stdDeviationX === "undefined") { - $('#tool_blur').hide(); + if(window.DOMParser) { + // set up gradients to be used for the buttons + var svgdocbox = new DOMParser().parseFromString( + '\ + \ + \ + \ + ', 'text/xml'); + var docElem = svgdocbox.documentElement; + + + var boxgrad = svgdocbox.getElementById('gradbox_'); + boxgrad.id = 'gradbox_fill'; + docElem.setAttribute('width',16.5); + $('#fill_color').append( document.importNode(docElem,true) ); + + boxgrad.id = 'gradbox_stroke'; + docElem.setAttribute('width',16.5); + $('#stroke_color').append( document.importNode(docElem,true) ); + $('#stroke_color rect').attr({ + 'fill': '#' + curConfig.initStroke.color, + 'opacity': curConfig.initStroke.opacity + }); + + $('#stroke_width').val(curConfig.initStroke.width); + $('#group_opacity').val(curConfig.initOpacity * 100); + + // Use this SVG elem to test vectorEffect support + var test_el = docElem.firstChild; + test_el.setAttribute('style','vector-effect:non-scaling-stroke'); + var supportsNonSS = (test_el.style.vectorEffect == 'non-scaling-stroke'); + test_el.removeAttribute('style'); + + // Use this to test support for blur element. Seems to work to test support in Webkit + var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur'); + if(typeof blur_test.stdDeviationX === "undefined") { + $('#tool_blur').hide(); + } + $(blur_test).remove(); + } else { + var svgns = "http://www.w3.org/2000/svg"; + var svgdocbox = document.createElementNS(svgns, 'svg'); + var rect = svgCanvas.addSvgElementFromJson({ + element: 'rect', + attr: { + width: '100%', + height: '100%', + fill: '#' + curConfig.initFill.color, + opacity: curConfig.initFill.opacity + } + }); + svgdocbox.appendChild(rect); + var linearGradient = svgCanvas.addSvgElementFromJson({ + element: 'linearGradient', + attr: { + id: 'gradbox_' + } + }); + svgdocbox.appendChild(linearGradient); + var docElem = svgdocbox; } - $(blur_test).remove(); + + // Test for embedImage support (use timeout to not interfere with page load) setTimeout(function() { @@ -3563,6 +3603,7 @@ {sel:'#tool_bold', fn: clickBold, evt: 'mousedown'}, {sel:'#tool_italic', fn: clickItalic, evt: 'mousedown'}, {sel:'#sidepanel_handle', fn: toggleSidePanel, key: ['X']}, + {sel:'#copy_save_done', fn: cancelOverlays, evt: 'click'}, // Shortcuts not associated with buttons {key: 'shift+left', fn: function(){rotateSelected(0)}}, @@ -4070,7 +4111,7 @@ Editor.addExtension = function() { var args = arguments; $(function() { - svgCanvas.addExtension.apply(this, args); + if(svgCanvas) svgCanvas.addExtension.apply(this, args); }); }; diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 325c0ffb..fe6dd3a0 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -422,7 +422,7 @@ var Utils = this.Utils = function() { // TODO: declare the variables and set them as null, then move this setup stuff to // an initialization function - probably just use clear() - + console.log('r'); var canvas = this, // Namespace constants @@ -447,23 +447,30 @@ var canvas = this, svgdoc = container.ownerDocument, // Array with width/height of canvas - dimensions = curConfig.dimensions, + dimensions = curConfig.dimensions; - // Create Root SVG element. This is a container for the document being edited, not the document itself. - svgroot = svgdoc.importNode(Utils.text2xml('' + - '' + - '' + - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - '').documentElement, true); - + if($.browser.msie) { + var svgroot = document.createElementNS(svgns, 'svg'); + svgroot.id = 'svgroot'; + svgroot.setAttribute('width', dimensions[0]); + svgroot.setAttribute('height', dimensions[1]); + + } else { + // Create Root SVG element. This is a container for the document being edited, not the document itself. + var svgroot = svgdoc.importNode(Utils.text2xml('' + + '' + + '' + + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + '').documentElement, true); + } container.appendChild(svgroot); @@ -2039,9 +2046,13 @@ var getIntersectionList = this.getIntersectionList = function(rect) { if(!rect) { var rubberBBox = rubberBox.getBBox(); + var bb = {}; $.each(rubberBBox, function(key, val) { - rubberBBox[key] = val / current_zoom; + // Can't set values to a real BBox object, so make a fake one + bb[key] = val / current_zoom; }); + rubberBBox = bb; + } else { var rubberBBox = rect; } @@ -4221,6 +4232,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) { var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ), mouse_x = pt.x * current_zoom, mouse_y = pt.y * current_zoom; + + if($.browser.msie) { + mouse_x = evt.offsetX - svgCanvas.contentW*current_zoom; + mouse_y = evt.offsetY - svgCanvas.contentH*current_zoom; + } + evt.preventDefault(); if(right_click) { @@ -4298,6 +4315,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) { } start_x *= current_zoom; start_y *= current_zoom; + console.log('p',[evt.pageX, evt.pageY]); + console.log('c',[evt.clientX, evt.clientY]); + console.log('o',[evt.offsetX, evt.offsetY]); + console.log('s',[start_x, start_y]); + assignAttributes(rubberBox, { 'x': start_x, 'y': start_y, @@ -4537,6 +4559,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) { mouse_y = pt.y * current_zoom, shape = getElem(getId()); + if($.browser.msie) { + mouse_x = evt.offsetX - svgCanvas.contentW*current_zoom; + mouse_y = evt.offsetY - svgCanvas.contentH*current_zoom; + } + x = mouse_x / current_zoom; y = mouse_y / current_zoom;