zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

drag and drop upload

master
Mark MacKay 2012-08-09 03:41:12 -05:00
parent 6c83a8d487
commit f84faccc60
24 changed files with 1886 additions and 1704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
editor/.DS_Store vendored
View File

Binary file not shown.

120
editor/extensions/ext-server_opensave.js
View File

@ -10,70 +10,70 @@
svgEditor.addExtension("server_opensave", { svgEditor.addExtension("server_opensave", {
callback: function() { callback: function() {
var save_svg_action = 'extensions/filesave.php'; //var save_svg_action = 'extensions/filesave.php';
var save_png_action = 'extensions/filesave.php'; //var save_png_action = 'extensions/filesave.php';
// Create upload target (hidden iframe) // Create upload target (hidden iframe)
var target = $('<iframe name="output_frame" />').hide().appendTo('body'); var target = $('<iframe name="output_frame" />').hide().appendTo('body');
svgEditor.setCustomHandlers({ //svgEditor.setCustomHandlers({
save: function(win, data) { // save: function(win, data) {
var svg = "<?xml version=\"1.0\"?>\n" + data; // var svg = "<?xml version=\"1.0\"?>\n" + data;
//
var title = svgCanvas.getDocumentTitle(); // var title = svgCanvas.getDocumentTitle();
var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_'); // var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');
//
var form = $('<form>').attr({ // var form = $('<form>').attr({
method: 'post', // method: 'post',
action: save_svg_action, // action: save_svg_action,
target: 'output_frame' // target: 'output_frame'
}) .append('<input type="hidden" name="output_svg" value="' + encodeURI(svg) + '">') // }) .append('<input type="hidden" name="output_svg" value="' + encodeURI(svg) + '">')
.append('<input type="hidden" name="filename" value="' + filename + '">') // .append('<input type="hidden" name="filename" value="' + filename + '">')
.appendTo('body') // .appendTo('body')
.submit().remove(); // .submit().remove();
}, // },
pngsave: function(win, data) { // pngsave: function(win, data) {
var issues = data.issues; // var issues = data.issues;
//
if(!$('#export_canvas').length) { // if(!$('#export_canvas').length) {
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body'); // $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
} // }
var c = $('#export_canvas')[0]; // var c = $('#export_canvas')[0];
//
c.width = svgCanvas.contentW; // c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH; // c.height = svgCanvas.contentH;
canvg(c, data.svg, {renderCallback: function() { // canvg(c, data.svg, {renderCallback: function() {
var datauri = c.toDataURL('image/png'); // var datauri = c.toDataURL('image/png');
//
var uiStrings = svgEditor.uiStrings; // var uiStrings = svgEditor.uiStrings;
var note = ''; // var note = '';
//
// Check if there's issues // // Check if there's issues
if(issues.length) { // if(issues.length) {
var pre = "\n \u2022 "; // var pre = "\n \u2022 ";
note += ("\n\n" + pre + issues.join(pre)); // note += ("\n\n" + pre + issues.join(pre));
} // }
//
if(note.length) { // if(note.length) {
alert(note); // alert(note);
} // }
//
var title = svgCanvas.getDocumentTitle(); // var title = svgCanvas.getDocumentTitle();
var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_'); // var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');
//
var form = $('<form>').attr({ // var form = $('<form>').attr({
method: 'post', // method: 'post',
action: save_png_action, // action: save_png_action,
target: 'output_frame' // target: 'output_frame'
}) .append('<input type="hidden" name="output_png" value="' + datauri + '">') // }) .append('<input type="hidden" name="output_png" value="' + datauri + '">')
.append('<input type="hidden" name="filename" value="' + filename + '">') // .append('<input type="hidden" name="filename" value="' + filename + '">')
.appendTo('body') // .appendTo('body')
.submit().remove(); // .submit().remove();
}}); // }});
//
//
} // }
}); //});
// Do nothing if client support is found // Do nothing if client support is found
if(window.FileReader) return; if(window.FileReader) return;

1
editor/math.js
View File

@ -236,6 +236,7 @@ svgedit.math.snapToAngle = function(x1,y1,x2,y2) {
// Returns: // Returns:
// Boolean that's true if rectangles intersect // Boolean that's true if rectangles intersect
svgedit.math.rectsIntersect = function(r1, r2) { svgedit.math.rectsIntersect = function(r1, r2) {
if (typeof r1 == 'undefined' || typeof r2 == 'undefined') return false;
return r2.x < (r1.x+r1.width) && return r2.x < (r1.x+r1.width) &&
(r2.x+r2.width) > r1.x && (r2.x+r2.width) > r1.x &&
r2.y < (r1.y+r1.height) && r2.y < (r1.y+r1.height) &&

11
editor/path.js
View File

@ -886,7 +886,7 @@ svgedit.path.removePath_ = function(id) {
if(id in pathData) delete pathData[id]; if(id in pathData) delete pathData[id];
}; };
var getRotVals = function(x, y) { var getRotVals = function(x, y, oldcx, oldcy, newcx, newcy, angle) {
dx = x - oldcx; dx = x - oldcx;
dy = y - oldcy; dy = y - oldcy;
@ -905,7 +905,6 @@ var getRotVals = function(x, y) {
r = Math.sqrt(dx*dx + dy*dy); r = Math.sqrt(dx*dx + dy*dy);
theta = Math.atan2(dy,dx) - angle; theta = Math.atan2(dy,dx) - angle;
return {'x':(r * Math.cos(theta) + newcx)/1, return {'x':(r * Math.cos(theta) + newcx)/1,
'y':(r * Math.sin(theta) + newcy)/1}; 'y':(r * Math.sin(theta) + newcy)/1};
}; };
@ -928,7 +927,7 @@ svgedit.path.recalcRotatedPath = function() {
oldcy = oldbox.y + oldbox.height/2, oldcy = oldbox.y + oldbox.height/2,
newcx = box.x + box.width/2, newcx = box.x + box.width/2,
newcy = box.y + box.height/2, newcy = box.y + box.height/2,
// un-rotate the new center to the proper position // un-rotate the new center to the proper position
dx = newcx - oldcx, dx = newcx - oldcx,
dy = newcy - oldcy, dy = newcy - oldcy,
@ -946,11 +945,11 @@ svgedit.path.recalcRotatedPath = function() {
type = seg.pathSegType; type = seg.pathSegType;
if(type == 1) continue; if(type == 1) continue;
var rvals = getRotVals(seg.x,seg.y), var rvals = getRotVals(seg.x,seg.y, oldcx, oldcy, newcx, newcy, angle),
points = [rvals.x, rvals.y]; points = [rvals.x, rvals.y];
if(seg.x1 != null && seg.x2 != null) { if(seg.x1 != null && seg.x2 != null) {
c_vals1 = getRotVals(seg.x1, seg.y1); c_vals1 = getRotVals(seg.x1, seg.y1, oldcx, oldcy, newcx, newcy, angle);
c_vals2 = getRotVals(seg.x2, seg.y2); c_vals2 = getRotVals(seg.x2, seg.y2, oldcx, oldcy, newcx, newcy, angle);
points.splice(points.length, 0, c_vals1.x , c_vals1.y, c_vals2.x, c_vals2.y); points.splice(points.length, 0, c_vals1.x , c_vals1.y, c_vals2.x, c_vals2.y);
} }
svgedit.path.replacePathSeg(type, i, points); svgedit.path.replacePathSeg(type, i, points);

60
editor/svg-editor.css
View File

@ -1,7 +1,7 @@
/* Comment to prevent wrong concat */ /* Comment to prevent wrong concat */
body { body {
background: #2F2F2C; background: #3f3f3c;
font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -57,8 +57,15 @@ html, body {
left: 0; left: 0;
} }
#svg_editor {
background: #2f2f2c;
}
#menu_bar { #menu_bar {
margin: 0 0 0 50px padding: 0 0 0 50px;
background: #2f2f2c;
position: relative;
z-index: 1;
} }
#menu_bar.active .menu.open .menu_list { #menu_bar.active .menu.open .menu_list {
@ -373,7 +380,7 @@ html, body {
display: none; display: none;
} }
#path_node_panel .tool_button { #use_panel .tool_button, #path_node_panel .tool_button {
color: #999; color: #999;
border: solid #3F3F3C 1px; border: solid #3F3F3C 1px;
border-radius: 3px; border-radius: 3px;
@ -387,6 +394,12 @@ html, body {
line-height: 24px; line-height: 24px;
} }
#use_panel .tool_button {
padding-left: 10px;
margin-bottom: 10px;
width: 124px;
}
#path_node_panel .tool_button img, #path_node_panel .tool_button svg { #path_node_panel .tool_button img, #path_node_panel .tool_button svg {
position: absolute; position: absolute;
left: 5px; left: 5px;
@ -522,6 +535,11 @@ html, body {
background-color: #444; background-color: #444;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-moz-transition: -moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-o-transition: -o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-ms-transition: -ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
} }
.touch div#workarea { .touch div#workarea {
@ -592,11 +610,13 @@ html, body {
#tools_top { #tools_top {
position: absolute; position: absolute;
width: 160px; width: 160px;
height: 100%;
background: #2f2f2c;
right: 0; right: 0;
top: 20px; top: 20px;
border-bottom: none; border-bottom: none;
overflow: visible; overflow: visible;
padding: 0 0 0 10px; padding: 0 0 0 15px;
} }
.touch #tools_top { .touch #tools_top {
@ -709,6 +729,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
border-right: none; border-right: none;
width: 50px; width: 50px;
top: 30px; top: 30px;
bottom: 0;
left: 0; left: 0;
background: #2F2F2C; /* Needed so flyout icons don't appear on the left */ background: #2F2F2C; /* Needed so flyout icons don't appear on the left */
z-index: 4; z-index: 4;
@ -934,7 +955,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#tool_open input, #tool_open input,
#tool_import input, #tool_import input,
#tool_image input { #tool_import_bitmap input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
font-size: 10em; font-size: 10em;
@ -1019,6 +1040,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
bottom: 0; bottom: 0;
height: 40px; height: 40px;
overflow: visible; overflow: visible;
background: #2f2f2c;
} }
#tools_bottom_1 { #tools_bottom_1 {
@ -1322,10 +1344,22 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_content { #dialog_content {
height: 95px; height: 95px;
margin: 10px 10px 5px 10px; margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
border: 1px solid #B0B0B0; font-size: 13px;
}
#dialog_buttons input:last-child {
background: #999 !important;
position: absolute;
left: 10px;
bottom: 10px;
}
#dialog_buttons input:first-child {
position: absolute;
right: 10px;
bottom: 10px;
} }
#dialog_content.prompt { #dialog_content.prompt {
@ -1339,8 +1373,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_container { #dialog_container {
position: absolute; position: absolute;
font-family: Verdana;
text-align: center;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 300px; width: 300px;
@ -1349,16 +1381,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
margin-top: -80px; margin-top: -80px;
position:fixed; position:fixed;
z-index:50001; z-index:50001;
background: #CCC; background: #fff;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
} }
#dialog_container, #dialog_content { #dialog_container, #dialog_content {
border-radius: 5px; border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} }
#dialog_buttons input[type=text] { #dialog_buttons input[type=text] {

