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

Buglet in latest SVG-Edit

Browse source 
Sync with latest SVG-Edit.
Among other things, fixes Issue 512.
This commit is contained in:
Jacques Distler 2010-04-06 13:39:21 -05:00
parent da0c6a2ea1
commit 6d5db0739a
5 changed files with 308 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -300,6 +300,12 @@
</svg> </svg>
</g> </g>
<g id="arrow_right_big">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 50">
<path stroke="#000000" fill="#000000" d="m0,0l0,50l25,-25l-25,-25z"/>
</svg>
</g>
<g id="arrow_down"> <g id="arrow_down">
<svg viewBox="0 0 50 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg viewBox="0 0 50 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path transform="rotate(90, 26, 13)" d="m14,-12l0,50l25,-25l-25,-25z" fill="#000000" stroke="#000000"/> <path transform="rotate(90, 26, 13)" d="m14,-12l0,50l25,-25l-25,-25z" fill="#000000" stroke="#000000"/>
@ -678,6 +684,108 @@
</svg> </svg>
</g> </g>
<g id="linecap_butt">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
<stop offset="0" stop-color="#000000" stop-opacity="1"/>
<stop offset="1" stop-color="#000000" stop-opacity="0"/>
</linearGradient>
</defs>
<g>
<rect fill="url(#svg_8)" stroke="#a0a0a0" stroke-width="2" x="-15.20196" y="43.5974" width="94.8373" height="50.3728" id="svg_3" transform="rotate(-45, 32.2148, 68.7832)"/>
<path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#00ffff" fill="none"/>
<path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke-width="0" stroke="#000000" fill="#00ffff"/>
</g>
</svg>
</g>
<g id="linecap_square">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
<stop offset="0" stop-color="#000000" stop-opacity="1"/>
<stop offset="1" stop-color="#000000" stop-opacity="0"/>
</linearGradient>
</defs>
<g>
<rect fill="url(#svg_8)" stroke="#000000" stroke-width="0" x="-18.51568" y="35.5974" width="117.46469" height="50.3728" id="svg_3" transform="rotate(-45, 40.2168, 60.7832)"/>
<path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#00ffff" fill="none"/>
<path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke-width="0" stroke="#000000" fill="#00ffff"/>
</g>
</svg>
</g>
<g id="linecap_round">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path transform="rotate(-45, 41.5117, 59.4648)" id="svg_3" d="m-19.0679,34.2946l94.8359,0c36.499,-1.4142 33.67101,48.9569 0,50.3711l-94.8359,0l0,-50.3711z" stroke-width="2" stroke="#a0a0a0" fill="url(#svg_8)"/>
<path id="svg_1" d="m6.63133,95.07755l59.17515,-59.17515" stroke-width="3" stroke="#00ffff" fill="none"/>
<path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke-width="0" stroke="#000000" fill="#00ffff"/>
</g>
</svg>
</g>
<g id="linejoin_miter">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
<path transform="rotate(90, 57.8925, 50.2519)" fill="#00ffff" stroke="#000000" stroke-width="0" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
<path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#00ffff" fill="none"/>
</g>
</svg>
</g>
<g id="linejoin_bevel">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path stroke-linejoin="bevel" fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
<path transform="rotate(90, 57.8925, 50.2519)" fill="#00ffff" stroke="#000000" stroke-width="0" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
<path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#00ffff" fill="none"/>
</g>
</svg>
</g>
<g id="linejoin_round">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path stroke-linejoin="round" fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
<path transform="rotate(90, 57.8925, 50.2519)" fill="#00ffff" stroke="#000000" stroke-width="0" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
<path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#00ffff" fill="none"/>
</g>
</svg>
</g>
<g id="eye"> <g id="eye">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
<defs> <defs>

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

@ -1,4 +1,4 @@
body { body {
background: #D8D8D8; background: #D8D8D8;
} }
@ -54,6 +54,8 @@ body {
border-top: none; border-top: none;
margin-top: 2px; margin-top: 2px;
margin-left: 4px; margin-left: 4px;
position: relative;
z-index: 2;
} }
#svg_editor #stroke_bg, #svg_editor #stroke_bg,
@ -116,7 +118,7 @@ body {
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
width: 0px; width: 0px;
overflow: hidden; overflow: scroll;
margin: 0px; margin: 0px;
} }
@ -629,6 +631,7 @@ span.zoom_tool {
display: none; display: none;
background: #E8E8E8; background: #E8E8E8;
height: 350px; height: 350px;
z-index: 4;
} }
#svg_editor .tools_flyout { #svg_editor .tools_flyout {
@ -713,6 +716,59 @@ span.zoom_tool {
white-space: nowrap; white-space: nowrap;
} }
#svg_editor .stroke_tool button {
margin-top: 3px;
background: #F0F0F0;
}
#svg_editor .stroke_tool div div {
-moz-user-select: none;
width: 20px;
height: 20px;
margin: 1px 0;
padding: 1px;
border: 1px solid #DDD;
}
#svg_editor .stroke_tool:hover div > * {
background-color: #FFC;
}
#svg_editor .stroke_tool.down div div,
#svg_editor .stroke_tool.down button {
border: 1px inset gray;
background: #F4E284;
}
.stroke_tool > div {
width: 42px;
}
.stroke_tool > div > * {
float: left;
}
#option_lists ul {
display: none;
position: absolute;
height: 90px;
z-index: 3;
margin: 0;
list-style: none;
padding-left: 0;
}
#svg_editor ul li.current {
background-color: #F4E284;
}
#svg_editor #option_lists ul li {
margin: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.color_tool > *:first-child { .color_tool > *:first-child {
-moz-border-radius-topleft: 4px; -moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomleft: 4px;
@ -749,12 +805,6 @@ span.zoom_tool {
width: 140px; width: 140px;
} }
#svg_editor #tools_bottom_3 {
// position: relative;
z-index: 2;
}
#svg_editor #copyright { #svg_editor #copyright {
text-align: right; text-align: right;
padding-right: .3em; padding-right: .3em;

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

@ -433,6 +433,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</label> </label>
<label class="stroke_tool"> <label class="stroke_tool">
<span>Dash:</span>
<select id="stroke_style" title="Change stroke dash style"> <select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&mdash;</option> <option selected="selected" value="none">&mdash;</option>
<option value="2,2">...</option> <option value="2,2">...</option>
@ -442,32 +443,24 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</select> </select>
</label> </label>
<!-- TODO: Turn these into icon lists, rather than text ones --> <div class="stroke_tool dropdown" id="stroke_linejoin">
<label class="stroke_tool"> <div>
<span>Joins:</span> <div id="cur_linejoin" title="Linejoin: Miter"></div>
<select id="stroke_linejoin" title="Change Linejoin type"> <button></button>
<option id="linejoin_miter" selected="selected" value="miter">Miter</option> </div>
<option id="linejoin_round" value="round">Round</option> </div>
<option id="linejoin_bevel" value="bevel">Bevel</option>
</select>
</label>
<label class="stroke_tool"> <div class="stroke_tool dropdown" id="stroke_linecap">
<span>Caps:</span> <div>
<select id="stroke_linecap" title="Change Linecap type"> <div id="cur_linecap" title="Linecap: Butt"></div>
<option id="linecap_butt" selected="selected" value="butt">Butt</option> <button></button>
<option id="linecap_round" value="round">Round</option> </div>
<option id="linecap_square" value="square">Square</option> </div>
</select>
</label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"> <div id="toggle_stroke_tools" title="Show/hide more stroke tools">
&gt;&gt; &gt;&gt;
</div> </div>
</div> </div>
</div> </div>
@ -498,6 +491,21 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.5-preAlpha</a></div> <div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.5-preAlpha</a></div>
</div> </div>
<div id="option_lists">
<ul id="linejoin_opts">
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
<li class="tool_button" id="linejoin_round" title="Linecap: Round"></li>
<li class="tool_button" id="linejoin_bevel" title="Linecap: Bevel"></li>
</ul>
<ul id="linecap_opts">
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
</ul>
</div>
<!-- hidden divs --> <!-- hidden divs -->
<div id="color_picker"></div> <div id="color_picker"></div>

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

