deac/instiki
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update SVG-Edit

Browse source 
Version 2.5.1
This commit is contained in:
Jacques Distler 2010-08-13 16:14:19 -05:00
parent 8e57e97869
commit 113e0af736
10 changed files with 723 additions and 335 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/svg-edit/editor/extensions/ext-imagelib.js
View file

@ -110,7 +110,7 @@ svgEditor.addExtension("imagelib", function() {
}); });
var back = $('<input type=button value="Show libraries">').appendTo(browser).click(function() { var back = $('<input type=button value="Show libraries">').appendTo(browser).click(function() {
frame.hide(); frame.attr('src', 'about:blank').hide();
lib_opts.show(); lib_opts.show();
header.text(all_libs); header.text(all_libs);
}).css({ }).css({
@ -122,7 +122,7 @@ svgEditor.addExtension("imagelib", function() {
$.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();
header.text(name); header.text(opts.name);
lib_opts.hide(); lib_opts.hide();
}).append('<span>' + opts.description + '</span>'); }).append('<span>' + opts.description + '</span>');
}); });
@ -153,7 +153,7 @@ svgEditor.addExtension("imagelib", function() {
width: 100%;\ width: 100%;\
height: 100%;\ height: 100%;\
background-color: rgba(0, 0, 0, .5);\ background-color: rgba(0, 0, 0, .5);\
z-index: 4;\ z-index: 5;\
}\ }\
\ \
#imgbrowse {\ #imgbrowse {\
@ -183,6 +183,8 @@ svgEditor.addExtension("imagelib", function() {
background: white;\ background: white;\
margin: 0;\ margin: 0;\
padding: 0;\ padding: 0;\
}\
#imgbrowse > ul {\
overflow: auto;\ overflow: auto;\
}\ }\
#imgbrowse li {\ #imgbrowse li {\

15
public/svg-edit/editor/extensions/imagelib/smiley.svg
View file

@ -1,7 +1,12 @@
<?xml version='1.0'?>
<svg width="137" height="137" xmlns="http://www.w3.org/2000/svg"> <svg width="137" height="137" xmlns="http://www.w3.org/2000/svg">
<g> <title>Cool smiley</title>
<title>Layer 1</title> <path fill="url(#svg_4)" stroke="#000000" stroke-width="3" d="m32.18682,97.71674q36.3159,24.94076 72.54585,0m-64.67542,-49.25576c0,-3.8554 3.12526,-6.98079 6.98068,-6.98079c3.85449,0 6.97872,3.12539 6.97872,6.98079c0,3.85346 -3.12423,6.97867 -6.97872,6.97867c-3.85542,0 -6.98068,-3.12521 -6.98068,-6.97867m42.93047,0c0,-3.8554 3.12529,-6.98079 6.97963,-6.98079c3.8544,0 6.97971,3.12539 6.97971,6.98079c0,3.85346 -3.12531,6.97867 -6.97971,6.97867c-3.85434,0 -6.97963,-3.12521 -6.97963,-6.97867m-81.48596,20.036l0,0c0,-37.00197 29.99679,-66.99892 67.00095,-66.99892c37.00303,0 66.99998,29.99695 66.99998,66.99892c0,37.00409 -29.99695,67.00101 -66.99998,67.00101c-37.00416,0 -67.00095,-29.99692 -67.00095,-67.00101zm0,0l0,0c0,-37.00197 29.99679,-66.99892 67.00095,-66.99892c37.00303,0 66.99998,29.99695 66.99998,66.99892c0,37.00409 -29.99695,67.00101 -66.99998,67.00101c-37.00416,0 -67.00095,-29.99692 -67.00095,-67.00101z" id="svg_1"/>
<path id="svg_1" d="m32.186821,97.716736q36.315895,24.940765 72.545845,0m-64.675407,-49.255753c0,-3.855408 3.125259,-6.980789 6.980682,-6.980789c3.854485,0 6.978722,3.125381 6.978722,6.980789c0,3.853455 -3.124237,6.978668 -6.978722,6.978668c-3.855423,0 -6.980682,-3.125214 -6.980682,-6.978668m42.930473,0c0,-3.855408 3.12529,-6.980789 6.97963,-6.980789c3.854401,0 6.979706,3.125381 6.979706,6.980789c0,3.853455 -3.125305,6.978668 -6.979706,6.978668c-3.85434,0 -6.97963,-3.125214 -6.97963,-6.978668m-81.485962,20.035995l0,0c0,-37.001968 29.996788,-66.998917 67.000946,-66.998917c37.003036,0 66.999985,29.996948 66.999985,66.998917c0,37.004089 -29.996948,67.001007 -66.999985,67.001007c-37.004158,0 -67.000946,-29.996918 -67.000946,-67.001007zm0,0l0,0c0,-37.001968 29.996788,-66.998917 67.000946,-66.998917c37.003036,0 66.999985,29.996948 66.999985,66.998917c0,37.004089 -29.996948,67.001007 -66.999985,67.001007c-37.004158,0 -67.000946,-29.996918 -67.000946,-67.001007z" stroke-width="3" stroke="#000000" fill="#ffff00"/> <path id="svg_5" d="m23.84005,41.03445l17.57052,0l5.42937,-19.67914l5.42941,19.67914l17.5706,0l-14.21488,12.16242l5.42982,19.67939l-14.21495,-12.16281l-14.21489,12.16281l5.42991,-19.67939l-14.21491,-12.16242l0,0z" stroke-width="3" fill="#000000"/>
</g> <path id="svg_6" d="m65.84005,41.03445l17.57052,0l5.42937,-19.67914l5.42941,19.67914l17.5706,0l-14.21487,12.16242l5.42982,19.67939l-14.21496,-12.1628l-14.2149,12.1628l5.42992,-19.67939l-14.21491,-12.16242l0,0z" stroke-width="3" fill="#000000"/>
<defs>
<linearGradient y2="0.25391" x2="0.46484" y1="0.94922" x1="0.44531" id="svg_4">
<stop stop-color="#ff0000" offset="0"/>
<stop stop-color="#ffff00" offset="1"/>
</linearGradient>
</defs>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

17
public/svg-edit/editor/images/svg_edit_icons.svg
View file

@ -664,6 +664,23 @@
</svg> </svg>
</g> </g>
<g id="unlink_use">
<svg width="222" height="222" xmlns="http://www.w3.org/2000/svg">
<path id="svg_1" d="m93.75,118.44922c-4.5,13.58447 -14.66553,11.5 -28.25,11.5l-34,0c-13.58447,0 -24.5,-7.16553 -24.5,-21.5c0,-14.33447 10.91553,-20.5 24.5,-20.5l34,0c13.58447,0 19.75,-2.33447 26.5,10.75" stroke-width="13" stroke="#3f3f3f" fill="none"/>
<g id="svg_11">
<line id="svg_4" y2="65.94563" x2="83.07683" y1="28.27895" x1="45.41017" stroke-linecap="round" stroke-width="8" stroke="#007fff" fill="none"/>
<line id="svg_5" y2="15.01293" x2="109.41467" y1="65.94638" x1="109.41467" stroke-linecap="round" stroke-width="8" stroke="#007fff" fill="none"/>
<line id="svg_6" y2="29.31928" x2="177.58937" y1="65.94638" x1="140.96227" stroke-linecap="round" stroke-width="8" stroke="#007fff" fill="none"/>
</g>
<g id="svg_12" transform="rotate(-180, 108, 172.111)">
<line y2="190.94563" x2="79.57683" y1="153.27895" x1="41.91017" stroke-linecap="round" stroke-width="8" stroke="#007fff" fill="none" id="svg_13"/>
<line y2="140.01293" x2="105.91467" y1="190.94638" x1="105.91467" stroke-linecap="round" stroke-width="8" stroke="#007fff" fill="none" id="svg_14"/>
<line y2="154.31928" x2="174.08937" y1="190.94638" x1="137.46227" stroke-linecap="round" stroke-width="8" stroke="#007fff" fill="none" id="svg_15"/>
</g>
<path transform="rotate(-180, 172.125, 108.926)" id="svg_2" d="m215.5,118.44901c-4.5,13.58499 -14.6655,11.5 -28.25,11.5l-34,0c-13.5845,0 -24.5,-7.16501 -24.5,-21.5c0,-14.3343 10.9155,-20.4998 24.5,-20.4998l34,0c13.5845,0 19.75,-2.3345 26.5,10.75" stroke-width="13" stroke="#3f3f3f" fill="none"/>
</svg>
</g>
<g id="width"> <g id="width">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path id="svg_6" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" stroke-width="8" stroke="#000000" fill="#000000"/> <path id="svg_6" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" stroke-width="8" stroke="#000000" fill="#000000"/>

27
public/svg-edit/editor/jgraduate/jquery.jgraduate.js
View file

