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

Added stroke-linejoin support together with experimental UI for stroke styles 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1496 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-04-01 19:02:36 +00:00
parent 3bafd77eea
commit e445baeadd
4 changed files with 79 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
editor/svg-editor.css
View File

@ -698,6 +698,20 @@ span.zoom_tool {
height: 26px; height: 26px;
} }
#toggle_stroke_tools {
letter-spacing: -.2em;
padding-right: 8px;
}
#toggle_stroke_tools:hover {
cursor: pointer;
background: #FFC;
}
.stroke_tool {
display: none;
}
.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;

19
editor/svg-editor.html
View File

@ -340,6 +340,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<label id="tool_node_y">y: <label id="tool_node_y">y:
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/> <input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
</label> </label>
<select id="seg_type" title="Change Segment type"> <select id="seg_type" title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option> <option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option> <option id="curve_segments" value="6">Curve</option>
@ -429,7 +430,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/> <input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
</label> </label>
<label> <label class="stroke_tool">
<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>
@ -438,6 +439,22 @@ 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>
<label class="stroke_tool">
<select id="stroke_linejoin" title="Change Linejoin type">
<option id="linejoin_miter" selected="selected" value="miter">Miter</option>
<option id="linejoin_round" value="round">Round</option>
<option id="linejoin_bevel" value="bevel">Bevel</option>
</select>
</label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
&gt;&gt;
</div>
</div> </div>
</div> </div>

17
editor/svg-editor.js
View File

@ -1015,6 +1015,7 @@
$('#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");
} }
// All elements including image and group have opacity // All elements including image and group have opacity
@ -1286,10 +1287,16 @@
} }
$('#stroke_style').change(function(){ $('#stroke_style').change(function(){
svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value); svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
operaRepaint(); operaRepaint();
}); });
$('#stroke_linejoin').change(function(){
svgCanvas.setStrokeAttr('stroke-linejoin', $(this).val());
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)
$('select').change(function(){$(this).blur();}); $('select').change(function(){$(this).blur();});
@ -1399,6 +1406,14 @@
updateToolButtonState(); updateToolButtonState();
}); });
$("#toggle_stroke_tools").toggle(function() {
$(".stroke_tool").css('display','table-cell');
$(this).text('<<');
}, function() {
$(".stroke_tool").css('display','none');
$(this).text('>>');
});
// This is a common function used when a tool has been clicked (chosen) // This is a common function used when a tool has been clicked (chosen)
// It does several common things: // It does several common things:
// - removes the tool_button_current class from whatever tool currently has it // - removes the tool_button_current class from whatever tool currently has it

51
editor/svgcanvas.js
View File