13
editor/svg-editor.html
View File

@ -55,7 +55,6 @@
<script type="text/javascript" src="extensions/ext-grid.js"></script> <script type="text/javascript" src="extensions/ext-grid.js"></script>
<script type="text/javascript" src="requestanimationframe.js"></script> <script type="text/javascript" src="requestanimationframe.js"></script>
<script type="text/javascript" src="taphold.js"></script> <script type="text/javascript" src="taphold.js"></script>
<script type="text/javascript" src="extensions/ext-server_opensave.js"></script>
<!--{endif}--> <!--{endif}-->
@ -99,9 +98,9 @@
<div class="menu"> <div class="menu">
<div class="menu_title">File</div> <div class="menu_title">File</div>
<div class="menu_list" id="file_menu"> <div class="menu_list" id="file_menu">
<div id="tool_clear" class="menu_item">New Image</div> <div id="tool_clear" class="menu_item">New Document</div>
<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Open SVG...</div> <div id="tool_open" class="menu_item" style="display: none;"><div id="fileinputs"></div>Open SVG...</div>
<div id="tool_import" class="menu_item"><div id="fileinputs_import"></div>Place SVG...</div> <div id="tool_import" class="menu_item" style="display: none;"><div id="fileinputs_import"></div>Import Image...</div>
<div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div> <div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
<div id="tool_export" class="menu_item">Export as PNG</div> <div id="tool_export" class="menu_item">Export as PNG</div>
</div> </div>
@ -357,17 +356,17 @@
</div> </div>
<div id="use_panel" class="context_panel clearfix"> <div id="use_panel" class="context_panel clearfix">
<div class="push_button" id="tool_unlink_use" data-title="Break link to reference element (make unique)"></div> <div class="tool_button clearfix" id="tool_unlink_use" data-title="Break link to reference element (make unique)">Break link reference</div>
</div> </div>
<div id="g_panel" class="context_panel clearfix"> <div id="g_panel" class="context_panel clearfix">
<h4>Group</h4> <h4>Group</h4>
<label> <label>
<input id="g_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 groups's x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span> <span>X</span>
</label> </label>
<label> <label>
<input id="g_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 groups's y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span> <span>Y</span>
</label> </label>
</div> </div>

219
editor/svg-editor.js
View File

