ipad changes

editor/contextmenu/jquery.contextMenu.js

@@ -37,88 +37,108 @@ if(jQuery)( function() {
 				// Add contextMenu class
 				menu.addClass('contextMenu');
 				// Simulate a true right click
+
 				$(this).bind( "mousedown", function(e) {
 					var evt = e;
-					$(this).mouseup( function(e) {
+					$(this).on("mouseup", function(e) {
 						var srcElement = $(this);
 						srcElement.unbind('mouseup');
 						$(".contextMenu").hide();
 						if( evt.button === 2 || o.allowLeft || (evt.ctrlKey && svgedit.browser.isMac()) ) {
-							e.stopPropagation();
+                if (!svgedit.browser.isTouch()) open_context_menu(e, evt, srcElement);
-
-							// Get this context menu
-						
-							if( el.hasClass('disabled') || evt.altKey ) return false;
-							
-							// Detect mouse position
-							var d = {}, x = e.pageX, y = e.pageY;
-							
-							var x_off = win.width() - menu.width(), 
-								y_off = win.height() - menu.height();
-
-							if(x > x_off - 15) x = x_off-15;
-							if(y > y_off - 30) y = y_off-30; // 30 is needed to prevent scrollbars in FF
-							
-							// Show the menu
-							doc.unbind('click');
-							menu.css({ top: y, left: x }).fadeIn(o.inSpeed);
-							// Hover events
-							menu.find('A').mouseover( function() {
-								menu.find('LI.hover').removeClass('hover');
-								$(this).parent().addClass('hover');
-							}).mouseout( function() {
-								menu.find('LI.hover').removeClass('hover');
-							});
-							
-							// Keyboard
-							doc.keypress( function(e) {
-								switch( e.keyCode ) {
-									case 38: // up
-										if( !menu.find('LI.hover').length ) {
-											menu.find('LI:last').addClass('hover');
-										} else {
-											menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
-											if( !menu.find('LI.hover').length ) menu.find('LI:last').addClass('hover');
-										}
-									break;
-									case 40: // down
-										if( menu.find('LI.hover').length == 0 ) {
-											menu.find('LI:first').addClass('hover');
-										} else {
-											menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
-											if( !menu.find('LI.hover').length ) menu.find('LI:first').addClass('hover');
-										}
-									break;
-									case 13: // enter
-										menu.find('LI.hover A').trigger('click');
-									break;
-									case 27: // esc
-										doc.trigger('click');
-									break
-								}
-							});
-							
-							// When items are selected
-							menu.find('A').unbind('mouseup');
-							menu.find('LI:not(.disabled) A').mouseup( function() {
-								doc.unbind('click').unbind('keypress');
-								$(".contextMenu").hide();
-								// Callback
-								if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
-								return false;
-							});
-							
-							// Hide bindings
-							setTimeout( function() { // Delay for Mozilla
-								doc.click( function() {
-									doc.unbind('click').unbind('keypress');
-									menu.fadeOut(o.outSpeed);
-									return false;
-								});
-							}, 0);
 						}
 					});
 				});
+
+				if (svgedit.browser.isTouch()) {
+  				 $(this).bind("taphold", function(e){
+  				  var srcElement = $(this);
+  				  srcElement.unbind('mouseup');
+  				  open_context_menu(e,e, srcElement);
+  				})
+				}
+				
+				var open_context_menu = function(e, evt, srcElement) {
+				  if (typeof evt == 'undefined') evt = e;
+				  e.stopPropagation();
+        
+				  // Get this context menu
+			  
+				  if( el.hasClass('disabled') || evt.altKey ) return false;
+				
+				  // Detect mouse position
+				  var d = {}, x = e.pageX, y = e.pageY;
+				  if (svgedit.browser.isTouch()) var d = {}, x = e.originalEvent.touches[0].pageX, y = e.originalEvent.touches[0].pageY;
+				
+				  var x_off = win.width() - menu.width(), 
+				  	y_off = win.height() - menu.height();
+        
+				  if(x > x_off - 15) x = x_off-15;
+				  if(y > y_off - 30) y = y_off-30; // 30 is needed to prevent scrollbars in FF
+				
+				  if(svgedit.browser.isTouch()) 
+				    y = y - (menu.height()/2)
+				
+				  // Show the menu
+				  doc.unbind('click');
+				  menu.css({ top: y, left: x }).fadeIn(o.inSpeed);
+				  // Hover events
+				  menu.find('A').mouseover( function() {
+				  	menu.find('LI.hover').removeClass('hover');
+				  	$(this).parent().addClass('hover');
+				  }).mouseout( function() {
+				  	menu.find('LI.hover').removeClass('hover');
+				  });
+				
+				  // Keyboard
+				  doc.keypress( function(e) {
+				  	switch( e.keyCode ) {
+				  		case 38: // up
+				  			if( !menu.find('LI.hover').length ) {
+				  				menu.find('LI:last').addClass('hover');
+				  			} else {
+				  				menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
+				  				if( !menu.find('LI.hover').length ) menu.find('LI:last').addClass('hover');
+				  			}
+				  		break;
+				  		case 40: // down
+				  			if( menu.find('LI.hover').length == 0 ) {
+				  				menu.find('LI:first').addClass('hover');
+				  			} else {
+				  				menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
+				  				if( !menu.find('LI.hover').length ) menu.find('LI:first').addClass('hover');
+				  			}
+				  		break;
+				  		case 13: // enter
+				  			menu.find('LI.hover A').trigger('click');
+				  		break;
+				  		case 27: // esc
+				  			doc.trigger('click');
+				  		break
+				  	}
+				  });
+				
+				  // When items are selected
+				  menu.find('A').unbind('mouseup');
+				  menu.find('LI:not(.disabled) A').mouseup( function() {
+				  	doc.unbind('click').unbind('keypress');
+				  	$(".contextMenu").hide();
+				  	// Callback
+				  	if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
+				  	return false;
+				  });
+				
+				  // Hide bindings
+				  setTimeout( function() { // Delay for Mozilla
+				  	doc.click( function() {
+				  		doc.unbind('click').unbind('keypress');
+				  		menu.fadeOut(o.outSpeed);
+				  		return false;
+				  	});
+				  }, 0);
+				}
+				
+				
 				
 				// Disable text selection
 				if( $.browser.mozilla ) {

editor/path.js

@@ -147,8 +147,8 @@ svgedit.path.addPointGrip = function(index, x, y) {
 		svgedit.utilities.assignAttributes(pointGrip, {
 			'id': "pathpointgrip_" + index,
 			'display': "none",
-			'width': 5,
+			'width': svgeditor.browser.isTouch() ? 30 : 5,
-			'height': 5,
+			'height': svgeditor.browser.isTouch() ? 30 : 5,
 			'fill': "#fff",
 			'stroke': "#4F80FF",
 			'shape-rendering': "crispEdges",
@@ -167,8 +167,8 @@ svgedit.path.addPointGrip = function(index, x, y) {
 	if(x && y) {
 		// set up the point grip element and display it
 		svgedit.utilities.assignAttributes(pointGrip, {
-			'x': x-2.5,
+			'x': x-(svgeditor.browser.isTouch() ? 15 : 2.5),
-			'y': y-2.5,
+			'y': y-(svgeditor.browser.isTouch() ? 15 : 2.5),
 			'display': "inline"
 		});
 	}
@@ -193,7 +193,7 @@ svgedit.path.addCtrlGrip = function(id) {
 	svgedit.utilities.assignAttributes(pointGrip, {
 		'id': "ctrlpointgrip_" + id,
 		'display': "none",
-		'r': 3,
+		'r': svgeditor.browser.isTouch() ? 15 : 3,
 		'fill': "#4F80FF",
 		'cursor': 'move',
 		'style': 'pointer-events:all',
@@ -224,8 +224,8 @@ svgedit.path.getPointGrip = function(seg, update) {
 	if(update) {
 		var pt = svgedit.path.getGripPt(seg);
 		svgedit.utilities.assignAttributes(pointGrip, {
-			'x': pt.x-2.5,
+			'x': pt.x-(svgeditor.browser.isTouch() ? 15 : 2.5),
-			'y': pt.y-2.5,
+			'y': pt.y-(svgeditor.browser.isTouch() ? 15 : 2.5),
 			'display': "inline"
 		});
 	}
@@ -446,7 +446,8 @@ svgedit.path.Segment.prototype.addGrip = function() {
 svgedit.path.Segment.prototype.update = function(full) {
 	if(this.ptgrip) {
 		var pt = svgedit.path.getGripPt(this);
-		var properties = (this.ptgrip.nodeName == "rect") ? {'x': pt.x-2.5, 'y': pt.y-2.5} : {'cx': pt.x, 'cy': pt.y};
+		var reposition = (svgeditor.browser.isTouch() ? 15 : 2.5)
+		var properties = (this.ptgrip.nodeName == "rect") ? {'x': pt.x-reposition, 'y': pt.y-reposition} : {'cx': pt.x, 'cy': pt.y};
 		svgedit.utilities.assignAttributes(this.ptgrip, properties);
 		svgedit.path.getSegSelector(this, true);
 

editor/svg-editor.css

@@ -509,7 +509,6 @@ html, body {
 
  div#palette {
 	float: left;
-	width: 810px;
 	height: 16px;
 }
 
@@ -1492,7 +1491,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 5px 0;
 	margin: 0px;
 	display: none;
-	font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
+	font: 12px/15px 'Lucida Sans', 'Lucida Grande', Helvetica, Verdana, sans-serif;
 	border-radius: 5px;
 	-moz-border-radius: 5px;
 	-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
@@ -1500,6 +1499,29 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	box-shadow: 2px 5px 10px rgba(0,0,0,.3);
 }
 
+.touch .contextMenu {
+	border: solid 5px rgba(0,0,0,.7);
+	padding: 0;
+	margin: 0 0 0 20px;
+	font: 18px/24px sans-serif;
+	border-radius: 5px;
+	-webkit-box-shadow: 2px 5px 20px 3px #000;
+	box-shadow: 2px 5px 20px rgba(0,0,0,0.5);
+}
+
+.touch .contextMenu:after {
+	content: '';
+	width: 0;
+	height: 0;
+	border: solid transparent 10px;
+	border-right-color: rgba(0,0,0,.7);
+	position: absolute;
+	top: 50%;
+	left: -25px;
+	margin-top: -10px;
+	z-index: 1000;
+}
+
 .contextMenu LI {
 	list-style: none;
 	padding: 0px;
@@ -1512,6 +1534,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	float:right;
 }
 
+.touch .contextMenu .shortcut {
+	display: none;
+}
+
+
+.touch .shortcut {
+	display: none;
+}
+
+
 .contextMenu A {
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -1526,6 +1558,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 0px 15px 1px 20px;
 }
 
+.touch .contextMenu A {
+	padding: 0 15px;
+	border-bottom: #;
+	font-weight: bold;
+	border-top: solid 1px #E3E3E3;
+	height: 40px;
+	line-height: 40px;
+	min-width: 200px;
+}
+
 .contextMenu LI.hover A {
 	background-color: #2e5dea;
 	color: white;
@@ -1534,6 +1576,11 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 
 .contextMenu LI.disabled A {
 	color: #999;
+
+}
+
+.touch .contextMenu LI.disabled A {
+	display: none;
 }
 
 .contextMenu LI.hover.disabled A {
@@ -1546,6 +1593,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	margin-top: 5px;
 }
 
+.touch .contextMenu LI.separator {
+	border-top: none;
+	margin: 0;
+	padding: 0;
+}
+
 #menu {
   display: none;
   position: absolute;

editor/svg-editor.js

@@ -361,6 +361,7 @@
 				Utils = svgedit.utilities,
 				default_img_url = curConfig.imgPath + "placeholder.svg",
 				workarea = $("#workarea"),
+				canv_menu = $("#cmenu_canvas"),
 				exportWindow = null, 
 				tool_scale = 1,
 				ui_context = 'toolbars',
@@ -1571,6 +1572,7 @@
 					}
 					menu_items[(el_name === 'g' ? 'en':'dis') + 'ableContextMenuItems']('#ungroup');
 					menu_items[((el_name === 'g' || !multiselected) ? 'dis':'en') + 'ableContextMenuItems']('#group');
+
 				} // if (elem != null)
 				else if (multiselected) {
 					$('#multiselected_panel').show();
@@ -1597,6 +1599,14 @@
 				}
 				
 				svgCanvas.addedNew = false;
+				
+				if ( (elem && !is_node)	|| multiselected) {
+					// update the selected elements' layer
+					$('#selLayerNames').removeAttr('disabled').val(currentLayerName);
+					
+					// Enable regular menu options
+					canv_menu.enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
+				}
 			};
 		
 			$('#text').on("focus", function(e){ textBeingEntered = true; } );
@@ -3617,6 +3627,9 @@
 				ev.preventDefault();
 			})
 			
+			$('#cmenu_canvas li').disableContextMenu();
+			canv_menu.enableContextMenuItems('#delete,#cut,#copy');
+			
 			window.onbeforeunload = function() { 
 				// Suppress warning if page is empty 
 				if(undoMgr.getUndoStackSize() === 0) {

editor/svgedit.compiled.css

@@ -175,7 +175,7 @@ div#palette_holder #palette .palette_item{cursor:pointer}
 .touch #color_tools #tool_stroke .color_block>div{position:relative}
 #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
 #linkLabel>svg{height:20px;padding-top:4px}
-div#palette{float:left;width:810px;height:16px}
+div#palette{float:left;height:16px}
 div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center}
 .touch div#workarea{top:40px}
 div.palette_item{height:16px;width:16px;float:left}
@@ -335,14 +335,21 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
 .ui-slider-handle:focus{outline:0}
 #shape_buttons{background:#fff;border-radius:0 3px 3px 0;padding:10px}
 .tools_flyout .tool_button,.tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
-.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px Lucida Sans,Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
+.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px 'Lucida Sans','Lucida Grande',Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
+.touch .contextMenu{border:solid 5px rgba(0,0,0,.7);padding:0;margin:0 0 0 20px;font:18px/24px sans-serif;border-radius:5px;-webkit-box-shadow:2px 5px 20px 3px #000;box-shadow:2px 5px 20px rgba(0,0,0,0.5)}
+.touch .contextMenu:after{content:'';width:0;height:0;border:solid transparent 10px;border-right-color:rgba(0,0,0,.7);position:absolute;top:50%;left:-25px;margin-top:-10px;z-index:1000}
 .contextMenu LI{list-style:none;padding:0;margin:0}
 .contextMenu .shortcut{width:115px;text-align:right;float:right}
+.touch .contextMenu .shortcut{display:none}
+.touch .shortcut{display:none}
 .contextMenu A{-moz-user-select:none;-webkit-user-select:none;color:#222;text-decoration:none;display:block;line-height:20px;height:20px;background-position:6px center;background-repeat:no-repeat;outline:0;padding:0 15px 1px 20px}
+.touch .contextMenu A{padding:0 15px;border-bottom:#;font-weight:bold;border-top:solid 1px #e3e3e3;height:40px;line-height:40px;min-width:200px}
 .contextMenu LI.hover A{background-color:#2e5dea;color:white;cursor:default}
 .contextMenu LI.disabled A{color:#999}
+.touch .contextMenu LI.disabled A{display:none}
 .contextMenu LI.hover.disabled A{background-color:transparent}
 .contextMenu LI.separator{border-top:solid 1px #e3e3e3;padding-top:5px;margin-top:5px}
+.touch .contextMenu LI.separator{border-top:0;margin:0;padding:0}
 #menu{display:none;position:absolute;top:0;left:0;right:0;height:30px;background:#000;z-index:10;color:#fff}
 #workarea.rect,#workarea.line,#workarea.ellipse,#workarea.path,#workarea.shapelib{cursor:crosshair}
 #workarea.text{cursor:text}

editor/temp.css

@@ -1154,7 +1154,6 @@ html, body {
 
  div#palette {
 	float: left;
-	width: 810px;
 	height: 16px;
 }
 
@@ -2137,7 +2136,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 5px 0;
 	margin: 0px;
 	display: none;
-	font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
+	font: 12px/15px 'Lucida Sans', 'Lucida Grande', Helvetica, Verdana, sans-serif;
 	border-radius: 5px;
 	-moz-border-radius: 5px;
 	-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
@@ -2145,6 +2144,29 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	box-shadow: 2px 5px 10px rgba(0,0,0,.3);
 }
 
+.touch .contextMenu {
+	border: solid 5px rgba(0,0,0,.7);
+	padding: 0;
+	margin: 0 0 0 20px;
+	font: 18px/24px sans-serif;
+	border-radius: 5px;
+	-webkit-box-shadow: 2px 5px 20px 3px #000;
+	box-shadow: 2px 5px 20px rgba(0,0,0,0.5);
+}
+
+.touch .contextMenu:after {
+	content: '';
+	width: 0;
+	height: 0;
+	border: solid transparent 10px;
+	border-right-color: rgba(0,0,0,.7);
+	position: absolute;
+	top: 50%;
+	left: -25px;
+	margin-top: -10px;
+	z-index: 1000;
+}
+
 .contextMenu LI {
 	list-style: none;
 	padding: 0px;
@@ -2157,6 +2179,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	float:right;
 }
 
+.touch .contextMenu .shortcut {
+	display: none;
+}
+
+
+.touch .shortcut {
+	display: none;
+}
+
+
 .contextMenu A {
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -2171,6 +2203,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 0px 15px 1px 20px;
 }
 
+.touch .contextMenu A {
+	padding: 0 15px;
+	border-bottom: #;
+	font-weight: bold;
+	border-top: solid 1px #E3E3E3;
+	height: 40px;
+	line-height: 40px;
+	min-width: 200px;
+}
+
 .contextMenu LI.hover A {
 	background-color: #2e5dea;
 	color: white;
@@ -2179,6 +2221,11 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 
 .contextMenu LI.disabled A {
 	color: #999;
+
+}
+
+.touch .contextMenu LI.disabled A {
+	display: none;
 }
 
 .contextMenu LI.hover.disabled A {
@@ -2191,6 +2238,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	margin-top: 5px;
 }
 
+.touch .contextMenu LI.separator {
+	border-top: none;
+	margin: 0;
+	padding: 0;
+}
+
 #menu {
   display: none;
   position: absolute;

method-draw/contextmenu/jquery.contextMenu.js

@@ -37,88 +37,108 @@ if(jQuery)( function() {
 				// Add contextMenu class
 				menu.addClass('contextMenu');
 				// Simulate a true right click
+
 				$(this).bind( "mousedown", function(e) {
 					var evt = e;
-					$(this).mouseup( function(e) {
+					$(this).on("mouseup", function(e) {
 						var srcElement = $(this);
 						srcElement.unbind('mouseup');
 						$(".contextMenu").hide();
 						if( evt.button === 2 || o.allowLeft || (evt.ctrlKey && svgedit.browser.isMac()) ) {
-							e.stopPropagation();
+                if (!svgedit.browser.isTouch()) open_context_menu(e, evt, srcElement);
-
-							// Get this context menu
-						
-							if( el.hasClass('disabled') || evt.altKey ) return false;
-							
-							// Detect mouse position
-							var d = {}, x = e.pageX, y = e.pageY;
-							
-							var x_off = win.width() - menu.width(), 
-								y_off = win.height() - menu.height();
-
-							if(x > x_off - 15) x = x_off-15;
-							if(y > y_off - 30) y = y_off-30; // 30 is needed to prevent scrollbars in FF
-							
-							// Show the menu
-							doc.unbind('click');
-							menu.css({ top: y, left: x }).fadeIn(o.inSpeed);
-							// Hover events
-							menu.find('A').mouseover( function() {
-								menu.find('LI.hover').removeClass('hover');
-								$(this).parent().addClass('hover');
-							}).mouseout( function() {
-								menu.find('LI.hover').removeClass('hover');
-							});
-							
-							// Keyboard
-							doc.keypress( function(e) {
-								switch( e.keyCode ) {
-									case 38: // up
-										if( !menu.find('LI.hover').length ) {
-											menu.find('LI:last').addClass('hover');
-										} else {
-											menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
-											if( !menu.find('LI.hover').length ) menu.find('LI:last').addClass('hover');
-										}
-									break;
-									case 40: // down
-										if( menu.find('LI.hover').length == 0 ) {
-											menu.find('LI:first').addClass('hover');
-										} else {
-											menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
-											if( !menu.find('LI.hover').length ) menu.find('LI:first').addClass('hover');
-										}
-									break;
-									case 13: // enter
-										menu.find('LI.hover A').trigger('click');
-									break;
-									case 27: // esc
-										doc.trigger('click');
-									break
-								}
-							});
-							
-							// When items are selected
-							menu.find('A').unbind('mouseup');
-							menu.find('LI:not(.disabled) A').mouseup( function() {
-								doc.unbind('click').unbind('keypress');
-								$(".contextMenu").hide();
-								// Callback
-								if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
-								return false;
-							});
-							
-							// Hide bindings
-							setTimeout( function() { // Delay for Mozilla
-								doc.click( function() {
-									doc.unbind('click').unbind('keypress');
-									menu.fadeOut(o.outSpeed);
-									return false;
-								});
-							}, 0);
 						}
 					});
 				});
+
+				if (svgedit.browser.isTouch()) {
+  				 $(this).bind("taphold", function(e){
+  				  var srcElement = $(this);
+  				  srcElement.unbind('mouseup');
+  				  open_context_menu(e,e, srcElement);
+  				})
+				}
+				
+				var open_context_menu = function(e, evt, srcElement) {
+				  if (typeof evt == 'undefined') evt = e;
+				  e.stopPropagation();
+        
+				  // Get this context menu
+			  
+				  if( el.hasClass('disabled') || evt.altKey ) return false;
+				
+				  // Detect mouse position
+				  var d = {}, x = e.pageX, y = e.pageY;
+				  if (svgedit.browser.isTouch()) var d = {}, x = e.originalEvent.touches[0].pageX, y = e.originalEvent.touches[0].pageY;
+				
+				  var x_off = win.width() - menu.width(), 
+				  	y_off = win.height() - menu.height();
+        
+				  if(x > x_off - 15) x = x_off-15;
+				  if(y > y_off - 30) y = y_off-30; // 30 is needed to prevent scrollbars in FF
+				
+				  if(svgedit.browser.isTouch()) 
+				    y = y - (menu.height()/2)
+				
+				  // Show the menu
+				  doc.unbind('click');
+				  menu.css({ top: y, left: x }).fadeIn(o.inSpeed);
+				  // Hover events
+				  menu.find('A').mouseover( function() {
+				  	menu.find('LI.hover').removeClass('hover');
+				  	$(this).parent().addClass('hover');
+				  }).mouseout( function() {
+				  	menu.find('LI.hover').removeClass('hover');
+				  });
+				
+				  // Keyboard
+				  doc.keypress( function(e) {
+				  	switch( e.keyCode ) {
+				  		case 38: // up
+				  			if( !menu.find('LI.hover').length ) {
+				  				menu.find('LI:last').addClass('hover');
+				  			} else {
+				  				menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
+				  				if( !menu.find('LI.hover').length ) menu.find('LI:last').addClass('hover');
+				  			}
+				  		break;
+				  		case 40: // down
+				  			if( menu.find('LI.hover').length == 0 ) {
+				  				menu.find('LI:first').addClass('hover');
+				  			} else {
+				  				menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
+				  				if( !menu.find('LI.hover').length ) menu.find('LI:first').addClass('hover');
+				  			}
+				  		break;
+				  		case 13: // enter
+				  			menu.find('LI.hover A').trigger('click');
+				  		break;
+				  		case 27: // esc
+				  			doc.trigger('click');
+				  		break
+				  	}
+				  });
+				
+				  // When items are selected
+				  menu.find('A').unbind('mouseup');
+				  menu.find('LI:not(.disabled) A').mouseup( function() {
+				  	doc.unbind('click').unbind('keypress');
+				  	$(".contextMenu").hide();
+				  	// Callback
+				  	if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
+				  	return false;
+				  });
+				
+				  // Hide bindings
+				  setTimeout( function() { // Delay for Mozilla
+				  	doc.click( function() {
+				  		doc.unbind('click').unbind('keypress');
+				  		menu.fadeOut(o.outSpeed);
+				  		return false;
+				  	});
+				  }, 0);
+				}
+				
+				
 				
 				// Disable text selection
 				if( $.browser.mozilla ) {

method-draw/index.html

@@ -24,11 +24,11 @@
 <!--{if svg_edit_release}-->
   <script type="text/javascript" src="svgedit.compiled.js"></script>
 <!--{else}>
+  <script type="text/javascript" src="touch.js"></script>
   <script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script>
   <script type="text/javascript" src="jquerybbq/jquery.bbq.min.js"></script>
   <script type="text/javascript" src="svgicons/jquery.svgicons.js"></script>
   <script type="text/javascript" src="jgraduate/jquery.jgraduate.js"></script>
-  <script type="text/javascript" src="touch.js"></script>
   <script type="text/javascript" src="contextmenu/jquery.contextMenu.js"></script>
   <script type="text/javascript" src="browser.js"></script>
   <script type="text/javascript" src="svgtransformlist.js"></script>
@@ -51,6 +51,7 @@
   <script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
   <script type="text/javascript" src="extensions/ext-shapes.js"></script>
   <script type="text/javascript" src="requestanimationframe.js"></script>
+  <script type="text/javascript" src="taphold.js"></script>
 <!{endif}-->
 
 <!-- you can load extensions here -->
@@ -166,12 +167,12 @@ $(function(){
 	  <h4 class="clearfix">Canvas</h4>
 	  
 		<label data-title="Change canvas width">
-			<span class="icon_label">Width</span>
 			<input size="3" id="canvas_width" type="text" pattern="[0-9]*" />
+			<span class="icon_label">Width</span>
 		</label>
 		<label data-title="Change canvas height">
-			<span class="icon_label">Height</span>
 			<input id="canvas_height" size="3" type="text" pattern="[0-9]*" />
+			<span class="icon_label">Height</span>
 		</label>
 		  	
   	
@@ -207,91 +208,104 @@ $(function(){
 	<div id="rect_panel" class="context_panel">
 	  <h4 class="clearfix">Rectangle</h4>
 	  <label>
-			<span>X</span> 
 			<input id="rect_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*" />
+			<span>X</span> 
 		</label>
 		<label>
-		  <span>Y</span> 
 		  <input id="rect_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
+			<span>Y</span> 
 		</label>
 		<label id="rect_width_tool attr_changer" data-title="Change rectangle width">
-			<span class="icon_label">Width</span>
 			<input id="rect_width" class="attr_changer" size="3" data-attr="width" type="text" pattern="[0-9]*" />
+			<span class="icon_label">Width</span>
 		</label>
 		<label id="rect_height_tool" data-title="Change rectangle height">
-			<span class="icon_label">Height</span>
 			<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="text" pattern="[0-9]*" />
+			<span class="icon_label">Height</span>
 		</label>
 	</div>
 	
 	<div id="path_panel" class="context_panel clearfix">
 	  <h4 class="clearfix">Path</h4>
-	  <label><span>X</span>
+	  <label>
 		  <input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
+		  <span>X</span>
 		</label>
-		<label><span>Y</span>
+		<label>
 		  <input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
+		  <span>Y</span>
 		</label>
 	</div>
 
 	<div id="image_panel" class="context_panel clearfix">
 	<h4>Image</h4>
 		<label>
-			<span>X</span> 
 			<input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x"  pattern="[0-9]*"/>
+		  <span>X</span> 
 		</label>
 		<label>
-		  <span>Y</span> 
 		  <input id="image_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y"  pattern="[0-9]*"/>
-		</label>
+		  <span>Y</span> 
-		<label><span class="icon_label">Width</span>
+		</label>
-		  <input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
+		<label>
+		  <input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
+		  <span class="icon_label">Width</span>
 		</label>
 		<label>
-		  <span class="icon_label">Height</span>
 		  <input id="image_height" class="attr_changer" data-title="Change image height" size="3" data-attr="height" pattern="[0-9]*" />
+		  <span class="icon_label">Height</span>
 		</label>
   </div>
 
 	<div id="ellipse_panel" class="context_panel clearfix">
 	  <h4>Ellipse</h4>
-		<label id="tool_ellipse_cx"><span>X</span>
+		<label id="tool_ellipse_cx">
 		  <input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="cx" pattern="[0-9]*" />
+		  <span>X</span>
 		</label>
-		<label id="tool_ellipse_cy"><span>Y</span>
+		<label id="tool_ellipse_cy">
 		  <input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="cy" pattern="[0-9]*" />
+		  <span>Y</span>
 		</label>
-		<label id="tool_ellipse_rx"><span>Radius X</span>
+		<label id="tool_ellipse_rx">
 		  <input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" size="3" data-attr="rx" pattern="[0-9]*" />
+	    <span>Radius X</span>
 		</label>
-		<label id="tool_ellipse_ry"><span>Radius Y</span>
+		<label id="tool_ellipse_ry">
 		  <input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" size="3" data-attr="ry" pattern="[0-9]*" />
+		  <span>Radius Y</span>
 		</label>
 	</div>
 
 	<div id="line_panel" class="context_panel clearfix">
 	  <h4>Line</h4>
-		<label id="tool_line_x1"><span>Start X</span>
+		<label id="tool_line_x1">
 		  <input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" size="3" data-attr="x1" pattern="[0-9]*" />
+		  <span>Start X</span>
 		</label>
-		<label id="tool_line_y1"><span>Start Y</span>
+		<label id="tool_line_y1">
 		  <input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" size="3" data-attr="y1" pattern="[0-9]*" />
+		  <span>Start Y</span>
 		</label>
-		<label id="tool_line_x2"><span>End X</span>
+		<label id="tool_line_x2">
 		  <input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" size="3" data-attr="x2"   pattern="[0-9]*" />
+		  <span>End X</span>
 		</label>
-		<label id="tool_line_y2"><span>End Y</span>
+		<label id="tool_line_y2">
 		  <input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" size="3" data-attr="y2"   pattern="[0-9]*" />
+		  <span>End Y</span>
 		</label>
 	</div>
 
 	<div id="text_panel" class="context_panel clearfix">
 	  <h4>Text</h4>
-		<label><span>X</span>
+		<label>
 		  <input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
+		  <span>X</span>
 		</label>
-		<label><span>Y</span>
+		<label>
 		  <input id="text_y" class="attr_changer" data-title="Change text y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
+		  <span>Y</span>
 		</label>
 		<div class="toolset" id="tool_font_family">
 				<!-- Font family -->
@@ -321,8 +335,8 @@ $(function(){
 		</div>
 
 		<label id="tool_font_size" data-title="Change Font Size">
-			<span id="font_sizeLabel" class="icon_label">Font Size</span>
 			<input id="font_size" size="3" value="0" />
+			<span id="font_sizeLabel" class="icon_label">Font Size</span>
 		</label>
 		
 		<!-- Not visible, but still used -->
@@ -344,30 +358,26 @@ $(function(){
 	
 	<div id="g_panel" class="context_panel clearfix">
 		<h4>Group</h4>
-		<label><span>X</span>
+		<label>
-		  <input id="group_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
+		  <input id="g_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
+		  <span>X</span>
 		</label>
-		<label><span>Y</span>
+		<label>
-		  <input id="group_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
+		  <input id="g_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
+		  <span>Y</span>
 		</label>
 	</div>
-
-	<!-- For anchor elements -->
-	<div id="a_panel" class="context_panel clearfix">
-		<label id="tool_link_url" data-title="Set link URL (leave empty to remove)">
-			<span id="linkLabel" class="icon_label"></span>
-			<input id="link_url" type="text" size="35"/>
-		</label>	
-	</div>
 	
 	<div id="path_node_panel" class="context_panel clearfix">
 	  <h4>Edit Path</h4>
 
-		<label id="tool_node_x"><span>X</span>
+		<label id="tool_node_x">
 			<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" size="3" data-attr="x" />
+		  <span>X</span>
 		</label>
-		<label id="tool_node_y"><span>Y</span>
+		<label id="tool_node_y">
 			<input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" size="3" data-attr="y" />
+		  <span>Y</span>
 		</label>
 		
 		<label id="segment_type" class="draginput label">
@@ -396,97 +406,64 @@ $(function(){
 	<div id="selected_panel" class="context_panel clearfix">
 
 		<label id="tool_angle" data-title="Change rotation angle" class="draginput">
-			<span class="icon_label">Rotation</span>
 			<input id="angle" class="attr_changer" size="2" value="0" data-min="-180" data-max="180" type="text"/>
+			<span class="icon_label">Rotation</span>
 			<div id="tool_angle_indicator">
 			  <div id="tool_angle_indicator_cursor"></div>
 			</div>
 		</label>
 		
 			<label class="toolset" id="tool_opacity" data-title="Change selected item opacity">
-  			<span id="group_opacityLabel" class="icon_label">Opacity</span>
   			<input id="group_opacity" size="3" value="100" step="5" min="0" max="100" />
+  		  <span id="group_opacityLabel" class="icon_label">Opacity</span>
   		</label>
 		
 		<div class="toolset" id="tool_blur" data-title="Change gaussian blur value">
 			<label>
-				<span class="icon_label">Blur</span>
 				<input id="blur" size="2" value="0" step=".1"  min="0" max="10" />
+			  <span class="icon_label">Blur</span>
 			</label>
 		</div>
 		
 		<label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
-			<span class="icon_label">Roundness</span>
 			<input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
+		  <span class="icon_label">Roundness</span>
 		</label>
 		
-    <div class="clearfix"></div>
-		<h4>Stroke</h4>
-		<div class="toolset" data-title="Change stroke">
-			<label>
-				<span class="icon_label">Stroke Width</span>
-				<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
-			</label>
-		</div>
-		<label class="stroke_tool draginput"> 
-		  <span>Stroke Dash</span>
-			<select id="stroke_style" data-title="Change stroke dash style">
-				<option selected="selected" value="none">&mdash;</option>
-				<option value="2,2">···</option>
-				<option value="5,5">- -</option>
-				<option value="5,2,2,2">-·-</option>
-				<option value="5,2,2,2,2,2">-··-</option>
-			</select>
-			<div class="caret"></div>
-			<label id="stroke_style_label">&mdash;</label>
-		</label>
-			
-    <label style="display: none;">
-      <span class="icon_label">Stroke Join</span>
-    </label>
-      
-    <label  style="display: none;">
-      <span class="icon_label">Stroke Cap</span>
-		</label>
 		<div class="clearfix"></div>
-		<h4>Align</h4>
+		<div id="align_tools">
-		<div class="toolset align_buttons" id="tool_position">
+  		<h4>Align</h4>
-				<label>
+  		<div class="toolset align_buttons" id="tool_position">
-				  <div class="col last clear" id="position_opts">
+  				<label>
-  				  <div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
+  				  <div class="col last clear" id="position_opts">
-        		<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
+    				  <div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
-        		<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
+          		<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
-        		<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
+          		<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
-        		<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
+          		<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
-        		<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
+          		<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
-  				</div>
+          		<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
-				</label>
+    				</div>
-		</div>		
+  				</label>
+  		</div>		
+  	</div>
 	</div>
 	
 	<!-- Buttons when multiple elements are selected -->
 	<div id="multiselected_panel" class="context_panel clearfix">
-	  <h4>Multiple Elements</h4>
+	  <h4 class="hidable">Multiple Elements</h4>
-		<!--<div class="tool_sep"></div> -->
-		<!--<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div> -->
-		<!--<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div> -->
-		<!--<div class="tool_sep"></div> -->
-		<!--div class="push_button" id="tool_group" title="Group Elements [G]"></div>-->
-		<!--<div class="push_button" id="tool_make_link_multi" title="Make (hyper)link"></div>-->
 		<div class="toolset align_buttons">
 		  <h4>Align</h4>
-  		<label>
     		<div class="col last clear">
-      		<div class="push_button" id="tool_alignleft" title="Align Left"></div>
+      		<div class="draginput_cell" id="tool_alignleft" title="Align Left"></div>
-      		<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
+      		<div class="draginput_cell" id="tool_aligncenter" title="Align Center"></div>
-      		<div class="push_button" id="tool_alignright" title="Align Right"></div>
+      		<div class="draginput_cell" id="tool_alignright" title="Align Right"></div>
-      		<div class="push_button" id="tool_aligntop" title="Align Top"></div>
+      		<div class="draginput_cell" id="tool_aligntop" title="Align Top"></div>
-      		<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
+      		<div class="draginput_cell" id="tool_alignmiddle" title="Align Middle"></div>
-      		<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
+      		<div class="draginput_cell" id="tool_alignbottom" title="Align Bottom"></div>
     		</div>
-  		</label>
 		</div>
-		<label id="tool_align_relative"> 
+		<div class="clearfix"></div>
+		<label id="tool_align_relative" style="margin-top: 10px;"> 
 			<span id="relativeToLabel">Relative to:</span>
 			<select id="align_relative_to" title="Align relative to ...">
 			<option id="selected_objects" value="selected">Objects</option>
@@ -496,6 +473,37 @@ $(function(){
 		<div class="tool_sep"></div>
 
 	</div>
+	
+	<div id="stroke_panel" class="context_panel clearfix">
+  	<div class="clearfix"></div>
+  	<h4>Stroke</h4>
+  	<div class="toolset" data-title="Change stroke">
+  		<label>
+  			<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
+  		  <span class="icon_label">Stroke Width</span>
+  		</label>
+  	</div>
+  	<label class="stroke_tool draginput"> 
+  	  <span>Stroke Dash</span>
+  		<select id="stroke_style" data-title="Change stroke dash style">
+  			<option selected="selected" value="none">&mdash;</option>
+  			<option value="2,2">···</option>
+  			<option value="5,5">- -</option>
+  			<option value="5,2,2,2">-·-</option>
+  			<option value="5,2,2,2,2,2">-··-</option>
+  		</select>
+  		<div class="caret"></div>
+  		<label id="stroke_style_label">&mdash;</label>
+  	</label>
+		
+    <label style="display: none;">
+      <span class="icon_label">Stroke Join</span>
+    </label>
+    
+    <label  style="display: none;">
+      <span class="icon_label">Stroke Cap</span>
+  	</label>
+	</div>
 
 </div> <!-- tools_top -->
 	<div id="cur_context_panel">
@@ -511,7 +519,7 @@ $(function(){
 	<div class="tool_button" id="tool_ellipse" title="Ellipse/Circle Tool [C]"></div>
 	<div class="tool_button" id="tool_path" title="Path Tool [P]"></div>
 	<div class="tool_button" id="tool_text" title="Text Tool [T]"></div>
-	<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
+	<div class="tool_button" id="tool_zoom" title="Zoom Tool [Z]"></div>
 	
   <div id="color_tools">
         <div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
@@ -537,9 +545,26 @@ $(function(){
 
     <!-- Zoom buttons -->
 	<div id="zoom_panel" class="toolset" title="Change zoom level">
-		<label>
+		<label class="draginput select" id="zoom_label">
-  		<span id="zoomLabel" class="zoom_tool icon_label"></span>
+  		<span  id="zoomLabel" class="zoom_tool icon_label"></span>
-  		<input id="zoom" size="3" value="100" type="text" />
+  		<select id="zoom_select">
+  		  <option>6%</option>
+  		  <option>12%</option>
+  		  <option>16%</option>
+  		  <option>25%</option>
+  		  <option>50%</option>
+  		  <option>75%</option>
+  		  <option selected>100%</option>
+  		  <option>150%</option>
+  		  <option>200%</option>
+  		  <option>300%</option>
+  		  <option>400%</option>
+  		  <option>600%</option>
+  		  <option>800%</option>
+  		  <option>1600%</option>
+  		</select>
+  		<div class="caret"></div>
+  		<input id="zoom" size="3" value="100%" type="text" readonly="readonly" />
 		</label>
 	</div>
 

method-draw/path.js

@@ -147,8 +147,8 @@ svgedit.path.addPointGrip = function(index, x, y) {
 		svgedit.utilities.assignAttributes(pointGrip, {
 			'id': "pathpointgrip_" + index,
 			'display': "none",
-			'width': 5,
+			'width': svgeditor.browser.isTouch() ? 30 : 5,
-			'height': 5,
+			'height': svgeditor.browser.isTouch() ? 30 : 5,
 			'fill': "#fff",
 			'stroke': "#4F80FF",
 			'shape-rendering': "crispEdges",
@@ -167,8 +167,8 @@ svgedit.path.addPointGrip = function(index, x, y) {
 	if(x && y) {
 		// set up the point grip element and display it
 		svgedit.utilities.assignAttributes(pointGrip, {
-			'x': x-2.5,
+			'x': x-(svgeditor.browser.isTouch() ? 15 : 2.5),
-			'y': y-2.5,
+			'y': y-(svgeditor.browser.isTouch() ? 15 : 2.5),
 			'display': "inline"
 		});
 	}
@@ -193,7 +193,7 @@ svgedit.path.addCtrlGrip = function(id) {
 	svgedit.utilities.assignAttributes(pointGrip, {
 		'id': "ctrlpointgrip_" + id,
 		'display': "none",
-		'r': 3,
+		'r': svgeditor.browser.isTouch() ? 15 : 3,
 		'fill': "#4F80FF",
 		'cursor': 'move',
 		'style': 'pointer-events:all',
@@ -224,8 +224,8 @@ svgedit.path.getPointGrip = function(seg, update) {
 	if(update) {
 		var pt = svgedit.path.getGripPt(seg);
 		svgedit.utilities.assignAttributes(pointGrip, {
-			'x': pt.x-2.5,
+			'x': pt.x-(svgeditor.browser.isTouch() ? 15 : 2.5),
-			'y': pt.y-2.5,
+			'y': pt.y-(svgeditor.browser.isTouch() ? 15 : 2.5),
 			'display': "inline"
 		});
 	}
@@ -446,7 +446,8 @@ svgedit.path.Segment.prototype.addGrip = function() {
 svgedit.path.Segment.prototype.update = function(full) {
 	if(this.ptgrip) {
 		var pt = svgedit.path.getGripPt(this);
-		var properties = (this.ptgrip.nodeName == "rect") ? {'x': pt.x-2.5, 'y': pt.y-2.5} : {'cx': pt.x, 'cy': pt.y};
+		var reposition = (svgeditor.browser.isTouch() ? 15 : 2.5)
+		var properties = (this.ptgrip.nodeName == "rect") ? {'x': pt.x-reposition, 'y': pt.y-reposition} : {'cx': pt.x, 'cy': pt.y};
 		svgedit.utilities.assignAttributes(this.ptgrip, properties);
 		svgedit.path.getSegSelector(this, true);
 

method-draw/svg-editor.css

@@ -509,7 +509,6 @@ html, body {
 
  div#palette {
 	float: left;
-	width: 810px;
 	height: 16px;
 }
 
@@ -1492,7 +1491,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 5px 0;
 	margin: 0px;
 	display: none;
-	font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
+	font: 12px/15px 'Lucida Sans', 'Lucida Grande', Helvetica, Verdana, sans-serif;
 	border-radius: 5px;
 	-moz-border-radius: 5px;
 	-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
@@ -1500,6 +1499,29 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	box-shadow: 2px 5px 10px rgba(0,0,0,.3);
 }
 
+.touch .contextMenu {
+	border: solid 5px rgba(0,0,0,.7);
+	padding: 0;
+	margin: 0 0 0 20px;
+	font: 18px/24px sans-serif;
+	border-radius: 5px;
+	-webkit-box-shadow: 2px 5px 20px 3px #000;
+	box-shadow: 2px 5px 20px rgba(0,0,0,0.5);
+}
+
+.touch .contextMenu:after {
+	content: '';
+	width: 0;
+	height: 0;
+	border: solid transparent 10px;
+	border-right-color: rgba(0,0,0,.7);
+	position: absolute;
+	top: 50%;
+	left: -25px;
+	margin-top: -10px;
+	z-index: 1000;
+}
+
 .contextMenu LI {
 	list-style: none;
 	padding: 0px;
@@ -1512,6 +1534,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	float:right;
 }
 
+.touch .contextMenu .shortcut {
+	display: none;
+}
+
+
+.touch .shortcut {
+	display: none;
+}
+
+
 .contextMenu A {
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -1526,6 +1558,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 0px 15px 1px 20px;
 }
 
+.touch .contextMenu A {
+	padding: 0 15px;
+	border-bottom: #;
+	font-weight: bold;
+	border-top: solid 1px #E3E3E3;
+	height: 40px;
+	line-height: 40px;
+	min-width: 200px;
+}
+
 .contextMenu LI.hover A {
 	background-color: #2e5dea;
 	color: white;
@@ -1534,6 +1576,11 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 
 .contextMenu LI.disabled A {
 	color: #999;
+
+}
+
+.touch .contextMenu LI.disabled A {
+	display: none;
 }
 
 .contextMenu LI.hover.disabled A {
@@ -1546,6 +1593,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	margin-top: 5px;
 }
 
+.touch .contextMenu LI.separator {
+	border-top: none;
+	margin: 0;
+	padding: 0;
+}
+
 #menu {
   display: none;
   position: absolute;

method-draw/svg-editor.js

@@ -361,6 +361,7 @@
 				Utils = svgedit.utilities,
 				default_img_url = curConfig.imgPath + "placeholder.svg",
 				workarea = $("#workarea"),
+				canv_menu = $("#cmenu_canvas"),
 				exportWindow = null, 
 				tool_scale = 1,
 				ui_context = 'toolbars',
@@ -1571,6 +1572,7 @@
 					}
 					menu_items[(el_name === 'g' ? 'en':'dis') + 'ableContextMenuItems']('#ungroup');
 					menu_items[((el_name === 'g' || !multiselected) ? 'dis':'en') + 'ableContextMenuItems']('#group');
+
 				} // if (elem != null)
 				else if (multiselected) {
 					$('#multiselected_panel').show();
@@ -1597,6 +1599,14 @@
 				}
 				
 				svgCanvas.addedNew = false;
+				
+				if ( (elem && !is_node)	|| multiselected) {
+					// update the selected elements' layer
+					$('#selLayerNames').removeAttr('disabled').val(currentLayerName);
+					
+					// Enable regular menu options
+					canv_menu.enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
+				}
 			};
 		
 			$('#text').on("focus", function(e){ textBeingEntered = true; } );
@@ -3617,6 +3627,9 @@
 				ev.preventDefault();
 			})
 			
+			$('#cmenu_canvas li').disableContextMenu();
+			canv_menu.enableContextMenuItems('#delete,#cut,#copy');
+			
 			window.onbeforeunload = function() { 
 				// Suppress warning if page is empty 
 				if(undoMgr.getUndoStackSize() === 0) {

method-draw/svgedit.compiled.css

@@ -175,7 +175,7 @@ div#palette_holder #palette .palette_item{cursor:pointer}
 .touch #color_tools #tool_stroke .color_block>div{position:relative}
 #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
 #linkLabel>svg{height:20px;padding-top:4px}
-div#palette{float:left;width:810px;height:16px}
+div#palette{float:left;height:16px}
 div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center}
 .touch div#workarea{top:40px}
 div.palette_item{height:16px;width:16px;float:left}
@@ -335,14 +335,21 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
 .ui-slider-handle:focus{outline:0}
 #shape_buttons{background:#fff;border-radius:0 3px 3px 0;padding:10px}
 .tools_flyout .tool_button,.tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
-.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px Lucida Sans,Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
+.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px 'Lucida Sans','Lucida Grande',Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
+.touch .contextMenu{border:solid 5px rgba(0,0,0,.7);padding:0;margin:0 0 0 20px;font:18px/24px sans-serif;border-radius:5px;-webkit-box-shadow:2px 5px 20px 3px #000;box-shadow:2px 5px 20px rgba(0,0,0,0.5)}
+.touch .contextMenu:after{content:'';width:0;height:0;border:solid transparent 10px;border-right-color:rgba(0,0,0,.7);position:absolute;top:50%;left:-25px;margin-top:-10px;z-index:1000}
 .contextMenu LI{list-style:none;padding:0;margin:0}
 .contextMenu .shortcut{width:115px;text-align:right;float:right}
+.touch .contextMenu .shortcut{display:none}
+.touch .shortcut{display:none}
 .contextMenu A{-moz-user-select:none;-webkit-user-select:none;color:#222;text-decoration:none;display:block;line-height:20px;height:20px;background-position:6px center;background-repeat:no-repeat;outline:0;padding:0 15px 1px 20px}
+.touch .contextMenu A{padding:0 15px;border-bottom:#;font-weight:bold;border-top:solid 1px #e3e3e3;height:40px;line-height:40px;min-width:200px}
 .contextMenu LI.hover A{background-color:#2e5dea;color:white;cursor:default}
 .contextMenu LI.disabled A{color:#999}
+.touch .contextMenu LI.disabled A{display:none}
 .contextMenu LI.hover.disabled A{background-color:transparent}
 .contextMenu LI.separator{border-top:solid 1px #e3e3e3;padding-top:5px;margin-top:5px}
+.touch .contextMenu LI.separator{border-top:0;margin:0;padding:0}
 #menu{display:none;position:absolute;top:0;left:0;right:0;height:30px;background:#000;z-index:10;color:#fff}
 #workarea.rect,#workarea.line,#workarea.ellipse,#workarea.path,#workarea.shapelib{cursor:crosshair}
 #workarea.text{cursor:text}

method-draw/temp.css

@@ -1154,7 +1154,6 @@ html, body {
 
  div#palette {
 	float: left;
-	width: 810px;
 	height: 16px;
 }
 
@@ -2137,7 +2136,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 5px 0;
 	margin: 0px;
 	display: none;
-	font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
+	font: 12px/15px 'Lucida Sans', 'Lucida Grande', Helvetica, Verdana, sans-serif;
 	border-radius: 5px;
 	-moz-border-radius: 5px;
 	-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
@@ -2145,6 +2144,29 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	box-shadow: 2px 5px 10px rgba(0,0,0,.3);
 }
 
+.touch .contextMenu {
+	border: solid 5px rgba(0,0,0,.7);
+	padding: 0;
+	margin: 0 0 0 20px;
+	font: 18px/24px sans-serif;
+	border-radius: 5px;
+	-webkit-box-shadow: 2px 5px 20px 3px #000;
+	box-shadow: 2px 5px 20px rgba(0,0,0,0.5);
+}
+
+.touch .contextMenu:after {
+	content: '';
+	width: 0;
+	height: 0;
+	border: solid transparent 10px;
+	border-right-color: rgba(0,0,0,.7);
+	position: absolute;
+	top: 50%;
+	left: -25px;
+	margin-top: -10px;
+	z-index: 1000;
+}
+
 .contextMenu LI {
 	list-style: none;
 	padding: 0px;
@@ -2157,6 +2179,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	float:right;
 }
 
+.touch .contextMenu .shortcut {
+	display: none;
+}
+
+
+.touch .shortcut {
+	display: none;
+}
+
+
 .contextMenu A {
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -2171,6 +2203,16 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	padding: 0px 15px 1px 20px;
 }
 
+.touch .contextMenu A {
+	padding: 0 15px;
+	border-bottom: #;
+	font-weight: bold;
+	border-top: solid 1px #E3E3E3;
+	height: 40px;
+	line-height: 40px;
+	min-width: 200px;
+}
+
 .contextMenu LI.hover A {
 	background-color: #2e5dea;
 	color: white;
@@ -2179,6 +2221,11 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 
 .contextMenu LI.disabled A {
 	color: #999;
+
+}
+
+.touch .contextMenu LI.disabled A {
+	display: none;
 }
 
 .contextMenu LI.hover.disabled A {
@@ -2191,6 +2238,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	margin-top: 5px;
 }
 
+.touch .contextMenu LI.separator {
+	border-top: none;
+	margin: 0;
+	padding: 0;
+}
+
 #menu {
   display: none;
   position: absolute;