Fix Issue 62: can now set color to none right in the picker (uplift to jGraduate r71)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1295 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/jgraduate/css/jPicker-1.0.12.css

@@ -5,7 +5,8 @@
   text-align: left; /* make the zero width children position to the left of container */
   width: 25px; /* change this value if using a different sized color picker icon */
 }
-.jPicker_Color {
+.jPicker_Color, .jPicker_Alpha {
+  background-position: 2px 2px;
   display: block;
   height: 100%;
   left: 0px;
@@ -33,7 +34,6 @@
   border: 1px outset #666;
   font-family: Arial, Helvetica, Sans-Serif;
   font-size: 12px;
-  height: 330px;
   margin: 0px;
   padding: 5px;
   width: 550px;
@@ -71,29 +71,6 @@ div[class="jPicker_ColorMap"] {
   height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
   width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
 }
-.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3, .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_AlphaBar_l1, .jPicker_AlphaBar_l2 {
-  background-repeat: no-repeat;
-  display: block;
-  height: 100%;
-  left: 0px;
-  position: absolute;
-  top: 0px;
-  width: 100%;
-}
-.jPicker_ColorMap_l1 {
-  background-color: #000000;
-  background-image: none;
-}
-.jPicker_ColorMap_l2 {
-  background-color: transparent;
-}
-.jPicker_ColorMap_l3 {
-  background-repeat: repeat;
-}
-.jPicker_ColorMap_Arrow {
-  display: block;
-  position: absolute;
-}
 .jPicker_ColorBar {
   border: 2px inset #eee;
   cursor: n-resize;
@@ -107,46 +84,42 @@ div[class="jPicker_ColorBar"] {
   height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
   width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
 }
-.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3 {
+.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3, .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_ColorBar_l6 {
   background-color: transparent;
   background-image: none;
-  background-repeat: repeat-x;
+  display: block;
+  height: 256px; /* must specific pixel height. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
+                    would not be drawn if its overflow is set to hidden. */
+  left: 0px;
+  position: absolute;
+  top: 0px;
 }
-.jPicker_ColorBar_l4 {
+.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3 {
-  background-color: transparent;
+  width: 256px; /* must specific pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
-  background-repeat: repeat-x;
+                   would not be drawn if its overflow is set to hidden. */
 }
-.jPicker_ColorBar_l5 {
+.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_ColorBar_l6 {
-  background-color: transparent;
+  width: 20px; /* must specific pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
+                  would not be drawn if its overflow is set to hidden. */
+}
+.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorBar_l6 {
+  background-repeat: no-repeat;
+}
+.jPicker_ColorMap_l3, .jPicker_ColorBar_l5 {
   background-repeat: repeat;
 }
+.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4 {
+  background-repeat: repeat-x;
+}
+.jPicker_ColorMap_Arrow {
+  display: block;
+  position: absolute;
+}
 .jPicker_ColorBar_Arrow {
   display: block;
   left: -10px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
   position: absolute;
 }
-.jPicker_AlphaBar {
-  border: 2px inset #eee;
-  cursor: e-resize;
-  display: none;
-  height: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
-  margin: 10px 5px 4px 5px;
-  padding: 0px;
-  position: relative;
-  width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
-}
-div[class="jPicker_AlphaBar"] {
-  height: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
-  width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
-}
-.jPicker_AlphaBar_Arrow {
-  display: block;
-  top: -10px; /* (arrow height / 2) - (element height / 2) - position arrows' center in elements' center */
-  position: absolute;
-}
-.jPicker_EnableAlpha {
-  text-align: left;
-}
 .jPicker_Preview {
   font-size: x-small;
   text-align: center;
@@ -183,45 +156,36 @@ div[class="jPicker_AlphaBar"] {
 .jPicker_OkCancel input.jPicker_Ok {
   margin: 12px 0px 5px 0px;
 }
-.jPicker_Spacer {
+.jPicker_Text {
-  height: 10px;
+  text-align: left;
 }
 .jPicker_HueText, .jPicker_SaturationText, .jPicker_BrightnessText, .jPicker_RedText, .jPicker_GreenText, .jPicker_BlueText, .jPicker_AlphaText {
   background-color: #fff;
   border: 1px inset #aaa;
   margin: 0px 0px 0px 5px;
+  text-align: left;
   width: 30px;
 }
-.jPicker_EnterHex {
-  text-align: right;
-}
 .jPicker_HexText {
   background-color: #fff;
   border: 1px inset #aaa;
-  margin: 0px 19px 0px 5px;
+  margin: 0px 0px 0px 5px;
-  width: 50px;
+  width: 65px;
-}
-td.jPicker_OpacityCol {
-  padding-top: 12px;
-  text-indent: -8px;
-}
-td.jPicker_OpacityCol * {
-  display: none;
-}
-td.jPicker_HexCol {
-  text-align: left;
 }
 .jPicker_Grid {
   text-align: center;
 }
-.jPicker_QuickColor {
+span.jPicker_QuickColor {
   border: 1px inset #aaa;
   cursor: pointer;
   display: block;
   float: left;
-  height: 12px;
+  height: 13px;
-  line-height: 12px;
+  line-height: 13px;
-  margin: 2px 3px 1px 3px;
+  margin: 2px 2px 1px 2px;
   padding: 0px;
-  width: 12px;
+  width: 15px;
+}
+span[class="jPicker_QuickColor"] {
+  width: 13px;
 }

editor/jgraduate/jquery.jgraduate.js

@@ -1,5 +1,5 @@
 /*
- * jGraduate 0.2.x
+ * jGraduate 0.3.x
  *
  * jQuery Plugin for a gradient picker
  *
@@ -112,11 +112,11 @@ $.jGraduate = {
 jQuery.fn.jGraduateDefaults = {
 	paint: new $.jGraduate.Paint(),
 	window: {
-		pickerTitle: "Drag markers to pick a paint"
+		pickerTitle: "Drag markers to pick a paint",
 	},
 	images: {
-		clientPath: "images/"
+		clientPath: "images/",
-	}
+	},
 };
 
 jQuery.fn.jGraduate =
@@ -147,7 +147,7 @@ jQuery.fn.jGraduate =
               	// make a copy of the incoming paint
                 paint: new $.jGraduate.Paint({copy: $settings.paint}),
                 okCallback: $.isFunction($arguments[1]) && $arguments[1] || null,
-                cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null
+                cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null,
               });
 
 			var pos = $this.position(),
@@ -214,7 +214,6 @@ jQuery.fn.jGraduate =
             // Set up all the SVG elements (the gradient, stops and rectangle)
             var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2,
             	SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY;
-//            var container = document.getElementById(id+'_jGraduate_Swatch');
             var container = document.getElementById(id+'_jGraduate_GradContainer');
             var svg = container.appendChild(document.createElementNS(ns.svg, 'svg'));
             svg.id = id+'_jgraduate_svg';            
@@ -225,7 +224,6 @@ jQuery.fn.jGraduate =
 			// if we are sent a gradient, import it 
 			if ($this.paint.type == "linearGradient") {
 				$this.paint.linearGradient.id = id+'_jgraduate_grad';
-// 				$this.paint.linearGradient = svg.appendChild(document.importNode($this.paint.linearGradient, true));
 				$this.paint.linearGradient = svg.appendChild($.cloneNode($this.paint.linearGradient));
 			}
 			else { // we create a gradient
@@ -253,10 +251,10 @@ jQuery.fn.jGraduate =
             $('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx});
             $('#' + id + '_jgraduate_rect').attr('fill-opacity', gradalpha/100);
 			
-			var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0);
+			var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0),
-			var y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0);
+				y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0),
-			var x2 = parseFloat($this.paint.linearGradient.getAttribute('x2')||1.0);
+				x2 = parseFloat($this.paint.linearGradient.getAttribute('x2')||1.0),
-			var y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0);
+				y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0);
 			
             var rect = document.createElementNS(ns.svg, 'rect');
             rect.id = id + '_jgraduate_rect';
@@ -475,14 +473,16 @@ jQuery.fn.jGraduate =
 			$('#'+id+'_jGraduate_colorBoxBegin').click(function() {
 				$('div.jGraduate_LightBox').show();			
 				var colorbox = $(this);
-				color = new $.jPicker.Color({ hex: beginColor.substr(1), a:(parseFloat(beginOpacity)*100) });
+				var thisAlpha = (parseFloat(beginOpacity)*255).toString(16);
+				while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
+				color = beginColor.substr(1) + thisAlpha;
 				$('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
 						window: { title: "Pick the start color and opacity for the gradient" },
 						images: { clientPath: $settings.images.clientPath },
 						color: { active: color, alphaSupport: true }
 					}, function(color){
-						beginColor = '#' + this.settings.color.active.hex;
+						beginColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
-						beginOpacity = this.settings.color.active.a/100;
+						beginOpacity = color.get_A() ? color.get_A()/100 : 1;
 						colorbox.css('background', beginColor);
 						$('#'+id+'_jGraduate_beginOpacity').html(parseInt(beginOpacity*100)+'%');
             			stops[0].setAttribute('stop-color', beginColor);
@@ -497,14 +497,16 @@ jQuery.fn.jGraduate =
 			$('#'+id+'_jGraduate_colorBoxEnd').click(function() {
 				$('div.jGraduate_LightBox').show();
 				var colorbox = $(this);
-				color = new $.jPicker.Color({ hex: endColor.substr(1), a:(parseFloat(endOpacity)*100) });
+				var thisAlpha = (parseFloat(endOpacity)*255).toString(16);
+				while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
+				color = endColor.substr(1) + thisAlpha;
 				$('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'top': 15}).jPicker({
 						window: { title: "Pick the end color and opacity for the gradient" },
 						images: { clientPath: $settings.images.clientPath },
 						color: { active: color, alphaSupport: true }
 					}, function(color){
-						endColor = '#' + this.settings.color.active.hex;
+						endColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
-						endOpacity = this.settings.color.active.a/100;
+						endOpacity = color.get_A() ? color.get_A()/100 : 1;
 						colorbox.css('background', endColor);
 						$('#'+id+'_jGraduate_endOpacity').html(parseInt(endOpacity*100)+'%');
             			stops[1].setAttribute('stop-color', endColor);
@@ -518,16 +520,19 @@ jQuery.fn.jGraduate =
 			});            
             
 			// --------------
+			var thisAlpha = ($this.paint.alpha*255/100).toString(16);
+			while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
+			color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha;
 			colPicker.jPicker(
 				{
 					window: { title: $settings.window.pickerTitle },
 					images: { clientPath: $settings.images.clientPath },
-					color: { active: new $.jPicker.Color({hex:$this.paint.solidColor, a:$this.paint.alpha}), alphaSupport: true }
+					color: { active: color, alphaSupport: true }
 				},
 				function(color) {
 					$this.paint.type = "solidColor";
-					$this.paint.alpha = color.a;
+					$this.paint.alpha = color.get_A() ? color.get_A() : 100;
-					$this.paint.solidColor = color.hex;
+					$this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none";
 					$this.paint.linearGradient = null;
 					okClicked(); 
 				},

editor/svg-editor.html

@@ -5,7 +5,7 @@
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
 <link rel="icon" type="image/png" href="images/logo.png">
-<link rel="stylesheet" href="jgraduate/css/jPicker-1.0.9.css" type="text/css"/>
+<link rel="stylesheet" href="jgraduate/css/jPicker-1.0.12.css" type="text/css"/>
 <link rel="stylesheet" href="jgraduate/css/jGraduate-0.2.0.css" type="text/css"/>
 <link rel="stylesheet" href="svg-editor.css" type="text/css"/>
 <link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
@@ -32,7 +32,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 
 <!-- always minified scripts -->
 <script type="text/javascript" src="jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>
-<script type="text/javascript" src="jgraduate/jpicker-1.0.9.min.js"></script>
+<script type="text/javascript" src="jgraduate/jpicker-1.0.12.min.js"></script>
 
 <!-- feeds -->
 <link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" />

editor/svg-editor.js

@@ -361,6 +361,30 @@ function svg_edit_setup() {
 			});
 		}
 	};
+	
+	var getPaint = function(color, opac) {
+		// update the editor's fill paint
+		var opts = null;
+		if (color.substr(0,5) == "url(#") {
+			opts = {
+				alpha: opac,
+				linearGradient: document.getElementById(color.substr(5,color.length-6))
+			};
+		} 
+		else if (color.substr(0,1) == "#") {
+			opts = {
+				alpha: opac,
+				solidColor: color.substr(1)
+			};
+		}
+		else {
+			opts = {
+				alpha: opac,
+				solidColor: 'none'
+			};
+		}
+		return new $.jGraduate.Paint(opts);
+	};	
 
 	// updates the toolbar (colors, opacity, etc) based on the selected element
 	var updateToolbar = function() {
@@ -394,24 +418,6 @@ function svg_edit_setup() {
 			fillOpacity *= 100;
 			strokeOpacity *= 100;
 			
-			var getPaint = function(color, opac) {
-				// update the editor's fill paint
-				var opts = null;
-				if (color.substr(0,5) == "url(#") {
-					opts = {
-						alpha: opac,
-						linearGradient: document.getElementById(color.substr(5,color.length-6))
-					};
-				} 
-				else if (color.substr(0,1) == "#") {
-					opts = {
-						alpha: opac,
-						solidColor: color.substr(1)
-					};
-				}
-				return new $.jGraduate.Paint(opts);
-			}
-			
 			fillPaint = getPaint(fillColor, fillOpacity);
 			strokePaint = getPaint(strokeColor, strokeOpacity);
 			
@@ -1667,11 +1673,12 @@ function svg_edit_setup() {
 		var paint = (picker == 'stroke' ? strokePaint : fillPaint);
 		var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
 		var was_none = false;
-		if (paint.type == "none") {
+//		if (paint.type == "none") {
-			// if it was none, then set to solid white
+//			// if it was none, then set to solid white
-			paint = new $.jGraduate.Paint({solidColor: 'ffffff'});
+//			paint = new $.jGraduate.Paint({solidColor: 'ffffff'});
-			was_none = true;
+//			was_none = true;
-		}
+//		}
+		console.dir(paint);
 		var pos = elem.position();
 		$("#color_picker")
 			.draggable({cancel:'.jPicker_table,.jGraduate_lgPick'})
@@ -1697,15 +1704,17 @@ function svg_edit_setup() {
 					rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
 				}
 				else {
-					rectbox.setAttribute("fill", "#" + paint.solidColor);
+					rectbox.setAttribute("fill", paint.solidColor != "none" ? "#" + paint.solidColor : "none");
 				}
 				opacity.html(paint.alpha + " %");
 
 				if (picker == 'stroke') {
 					svgCanvas.setStrokePaint(paint, true);
+					strokePaint = paint;
 				}
 				else {
 					svgCanvas.setFillPaint(paint, true);
+					fillPaint = paint;
 				}
 				updateToolbar();
 				$('#color_picker').hide();

editor/svgcanvas.js

@@ -5969,7 +5969,7 @@ function BatchCommand(text) {
 		// now set the current paint object
 		cur_properties.stroke_paint = p;
 		if (p.type == "solidColor") {
-			this.setStrokeColor("#"+p.solidColor);
+			this.setStrokeColor(p.solidColor != "none" ? "#"+p.solidColor : "none");
 		}
 		else if(p.type == "linearGradient") {
 			canvas.strokeGrad = p.linearGradient;
@@ -5988,7 +5988,7 @@ function BatchCommand(text) {
 		// now set the current paint object
 		cur_properties.fill_paint = p;
 		if (p.type == "solidColor") {
-			this.setFillColor("#"+p.solidColor);
+			this.setFillColor(p.solidColor != "none" ? "#"+p.solidColor : "none");
 		}
 		else if(p.type == "linearGradient") {
 			canvas.fillGrad = p.linearGradient;