@ -71,8 +71,8 @@
"enterNewLayerName":"Please enter the new layer name", "enterNewLayerName":"Please enter the new layer name",
"layerHasThatName":"Layer already has that name", "layerHasThatName":"Layer already has that name",
"QmoveElemsToLayer":"Move selected elements to layer \"%s\"?", "QmoveElemsToLayer":"Move selected elements to layer \"%s\"?",
"QwantToClear":"Do you want to clear the drawing?\nThis will also erase your undo history!", "QwantToClear":"<strong>Do you want to clear the drawing?</strong>\nThis will also erase your undo history",
"QwantToOpen":"Do you want to open a new file?\nThis will also erase your undo history!", "QwantToOpen":"Do you want to open a new file?\nThis will also erase your undo history",
"QerrorsRevertToSource":"There were parsing errors in your SVG source.\nRevert back to original SVG source?", "QerrorsRevertToSource":"There were parsing errors in your SVG source.\nRevert back to original SVG source?",
"QignoreSourceChanges":"Ignore changes made to SVG source?", "QignoreSourceChanges":"Ignore changes made to SVG source?",
"featNotSupported":"Feature not supported", "featNotSupported":"Feature not supported",
@ -383,7 +383,7 @@
if(type != 'alert') { if(type != 'alert') {
$('<input type="button" value="' + uiStrings.common.cancel + '">') $('<input type="button" value="' + uiStrings.common.cancel + '">')
.appendTo(btn_holder) .appendTo(btn_holder)
.on("click, touchstart", function() { box.hide();callback(false)}); .on("click touchstart", function() { box.hide();callback(false)});
} }
if(type == 'prompt') { if(type == 'prompt') {
@ -475,7 +475,7 @@
// Chrome 5 (and 6?) don't allow saving, show source instead ( http://code.google.com/p/chromium/issues/detail?id=46735 ) // Chrome 5 (and 6?) don't allow saving, show source instead ( http://code.google.com/p/chromium/issues/detail?id=46735 )
// IE9 doesn't allow standalone Data URLs ( https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves ) // IE9 doesn't allow standalone Data URLs ( https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves )
if((~ua.indexOf('Chrome') && $.browser.version >= 533) || ~ua.indexOf('MSIE')) { if(~ua.indexOf('MSIE')) {
showSourceEditor(0,true); showSourceEditor(0,true);
return; return;
} }
@ -547,7 +547,6 @@
elems = elems.filter(Boolean) elems = elems.filter(Boolean)
multiselected = (elems.length >= 2) ? elems : false; multiselected = (elems.length >= 2) ? elems : false;
if (svgCanvas.elementsAreSame(multiselected)) selectedElement = multiselected[0] if (svgCanvas.elementsAreSame(multiselected)) selectedElement = multiselected[0]
if (selectedElement != null) { if (selectedElement != null) {
$('#multiselected_panel').hide() $('#multiselected_panel').hide()
updateToolbar(); updateToolbar();
@ -1306,22 +1305,26 @@
// This function also updates the opacity and id elements that are in the context panel // This function also updates the opacity and id elements that are in the context panel
var updateToolbar = function() { var updateToolbar = function() {
if (selectedElement != null) { if (selectedElement != null) {
switch ( selectedElement.tagName ) { switch ( selectedElement.tagName ) {
case 'use': case 'use':
$(".context_panel").hide();
$("#use_panel").show();
break;
case 'image': case 'image':
$(".context_panel").hide();
$("#image_panel").show();
break;
case 'foreignObject': case 'foreignObject':
$(".context_panel").hide();
break; break;
case 'g': case 'g':
case 'a': case 'a':
// Look for common styles // Look for common styles
var gWidth = null; var gWidth = null;
var childs = selectedElement.getElementsByTagName('*'); var childs = selectedElement.getElementsByTagName('*');
for(var i = 0, len = childs.length; i < len; i++) { for(var i = 0, len = childs.length; i < len; i++) {
var swidth = childs[i].getAttribute("stroke-width"); var swidth = childs[i].getAttribute("stroke-width");
if(i === 0) { if(i === 0) {
gWidth = swidth; gWidth = swidth;
} else if(gWidth !== swidth) { } else if(gWidth !== swidth) {
@ -1329,18 +1332,15 @@
} }
} }
$('#stroke_width').val(gWidth === null ? "" : gWidth); $('#stroke_width').val(gWidth === null ? "0" : gWidth);
//Editor.paintBox.fill.update(false); updateContextPanel();
//Editor.paintBox.stroke.update(false);
break; break;
default: default:
//removed because multiselect shouldnt set color //removed because multiselect shouldnt set color
//Editor.paintBox.fill.update(false); //Editor.paintBox.fill.update(false);
//Editor.paintBox.stroke.update(false); //Editor.paintBox.stroke.update(false);
$('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 1); $('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 0);
var dash = selectedElement.getAttribute("stroke-dasharray") || "none" var dash = selectedElement.getAttribute("stroke-dasharray") || "none"
$('option', '#stroke_style').removeAttr('selected'); $('option', '#stroke_style').removeAttr('selected');
$('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected"); $('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected");
@ -1365,8 +1365,6 @@
$('#group_opacity').val(opac_perc); $('#group_opacity').val(opac_perc);
$.fn.dragInput.updateCursor($('#group_opacity')[0]) $.fn.dragInput.updateCursor($('#group_opacity')[0])
} }
updateToolButtonState();
}; };
var setImageURL = Editor.setImageURL = function(url) { var setImageURL = Editor.setImageURL = function(url) {
@ -1393,7 +1391,6 @@
var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null; var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null;
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
if (is_node) { if (is_node) {
$('.context_panel').hide(); $('.context_panel').hide();
$('#path_node_panel').show(); $('#path_node_panel').show();
@ -1415,6 +1412,7 @@
$('#path_node_y').val(Math.round(point.y)); $('#path_node_y').val(Math.round(point.y));
if(point.type) { if(point.type) {
seg_type.val(point.type).removeAttr('disabled'); seg_type.val(point.type).removeAttr('disabled');
$("#seg_type_label").html(point.type == 4 ? "Straight" : "Curve")
} else { } else {
seg_type.val(4).attr('disabled','disabled'); seg_type.val(4).attr('disabled','disabled');
} }
@ -1887,7 +1885,7 @@
return false; return false;
} }
var closer = function(e){ var closer = function(e){
if (e.target.nodeName.toLowerCase() === "input") return false; if (e.target.nodeName && e.target.nodeName.toLowerCase() === "input") return false;
if (!$(e.target).hasClass("menu_title") && !$(e.target).parent().hasClass("menu_title")) { if (!$(e.target).hasClass("menu_title") && !$(e.target).parent().hasClass("menu_title")) {
if(!$(e.target).hasClass("disabled") && $(e.target).hasClass("menu_item")) blinker(e) if(!$(e.target).hasClass("disabled") && $(e.target).hasClass("menu_item")) blinker(e)
else $('#menu_bar').removeClass('active') else $('#menu_bar').removeClass('active')
@ -2835,65 +2833,6 @@
}); });
}; };
var updateToolButtonState = function() {
/*
var bNoFill = (svgCanvas.getColor('fill') == 'none');
var bNoStroke = (svgCanvas.getColor('stroke') == 'none');
var buttonsNeedingStroke = [ '#tool_fhpath', '#tool_line' ];
var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_path'];
if (bNoStroke) {
for (var index in buttonsNeedingStroke) {
var button = buttonsNeedingStroke[index];
if ($(button).hasClass('tool_button_current')) {
clickSelect();
}
$(button).addClass('disabled');
}
}
else {
for (var index in buttonsNeedingStroke) {
var button = buttonsNeedingStroke[index];
$(button).removeClass('disabled');
}
}
if (bNoStroke && bNoFill) {
for (var index in buttonsNeedingFillAndStroke) {
var button = buttonsNeedingFillAndStroke[index];
if ($(button).hasClass('tool_button_current')) {
clickSelect();
}
$(button).addClass('disabled');
}
}
else {
for (var index in buttonsNeedingFillAndStroke) {
var button = buttonsNeedingFillAndStroke[index];
$(button).removeClass('disabled');
}
}
svgCanvas.runExtensions("toolButtonStateUpdate", {
nofill: bNoFill,
nostroke: bNoStroke
});
// Disable flyouts if all inside are disabled
$('.tools_flyout').each(function() {
var shower = $('#' + this.id + '_show');
var has_enabled = false;
$(this).children().each(function() {
if(!$(this).hasClass('disabled')) {
has_enabled = true;
}
});
shower.toggleClass('disabled', !has_enabled);
});
operaRepaint();
*/
};
var PaintBox = function(container, type) { var PaintBox = function(container, type) {
var background = document.getElementById("canvas_background"); var background = document.getElementById("canvas_background");
var cur = {color: "fff", opacity: 1} var cur = {color: "fff", opacity: 1}
@ -3636,13 +3575,109 @@
$.confirm(uiStrings.notification.QwantToOpen, func); $.confirm(uiStrings.notification.QwantToOpen, func);
} }
} }
// use HTML5 File API: http://www.w3.org/TR/FileAPI/
// if browser has HTML5 File API support, then we will show the open menu item
// and provide a file input to click. When that change event fires, it will
// get the text contents of the file and send it to the canvas
if (window.FileReader) { if (window.FileReader) {
var inp = $('<input type="file">').change(function() {
var import_image = function(e) {
e.stopPropagation();
e.preventDefault();
$("#workarea").removeAttr("style");
$('#main_menu').hide();
var file = null;
if (e.type == "drop") file = e.dataTransfer.files[0]
else file = this.files[0];
if (file) {
if(file.type.indexOf("image") != -1) {
//detected an image
//svg handing
if(file.type.indexOf("svg") != -1) {
var reader = new FileReader();
reader.onloadend = function(e) {
svgCanvas.importSvgString(e.target.result, true);
svgCanvas.ungroupSelectedElement()
svgCanvas.ungroupSelectedElement()
svgCanvas.groupSelectedElements()
svgCanvas.alignSelectedElements("m", "page")
svgCanvas.alignSelectedElements("c", "page")
};
reader.readAsText(file);
}
//image handling
else {
var reader = new FileReader();
reader.onloadend = function(e) {
// lets insert the new image until we know its dimensions
insertNewImage = function(img_width, img_height){
var newImage = svgCanvas.addSvgElementFromJson({
"element": "image",
"attr": {
"x": 0,
"y": 0,
"width": img_width,
"height": img_height,
"id": svgCanvas.getNextId(),
"style": "pointer-events:inherit"
}
});
svgCanvas.setHref(newImage, e.target.result);
svgCanvas.selectOnly([newImage])
svgCanvas.alignSelectedElements("m", "page")
svgCanvas.alignSelectedElements("c", "page")
updateContextPanel();
}
// put a placeholder img so we know the default dimensions
var img_width = 100;
var img_height = 100;
var img = new Image()
img.src = e.target.result
document.body.appendChild(img);
img.onload = function() {
img_width = img.offsetWidth
img_height = img.offsetHeight
insertNewImage(img_width, img_height);
document.body.removeChild(img);
}
};
reader.readAsDataURL(file)
}
}
}
}
var workarea = $("#workarea")
function onDragEnter(e) {
e.stopPropagation();
e.preventDefault();
workarea.css({
"-webkit-transform": "scale3d(1.1,1.1,1)",
"-moz-transform": "scale3d(1.1,1.1,1)",
"-o-transform": "scale(1.1)",
"-ms-transform": "scale3d(1.1,1.1,1)",
"transform": "scale3d(1.1,1.1,1)"
})
}
function onDragOver(e) {
e.stopPropagation();
e.preventDefault();
}
function onDragLeave(e) {
workarea.removeAttr("style")
e.stopPropagation();
e.preventDefault();
}
workarea[0].addEventListener('dragenter', onDragEnter, false);
workarea[0].addEventListener('dragover', onDragOver, false);
workarea[0].addEventListener('dragleave', onDragLeave, false);
workarea[0].addEventListener('drop', import_image, false);
var open = $('<input type="file">').change(function() {
var f = this; var f = this;
Editor.openPrep(function(ok) { Editor.openPrep(function(ok) {
if(!ok) return; if(!ok) return;
@ -3657,20 +3692,12 @@
} }
}); });
}); });
$("#tool_open").show().prepend(inp); $("#tool_open").show().prepend(open);
var inp2 = $('<input type="file">').change(function() {
$('#main_menu').hide(); var img_import = $('<input type="file">').change(import_image);
if(this.files.length==1) { $("#tool_import").show().prepend(img_import);
var reader = new FileReader();
reader.onloadend = function(e) {
svgCanvas.importSvgString(e.target.result, true);
updateCanvas();
};
reader.readAsText(this.files[0]);
}
});
$("#tool_import").show().prepend(inp2);
} }
var updateCanvas = Editor.updateCanvas = function(center, new_ctr) { var updateCanvas = Editor.updateCanvas = function(center, new_ctr) {
var w = workarea.width(), h = workarea.height(); var w = workarea.width(), h = workarea.height();

7
editor/svgcanvas.js
View File

@ -1016,6 +1016,7 @@ this.setRotationAngle = function(val, preventUndo) {
// ensure val is the proper type // ensure val is the proper type
val = parseFloat(val); val = parseFloat(val);
var elem = selectedElements[0]; var elem = selectedElements[0];
if (!elem) return;
var oldTransform = elem.getAttribute("transform"); var oldTransform = elem.getAttribute("transform");
var bbox = svgedit.utilities.getBBox(elem); var bbox = svgedit.utilities.getBBox(elem);
var cx = bbox.x+bbox.width/2, cy = bbox.y+bbox.height/2; var cx = bbox.x+bbox.width/2, cy = bbox.y+bbox.height/2;
@ -3682,7 +3683,7 @@ var textActions = canvas.textActions = function() {
display: 'inline' display: 'inline'
}); });
if(selblock) selblock.setAttribute('d', ''); if(selblock) selblock.setAttribute('d', 'M 0 0');
} }
function setSelection(start, end, skipInput) { function setSelection(start, end, skipInput) {
@ -4319,7 +4320,7 @@ var pathActions = canvas.pathActions = function() {
if(subpath) index += svgedit.path.path.segs.length; if(subpath) index += svgedit.path.path.segs.length;
svgedit.path.addPointGrip(index, x, y); svgedit.path.addPointGrip(index, x, y);
} }
// keep = true; // keep = true;
} }
return; return;
@ -4766,7 +4767,7 @@ var pathActions = canvas.pathActions = function() {
var newseg = elem.createSVGPathSegLinetoAbs(start_item.x, start_item.y); var newseg = elem.createSVGPathSegLinetoAbs(start_item.x, start_item.y);
var closer = elem.createSVGPathSegClosePath(); var closer = elem.createSVGPathSegClosePath();
if(open_pt == svgedit.path.path.segs.length - 1) { if(open_pt == svgedit.path.path.segs.length) {
list.appendItem(newseg); list.appendItem(newseg);
list.appendItem(closer); list.appendItem(closer);
} else { } else {

26
editor/svgedit.compiled.css
View File

@ -89,7 +89,7 @@ div.jGraduate_Slider input{margin-top:5px}
div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize} div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
.jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px} .jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px}
.jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px} .jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px}
body{background:#2f2f2c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0} body{background:#3f3f3c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0}
::selection{background:#000;color:#fff} ::selection{background:#000;color:#fff}
::-moz-selection{background:#000;color:#fff} ::-moz-selection{background:#000;color:#fff}
html,body{overflow:hidden;width:100%;height:100%} html,body{overflow:hidden;width:100%;height:100%}
@ -99,7 +99,8 @@ html,body{overflow:hidden;width:100%;height:100%}
::-webkit-scrollbar-corner{background:#444} ::-webkit-scrollbar-corner{background:#444}
#browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000} #browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000}
#svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0} #svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
#menu_bar{margin:0 0 0 50px} #svg_editor{background:#2f2f2c}
#menu_bar{padding:0 0 0 50px;background:#2f2f2c;position:relative;z-index:1}
#menu_bar.active .menu.open .menu_list{display:block} #menu_bar.active .menu.open .menu_list{display:block}
.menu{position:relative;z-index:5;color:#333;display:inline-block} .menu{position:relative;z-index:5;color:#333;display:inline-block}
.menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top} .menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
@ -148,7 +149,8 @@ div#palette_holder #palette .palette_item{cursor:pointer}
.touch #tool_fill .color_block{width:36px;height:36px} .touch #tool_fill .color_block{width:36px;height:36px}
.touch #tool_fill .color_block svg{width:36px!important;height:36px!important} .touch #tool_fill .color_block svg{width:36px!important;height:36px!important}
.touch #tool_switch{display:none} .touch #tool_switch{display:none}
#path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px} #use_panel .tool_button,#path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px}
#use_panel .tool_button{padding-left:10px;margin-bottom:10px;width:124px}
#path_node_panel .tool_button img,#path_node_panel .tool_button svg{position:absolute;left:5px;top:3px} #path_node_panel .tool_button img,#path_node_panel .tool_button svg{position:absolute;left:5px;top:3px}
#color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff} #color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff}
#color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0} #color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
@ -168,7 +170,7 @@ div#palette_holder #palette .palette_item{cursor:pointer}
#color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute} #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
#linkLabel>svg{height:20px;padding-top:4px} #linkLabel>svg{height:20px;padding-top:4px}
div#palette{float:left;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} div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-moz-transition:-moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-o-transition:-o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-ms-transition:-ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);transition:transform 500ms cubic-bezier(0.13,0.66,0.24,0.92)}
.touch div#workarea{top:40px} .touch div#workarea{top:40px}
div.palette_item{height:16px;width:16px;float:left} div.palette_item{height:16px;width:16px;float:left}
.touch div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:19px;float:left} .touch div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:19px;float:left}
@ -181,7 +183,7 @@ div.palette_item{height:16px;width:16px;float:left}
#tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 2px;top:-1px;left:-1px;width:26px;height:26px;z-index:0} #tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 2px;top:-1px;left:-1px;width:26px;height:26px;z-index:0}
#tools_left .tool_button_current{background-color:#0cf} #tools_left .tool_button_current{background-color:#0cf}
#main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2} #main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
#tools_top{position:absolute;width:160px;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 10px} #tools_top{position:absolute;width:160px;height:100%;background:#2f2f2c;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 15px}
.touch #tools_top{top:30px} .touch #tools_top{top:30px}
label{display:block;color:#999} label{display:block;color:#999}
div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)} div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)}
@ -202,7 +204,7 @@ input[type=submit],input[type=button],button{background:#4f80ff;color:#fff;borde
input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)} input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
input[type=submit]:hover,button:hover{background:#2f84c1} input[type=submit]:hover,button:hover{background:#2f84c1}
input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px} input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px}
#tools_left{position:absolute;border-right:0;width:50px;top:30px;left:0;background:#2f2f2c;z-index:4} #tools_left{position:absolute;border-right:0;width:50px;top:30px;bottom:0;left:0;background:#2f2f2c;z-index:4}
#workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none} #workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none}
#workarea.wireframe #svgcontent text{fill:#000;stroke:none} #workarea.wireframe #svgcontent text{fill:#000;stroke:none}
#workarea.wireframe #canvasBackground>rect{fill:#FFF!important} #workarea.wireframe #canvasBackground>rect{fill:#FFF!important}
@ -233,7 +235,7 @@ input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.
.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer} .tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden} #main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
#tool_image{overflow:hidden} #tool_image{overflow:hidden}
#tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer} #tool_open input,#tool_import input,#tool_import_bitmap input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
.disabled{opacity:.5;cursor:default} .disabled{opacity:.5;cursor:default}
.width_label{padding-right:5px} .width_label{padding-right:5px}
#text{position:absolute;left:-9999px} #text{position:absolute;left:-9999px}
@ -243,7 +245,7 @@ input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.
.tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)} .tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
.tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px} .tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
.tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px} .tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
#tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible} #tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible;background:#2f2f2c}
#tools_bottom_1{width:115px;float:left} #tools_bottom_1{width:115px;float:left}
#tools_bottom_2{position:relative;float:left;margin-top:5px} #tools_bottom_2{position:relative;float:left;margin-top:5px}
#tools_bottom input[type=text]{width:3.2em} #tools_bottom input[type=text]{width:3.2em}
@ -291,11 +293,13 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
.toolbar_button button .svg_icon{display:none} .toolbar_button button .svg_icon{display:none}
#dialog_box{display:none} #dialog_box{display:none}
#dialog_box_overlay{background:black;opacity:.5;height:100%;left:0;position:absolute;top:0;width:100%;z-index:6} #dialog_box_overlay{background:black;opacity:.5;height:100%;left:0;position:absolute;top:0;width:100%;z-index:6}
#dialog_content{height:95px;margin:10px 10px 5px 10px;background:#DDD;overflow:auto;text-align:left;border:1px solid #b0b0b0} #dialog_content{height:95px;margin:10px 10px 5px 10px;overflow:auto;text-align:left;font-size:13px}
#dialog_buttons input:last-child{background:#999!important;position:absolute;left:10px;bottom:10px}
#dialog_buttons input:first-child{position:absolute;right:10px;bottom:10px}
#dialog_content.prompt{height:75px} #dialog_content.prompt{height:75px}
#dialog_content p{margin:10px;line-height:1.3em} #dialog_content p{margin:10px;line-height:1.3em}
#dialog_container{position:absolute;font-family:Verdana;text-align:center;left:50%;top:50%;width:300px;margin-left:-150px;height:150px;margin-top:-80px;position:fixed;z-index:50001;background:#CCC;border:1px outset #777;font-family:Verdana,Helvetica,sans-serif;font-size:.8em} #dialog_container{position:absolute;left:50%;top:50%;width:300px;margin-left:-150px;height:150px;margin-top:-80px;position:fixed;z-index:50001;background:#fff}
#dialog_container,#dialog_content{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px} #dialog_container,#dialog_content{border-radius:3px}
#dialog_buttons input[type=text]{width:90%;display:block;margin:0 0 5px 11px} #dialog_buttons input[type=text]{width:90%;display:block;margin:0 0 5px 11px}
#dialog_buttons input[type=button]{margin:0 1em} #dialog_buttons input[type=button]{margin:0 1em}
.invisible{visibility:none} .invisible{visibility:none}

