diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index d1d29e48..354d99d7 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -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;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 02199c25..ed6fb8f9 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -451,6 +451,7 @@ script type="text/javascript" src="locale/locale.min.js">
+
+ -->
+
+
+
+
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 8742ee5a..f1525820 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -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