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

JSLint 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2674 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Brett Zamir 2014-02-10 10:21:55 +00:00
parent 6d4ec994f0
commit ba5aaeb1f0
1 changed files with 134 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
editor/svg-editor.js
View File

@ -1,5 +1,5 @@
/*globals globalStorage, widget, svgEditor, svgedit */ /*globals globalStorage, widget, svgEditor, svgedit, canvg */
/*jslint vars: true, eqeq: true */ /*jslint vars: true, eqeq: true, todo: true */
/* /*
* svg-editor.js * svg-editor.js
* *
@ -187,12 +187,12 @@
// - accept the string contents of the current document // - accept the string contents of the current document
// - invoke a file chooser dialog in 'save' mode // - invoke a file chooser dialog in 'save' mode
// - save the file to location chosen by the user // - save the file to location chosen by the user
// opts.exportImage's responsibilities (with regard to the object it is supplied in its 2nd argument) are: // opts.exportImage's responsibilities (with regard to the object it is supplied in its 2nd argument) are:
// - inform user of any issues supplied via the "issues" property // - inform user of any issues supplied via the "issues" property
// - convert the "svg" property SVG string into an image for export; // - convert the "svg" property SVG string into an image for export;
// utilize the properties "type" (currently 'PNG', 'JPEG', 'BMP', // utilize the properties "type" (currently 'PNG', 'JPEG', 'BMP',
// 'WEBP'), "mimeType", and "quality" (for 'JPEG' and 'WEBP' // 'WEBP'), "mimeType", and "quality" (for 'JPEG' and 'WEBP'
// types) to determine the proper output. // types) to determine the proper output.
Editor.setCustomHandlers = function(opts) { Editor.setCustomHandlers = function(opts) {
Editor.ready(function() { Editor.ready(function() {
if (opts.open) { if (opts.open) {
@ -250,11 +250,11 @@
} }
// Disallowing extension paths via URL for // Disallowing extension paths via URL for
// security reasons, even for same-domain // security reasons, even for same-domain
// ones given potential to interact in undesirable // ones given potential to interact in undesirable
// ways with other script resources // ways with other script resources
if (urldata.extPath) { if (urldata.extPath) {
delete urldata.extPath; delete urldata.extPath;
} }
svgEditor.setConfig(urldata); svgEditor.setConfig(urldata);
@ -291,6 +291,15 @@
} }
}()); }());
var setIcon = Editor.setIcon = function(elem, icon_id, forcedSize) {
var icon = (typeof icon_id === 'string') ? $.getSvgIcon(icon_id, true) : icon_id.clone();
if (!icon) {
console.log('NOTE: Icon image missing: ' + icon_id);
return;
}
$(elem).empty().append(icon);
};
var extFunc = function() { var extFunc = function() {
$.each(curConfig.extensions, function() { $.each(curConfig.extensions, function() {
var extname = this; var extname = this;
@ -632,6 +641,102 @@
workarea.css('cursor', 'auto'); workarea.css('cursor', 'auto');
}; };
// used to make the flyouts stay on the screen longer the very first time
var flyoutspeed = 1250;
var textBeingEntered = false;
var selectedElement = null;
var multiselected = false;
var editingsource = false;
var docprops = false;
var preferences = false;
var cur_context = '';
var origTitle = $('title:first').text();
// this function highlights the layer passed in (by fading out the other layers)
// if no layer is passed in, this function restores the other layers
var toggleHighlightLayer = function(layerNameToHighlight) {
var i, curNames = new Array(svgCanvas.getCurrentDrawing().getNumLayers());
for (i = 0; i < curNames.length; i++) {
curNames[i] = svgCanvas.getCurrentDrawing().getLayerName(i);
}
if (layerNameToHighlight) {
for (i = 0; i < curNames.length; ++i) {
if (curNames[i] != layerNameToHighlight) {
svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 0.5);
}
}
} else {
for (i = 0; i < curNames.length; ++i) {
svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 1.0);
}
}
};
var populateLayers = function() {
svgCanvas.clearSelection();
var layerlist = $('#layerlist tbody').empty();
var selLayerNames = $('#selLayerNames').empty();
var drawing = svgCanvas.getCurrentDrawing();
var currentLayerName = drawing.getCurrentLayerName();
var layer = svgCanvas.getCurrentDrawing().getNumLayers();
var icon = $.getSvgIcon('eye');
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
while (layer--) {
var name = drawing.getLayerName(layer);
var layerTr = $('<tr class="layer">').toggleClass('layersel', name === currentLayerName);
var layerVis = $('<td class="layervis">').toggleClass('layerinvis', !drawing.getLayerVisibility(name));
var layerName = $('<td class="layername">' + name + '</td>');
layerlist.append(layerTr.append(layerVis, layerName));
selLayerNames.append('<option value="' + name + '">' + name + '</option>');
}
if (icon !== undefined) {
var copy = icon.clone();
$('td.layervis', layerlist).append(icon.clone());
$.resizeSvgIcons({'td.layervis .svg_icon': 14});
}
// handle selection of layer
$('#layerlist td.layername')
.mouseup(function(evt) {
$('#layerlist tr.layer').removeClass('layersel');
$(this.parentNode).addClass('layersel');
svgCanvas.setCurrentLayer(this.textContent);
evt.preventDefault();
})
.mouseover(function() {
toggleHighlightLayer(this.textContent);
})
.mouseout(function() {
toggleHighlightLayer();
});
$('#layerlist td.layervis').click(function() {
var row = $(this.parentNode).prevAll().length;
var name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();
var vis = $(this).hasClass('layerinvis');
svgCanvas.setLayerVisibility(name, vis);
$(this).toggleClass('layerinvis');
});
// if there were too few rows, let's add a few to make it not so lonely
var num = 5 - $('#layerlist tr.layer').size();
while (num-- > 0) {
// FIXME: there must a better way to do this
layerlist.append('<tr><td style="color:white">_</td><td/></tr>');
}
};
var showSourceEditor = function(e, forSaving) {
if (editingsource) {return;}
editingsource = true;
origSource = svgCanvas.getSvgString();
$('#save_output_btns').toggle(!!forSaving);
$('#tool_source_back').toggle(!forSaving);
$('#svg_source_textarea').val(origSource);
$('#svg_source_editor').fadeIn();
$('#svg_source_textarea').focus();
};
var togglePathEditMode = function(editmode, elems) { var togglePathEditMode = function(editmode, elems) {
$('#path_node_panel').toggle(editmode); $('#path_node_panel').toggle(editmode);
$('#tools_bottom_2,#tools_bottom_3').toggle(!editmode); $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
@ -651,17 +756,6 @@
} }
}; };
// used to make the flyouts stay on the screen longer the very first time
var flyoutspeed = 1250;
var textBeingEntered = false;
var selectedElement = null;
var multiselected = false;
var editingsource = false;
var docprops = false;
var preferences = false;
var cur_context = '';
var origTitle = $('title:first').text();
var saveHandler = function(window, svg) { var saveHandler = function(window, svg) {
Editor.showSaveWarning = false; Editor.showSaveWarning = false;
@ -1228,7 +1322,7 @@
parent = '#main_menu ul'; parent = '#main_menu ul';
break; break;
} }
var flyout_holder, cur_h, show_btn; var flyout_holder, cur_h, show_btn, ref_data;
var button = $((btn.list || btn.type == 'app_menu') ? '<li/>' : '<div/>') var button = $((btn.list || btn.type == 'app_menu') ? '<li/>' : '<div/>')
.attr('id', id) .attr('id', id)
.attr('title', btn.title) .attr('title', btn.title)
@ -1262,7 +1356,7 @@
flyout_holder.data('isLibrary', true); flyout_holder.data('isLibrary', true);
show_btn.data('isLibrary', true); show_btn.data('isLibrary', true);
} }
// var ref_data = Actions.getButtonData(opts.button); // ref_data = Actions.getButtonData(opts.button);
placement_obj['#' + tls_id + '_show'] = btn.id; placement_obj['#' + tls_id + '_show'] = btn.id;
// TODO: Find way to set the current icon using the iconloader if this is not default // TODO: Find way to set the current icon using the iconloader if this is not default
@ -1292,7 +1386,8 @@
button.append('<div>').append(btn.title); button.append('<div>').append(btn.title);
} }
} else if (btn.list) { }
else if (btn.list) {
// Add button to list // Add button to list
button.addClass('push_button'); button.addClass('push_button');
$('#' + btn.list + '_opts').append(button); $('#' + btn.list + '_opts').append(button);
@ -1322,7 +1417,7 @@
flyout_holder = makeFlyoutHolder(tls_id, ref_btn); flyout_holder = makeFlyoutHolder(tls_id, ref_btn);
} }
var ref_data = Actions.getButtonData(opts.button); ref_data = Actions.getButtonData(opts.button);
if (opts.isDefault) { if (opts.isDefault) {
placement_obj['#' + tls_id + '_show'] = btn.id; placement_obj['#' + tls_id + '_show'] = btn.id;
@ -2075,7 +2170,7 @@
$(opt).addClass('current').siblings().removeClass('current'); $(opt).addClass('current').siblings().removeClass('current');
} }
(function() { (function () {
var button = $('#main_icon'); var button = $('#main_icon');
var overlay = $('#main_icon span'); var overlay = $('#main_icon span');
var list = $('#main_menu'); var list = $('#main_menu');
@ -2106,7 +2201,7 @@
}).mousedown(function(evt) { }).mousedown(function(evt) {
// $('.contextMenu').hide(); // $('.contextMenu').hide();
var islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length; var islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length;
if (!islib) $('.tools_flyout:visible,.contextMenu').fadeOut(250); if (!islib) {$('.tools_flyout:visible,.contextMenu').fadeOut(250);}
}); });
overlay.bind('mousedown',function() { overlay.bind('mousedown',function() {
@ -2151,7 +2246,7 @@
// Made public for UI customization. // Made public for UI customization.
// TODO: Group UI functions into a public svgEditor.ui interface. // TODO: Group UI functions into a public svgEditor.ui interface.
Editor.addDropDown = function(elem, callback, dropUp) { Editor.addDropDown = function(elem, callback, dropUp) {
if ($(elem).length == 0) return; // Quit if called on non-existant element if ($(elem).length == 0) {return;} // Quit if called on non-existant element
var button = $(elem).find('button'); var button = $(elem).find('button');
var list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list'); var list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list');
var on_button = false; var on_button = false;
@ -2196,7 +2291,7 @@
// TODO: Combine this with addDropDown or find other way to optimize // TODO: Combine this with addDropDown or find other way to optimize
var addAltDropDown = function(elem, list, callback, opts) { var addAltDropDown = function(elem, list, callback, opts) {
var button = $(elem); var button = $(elem);
var list = $(list); list = $(list);
var on_button = false; var on_button = false;
var dropUp = opts.dropUp; var dropUp = opts.dropUp;
if (dropUp) { if (dropUp) {
@ -2258,7 +2353,7 @@
}); });
Editor.addDropDown('#opacity_dropdown', function() { Editor.addDropDown('#opacity_dropdown', function() {
if ($(this).find('div').length) return; if ($(this).find('div').length) {return;}
var perc = parseInt($(this).text().split('%')[0]); var perc = parseInt($(this).text().split('%')[0]);
changeOpacity(false, perc); changeOpacity(false, perc);
}, true); }, true);
@ -2505,7 +2600,7 @@
var makeHyperlink = function() { var makeHyperlink = function() {
if (selectedElement != null || multiselected) { if (selectedElement != null || multiselected) {
$.prompt(uiStrings.notification.enterNewLinkURL, 'http://', function(url) { $.prompt(uiStrings.notification.enterNewLinkURL, 'http://', function(url) {
if (url) svgCanvas.makeHyperlink(url); if (url) {svgCanvas.makeHyperlink(url);}
}); });
} }
}; };
@ -2557,8 +2652,8 @@
}; };
var rotateSelected = function(cw, step) { var rotateSelected = function(cw, step) {
if (selectedElement == null || multiselected) return; if (selectedElement == null || multiselected) {return;}
if (!cw) step *= -1; if (!cw) {step *= -1;}
var angle = parseFloat($('#angle').val()) + step; var angle = parseFloat($('#angle').val()) + step;
svgCanvas.setRotationAngle(angle); svgCanvas.setRotationAngle(angle);
updateContextPanel(); updateContextPanel();
@ -2567,7 +2662,7 @@
var clickClear = function() { var clickClear = function() {
var dims = curConfig.dimensions; var dims = curConfig.dimensions;
$.confirm(uiStrings.notification.QwantToClear, function(ok) { $.confirm(uiStrings.notification.QwantToClear, function(ok) {
if (!ok) return; if (!ok) {return;}
setSelectMode(); setSelectMode();
svgCanvas.clear(); svgCanvas.clear();
svgCanvas.setResolution(dims[0], dims[1]); svgCanvas.setResolution(dims[0], dims[1]);
@ -2702,7 +2797,7 @@
$('#tool_wireframe').toggleClass('push_button_pressed tool_button'); $('#tool_wireframe').toggleClass('push_button_pressed tool_button');
workarea.toggleClass('wireframe'); workarea.toggleClass('wireframe');
if (supportsNonSS) return; if (supportsNonSS) {return;}
var wf_rules = $('#wireframe_rules'); var wf_rules = $('#wireframe_rules');
if (!wf_rules.length) { if (!wf_rules.length) {
wf_rules = $('<style id="wireframe_rules"><\/style>').appendTo('head'); wf_rules = $('<style id="wireframe_rules"><\/style>').appendTo('head');
@ -2715,24 +2810,12 @@
var updateWireFrame = function() { var updateWireFrame = function() {
// Test support // Test support
if (supportsNonSS) return; if (supportsNonSS) {return;}
var rule = '#workarea.wireframe #svgcontent * { stroke-width: ' + 1/svgCanvas.getZoom() + 'px; }'; var rule = '#workarea.wireframe #svgcontent * { stroke-width: ' + 1/svgCanvas.getZoom() + 'px; }';
$('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : ''); $('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : '');
}; };
var showSourceEditor = function(e, forSaving) {
if (editingsource) return;
editingsource = true;
origSource = svgCanvas.getSvgString();
$('#save_output_btns').toggle(!!forSaving);
$('#tool_source_back').toggle(!forSaving);
$('#svg_source_textarea').val(origSource);
$('#svg_source_editor').fadeIn();
$('#svg_source_textarea').focus();
};
$('#svg_docprops_container, #svg_prefs_container').draggable({cancel: 'button,fieldset', containment: 'window'}); $('#svg_docprops_container, #svg_prefs_container').draggable({cancel: 'button,fieldset', containment: 'window'});
var showDocProperties = function() { var showDocProperties = function() {
@ -2895,15 +2978,6 @@
svgCanvas.setBackground(color, url); svgCanvas.setBackground(color, url);
} }
var setIcon = Editor.setIcon = function(elem, icon_id, forcedSize) {
var icon = (typeof icon_id === 'string') ? $.getSvgIcon(icon_id, true) : icon_id.clone();
if (!icon) {
console.log('NOTE: Icon image missing: ' + icon_id);
return;
}
$(elem).empty().append(icon);
};
var uaPrefix = (function() { var uaPrefix = (function() {
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/; var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
var someScript = document.getElementsByTagName('script')[0]; var someScript = document.getElementsByTagName('script')[0];
@ -3751,76 +3825,6 @@
changeSidePanelWidth(deltaX); changeSidePanelWidth(deltaX);
}; };
// this function highlights the layer passed in (by fading out the other layers)
// if no layer is passed in, this function restores the other layers
var toggleHighlightLayer = function(layerNameToHighlight) {
var curNames = new Array(svgCanvas.getCurrentDrawing().getNumLayers());
for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getCurrentDrawing().getLayerName(i); }
if (layerNameToHighlight) {
for (var i = 0; i < curNames.length; ++i) {
if (curNames[i] != layerNameToHighlight) {
svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 0.5);
}
}
} else {
for (var i = 0; i < curNames.length; ++i) {
svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 1.0);
}
}
};
var populateLayers = function() {
svgCanvas.clearSelection();
var layerlist = $('#layerlist tbody').empty();
var selLayerNames = $('#selLayerNames').empty();
var drawing = svgCanvas.getCurrentDrawing();
var currentLayerName = drawing.getCurrentLayerName();
var layer = svgCanvas.getCurrentDrawing().getNumLayers();
var icon = $.getSvgIcon('eye');
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
while (layer--) {
var name = drawing.getLayerName(layer);
var layerTr = $('<tr class="layer">').toggleClass('layersel', name === currentLayerName);
var layerVis = $('<td class="layervis">').toggleClass('layerinvis', !drawing.getLayerVisibility(name));
var layerName = $('<td class="layername">' + name + '</td>');
layerlist.append(layerTr.append(layerVis, layerName));
selLayerNames.append('<option value="' + name + '">' + name + '</option>');
}
if (icon !== undefined) {
var copy = icon.clone();
$('td.layervis', layerlist).append(icon.clone());
$.resizeSvgIcons({'td.layervis .svg_icon': 14});
}
// handle selection of layer
$('#layerlist td.layername')
.mouseup(function(evt) {
$('#layerlist tr.layer').removeClass('layersel');
$(this.parentNode).addClass('layersel');
svgCanvas.setCurrentLayer(this.textContent);
evt.preventDefault();
})
.mouseover(function() {
toggleHighlightLayer(this.textContent);
})
.mouseout(function() {
toggleHighlightLayer();
});
$('#layerlist td.layervis').click(function() {
var row = $(this.parentNode).prevAll().length;
var name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();
var vis = $(this).hasClass('layerinvis');
svgCanvas.setLayerVisibility(name, vis);
$(this).toggleClass('layerinvis');
});
// if there were too few rows, let's add a few to make it not so lonely
var num = 5 - $('#layerlist tr.layer').size();
while (num-- > 0) {
// FIXME: there must a better way to do this
layerlist.append('<tr><td style="color:white">_</td><td/></tr>');
}
};
populateLayers(); populateLayers();
// function changeResolution(x,y) { // function changeResolution(x,y) {