@ -56,21 +56,6 @@ if(!window.console) {
this.dir = function(str) {}; this.dir = function(str) {};
}; };
} }
$.cloneNode = function(el) {
if(!window.opera) return el.cloneNode(true);
// manually create a copy of the element
opera.postError(ns.svg, el.nodeName);
var new_el = document.createElementNS(ns.svg, el.nodeName);
$.each(el.attributes, function(i, attr) {
new_el.setAttributeNS(ns.svg, attr.nodeName, attr.nodeValue);
});
$.each(el.childNodes, function(i, child) {
if(child.nodeType == 1) {
new_el.appendChild($.cloneNode(child));
}
});
return new_el;
}
$.jGraduate = { $.jGraduate = {
Paint: Paint:
@ -92,10 +77,10 @@ $.jGraduate = {
this.solidColor = options.copy.solidColor; this.solidColor = options.copy.solidColor;
break; break;
case "linearGradient": case "linearGradient":
this.linearGradient = $.cloneNode(options.copy.linearGradient); this.linearGradient = options.copy.linearGradient.cloneNode(true);
break; break;
case "radialGradient": case "radialGradient":
this.radialGradient = $.cloneNode(options.copy.radialGradient); this.radialGradient = options.copy.radialGradient.cloneNode(true);
break; break;
} }
} }
@ -104,14 +89,14 @@ $.jGraduate = {
this.type = "linearGradient"; this.type = "linearGradient";
this.solidColor = null; this.solidColor = null;
this.radialGradient = null; this.radialGradient = null;
this.linearGradient = $.cloneNode(options.linearGradient); this.linearGradient = options.linearGradient.cloneNode(true);
} }
// create linear gradient paint // create linear gradient paint
else if (options.radialGradient) { else if (options.radialGradient) {
this.type = "radialGradient"; this.type = "radialGradient";
this.solidColor = null; this.solidColor = null;
this.linearGradient = null; this.linearGradient = null;
this.radialGradient = $.cloneNode(options.radialGradient); this.radialGradient = options.radialGradient.cloneNode(true);
} }
// create solid color paint // create solid color paint
else if (options.solidColor) { else if (options.solidColor) {
@ -328,7 +313,7 @@ jQuery.fn.jGraduate =
// if we are sent a gradient, import it // if we are sent a gradient, import it
if ($this.paint.type == "linearGradient") { if ($this.paint.type == "linearGradient") {
$this.paint.linearGradient.id = id+'_jgraduate_grad'; $this.paint.linearGradient.id = id+'_jgraduate_grad';
$this.paint.linearGradient = svg.appendChild($.cloneNode($this.paint.linearGradient)); $this.paint.linearGradient = svg.appendChild($this.paint.linearGradient.cloneNode(true));
} else { // we create a gradient } else { // we create a gradient
var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient')); var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient'));
grad.id = id+'_jgraduate_grad'; grad.id = id+'_jgraduate_grad';
@ -650,7 +635,7 @@ jQuery.fn.jGraduate =
// if we are sent a gradient, import it // if we are sent a gradient, import it
if ($this.paint.type == "radialGradient") { if ($this.paint.type == "radialGradient") {
$this.paint.radialGradient.id = id+'_rg_jgraduate_grad'; $this.paint.radialGradient.id = id+'_rg_jgraduate_grad';
$this.paint.radialGradient = svg.appendChild($.cloneNode($this.paint.radialGradient)); $this.paint.radialGradient = svg.appendChild($this.paint.radialGradient.cloneNode(true));
} else { // we create a gradient } else { // we create a gradient
var grad = svg.appendChild(document.createElementNS(ns.svg, 'radialGradient')); var grad = svg.appendChild(document.createElementNS(ns.svg, 'radialGradient'));
grad.id = id+'_rg_jgraduate_grad'; grad.id = id+'_rg_jgraduate_grad';

8
public/svg-edit/editor/spinbtn/JQuerySpinBtn.js
View file

@ -117,10 +117,12 @@ $.fn.SpinButton = function(cfg){
var x = e.pageX || e.x; var x = e.pageX || e.x;
var y = e.pageY || e.y; var y = e.pageY || e.y;
var el = e.target || e.srcElement; var el = e.target || e.srcElement;
var height = $(el).outerHeight()/2; var scale = svgEditor.tool_scale || 1;
var height = $(el).height()/2;
var direction = var direction =
(x > coord(el,'offsetLeft') + el.offsetWidth - this.spinCfg._btn_width) (x > coord(el,'offsetLeft') + el.offsetWidth*scale - this.spinCfg._btn_width)
? ((y < coord(el,'offsetTop') + height) ? 1 : -1) : 0; ? ((y < coord(el,'offsetTop') + height*scale) ? 1 : -1) : 0;
if (direction !== this.spinCfg._direction) { if (direction !== this.spinCfg._direction) {
// Style up/down buttons: // Style up/down buttons:

13
public/svg-edit/editor/svg-editor.css
View file

@ -2,6 +2,13 @@
background: #D8D8D8; background: #D8D8D8;
} }
#svg_editor * {
transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
#svg_editor { #svg_editor {
font-size: 8pt; font-size: 8pt;
font-family: Verdana, Helvetica, Arial; font-family: Verdana, Helvetica, Arial;
@ -278,6 +285,7 @@
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
z-index: 5;
} }
@ -466,6 +474,11 @@
height: 34px; height: 34px;
} }
#svg_editor div.toolset label span {
/* outline: 1px solid red;*/
padding-top: 3px;
display: inline-block;
}
#tools_top > div > * { #tools_top > div > * {
float: left; float: left;

32
public/svg-edit/editor/svg-editor.html
View file

@ -168,7 +168,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
--> -->
</div> </div>
<label id="tool_angle" title="Change rotation angle"> <label id="tool_angle" title="Change rotation angle" class="toolset">
<span id="angleLabel" class="icon_label"></span> <span id="angleLabel" class="icon_label"></span>
<input id="angle" size="2" value="0" type="text"/> <input id="angle" size="2" value="0" type="text"/>
</label> </label>
@ -227,11 +227,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div> </div>
<div id="g_panel">
<div class="tool_sep"></div>
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
</div>
<div id="rect_panel"> <div id="rect_panel">
<div class="toolset"> <div class="toolset">
<label id="rect_width_tool" title="Change rectangle width"> <label id="rect_width_tool" title="Change rectangle width">
@ -243,7 +238,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<input id="rect_height" class="attr_changer" size="3" data-attr="height"/> <input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
</label> </label>
</div> </div>
<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius"> <label id="cornerRadiusLabel" title="Change Rectangle Corner Radius" class="toolset">
<span class="icon_label"></span> <span class="icon_label"></span>
<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/> <input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
</label> </label>
@ -355,6 +350,27 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<input id="text" type="text" size="35"/> <input id="text" type="text" size="35"/>
</div> </div>
<!-- formerly gsvg_panel -->
<div id="container_panel">
<div class="tool_sep"></div>
<!-- Add viewBox field here? -->
<label id="group_title" title="Group identification label">
<span>label:</span>
<input id="g_title" data-attr="title" size="10" type="text"/>
</label>
</div>
<div id="use_panel">
<div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
</div>
<div id="g_panel">
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
</div>
<div id="path_node_panel"> <div id="path_node_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<div class="tool_button" id="tool_node_link" title="Link Control Points"></div> <div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
@ -507,7 +523,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div id="tools_bottom_3"> <div id="tools_bottom_3">
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div> <div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div> </div>
<div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.5</a></div> <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.5.1</a></div>
</div> </div>
<div id="option_lists"> <div id="option_lists">

532
public/svg-edit/editor/svg-editor.js
View file

