canvas color

editor/svg-editor.css

@@ -1,14 +1,7 @@
 body {
 	background: #2F2F2C;
 	font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
-}
+	-webkit-touch-callout: none;
-
-* {
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-html, body, div{
-  -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
@@ -54,14 +47,6 @@ html, body {
         color: #000000;
 }
 
-
-#svg_editor * {
-	transform-origin: 0 0;
-	-moz-transform-origin: 0 0;
-	-o-transform-origin: 0 0;
-	-webkit-transform-origin: 0 0;
-}
-
 #svg_editor hr {
 	border: none;
 	border-bottom: 1px solid #808080;
@@ -135,7 +120,7 @@ html, body {
   position: relative;
   overflow: hidden;
 	line-height: 22px;
-	padding: 5px 55px 5px 25px;
+	padding: 5px 69px 5px 25px;
 	cursor: default;
 	color: #333;
 }
@@ -303,37 +288,36 @@ html, body {
 	margin-top: 0;
 }
 
-#svg_editor #color_tools {
+#svg_editor #color_tools, #color_canvas_tools {
   position: relative;
   width: 48px;
   height: 48px;
   margin: 6px 6px 0 6px;
 }
 
-#svg_editor #color_tools #tool_fill {
+#svg_editor #color_tools #tool_fill, #tool_canvas {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
 }
 
-#svg_editor #color_tools #tool_fill.active, #svg_editor #color_tools #tool_stroke.active {
+#tool_fill.active, #tool_stroke.active {
   z-index: 2;
 }
 
-#svg_editor #color_tools #tool_fill, #svg_editor #color_tools #tool_stroke {
+#tool_fill, #tool_stroke, #tool_canvas {
   box-shadow: 0 0 0 1px #2f2f2c;
 }
 
-#svg_editor #color_tools #tool_fill .color_block {
+
+#tool_fill .color_block, #tool_canvas .color_block {
   width: 24px;
   height: 24px;
   overflow: hidden;
   border: solid #ccc 1px;
 }
 
-
-
 #svg_editor #path_node_panel .tool_button {
 	color: #999;
 	border: solid #3F3F3C 1px;
@@ -359,6 +343,10 @@ html, body {
 	padding: 3px 0;
 	width: auto;
 	margin: 0 0 10px 0;
+	background: transparent;
+	color: #ccc;
+	height: auto;
+	line-height: 130%;
 }
 
 #svg_editor #path_node_panel #segment_type {
@@ -384,14 +372,14 @@ html, body {
   background: #fff;
 }
 
-#svg_editor #color_tools #tool_stroke {
+#tool_stroke {
   position: absolute;
   top: 12px;
   left: 12px;
   z-index: 0;
 }
 
-#svg_editor #color_tools #tool_stroke #stroke_color:after {
+#stroke_color:after {
   content: '';
   position: absolute;
   display: block;
@@ -454,11 +442,6 @@ html, body {
 	padding-top: 4px;
 }
 
-#color_tools .icon_label > * {
-	position: relative;
-	top: 1px;
-}
-
 #svg_editor div#palette {
 	float: left;
 	width: 672px;
@@ -486,6 +469,7 @@ html, body {
 	width: 2px;
 	padding: 10px;
 	border-left: none;
+	z-index: 10;
 }
 
 #svg_editor #layerpanel {
@@ -1190,7 +1174,7 @@ span.zoom_tool img {
 	border-radius: 3px;
 	z-index: 5;
 	box-shadow: 0 5px 10px #000;
-	left: 45px !important;
+	width: 530px;
 }
 
 #svg_editor .tools_flyout {

editor/svg-editor.html