1276
editor/svgedit.compiled.js
View File

File diff suppressed because it is too large Load Diff

2
editor/svgutils.js
View File

@ -463,7 +463,7 @@ function groupBBFix(selected) {
// Parameters: // Parameters:
// elem - Optional DOM element to get the BBox for // elem - Optional DOM element to get the BBox for
svgedit.utilities.getBBox = function(elem) { svgedit.utilities.getBBox = function(elem) {
var selected = elem || editorContext_.geSelectedElements()[0]; var selected = elem || editorContext_.getSelectedElements()[0];
if (elem.nodeType != 1) return null; if (elem.nodeType != 1) return null;
var ret = null; var ret = null;
var elname = selected.nodeName; var elname = selected.nodeName;

60
editor/temp.css
View File

@ -583,7 +583,7 @@ div.jGraduate_Slider img {
/* Comment to prevent wrong concat */ /* Comment to prevent wrong concat */
body { body {
background: #2F2F2C; background: #3f3f3c;
font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -639,8 +639,15 @@ html, body {
left: 0; left: 0;
} }
#svg_editor {
background: #2f2f2c;
}
#menu_bar { #menu_bar {
margin: 0 0 0 50px padding: 0 0 0 50px;
background: #2f2f2c;
position: relative;
z-index: 1;
} }
#menu_bar.active .menu.open .menu_list { #menu_bar.active .menu.open .menu_list {
@ -955,7 +962,7 @@ html, body {
display: none; display: none;
} }
#path_node_panel .tool_button { #use_panel .tool_button, #path_node_panel .tool_button {
color: #999; color: #999;
border: solid #3F3F3C 1px; border: solid #3F3F3C 1px;
border-radius: 3px; border-radius: 3px;
@ -969,6 +976,12 @@ html, body {
line-height: 24px; line-height: 24px;
} }
#use_panel .tool_button {
padding-left: 10px;
margin-bottom: 10px;
width: 124px;
}
#path_node_panel .tool_button img, #path_node_panel .tool_button svg { #path_node_panel .tool_button img, #path_node_panel .tool_button svg {
position: absolute; position: absolute;
left: 5px; left: 5px;
@ -1104,6 +1117,11 @@ html, body {
background-color: #444; background-color: #444;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-moz-transition: -moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-o-transition: -o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-ms-transition: -ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
} }
.touch div#workarea { .touch div#workarea {
@ -1174,11 +1192,13 @@ html, body {
#tools_top { #tools_top {
position: absolute; position: absolute;
width: 160px; width: 160px;
height: 100%;
background: #2f2f2c;
right: 0; right: 0;
top: 20px; top: 20px;
border-bottom: none; border-bottom: none;
overflow: visible; overflow: visible;
padding: 0 0 0 10px; padding: 0 0 0 15px;
} }
.touch #tools_top { .touch #tools_top {
@ -1291,6 +1311,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
border-right: none; border-right: none;
width: 50px; width: 50px;
top: 30px; top: 30px;
bottom: 0;
left: 0; left: 0;
background: #2F2F2C; /* Needed so flyout icons don't appear on the left */ background: #2F2F2C; /* Needed so flyout icons don't appear on the left */
z-index: 4; z-index: 4;
@ -1516,7 +1537,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#tool_open input, #tool_open input,
#tool_import input, #tool_import input,
#tool_image input { #tool_import_bitmap input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
font-size: 10em; font-size: 10em;
@ -1601,6 +1622,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
bottom: 0; bottom: 0;
height: 40px; height: 40px;
overflow: visible; overflow: visible;
background: #2f2f2c;
} }
#tools_bottom_1 { #tools_bottom_1 {
@ -1904,10 +1926,22 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_content { #dialog_content {
height: 95px; height: 95px;
margin: 10px 10px 5px 10px; margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
border: 1px solid #B0B0B0; font-size: 13px;
}
#dialog_buttons input:last-child {
background: #999 !important;
position: absolute;
left: 10px;
bottom: 10px;
}
#dialog_buttons input:first-child {
position: absolute;
right: 10px;
bottom: 10px;
} }
#dialog_content.prompt { #dialog_content.prompt {
@ -1921,8 +1955,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_container { #dialog_container {
position: absolute; position: absolute;
font-family: Verdana;
text-align: center;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 300px; width: 300px;
@ -1931,16 +1963,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
margin-top: -80px; margin-top: -80px;
position:fixed; position:fixed;
z-index:50001; z-index:50001;
background: #CCC; background: #fff;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
} }
#dialog_container, #dialog_content { #dialog_container, #dialog_content {
border-radius: 5px; border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} }
#dialog_buttons input[type=text] { #dialog_buttons input[type=text] {

