deac/instiki
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update to latet SVG-Edit API

Browse source
This commit is contained in:
Jacques Distler 2010-03-12 03:50:23 -06:00
parent 7e7ae4c6f0
commit 9636cab11e
6 changed files with 866 additions and 721 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/javascripts/page_helper.js
View file

@ -83,28 +83,16 @@ function setupSVGedit(path){
SVGeditButton.disabled = true; SVGeditButton.disabled = true;
Event.observe(SVGeditButton, 'click', function(){ Event.observe(SVGeditButton, 'click', function(){
var editor = window.open(path, 'Edit SVG graphic', 'status=1,resizable=1,scrollbars=1'); var editor = window.open(path, 'Edit SVG graphic', 'status=1,resizable=1,scrollbars=1');
if (selected) {
editor.addEventListener("load", function() { editor.addEventListener("load", function() {
editor.svgCanvas.setCustomHandlers({ editor.svgEditor.setCustomHandlers({
'save': function(window,svg){ 'save': function(window,svg){
window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host); window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
window.close(); window.close();
} }
}); });
editor.svgCanvas.randomizeIds(); editor.svgEditor.randomizeIds();
editor.svgCanvas.setSvgString(selected); if (selected) editor.svgEditor.loadFromString(selected);
}, true); }, 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.disabled = true;
SVGeditButton.value = 'Create SVG graphic'; SVGeditButton.value = 'Create SVG graphic';
editor.focus(); editor.focus();

6
public/svg-edit/editor/extensions/ext-connector.js
View file

@ -7,8 +7,7 @@
* *
*/ */
$(function() { svgEditor.addExtension("Connector", function(S) {
svgCanvas.addExtension("Connector", function(S) {
var svgcontent = S.svgcontent, var svgcontent = S.svgcontent,
svgroot = S.svgroot, svgroot = S.svgroot,
getNextId = S.getNextId, getNextId = S.getNextId,
@ -309,7 +308,7 @@ $(function() {
"id": getNextId(), "id": getNextId(),
"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y), "points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
"stroke": '#000', "stroke": '#000',
"stroke-width": 2, "stroke-width": 3,
"fill": "none", "fill": "none",
"opacity": .5, "opacity": .5,
"style": "pointer-events:none" "style": "pointer-events:none"
@ -553,4 +552,3 @@ $(function() {
} }
}; };
}); });
});

10
public/svg-edit/editor/images/svg_edit_icons.svg
View file

@ -269,9 +269,15 @@
<g id="new_image"> <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"/> <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> </svg>
</g> </g>

7
public/svg-edit/editor/locale/locale.js
View file

@ -6,7 +6,7 @@
* Copyright(c) 2009 Narendra Sisodya * 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; var lang_param;
if(given_param) { if(given_param) {
@ -21,7 +21,6 @@ var put_locale = function(svgCanvas, given_param, good_langs){
if (lang_param == "") if (lang_param == "")
return; return;
} }
lang_param = String(lang_param);
// Set to English if language is not in list of good langs // Set to English if language is not in list of good langs
if($.inArray(lang_param, good_langs) == -1) { 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 processFile = function(data){
var LangData = eval(data), js_strings; 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) { $.each(more, function(i, m) {
if(m.data) { if(m.data) {
LangData = $.merge(LangData, 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; js_strings = data.js_strings;
} }
}); });
svgCanvas.setLang(lang_param, js_strings); svgEditor.setLang(lang_param, js_strings);
} }
$.ajax({ $.ajax({

372
public/svg-edit/editor/svg-editor.js
View file

@ -10,8 +10,30 @@
* *
*/ */
function svg_edit_setup() { (function() {
var uiStrings = {
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', 'invalidAttrValGiven':'Invalid value given',
'noContentToFitTo':'No content to fit to', 'noContentToFitTo':'No content to fit to',
'layer':"Layer", 'layer':"Layer",
@ -31,16 +53,9 @@ function svg_edit_setup() {
'key_down':'Down', 'key_down':'Down',
'key_backspace':'Backspace', 'key_backspace':'Backspace',
'key_del':'Del' '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"], var curPrefs = {}; //$.extend({}, defaultPrefs);
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");
// Store and retrieve preferences // Store and retrieve preferences
$.pref = function(key, val) { $.pref = function(key, val) {
@ -64,7 +79,7 @@ function svg_edit_setup() {
if(storage) { if(storage) {
if(store) storage.setItem(key, val); 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) { } else if(window.widget) {
if(store) widget.setPreferenceForKey(val, key); if(store) widget.setPreferenceForKey(val, key);
else return widget.preferenceForKey(key); else return widget.preferenceForKey(key);
@ -81,13 +96,50 @@ function svg_edit_setup() {
} }
} }
var curPrefs = { Editor.setConfig = function(opts) {
lang:'en', $.each(opts, function(key, val) {
iconsize:'m', // Only allow prefs defined in defaultPrefs or curConfig
bkgd_color:'#FFF', if(key in defaultPrefs) {
bkgd_url:'', $.pref(key, val);
img_save:'embed' } 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 // This sets up alternative dialog boxes. They mostly work the same way as
// their UI counterparts, expect instead of returning the result, a callback // 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)); 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 // 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") { if(done !== "all") {
var note = 'Select "Save As..." in your browser to save this image as an SVG file.'; 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 // set language
var lang = $('#lang_select').val(); var lang = $('#lang_select').val();
if(lang != curPrefs.lang) { if(lang != curPrefs.lang) {
put_locale(svgCanvas, lang); put_locale(Editor, lang);
} }
// set icon size // set icon size
@ -1704,7 +1756,7 @@ function svg_edit_setup() {
svgCanvas.setBackground(color, url); svgCanvas.setBackground(color, url);
} }
var setIconSize = function(size) { var setIconSize = Editor.setIconSize = function(size) {
if(size == curPrefs.size) return; if(size == curPrefs.size) return;
$.pref('iconsize', size); $.pref('iconsize', size);
$('#iconsize').val(size); $('#iconsize').val(size);
@ -2670,52 +2722,6 @@ function svg_edit_setup() {
$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity }); $('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });
$('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom }); $('#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/ // 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 // 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 // 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 y: w_area[0].scrollTop + h_orig/2
}; };
w = Math.max(w_orig, res.w*3*zoom); var multi = curConfig.canvas_expansion;
h = Math.max(h_orig, res.h*3*zoom); 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) { if(w == w_orig && h == h_orig) {
workarea.css('overflow','hidden'); workarea.css('overflow','hidden');
@ -2809,18 +2816,156 @@ function svg_edit_setup() {
} }
} }
$(function() { // $(function() {
updateCanvas(true); updateCanvas(true);
}); // });
// var revnums = "svg-editor.js ($Rev: 1452 $) "; // var revnums = "svg-editor.js ($Rev: 1457 $) ";
// revnums += svgCanvas.getVersion(); // revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums); // $('#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 // This process starts before document.ready so the icons appear ASAP
(function() {
$.svgIcons('images/svg_edit_icons.svg', { $.svgIcons('images/svg_edit_icons.svg', {
w:24, h:24, w:24, h:24,
id_match: false, id_match: false,
@ -2956,10 +3101,10 @@ function svg_edit_setup() {
var min_height = tleft.offset().top + tleft.outerHeight(); var min_height = tleft.offset().top + tleft.outerHeight();
var size = $.pref('iconsize'); var size = $.pref('iconsize');
if(size && size != 'm') { if(size && size != 'm') {
svgCanvas.setIconSize(size); svgEditor.setIconSize(size);
} else if($(window).height() < min_height) { } else if($(window).height() < min_height) {
// Make smaller // Make smaller
svgCanvas.setIconSize('s'); svgEditor.setIconSize('s');
} }
// Look for any missing flyout icons from plugins // Look for any missing flyout icons from plugins
@ -2974,81 +3119,24 @@ function svg_edit_setup() {
} }
}); });
svgEditor.runCallbacks();
// Load source if given // Load source if given
var loc = document.location.href; var loc = document.location.href;
if(loc.indexOf('source=data') != -1) { 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); var src = loc.substring(loc.indexOf(pre) + pre.length);
svgCanvas.setSvgString(Utils.decode64(src)); svgEditor.loadFromDataURI(src);
} }
else if(loc.indexOf('url=') != -1) { else if(loc.indexOf('url=') != -1) {
var pre = 'url='; var pre = 'url=';
var url = loc.substring(loc.indexOf(pre) + pre.length); var url = loc.substring(loc.indexOf(pre) + pre.length);
$.ajax({ svgEditor.loadFromURL(url);
'url': url,
'dataType': 'text',
success: svgCanvas.setSvgString,
error: function(xhr) {
if(xhr.responseText) {
svgCanvas.setSvgString(xhr.responseText);
} }
} }
}); });
}
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;
}
});

98
public/svg-edit/editor/svgcanvas.js
View file

@ -82,7 +82,7 @@ if(window.opera) {
}()); }());
function SvgCanvas(container) $.SvgCanvas = function(container, config)
{ {
var isOpera = !!window.opera, var isOpera = !!window.opera,
isWebkit = navigator.userAgent.indexOf("AppleWebKit") != -1, isWebkit = navigator.userAgent.indexOf("AppleWebKit") != -1,
@ -169,6 +169,10 @@ var isOpera = !!window.opera,
"pathCtrlPtTooltip":"Drag control point to adjust curve properties" "pathCtrlPtTooltip":"Drag control point to adjust curve properties"
}, },
curConfig = {
show_outside_canvas: true
},
toXml = function(str) { toXml = function(str) {
return $('<p/>').text(str).html(); return $('<p/>').text(str).html();
}, },
@ -177,6 +181,10 @@ var isOpera = !!window.opera,
return $('<p/>').html(str).text(); 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}; 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 // These command objects are used for the Undo/Redo stack
@ -992,7 +1000,7 @@ function BatchCommand(text) {
height: 480, height: 480,
x: 640, x: 640,
y: 480, y: 480,
overflow: 'visible', overflow: curConfig.show_outside_canvas?'visible':'hidden',
xmlns: svgns, xmlns: svgns,
"xmlns:se": se_ns, "xmlns:se": se_ns,
"xmlns:xlink": xlinkns "xmlns:xlink": xlinkns
@ -3899,7 +3907,10 @@ function BatchCommand(text) {
if(update) { if(update) {
var prev = seg.prev; var prev = seg.prev;
if(!prev) return segLine; if(!prev) {
segLine.setAttribute("display", "none");
return segLine;
}
var pt = getGripPt(prev); var pt = getGripPt(prev);
// Set start point // Set start point
@ -5096,6 +5107,7 @@ function BatchCommand(text) {
} }
else if (current_mode == "pathedit") { else if (current_mode == "pathedit") {
this.clear(); this.clear();
this.toSelectMode();
} }
}, },
getNodePoint: function() { getNodePoint: function() {
@ -5143,8 +5155,64 @@ function BatchCommand(text) {
path.deleteSeg(pt); 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(); path.init();
var sel_pt = sel_pts[0]-1 > 0 ? sel_pts[0]-1 : 1;
path.clearSelection(); path.clearSelection();
@ -5689,7 +5757,7 @@ function BatchCommand(text) {
var attrs = { var attrs = {
id: 'svgcontent', id: 'svgcontent',
overflow: 'visible' overflow: curConfig.show_outside_canvas?'visible':'hidden'
}; };
// determine proper size // determine proper size
@ -6376,6 +6444,10 @@ function BatchCommand(text) {
pathActions.linkControlPoints(linkPoints); pathActions.linkControlPoints(linkPoints);
} }
this.getContentElem = function() { return svgcontent; };
this.getRootElem = function() { return svgroot; };
this.getSelectedElems = function() { return selectedElements; };
this.getResolution = function() { this.getResolution = function() {
// var vb = svgcontent.getAttribute("viewBox").split(' '); // var vb = svgcontent.getAttribute("viewBox").split(' ');
// return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom}; // return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
@ -8035,25 +8107,19 @@ function BatchCommand(text) {
// Function: getVersion // Function: getVersion
// Returns a string which describes the revision number of SvgCanvas. // Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function() { this.getVersion = function() {
return "svgcanvas.js ($Rev: 1454 $)"; return "svgcanvas.js ($Rev: 1456 $)";
}; };
this.setUiStrings = function(strs) { this.setUiStrings = function(strs) {
$.extend(uiStrings, strs); $.extend(uiStrings, strs);
} }
this.setConfig = function(opts) {
$.extend(curConfig, opts);
}
this.clear(); this.clear();
this.ready = function(cb) {
this.callback = cb;
}
this.runCallback = function() {
if(this.callback) {
this.callback();
}
}
function getElem(id) { function getElem(id) {
if(svgroot.querySelector) { if(svgroot.querySelector) {
// querySelector lookup // querySelector lookup