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

Converted linejoin options to icons 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1505 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-04-06 15:53:21 +00:00
parent 9b04d4689e
commit 6f50b1fdc4
4 changed files with 99 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
editor/images/svg_edit_icons.svg
View File

@ -738,6 +738,60 @@
</svg> </svg>
</g> </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"/>
<title>Layer 1</title>
<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"/>
<title>Layer 1</title>
<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"/>
<title>Layer 1</title>
<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>

15
editor/svg-editor.css
View File

@ -631,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 {
@ -720,7 +721,7 @@ span.zoom_tool {
background: #F0F0F0; background: #F0F0F0;
} }
#svg_editor #cur_linecap { #svg_editor .stroke_tool div div {
-moz-user-select: none; -moz-user-select: none;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -729,25 +730,25 @@ span.zoom_tool {
border: 1px solid #DDD; border: 1px solid #DDD;
} }
#svg_editor #cur_linecap:hover { #svg_editor .stroke_tool:hover div > * {
background-color: #FFC; background-color: #FFC;
} }
#svg_editor .stroke_tool.down #cur_linecap, #svg_editor .stroke_tool.down div div,
#svg_editor .stroke_tool.down button { #svg_editor .stroke_tool.down button {
border: 1px inset gray; border: 1px inset gray;
background: #F4E284; background: #F4E284;
} }
#stroke_linecap > div { .stroke_tool > div {
width: 42px; width: 42px;
} }
#stroke_linecap > div > * { .stroke_tool > div > * {
float: left; float: left;
} }
ul#linecap_opts { #option_lists ul {
display: none; display: none;
position: absolute; position: absolute;
height: 90px; height: 90px;
@ -761,7 +762,7 @@ ul#linecap_opts {
background-color: #F4E284; background-color: #F4E284;
} }
#svg_editor ul#linecap_opts li { #svg_editor #option_lists ul li {
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;

50
editor/svg-editor.html
View File

@ -440,27 +440,14 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<option value="5,2,2,2,2,2">- ..</option> <option value="5,2,2,2,2,2">- ..</option>
</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>Join:</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">
<span>Cap:</span>
<select id="stroke_linecap" title="Change Linecap type">
<option id="linecap_butt" selected="selected" value="butt">Butt</option>
<option id="linecap_round" value="round">Round</option>
<option id="linecap_square" value="square">Square</option>
</select>
</label>
-->
<div class="stroke_tool dropdown" id="stroke_linecap"> <div class="stroke_tool dropdown" id="stroke_linecap">
<div> <div>
<div id="cur_linecap" title="Linecap: Butt"></div> <div id="cur_linecap" title="Linecap: Butt"></div>
@ -472,9 +459,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
&gt;&gt; &gt;&gt;
</div> </div>
</div> </div>
</div> </div>
@ -505,11 +489,19 @@ 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>
<ul id="linecap_opts"> <div id="option_lists">
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li> <ul id="linejoin_opts">
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li> <li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li> <li class="tool_button" id="linejoin_round" title="Linecap: Round"></li>
</ul> <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 -->

18
editor/svg-editor.js
View File

@ -314,6 +314,10 @@
'#linecap_round':'linecap_round', '#linecap_round':'linecap_round',
'#linecap_square':'linecap_square', '#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',
@ -1020,8 +1024,9 @@
$('#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'; var attr = selectedElement.getAttribute("stroke-linecap") || 'butt';
$('#linecap_' + attr).mouseup(); $('#linecap_' + attr).mouseup();
@ -1689,6 +1694,15 @@
$.resizeSvgIcons({'#cur_linecap .svg_icon': 20}); $.resizeSvgIcons({'#cur_linecap .svg_icon': 20});
}, true); }, 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