120
method-draw/extensions/ext-server_opensave.js
View File

@ -10,70 +10,70 @@
svgEditor.addExtension("server_opensave", { svgEditor.addExtension("server_opensave", {
callback: function() { callback: function() {
var save_svg_action = 'extensions/filesave.php'; //var save_svg_action = 'extensions/filesave.php';
var save_png_action = 'extensions/filesave.php'; //var save_png_action = 'extensions/filesave.php';
// Create upload target (hidden iframe) // Create upload target (hidden iframe)
var target = $('<iframe name="output_frame" />').hide().appendTo('body'); var target = $('<iframe name="output_frame" />').hide().appendTo('body');
svgEditor.setCustomHandlers({ //svgEditor.setCustomHandlers({
save: function(win, data) { // save: function(win, data) {
var svg = "<?xml version=\"1.0\"?>\n" + data; // var svg = "<?xml version=\"1.0\"?>\n" + data;
//
var title = svgCanvas.getDocumentTitle(); // var title = svgCanvas.getDocumentTitle();
var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_'); // var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');
//
var form = $('<form>').attr({ // var form = $('<form>').attr({
method: 'post', // method: 'post',
action: save_svg_action, // action: save_svg_action,
target: 'output_frame' // target: 'output_frame'
}) .append('<input type="hidden" name="output_svg" value="' + encodeURI(svg) + '">') // }) .append('<input type="hidden" name="output_svg" value="' + encodeURI(svg) + '">')
.append('<input type="hidden" name="filename" value="' + filename + '">') // .append('<input type="hidden" name="filename" value="' + filename + '">')
.appendTo('body') // .appendTo('body')
.submit().remove(); // .submit().remove();
}, // },
pngsave: function(win, data) { // pngsave: function(win, data) {
var issues = data.issues; // var issues = data.issues;
//
if(!$('#export_canvas').length) { // if(!$('#export_canvas').length) {
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body'); // $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
} // }
var c = $('#export_canvas')[0]; // var c = $('#export_canvas')[0];
//
c.width = svgCanvas.contentW; // c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH; // c.height = svgCanvas.contentH;
canvg(c, data.svg, {renderCallback: function() { // canvg(c, data.svg, {renderCallback: function() {
var datauri = c.toDataURL('image/png'); // var datauri = c.toDataURL('image/png');
//
var uiStrings = svgEditor.uiStrings; // var uiStrings = svgEditor.uiStrings;
var note = ''; // var note = '';
//
// Check if there's issues // // Check if there's issues
if(issues.length) { // if(issues.length) {
var pre = "\n \u2022 "; // var pre = "\n \u2022 ";
note += ("\n\n" + pre + issues.join(pre)); // note += ("\n\n" + pre + issues.join(pre));
} // }
//
if(note.length) { // if(note.length) {
alert(note); // alert(note);
} // }
//
var title = svgCanvas.getDocumentTitle(); // var title = svgCanvas.getDocumentTitle();
var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_'); // var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');
//
var form = $('<form>').attr({ // var form = $('<form>').attr({
method: 'post', // method: 'post',
action: save_png_action, // action: save_png_action,
target: 'output_frame' // target: 'output_frame'
}) .append('<input type="hidden" name="output_png" value="' + datauri + '">') // }) .append('<input type="hidden" name="output_png" value="' + datauri + '">')
.append('<input type="hidden" name="filename" value="' + filename + '">') // .append('<input type="hidden" name="filename" value="' + filename + '">')
.appendTo('body') // .appendTo('body')
.submit().remove(); // .submit().remove();
}}); // }});
//
//
} // }
}); //});
// Do nothing if client support is found // Do nothing if client support is found
if(window.FileReader) return; if(window.FileReader) return;

1
method-draw/math.js
View File

@ -236,6 +236,7 @@ svgedit.math.snapToAngle = function(x1,y1,x2,y2) {
// Returns: // Returns:
// Boolean that's true if rectangles intersect // Boolean that's true if rectangles intersect
svgedit.math.rectsIntersect = function(r1, r2) { svgedit.math.rectsIntersect = function(r1, r2) {
if (typeof r1 == 'undefined' || typeof r2 == 'undefined') return false;
return r2.x < (r1.x+r1.width) && return r2.x < (r1.x+r1.width) &&
(r2.x+r2.width) > r1.x && (r2.x+r2.width) > r1.x &&
r2.y < (r1.y+r1.height) && r2.y < (r1.y+r1.height) &&

11
method-draw/path.js
View File

@ -886,7 +886,7 @@ svgedit.path.removePath_ = function(id) {
if(id in pathData) delete pathData[id]; if(id in pathData) delete pathData[id];
}; };
var getRotVals = function(x, y) { var getRotVals = function(x, y, oldcx, oldcy, newcx, newcy, angle) {
dx = x - oldcx; dx = x - oldcx;
dy = y - oldcy; dy = y - oldcy;
@ -905,7 +905,6 @@ var getRotVals = function(x, y) {
r = Math.sqrt(dx*dx + dy*dy); r = Math.sqrt(dx*dx + dy*dy);
theta = Math.atan2(dy,dx) - angle; theta = Math.atan2(dy,dx) - angle;
return {'x':(r * Math.cos(theta) + newcx)/1, return {'x':(r * Math.cos(theta) + newcx)/1,
'y':(r * Math.sin(theta) + newcy)/1}; 'y':(r * Math.sin(theta) + newcy)/1};
}; };
@ -928,7 +927,7 @@ svgedit.path.recalcRotatedPath = function() {
oldcy = oldbox.y + oldbox.height/2, oldcy = oldbox.y + oldbox.height/2,
newcx = box.x + box.width/2, newcx = box.x + box.width/2,
newcy = box.y + box.height/2, newcy = box.y + box.height/2,
// un-rotate the new center to the proper position // un-rotate the new center to the proper position
dx = newcx - oldcx, dx = newcx - oldcx,
dy = newcy - oldcy, dy = newcy - oldcy,
@ -946,11 +945,11 @@ svgedit.path.recalcRotatedPath = function() {
type = seg.pathSegType; type = seg.pathSegType;
if(type == 1) continue; if(type == 1) continue;
var rvals = getRotVals(seg.x,seg.y), var rvals = getRotVals(seg.x,seg.y, oldcx, oldcy, newcx, newcy, angle),
points = [rvals.x, rvals.y]; points = [rvals.x, rvals.y];
if(seg.x1 != null && seg.x2 != null) { if(seg.x1 != null && seg.x2 != null) {
c_vals1 = getRotVals(seg.x1, seg.y1); c_vals1 = getRotVals(seg.x1, seg.y1, oldcx, oldcy, newcx, newcy, angle);
c_vals2 = getRotVals(seg.x2, seg.y2); c_vals2 = getRotVals(seg.x2, seg.y2, oldcx, oldcy, newcx, newcy, angle);
points.splice(points.length, 0, c_vals1.x , c_vals1.y, c_vals2.x, c_vals2.y); points.splice(points.length, 0, c_vals1.x , c_vals1.y, c_vals2.x, c_vals2.y);
} }
svgedit.path.replacePathSeg(type, i, points); svgedit.path.replacePathSeg(type, i, points);

60
method-draw/svg-editor.css
View File

@ -1,7 +1,7 @@
/* Comment to prevent wrong concat */ /* Comment to prevent wrong concat */
body { body {
background: #2F2F2C; background: #3f3f3c;
font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -57,8 +57,15 @@ html, body {
left: 0; left: 0;
} }
#svg_editor {
background: #2f2f2c;
}
#menu_bar { #menu_bar {
margin: 0 0 0 50px padding: 0 0 0 50px;
background: #2f2f2c;
position: relative;
z-index: 1;
} }
#menu_bar.active .menu.open .menu_list { #menu_bar.active .menu.open .menu_list {
@ -373,7 +380,7 @@ html, body {
display: none; display: none;
} }
#path_node_panel .tool_button { #use_panel .tool_button, #path_node_panel .tool_button {
color: #999; color: #999;
border: solid #3F3F3C 1px; border: solid #3F3F3C 1px;
border-radius: 3px; border-radius: 3px;
@ -387,6 +394,12 @@ html, body {
line-height: 24px; line-height: 24px;
} }
#use_panel .tool_button {
padding-left: 10px;
margin-bottom: 10px;
width: 124px;
}
#path_node_panel .tool_button img, #path_node_panel .tool_button svg { #path_node_panel .tool_button img, #path_node_panel .tool_button svg {
position: absolute; position: absolute;
left: 5px; left: 5px;
@ -522,6 +535,11 @@ html, body {
background-color: #444; background-color: #444;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-moz-transition: -moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-o-transition: -o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-ms-transition: -ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
} }
.touch div#workarea { .touch div#workarea {
@ -592,11 +610,13 @@ html, body {
#tools_top { #tools_top {
position: absolute; position: absolute;
width: 160px; width: 160px;
height: 100%;
background: #2f2f2c;
right: 0; right: 0;
top: 20px; top: 20px;
border-bottom: none; border-bottom: none;
overflow: visible; overflow: visible;
padding: 0 0 0 10px; padding: 0 0 0 15px;
} }
.touch #tools_top { .touch #tools_top {
@ -709,6 +729,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
border-right: none; border-right: none;
width: 50px; width: 50px;
top: 30px; top: 30px;
bottom: 0;
left: 0; left: 0;
background: #2F2F2C; /* Needed so flyout icons don't appear on the left */ background: #2F2F2C; /* Needed so flyout icons don't appear on the left */
z-index: 4; z-index: 4;
@ -934,7 +955,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#tool_open input, #tool_open input,
#tool_import input, #tool_import input,
#tool_image input { #tool_import_bitmap input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
font-size: 10em; font-size: 10em;
@ -1019,6 +1040,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
bottom: 0; bottom: 0;
height: 40px; height: 40px;
overflow: visible; overflow: visible;
background: #2f2f2c;
} }
#tools_bottom_1 { #tools_bottom_1 {
@ -1322,10 +1344,22 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_content { #dialog_content {
height: 95px; height: 95px;
margin: 10px 10px 5px 10px; margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
border: 1px solid #B0B0B0; font-size: 13px;
}
#dialog_buttons input:last-child {
background: #999 !important;
position: absolute;
left: 10px;
bottom: 10px;
}
#dialog_buttons input:first-child {
position: absolute;
right: 10px;
bottom: 10px;
} }
#dialog_content.prompt { #dialog_content.prompt {
@ -1339,8 +1373,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_container { #dialog_container {
position: absolute; position: absolute;
font-family: Verdana;
text-align: center;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 300px; width: 300px;
@ -1349,16 +1381,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
margin-top: -80px; margin-top: -80px;
position:fixed; position:fixed;
z-index:50001; z-index:50001;
background: #CCC; background: #fff;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
} }
#dialog_container, #dialog_content { #dialog_container, #dialog_content {
border-radius: 5px; border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} }
#dialog_buttons input[type=text] { #dialog_buttons input[type=text] {

