github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made save option cause soure editor to appear in Chrome 5+ and IE9, started IE9 support

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1679 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Alexis Deveria
2010-08-23 20:16:27 +00:00
parent 6179ea465b
commit 631b2b4054
4 changed files with 139 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
editor/svg-editor.css
View File

@@ -938,6 +938,16 @@ span.zoom_tool {
z-index: 6; z-index: 6;
} }
#save_output_btns {
display: none;
text-align: left;
}
#save_output_btns p {
margin: .5em 1.5em;
display: inline-block;
}
#bg_blocks { #bg_blocks {
overflow: auto; overflow: auto;
margin-left: 30px; margin-left: 30px;

4
editor/svg-editor.html
View File

@@ -562,6 +562,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<button id="tool_source_save">Apply Changes</button> <button id="tool_source_save">Apply Changes</button>
<button id="tool_source_cancel">Cancel</button> <button id="tool_source_cancel">Cancel</button>
</div> </div>
<div id="save_output_btns">
<p id="copy_save_note">Copy the contents of this box into a text editor, then save the file with a .svg extension.</p>
<button id="copy_save_done">Done</button>
</div>
<form> <form>
<textarea id="svg_source_textarea" spellcheck="false"></textarea> <textarea id="svg_source_textarea" spellcheck="false"></textarea>
</form> </form>

119
editor/svg-editor.js
View File

