Fixed some imagelib bugs, added nicer icon, nicer buttons

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1695 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Alexis Deveria
2010-08-31 20:31:58 +00:00
parent 8e721292b8
commit 450cc3df8c
6 changed files with 37 additions and 24 deletions

View File

@@ -90,7 +90,7 @@ svgEditor.addExtension("imagelib", function() {
function showBrowser() { function showBrowser() {
var browser = $('#imgbrowse'); var browser = $('#imgbrowse');
if(!browser.length) { if(!browser.length) {
$('<div id=imgbrowse_holder><div id=imgbrowse>\ $('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>\
</div></div>').insertAfter('#svg_docprops'); </div></div>').insertAfter('#svg_docprops');
browser = $('#imgbrowse'); browser = $('#imgbrowse');
@@ -101,24 +101,27 @@ svgEditor.addExtension("imagelib", function() {
var header = $('<h1>').prependTo(browser).text(all_libs); var header = $('<h1>').prependTo(browser).text(all_libs);
var cancel = $('<input type=button value=Cancel>').appendTo(browser).click(function() { var cancel = $('<button>Cancel</button>').appendTo(browser).click(function() {
$('#imgbrowse_holder').hide(); $('#imgbrowse_holder').hide();
}).css({ }).css({
position: 'absolute', position: 'absolute',
top: 5, top: 5,
right: 5 right: -10
}); });
var back = $('<input type=button value="Show libraries">').appendTo(browser).click(function() { var back = $('<button>Show libraries</button>').appendTo(browser).click(function() {
frame.attr('src', 'about:blank').hide(); frame.attr('src', 'about:blank').hide();
lib_opts.show(); lib_opts.show();
header.text(all_libs); header.text(all_libs);
}).css({ }).css({
position: 'absolute', position: 'absolute',
top: 5, top: 5,
left: 5 left: 10
}); });
cancel.prepend($.getSvgIcon('cancel', true));
back.prepend($.getSvgIcon('tool_imagelib', true));
$.each(img_libs, function(i, opts) { $.each(img_libs, function(i, opts) {
$('<li>').appendTo(lib_opts).text(opts.name).click(function() { $('<li>').appendTo(lib_opts).text(opts.name).click(function() {
frame.attr('src', opts.url).show(); frame.attr('src', opts.url).show();
@@ -175,7 +178,7 @@ svgEditor.addExtension("imagelib", function() {
#imgbrowse > div,\ #imgbrowse > div,\
#imgbrowse > ul {\ #imgbrowse > ul {\
position: absolute;\ position: absolute;\
top: 36px;\ top: 45px;\
left: 10px;\ left: 10px;\
right: 10px;\ right: 10px;\
bottom: 10px;\ bottom: 10px;\

View File

@@ -1,10 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg">
<g id="tool_imagelib"> <g id="tool_imagelib">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> <svg width="201" height="211" xmlns="http://www.w3.org/2000/svg">
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,194.72501l0,0c0,-10.30901 35.8172,-18.666 80,-18.666c44.18298,0 80,8.35699 80,18.666l0,74.66699c0,10.30899 -35.81702,18.66699 -80,18.66699c-44.1828,0 -80,-8.358 -80,-18.66699l0,-74.66699z"/> <g>
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,114.608l0,0c0,-10.309 35.8172,-18.6668 80,-18.6668c44.18298,0 80,8.3578 80,18.6668l0,74.66699c0,10.30901 -35.81702,18.666 -80,18.666c-44.1828,0 -80,-8.35699 -80,-18.666l0,-74.66699z"/> <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,33.6667l0,0c0,-10.3094 35.8172,-18.6667 80,-18.6667c44.18298,0 80,8.3573 80,18.6667l0,74.6663c0,10.31 -35.81702,18.667 -80,18.667c-44.1828,0 -80,-8.357 -80,-18.667l0,-74.6663z"/> <path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
<path id="svg_1" fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m230,32.33334c0,10.30931 -35.81726,18.66666 -80,18.66666c-44.1828,0 -80,-8.35735 -80,-18.66666"/> <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
</svg> <path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
<path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
</g>
</svg>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -18,7 +18,7 @@ svgEditor.addExtension("server_opensave", {
svgEditor.setCustomHandlers({ svgEditor.setCustomHandlers({
save: function(win, data) { save: function(win, data) {
var svg = "<?xml version='1.0'?>\n" + data; var svg = "<?xml version=\"1.0\"?>\n" + data;
var title = svgCanvas.getDocumentTitle(); var title = svgCanvas.getDocumentTitle();
var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_'); var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');

View File

@@ -724,7 +724,7 @@
opts.fn(); opts.fn();
} }
if(opts.icon) { if(opts.icon) {
var icon = $.getSvgIcon(opts.icon).clone(); var icon = $.getSvgIcon(opts.icon, true);
} else { } else {
// //
var icon = $(opts.sel).children().eq(0).clone(); var icon = $(opts.sel).children().eq(0).clone();
@@ -2601,7 +2601,7 @@
} }
var setIcon = Editor.setIcon = function(elem, icon_id, forcedSize) { var setIcon = Editor.setIcon = function(elem, icon_id, forcedSize) {
var icon = (typeof icon_id == 'string') ? $.getSvgIcon(icon_id) : icon_id; var icon = (typeof icon_id == 'string') ? $.getSvgIcon(icon_id, true) : icon_id;
if(!icon) { if(!icon) {
console.log('NOTE: Icon image missing: ' + icon_id); console.log('NOTE: Icon image missing: ' + icon_id);
return; return;

View File

@@ -2154,8 +2154,6 @@ var getStrokedBBox = this.getStrokedBBox = function(elems) {
// bb.width = rmaxx - rminx; // bb.width = rmaxx - rminx;
// bb.height = rmaxy - rminy; // bb.height = rmaxy - rminy;
} }
return bb;
} catch(e) { } catch(e) {
console.log(elem, e); console.log(elem, e);
return null; return null;
@@ -2167,9 +2165,11 @@ var getStrokedBBox = this.getStrokedBBox = function(elems) {
if(full_bb) return; if(full_bb) return;
if(!this.parentNode) return; if(!this.parentNode) return;
full_bb = getCheckedBBox(this); full_bb = getCheckedBBox(this);
var b = {}; if(full_bb) {
for(var i in full_bb) b[i] = full_bb[i]; var b = {};
full_bb = b; for(var i in full_bb) b[i] = full_bb[i];
full_bb = b;
}
}); });
@@ -7496,7 +7496,7 @@ var removeUnusedDefElems = this.removeUnusedDefElems = function() {
} }
}; };
var defelems = $(svgcontent).find("linearGradient, radialGradient, filter, marker"); var defelems = $(svgcontent).find("linearGradient, radialGradient, filter, marker, svg");
defelem_ids = [], defelem_ids = [],
i = defelems.length; i = defelems.length;
while (i--) { while (i--) {

View File

@@ -161,7 +161,7 @@ $(function() {
return new_el; return new_el;
} }
var svg_icons = {}; var svg_icons = {}, fixIDs;
$.svgIcons = function(file, opts) { $.svgIcons = function(file, opts) {
var svgns = "http://www.w3.org/2000/svg", var svgns = "http://www.w3.org/2000/svg",
@@ -424,7 +424,7 @@ $(function() {
} }
function fixIDs(svg_el, svg_num, force) { fixIDs = function(svg_el, svg_num, force) {
var defs = svg_el.find('defs'); var defs = svg_el.find('defs');
if(!defs.length) return svg_el; if(!defs.length) return svg_el;
@@ -498,7 +498,13 @@ $(function() {
} }
} }
$.getSvgIcon = function(id) { return svg_icons[id]; } $.getSvgIcon = function(id, uniqueClone) {
var icon = svg_icons[id];
if(uniqueClone) {
icon = fixIDs(icon, 0, true).clone(true);
}
return icon;
}
$.resizeSvgIcons = function(obj) { $.resizeSvgIcons = function(obj) {
// FF2 and older don't detect .svg_icon, so we change it detect svg elems instead // FF2 and older don't detect .svg_icon, so we change it detect svg elems instead