13
method-draw/svg-editor.html
View File

@ -55,7 +55,6 @@
<script type="text/javascript" src="extensions/ext-grid.js"></script> <script type="text/javascript" src="extensions/ext-grid.js"></script>
<script type="text/javascript" src="requestanimationframe.js"></script> <script type="text/javascript" src="requestanimationframe.js"></script>
<script type="text/javascript" src="taphold.js"></script> <script type="text/javascript" src="taphold.js"></script>
<script type="text/javascript" src="extensions/ext-server_opensave.js"></script>
<!{endif}--> <!{endif}-->
@ -99,9 +98,9 @@
<div class="menu"> <div class="menu">
<div class="menu_title">File</div> <div class="menu_title">File</div>
<div class="menu_list" id="file_menu"> <div class="menu_list" id="file_menu">
<div id="tool_clear" class="menu_item">New Image</div> <div id="tool_clear" class="menu_item">New Document</div>
<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Open SVG...</div> <div id="tool_open" class="menu_item" style="display: none;"><div id="fileinputs"></div>Open SVG...</div>
<div id="tool_import" class="menu_item"><div id="fileinputs_import"></div>Place SVG...</div> <div id="tool_import" class="menu_item" style="display: none;"><div id="fileinputs_import"></div>Import Image...</div>
<div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div> <div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
<div id="tool_export" class="menu_item">Export as PNG</div> <div id="tool_export" class="menu_item">Export as PNG</div>
</div> </div>
@ -357,17 +356,17 @@
</div> </div>
<div id="use_panel" class="context_panel clearfix"> <div id="use_panel" class="context_panel clearfix">
<div class="push_button" id="tool_unlink_use" data-title="Break link to reference element (make unique)"></div> <div class="tool_button clearfix" id="tool_unlink_use" data-title="Break link to reference element (make unique)">Break link reference</div>
</div> </div>
<div id="g_panel" class="context_panel clearfix"> <div id="g_panel" class="context_panel clearfix">
<h4>Group</h4> <h4>Group</h4>
<label> <label>
<input id="g_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 groups's x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span> <span>X</span>
</label> </label>
<label> <label>
<input id="g_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 groups's y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span> <span>Y</span>
</label> </label>
</div> </div>

219
method-draw/svg-editor.js
View File