@ -6,7 +6,7 @@
* Copyright(c) 2010 Alexis Deveria * Copyright(c) 2010 Alexis Deveria
* Copyright(c) 2010 Pavol Rusnak * Copyright(c) 2010 Pavol Rusnak
* Copyright(c) 2010 Jeff Schiller * Copyright(c) 2010 Jeff Schiller
* Copyright(c) 2010 Narendra Sisodya * Copyright(c) 2010 Narendra Sisodiya
* *
*/ */
@ -310,6 +310,14 @@
'#tool_alignmiddle':'align_middle', '#tool_alignmiddle':'align_middle',
'#tool_alignbottom':'align_bottom', '#tool_alignbottom':'align_bottom',
'#linecap_butt,#cur_linecap':'linecap_butt',
'#linecap_round':'linecap_round',
'#linecap_square':'linecap_square',
'#linejoin_miter,#cur_linejoin':'linejoin_miter',
'#linejoin_round':'linejoin_round',
'#linejoin_bevel':'linejoin_bevel',
'#url_notice':'warning', '#url_notice':'warning',
'#layer_up':'go_up', '#layer_up':'go_up',
@ -330,7 +338,8 @@
'.dropdown button .svg_icon': 7, '.dropdown button .svg_icon': 7,
'#main_button .dropdown .svg_icon': 9, '#main_button .dropdown .svg_icon': 9,
'.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16, '.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
'.toolbar_button button .svg_icon':16 '.toolbar_button button .svg_icon':16,
'.stroke_tool div div .svg_icon': 20
}, },
callback: function(icons) { callback: function(icons) {
$('.toolbar_button button > svg, .toolbar_button button > img').each(function() { $('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
@ -1015,8 +1024,12 @@
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1); $('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none"); $('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
$('#stroke_linejoin').val(selectedElement.getAttribute("stroke-linejoin")||"miter");
$('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt"); var attr = selectedElement.getAttribute("stroke-linejoin") || 'miter';
$('#linejoin_' + attr).mouseup();
var attr = selectedElement.getAttribute("stroke-linecap") || 'butt';
$('#linecap_' + attr).mouseup();
} }
// All elements including image and group have opacity // All elements including image and group have opacity
@ -1297,10 +1310,10 @@
operaRepaint(); operaRepaint();
}); });
$('#stroke_linecap').change(function(){ // $('#stroke_linecap').change(function(){
svgCanvas.setStrokeAttr('stroke-linecap', $(this).val()); // svgCanvas.setStrokeAttr('stroke-linecap', $(this).val());
operaRepaint(); // operaRepaint();
}); // });
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better) // Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
@ -1584,6 +1597,55 @@
}); });
} }
// TODO: Combine this with addDropDown or find other way to optimize
var addAltDropDown = function(elem, list, callback, dropUp) {
var button = $(elem);
var list = $(list);
var on_button = false;
if(dropUp) {
$(elem).addClass('dropup');
}
list.find('li').bind('mouseup', function() {
callback.apply(this, arguments);
$(this).addClass('current').siblings().removeClass('current');
});
$(window).mouseup(function(evt) {
if(!on_button) {
button.removeClass('down');
list.hide();
list.css({top:0, left:0});
}
on_button = false;
});
var height = list.height();
$(elem).bind('mousedown',function() {
var off = $(elem).offset();
off.top -= list.height();
off.left += 8;
$(list).offset(off);
if (!button.hasClass('down')) {
button.addClass('down');
list.show();
on_button = true;
return false;
} else {
button.removeClass('down');
// CSS position must be reset for Webkit
list.hide();
list.css({top:0, left:0});
}
}).hover(function() {
on_button = true;
}).mouseout(function() {
on_button = false;
});
}
addDropDown('#font_family_dropdown', function() { 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();
@ -1619,6 +1681,28 @@
} }
}, true); }, true);
// $('#cur_linecap').mousedown(function() {
// $('#linecap_opts').show();
// });
addAltDropDown('#stroke_linecap', '#linecap_opts', function() {
var val = this.id.split('_')[1];
svgCanvas.setStrokeAttr('stroke-linecap', val);
operaRepaint();
var icon = $.getSvgIcon(this.id).clone();
$('#cur_linecap').empty().append(icon);
$.resizeSvgIcons({'#cur_linecap .svg_icon': 20});
}, true);
addAltDropDown('#stroke_linejoin', '#linejoin_opts', function() {
var val = this.id.split('_')[1];
svgCanvas.setStrokeAttr('stroke-linejoin', val);
operaRepaint();
var icon = $.getSvgIcon(this.id).clone();
$('#cur_linejoin').empty().append(icon);
$.resizeSvgIcons({'#cur_linejoin .svg_icon': 20});
}, true);
/* /*
When a flyout icon is selected When a flyout icon is selected
@ -3193,7 +3277,7 @@
updateCanvas(true); updateCanvas(true);
// }); // });
// var revnums = "svg-editor.js ($Rev: 1498 $) "; // var revnums = "svg-editor.js ($Rev: 1505 $) ";
// revnums += svgCanvas.getVersion(); // revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums); // $('#copyright')[0].setAttribute("title", revnums);

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

@ -1,4 +1,4 @@
/* /*
* svgcanvas.js * svgcanvas.js
* *
* Licensed under the Apache License, Version 2 * Licensed under the Apache License, Version 2
@ -5980,6 +5980,8 @@ function BatchCommand(text) {
} }
}); });
} }
this.contentW = attrs['width'];
this.contentH = attrs['height'];
content.attr(attrs); content.attr(attrs);
batchCmd.addSubCommand(new InsertElementCommand(svgcontent)); batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
@ -6742,6 +6744,8 @@ function BatchCommand(text) {
svgcontent.setAttribute('width', x); svgcontent.setAttribute('width', x);
svgcontent.setAttribute('height', y); svgcontent.setAttribute('height', y);
this.contentW = x;
this.contentH = y;
batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"width":w, "height":h})); batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"width":w, "height":h}));
svgcontent.setAttribute("viewBox", [0, 0, x/current_zoom, y/current_zoom].join(' ')); svgcontent.setAttribute("viewBox", [0, 0, x/current_zoom, y/current_zoom].join(' '));
@ -7866,23 +7870,29 @@ function BatchCommand(text) {
}; };
} }
this.contentW = this.getResolution().w;
this.contentH = this.getResolution().h;
this.updateCanvas = function(w, h, w_orig, h_orig) { this.updateCanvas = function(w, h, w_orig, h_orig) {
svgroot.setAttribute("width", w); svgroot.setAttribute("width", w);
svgroot.setAttribute("height", h); svgroot.setAttribute("height", h);
var bg = $('#canvasBackground')[0]; var bg = $('#canvasBackground')[0];
var old_x = svgcontent.getAttribute('x'); var old_x = svgcontent.getAttribute('x');
var old_y = svgcontent.getAttribute('y'); var old_y = svgcontent.getAttribute('y');
var x = (w/2 - svgcontent.getAttribute('width')*current_zoom/2); var x = (w/2 - this.contentW*current_zoom/2);
var y = (h/2 - svgcontent.getAttribute('height')*current_zoom/2); var y = (h/2 - this.contentH*current_zoom/2);
assignAttributes(svgcontent, { assignAttributes(svgcontent, {
width: this.contentW*current_zoom,
height: this.contentH*current_zoom,
'x': x, 'x': x,
'y': y 'y': y,
"viewBox" : "0 0 " + this.contentW + " " + this.contentH
}); });
assignAttributes(bg, { assignAttributes(bg, {
width: svgcontent.getAttribute('width') * current_zoom, width: svgcontent.getAttribute('width'),
height: svgcontent.getAttribute('height') * current_zoom, height: svgcontent.getAttribute('height'),
x: x, x: x,
y: y y: y
}); });
@ -8303,7 +8313,7 @@ function BatchCommand(text) {
// 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: 1498 $)"; return "svgcanvas.js ($Rev: 1504 $)";
}; };
this.setUiStrings = function(strs) { this.setUiStrings = function(strs) {