@@ -540,6 +540,15 @@
// Opens the SVG in new window, with warning about Mozilla bug #308590 when applicable // 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)); 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 // 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'); var note = uiStrings.saveFromBrowser.replace('%s', 'SVG');
// Check if FF and has <defs/> // Check if FF and has <defs/>
if(navigator.userAgent.indexOf('Gecko/') !== -1) { if(ua.indexOf('Gecko/') !== -1) {
if(svg.indexOf('<defs') !== -1) { if(svg.indexOf('<defs') !== -1) {
note += "\n\n" + uiStrings.defsFailOnSave; note += "\n\n" + uiStrings.defsFailOnSave;
$.pref('save_notice_done', 'all'); $.pref('save_notice_done', 'all');
@@ -2448,9 +2457,13 @@
$('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : ""); $('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : "");
} }
var showSourceEditor = function(){ var showSourceEditor = function(e, forSaving){
if (editingsource) return; if (editingsource) return;
editingsource = true; editingsource = true;
$('#save_output_btns').toggle(!!forSaving);
$('#tool_source_back').toggle(!forSaving);
var str = svgCanvas.getSvgString(); var str = svgCanvas.getSvgString();
$('#svg_source_textarea').val(str); $('#svg_source_textarea').val(str);
$('#svg_source_editor').fadeIn(); $('#svg_source_editor').fadeIn();
@@ -3089,44 +3102,71 @@
operaRepaint(); operaRepaint();
}; };
// set up gradients to be used for the buttons
var svgdocbox = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%"\
fill="#' + curConfig.initFill.color + '" opacity="' + curConfig.initFill.opacity + '"/>\
<linearGradient id="gradbox_">\
<stop stop-color="#000" offset="0.0"/>\
<stop stop-color="#FF0000" offset="1.0"/>\
</linearGradient></svg>', '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'; if(window.DOMParser) {
svgdocbox.documentElement.setAttribute('width',16.5); // set up gradients to be used for the buttons
$('#stroke_color').append( document.importNode(svgdocbox.documentElement,true) ); var svgdocbox = new DOMParser().parseFromString(
$('#stroke_color rect').attr({ '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%"\
'fill': '#' + curConfig.initStroke.color, fill="#' + curConfig.initFill.color + '" opacity="' + curConfig.initFill.opacity + '"/>\
'opacity': curConfig.initStroke.opacity <linearGradient id="gradbox_">\
}); <stop stop-color="#000" offset="0.0"/>\
<stop stop-color="#FF0000" offset="1.0"/>\
$('#stroke_width').val(curConfig.initStroke.width); </linearGradient></svg>', 'text/xml');
$('#group_opacity').val(curConfig.initOpacity * 100); var docElem = svgdocbox.documentElement;
// Use this SVG elem to test vectorEffect support
var test_el = svgdocbox.documentElement.firstChild; var boxgrad = svgdocbox.getElementById('gradbox_');
test_el.setAttribute('style','vector-effect:non-scaling-stroke'); boxgrad.id = 'gradbox_fill';
var supportsNonSS = (test_el.style.vectorEffect == 'non-scaling-stroke'); docElem.setAttribute('width',16.5);
test_el.removeAttribute('style'); $('#fill_color').append( document.importNode(docElem,true) );
// Use this to test support for blur element. Seems to work to test support in Webkit boxgrad.id = 'gradbox_stroke';
var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur'); docElem.setAttribute('width',16.5);
if(typeof blur_test.stdDeviationX === "undefined") { $('#stroke_color').append( document.importNode(docElem,true) );
$('#tool_blur').hide(); $('#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) // Test for embedImage support (use timeout to not interfere with page load)
setTimeout(function() { setTimeout(function() {
@@ -3563,6 +3603,7 @@
{sel:'#tool_bold', fn: clickBold, evt: 'mousedown'}, {sel:'#tool_bold', fn: clickBold, evt: 'mousedown'},
{sel:'#tool_italic', fn: clickItalic, evt: 'mousedown'}, {sel:'#tool_italic', fn: clickItalic, evt: 'mousedown'},
{sel:'#sidepanel_handle', fn: toggleSidePanel, key: ['X']}, {sel:'#sidepanel_handle', fn: toggleSidePanel, key: ['X']},
{sel:'#copy_save_done', fn: cancelOverlays, evt: 'click'},
// Shortcuts not associated with buttons // Shortcuts not associated with buttons
{key: 'shift+left', fn: function(){rotateSelected(0)}}, {key: 'shift+left', fn: function(){rotateSelected(0)}},
@@ -4070,7 +4111,7 @@
Editor.addExtension = function() { Editor.addExtension = function() {
var args = arguments; var args = arguments;
$(function() { $(function() {
svgCanvas.addExtension.apply(this, args); if(svgCanvas) svgCanvas.addExtension.apply(this, args);
}); });
}; };

63
editor/svgcanvas.js
View File

@@ -422,7 +422,7 @@ var Utils = this.Utils = function() {
// TODO: declare the variables and set them as null, then move this setup stuff to // TODO: declare the variables and set them as null, then move this setup stuff to
// an initialization function - probably just use clear() // an initialization function - probably just use clear()
console.log('r');
var canvas = this, var canvas = this,
// Namespace constants // Namespace constants
@@ -447,23 +447,30 @@ var canvas = this,
svgdoc = container.ownerDocument, svgdoc = container.ownerDocument,
// Array with width/height of canvas // 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. if($.browser.msie) {
svgroot = svgdoc.importNode(Utils.text2xml('<svg id="svgroot" xmlns="' + svgns + '" xlinkns="' + xlinkns + '" ' + var svgroot = document.createElementNS(svgns, 'svg');
'width="' + dimensions[0] + '" height="' + dimensions[1] + '" x="' + dimensions[0] + '" y="' + dimensions[1] + '" overflow="visible">' + svgroot.id = 'svgroot';
'<defs>' + svgroot.setAttribute('width', dimensions[0]);
'<filter id="canvashadow" filterUnits="objectBoundingBox">' + svgroot.setAttribute('height', dimensions[1]);
'<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>'+
'<feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>'+ } else {
'<feMerge>'+ // Create Root SVG element. This is a container for the document being edited, not the document itself.
'<feMergeNode in="offsetBlur"/>'+ var svgroot = svgdoc.importNode(Utils.text2xml('<svg id="svgroot" xmlns="' + svgns + '" xlinkns="' + xlinkns + '" ' +
'<feMergeNode in="SourceGraphic"/>'+ 'width="' + dimensions[0] + '" height="' + dimensions[1] + '" x="' + dimensions[0] + '" y="' + dimensions[1] + '" overflow="visible">' +
'</feMerge>'+ '<defs>' +
'</filter>'+ '<filter id="canvashadow" filterUnits="objectBoundingBox">' +
'</defs>'+ '<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>'+
'</svg>').documentElement, true); '<feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>'+
'<feMerge>'+
'<feMergeNode in="offsetBlur"/>'+
'<feMergeNode in="SourceGraphic"/>'+
'</feMerge>'+
'</filter>'+
'</defs>'+
'</svg>').documentElement, true);
}
container.appendChild(svgroot); container.appendChild(svgroot);
@@ -2039,9 +2046,13 @@ var getIntersectionList = this.getIntersectionList = function(rect) {
if(!rect) { if(!rect) {
var rubberBBox = rubberBox.getBBox(); var rubberBBox = rubberBox.getBBox();
var bb = {};
$.each(rubberBBox, function(key, val) { $.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 { } else {
var rubberBBox = rect; var rubberBBox = rect;
} }
@@ -4221,6 +4232,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ), var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ),
mouse_x = pt.x * current_zoom, mouse_x = pt.x * current_zoom,
mouse_y = pt.y * 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(); evt.preventDefault();
if(right_click) { if(right_click) {
@@ -4298,6 +4315,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
} }
start_x *= current_zoom; start_x *= current_zoom;
start_y *= 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, { assignAttributes(rubberBox, {
'x': start_x, 'x': start_x,
'y': start_y, 'y': start_y,
@@ -4537,6 +4559,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
mouse_y = pt.y * current_zoom, mouse_y = pt.y * current_zoom,
shape = getElem(getId()); 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; x = mouse_x / current_zoom;
y = mouse_y / current_zoom; y = mouse_y / current_zoom;