@ -71,8 +71,8 @@
"enterNewLayerName":"Please enter the new layer name", "enterNewLayerName":"Please enter the new layer name",
"layerHasThatName":"Layer already has that name", "layerHasThatName":"Layer already has that name",
"QmoveElemsToLayer":"Move selected elements to layer \"%s\"?", "QmoveElemsToLayer":"Move selected elements to layer \"%s\"?",
"QwantToClear":"Do you want to clear the drawing?\nThis will also erase your undo history!", "QwantToClear":"<strong>Do you want to clear the drawing?</strong>\nThis will also erase your undo history",
"QwantToOpen":"Do you want to open a new file?\nThis will also erase your undo history!", "QwantToOpen":"Do you want to open a new file?\nThis will also erase your undo history",
"QerrorsRevertToSource":"There were parsing errors in your SVG source.\nRevert back to original SVG source?", "QerrorsRevertToSource":"There were parsing errors in your SVG source.\nRevert back to original SVG source?",
"QignoreSourceChanges":"Ignore changes made to SVG source?", "QignoreSourceChanges":"Ignore changes made to SVG source?",
"featNotSupported":"Feature not supported", "featNotSupported":"Feature not supported",
@ -383,7 +383,7 @@
if(type != 'alert') { if(type != 'alert') {
$('<input type="button" value="' + uiStrings.common.cancel + '">') $('<input type="button" value="' + uiStrings.common.cancel + '">')
.appendTo(btn_holder) .appendTo(btn_holder)
.on("click, touchstart", function() { box.hide();callback(false)}); .on("click touchstart", function() { box.hide();callback(false)});
} }
if(type == 'prompt') { if(type == 'prompt') {
@ -475,7 +475,7 @@
// Chrome 5 (and 6?) don't allow saving, show source instead ( http://code.google.com/p/chromium/issues/detail?id=46735 ) // Chrome 5 (and 6?) don't allow saving, show source instead ( http://code.google.com/p/chromium/issues/detail?id=46735 )
// IE9 doesn't allow standalone Data URLs ( https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves ) // IE9 doesn't allow standalone Data URLs ( https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves )
if((~ua.indexOf('Chrome') && $.browser.version >= 533) || ~ua.indexOf('MSIE')) { if(~ua.indexOf('MSIE')) {
showSourceEditor(0,true); showSourceEditor(0,true);
return; return;
} }
@ -547,7 +547,6 @@
elems = elems.filter(Boolean) elems = elems.filter(Boolean)
multiselected = (elems.length >= 2) ? elems : false; multiselected = (elems.length >= 2) ? elems : false;
if (svgCanvas.elementsAreSame(multiselected)) selectedElement = multiselected[0] if (svgCanvas.elementsAreSame(multiselected)) selectedElement = multiselected[0]
if (selectedElement != null) { if (selectedElement != null) {
$('#multiselected_panel').hide() $('#multiselected_panel').hide()
updateToolbar(); updateToolbar();
@ -1306,22 +1305,26 @@
// This function also updates the opacity and id elements that are in the context panel // This function also updates the opacity and id elements that are in the context panel
var updateToolbar = function() { var updateToolbar = function() {
if (selectedElement != null) { if (selectedElement != null) {
switch ( selectedElement.tagName ) { switch ( selectedElement.tagName ) {
case 'use': case 'use':
$(".context_panel").hide();
$("#use_panel").show();
break;
case 'image': case 'image':
$(".context_panel").hide();
$("#image_panel").show();
break;
case 'foreignObject': case 'foreignObject':
$(".context_panel").hide();
break; break;
case 'g': case 'g':
case 'a': case 'a':
// Look for common styles // Look for common styles
var gWidth = null; var gWidth = null;
var childs = selectedElement.getElementsByTagName('*'); var childs = selectedElement.getElementsByTagName('*');
for(var i = 0, len = childs.length; i < len; i++) { for(var i = 0, len = childs.length; i < len; i++) {
var swidth = childs[i].getAttribute("stroke-width"); var swidth = childs[i].getAttribute("stroke-width");
if(i === 0) { if(i === 0) {
gWidth = swidth; gWidth = swidth;
} else if(gWidth !== swidth) { } else if(gWidth !== swidth) {
@ -1329,18 +1332,15 @@
} }
} }
$('#stroke_width').val(gWidth === null ? "" : gWidth); $('#stroke_width').val(gWidth === null ? "0" : gWidth);
//Editor.paintBox.fill.update(false); updateContextPanel();
//Editor.paintBox.stroke.update(false);
break; break;
default: default:
//removed because multiselect shouldnt set color //removed because multiselect shouldnt set color
//Editor.paintBox.fill.update(false); //Editor.paintBox.fill.update(false);
//Editor.paintBox.stroke.update(false); //Editor.paintBox.stroke.update(false);
$('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 1); $('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 0);
var dash = selectedElement.getAttribute("stroke-dasharray") || "none" var dash = selectedElement.getAttribute("stroke-dasharray") || "none"
$('option', '#stroke_style').removeAttr('selected'); $('option', '#stroke_style').removeAttr('selected');
$('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected"); $('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected");
@ -1365,8 +1365,6 @@
$('#group_opacity').val(opac_perc); $('#group_opacity').val(opac_perc);
$.fn.dragInput.updateCursor($('#group_opacity')[0]) $.fn.dragInput.updateCursor($('#group_opacity')[0])
} }
updateToolButtonState();
}; };
var setImageURL = Editor.setImageURL = function(url) { var setImageURL = Editor.setImageURL = function(url) {
@ -1393,7 +1391,6 @@
var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null; var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null;
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
if (is_node) { if (is_node) {
$('.context_panel').hide(); $('.context_panel').hide();
$('#path_node_panel').show(); $('#path_node_panel').show();
@ -1415,6 +1412,7 @@
$('#path_node_y').val(Math.round(point.y)); $('#path_node_y').val(Math.round(point.y));
if(point.type) { if(point.type) {
seg_type.val(point.type).removeAttr('disabled'); seg_type.val(point.type).removeAttr('disabled');
$("#seg_type_label").html(point.type == 4 ? "Straight" : "Curve")
} else { } else {
seg_type.val(4).attr('disabled','disabled'); seg_type.val(4).attr('disabled','disabled');
} }
@ -1887,7 +1885,7 @@
return false; return false;
} }
var closer = function(e){ var closer = function(e){
if (e.target.nodeName.toLowerCase() === "input") return false; if (e.target.nodeName && e.target.nodeName.toLowerCase() === "input") return false;
if (!$(e.target).hasClass("menu_title") && !$(e.target).parent().hasClass("menu_title")) { if (!$(e.target).hasClass("menu_title") && !$(e.target).parent().hasClass("menu_title")) {
if(!$(e.target).hasClass("disabled") && $(e.target).hasClass("menu_item")) blinker(e) if(!$(e.target).hasClass("disabled") && $(e.target).hasClass("menu_item")) blinker(e)
else $('#menu_bar').removeClass('active') else $('#menu_bar').removeClass('active')
@ -2835,65 +2833,6 @@
}); });
}; };
var updateToolButtonState = function() {
/*
var bNoFill = (svgCanvas.getColor('fill') == 'none');
var bNoStroke = (svgCanvas.getColor('stroke') == 'none');
var buttonsNeedingStroke = [ '#tool_fhpath', '#tool_line' ];
var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_path'];
if (bNoStroke) {
for (var index in buttonsNeedingStroke) {
var button = buttonsNeedingStroke[index];
if ($(button).hasClass('tool_button_current')) {
clickSelect();
}
$(button).addClass('disabled');
}
}
else {
for (var index in buttonsNeedingStroke) {
var button = buttonsNeedingStroke[index];
$(button).removeClass('disabled');
}
}
if (bNoStroke && bNoFill) {
for (var index in buttonsNeedingFillAndStroke) {
var button = buttonsNeedingFillAndStroke[index];
if ($(button).hasClass('tool_button_current')) {
clickSelect();
}
$(button).addClass('disabled');
}
}
else {
for (var index in buttonsNeedingFillAndStroke) {
var button = buttonsNeedingFillAndStroke[index];
$(button).removeClass('disabled');
}
}
svgCanvas.runExtensions("toolButtonStateUpdate", {
nofill: bNoFill,
nostroke: bNoStroke
});
// Disable flyouts if all inside are disabled
$('.tools_flyout').each(function() {
var shower = $('#' + this.id + '_show');
var has_enabled = false;
$(this).children().each(function() {
if(!$(this).hasClass('disabled')) {
has_enabled = true;
}
});
shower.toggleClass('disabled', !has_enabled);
});
operaRepaint();
*/
};
var PaintBox = function(container, type) { var PaintBox = function(container, type) {
var background = document.getElementById("canvas_background"); var background = document.getElementById("canvas_background");
var cur = {color: "fff", opacity: 1} var cur = {color: "fff", opacity: 1}
@ -3636,13 +3575,109 @@
$.confirm(uiStrings.notification.QwantToOpen, func); $.confirm(uiStrings.notification.QwantToOpen, func);
} }
} }
// use HTML5 File API: http://www.w3.org/TR/FileAPI/
// if browser has HTML5 File API support, then we will show the open menu item
// and provide a file input to click. When that change event fires, it will
// get the text contents of the file and send it to the canvas
if (window.FileReader) { if (window.FileReader) {
var inp = $('<input type="file">').change(function() {
var import_image = function(e) {
e.stopPropagation();
e.preventDefault();
$("#workarea").removeAttr("style");
$('#main_menu').hide();
var file = null;
if (e.type == "drop") file = e.dataTransfer.files[0]
else file = this.files[0];
if (file) {
if(file.type.indexOf("image") != -1) {
//detected an image
//svg handing
if(file.type.indexOf("svg") != -1) {
var reader = new FileReader();
reader.onloadend = function(e) {
svgCanvas.importSvgString(e.target.result, true);
svgCanvas.ungroupSelectedElement()
svgCanvas.ungroupSelectedElement()
svgCanvas.groupSelectedElements()
svgCanvas.alignSelectedElements("m", "page")
svgCanvas.alignSelectedElements("c", "page")
};
reader.readAsText(file);
}
//image handling
else {
var reader = new FileReader();
reader.onloadend = function(e) {
// lets insert the new image until we know its dimensions
insertNewImage = function(img_width, img_height){
var newImage = svgCanvas.addSvgElementFromJson({
"element": "image",
"attr": {
"x": 0,
"y": 0,
"width": img_width,
"height": img_height,
"id": svgCanvas.getNextId(),
"style": "pointer-events:inherit"
}
});
svgCanvas.setHref(newImage, e.target.result);
svgCanvas.selectOnly([newImage])
svgCanvas.alignSelectedElements("m", "page")
svgCanvas.alignSelectedElements("c", "page")
updateContextPanel();
}
// put a placeholder img so we know the default dimensions
var img_width = 100;
var img_height = 100;
var img = new Image()
img.src = e.target.result
document.body.appendChild(img);
img.onload = function() {
img_width = img.offsetWidth
img_height = img.offsetHeight
insertNewImage(img_width, img_height);
document.body.removeChild(img);
}
};
reader.readAsDataURL(file)
}
}
}
}
var workarea = $("#workarea")
function onDragEnter(e) {
e.stopPropagation();
e.preventDefault();
workarea.css({
"-webkit-transform": "scale3d(1.1,1.1,1)",
"-moz-transform": "scale3d(1.1,1.1,1)",
"-o-transform": "scale(1.1)",
"-ms-transform": "scale3d(1.1,1.1,1)",
"transform": "scale3d(1.1,1.1,1)"
})
}
function onDragOver(e) {
e.stopPropagation();
e.preventDefault();
}
function onDragLeave(e) {
workarea.removeAttr("style")
e.stopPropagation();
e.preventDefault();
}
workarea[0].addEventListener('dragenter', onDragEnter, false);
workarea[0].addEventListener('dragover', onDragOver, false);
workarea[0].addEventListener('dragleave', onDragLeave, false);
workarea[0].addEventListener('drop', import_image, false);
var open = $('<input type="file">').change(function() {
var f = this; var f = this;
Editor.openPrep(function(ok) { Editor.openPrep(function(ok) {
if(!ok) return; if(!ok) return;
@ -3657,20 +3692,12 @@
} }
}); });
}); });
$("#tool_open").show().prepend(inp); $("#tool_open").show().prepend(open);
var inp2 = $('<input type="file">').change(function() {
$('#main_menu').hide(); var img_import = $('<input type="file">').change(import_image);
if(this.files.length==1) { $("#tool_import").show().prepend(img_import);
var reader = new FileReader();
reader.onloadend = function(e) {
svgCanvas.importSvgString(e.target.result, true);
updateCanvas();
};
reader.readAsText(this.files[0]);
}
});
$("#tool_import").show().prepend(inp2);
} }
var updateCanvas = Editor.updateCanvas = function(center, new_ctr) { var updateCanvas = Editor.updateCanvas = function(center, new_ctr) {
var w = workarea.width(), h = workarea.height(); var w = workarea.width(), h = workarea.height();

7
method-draw/svgcanvas.js
View File

@ -1016,6 +1016,7 @@ this.setRotationAngle = function(val, preventUndo) {
// ensure val is the proper type // ensure val is the proper type
val = parseFloat(val); val = parseFloat(val);
var elem = selectedElements[0]; var elem = selectedElements[0];
if (!elem) return;
var oldTransform = elem.getAttribute("transform"); var oldTransform = elem.getAttribute("transform");
var bbox = svgedit.utilities.getBBox(elem); var bbox = svgedit.utilities.getBBox(elem);
var cx = bbox.x+bbox.width/2, cy = bbox.y+bbox.height/2; var cx = bbox.x+bbox.width/2, cy = bbox.y+bbox.height/2;
@ -3682,7 +3683,7 @@ var textActions = canvas.textActions = function() {
display: 'inline' display: 'inline'
}); });
if(selblock) selblock.setAttribute('d', ''); if(selblock) selblock.setAttribute('d', 'M 0 0');
} }
function setSelection(start, end, skipInput) { function setSelection(start, end, skipInput) {
@ -4319,7 +4320,7 @@ var pathActions = canvas.pathActions = function() {
if(subpath) index += svgedit.path.path.segs.length; if(subpath) index += svgedit.path.path.segs.length;
svgedit.path.addPointGrip(index, x, y); svgedit.path.addPointGrip(index, x, y);
} }
// keep = true; // keep = true;
} }
return; return;
@ -4766,7 +4767,7 @@ var pathActions = canvas.pathActions = function() {
var newseg = elem.createSVGPathSegLinetoAbs(start_item.x, start_item.y); var newseg = elem.createSVGPathSegLinetoAbs(start_item.x, start_item.y);
var closer = elem.createSVGPathSegClosePath(); var closer = elem.createSVGPathSegClosePath();
if(open_pt == svgedit.path.path.segs.length - 1) { if(open_pt == svgedit.path.path.segs.length) {
list.appendItem(newseg); list.appendItem(newseg);
list.appendItem(closer); list.appendItem(closer);
} else { } else {

26
method-draw/svgedit.compiled.css
View File

@ -89,7 +89,7 @@ div.jGraduate_Slider input{margin-top:5px}
div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize} div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
.jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px} .jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px}
.jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px} .jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px}
body{background:#2f2f2c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0} body{background:#3f3f3c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0}
::selection{background:#000;color:#fff} ::selection{background:#000;color:#fff}
::-moz-selection{background:#000;color:#fff} ::-moz-selection{background:#000;color:#fff}
html,body{overflow:hidden;width:100%;height:100%} html,body{overflow:hidden;width:100%;height:100%}
@ -99,7 +99,8 @@ html,body{overflow:hidden;width:100%;height:100%}
::-webkit-scrollbar-corner{background:#444} ::-webkit-scrollbar-corner{background:#444}
#browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000} #browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000}
#svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0} #svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
#menu_bar{margin:0 0 0 50px} #svg_editor{background:#2f2f2c}
#menu_bar{padding:0 0 0 50px;background:#2f2f2c;position:relative;z-index:1}
#menu_bar.active .menu.open .menu_list{display:block} #menu_bar.active .menu.open .menu_list{display:block}
.menu{position:relative;z-index:5;color:#333;display:inline-block} .menu{position:relative;z-index:5;color:#333;display:inline-block}
.menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top} .menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
@ -148,7 +149,8 @@ div#palette_holder #palette .palette_item{cursor:pointer}
.touch #tool_fill .color_block{width:36px;height:36px} .touch #tool_fill .color_block{width:36px;height:36px}
.touch #tool_fill .color_block svg{width:36px!important;height:36px!important} .touch #tool_fill .color_block svg{width:36px!important;height:36px!important}
.touch #tool_switch{display:none} .touch #tool_switch{display:none}
#path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px} #use_panel .tool_button,#path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px}
#use_panel .tool_button{padding-left:10px;margin-bottom:10px;width:124px}
#path_node_panel .tool_button img,#path_node_panel .tool_button svg{position:absolute;left:5px;top:3px} #path_node_panel .tool_button img,#path_node_panel .tool_button svg{position:absolute;left:5px;top:3px}
#color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff} #color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff}
#color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0} #color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
@ -168,7 +170,7 @@ div#palette_holder #palette .palette_item{cursor:pointer}
#color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute} #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
#linkLabel>svg{height:20px;padding-top:4px} #linkLabel>svg{height:20px;padding-top:4px}
div#palette{float:left;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} div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-moz-transition:-moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-o-transition:-o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-ms-transition:-ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);transition:transform 500ms cubic-bezier(0.13,0.66,0.24,0.92)}
.touch div#workarea{top:40px} .touch div#workarea{top:40px}
div.palette_item{height:16px;width:16px;float:left} div.palette_item{height:16px;width:16px;float:left}
.touch div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:19px;float:left} .touch div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:19px;float:left}
@ -181,7 +183,7 @@ div.palette_item{height:16px;width:16px;float:left}
#tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 2px;top:-1px;left:-1px;width:26px;height:26px;z-index:0} #tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 2px;top:-1px;left:-1px;width:26px;height:26px;z-index:0}
#tools_left .tool_button_current{background-color:#0cf} #tools_left .tool_button_current{background-color:#0cf}
#main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2} #main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
#tools_top{position:absolute;width:160px;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 10px} #tools_top{position:absolute;width:160px;height:100%;background:#2f2f2c;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 15px}
.touch #tools_top{top:30px} .touch #tools_top{top:30px}
label{display:block;color:#999} label{display:block;color:#999}
div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)} div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)}
@ -202,7 +204,7 @@ input[type=submit],input[type=button],button{background:#4f80ff;color:#fff;borde
input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)} input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
input[type=submit]:hover,button:hover{background:#2f84c1} input[type=submit]:hover,button:hover{background:#2f84c1}
input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px} input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px}
#tools_left{position:absolute;border-right:0;width:50px;top:30px;left:0;background:#2f2f2c;z-index:4} #tools_left{position:absolute;border-right:0;width:50px;top:30px;bottom:0;left:0;background:#2f2f2c;z-index:4}
#workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none} #workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none}
#workarea.wireframe #svgcontent text{fill:#000;stroke:none} #workarea.wireframe #svgcontent text{fill:#000;stroke:none}
#workarea.wireframe #canvasBackground>rect{fill:#FFF!important} #workarea.wireframe #canvasBackground>rect{fill:#FFF!important}
@ -233,7 +235,7 @@ input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.
.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer} .tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden} #main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
#tool_image{overflow:hidden} #tool_image{overflow:hidden}
#tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer} #tool_open input,#tool_import input,#tool_import_bitmap input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
.disabled{opacity:.5;cursor:default} .disabled{opacity:.5;cursor:default}
.width_label{padding-right:5px} .width_label{padding-right:5px}
#text{position:absolute;left:-9999px} #text{position:absolute;left:-9999px}
@ -243,7 +245,7 @@ input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.
.tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)} .tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
.tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px} .tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
.tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px} .tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
#tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible} #tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible;background:#2f2f2c}
#tools_bottom_1{width:115px;float:left} #tools_bottom_1{width:115px;float:left}
#tools_bottom_2{position:relative;float:left;margin-top:5px} #tools_bottom_2{position:relative;float:left;margin-top:5px}
#tools_bottom input[type=text]{width:3.2em} #tools_bottom input[type=text]{width:3.2em}
@ -291,11 +293,13 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
.toolbar_button button .svg_icon{display:none} .toolbar_button button .svg_icon{display:none}
#dialog_box{display:none} #dialog_box{display:none}
#dialog_box_overlay{background:black;opacity:.5;height:100%;left:0;position:absolute;top:0;width:100%;z-index:6} #dialog_box_overlay{background:black;opacity:.5;height:100%;left:0;position:absolute;top:0;width:100%;z-index:6}
#dialog_content{height:95px;margin:10px 10px 5px 10px;background:#DDD;overflow:auto;text-align:left;border:1px solid #b0b0b0} #dialog_content{height:95px;margin:10px 10px 5px 10px;overflow:auto;text-align:left;font-size:13px}
#dialog_buttons input:last-child{background:#999!important;position:absolute;left:10px;bottom:10px}
#dialog_buttons input:first-child{position:absolute;right:10px;bottom:10px}
#dialog_content.prompt{height:75px} #dialog_content.prompt{height:75px}
#dialog_content p{margin:10px;line-height:1.3em} #dialog_content p{margin:10px;line-height:1.3em}
#dialog_container{position:absolute;font-family:Verdana;text-align:center;left:50%;top:50%;width:300px;margin-left:-150px;height:150px;margin-top:-80px;position:fixed;z-index:50001;background:#CCC;border:1px outset #777;font-family:Verdana,Helvetica,sans-serif;font-size:.8em} #dialog_container{position:absolute;left:50%;top:50%;width:300px;margin-left:-150px;height:150px;margin-top:-80px;position:fixed;z-index:50001;background:#fff}
#dialog_container,#dialog_content{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px} #dialog_container,#dialog_content{border-radius:3px}
#dialog_buttons input[type=text]{width:90%;display:block;margin:0 0 5px 11px} #dialog_buttons input[type=text]{width:90%;display:block;margin:0 0 5px 11px}
#dialog_buttons input[type=button]{margin:0 1em} #dialog_buttons input[type=button]{margin:0 1em}
.invisible{visibility:none} .invisible{visibility:none}