@@ -135,7 +135,7 @@ $(function(){
   		<div id="tool_clear" class="menu_item">New Image</div>
   		<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Open Image...</div>
   		<div id="tool_import" class="menu_item"><div id="fileinputs_import"></div>Import SVG...</div>
-  		<div id="tool_save" class="menu_item">Save Image... <span>⌘S</span></div>
+  		<div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
   		<div id="tool_export" class="menu_item">Export as PNG</div>
   	</div>
   </div>
@@ -143,12 +143,12 @@ $(function(){
   <div class="menu">
     <div class="menu_title">Edit</div>
   	<div class="menu_list" id="edit_menu">
-  		<div class="menu_item" id="tool_undo">Undo <span>⌘Z</span></div>
+  		<div class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
-  		<div class="menu_item" id="tool_redo">Redo <span>⌘Y</span></div>
+  		<div class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
   		<div class="separator"></div>
-  		<div class="menu_item action_selected disabled" id="tool_copy">Copy <span>⌘C</span></div>
+  		<div class="menu_item action_selected disabled" id="tool_copy">Copy <span class="shortcut">⌘C</span></div>
-			<div class="menu_item action_selected disabled" id="tool_paste">Paste <span>⌘V</span></div>
+			<div class="menu_item action_selected disabled" id="tool_paste">Paste <span class="shortcut">⌘V</span></div>
-  		<div class="menu_item action_selected disabled" id="tool_clone">Duplicate <span>⌘D</span></div>
+  		<div class="menu_item action_selected disabled" id="tool_clone">Duplicate <span class="shortcut">⌘D</span></div>
 			<div class="menu_item action_selected disabled" id="tool_delete">Delete <span>⌫</span></div>
     </div>
   </div>
@@ -156,13 +156,13 @@ $(function(){
   <div class="menu">
     <div class="menu_title">Object</div>
   	<div class="menu_list"  id="object_menu">
-			<div class="menu_item action_selected disabled" id="tool_move_top">Bring to Front <span>⌘⇧&uarr;</span></div>
+			<div class="menu_item action_selected disabled" id="tool_move_top">Bring to Front <span class="shortcut">⌘⇧&uarr;</span></div>
-			<div class="menu_item action_selected disabled" id="tool_move_up">Bring Forward <span>⌘&uarr;</span></div>
+			<div class="menu_item action_selected disabled" id="tool_move_up">Bring Forward <span class="shortcut">⌘&uarr;</span></div>
-			<div class="menu_item action_selected disabled" id="tool_move_down">Send Backward <span>⌘&darr;</span></div>
+			<div class="menu_item action_selected disabled" id="tool_move_down">Send Backward <span class="shortcut">⌘&darr;</span></div>
-			<div class="menu_item action_selected disabled" id="tool_move_bottom">Send to Back <span>⌘⇧&darr;</span></div>
+			<div class="menu_item action_selected disabled" id="tool_move_bottom">Send to Back <span class="shortcut">⌘⇧&darr;</span></div>
 			<div class="separator"></div>
-			<div class="menu_item action_multi_selected disabled" id="tool_group">Group Elements <span>⌘G</span></div>
+			<div class="menu_item action_multi_selected disabled" id="tool_group">Group Elements <span class="shortcut">⌘G</span></div>
-			<div class="menu_item action_group_selected disabled" id="tool_ungroup">Ungroup Elements <span>⌘⇧G</span></div>
+			<div class="menu_item action_group_selected disabled" id="tool_ungroup">Ungroup Elements <span class="shortcut">⌘⇧G</span></div>
 			<div class="separator"></div>
 			<div class="menu_item action_path_convert_selected disabled" id="tool_topath">Convert to Path</div>
 			<div class="menu_item action_path_selected disabled" id="tool_reorient">Reorient path</div>
@@ -182,7 +182,7 @@ $(function(){
   	    <div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
   	    <div class="menu_item" id="tool_wireframe">View Wireframe</div>
   	    <div class="separator"></div>
-    		<div class="menu_item" id="tool_source">Source... <span>⌘U</span></div>
+    		<div class="menu_item" id="tool_source">Source... <span class="shortcut">⌘U</span></div>
     </div>
   </div>
   
@@ -235,6 +235,18 @@ $(function(){
 			</label>
 		</div>
 		<label title="Modify Canvas Size" class="padded"><button id="docprops_button">Canvas Properties...</button></label>
+  	
+  	
+  	  
+		<div id="color_canvas_tools">
+		  <div class="color_tool active" id="tool_canvas">
+  		  <div class="color_block">
+  			  <div id="canvas_bg"></div>
+  			  <div id="canvas_color" class="color_block"></div>
+  		  </div>
+  		</div>
+  	</div>
+
 	</div>
 	
 	<div id="rect_panel">

editor/svg-editor.js

@@ -501,6 +501,15 @@
 				ui_context = 'toolbars',
 				orig_source = '',
 				paintBox = {fill: null, stroke:null};
+				
+
+			// This puts the correct shortcuts in the menus
+			if (!isMac) {
+			 $('.shortcut').each(function(){
+			   var text = $(this).text();
+			   $(this).text(text.split("⌘").join("Ctrl+"))
+			 }); 
+			}
 
 			// This sets up alternative dialog boxes. They mostly work the same way as
 			// their UI counterparts, expect instead of returning the result, a callback
@@ -1381,6 +1390,31 @@
 			$('.canvas_height').val(res.h);
 			$('#docprops_button').on("click", function(){showDocProperties()});
 			
+			// create a new layer background
+			svgCanvas.createLayer("background")
+			cur_shape = svgCanvas.addSvgElementFromJson({
+				"element": "rect",
+				"attr": {
+					"x": 0,
+					"y": 0,
+					"width": res.w,
+					"height": res.h,
+					"stroke": "none",
+					"id": "canvas_background",
+					"opacity": 1,
+					"fill": "#fff",
+					"style": "pointer-events:none"
+				}
+			});
+			svgCanvas.setCurrentLayer("Layer 1")
+			svgCanvas.setCurrentLayerPosition("1")
+			if($.pref('bkgd_color')) {
+				setBackground($.pref('bkgd_color'), $.pref('bkgd_url'));
+			} else if($.pref('bkgd_url')) {
+				// No color set, only URL
+				setBackground(defaultPrefs.bkgd_color, $.pref('bkgd_url'));
+			}
+			
 			// updates the toolbar (colors, opacity, etc) based on the selected element
 			// This function also updates the opacity and id elements that are in the context panel
 			var updateToolbar = function() {
@@ -1929,7 +1963,6 @@
 				var paint = null;
 		
 				// Webkit-based browsers returned 'initial' here for no stroke
-				console.log(color);
 				if (color === 'transparent' || color === 'initial' || color === '#none') {
 					color = 'none';
 					paint = new $.jGraduate.Paint();
@@ -2990,7 +3023,6 @@
 				if(size == curPrefs.size && !force) return;
 // 				return;
 // 				var elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
-				console.log('size', size);
 				
 				var sel_toscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,\
 				#main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,\
@@ -3362,15 +3394,19 @@
 			// TODO: go back to the color boxes having white background-color and then setting
 			//       background-image to none.png (otherwise partially transparent gradients look weird)	
 			var colorPicker = function(elem) {
-				var picker = elem.attr('id') == 'stroke_color' ? 'stroke' : 'fill';
+				var picker = elem[0].id == 'stroke_color' ? 'stroke' : 'fill';
+				var is_background = elem[0].id == "canvas_color"
+				if (is_background) picker = 'canvas'
 // 				var opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
 				var paint = paintBox[picker].paint;
+				
 				var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
 				var was_none = false;
-				var pos = elem.position();
+				var pos = is_background ? {'right': 200, 'top': 50} : {'left': 45, 'bottom': 50}
+				
 				$("#color_picker")
 					.draggable({cancel:'.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker', containment: 'window'})
-					.css(curConfig.colorPickerCSS || {'left': pos.left, 'bottom': 50 - pos.top})
+					.css(pos)
 					.jGraduate(
 					{ 
 						paint: paint,
@@ -3453,7 +3489,7 @@
 
 
 			var PaintBox = function(container, type) {
-				var cur = curConfig[type === 'fill' ? 'initFill' : 'initStroke'];
+				var cur = curConfig[type === 'stroke' ? 'initStroke' : 'initFill'];
 				
 				// set up gradients to be used for the buttons
 				var svgdocbox = new DOMParser().parseFromString(
@@ -3497,12 +3533,18 @@
 						svgCanvas.setColor(this.type, fillAttr, true);
 						svgCanvas.setPaintOpacity(this.type, opac, true);
 					}
+					if (this.type == "canvas") {
+					  var background = document.getElementById("canvas_background");
+					  if (background) {
+					    background.setAttribute('fill', fillAttr)
+					  }
+					}
+					
 				}
 				
 				this.update = function(apply) {
 					if(!selectedElement) return;
 					var type = this.type;
-					
 					switch ( selectedElement.tagName ) {
 					case 'use':
 					case 'image':
@@ -3570,6 +3612,7 @@
 			
 			paintBox.fill = new PaintBox('#fill_color', 'fill');
 			paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
+			paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
 
 			$('#stroke_width').val(curConfig.initStroke.width);
 			$('#group_opacity').val(curConfig.initOpacity * 100);
@@ -3612,6 +3655,11 @@
 				  $("#tool_stroke").removeClass('active');
 				}
 			});
+			
+			$('#tool_canvas').click(function(){
+				  colorPicker($('#canvas_color'));
+				  updateToolButtonState();
+			});
 
 			$('#tool_stroke').click(function(){
 			  
@@ -3621,7 +3669,6 @@
 				}
 				else {
 				  $('#tool_stroke').addClass('active');
-				  console.log($('#tool_stroke'));
 				  $("#tool_fill").removeClass('active');
 				}
 			});

editor/svgcanvas.js

@@ -6708,6 +6708,13 @@ this.setResolution = function(x, y) {
 	
 		addCommandToHistory(batchCmd);
 		svgroot.unsuspendRedraw(handle);
+		
+		var background = document.getElementById("canvas_background");
+		if (background) {
+		  background.setAttribute("width", x)
+		  background.setAttribute("height", y)
+		}
+		
 		call("changed", [svgcontent]);
 	}
 	return true;