From 543308a82d20ced09435466e709a7e425e913c28 Mon Sep 17 00:00:00 2001 From: Jeff Schiller Date: Wed, 17 Jun 2009 17:36:00 +0000 Subject: [PATCH] Fix Issue 13: Disable tool buttons when stroke or stroke+fill are none git-svn-id: http://svg-edit.googlecode.com/svn/trunk@140 eee81c28-f429-11dd-99c0-75d572ba1ddd --- CHANGES | 1 + README | 5 +- editor/svg-editor.css | 7 ++- editor/svg-editor.html | 4 +- editor/svg-editor.js | 102 ++++++++++++++++++++++++++++++++--------- editor/svgcanvas.js | 1 + 6 files changed, 92 insertions(+), 28 deletions(-) diff --git a/CHANGES b/CHANGES index 672112eb..78e87c97 100644 --- a/CHANGES +++ b/CHANGES @@ -11,6 +11,7 @@ * added Select tool * using jQuery hosted by Google instead of local version * allow dragging of elements +* added keystroke shortcuts for all tools 2.0 - June 03, 2009 ------------------ diff --git a/README b/README index 581857b9..7b173964 100644 --- a/README +++ b/README @@ -12,9 +12,8 @@ jQuery JavaScript Library v1.3.2 http://jquery.com/ Copyright (c) 2009 John Resig -jQuery Right-Click Plugin -http://abeautifulsite.net/notebook/68 -Copyright (c) 2008 Cory S.N. LaViska +jQuery js-Hotkeys +http://code.google.com/p/js-hotkeys/ jPicker http://www.digitalmagicpro.com/jPicker/ diff --git a/editor/svg-editor.css b/editor/svg-editor.css index 9298afba..802cee8f 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -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; diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 9290c604..358fa481 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -90,8 +90,8 @@
-Select
-Pencil
+Select
+Pencil
Line
Square
Circle
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index d1512e84..7b4b5bc3 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -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 diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index d4cb0cb5..4ed07e4c 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -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 } });