Update to latet SVG-Edit API
This commit is contained in:
Jacques Distler
parent
7e7ae4c6f0
commit
9636cab11e
6 changed files with 866 additions and 721 deletions
|
|
@ -83,28 +83,16 @@ function setupSVGedit(path){
|
|||
SVGeditButton.disabled = true;
|
||||
Event.observe(SVGeditButton, 'click', function(){
|
||||
var editor = window.open(path, 'Edit SVG graphic', 'status=1,resizable=1,scrollbars=1');
|
||||
if (selected) {
|
||||
editor.addEventListener("load", function() {
|
||||
editor.svgCanvas.setCustomHandlers({
|
||||
editor.svgEditor.setCustomHandlers({
|
||||
'save': function(window,svg){
|
||||
window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
editor.svgCanvas.randomizeIds();
|
||||
editor.svgCanvas.setSvgString(selected);
|
||||
editor.svgEditor.randomizeIds();
|
||||
if (selected) editor.svgEditor.loadFromString(selected);
|
||||
}, true);
|
||||
} else {
|
||||
editor.addEventListener("load", function() {
|
||||
editor.svgCanvas.setCustomHandlers({
|
||||
'save': function(window,svg){
|
||||
window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
editor.svgCanvas.randomizeIds();
|
||||
}, true);
|
||||
}
|
||||
SVGeditButton.disabled = true;
|
||||
SVGeditButton.value = 'Create SVG graphic';
|
||||
editor.focus();
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
svgCanvas.addExtension("Connector", function(S) {
|
||||
svgEditor.addExtension("Connector", function(S) {
|
||||
var svgcontent = S.svgcontent,
|
||||
svgroot = S.svgroot,
|
||||
getNextId = S.getNextId,
|
||||
|
|
@ -309,7 +308,7 @@ $(function() {
|
|||
"id": getNextId(),
|
||||
"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
|
||||
"stroke": '#000',
|
||||
"stroke-width": 2,
|
||||
"stroke-width": 3,
|
||||
"fill": "none",
|
||||
"opacity": .5,
|
||||
"style": "pointer-events:none"
|
||||
|
|
@ -553,4 +552,3 @@ $(function() {
|
|||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -269,9 +269,15 @@
|
|||
|
||||
|
||||
<g id="new_image">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
|
||||
<circle stroke-width="0" stroke="#a0a0a0" fill="#fff175" id="svg_65" r="3.83333" cy="6.24769" cx="19.16813"/>
|
||||
<circle stroke-width="0" stroke="#a0a0a0" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
|
||||
<defs>
|
||||
<radialGradient id="svg_9" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0.1" stop-color="#ffe500" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ffff00" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
* Copyright(c) 2009 Narendra Sisodya
|
||||
*
|
||||
*/
|
||||
var put_locale = function(svgCanvas, given_param, good_langs){
|
||||
var put_locale = function(svgEditor, given_param, good_langs){
|
||||
var lang_param;
|
||||
|
||||
if(given_param) {
|
||||
|
|
@ -21,7 +21,6 @@ var put_locale = function(svgCanvas, given_param, good_langs){
|
|||
if (lang_param == "")
|
||||
return;
|
||||
}
|
||||
lang_param = String(lang_param);
|
||||
|
||||
// Set to English if language is not in list of good langs
|
||||
if($.inArray(lang_param, good_langs) == -1) {
|
||||
|
|
@ -36,7 +35,7 @@ var put_locale = function(svgCanvas, given_param, good_langs){
|
|||
|
||||
var processFile = function(data){
|
||||
var LangData = eval(data), js_strings;
|
||||
var more = svgCanvas.runExtensions("addLangData", lang_param, true);
|
||||
var more = svgEditor.canvas.runExtensions("addLangData", lang_param, true);
|
||||
$.each(more, function(i, m) {
|
||||
if(m.data) {
|
||||
LangData = $.merge(LangData, m.data);
|
||||
|
|
@ -61,7 +60,7 @@ var put_locale = function(svgCanvas, given_param, good_langs){
|
|||
js_strings = data.js_strings;
|
||||
}
|
||||
});
|
||||
svgCanvas.setLang(lang_param, js_strings);
|
||||
svgEditor.setLang(lang_param, js_strings);
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
|
|
|
|||
|
|
@ -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.';
|
||||
|
|
@ -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);
|
||||
|
|
@ -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: 1452 $) ";
|
||||
// var revnums = "svg-editor.js ($Rev: 1457 $) ";
|
||||
// revnums += svgCanvas.getVersion();
|
||||
// $('#copyright')[0].setAttribute("title", revnums);
|
||||
return svgCanvas;
|
||||
|
||||
var good_langs = [];
|
||||
|
||||
$('#lang_select option').each(function() {
|
||||
good_langs.push(this.value);
|
||||
});
|
||||
|
||||
// var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
|
||||
put_locale(Editor, null, good_langs);
|
||||
|
||||
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
|
||||
(function() {
|
||||
$.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();
|
||||
}
|
||||
});
|
||||
}());
|
||||
// Run init once DOM is loaded
|
||||
$(svgEditor.init);
|
||||
|
||||
// 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);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ if(window.opera) {
|
|||
}());
|
||||
|
||||
|
||||
function SvgCanvas(container)
|
||||
$.SvgCanvas = function(container, config)
|
||||
{
|
||||
var isOpera = !!window.opera,
|
||||
isWebkit = navigator.userAgent.indexOf("AppleWebKit") != -1,
|
||||
|
|
@ -169,6 +169,10 @@ var isOpera = !!window.opera,
|
|||
"pathCtrlPtTooltip":"Drag control point to adjust curve properties"
|
||||
},
|
||||
|
||||
curConfig = {
|
||||
show_outside_canvas: true
|
||||
},
|
||||
|
||||
toXml = function(str) {
|
||||
return $('<p/>').text(str).html();
|
||||
},
|
||||
|
|
@ -177,6 +181,10 @@ var isOpera = !!window.opera,
|
|||
return $('<p/>').html(str).text();
|
||||
};
|
||||
|
||||
if(config) {
|
||||
$.extend(curConfig, config);
|
||||
}
|
||||
|
||||
var unit_types = {'em':0,'ex':0,'px':1,'cm':35.43307,'mm':3.543307,'in':90,'pt':1.25,'pc':15,'%':0};
|
||||
|
||||
// These command objects are used for the Undo/Redo stack
|
||||
|
|
@ -992,7 +1000,7 @@ function BatchCommand(text) {
|
|||
height: 480,
|
||||
x: 640,
|
||||
y: 480,
|
||||
overflow: 'visible',
|
||||
overflow: curConfig.show_outside_canvas?'visible':'hidden',
|
||||
xmlns: svgns,
|
||||
"xmlns:se": se_ns,
|
||||
"xmlns:xlink": xlinkns
|
||||
|
|
@ -3899,7 +3907,10 @@ function BatchCommand(text) {
|
|||
|
||||
if(update) {
|
||||
var prev = seg.prev;
|
||||
if(!prev) return segLine;
|
||||
if(!prev) {
|
||||
segLine.setAttribute("display", "none");
|
||||
return segLine;
|
||||
}
|
||||
|
||||
var pt = getGripPt(prev);
|
||||
// Set start point
|
||||
|
|
@ -5096,6 +5107,7 @@ function BatchCommand(text) {
|
|||
}
|
||||
else if (current_mode == "pathedit") {
|
||||
this.clear();
|
||||
this.toSelectMode();
|
||||
}
|
||||
},
|
||||
getNodePoint: function() {
|
||||
|
|
@ -5143,8 +5155,64 @@ function BatchCommand(text) {
|
|||
path.deleteSeg(pt);
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
var cleanup = function() {
|
||||
var segList = path.elem.pathSegList;
|
||||
var len = segList.numberOfItems;
|
||||
|
||||
var remItems = function(pos, count) {
|
||||
while(count--) {
|
||||
segList.removeItem(pos);
|
||||
}
|
||||
}
|
||||
|
||||
if(len <= 1) return true;
|
||||
|
||||
while(len--) {
|
||||
var item = segList.getItem(len);
|
||||
if(item.pathSegType === 1) {
|
||||
var prev = segList.getItem(len-1);
|
||||
var nprev = segList.getItem(len-2);
|
||||
if(prev.pathSegType === 2) {
|
||||
remItems(len-1, 2);
|
||||
cleanup();
|
||||
break;
|
||||
} else if(nprev.pathSegType === 2) {
|
||||
remItems(len-2, 3);
|
||||
cleanup();
|
||||
break;
|
||||
}
|
||||
|
||||
} else if(item.pathSegType === 2) {
|
||||
if(len > 0) {
|
||||
var prev_type = segList.getItem(len-1).pathSegType;
|
||||
// Path has M M
|
||||
if(prev_type === 2) {
|
||||
remItems(len-1, 1);
|
||||
cleanup();
|
||||
break;
|
||||
// Entire path ends with Z M
|
||||
} else if(prev_type === 1 && segList.numberOfItems-1 === len) {
|
||||
remItems(len, 1);
|
||||
cleanup();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
cleanup();
|
||||
|
||||
// Completely delete a path with 1 or 0 segments
|
||||
if(path.elem.pathSegList.numberOfItems <= 1) {
|
||||
pathActions.toSelectMode(path.elem);
|
||||
canvas.deleteSelectedElements();
|
||||
return;
|
||||
}
|
||||
|
||||
path.init();
|
||||
var sel_pt = sel_pts[0]-1 > 0 ? sel_pts[0]-1 : 1;
|
||||
|
||||
path.clearSelection();
|
||||
|
||||
|
|
@ -5689,7 +5757,7 @@ function BatchCommand(text) {
|
|||
|
||||
var attrs = {
|
||||
id: 'svgcontent',
|
||||
overflow: 'visible'
|
||||
overflow: curConfig.show_outside_canvas?'visible':'hidden'
|
||||
};
|
||||
|
||||
// determine proper size
|
||||
|
|
@ -6376,6 +6444,10 @@ function BatchCommand(text) {
|
|||
pathActions.linkControlPoints(linkPoints);
|
||||
}
|
||||
|
||||
this.getContentElem = function() { return svgcontent; };
|
||||
this.getRootElem = function() { return svgroot; };
|
||||
this.getSelectedElems = function() { return selectedElements; };
|
||||
|
||||
this.getResolution = function() {
|
||||
// var vb = svgcontent.getAttribute("viewBox").split(' ');
|
||||
// return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
|
||||
|
|
@ -8035,25 +8107,19 @@ function BatchCommand(text) {
|
|||
// Function: getVersion
|
||||
// Returns a string which describes the revision number of SvgCanvas.
|
||||
this.getVersion = function() {
|
||||
return "svgcanvas.js ($Rev: 1454 $)";
|
||||
return "svgcanvas.js ($Rev: 1456 $)";
|
||||
};
|
||||
|
||||
this.setUiStrings = function(strs) {
|
||||
$.extend(uiStrings, strs);
|
||||
}
|
||||
|
||||
this.setConfig = function(opts) {
|
||||
$.extend(curConfig, opts);
|
||||
}
|
||||
|
||||
this.clear();
|
||||
|
||||
this.ready = function(cb) {
|
||||
this.callback = cb;
|
||||
}
|
||||
|
||||
this.runCallback = function() {
|
||||
if(this.callback) {
|
||||
this.callback();
|
||||
}
|
||||
}
|
||||
|
||||
function getElem(id) {
|
||||
if(svgroot.querySelector) {
|
||||
// querySelector lookup
|
||||
|
|
|
|||
Loading…
Reference in a new issue