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;
}
#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;

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_cancel">Cancel</button>
</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>
<textarea id="svg_source_textarea" spellcheck="false"></textarea>
</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
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 <defs/>
if(navigator.userAgent.indexOf('Gecko/') !== -1) {
if(ua.indexOf('Gecko/') !== -1) {
if(svg.indexOf('<defs') !== -1) {
note += "\n\n" + uiStrings.defsFailOnSave;
$.pref('save_notice_done', 'all');
@@ -2448,9 +2457,13 @@
$('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : "");
}
var showSourceEditor = function(){
var showSourceEditor = function(e, forSaving){
if (editingsource) return;
editingsource = true;
$('#save_output_btns').toggle(!!forSaving);
$('#tool_source_back').toggle(!forSaving);
var str = svgCanvas.getSvgString();
$('#svg_source_textarea').val(str);
$('#svg_source_editor').fadeIn();
@@ -3089,44 +3102,71 @@
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';
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(
'<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 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);
});
};

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
// 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('<svg id="svgroot" xmlns="' + svgns + '" xlinkns="' + xlinkns + '" ' +
'width="' + dimensions[0] + '" height="' + dimensions[1] + '" x="' + dimensions[0] + '" y="' + dimensions[1] + '" overflow="visible">' +
'<defs>' +
'<filter id="canvashadow" filterUnits="objectBoundingBox">' +
'<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>'+
'<feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>'+
'<feMerge>'+
'<feMergeNode in="offsetBlur"/>'+
'<feMergeNode in="SourceGraphic"/>'+
'</feMerge>'+
'</filter>'+
'</defs>'+
'</svg>').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('<svg id="svgroot" xmlns="' + svgns + '" xlinkns="' + xlinkns + '" ' +
'width="' + dimensions[0] + '" height="' + dimensions[1] + '" x="' + dimensions[0] + '" y="' + dimensions[1] + '" overflow="visible">' +
'<defs>' +
'<filter id="canvashadow" filterUnits="objectBoundingBox">' +
'<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>'+
'<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);
@@ -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;