ipad changes
Mark MacKay
parent
d03acb5790
commit
60f34ac637
|
|
@ -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();
|
||||
|
||||
// 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()) open_context_menu(e, evt, srcElement);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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 ) {
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ svgedit.path.addPointGrip = function(index, x, y) {
|
|||
svgedit.utilities.assignAttributes(pointGrip, {
|
||||
'id': "pathpointgrip_" + index,
|
||||
'display': "none",
|
||||
'width': 5,
|
||||
'height': 5,
|
||||
'width': svgeditor.browser.isTouch() ? 30 : 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,
|
||||
'y': y-2.5,
|
||||
'x': x-(svgeditor.browser.isTouch() ? 15 : 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,
|
||||
'y': pt.y-2.5,
|
||||
'x': pt.x-(svgeditor.browser.isTouch() ? 15 : 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
// 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()) open_context_menu(e, evt, srcElement);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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 ) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<label><span class="icon_label">Width</span>
|
||||
<input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
|
||||
<span>Y</span>
|
||||
</label>
|
||||
<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>
|
||||
<input id="group_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
|
||||
<label>
|
||||
<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>
|
||||
<input id="group_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
|
||||
<label>
|
||||
<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">—</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">—</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 class="toolset align_buttons" id="tool_position">
|
||||
<label>
|
||||
<div class="col last clear" id="position_opts">
|
||||
<div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
|
||||
<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
|
||||
<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
|
||||
<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
|
||||
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
|
||||
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div id="align_tools">
|
||||
<h4>Align</h4>
|
||||
<div class="toolset align_buttons" id="tool_position">
|
||||
<label>
|
||||
<div class="col last clear" id="position_opts">
|
||||
<div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
|
||||
<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
|
||||
<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
|
||||
<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
|
||||
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
|
||||
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons when multiple elements are selected -->
|
||||
<div id="multiselected_panel" class="context_panel clearfix">
|
||||
<h4>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>-->
|
||||
<h4 class="hidable">Multiple Elements</h4>
|
||||
<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="push_button" id="tool_aligncenter" title="Align Center"></div>
|
||||
<div class="push_button" id="tool_alignright" title="Align Right"></div>
|
||||
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
|
||||
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
|
||||
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
|
||||
<div class="draginput_cell" id="tool_alignleft" title="Align Left"></div>
|
||||
<div class="draginput_cell" id="tool_aligncenter" title="Align Center"></div>
|
||||
<div class="draginput_cell" id="tool_alignright" title="Align Right"></div>
|
||||
<div class="draginput_cell" id="tool_aligntop" title="Align Top"></div>
|
||||
<div class="draginput_cell" id="tool_alignmiddle" title="Align Middle"></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">—</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">—</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>
|
||||
<span id="zoomLabel" class="zoom_tool icon_label"></span>
|
||||
<input id="zoom" size="3" value="100" type="text" />
|
||||
<label class="draginput select" id="zoom_label">
|
||||
<span id="zoomLabel" class="zoom_tool icon_label"></span>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ svgedit.path.addPointGrip = function(index, x, y) {
|
|||
svgedit.utilities.assignAttributes(pointGrip, {
|
||||
'id': "pathpointgrip_" + index,
|
||||
'display': "none",
|
||||
'width': 5,
|
||||
'height': 5,
|
||||
'width': svgeditor.browser.isTouch() ? 30 : 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,
|
||||
'y': y-2.5,
|
||||
'x': x-(svgeditor.browser.isTouch() ? 15 : 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,
|
||||
'y': pt.y-2.5,
|
||||
'x': pt.x-(svgeditor.browser.isTouch() ? 15 : 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue