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

View File

@ -1,5 +1,5 @@
/*globals globalStorage, widget, svgEditor, svgedit */
/*jslint vars: true, eqeq: true */
/*globals globalStorage, widget, svgEditor, svgedit, canvg */
/*jslint vars: true, eqeq: true, todo: true */
/*
* svg-editor.js
*
@ -187,12 +187,12 @@
// - accept the string contents of the current document
// - invoke a file chooser dialog in 'save' mode
// - 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:
// - inform user of any issues supplied via the "issues" property
// - convert the "svg" property SVG string into an image for export;
// utilize the properties "type" (currently 'PNG', 'JPEG', 'BMP',
// 'WEBP'), "mimeType", and "quality" (for 'JPEG' and 'WEBP'
// types) to determine the proper output.
// 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
// - convert the "svg" property SVG string into an image for export;
// utilize the properties "type" (currently 'PNG', 'JPEG', 'BMP',
// 'WEBP'), "mimeType", and "quality" (for 'JPEG' and 'WEBP'
// types) to determine the proper output.
Editor.setCustomHandlers = function(opts) {
Editor.ready(function() {
if (opts.open) {
@ -250,11 +250,11 @@
}
// Disallowing extension paths via URL for
// security reasons, even for same-domain
// ones given potential to interact in undesirable
// ways with other script resources
if (urldata.extPath) {
delete urldata.extPath;
// security reasons, even for same-domain
// ones given potential to interact in undesirable
// ways with other script resources
if (urldata.extPath) {
delete urldata.extPath;
}
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() {
$.each(curConfig.extensions, function() {
var extname = this;
@ -632,6 +641,102 @@
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) {
$('#path_node_panel').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) {
Editor.showSaveWarning = false;
@ -1228,7 +1322,7 @@
parent = '#main_menu ul';
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/>')
.attr('id', id)
.attr('title', btn.title)
@ -1262,7 +1356,7 @@
flyout_holder.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;
// 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);
}
} else if (btn.list) {
}
else if (btn.list) {
// Add button to list
button.addClass('push_button');
$('#' + btn.list + '_opts').append(button);
@ -1322,7 +1417,7 @@
flyout_holder = makeFlyoutHolder(tls_id, ref_btn);
}
var ref_data = Actions.getButtonData(opts.button);
ref_data = Actions.getButtonData(opts.button);
if (opts.isDefault) {
placement_obj['#' + tls_id + '_show'] = btn.id;
@ -2075,7 +2170,7 @@
$(opt).addClass('current').siblings().removeClass('current');
}
(function() {
(function () {
var button = $('#main_icon');
var overlay = $('#main_icon span');
var list = $('#main_menu');
@ -2106,7 +2201,7 @@
}).mousedown(function(evt) {
// $('.contextMenu').hide();
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() {
@ -2151,7 +2246,7 @@
// Made public for UI customization.
// TODO: Group UI functions into a public svgEditor.ui interface.
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 list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list');
var on_button = false;
@ -2196,7 +2291,7 @@
// TODO: Combine this with addDropDown or find other way to optimize
var addAltDropDown = function(elem, list, callback, opts) {
var button = $(elem);
var list = $(list);
list = $(list);
var on_button = false;
var dropUp = opts.dropUp;
if (dropUp) {
@ -2258,7 +2353,7 @@
});
Editor.addDropDown('#opacity_dropdown', function() {
if ($(this).find('div').length) return;
if ($(this).find('div').length) {return;}
var perc = parseInt($(this).text().split('%')[0]);
changeOpacity(false, perc);
}, true);
@ -2505,7 +2600,7 @@
var makeHyperlink = function() {
if (selectedElement != null || multiselected) {
$.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) {
if (selectedElement == null || multiselected) return;
if (!cw) step *= -1;
if (selectedElement == null || multiselected) {return;}
if (!cw) {step *= -1;}
var angle = parseFloat($('#angle').val()) + step;
svgCanvas.setRotationAngle(angle);
updateContextPanel();
@ -2567,7 +2662,7 @@
var clickClear = function() {
var dims = curConfig.dimensions;
$.confirm(uiStrings.notification.QwantToClear, function(ok) {
if (!ok) return;
if (!ok) {return;}
setSelectMode();
svgCanvas.clear();
svgCanvas.setResolution(dims[0], dims[1]);
@ -2702,7 +2797,7 @@
$('#tool_wireframe').toggleClass('push_button_pressed tool_button');
workarea.toggleClass('wireframe');
if (supportsNonSS) return;
if (supportsNonSS) {return;}
var wf_rules = $('#wireframe_rules');
if (!wf_rules.length) {
wf_rules = $('<style id="wireframe_rules"><\/style>').appendTo('head');
@ -2715,24 +2810,12 @@
var updateWireFrame = function() {
// Test support
if (supportsNonSS) return;
if (supportsNonSS) {return;}
var rule = '#workarea.wireframe #svgcontent * { stroke-width: ' + 1/svgCanvas.getZoom() + 'px; }';
$('#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'});
var showDocProperties = function() {
@ -2895,15 +2978,6 @@
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 regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
var someScript = document.getElementsByTagName('script')[0];
@ -3751,76 +3825,6 @@
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();
// function changeResolution(x,y) {