@ -45,9 +45,11 @@
imgPath: 'images/', imgPath: 'images/',
langPath: 'locale/', langPath: 'locale/',
extPath: 'extensions/', extPath: 'extensions/',
jGraduatePath: 'jgraduate/images/',
extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-imagelib.js', 'ext-itex.js'], extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-imagelib.js', 'ext-itex.js'],
initTool: 'select', initTool: 'select',
wireframe: false wireframe: false,
colorPickerCSS: null
}, },
uiStrings = Editor.uiStrings = { uiStrings = Editor.uiStrings = {
"invalidAttrValGiven":"Invalid value given", "invalidAttrValGiven":"Invalid value given",
@ -82,6 +84,8 @@
Editor.curConfig = curConfig; Editor.curConfig = curConfig;
Editor.tool_scale = 1;
// Store and retrieve preferences // Store and retrieve preferences
$.pref = function(key, val) { $.pref = function(key, val) {
if(val) curPrefs[key] = val; if(val) curPrefs[key] = val;
@ -147,6 +151,7 @@
Editor.setCustomHandlers = function(opts) { Editor.setCustomHandlers = function(opts) {
Editor.ready(function() { Editor.ready(function() {
if(opts.open) { if(opts.open) {
$('#tool_open > input[type="file"]').remove();
$('#tool_open').show(); $('#tool_open').show();
svgCanvas.open = opts.open; svgCanvas.open = opts.open;
} }
@ -207,7 +212,15 @@
var extFunc = function() { var extFunc = function() {
$.each(curConfig.extensions, function() { $.each(curConfig.extensions, function() {
$.getScript(curConfig.extPath + this); var extname = this;
$.getScript(curConfig.extPath + extname, function(d) {
// Fails locally in Chrome 5
if(!d) {
var s = document.createElement('script');
s.src = curConfig.extPath + extname;
document.querySelector('head').appendChild(s);
}
});
}); });
} }
@ -320,6 +333,7 @@
'#tool_reorient':'reorient', '#tool_reorient':'reorient',
'#tool_group':'group', '#tool_group':'group',
'#tool_ungroup':'ungroup', '#tool_ungroup':'ungroup',
'#tool_unlink_use':'unlink_use',
'#tool_alignleft, #tool_posleft':'align_left', '#tool_alignleft, #tool_posleft':'align_left',
'#tool_aligncenter, #tool_poscenter':'align_center', '#tool_aligncenter, #tool_poscenter':'align_center',
@ -377,18 +391,17 @@
$(this).parent().prepend(this); $(this).parent().prepend(this);
}); });
// Use small icons by default if not all left tools are visible
var tleft = $('#tools_left'); var tleft = $('#tools_left');
if (tleft.length != 0) { if (tleft.length != 0) {
var min_height = tleft.offset().top + tleft.outerHeight(); var min_height = tleft.offset().top + tleft.outerHeight();
} }
var size = $.pref('iconsize'); // var size = $.pref('iconsize');
if(size && size != 'm') { // if(size && size != 'm') {
svgEditor.setIconSize(size); // svgEditor.setIconSize(size);
} else if($(window).height() < min_height) { // } else if($(window).height() < min_height) {
// Make smaller // // Make smaller
svgEditor.setIconSize('s'); // svgEditor.setIconSize('s');
} // }
// Look for any missing flyout icons from plugins // Look for any missing flyout icons from plugins
$('.tools_flyout').each(function() { $('.tools_flyout').each(function() {
@ -430,7 +443,8 @@
default_img_url = curConfig.imgPath + "logo.png", default_img_url = curConfig.imgPath + "logo.png",
workarea = $("#workarea"), workarea = $("#workarea"),
show_save_warning = false, show_save_warning = false,
exportWindow = null; exportWindow = null,
tool_scale = 1;
// This sets up alternative dialog boxes. They mostly work the same way as // This sets up alternative dialog boxes. They mostly work the same way as
// their UI counterparts, expect instead of returning the result, a callback // their UI counterparts, expect instead of returning the result, a callback
@ -521,7 +535,7 @@
// by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs) // by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs)
// can just provide their own custom save handler and might not want the XML prolog // can just provide their own custom save handler and might not want the XML prolog
svg = "<?xml version='1.0'?>\n" + svg; svg = '<?xml version="1.0"?>\n' + svg;
// 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
@ -566,15 +580,21 @@
var datauri = c.toDataURL('image/png'); var datauri = c.toDataURL('image/png');
exportWindow.location.href = datauri; exportWindow.location.href = datauri;
var done = $.pref('export_notice_done');
if(done !== "all") {
var note = uiStrings.saveFromBrowser.replace('%s', 'PNG'); var note = uiStrings.saveFromBrowser.replace('%s', 'PNG');
// Check if there's issues // Check if there's issues
if(issues.length) { if(issues.length) {
var pre = "\n \u2022 "; var pre = "\n \u2022 ";
note += ("\n\n" + uiStrings.noteTheseIssues + pre + issues.join(pre)); note += ("\n\n" + uiStrings.noteTheseIssues + pre + issues.join(pre));
} }
// Note that this will also prevent the notice even though new issues may appear later.
// May want to find a way to deal with that without annoying the user
$.pref('export_notice_done', 'all');
exportWindow.alert(note); exportWindow.alert(note);
}
}; };
// called when we've selected a different element // called when we've selected a different element
@ -618,8 +638,8 @@
} }
// Update selectedElement if element is no longer part of the image. // Update selectedElement if element is no longer part of the image.
// This occurs for the text elements in Firefox // This occurs for the text elements in Firefox
else if(elem && selectedElement && selectedElement.parentNode == null else if(elem && selectedElement && selectedElement.parentNode == null) {
|| elem && elem.tagName == "path" && !multiselected) { // || elem && elem.tagName == "path" && !multiselected) { // This was added in r1430, but not sure why
selectedElement = elem; selectedElement = elem;
} }
} }
@ -775,7 +795,7 @@
var shower = $('#' + this.id + '_show'); var shower = $('#' + this.id + '_show');
var pos = shower.offset(); var pos = shower.offset();
var w = shower.outerWidth(); var w = shower.outerWidth();
$(this).css({left: pos.left + w, top: pos.top}); $(this).css({left: (pos.left + w)*tool_scale, top: pos.top});
}); });
} }
@ -790,12 +810,30 @@
}); });
} }
var resize_timer;
var extAdded = function(window, ext) { var extAdded = function(window, ext) {
var cb_called = false; var cb_called = false;
var resize_done = false;
var cb_ready = true; // Set to false to delay callback (e.g. wait for $.svgIcons)
function prepResize() {
if(resize_timer) {
clearTimeout(resize_timer);
resize_timer = null;
}
if(!resize_done) {
resize_timer = setTimeout(function() {
resize_done = true;
setIconSize(curPrefs.iconsize);
}, 50);
}
}
var runCallback = function() { var runCallback = function() {
if(ext.callback && !cb_called) { if(ext.callback && !cb_called && cb_ready) {
cb_called = true; cb_called = true;
ext.callback(); ext.callback();
} }
@ -1107,6 +1145,9 @@
addAltDropDown(this.elem, this.list, this.callback, {seticon: true}); addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
}); });
if (svgicons)
cb_ready = false; // Delay callback
$.svgIcons(svgicons, { $.svgIcons(svgicons, {
w:24, h:24, w:24, h:24,
id_match: false, id_match: false,
@ -1116,8 +1157,9 @@
callback: function(icons) { callback: function(icons) {
// Non-ideal hack to make the icon match the current size // Non-ideal hack to make the icon match the current size
if(curPrefs.iconsize && curPrefs.iconsize != 'm') { if(curPrefs.iconsize && curPrefs.iconsize != 'm') {
setIconSize(curPrefs.iconsize, true); prepResize();
} }
cb_ready = true; // Ready for callback
runCallback(); runCallback();
} }
@ -1153,7 +1195,8 @@
// updates the toolbar (colors, opacity, etc) based on the selected element // updates the toolbar (colors, opacity, etc) based on the selected element
// This function also updates the opacity and id elements that are in the context panel // This function also updates the opacity and id elements that are in the context panel
var updateToolbar = function() { var updateToolbar = function() {
if (selectedElement != null && $.inArray(selectedElement.tagName, ['image', 'text', 'foreignObject', 'g', 'a']) === -1) { if (selectedElement != null && $.inArray(selectedElement.tagName, ['use', 'image', 'foreignObject', 'g', 'a']) === -1) {
// get opacity values // get opacity values
var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity")); var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity"));
if (isNaN(fillOpacity)) { if (isNaN(fillOpacity)) {
@ -1207,8 +1250,8 @@
strokeOpacity = "N/A"; strokeOpacity = "N/A";
} }
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1); $('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1).change();
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none"); $('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none").change();
var attr = selectedElement.getAttribute("stroke-linejoin") || 'miter'; var attr = selectedElement.getAttribute("stroke-linejoin") || 'miter';
@ -1260,6 +1303,11 @@
} }
} }
var setInputWidth = function(elem) {
var w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
$(elem).width(w);
}
// updates the context panel tools based on the selected element // updates the context panel tools based on the selected element
var updateContextPanel = function() { var updateContextPanel = function() {
var elem = selectedElement; var elem = selectedElement;
@ -1276,7 +1324,7 @@
} }
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\ $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
#ellipse_panel, #line_panel, #text_panel, #image_panel').hide(); #ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel, #use_panel').hide();
if (elem != null) { if (elem != null) {
var elname = elem.nodeName; var elname = elem.nodeName;
@ -1365,14 +1413,15 @@
circle: ['cx','cy','r'], circle: ['cx','cy','r'],
ellipse: ['cx','cy','rx','ry'], ellipse: ['cx','cy','rx','ry'],
line: ['x1','y1','x2','y2'], line: ['x1','y1','x2','y2'],
text: [] text: [],
'use': []
}; };
var el_name = elem.tagName; var el_name = elem.tagName;
if($(elem).data('gsvg')) { // if($(elem).data('gsvg')) {
el_name = 'svg'; // $('#g_panel').show();
} // }
if(panels[el_name]) { if(panels[el_name]) {
var cur_panel = panels[el_name]; var cur_panel = panels[el_name];
@ -1410,6 +1459,19 @@
var href = elem.getAttributeNS(xlinkNS, "href"); var href = elem.getAttributeNS(xlinkNS, "href");
setImageURL(href); setImageURL(href);
} // image } // image
else if(el_name == 'g' || el_name == 'use') {
$('#container_panel').show();
var title = svgCanvas.getTitle();
var label = $('#g_title')[0];
label.value = title;
setInputWidth(label);
var d = 'disabled';
if(el_name == 'use') {
label.setAttribute(d, d);
} else {
label.removeAttribute(d);
}
}
} }
} // if (elem != null) } // if (elem != null)
else if (multiselected) { else if (multiselected) {
@ -1605,6 +1667,12 @@
setImageURL(this.value); setImageURL(this.value);
}); });
$('#g_title').change(function() {
svgCanvas.setGroupTitle(this.value);
setInputWidth(this);
});
$('.attr_changer').change(function() { $('.attr_changer').change(function() {
var attr = this.getAttribute("data-attr"); var attr = this.getAttribute("data-attr");
var val = this.value; var val = this.value;
@ -1828,8 +1896,9 @@
} }
}); });
}()); }());
// Made public for UI customization.
var addDropDown = function(elem, callback, dropUp) { // TODO: Group UI functions into a public svgEditor.ui interface.
Editor.addDropDown = function(elem, callback, dropUp) {
var button = $(elem).find('button'); var button = $(elem).find('button');
var list = $(elem).find('ul'); var list = $(elem).find('ul');
var on_button = false; var on_button = false;
@ -1925,12 +1994,12 @@
} }
} }
addDropDown('#font_family_dropdown', function() { Editor.addDropDown('#font_family_dropdown', function() {
var fam = $(this).text(); var fam = $(this).text();
$('#font_family').val($(this).text()).change(); $('#font_family').val($(this).text()).change();
}); });
addDropDown('#opacity_dropdown', function() { Editor.addDropDown('#opacity_dropdown', function() {
if($(this).find('div').length) return; if($(this).find('div').length) return;
var perc = parseInt($(this).text().split('%')[0]); var perc = parseInt($(this).text().split('%')[0]);
changeOpacity(false, perc); changeOpacity(false, perc);
@ -1950,7 +2019,7 @@
} }
}); });
addDropDown('#blur_dropdown', function() { Editor.addDropDown('#blur_dropdown', function() {
}); });
var slideStart = false; var slideStart = false;
@ -1973,7 +2042,7 @@
}); });
addDropDown('#zoom_dropdown', function() { Editor.addDropDown('#zoom_dropdown', function() {
var item = $(this); var item = $(this);
var val = item.attr('data-val'); var val = item.attr('data-val');
if(val) { if(val) {
@ -2027,6 +2096,11 @@
workarea.mousedown(unfocus); workarea.mousedown(unfocus);
}).blur(function() { }).blur(function() {
workarea.unbind('mousedown', unfocus); workarea.unbind('mousedown', unfocus);
// Go back to selecting text if in textedit mode
if(svgCanvas.getMode() == 'textedit') {
$('#text').focus();
}
}); });
}()); }());
@ -2226,11 +2300,13 @@
var clickBold = function(){ var clickBold = function(){
svgCanvas.setBold( !svgCanvas.getBold() ); svgCanvas.setBold( !svgCanvas.getBold() );
updateContextPanel(); updateContextPanel();
return false;
}; };
var clickItalic = function(){ var clickItalic = function(){
svgCanvas.setItalic( !svgCanvas.getItalic() ); svgCanvas.setItalic( !svgCanvas.getItalic() );
updateContextPanel(); updateContextPanel();
return false;
}; };
var clickSave = function(){ var clickSave = function(){
@ -2289,7 +2365,7 @@
svgCanvas.groupSelectedElements(); svgCanvas.groupSelectedElements();
} }
// ungroup // ungroup
else if(selectedElement && selectedElement.tagName == 'g'){ else if(selectedElement){
svgCanvas.ungroupSelectedElement(); svgCanvas.ungroupSelectedElement();
} }
}; };
@ -2487,161 +2563,260 @@
} }
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).clone() : icon_id.clone(); var icon = (typeof icon_id == 'string') ? $.getSvgIcon(icon_id) : icon_id;
if(!icon) {
console.log('NOTE: Icon image missing: ' + icon_id);
return;
}
icon = icon.clone();
$(elem).empty().append(icon); $(elem).empty().append(icon);
if(forcedSize) { // if(forcedSize) {
var obj = {}; // var obj = {};
obj[elem + ' .svg_icon'] = forcedSize; // obj[elem + ' .svg_icon'] = forcedSize;
$.resizeSvgIcons(obj); // $.resizeSvgIcons(obj);
} else { // } else {
var size = curPrefs.iconsize; // var size = curPrefs.iconsize;
if(size && size !== 'm') { // if(size && size !== 'm') {
var icon_sizes = { s:16, m:24, l:32, xl:48}, obj = {}; // var icon_sizes = { s:16, m:24, l:32, xl:48}, obj = {};
obj[elem + ' .svg_icon'] = icon_sizes[size]; // obj[elem + ' .svg_icon'] = icon_sizes[size];
$.resizeSvgIcons(obj); // $.resizeSvgIcons(obj);
// }
// }
}
var ua_prefix;
(ua_prefix = function() {
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
var someScript = document.getElementsByTagName('script')[0];
for(var prop in someScript.style) {
if(regex.test(prop)) {
// test is faster than match, so it's better to perform
// that on the lot and match only when necessary
return prop.match(regex)[0];
} }
} }
// Nothing found so far?
if('WebkitOpacity' in someScript.style) return 'Webkit';
if('KhtmlOpacity' in someScript.style) return 'Khtml';
return '';
}());
var scaleElements = function(elems, scale) {
var prefix = '-' + ua_prefix.toLowerCase() + '-';
var sides = ['top', 'left', 'bottom', 'right'];
elems.each(function() {
// console.log('go', scale);
// Handled in CSS
// this.style[ua_prefix + 'Transform'] = 'scale(' + scale + ')';
var el = $(this);
var w = el.outerWidth() * (scale - 1);
var h = el.outerHeight() * (scale - 1);
var margins = {};
for(var i = 0; i < 4; i++) {
var s = sides[i];
var cur = el.data('orig_margin-' + s);
if(cur == null) {
cur = parseInt(el.css('margin-' + s));
// Cache the original margin
el.data('orig_margin-' + s, cur);
}
var val = cur * scale;
if(s === 'right') {
val += w;
} else if(s === 'bottom') {
val += h;
}
el.css('margin-' + s, val);
// el.css('outline', '1px solid red');
}
});
} }
var setIconSize = Editor.setIconSize = function(size, force) { var setIconSize = Editor.setIconSize = function(size, force) {
if(size == curPrefs.size && !force) return; if(size == curPrefs.size && !force) return;
// return;
// var elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
console.log('size', size);
var sel_toscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,\
#main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,\
#g_panel > *, #tool_font_size > *, .tools_flyout';
var elems = $(sel_toscale);
var scale = 1;
if(typeof size == 'number') {
scale = size;
} else {
var icon_sizes = { s:.75, m:1, l:1.25, xl:1.5 };
scale = icon_sizes[size];
}
Editor.tool_scale = tool_scale = scale;
setFlyoutPositions();
// $('.tools_flyout').each(function() {
// var pos = $(this).position();
// console.log($(this), pos.left+(34 * scale));
// $(this).css({'left': pos.left+(34 * scale), 'top': pos.top+(77 * scale)});
// console.log('l', $(this).css('left'));
// });
// var scale = .75;//0.75;
var hidden_ps = elems.parents(':hidden');
hidden_ps.css('visibility', 'hidden').show();
scaleElements(elems, scale);
hidden_ps.css('visibility', 'visible').hide();
// console.timeEnd('elems');
// return;
$.pref('iconsize', size); $.pref('iconsize', size);
$('#iconsize').val(size); $('#iconsize').val(size);
var icon_sizes = { s:16, m:24, l:32, xl:48 };
var size_num = icon_sizes[size];
// Change icon size // Change icon size
$('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open') // $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
.find('> svg, > img').each(function() { // .find('> svg, > img').each(function() {
this.setAttribute('width',size_num); // this.setAttribute('width',size_num);
this.setAttribute('height',size_num); // this.setAttribute('height',size_num);
}); // });
//
$.resizeSvgIcons({ // $.resizeSvgIcons({
'.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5, // '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
'#logo > svg, #logo > img': size_num * 1.3, // '#logo > svg, #logo > img': size_num * 1.3,
'#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75) // '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
}); // });
if(size != 's') { // if(size != 's') {
$.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6}); // $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
} // }
// Note that all rules will be prefixed with '#svg_editor' when parsed // Note that all rules will be prefixed with '#svg_editor' when parsed
var cssResizeRules = { var cssResizeRules = {
".tool_button,\ // ".tool_button,\
.push_button,\ // .push_button,\
.tool_button_current,\ // .tool_button_current,\
.push_button_pressed,\ // .push_button_pressed,\
.disabled,\ // .disabled,\
.icon_label,\ // .icon_label,\
.tools_flyout .tool_button": { // .tools_flyout .tool_button": {
'width': {s: '16px', l: '32px', xl: '48px'}, // 'width': {s: '16px', l: '32px', xl: '48px'},
'height': {s: '16px', l: '32px', xl: '48px'}, // 'height': {s: '16px', l: '32px', xl: '48px'},
'padding': {s: '1px', l: '2px', xl: '3px'} // 'padding': {s: '1px', l: '2px', xl: '3px'}
}, // },
".tool_sep": { // ".tool_sep": {
'height': {s: '16px', l: '32px', xl: '48px'}, // 'height': {s: '16px', l: '32px', xl: '48px'},
'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'} // 'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
}, // },
"#main_icon": { // "#main_icon": {
'width': {s: '31px', l: '53px', xl: '75px'}, // 'width': {s: '31px', l: '53px', xl: '75px'},
'height': {s: '22px', l: '42px', xl: '64px'} // 'height': {s: '22px', l: '42px', xl: '64px'}
}, // },
"#tools_top": { "#tools_top": {
'left': {s: '36px', l: '60px', xl: '80px'}, 'left': 50,
'height': {s: '50px', l: '88px', xl: '125px'} 'height': 72
}, },
"#tools_left": { "#tools_left": {
'width': {s: '22px', l: '30px', xl: '38px'}, 'width': 31,
'top': {s: '50px', l: '87px', xl: '125px'} 'top': 74
}, },
"div#workarea": { "div#workarea": {
'left': {s: '27px', l: '46px', xl: '65px'}, 'left': 38,
'top': {s: '50px', l: '88px', xl: '125px'}, 'top': 74
'bottom': {s: '55px', l: '98px', xl: '145px'}
}, },
"#tools_bottom": { // "#tools_bottom": {
'left': {s: '27px', l: '46px', xl: '65px'}, // 'left': {s: '27px', l: '46px', xl: '65px'},
'height': {s: '58px', l: '98px', xl: '145px'} // 'height': {s: '58px', l: '98px', xl: '145px'}
}, // },
"#color_tools": { // "#color_tools": {
'border-spacing': {s: '0 1px'}, // 'border-spacing': {s: '0 1px'},
'margin-top': {s: '-1px'} // 'margin-top': {s: '-1px'}
}, // },
"#color_tools .icon_label": { // "#color_tools .icon_label": {
'width': {l:'43px', xl: '60px'} // 'width': {l:'43px', xl: '60px'}
}, // },
".color_tool": { // ".color_tool": {
'height': {s: '20px'} // 'height': {s: '20px'}
}, // },
"#tool_opacity": { // "#tool_opacity": {
'top': {s: '1px'}, // 'top': {s: '1px'},
'height': {s: 'auto', l:'auto', xl:'auto'} // 'height': {s: 'auto', l:'auto', xl:'auto'}
}, // },
"#tools_top input, #tools_bottom input": { // "#tools_top input, #tools_bottom input": {
'margin-top': {s: '2px', l: '4px', xl: '5px'}, // 'margin-top': {s: '2px', l: '4px', xl: '5px'},
'height': {s: 'auto', l: 'auto', xl: 'auto'}, // 'height': {s: 'auto', l: 'auto', xl: 'auto'},
'border': {s: '1px solid #555', l: 'auto', xl: 'auto'}, // 'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'} // 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
}, // },
"#zoom_panel": { // "#zoom_panel": {
'margin-top': {s: '3px', l: '4px', xl: '5px'} // 'margin-top': {s: '3px', l: '4px', xl: '5px'}
}, // },
"#copyright, #tools_bottom .label": { // "#copyright, #tools_bottom .label": {
'font-size': {l: '1.5em', xl: '2em'}, // 'font-size': {l: '1.5em', xl: '2em'},
'line-height': {s: '15px'} // 'line-height': {s: '15px'}
}, // },
"#tools_bottom_2": { // "#tools_bottom_2": {
'width': {l: '295px', xl: '355px'}, // 'width': {l: '295px', xl: '355px'},
'top': {s: '4px'} // 'top': {s: '4px'}
}, // },
"#tools_top > div, #tools_top": { // "#tools_top > div, #tools_top": {
'line-height': {s: '17px', l: '34px', xl: '50px'} // 'line-height': {s: '17px', l: '34px', xl: '50px'}
}, // },
".dropdown button": { // ".dropdown button": {
'height': {s: '18px', l: '34px', xl: '40px'}, // 'height': {s: '18px', l: '34px', xl: '40px'},
'line-height': {s: '18px', l: '34px', xl: '40px'}, // 'line-height': {s: '18px', l: '34px', xl: '40px'},
'margin-top': {s: '3px'} // 'margin-top': {s: '3px'}
}, // },
"#tools_top label, #tools_bottom label": { // "#tools_top label, #tools_bottom label": {
'font-size': {s: '1em', l: '1.5em', xl: '2em'}, // 'font-size': {s: '1em', l: '1.5em', xl: '2em'},
'height': {s: '25px', l: '42px', xl: '64px'} // 'height': {s: '25px', l: '42px', xl: '64px'}
}, // },
"div.toolset": { // "div.toolset": {
'height': {s: '25px', l: '42px', xl: '64px'} // 'height': {s: '25px', l: '42px', xl: '64px'}
}, // },
"#tool_bold, #tool_italic": { // "#tool_bold, #tool_italic": {
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'} // 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
}, // },
"#sidepanels": { // "#sidepanels": {
'top': {s: '50px', l: '88px', xl: '125px'}, // 'top': {s: '50px', l: '88px', xl: '125px'},
'bottom': {s: '51px', l: '68px', xl: '65px'} // 'bottom': {s: '51px', l: '68px', xl: '65px'}
}, // },
'#layerbuttons': { // '#layerbuttons': {
'width': {l: '130px', xl: '175px'}, // 'width': {l: '130px', xl: '175px'},
'height': {l: '24px', xl: '30px'} // 'height': {l: '24px', xl: '30px'}
}, // },
'#layerlist': { // '#layerlist': {
'width': {l: '128px', xl: '150px'} // 'width': {l: '128px', xl: '150px'}
}, // },
'.layer_button': { // '.layer_button': {
'width': {l: '19px', xl: '28px'}, // 'width': {l: '19px', xl: '28px'},
'height': {l: '19px', xl: '28px'} // 'height': {l: '19px', xl: '28px'}
}, // },
"input.spin-button": { // "input.spin-button": {
'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"}, // 'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"},
'background-position': {l: '100% -5px', xl: '100% -2px'}, // 'background-position': {l: '100% -5px', xl: '100% -2px'},
'padding-right': {l: '24px', xl: '24px' } // 'padding-right': {l: '24px', xl: '24px' }
}, // },
"input.spin-button.up": { // "input.spin-button.up": {
'background-position': {l: '100% -45px', xl: '100% -42px'} // 'background-position': {l: '100% -45px', xl: '100% -42px'}
}, // },
"input.spin-button.down": { // "input.spin-button.down": {
'background-position': {l: '100% -85px', xl: '100% -82px'} // 'background-position': {l: '100% -85px', xl: '100% -82px'}
}, // },
"#position_opts": { // "#position_opts": {
'width': {all: (size_num*4) +'px'} // 'width': {all: (size_num*4) +'px'}
} // }
}; };
var rule_elem = $('#tool_size_rules'); var rule_elem = $('#tool_size_rules');
@ -2657,12 +2832,21 @@
selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor'); selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor');
style_str += selector + '{'; style_str += selector + '{';
$.each(rules, function(prop, values) { $.each(rules, function(prop, values) {
if(values[size] || values.all) { if(typeof values === 'number') {
style_str += (prop + ':' + (values[size] || values.all) + ';'); var val = (values * scale) + 'px';
} else if(values[size] || values.all) {
var val = (values[size] || values.all);
} }
style_str += (prop + ':' + val + ';');
}); });
style_str += '}'; style_str += '}';
}); });
//this.style[ua_prefix + 'Transform'] = 'scale(' + scale + ')';
var prefix = '-' + ua_prefix.toLowerCase() + '-';
style_str += (sel_toscale + '{' + prefix + 'transform: scale(' + scale + ');}'
+ ' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' // Hack for markers
+ ' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1/scale) + ');}' // Hack for sliders
);
rule_elem.text(style_str); rule_elem.text(style_str);
} }
@ -2778,12 +2962,12 @@
var pos = elem.position(); var pos = elem.position();
$("#color_picker") $("#color_picker")
.draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'}) .draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'})
.css({'left': pos.left, 'bottom': 50 - pos.top}) .css(curConfig.colorPickerCSS || {'left': pos.left, 'bottom': 50 - pos.top})
.jGraduate( .jGraduate(
{ {
paint: paint, paint: paint,
window: { pickerTitle: title }, window: { pickerTitle: title },
images: { clientPath: "jgraduate/images/" } images: { clientPath: curConfig.jGraduatePath }
}, },
function(p) { function(p) {
paint = new $.jGraduate.Paint(p); paint = new $.jGraduate.Paint(p);
@ -3341,6 +3525,7 @@
{sel:'#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: [modKey+'C', true]}, {sel:'#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: [modKey+'C', true]},
{sel:'#tool_group', fn: clickGroup, evt: 'click', key: [modKey+'G', true]}, {sel:'#tool_group', fn: clickGroup, evt: 'click', key: [modKey+'G', true]},
{sel:'#tool_ungroup', fn: clickGroup, evt: 'click'}, {sel:'#tool_ungroup', fn: clickGroup, evt: 'click'},
{sel:'#tool_unlink_use', fn: clickGroup, evt: 'click'},
{sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'}, {sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'},
// these two lines are required to make Opera work properly with the flyout mechanism // these two lines are required to make Opera work properly with the flyout mechanism
// {sel:'#tools_rect_show', fn: clickRect, evt: 'click'}, // {sel:'#tools_rect_show', fn: clickRect, evt: 'click'},
@ -3650,7 +3835,7 @@
updateCanvas(true); updateCanvas(true);
// }); // });
// var revnums = "svg-editor.js ($Rev: 1638 $) "; // var revnums = "svg-editor.js ($Rev: 1659 $) ";
// revnums += svgCanvas.getVersion(); // revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums); // $('#copyright')[0].setAttribute("title", revnums);
@ -3823,7 +4008,6 @@
})(); })();
// ?iconsize=s&bkgd_color=555 // ?iconsize=s&bkgd_color=555
// svgEditor.setConfig({ // svgEditor.setConfig({

358
public/svg-edit/editor/svgcanvas.js
View file

@ -1253,10 +1253,12 @@ var SelectorManager;
// The bbox for a group does not include stroke vals, so we // The bbox for a group does not include stroke vals, so we
// get the bbox based on its children. // get the bbox based on its children.
var stroked_bbox = getStrokedBBox(selected.childNodes); var stroked_bbox = getStrokedBBox(selected.childNodes);
if(stroked_bbox) {
$.each(bbox, function(key, val) { $.each(bbox, function(key, val) {
bbox[key] = stroked_bbox[key]; bbox[key] = stroked_bbox[key];
}); });
} }
}
// loop and transform our bounding box until we reach our first rotation // loop and transform our bounding box until we reach our first rotation
var m = getMatrix(selected); var m = getMatrix(selected);
@ -2280,7 +2282,12 @@ var copyElem = function(el) {
if($(el).data('gsvg')) { if($(el).data('gsvg')) {
$(new_el).data('gsvg', new_el.firstChild); $(new_el).data('gsvg', new_el.firstChild);
} else if(new_el.tagName == 'image') { } else if($(el).data('symbol')) {
var ref = $(el).data('symbol');
$(new_el).data('ref', ref).data('symbol', ref);
}
else if(new_el.tagName == 'image') {
preventClickDefault(new_el); preventClickDefault(new_el);
} }
return new_el; return new_el;
@ -2885,10 +2892,10 @@ var remapElement = this.remapElement = function(selected,changes,m) {
changes["height"] = scaleh(changes["height"]); changes["height"] = scaleh(changes["height"]);
break; break;
case "use": case "use":
var pt1 = remap(changes["x"],changes["y"]); // var pt1 = remap(changes["x"],changes["y"]);
changes["x"] = pt1.x; // changes["x"] = pt1.x;
changes["y"] = pt1.y; // changes["y"] = pt1.y;
break; // break;
case "g": case "g":
case "text": case "text":
// if it was a translate, then just update x,y // if it was a translate, then just update x,y
@ -2999,9 +3006,6 @@ var remapElement = this.remapElement = function(selected,changes,m) {
changes.height = Math.abs(changes.height); changes.height = Math.abs(changes.height);
assignAttributes(selected, changes, 1000, true); assignAttributes(selected, changes, 1000, true);
break; break;
case "use":
assignAttributes(selected, changes, 1000, true);
break;
case "ellipse": case "ellipse":
changes.rx = Math.abs(changes.rx); changes.rx = Math.abs(changes.rx);
changes.ry = Math.abs(changes.ry); changes.ry = Math.abs(changes.ry);
@ -3009,6 +3013,7 @@ var remapElement = this.remapElement = function(selected,changes,m) {
if(changes.r) changes.r = Math.abs(changes.r); if(changes.r) changes.r = Math.abs(changes.r);
case "line": case "line":
case "text": case "text":
case "use":
assignAttributes(selected, changes, 1000, true); assignAttributes(selected, changes, 1000, true);
break; break;
case "g": case "g":
@ -3168,8 +3173,6 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
attrs = ["width", "height", "x", "y"]; attrs = ["width", "height", "x", "y"];
break; break;
case "use": case "use":
attrs = ["x", "y"];
break;
case "text": case "text":
attrs = ["x", "y"]; attrs = ["x", "y"];
break; break;
@ -3281,6 +3284,22 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
var m = transformListToTransform(childTlist).matrix; var m = transformListToTransform(childTlist).matrix;
// Convert a matrix to a scale if applicable
// if(hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) {
// if(m.b==0 && m.c==0 && m.e==0 && m.f==0) {
// childTlist.removeItem(0);
// var translateOrigin = svgroot.createSVGTransform(),
// scale = svgroot.createSVGTransform(),
// translateBack = svgroot.createSVGTransform();
// translateOrigin.setTranslate(0, 0);
// scale.setScale(m.a, m.d);
// translateBack.setTranslate(0, 0);
// childTlist.appendItem(translateBack);
// childTlist.appendItem(scale);
// childTlist.appendItem(translateOrigin);
// }
// }
var angle = getRotationAngle(child); var angle = getRotationAngle(child);
var old_start_transform = start_transform; var old_start_transform = start_transform;
var childxforms = []; var childxforms = [];
@ -3445,6 +3464,8 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
start_transform = child.getAttribute("transform"); start_transform = child.getAttribute("transform");
var childTlist = getTransformList(child); var childTlist = getTransformList(child);
if (!childTlist) continue;
var em = matrixMultiply(m, transformListToTransform(childTlist).matrix); var em = matrixMultiply(m, transformListToTransform(childTlist).matrix);
var e2m = svgroot.createSVGTransform(); var e2m = svgroot.createSVGTransform();
e2m.setMatrix(em); e2m.setMatrix(em);
@ -3595,8 +3616,11 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
// if we had [M][T][S][T] we want to extract the matrix equivalent of // if we had [M][T][S][T] we want to extract the matrix equivalent of
// [T][S][T] and push it down to the element // [T][S][T] and push it down to the element
if (N >= 3 && tlist.getItem(N-2).type == 3 && if (N >= 3 && tlist.getItem(N-2).type == 3 &&
tlist.getItem(N-3).type == 2 && tlist.getItem(N-1).type == 2 && tlist.getItem(N-3).type == 2 && tlist.getItem(N-1).type == 2)
selected.nodeName != "use")
// Removed this so a <use> with a given [T][S][T] would convert to a matrix.
// Is that bad?
// && selected.nodeName != "use"
{ {
operation = 3; // scale operation = 3; // scale
m = transformListToTransform(tlist,N-3,N-1).matrix; m = transformListToTransform(tlist,N-3,N-1).matrix;
@ -4522,12 +4546,13 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// to be a translate // to be a translate
var xform = svgroot.createSVGTransform(); var xform = svgroot.createSVGTransform();
var tlist = getTransformList(selected); var tlist = getTransformList(selected);
// Note that if Webkit and there's no ID for this
// element, the dummy transform may have gotten lost.
// This results in unexpected behaviour
xform.setTranslate(dx,dy); xform.setTranslate(dx,dy);
if(tlist.numberOfItems) { if(tlist.numberOfItems) {
tlist.replaceItem(xform, 0); tlist.replaceItem(xform, 0);
// TODO: Webkit returns null here, find out why
// console.log(selected.getAttribute("transform"))
} else { } else {
tlist.appendItem(xform); tlist.appendItem(xform);
} }
@ -5077,7 +5102,10 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
to: cur_shape.opacity, to: cur_shape.opacity,
dur: ani_dur dur: ani_dur
}).appendTo(element); }).appendTo(element);
try {
// Fails in FF4 on foreignObject
c_ani[0].beginElement(); c_ani[0].beginElement();
} catch(e){}
} else { } else {
ani_dur = 0; ani_dur = 0;
} }
@ -5174,6 +5202,7 @@ var textActions = canvas.textActions = function() {
function setCursor(index) { function setCursor(index) {
var empty = (textinput.value === ""); var empty = (textinput.value === "");
$(textinput).focus();
if(!arguments.length) { if(!arguments.length) {
if(empty) { if(empty) {
@ -5430,6 +5459,8 @@ var textActions = canvas.textActions = function() {
allow_dbl = false; allow_dbl = false;
current_mode = "textedit"; current_mode = "textedit";
selectorManager.requestSelector(curtext).showGrips(false); selectorManager.requestSelector(curtext).showGrips(false);
// Make selector group accept clicks
var sel = selectorManager.requestSelector(curtext).selectorRect;
textActions.init(); textActions.init();
$(curtext).css('cursor', 'text'); $(curtext).css('cursor', 'text');
@ -5480,7 +5511,7 @@ var textActions = canvas.textActions = function() {
}, },
setInputElem: function(elem) { setInputElem: function(elem) {
textinput = elem; textinput = elem;
$(textinput).blur(hideCursor); // $(textinput).blur(hideCursor);
}, },
clear: function() { clear: function() {
current_text = null; current_text = null;
@ -5562,7 +5593,9 @@ var pathActions = this.pathActions = function() {
8: ['x','y','x1','y1'], 8: ['x','y','x1','y1'],
10: ['x','y','r1','r2','angle','largeArcFlag','sweepFlag'], 10: ['x','y','r1','r2','angle','largeArcFlag','sweepFlag'],
12: ['x'], 12: ['x'],
14: ['y'] 14: ['y'],
16: ['x','y','x2','y2'],
18: ['x','y']
}; };
function retPath() { function retPath() {
@ -7823,6 +7856,94 @@ var uniquifyElems = this.uniquifyElems = function(g) {
obj_num++; obj_num++;
} }
// Function: convertToGroup
// Converts selected/given <use> or child SVG element to a group
var convertToGroup = this.convertToGroup = function(elem) {
if(!elem) {
elem = selectedElements[0];
}
var $elem = $(elem);
var batchCmd = new BatchCommand();
var ts;
if($elem.data('gsvg')) {
// Use the gsvg as the new group
var svg = elem.firstChild;
var pt = $(svg).attr(['x', 'y']);
$(elem.firstChild.firstChild).unwrap();
$(elem).removeData('gsvg');
var tlist = getTransformList(elem);
var xform = svgroot.createSVGTransform();
xform.setTranslate(pt.x, pt.y);
tlist.appendItem(xform);
recalculateDimensions(elem);
call("selected", [elem]);
} else if($elem.data('symbol')) {
elem = $elem.data('symbol');
ts = $elem.attr('transform');
var pos = $elem.attr(['x','y']);
// Not ideal, but works
ts += "translate(" + pos.x + "," + pos.y + ")";
var prev = $elem.prev();
// Remove <use> element
batchCmd.addSubCommand(new RemoveElementCommand($elem[0], $elem[0].parentNode));
$elem.remove();
// See if other elements reference this symbol
var has_more = $(svgcontent).find('use:data(symbol)').length;
var g = svgdoc.createElementNS(svgns, "g");
var childs = elem.childNodes;
for(var i = 0; i < childs.length; i++) {
g.appendChild(childs[i].cloneNode(true));
}
// while (elem.hasChildNodes())
// g.appendChild(elem.firstChild.cloneNode(true));
if (ts)
g.setAttribute("transform", ts);
var parent = elem.parentNode;
uniquifyElems(g);
// now give the g itself a new id
g.id = getNextId();
prev.after(g);
if(parent) {
if(!has_more) {
// remove symbol/svg element
parent.removeChild(elem);
batchCmd.addSubCommand(new RemoveElementCommand(elem, parent));
}
batchCmd.addSubCommand(new InsertElementCommand(g));
}
// recalculate dimensions on the top-level children so that unnecessary transforms
// are removed
walkTreePost(g, function(n){try{recalculateDimensions(n)}catch(e){console.log(e)}});
clearSelection();
addToSelection([g]);
addCommandToHistory(batchCmd);
} else {
console.log('Unexpected element to ungroup:', elem);
}
}
// //
// Function: setSvgString // Function: setSvgString
// This function sets the current drawing as the input SVG XML. // This function sets the current drawing as the input SVG XML.
@ -7879,11 +8000,14 @@ this.setSvgString = function(xmlString) {
// Wrap child SVGs in group elements // Wrap child SVGs in group elements
$(svgcontent).find('svg').each(function() { $(svgcontent).find('svg').each(function() {
// Skip if it's in a <defs>
if($(this).closest('defs').length) return;
uniquifyElems(this); uniquifyElems(this);
// Check if it already has a gsvg group // Check if it already has a gsvg group
var pa = this.parentNode; var pa = this.parentNode;
if(pa.children.length === 1 && pa.nodeName === 'g') { if(pa.childNodes.length === 1 && pa.nodeName === 'g') {
$(pa).data('gsvg', this); $(pa).data('gsvg', this);
pa.id = pa.id || getNextId(); pa.id = pa.id || getNextId();
} else { } else {
@ -7891,6 +8015,16 @@ this.setSvgString = function(xmlString) {
} }
}); });
// Set ref element for <use> elements
$(svgcontent).find('use').each(function() {
var id = this.getAttributeNS(xlinkns,"href").substr(1);
var ref_elem = getElem(id);
$(this).data('ref', ref_elem);
if(ref_elem.tagName == 'symbol' || ref_elem.tagName == 'svg') {
$(this).data('symbol', ref_elem);
}
});
// convert gradients with userSpaceOnUse to objectBoundingBox // convert gradients with userSpaceOnUse to objectBoundingBox
$(svgcontent).find('linearGradient, radialGradient').each(function() { $(svgcontent).find('linearGradient, radialGradient').each(function() {
var grad = this; var grad = this;
@ -8013,12 +8147,11 @@ this.setSvgString = function(xmlString) {
}; };
// Function: importSvgString // Function: importSvgString
// This function imports the input SVG XML into the current layer in the drawing // This function imports the input SVG XML as a <symbol> in the <defs>, then adds a
// <use> to the current layer.
// //
// Parameters: // Parameters:
// xmlString - The SVG as XML text. // xmlString - The SVG as XML text.
// toElements - Boolean indicating whether or not to convert the SVG to a group
// with children
// //
// Returns: // Returns:
// This function returns false if the import was unsuccessful, true otherwise. // This function returns false if the import was unsuccessful, true otherwise.
@ -8029,8 +8162,7 @@ this.setSvgString = function(xmlString) {
// arbitrary transform lists, but makes some assumptions about how the transform list // arbitrary transform lists, but makes some assumptions about how the transform list
// was obtained // was obtained
// * import should happen in top-left of current zoomed viewport // * import should happen in top-left of current zoomed viewport
// * create a new layer for the imported SVG this.importSvgString = function(xmlString) {
this.importSvgString = function(xmlString, toElements) {
try { try {
// convert string into XML document // convert string into XML document
var newDoc = Utils.text2xml(xmlString); var newDoc = Utils.text2xml(xmlString);
@ -8040,11 +8172,11 @@ this.importSvgString = function(xmlString, toElements) {
var batchCmd = new BatchCommand("Change Source"); var batchCmd = new BatchCommand("Change Source");
// import new svg document into our document // import new svg document into our document
var importedNode = svgdoc.importNode(newDoc.documentElement, true); var svg = svgdoc.importNode(newDoc.documentElement, true);
var innerw = convertToNum('width', importedNode.getAttribute("width")), var innerw = convertToNum('width', svg.getAttribute("width")),
innerh = convertToNum('height', importedNode.getAttribute("height")), innerh = convertToNum('height', svg.getAttribute("height")),
innervb = importedNode.getAttribute("viewBox"), innervb = svg.getAttribute("viewBox"),
// if no explicit viewbox, create one out of the width and height // if no explicit viewbox, create one out of the width and height
vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh]; vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
for (var j = 0; j < 4; ++j) for (var j = 0; j < 4; ++j)
@ -8065,78 +8197,39 @@ this.importSvgString = function(xmlString, toElements) {
// Hack to make recalculateDimensions understand how to scale // Hack to make recalculateDimensions understand how to scale
ts = "translate(0) " + ts + " translate(0)"; ts = "translate(0) " + ts + " translate(0)";
if(!toElements) { // Uncomment this once Firefox has fixed their symbol bug:
var elem = $(importedNode).appendTo(current_layer)[0]; // https://bugzilla.mozilla.org/show_bug.cgi?id=353575
groupSvgElem(elem); // var symbol = svgdoc.createElementNS(svgns, "symbol");
// while (svg.firstChild) {
// symbol.appendChild(svg.firstChild);
// }
// var attrs = svg.attributes;
// for(var i=0; i < attrs.length; i++) {
// var attr = attrs[i];
// symbol.setAttribute(attr.nodeName, attr.nodeValue);
// }
var symbol = svg;
symbol.id = getNextId();
var use_el = svgdoc.createElementNS(svgns, "use");
use_el.id = getNextId();
use_el.setAttributeNS(xlinkns, "xlink:href", "#" + symbol.id);
findDefs().appendChild(symbol);
current_layer.appendChild(use_el);
clearSelection(); clearSelection();
var g = elem.parentNode; use_el.setAttribute("transform", ts);
recalculateDimensions(use_el);
$(use_el).data('symbol', symbol);
addToSelection([use_el]);
return true;
g.setAttribute("transform", ts);
recalculateDimensions(g);
addToSelection([g]);
return;
}
// TODO: Find way to add this in a recalculateDimensions-parsable way // TODO: Find way to add this in a recalculateDimensions-parsable way
// if (vb[0] != 0 || vb[1] != 0) // if (vb[0] != 0 || vb[1] != 0)
// ts = "translate(" + (-vb[0]) + "," + (-vb[1]) + ") " + ts; // ts = "translate(" + (-vb[0]) + "," + (-vb[1]) + ") " + ts;
// add all children of the imported <svg> to the <g> we create
var g = svgdoc.createElementNS(svgns, "g");
while (importedNode.hasChildNodes())
g.appendChild(importedNode.firstChild);
if (ts)
g.setAttribute("transform", ts);
uniquifyElems(g);
// now give the g itself a new id
g.id = getNextId();
current_layer.appendChild(g);
// change image href vals if possible
// $(svgcontent).find('image').each(function() {
// var image = this;
// preventClickDefault(image);
// var val = this.getAttributeNS(xlinkns, "href");
// if(val.indexOf('data:') === 0) {
// // Check if an SVG-edit data URI
// var m = val.match(/svgedit_url=(.*?);/);
// if(m) {
// var url = decodeURIComponent(m[1]);
// $(new Image()).load(function() {
// image.setAttributeNS(xlinkns,'xlink:href',url);
// }).attr('src',url);
// }
// }
// // Add to encodableImages if it loads
// canvas.embedImage(val);
// });
// recalculate dimensions on the top-level children so that unnecessary transforms
// are removed
walkTreePost(svgcontent, function(n){try{recalculateDimensions(n)}catch(e){console.log(e)}});
batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
// reset zoom - TODO: why?
// current_zoom = 1;
// identify layers
// identifyLayers();
// reset transform lists
svgTransformLists = {};
clearSelection();
addCommandToHistory(batchCmd);
call("changed", [svgcontent]);
} catch(e) { } catch(e) {
console.log(e); console.log(e);
return false; return false;
@ -8614,7 +8707,7 @@ this.getZoom = function(){return current_zoom;};
// Function: getVersion // Function: getVersion
// Returns a string which describes the revision number of SvgCanvas. // Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function() { this.getVersion = function() {
return "svgcanvas.js ($Rev: 1636 $)"; return "svgcanvas.js ($Rev: 1653 $)";
}; };
// Function: setUiStrings // Function: setUiStrings
@ -8636,9 +8729,12 @@ this.setConfig = function(opts) {
} }
// Function: getDocumentTitle // Function: getDocumentTitle
// Returns the current document title or an empty string if not found // Returns the current group/SVG's title contents
this.getDocumentTitle = function() { this.getTitle = function(elem) {
var childs = svgcontent.childNodes; elem = elem || selectedElements[0];
if(!elem) return;
elem = $(elem).data('gsvg') || $(elem).data('symbol') || elem;
var childs = elem.childNodes;
for (var i=0; i<childs.length; i++) { for (var i=0; i<childs.length; i++) {
if(childs[i].nodeName == 'title') { if(childs[i].nodeName == 'title') {
return childs[i].textContent; return childs[i].textContent;
@ -8647,6 +8743,43 @@ this.getDocumentTitle = function() {
return ''; return '';
} }
// Function: setGroupTitle
// Sets the group/SVG's title content
// TODO: Combine this with setDocumentTitle
this.setGroupTitle = function(val) {
var elem = selectedElements[0];
elem = $(elem).data('gsvg') || elem;
var ts = $(elem).children('title');
var batchCmd = new BatchCommand("Set Label");
if(!val.length) {
// Remove title element
batchCmd.addSubCommand(new RemoveElementCommand(ts[0], elem));
ts.remove();
} else if(ts.length) {
// Change title contents
var title = ts[0];
batchCmd.addSubCommand(new ChangeElementCommand(title, {'#text': title.textContent}));
title.textContent = val;
} else {
// Add title element
title = svgdoc.createElementNS(svgns, "title");
title.textContent = val;
$(elem).prepend(title);
batchCmd.addSubCommand(new InsertElementCommand(title));
}
addCommandToHistory(batchCmd);
}
// Function: getDocumentTitle
// Returns the current document title or an empty string if not found
this.getDocumentTitle = function() {
return canvas.getTitle(svgcontent);
}
// Function: setDocumentTitle // Function: setDocumentTitle
// Adds/updates a title element for the document with the given name. // Adds/updates a title element for the document with the given name.
// This is an undoable action // This is an undoable action
@ -9357,6 +9490,9 @@ this.setBold = function(b) {
{ {
changeSelectedAttribute("font-weight", b ? "bold" : "normal"); changeSelectedAttribute("font-weight", b ? "bold" : "normal");
} }
if(!selectedElements[0].textContent) {
textActions.setCursor();
}
}; };
// Function: getItalic // Function: getItalic
@ -9386,6 +9522,9 @@ this.setItalic = function(i) {
{ {
changeSelectedAttribute("font-style", i ? "italic" : "normal"); changeSelectedAttribute("font-style", i ? "italic" : "normal");
} }
if(!selectedElements[0].textContent) {
textActions.setCursor();
}
}; };
// Function: getFontFamily // Function: getFontFamily
@ -9402,6 +9541,9 @@ this.getFontFamily = function() {
this.setFontFamily = function(val) { this.setFontFamily = function(val) {
cur_text.font_family = val; cur_text.font_family = val;
changeSelectedAttribute("font-family", val); changeSelectedAttribute("font-family", val);
if(selectedElements[0] && !selectedElements[0].textContent) {
textActions.setCursor();
}
}; };
// Function: getFontSize // Function: getFontSize
@ -9417,8 +9559,10 @@ this.getFontSize = function() {
// val - Float with the new font size // val - Float with the new font size
this.setFontSize = function(val) { this.setFontSize = function(val) {
cur_text.font_size = val; cur_text.font_size = val;
textActions.toSelectMode();
changeSelectedAttribute("font-size", val); changeSelectedAttribute("font-size", val);
if(!selectedElements[0].textContent) {
textActions.setCursor();
}
}; };
// Function: getText // Function: getText
@ -9723,7 +9867,7 @@ var changeSelectedAttributeNoUndo = function(attr, newValue, elems) {
if (elem == null) continue; if (elem == null) continue;
// Go into "select" mode for text changes // Go into "select" mode for text changes
if(current_mode === "textedit" && attr !== "#text") { if(current_mode === "textedit" && attr !== "#text" && elem.textContent.length) {
textActions.toSelectMode(elem); textActions.toSelectMode(elem);
} }
@ -9771,7 +9915,7 @@ var changeSelectedAttributeNoUndo = function(attr, newValue, elems) {
// Use the Firefox ffClone hack for text elements with gradients or // Use the Firefox ffClone hack for text elements with gradients or
// where other text attributes are changed. // where other text attributes are changed.
if(elem.nodeName == 'text') { if(elem.nodeName == 'text') {
if((newValue+'').indexOf('url') == 0 || $.inArray(attr, ['font-size','font-family','x','y']) != -1) { if((newValue+'').indexOf('url') == 0 || $.inArray(attr, ['font-size','font-family','x','y']) != -1 && elem.textContent) {
elem = ffClone(elem); elem = ffClone(elem);
} }
} }
@ -9899,10 +10043,17 @@ this.groupSelectedElements = function() {
// significant recalculations to apply group's transforms, etc to its children // significant recalculations to apply group's transforms, etc to its children
this.ungroupSelectedElement = function() { this.ungroupSelectedElement = function() {
var g = selectedElements[0]; var g = selectedElements[0];
if($(g).data('gsvg') || $(g).data('symbol')) {
// Is svg, so actually convert to group
convertToGroup(g);
return;
}
if (g.tagName == "g") { if (g.tagName == "g") {
var batchCmd = new BatchCommand("Ungroup Elements"); var batchCmd = new BatchCommand("Ungroup Elements");
var parent = g.parentNode; var parent = g.parentNode;
var anchor = g.previousSibling; var anchor = g.nextSibling;
var children = new Array(g.childNodes.length); var children = new Array(g.childNodes.length);
var xform = g.getAttribute("transform"); var xform = g.getAttribute("transform");
// get consolidated matrix // get consolidated matrix
@ -9926,6 +10077,14 @@ this.ungroupSelectedElement = function() {
var elem = g.firstChild; var elem = g.firstChild;
var oldNextSibling = elem.nextSibling; var oldNextSibling = elem.nextSibling;
var oldParent = elem.parentNode; var oldParent = elem.parentNode;
// Remove child title elements
if(elem.tagName == 'title') {
batchCmd.addSubCommand(new RemoveElementCommand(elem, oldParent));
oldParent.removeChild(elem);
continue;
}
children[i++] = elem = parent.insertBefore(elem, anchor); children[i++] = elem = parent.insertBefore(elem, anchor);
batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)); batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent));
@ -9974,6 +10133,9 @@ this.ungroupSelectedElement = function() {
var chtlist = getTransformList(elem); var chtlist = getTransformList(elem);
// Hopefully not a problem to add this. Necessary for elements like <desc/>
if(!chtlist) continue;
if (glist.numberOfItems) { if (glist.numberOfItems) {
// TODO: if the group's transform is just a rotate, we can always transfer the // TODO: if the group's transform is just a rotate, we can always transfer the
// rotate() down to the children (collapsing consecutive rotates and factoring // rotate() down to the children (collapsing consecutive rotates and factoring

4
public/svg-edit/editor/svgicons/jquery.svgicons.js
View file

@ -172,6 +172,8 @@ $(function() {
$(function() { $(function() {
getIcons('ajax'); getIcons('ajax');
}); });
} else {
$(useFallback);
} }
} }
} }
@ -252,7 +254,7 @@ $(function() {
} }
if(isOpera) { if(isOpera) {
setTimeout(function() { setTimeout(function() {
icon.attr('style','visibility:visible;'); icon.removeAttr('style');
},1); },1);
} }
} }