@ -1143,6 +1143,7 @@ function BatchCommand(text) {
'opacity':1, 'opacity':1,
'stroke':'none', 'stroke':'none',
'stroke-dasharray':'none', 'stroke-dasharray':'none',
'stroke-linejoin':'miter',
'stroke-opacity':1, 'stroke-opacity':1,
'stroke-width':1, 'stroke-width':1,
'rx':0, 'rx':0,
@ -1211,7 +1212,8 @@ function BatchCommand(text) {
stroke_paint: null, stroke_paint: null,
stroke_opacity: curConfig.initStroke.opacity, stroke_opacity: curConfig.initStroke.opacity,
stroke_width: curConfig.initStroke.width, stroke_width: curConfig.initStroke.width,
stroke_style: 'none', stroke_dasharray: 'none',
stroke_linejoin: 'none',
opacity: curConfig.initOpacity opacity: curConfig.initOpacity
} }
}; };
@ -3013,10 +3015,10 @@ function BatchCommand(text) {
"fill": "none", "fill": "none",
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": stroke_w, "stroke-width": stroke_w,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"stroke-linecap": "round", "stroke-linecap": "round",
"stroke-linejoin": "round", "stroke-linejoin": cur_shape.stroke_linejoin,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:none" "style": "pointer-events:none"
} }
@ -3063,7 +3065,8 @@ function BatchCommand(text) {
"fill": cur_shape.fill, "fill": cur_shape.fill,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
@ -3084,7 +3087,8 @@ function BatchCommand(text) {
"id": getNextId(), "id": getNextId(),
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": stroke_w, "stroke-width": stroke_w,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill": "none", "fill": "none",
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
@ -3104,7 +3108,8 @@ function BatchCommand(text) {
"fill": cur_shape.fill, "fill": cur_shape.fill,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
@ -3125,7 +3130,8 @@ function BatchCommand(text) {
"fill": cur_shape.fill, "fill": cur_shape.fill,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
@ -3144,7 +3150,8 @@ function BatchCommand(text) {
"fill": cur_text.fill, "fill": cur_text.fill,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_text.stroke_width, "stroke-width": cur_text.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
// fix for bug where text elements were always 50% opacity // fix for bug where text elements were always 50% opacity
@ -3531,7 +3538,8 @@ function BatchCommand(text) {
cur_properties.stroke = selected.getAttribute("stroke"); cur_properties.stroke = selected.getAttribute("stroke");
cur_properties.stroke_opacity = selected.getAttribute("stroke-opacity"); cur_properties.stroke_opacity = selected.getAttribute("stroke-opacity");
cur_properties.stroke_width = selected.getAttribute("stroke-width"); cur_properties.stroke_width = selected.getAttribute("stroke-width");
cur_properties.stroke_style = selected.getAttribute("stroke-dasharray"); cur_properties.stroke_dasharray = selected.getAttribute("stroke-dasharray");
cur_properties.stroke_linejoin = selected.getAttribute("stroke-linejoin");
} }
if (selected.tagName == "text") { if (selected.tagName == "text") {
cur_text.font_size = selected.getAttribute("font-size"); cur_text.font_size = selected.getAttribute("font-size");
@ -3631,7 +3639,8 @@ function BatchCommand(text) {
"fill": cur_shape.fill, "fill": cur_shape.fill,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"opacity": cur_shape.opacity, "opacity": cur_shape.opacity,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
@ -3656,7 +3665,8 @@ function BatchCommand(text) {
"fill": cur_shape.fill, "fill": cur_shape.fill,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"opacity": cur_shape.opacity, "opacity": cur_shape.opacity,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
@ -4640,7 +4650,8 @@ function BatchCommand(text) {
"fill": "none", "fill": "none",
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"opacity": cur_shape.opacity, "opacity": cur_shape.opacity,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
@ -4908,7 +4919,8 @@ function BatchCommand(text) {
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:inherit" "style": "pointer-events:inherit"
@ -5627,7 +5639,8 @@ function BatchCommand(text) {
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"stroke": cur_shape.stroke, "stroke": cur_shape.stroke,
"stroke-width": cur_shape.stroke_width, "stroke-width": cur_shape.stroke_width,
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_dasharray,
"stroke-linejoin": cur_shape.stroke_linejoin,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"opacity": cur_shape.opacity, "opacity": cur_shape.opacity,
"visibility":"hidden" "visibility":"hidden"
@ -7077,12 +7090,8 @@ function BatchCommand(text) {
} }
}; };
this.getStrokeStyle = function() { this.setStrokeAttr = function(attr, val) {
return cur_shape.stroke_style; cur_shape[attr.replace('-','_')] = val;
};
this.setStrokeStyle = function(val) {
cur_shape.stroke_style = val;
var elems = []; var elems = [];
var i = selectedElements.length; var i = selectedElements.length;
while (i--) { while (i--) {
@ -7095,7 +7104,7 @@ function BatchCommand(text) {
} }
} }
if (elems.length > 0) { if (elems.length > 0) {
this.changeSelectedAttribute("stroke-dasharray", val, elems); this.changeSelectedAttribute(attr, val, elems);
} }
}; };