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

Fix Issue 13: Disable tool buttons when stroke or stroke+fill are none

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@140 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Jeff Schiller
2009-06-17 17:36:00 +00:00
parent 766c9f50c0
commit 543308a82d
6 changed files with 92 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
editor/svg-editor.css
View File

@@ -110,7 +110,7 @@
vertical-align:12px;
}
#svg_editor .tool_button, #svg_editor .tool_button_current {
#svg_editor .tool_button, #svg_editor .tool_button_current, #svg_editor .tool_button_disabled {
height: 24px;
width: 24px;
margin: 2px;
@@ -130,6 +130,11 @@
background-color: #B0B0B0;
}
#svg_editor .tool_button_disabled {
opacity: 0.5;
cursor: default;
}
#svg_editor #color_pick {
position: absolute;
display: none;

4
editor/svg-editor.html
View File

@@ -90,8 +90,8 @@
<div id="tools" class="tools_panel">
<img class="tool_button" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
<img class="tool_button_current" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
<img class="tool_button" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/>
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Rect/Square Tool [4/Shift+4]" alt="Square"/><br/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>

102
editor/svg-editor.js
View File

@@ -23,17 +23,20 @@ function svg_edit_setup() {
// update fill color
var fillColor = elem.getAttribute("fill");
if (fillColor == null || fillColor == "" || fillColor == "none") {
svgCanvas.setFillColor(fillColor);
if (fillColor == "none") {
fillColor = 'url(\'images/none.png\')';
}
$('#fill_color').css('background', fillColor);
// update stroke color
var strokeColor = elem.getAttribute("stroke");
svgCanvas.setStrokeColor(strokeColor);
if (strokeColor == null || strokeColor == "" || strokeColor == "none") {
strokeColor = 'url(\'images/none.png\')';
}
$('#stroke_color').css('background', strokeColor);
// update fill opacity
var fillOpacity = elem.getAttribute("fill-opacity");
if (fillOpacity == null || fillColor == "") {
@@ -70,7 +73,9 @@ function svg_edit_setup() {
if (strokeDashArray == null || strokeDashArray == "") {
strokeDashArray = "none";
}
$('#stroke_style').val(strokeDashArray);
$('#stroke_style').val(strokeDashArray);
updateToolButtonState();
} // if (elem != null)
updateContextPanel();
@@ -166,6 +171,7 @@ function svg_edit_setup() {
}
if (evt.shiftKey) svgCanvas.setStrokeColor(color);
else svgCanvas.setFillColor(color);
updateToolButtonState();
});
// This is a common function used when a tool has been clicked (chosen)
@@ -173,59 +179,71 @@ function svg_edit_setup() {
// - hides any flyout menus
// - removes the tool_button_current class from whatever tool currently has it
// - adds the tool_button_current class to the button passed in
var toolButtonClick = function(button){
var toolButtonClick = function(button) {
if ($(button).hasClass('tool_button_disabled')) return false;
$('#styleoverrides').text('');
$('.tools_flyout').hide();
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$(button).addClass('tool_button_current');
// when a tool is selected, we should deselect the currently selected element
svgCanvas.selectNone();
return true;
};
var clickSelect = function() {
toolButtonClick('#tool_select');
svgCanvas.setMode('select');
$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
if (toolButtonClick('#tool_select')) {
svgCanvas.setMode('select');
$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
}
}
var clickPath = function() {
toolButtonClick('#tool_path');
svgCanvas.setMode('path');
if (toolButtonClick('#tool_path')) {
svgCanvas.setMode('path');
}
}
var clickLine = function() {
toolButtonClick('#tool_line');
svgCanvas.setMode('line');
if (toolButtonClick('#tool_line')) {
svgCanvas.setMode('line');
}
}
var clickSquare = function(){
toolButtonClick('#tools_rect_show');
svgCanvas.setMode('square');
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('square');
}
}
var clickRect = function(){
toolButtonClick('#tools_rect_show');
svgCanvas.setMode('rect');
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('rect');
}
}
var clickFHRect = function(){
toolButtonClick('#tools_rect_show');
svgCanvas.setMode('fhrect');
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('fhrect');
}
}
var clickCircle = function(){
toolButtonClick('#tools_ellipse_show');
svgCanvas.setMode('circle');
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('circle');
}
}
var clickEllipse = function(){
toolButtonClick('#tools_ellipse_show');
svgCanvas.setMode('ellipse');
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('ellipse');
}
}
var clickFHEllipse = function(){
toolButtonClick('#tools_ellipse_show');
svgCanvas.setMode('fhellipse');
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('fhellipse');
}
}
// Delete is a contextual tool that only appears in the ribbon if
@@ -335,12 +353,52 @@ function svg_edit_setup() {
});
}
function updateToolButtonState() {
var bNoFill = (svgCanvas.getFillColor() == 'none');
var bNoStroke = (svgCanvas.getStrokeColor() == 'none');
var buttonsNeedingStroke = [ '#tool_path', '#tool_line' ];
var buttonsNeedingFillAndStroke = [ '#tools_rect_show', '#tools_ellipse_show', '#tool_text' ];
if (bNoStroke) {
for (index in buttonsNeedingStroke) {
var button = buttonsNeedingStroke[index];
if ($(button).hasClass('tool_button_current')) {
clickSelect();
}
$(button).removeClass('tool_button').addClass('tool_button_disabled');
}
}
else {
for (index in buttonsNeedingStroke) {
var button = buttonsNeedingStroke[index];
$(button).removeClass('tool_button_disabled').addClass('tool_button');
}
}
if (bNoStroke && bNoFill) {
for (index in buttonsNeedingFillAndStroke) {
var button = buttonsNeedingFillAndStroke[index];
if ($(button).hasClass('tool_button_current')) {
clickSelect();
}
$(button).removeClass('tool_button').addClass('tool_button_disabled');
}
}
else {
for (index in buttonsNeedingFillAndStroke) {
var button = buttonsNeedingFillAndStroke[index];
$(button).removeClass('tool_button_disabled').addClass('tool_button');
}
}
}
$('#fill_color').click(function(){
colorPicker($(this));
updateToolButtonState();
});
$('#stroke_color').click(function(){
colorPicker($(this));
updateToolButtonState();
});
// this hides any flyouts and then shows the rect flyout

1
editor/svgcanvas.js
View File

@@ -283,6 +283,7 @@ function SvgCanvas(c)
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
"stroke-opacity": current_stroke_opacity,
"fill": "none",
"opacity": current_opacity / 2
}
});