Started conversion of stroke attribute select list to icon list
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1503 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
8fac8e144b
commit
db3d8f0447
|
|
@ -684,6 +684,60 @@
|
|||
</svg>
|
||||
</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"/>
|
||||
<title>Layer 1</title>
|
||||
</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"/>
|
||||
<title>Layer 1</title>
|
||||
</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"/>
|
||||
<title>Layer 1</title>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="eye">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
|
||||
<defs>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,8 @@
|
|||
border-top: none;
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#svg_editor #stroke_bg,
|
||||
|
|
@ -713,6 +715,59 @@ span.zoom_tool {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#svg_editor .stroke_tool button {
|
||||
margin-top: 3px;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
#svg_editor #cur_linecap {
|
||||
-moz-user-select: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 1px 0;
|
||||
padding: 1px;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
|
||||
#svg_editor #cur_linecap:hover {
|
||||
background-color: #FFC;
|
||||
}
|
||||
|
||||
#svg_editor .stroke_tool.down #cur_linecap,
|
||||
#svg_editor .stroke_tool.down button {
|
||||
border: 1px inset gray;
|
||||
background: #F4E284;
|
||||
}
|
||||
|
||||
#stroke_linecap > div {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
#stroke_linecap > div > * {
|
||||
float: left;
|
||||
}
|
||||
|
||||
ul#linecap_opts {
|
||||
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 ul#linecap_opts li {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
.color_tool > *:first-child {
|
||||
-moz-border-radius-topleft: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
|
|
@ -749,12 +804,6 @@ span.zoom_tool {
|
|||
width: 140px;
|
||||
}
|
||||
|
||||
|
||||
#svg_editor #tools_bottom_3 {
|
||||
// position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#svg_editor #copyright {
|
||||
text-align: right;
|
||||
padding-right: .3em;
|
||||
|
|
|
|||
|
|
@ -451,6 +451,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
</select>
|
||||
</label>
|
||||
|
||||
<!--
|
||||
<label class="stroke_tool">
|
||||
<span>Cap:</span>
|
||||
<select id="stroke_linecap" title="Change Linecap type">
|
||||
|
|
@ -459,6 +460,13 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<option id="linecap_square" value="square">Square</option>
|
||||
</select>
|
||||
</label>
|
||||
-->
|
||||
<div class="stroke_tool dropdown" id="stroke_linecap">
|
||||
<div>
|
||||
<div id="cur_linecap" title="Linecap: Butt"></div>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
|
||||
>>
|
||||
|
|
@ -497,6 +505,13 @@ 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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<!-- hidden divs -->
|
||||
<div id="color_picker"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -310,6 +310,10 @@
|
|||
'#tool_alignmiddle':'align_middle',
|
||||
'#tool_alignbottom':'align_bottom',
|
||||
|
||||
'#linecap_butt,#cur_linecap':'linecap_butt',
|
||||
'#linecap_round':'linecap_round',
|
||||
'#linecap_square':'linecap_square',
|
||||
|
||||
'#url_notice':'warning',
|
||||
|
||||
'#layer_up':'go_up',
|
||||
|
|
@ -330,7 +334,8 @@
|
|||
'.dropdown button .svg_icon': 7,
|
||||
'#main_button .dropdown .svg_icon': 9,
|
||||
'.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) {
|
||||
$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
|
||||
|
|
@ -1016,7 +1021,10 @@
|
|||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
|
||||
$('#stroke_linejoin').val(selectedElement.getAttribute("stroke-linejoin")||"miter");
|
||||
$('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt");
|
||||
// $('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt");
|
||||
|
||||
var attr = selectedElement.getAttribute("stroke-linecap") || 'butt';
|
||||
$('#linecap_' + attr).mouseup();
|
||||
}
|
||||
|
||||
// All elements including image and group have opacity
|
||||
|
|
@ -1297,10 +1305,10 @@
|
|||
operaRepaint();
|
||||
});
|
||||
|
||||
$('#stroke_linecap').change(function(){
|
||||
svgCanvas.setStrokeAttr('stroke-linecap', $(this).val());
|
||||
operaRepaint();
|
||||
});
|
||||
// $('#stroke_linecap').change(function(){
|
||||
// svgCanvas.setStrokeAttr('stroke-linecap', $(this).val());
|
||||
// operaRepaint();
|
||||
// });
|
||||
|
||||
|
||||
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
|
||||
|
|
@ -1584,6 +1592,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() {
|
||||
var fam = $(this).text();
|
||||
$('#font_family').val($(this).text()).change();
|
||||
|
|
@ -1619,6 +1676,19 @@
|
|||
}
|
||||
}, 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);
|
||||
|
||||
/*
|
||||
|
||||
When a flyout icon is selected
|
||||
|
|
|
|||
Loading…
Reference in New Issue