|
|
|
|
@ -10,8 +10,30 @@
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
function svg_edit_setup() {
|
|
|
|
|
var uiStrings = {
|
|
|
|
|
(function() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(!window.svgEditor) window.svgEditor = function() {
|
|
|
|
|
var svgCanvas;
|
|
|
|
|
var Editor = {};
|
|
|
|
|
var is_ready = false;
|
|
|
|
|
|
|
|
|
|
var defaultPrefs = {
|
|
|
|
|
lang:'en',
|
|
|
|
|
iconsize:'m',
|
|
|
|
|
bkgd_color:'#FFF',
|
|
|
|
|
bkgd_url:'',
|
|
|
|
|
img_save:'embed'
|
|
|
|
|
},
|
|
|
|
|
curPrefs = {},
|
|
|
|
|
|
|
|
|
|
// Note: Difference between Prefs and Config is that Prefs can be
|
|
|
|
|
// changed by the user and are stored in the browser, config can not
|
|
|
|
|
|
|
|
|
|
curConfig = {
|
|
|
|
|
canvas_expansion: 3
|
|
|
|
|
}
|
|
|
|
|
uiStrings = {
|
|
|
|
|
'invalidAttrValGiven':'Invalid value given',
|
|
|
|
|
'noContentToFitTo':'No content to fit to',
|
|
|
|
|
'layer':"Layer",
|
|
|
|
|
@ -31,16 +53,9 @@ function svg_edit_setup() {
|
|
|
|
|
'key_down':'Down',
|
|
|
|
|
'key_backspace':'Backspace',
|
|
|
|
|
'key_del':'Del'
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
palette = ["#000000","#202020","#404040","#606060","#808080","#a0a0a0","#c0c0c0","#e0e0e0","#ffffff","#800000","#ff0000","#808000","#ffff00","#008000","#00ff00","#008080","#00ffff","#000080","#0000ff","#800080","#ff00ff","#2b0000","#550000","#800000","#aa0000","#d40000","#ff0000","#ff2a2a","#ff5555","#ff8080","#ffaaaa","#ffd5d5","#280b0b","#501616","#782121","#a02c2c","#c83737","#d35f5f","#de8787","#e9afaf","#f4d7d7","#241c1c","#483737","#6c5353","#916f6f","#ac9393","#c8b7b7","#e3dbdb","#2b1100","#552200","#803300","#aa4400","#d45500","#ff6600","#ff7f2a","#ff9955","#ffb380","#ffccaa","#ffe6d5","#28170b","#502d16","#784421","#a05a2c","#c87137","#d38d5f","#deaa87","#e9c6af","#f4e3d7","#241f1c","#483e37","#6c5d53","#917c6f","#ac9d93","#c8beb7","#e3dedb","#2b2200","#554400","#806600","#aa8800","#d4aa00","#ffcc00","#ffd42a","#ffdd55","#ffe680","#ffeeaa","#fff6d5","#28220b","#504416","#786721","#a0892c","#c8ab37","#d3bc5f","#decd87","#e9ddaf","#f4eed7","#24221c","#484537","#6c6753","#918a6f","#aca793","#c8c4b7","#e3e2db","#222b00","#445500","#668000","#88aa00","#aad400","#ccff00","#d4ff2a","#ddff55","#e5ff80","#eeffaa","#f6ffd5","#22280b","#445016","#677821","#89a02c","#abc837","#bcd35f","#cdde87","#dde9af","#eef4d7","#22241c","#454837","#676c53","#8a916f","#a7ac93","#c4c8b7","#e2e3db","#112b00","#225500","#338000","#44aa00","#55d400","#66ff00","#7fff2a","#99ff55","#b3ff80","#ccffaa","#e5ffd5","#17280b","#2d5016","#447821","#5aa02c","#71c837","#8dd35f","#aade87","#c6e9af","#e3f4d7","#1f241c","#3e4837","#5d6c53","#7c916f","#9dac93","#bec8b7","#dee3db","#002b00","#005500","#008000","#00aa00","#00d400","#00ff00","#2aff2a","#55ff55","#80ff80","#aaffaa","#d5ffd5","#0b280b","#165016","#217821","#2ca02c","#37c837","#5fd35f","#87de87","#afe9af","#d7f4d7","#1c241c","#374837","#536c53","#6f916f","#93ac93","#b7c8b7","#dbe3db","#002b11","#005522","#008033","#00aa44","#00d455","#00ff66","#2aff80","#55ff99","#80ffb3","#aaffcc","#d5ffe6","#0b2817","#16502d","#217844","#2ca05a","#37c871","#5fd38d","#87deaa","#afe9c6","#d7f4e3","#1c241f","#37483e","#536c5d","#6f917c","#93ac9d","#b7c8be","#dbe3de","#002b22","#005544","#008066","#00aa88","#00d4aa","#00ffcc","#2affd5","#55ffdd","#80ffe6","#aaffee","#d5fff6","#0b2822","#165044","#217867","#2ca089","#37c8ab","#5fd3bc","#87decd","#afe9dd","#d7f4ee","#1c2422","#374845","#536c67","#6f918a","#93aca7","#b7c8c4","#dbe3e2","#00222b","#004455","#006680","#0088aa","#00aad4","#00ccff","#2ad4ff","#55ddff","#80e5ff","#aaeeff","#d5f6ff","#0b2228","#164450","#216778","#2c89a0","#37abc8","#5fbcd3","#87cdde","#afdde9","#d7eef4","#1c2224","#374548","#53676c","#6f8a91","#93a7ac","#b7c4c8","#dbe2e3","#00112b","#002255","#003380","#0044aa","#0055d4","#0066ff","#2a7fff","#5599ff","#80b3ff","#aaccff","#d5e5ff","#0b1728","#162d50","#214478","#2c5aa0","#3771c8","#5f8dd3","#87aade","#afc6e9","#d7e3f4","#1c1f24","#373e48","#535d6c","#6f7c91","#939dac","#b7bec8","#dbdee3","#00002b","#000055","#000080","#0000aa","#0000d4","#0000ff","#2a2aff","#5555ff","#8080ff","#aaaaff","#d5d5ff","#0b0b28","#161650","#212178","#2c2ca0","#3737c8","#5f5fd3","#8787de","#afafe9","#d7d7f4","#1c1c24","#373748","#53536c","#6f6f91","#9393ac","#b7b7c8","#dbdbe3","#11002b","#220055","#330080","#4400aa","#5500d4","#6600ff","#7f2aff","#9955ff","#b380ff","#ccaaff","#e5d5ff","#170b28","#2d1650","#442178","#5a2ca0","#7137c8","#8d5fd3","#aa87de","#c6afe9","#e3d7f4","#1f1c24","#3e3748","#5d536c","#7c6f91","#9d93ac","#beb7c8","#dedbe3","#22002b","#440055","#660080","#8800aa","#aa00d4","#cc00ff","#d42aff","#dd55ff","#e580ff","#eeaaff","#f6d5ff","#220b28","#441650","#672178","#892ca0","#ab37c8","#bc5fd3","#cd87de","#ddafe9","#eed7f4","#221c24","#453748","#67536c","#8a6f91","#a793ac","#c4b7c8","#e2dbe3","#2b0022","#550044","#800066","#aa0088","#d400aa","#ff00cc","#ff2ad4","#ff55dd","#ff80e5","#ffaaee","#ffd5f6","#280b22","#501644","#782167","#a02c89","#c837ab","#d35fbc","#de87cd","#e9afdd","#f4d7ee","#241c22","#483745","#6c5367","#916f8a","#ac93a7","#c8b7c4","#e3dbe2","#2b0011","#550022","#800033","#aa0044","#d40055","#ff0066","#ff2a7f","#ff5599","#ff80b2","#ffaacc","#ffd5e5","#280b17","#50162d","#782144","#a02c5a","#c83771","#d35f8d","#de87aa","#e9afc6","#f4d7e3","#241c1f","#48373e","#6c535d","#916f7c","#ac939d","#c8b7be","#e3dbde"],
|
|
|
|
|
|
|
|
|
|
isMac = false, //(navigator.platform.indexOf("Mac") != -1);
|
|
|
|
|
modKey = "", //(isMac ? "meta+" : "ctrl+");
|
|
|
|
|
svgCanvas = new SvgCanvas(document.getElementById("svgcanvas")),
|
|
|
|
|
path = svgCanvas.pathActions,
|
|
|
|
|
default_img_url = "images/logo.png",
|
|
|
|
|
workarea = $("#workarea");
|
|
|
|
|
var curPrefs = {}; //$.extend({}, defaultPrefs);
|
|
|
|
|
|
|
|
|
|
// Store and retrieve preferences
|
|
|
|
|
$.pref = function(key, val) {
|
|
|
|
|
@ -64,7 +79,7 @@ function svg_edit_setup() {
|
|
|
|
|
|
|
|
|
|
if(storage) {
|
|
|
|
|
if(store) storage.setItem(key, val);
|
|
|
|
|
else return storage.getItem(key);
|
|
|
|
|
else if (storage.getItem(key)) return storage.getItem(key).value;
|
|
|
|
|
} else if(window.widget) {
|
|
|
|
|
if(store) widget.setPreferenceForKey(val, key);
|
|
|
|
|
else return widget.preferenceForKey(key);
|
|
|
|
|
@ -81,13 +96,50 @@ function svg_edit_setup() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var curPrefs = {
|
|
|
|
|
lang:'en',
|
|
|
|
|
iconsize:'m',
|
|
|
|
|
bkgd_color:'#FFF',
|
|
|
|
|
bkgd_url:'',
|
|
|
|
|
img_save:'embed'
|
|
|
|
|
};
|
|
|
|
|
Editor.setConfig = function(opts) {
|
|
|
|
|
$.each(opts, function(key, val) {
|
|
|
|
|
// Only allow prefs defined in defaultPrefs or curConfig
|
|
|
|
|
if(key in defaultPrefs) {
|
|
|
|
|
$.pref(key, val);
|
|
|
|
|
} else {
|
|
|
|
|
curConfig[key] = val;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Extension mechanisms must call setCustomHandlers with two functions: opts.open and opts.save
|
|
|
|
|
// opts.open's responsibilities are:
|
|
|
|
|
// - invoke a file chooser dialog in 'open' mode
|
|
|
|
|
// - let user pick a SVG file
|
|
|
|
|
// - calls setCanvas.setSvgString() with the string contents of that file
|
|
|
|
|
// opts.save's responsibilities are:
|
|
|
|
|
// - 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
|
|
|
|
|
Editor.setCustomHandlers = function(opts) {
|
|
|
|
|
if(opts.open) {
|
|
|
|
|
$('#tool_open').show();
|
|
|
|
|
svgCanvas.open = opts.open;
|
|
|
|
|
}
|
|
|
|
|
if(opts.save) {
|
|
|
|
|
svgCanvas.bind("saved", opts.save);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Editor.randomizeIds = function() {
|
|
|
|
|
svgCanvas.randomizeIds(arguments)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Editor.init = function() {
|
|
|
|
|
Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig);
|
|
|
|
|
|
|
|
|
|
var palette = ["#000000","#202020","#404040","#606060","#808080","#a0a0a0","#c0c0c0","#e0e0e0","#ffffff","#800000","#ff0000","#808000","#ffff00","#008000","#00ff00","#008080","#00ffff","#000080","#0000ff","#800080","#ff00ff","#2b0000","#550000","#800000","#aa0000","#d40000","#ff0000","#ff2a2a","#ff5555","#ff8080","#ffaaaa","#ffd5d5","#280b0b","#501616","#782121","#a02c2c","#c83737","#d35f5f","#de8787","#e9afaf","#f4d7d7","#241c1c","#483737","#6c5353","#916f6f","#ac9393","#c8b7b7","#e3dbdb","#2b1100","#552200","#803300","#aa4400","#d45500","#ff6600","#ff7f2a","#ff9955","#ffb380","#ffccaa","#ffe6d5","#28170b","#502d16","#784421","#a05a2c","#c87137","#d38d5f","#deaa87","#e9c6af","#f4e3d7","#241f1c","#483e37","#6c5d53","#917c6f","#ac9d93","#c8beb7","#e3dedb","#2b2200","#554400","#806600","#aa8800","#d4aa00","#ffcc00","#ffd42a","#ffdd55","#ffe680","#ffeeaa","#fff6d5","#28220b","#504416","#786721","#a0892c","#c8ab37","#d3bc5f","#decd87","#e9ddaf","#f4eed7","#24221c","#484537","#6c6753","#918a6f","#aca793","#c8c4b7","#e3e2db","#222b00","#445500","#668000","#88aa00","#aad400","#ccff00","#d4ff2a","#ddff55","#e5ff80","#eeffaa","#f6ffd5","#22280b","#445016","#677821","#89a02c","#abc837","#bcd35f","#cdde87","#dde9af","#eef4d7","#22241c","#454837","#676c53","#8a916f","#a7ac93","#c4c8b7","#e2e3db","#112b00","#225500","#338000","#44aa00","#55d400","#66ff00","#7fff2a","#99ff55","#b3ff80","#ccffaa","#e5ffd5","#17280b","#2d5016","#447821","#5aa02c","#71c837","#8dd35f","#aade87","#c6e9af","#e3f4d7","#1f241c","#3e4837","#5d6c53","#7c916f","#9dac93","#bec8b7","#dee3db","#002b00","#005500","#008000","#00aa00","#00d400","#00ff00","#2aff2a","#55ff55","#80ff80","#aaffaa","#d5ffd5","#0b280b","#165016","#217821","#2ca02c","#37c837","#5fd35f","#87de87","#afe9af","#d7f4d7","#1c241c","#374837","#536c53","#6f916f","#93ac93","#b7c8b7","#dbe3db","#002b11","#005522","#008033","#00aa44","#00d455","#00ff66","#2aff80","#55ff99","#80ffb3","#aaffcc","#d5ffe6","#0b2817","#16502d","#217844","#2ca05a","#37c871","#5fd38d","#87deaa","#afe9c6","#d7f4e3","#1c241f","#37483e","#536c5d","#6f917c","#93ac9d","#b7c8be","#dbe3de","#002b22","#005544","#008066","#00aa88","#00d4aa","#00ffcc","#2affd5","#55ffdd","#80ffe6","#aaffee","#d5fff6","#0b2822","#165044","#217867","#2ca089","#37c8ab","#5fd3bc","#87decd","#afe9dd","#d7f4ee","#1c2422","#374845","#536c67","#6f918a","#93aca7","#b7c8c4","#dbe3e2","#00222b","#004455","#006680","#0088aa","#00aad4","#00ccff","#2ad4ff","#55ddff","#80e5ff","#aaeeff","#d5f6ff","#0b2228","#164450","#216778","#2c89a0","#37abc8","#5fbcd3","#87cdde","#afdde9","#d7eef4","#1c2224","#374548","#53676c","#6f8a91","#93a7ac","#b7c4c8","#dbe2e3","#00112b","#002255","#003380","#0044aa","#0055d4","#0066ff","#2a7fff","#5599ff","#80b3ff","#aaccff","#d5e5ff","#0b1728","#162d50","#214478","#2c5aa0","#3771c8","#5f8dd3","#87aade","#afc6e9","#d7e3f4","#1c1f24","#373e48","#535d6c","#6f7c91","#939dac","#b7bec8","#dbdee3","#00002b","#000055","#000080","#0000aa","#0000d4","#0000ff","#2a2aff","#5555ff","#8080ff","#aaaaff","#d5d5ff","#0b0b28","#161650","#212178","#2c2ca0","#3737c8","#5f5fd3","#8787de","#afafe9","#d7d7f4","#1c1c24","#373748","#53536c","#6f6f91","#9393ac","#b7b7c8","#dbdbe3","#11002b","#220055","#330080","#4400aa","#5500d4","#6600ff","#7f2aff","#9955ff","#b380ff","#ccaaff","#e5d5ff","#170b28","#2d1650","#442178","#5a2ca0","#7137c8","#8d5fd3","#aa87de","#c6afe9","#e3d7f4","#1f1c24","#3e3748","#5d536c","#7c6f91","#9d93ac","#beb7c8","#dedbe3","#22002b","#440055","#660080","#8800aa","#aa00d4","#cc00ff","#d42aff","#dd55ff","#e580ff","#eeaaff","#f6d5ff","#220b28","#441650","#672178","#892ca0","#ab37c8","#bc5fd3","#cd87de","#ddafe9","#eed7f4","#221c24","#453748","#67536c","#8a6f91","#a793ac","#c4b7c8","#e2dbe3","#2b0022","#550044","#800066","#aa0088","#d400aa","#ff00cc","#ff2ad4","#ff55dd","#ff80e5","#ffaaee","#ffd5f6","#280b22","#501644","#782167","#a02c89","#c837ab","#d35fbc","#de87cd","#e9afdd","#f4d7ee","#241c22","#483745","#6c5367","#916f8a","#ac93a7","#c8b7c4","#e3dbe2","#2b0011","#550022","#800033","#aa0044","#d40055","#ff0066","#ff2a7f","#ff5599","#ff80b2","#ffaacc","#ffd5e5","#280b17","#50162d","#782144","#a02c5a","#c83771","#d35f8d","#de87aa","#e9afc6","#f4d7e3","#241c1f","#48373e","#6c535d","#916f7c","#ac939d","#c8b7be","#e3dbde"],
|
|
|
|
|
|
|
|
|
|
isMac = false, //(navigator.platform.indexOf("Mac") != -1);
|
|
|
|
|
modKey = "", //(isMac ? "meta+" : "ctrl+");
|
|
|
|
|
path = svgCanvas.pathActions,
|
|
|
|
|
default_img_url = "images/logo.png",
|
|
|
|
|
workarea = $("#workarea");
|
|
|
|
|
|
|
|
|
|
// This sets up alternative dialog boxes. They mostly work the same way as
|
|
|
|
|
// their UI counterparts, expect instead of returning the result, a callback
|
|
|
|
|
@ -181,7 +233,7 @@ function svg_edit_setup() {
|
|
|
|
|
var win = window.open("data:image/svg+xml;base64," + Utils.encode64(svg));
|
|
|
|
|
|
|
|
|
|
// Alert will only appear the first time saved OR the first time the bug is encountered
|
|
|
|
|
var done = $.pref('save_notice_done') + ""; // TODO: Find out why this returns an object in FF when online
|
|
|
|
|
var done = $.pref('save_notice_done');
|
|
|
|
|
if(done !== "all") {
|
|
|
|
|
|
|
|
|
|
var note = 'Select "Save As..." in your browser to save this image as an SVG file.';
|
|
|
|
|
@ -1273,14 +1325,14 @@ function svg_edit_setup() {
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// var setIcon = function(holder_sel, id) {
|
|
|
|
|
// var icon = $.getSvgIcon(id).clone();
|
|
|
|
|
// var holder = $(holder_sel);
|
|
|
|
|
// icon[0].setAttribute('width',holder.width());
|
|
|
|
|
// icon[0].setAttribute('height',holder.height());
|
|
|
|
|
// holder.empty().append(icon)
|
|
|
|
|
// .attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
|
|
|
|
|
// }
|
|
|
|
|
// var setIcon = function(holder_sel, id) {
|
|
|
|
|
// var icon = $.getSvgIcon(id).clone();
|
|
|
|
|
// var holder = $(holder_sel);
|
|
|
|
|
// icon[0].setAttribute('width',holder.width());
|
|
|
|
|
// icon[0].setAttribute('height',holder.height());
|
|
|
|
|
// holder.empty().append(icon)
|
|
|
|
|
// .attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
var clickSelect = function() {
|
|
|
|
|
if (toolButtonClick('#tool_select')) {
|
|
|
|
|
@ -1524,7 +1576,7 @@ function svg_edit_setup() {
|
|
|
|
|
var zoomImage = function(multiplier) {
|
|
|
|
|
var res = svgCanvas.getResolution();
|
|
|
|
|
multiplier = multiplier?res.zoom * multiplier:1;
|
|
|
|
|
// setResolution(res.w * multiplier, res.h * multiplier, true);
|
|
|
|
|
// setResolution(res.w * multiplier, res.h * multiplier, true);
|
|
|
|
|
$('#zoom').val(multiplier * 100);
|
|
|
|
|
svgCanvas.setZoom(multiplier);
|
|
|
|
|
zoomDone();
|
|
|
|
|
@ -1532,7 +1584,7 @@ function svg_edit_setup() {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var zoomDone = function() {
|
|
|
|
|
// updateBgImage();
|
|
|
|
|
// updateBgImage();
|
|
|
|
|
updateWireFrame();
|
|
|
|
|
//updateCanvas(); // necessary?
|
|
|
|
|
}
|
|
|
|
|
@ -1594,7 +1646,7 @@ function svg_edit_setup() {
|
|
|
|
|
var cur_bg = 'cur_background';
|
|
|
|
|
var canvas_bg = $.pref('bkgd_color');
|
|
|
|
|
var url = $.pref('bkgd_url');
|
|
|
|
|
// if(url) url = url[1];
|
|
|
|
|
// if(url) url = url[1];
|
|
|
|
|
blocks.each(function() {
|
|
|
|
|
var blk = $(this);
|
|
|
|
|
var is_bg = blk.css('background-color') == canvas_bg;
|
|
|
|
|
@ -1685,7 +1737,7 @@ function svg_edit_setup() {
|
|
|
|
|
// set language
|
|
|
|
|
var lang = $('#lang_select').val();
|
|
|
|
|
if(lang != curPrefs.lang) {
|
|
|
|
|
put_locale(svgCanvas, lang);
|
|
|
|
|
put_locale(Editor, lang);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// set icon size
|
|
|
|
|
@ -1704,7 +1756,7 @@ function svg_edit_setup() {
|
|
|
|
|
svgCanvas.setBackground(color, url);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var setIconSize = function(size) {
|
|
|
|
|
var setIconSize = Editor.setIconSize = function(size) {
|
|
|
|
|
if(size == curPrefs.size) return;
|
|
|
|
|
$.pref('iconsize', size);
|
|
|
|
|
$('#iconsize').val(size);
|
|
|
|
|
@ -2389,10 +2441,10 @@ function svg_edit_setup() {
|
|
|
|
|
};
|
|
|
|
|
populateLayers();
|
|
|
|
|
|
|
|
|
|
// function changeResolution(x,y) {
|
|
|
|
|
// var zoom = svgCanvas.getResolution().zoom;
|
|
|
|
|
// setResolution(x * zoom, y * zoom);
|
|
|
|
|
// }
|
|
|
|
|
// function changeResolution(x,y) {
|
|
|
|
|
// var zoom = svgCanvas.getResolution().zoom;
|
|
|
|
|
// setResolution(x * zoom, y * zoom);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
var centerCanvas = function() {
|
|
|
|
|
// this centers the canvas vertically in the workarea (horizontal handled in CSS)
|
|
|
|
|
@ -2441,21 +2493,21 @@ function svg_edit_setup() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// function setResolution(w, h, center) {
|
|
|
|
|
// updateCanvas();
|
|
|
|
|
// // w-=0; h-=0;
|
|
|
|
|
// // $('#svgcanvas').css( { 'width': w, 'height': h } );
|
|
|
|
|
// // $('#canvas_width').val(w);
|
|
|
|
|
// // $('#canvas_height').val(h);
|
|
|
|
|
// //
|
|
|
|
|
// // if(center) {
|
|
|
|
|
// // var w_area = workarea;
|
|
|
|
|
// // var scroll_y = h/2 - w_area.height()/2;
|
|
|
|
|
// // var scroll_x = w/2 - w_area.width()/2;
|
|
|
|
|
// // w_area[0].scrollTop = scroll_y;
|
|
|
|
|
// // w_area[0].scrollLeft = scroll_x;
|
|
|
|
|
// // }
|
|
|
|
|
// }
|
|
|
|
|
// function setResolution(w, h, center) {
|
|
|
|
|
// updateCanvas();
|
|
|
|
|
// // w-=0; h-=0;
|
|
|
|
|
// // $('#svgcanvas').css( { 'width': w, 'height': h } );
|
|
|
|
|
// // $('#canvas_width').val(w);
|
|
|
|
|
// // $('#canvas_height').val(h);
|
|
|
|
|
// //
|
|
|
|
|
// // if(center) {
|
|
|
|
|
// // var w_area = workarea;
|
|
|
|
|
// // var scroll_y = h/2 - w_area.height()/2;
|
|
|
|
|
// // var scroll_x = w/2 - w_area.width()/2;
|
|
|
|
|
// // w_area[0].scrollTop = scroll_y;
|
|
|
|
|
// // w_area[0].scrollLeft = scroll_x;
|
|
|
|
|
// // }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
$('#resolution').change(function(){
|
|
|
|
|
var wh = $('#canvas_width,#canvas_height');
|
|
|
|
|
@ -2519,8 +2571,8 @@ function svg_edit_setup() {
|
|
|
|
|
{sel:'#tool_ungroup', fn: clickGroup, evt: 'click'},
|
|
|
|
|
{sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'},
|
|
|
|
|
// these two lines are required to make Opera work properly with the flyout mechanism
|
|
|
|
|
// {sel:'#tools_rect_show', fn: clickRect, evt: 'click'},
|
|
|
|
|
// {sel:'#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
|
|
|
|
|
// {sel:'#tools_rect_show', fn: clickRect, evt: 'click'},
|
|
|
|
|
// {sel:'#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
|
|
|
|
|
{sel:'#tool_bold', fn: clickBold, evt: 'mousedown'},
|
|
|
|
|
{sel:'#tool_italic', fn: clickItalic, evt: 'mousedown'},
|
|
|
|
|
{sel:'#sidepanel_handle', fn: toggleSidePanel, key: [modKey+'X']},
|
|
|
|
|
@ -2670,52 +2722,6 @@ function svg_edit_setup() {
|
|
|
|
|
$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });
|
|
|
|
|
$('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom });
|
|
|
|
|
|
|
|
|
|
svgCanvas.setIconSize = setIconSize;
|
|
|
|
|
|
|
|
|
|
svgCanvas.setLang = function(lang, strings) {
|
|
|
|
|
curPrefs.lang = lang;
|
|
|
|
|
$.pref('lang', lang);
|
|
|
|
|
$('#lang_select').val(lang);
|
|
|
|
|
if(strings) {
|
|
|
|
|
// $.extend will only replace the given strings
|
|
|
|
|
var oldLayerName = $('#layerlist tr.layersel td.layername').text();
|
|
|
|
|
var rename_layer = (oldLayerName == uiStrings.layer + ' 1');
|
|
|
|
|
|
|
|
|
|
$.extend(uiStrings,strings);
|
|
|
|
|
svgCanvas.setUiStrings(strings);
|
|
|
|
|
Actions.setTitles();
|
|
|
|
|
|
|
|
|
|
if(rename_layer) {
|
|
|
|
|
svgCanvas.renameCurrentLayer(uiStrings.layer + ' 1');
|
|
|
|
|
populateLayers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svgCanvas.runExtensions("langChanged", lang);
|
|
|
|
|
|
|
|
|
|
// Update flyout tooltips
|
|
|
|
|
setFlyoutTitles();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Extension mechanisms must call setCustomHandlers with two functions: opts.open and opts.save
|
|
|
|
|
// opts.open's responsibilities are:
|
|
|
|
|
// - invoke a file chooser dialog in 'open' mode
|
|
|
|
|
// - let user pick a SVG file
|
|
|
|
|
// - calls setCanvas.setSvgString() with the string contents of that file
|
|
|
|
|
// opts.save's responsibilities are:
|
|
|
|
|
// - 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
|
|
|
|
|
svgCanvas.setCustomHandlers = function(opts) {
|
|
|
|
|
if(opts.open) {
|
|
|
|
|
$('#tool_open').show();
|
|
|
|
|
svgCanvas.open = opts.open;
|
|
|
|
|
}
|
|
|
|
|
if(opts.save) {
|
|
|
|
|
svgCanvas.bind("saved", opts.save);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
|
|
@ -2761,8 +2767,9 @@ function svg_edit_setup() {
|
|
|
|
|
y: w_area[0].scrollTop + h_orig/2
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
w = Math.max(w_orig, res.w*3*zoom);
|
|
|
|
|
h = Math.max(h_orig, res.h*3*zoom);
|
|
|
|
|
var multi = curConfig.canvas_expansion;
|
|
|
|
|
w = Math.max(w_orig, res.w * multi * zoom);
|
|
|
|
|
h = Math.max(h_orig, res.h * multi * zoom);
|
|
|
|
|
|
|
|
|
|
if(w == w_orig && h == h_orig) {
|
|
|
|
|
workarea.css('overflow','hidden');
|
|
|
|
|
@ -2809,18 +2816,156 @@ function svg_edit_setup() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
|
// $(function() {
|
|
|
|
|
updateCanvas(true);
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// var revnums = "svg-editor.js ($Rev: 1457 $) ";
|
|
|
|
|
// revnums += svgCanvas.getVersion();
|
|
|
|
|
// $('#copyright')[0].setAttribute("title", revnums);
|
|
|
|
|
|
|
|
|
|
var good_langs = [];
|
|
|
|
|
|
|
|
|
|
$('#lang_select option').each(function() {
|
|
|
|
|
good_langs.push(this.value);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// var revnums = "svg-editor.js ($Rev: 1452 $) ";
|
|
|
|
|
// revnums += svgCanvas.getVersion();
|
|
|
|
|
// $('#copyright')[0].setAttribute("title", revnums);
|
|
|
|
|
return svgCanvas;
|
|
|
|
|
};
|
|
|
|
|
// var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
|
|
|
|
|
put_locale(Editor, null, good_langs);
|
|
|
|
|
|
|
|
|
|
// This process starts before document.ready so the icons appear ASAP
|
|
|
|
|
(function() {
|
|
|
|
|
try{
|
|
|
|
|
json_encode = function(obj){
|
|
|
|
|
//simple partial JSON encoder implementation
|
|
|
|
|
if(window.JSON && JSON.stringify) return JSON.stringify(obj);
|
|
|
|
|
var enc = arguments.callee; //for purposes of recursion
|
|
|
|
|
if(typeof obj == "boolean" || typeof obj == "number"){
|
|
|
|
|
return obj+'' //should work...
|
|
|
|
|
}else if(typeof obj == "string"){
|
|
|
|
|
//a large portion of this is stolen from Douglas Crockford's json2.js
|
|
|
|
|
return '"'+
|
|
|
|
|
obj.replace(
|
|
|
|
|
/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g
|
|
|
|
|
, function (a) {
|
|
|
|
|
return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
|
|
|
|
})
|
|
|
|
|
+'"'; //note that this isn't quite as purtyful as the usualness
|
|
|
|
|
}else if(obj.length){ //simple hackish test for arrayish-ness
|
|
|
|
|
for(var i = 0; i < obj.length; i++){
|
|
|
|
|
obj[i] = enc(obj[i]); //encode every sub-thingy on top
|
|
|
|
|
}
|
|
|
|
|
return "["+obj.join(",")+"]";
|
|
|
|
|
}else{
|
|
|
|
|
var pairs = []; //pairs will be stored here
|
|
|
|
|
for(var k in obj){ //loop through thingys
|
|
|
|
|
pairs.push(enc(k)+":"+enc(obj[k])); //key: value
|
|
|
|
|
}
|
|
|
|
|
return "{"+pairs.join(",")+"}" //wrap in the braces
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
window.addEventListener("message", function(e){
|
|
|
|
|
var cbid = parseInt(e.data.substr(0, e.data.indexOf(";")));
|
|
|
|
|
try{
|
|
|
|
|
e.source.postMessage("SVGe"+cbid+";"+json_encode(eval(e.data)), e.origin);
|
|
|
|
|
}catch(err){
|
|
|
|
|
e.source.postMessage("SVGe"+cbid+";error:"+err.message, e.origin);
|
|
|
|
|
}
|
|
|
|
|
}, false)
|
|
|
|
|
}catch(err){
|
|
|
|
|
window.embed_error = err;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// For Compatibility with older extensions
|
|
|
|
|
$(function() {
|
|
|
|
|
window.svgCanvas = svgCanvas;
|
|
|
|
|
svgCanvas.ready = svgEditor.ready;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Editor.setLang = function(lang, strings) {
|
|
|
|
|
$.pref('lang', lang);
|
|
|
|
|
$('#lang_select').val(lang);
|
|
|
|
|
if(strings) {
|
|
|
|
|
// $.extend will only replace the given strings
|
|
|
|
|
var oldLayerName = $('#layerlist tr.layersel td.layername').text();
|
|
|
|
|
var rename_layer = (oldLayerName == uiStrings.layer + ' 1');
|
|
|
|
|
|
|
|
|
|
$.extend(uiStrings,strings);
|
|
|
|
|
svgCanvas.setUiStrings(strings);
|
|
|
|
|
Actions.setTitles();
|
|
|
|
|
|
|
|
|
|
if(rename_layer) {
|
|
|
|
|
svgCanvas.renameCurrentLayer(uiStrings.layer + ' 1');
|
|
|
|
|
populateLayers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svgCanvas.runExtensions("langChanged", lang);
|
|
|
|
|
|
|
|
|
|
// Update flyout tooltips
|
|
|
|
|
setFlyoutTitles();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var callbacks = [];
|
|
|
|
|
|
|
|
|
|
Editor.ready = function(cb) {
|
|
|
|
|
if(!is_ready) {
|
|
|
|
|
callbacks.push(cb);
|
|
|
|
|
} else {
|
|
|
|
|
cb();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Editor.runCallbacks = function() {
|
|
|
|
|
$.each(callbacks, function() {
|
|
|
|
|
this();
|
|
|
|
|
});
|
|
|
|
|
is_ready = true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Editor.loadFromString = function(str) {
|
|
|
|
|
Editor.ready(function() {
|
|
|
|
|
svgCanvas.setSvgString(str);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Editor.loadFromURL = function(url) {
|
|
|
|
|
Editor.ready(function() {
|
|
|
|
|
$.ajax({
|
|
|
|
|
'url': url,
|
|
|
|
|
'dataType': 'text',
|
|
|
|
|
success: svgCanvas.setSvgString,
|
|
|
|
|
error: function(xhr) {
|
|
|
|
|
if(xhr.responseText) {
|
|
|
|
|
svgCanvas.setSvgString(xhr.responseText);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Editor.loadFromDataURI = function(str) {
|
|
|
|
|
Editor.ready(function() {
|
|
|
|
|
svgCanvas.setSvgString(str);
|
|
|
|
|
var pre = 'data:image/svg+xml;base64,';
|
|
|
|
|
var src = str.substring(pre.length);
|
|
|
|
|
svgCanvas.setSvgString(Utils.decode64(src));
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Editor.addExtension = function() {
|
|
|
|
|
var args = arguments;
|
|
|
|
|
$(function() {
|
|
|
|
|
svgCanvas.addExtension.apply(this, args);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return Editor;
|
|
|
|
|
}();
|
|
|
|
|
|
|
|
|
|
// This process starts before document.ready so the icons appear ASAP
|
|
|
|
|
$.svgIcons('images/svg_edit_icons.svg', {
|
|
|
|
|
w:24, h:24,
|
|
|
|
|
id_match: false,
|
|
|
|
|
@ -2956,10 +3101,10 @@ function svg_edit_setup() {
|
|
|
|
|
var min_height = tleft.offset().top + tleft.outerHeight();
|
|
|
|
|
var size = $.pref('iconsize');
|
|
|
|
|
if(size && size != 'm') {
|
|
|
|
|
svgCanvas.setIconSize(size);
|
|
|
|
|
svgEditor.setIconSize(size);
|
|
|
|
|
} else if($(window).height() < min_height) {
|
|
|
|
|
// Make smaller
|
|
|
|
|
svgCanvas.setIconSize('s');
|
|
|
|
|
svgEditor.setIconSize('s');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Look for any missing flyout icons from plugins
|
|
|
|
|
@ -2974,81 +3119,24 @@ function svg_edit_setup() {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
svgEditor.runCallbacks();
|
|
|
|
|
|
|
|
|
|
// Load source if given
|
|
|
|
|
var loc = document.location.href;
|
|
|
|
|
if(loc.indexOf('source=data') != -1) {
|
|
|
|
|
var pre = 'source=data:image/svg+xml;base64,';
|
|
|
|
|
var pre = 'source=';
|
|
|
|
|
var src = loc.substring(loc.indexOf(pre) + pre.length);
|
|
|
|
|
svgCanvas.setSvgString(Utils.decode64(src));
|
|
|
|
|
svgEditor.loadFromDataURI(src);
|
|
|
|
|
}
|
|
|
|
|
else if(loc.indexOf('url=') != -1) {
|
|
|
|
|
var pre = 'url=';
|
|
|
|
|
var url = loc.substring(loc.indexOf(pre) + pre.length);
|
|
|
|
|
$.ajax({
|
|
|
|
|
'url': url,
|
|
|
|
|
'dataType': 'text',
|
|
|
|
|
success: svgCanvas.setSvgString,
|
|
|
|
|
error: function(xhr) {
|
|
|
|
|
if(xhr.responseText) {
|
|
|
|
|
svgCanvas.setSvgString(xhr.responseText);
|
|
|
|
|
}
|
|
|
|
|
svgEditor.loadFromURL(url);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svgCanvas.runCallback();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}());
|
|
|
|
|
|
|
|
|
|
// This happens when the page is loaded
|
|
|
|
|
$(function() {
|
|
|
|
|
svgCanvas = svg_edit_setup();
|
|
|
|
|
var good_langs = [];
|
|
|
|
|
$('#lang_select option').each(function() {
|
|
|
|
|
good_langs.push(this.value);
|
|
|
|
|
});
|
|
|
|
|
put_locale(svgCanvas, null, good_langs);
|
|
|
|
|
// Run init once DOM is loaded
|
|
|
|
|
$(svgEditor.init);
|
|
|
|
|
|
|
|
|
|
try{
|
|
|
|
|
json_encode = function(obj){
|
|
|
|
|
//simple partial JSON encoder implementation
|
|
|
|
|
if(window.JSON && JSON.stringify) return JSON.stringify(obj);
|
|
|
|
|
var enc = arguments.callee; //for purposes of recursion
|
|
|
|
|
if(typeof obj == "boolean" || typeof obj == "number"){
|
|
|
|
|
return obj+'' //should work...
|
|
|
|
|
}else if(typeof obj == "string"){
|
|
|
|
|
//a large portion of this is stolen from Douglas Crockford's json2.js
|
|
|
|
|
return '"'+
|
|
|
|
|
obj.replace(
|
|
|
|
|
/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g
|
|
|
|
|
, function (a) {
|
|
|
|
|
return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
|
|
|
|
})
|
|
|
|
|
+'"'; //note that this isn't quite as purtyful as the usualness
|
|
|
|
|
}else if(obj.length){ //simple hackish test for arrayish-ness
|
|
|
|
|
for(var i = 0; i < obj.length; i++){
|
|
|
|
|
obj[i] = enc(obj[i]); //encode every sub-thingy on top
|
|
|
|
|
}
|
|
|
|
|
return "["+obj.join(",")+"]";
|
|
|
|
|
}else{
|
|
|
|
|
var pairs = []; //pairs will be stored here
|
|
|
|
|
for(var k in obj){ //loop through thingys
|
|
|
|
|
pairs.push(enc(k)+":"+enc(obj[k])); //key: value
|
|
|
|
|
}
|
|
|
|
|
return "{"+pairs.join(",")+"}" //wrap in the braces
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
window.addEventListener("message", function(e){
|
|
|
|
|
var cbid = parseInt(e.data.substr(0, e.data.indexOf(";")));
|
|
|
|
|
try{
|
|
|
|
|
e.source.postMessage("SVGe"+cbid+";"+json_encode(eval(e.data)), e.origin);
|
|
|
|
|
}catch(err){
|
|
|
|
|
e.source.postMessage("SVGe"+cbid+";error:"+err.message, e.origin);
|
|
|
|
|
}
|
|
|
|
|
}, false)
|
|
|
|
|
}catch(err){
|
|
|
|
|
window.embed_error = err;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
|
Jacques Distler
