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;
}
#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 {
-moz-border-radius-topleft: 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:
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
</label>
<select id="seg_type" title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</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"/>
</label>
<label>
<label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&mdash;</option>
<option value="2,2">...</option>
@ -437,7 +438,23 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<option value="5,2,2,2">- .</option>
<option value="5,2,2,2,2,2">- ..</option>
</select>
</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>

17
editor/svg-editor.js
View File

@ -1015,6 +1015,7 @@
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
$('#stroke_linejoin').val(selectedElement.getAttribute("stroke-linejoin")||"miter");
}
// All elements including image and group have opacity
@ -1286,9 +1287,15 @@
}
$('#stroke_style').change(function(){
svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
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)
$('select').change(function(){$(this).blur();});
@ -1399,6 +1406,14 @@
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)
// It does several common things:
// - removes the tool_button_current class from whatever tool currently has it

53
editor/svgcanvas.js
View File

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