1276
method-draw/svgedit.compiled.js
View File

File diff suppressed because it is too large Load Diff

2
method-draw/svgutils.js
View File

@ -463,7 +463,7 @@ function groupBBFix(selected) {
// Parameters: // Parameters:
// elem - Optional DOM element to get the BBox for // elem - Optional DOM element to get the BBox for
svgedit.utilities.getBBox = function(elem) { svgedit.utilities.getBBox = function(elem) {
var selected = elem || editorContext_.geSelectedElements()[0]; var selected = elem || editorContext_.getSelectedElements()[0];
if (elem.nodeType != 1) return null; if (elem.nodeType != 1) return null;
var ret = null; var ret = null;
var elname = selected.nodeName; var elname = selected.nodeName;

60
method-draw/temp.css
View File

@ -583,7 +583,7 @@ div.jGraduate_Slider img {
/* Comment to prevent wrong concat */ /* Comment to prevent wrong concat */
body { body {
background: #2F2F2C; background: #3f3f3c;
font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -639,8 +639,15 @@ html, body {
left: 0; left: 0;
} }
#svg_editor {
background: #2f2f2c;
}
#menu_bar { #menu_bar {
margin: 0 0 0 50px padding: 0 0 0 50px;
background: #2f2f2c;
position: relative;
z-index: 1;
} }
#menu_bar.active .menu.open .menu_list { #menu_bar.active .menu.open .menu_list {
@ -955,7 +962,7 @@ html, body {
display: none; display: none;
} }
#path_node_panel .tool_button { #use_panel .tool_button, #path_node_panel .tool_button {
color: #999; color: #999;
border: solid #3F3F3C 1px; border: solid #3F3F3C 1px;
border-radius: 3px; border-radius: 3px;
@ -969,6 +976,12 @@ html, body {
line-height: 24px; line-height: 24px;
} }
#use_panel .tool_button {
padding-left: 10px;
margin-bottom: 10px;
width: 124px;
}
#path_node_panel .tool_button img, #path_node_panel .tool_button svg { #path_node_panel .tool_button img, #path_node_panel .tool_button svg {
position: absolute; position: absolute;
left: 5px; left: 5px;
@ -1104,6 +1117,11 @@ html, body {
background-color: #444; background-color: #444;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-moz-transition: -moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-o-transition: -o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
-ms-transition: -ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
} }
.touch div#workarea { .touch div#workarea {
@ -1174,11 +1192,13 @@ html, body {
#tools_top { #tools_top {
position: absolute; position: absolute;
width: 160px; width: 160px;
height: 100%;
background: #2f2f2c;
right: 0; right: 0;
top: 20px; top: 20px;
border-bottom: none; border-bottom: none;
overflow: visible; overflow: visible;
padding: 0 0 0 10px; padding: 0 0 0 15px;
} }
.touch #tools_top { .touch #tools_top {
@ -1291,6 +1311,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
border-right: none; border-right: none;
width: 50px; width: 50px;
top: 30px; top: 30px;
bottom: 0;
left: 0; left: 0;
background: #2F2F2C; /* Needed so flyout icons don't appear on the left */ background: #2F2F2C; /* Needed so flyout icons don't appear on the left */
z-index: 4; z-index: 4;
@ -1516,7 +1537,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#tool_open input, #tool_open input,
#tool_import input, #tool_import input,
#tool_image input { #tool_import_bitmap input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
font-size: 10em; font-size: 10em;
@ -1601,6 +1622,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
bottom: 0; bottom: 0;
height: 40px; height: 40px;
overflow: visible; overflow: visible;
background: #2f2f2c;
} }
#tools_bottom_1 { #tools_bottom_1 {
@ -1904,10 +1926,22 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_content { #dialog_content {
height: 95px; height: 95px;
margin: 10px 10px 5px 10px; margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
border: 1px solid #B0B0B0; font-size: 13px;
}
#dialog_buttons input:last-child {
background: #999 !important;
position: absolute;
left: 10px;
bottom: 10px;
}
#dialog_buttons input:first-child {
position: absolute;
right: 10px;
bottom: 10px;
} }
#dialog_content.prompt { #dialog_content.prompt {
@ -1921,8 +1955,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#dialog_container { #dialog_container {
position: absolute; position: absolute;
font-family: Verdana;
text-align: center;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 300px; width: 300px;
@ -1931,16 +1963,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
margin-top: -80px; margin-top: -80px;
position:fixed; position:fixed;
z-index:50001; z-index:50001;
background: #CCC; background: #fff;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
} }
#dialog_container, #dialog_content { #dialog_container, #dialog_content {
border-radius: 5px; border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} }
#dialog_buttons input[type=text] { #dialog_buttons input[type=text] {