New wave gadget
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@523 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Kevin Kwok
parent
833e29f743
commit
8eeb97176f
|
|
@ -0,0 +1,481 @@
|
|||
/*
|
||||
http://www.JSON.org/json2.js
|
||||
2009-08-17
|
||||
|
||||
Public Domain.
|
||||
|
||||
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
|
||||
|
||||
See http://www.JSON.org/js.html
|
||||
|
||||
This file creates a global JSON object containing two methods: stringify
|
||||
and parse.
|
||||
|
||||
JSON.stringify(value, replacer, space)
|
||||
value any JavaScript value, usually an object or array.
|
||||
|
||||
replacer an optional parameter that determines how object
|
||||
values are stringified for objects. It can be a
|
||||
function or an array of strings.
|
||||
|
||||
space an optional parameter that specifies the indentation
|
||||
of nested structures. If it is omitted, the text will
|
||||
be packed without extra whitespace. If it is a number,
|
||||
it will specify the number of spaces to indent at each
|
||||
level. If it is a string (such as '\t' or ' '),
|
||||
it contains the characters used to indent at each level.
|
||||
|
||||
This method produces a JSON text from a JavaScript value.
|
||||
|
||||
When an object value is found, if the object contains a toJSON
|
||||
method, its toJSON method will be called and the result will be
|
||||
stringified. A toJSON method does not serialize: it returns the
|
||||
value represented by the name/value pair that should be serialized,
|
||||
or undefined if nothing should be serialized. The toJSON method
|
||||
will be passed the key associated with the value, and this will be
|
||||
bound to the value
|
||||
|
||||
For example, this would serialize Dates as ISO strings.
|
||||
|
||||
Date.prototype.toJSON = function (key) {
|
||||
function f(n) {
|
||||
// Format integers to have at least two digits.
|
||||
return n < 10 ? '0' + n : n;
|
||||
}
|
||||
|
||||
return this.getUTCFullYear() + '-' +
|
||||
f(this.getUTCMonth() + 1) + '-' +
|
||||
f(this.getUTCDate()) + 'T' +
|
||||
f(this.getUTCHours()) + ':' +
|
||||
f(this.getUTCMinutes()) + ':' +
|
||||
f(this.getUTCSeconds()) + 'Z';
|
||||
};
|
||||
|
||||
You can provide an optional replacer method. It will be passed the
|
||||
key and value of each member, with this bound to the containing
|
||||
object. The value that is returned from your method will be
|
||||
serialized. If your method returns undefined, then the member will
|
||||
be excluded from the serialization.
|
||||
|
||||
If the replacer parameter is an array of strings, then it will be
|
||||
used to select the members to be serialized. It filters the results
|
||||
such that only members with keys listed in the replacer array are
|
||||
stringified.
|
||||
|
||||
Values that do not have JSON representations, such as undefined or
|
||||
functions, will not be serialized. Such values in objects will be
|
||||
dropped; in arrays they will be replaced with null. You can use
|
||||
a replacer function to replace those with JSON values.
|
||||
JSON.stringify(undefined) returns undefined.
|
||||
|
||||
The optional space parameter produces a stringification of the
|
||||
value that is filled with line breaks and indentation to make it
|
||||
easier to read.
|
||||
|
||||
If the space parameter is a non-empty string, then that string will
|
||||
be used for indentation. If the space parameter is a number, then
|
||||
the indentation will be that many spaces.
|
||||
|
||||
Example:
|
||||
|
||||
text = JSON.stringify(['e', {pluribus: 'unum'}]);
|
||||
// text is '["e",{"pluribus":"unum"}]'
|
||||
|
||||
|
||||
text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
|
||||
// text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
|
||||
|
||||
text = JSON.stringify([new Date()], function (key, value) {
|
||||
return this[key] instanceof Date ?
|
||||
'Date(' + this[key] + ')' : value;
|
||||
});
|
||||
// text is '["Date(---current time---)"]'
|
||||
|
||||
|
||||
JSON.parse(text, reviver)
|
||||
This method parses a JSON text to produce an object or array.
|
||||
It can throw a SyntaxError exception.
|
||||
|
||||
The optional reviver parameter is a function that can filter and
|
||||
transform the results. It receives each of the keys and values,
|
||||
and its return value is used instead of the original value.
|
||||
If it returns what it received, then the structure is not modified.
|
||||
If it returns undefined then the member is deleted.
|
||||
|
||||
Example:
|
||||
|
||||
// Parse the text. Values that look like ISO date strings will
|
||||
// be converted to Date objects.
|
||||
|
||||
myData = JSON.parse(text, function (key, value) {
|
||||
var a;
|
||||
if (typeof value === 'string') {
|
||||
a =
|
||||
/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
|
||||
if (a) {
|
||||
return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
|
||||
+a[5], +a[6]));
|
||||
}
|
||||
}
|
||||
return value;
|
||||
});
|
||||
|
||||
myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
|
||||
var d;
|
||||
if (typeof value === 'string' &&
|
||||
value.slice(0, 5) === 'Date(' &&
|
||||
value.slice(-1) === ')') {
|
||||
d = new Date(value.slice(5, -1));
|
||||
if (d) {
|
||||
return d;
|
||||
}
|
||||
}
|
||||
return value;
|
||||
});
|
||||
|
||||
|
||||
This is a reference implementation. You are free to copy, modify, or
|
||||
redistribute.
|
||||
|
||||
This code should be minified before deployment.
|
||||
See http://javascript.crockford.com/jsmin.html
|
||||
|
||||
USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
|
||||
NOT CONTROL.
|
||||
*/
|
||||
|
||||
/*jslint evil: true */
|
||||
|
||||
/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
|
||||
call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
|
||||
getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
|
||||
lastIndex, length, parse, prototype, push, replace, slice, stringify,
|
||||
test, toJSON, toString, valueOf
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
// Create a JSON object only if one does not already exist. We create the
|
||||
// methods in a closure to avoid creating global variables.
|
||||
|
||||
if (!this.JSON) {
|
||||
this.JSON = {};
|
||||
}
|
||||
|
||||
(function () {
|
||||
|
||||
function f(n) {
|
||||
// Format integers to have at least two digits.
|
||||
return n < 10 ? '0' + n : n;
|
||||
}
|
||||
|
||||
if (typeof Date.prototype.toJSON !== 'function') {
|
||||
|
||||
Date.prototype.toJSON = function (key) {
|
||||
|
||||
return isFinite(this.valueOf()) ?
|
||||
this.getUTCFullYear() + '-' +
|
||||
f(this.getUTCMonth() + 1) + '-' +
|
||||
f(this.getUTCDate()) + 'T' +
|
||||
f(this.getUTCHours()) + ':' +
|
||||
f(this.getUTCMinutes()) + ':' +
|
||||
f(this.getUTCSeconds()) + 'Z' : null;
|
||||
};
|
||||
|
||||
String.prototype.toJSON =
|
||||
Number.prototype.toJSON =
|
||||
Boolean.prototype.toJSON = function (key) {
|
||||
return this.valueOf();
|
||||
};
|
||||
}
|
||||
|
||||
var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
|
||||
escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
|
||||
gap,
|
||||
indent,
|
||||
meta = { // table of character substitutions
|
||||
'\b': '\\b',
|
||||
'\t': '\\t',
|
||||
'\n': '\\n',
|
||||
'\f': '\\f',
|
||||
'\r': '\\r',
|
||||
'"' : '\\"',
|
||||
'\\': '\\\\'
|
||||
},
|
||||
rep;
|
||||
|
||||
|
||||
function quote(string) {
|
||||
|
||||
// If the string contains no control characters, no quote characters, and no
|
||||
// backslash characters, then we can safely slap some quotes around it.
|
||||
// Otherwise we must also replace the offending characters with safe escape
|
||||
// sequences.
|
||||
|
||||
escapable.lastIndex = 0;
|
||||
return escapable.test(string) ?
|
||||
'"' + string.replace(escapable, function (a) {
|
||||
var c = meta[a];
|
||||
return typeof c === 'string' ? c :
|
||||
'\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
||||
}) + '"' :
|
||||
'"' + string + '"';
|
||||
}
|
||||
|
||||
|
||||
function str(key, holder) {
|
||||
|
||||
// Produce a string from holder[key].
|
||||
|
||||
var i, // The loop counter.
|
||||
k, // The member key.
|
||||
v, // The member value.
|
||||
length,
|
||||
mind = gap,
|
||||
partial,
|
||||
value = holder[key];
|
||||
|
||||
// If the value has a toJSON method, call it to obtain a replacement value.
|
||||
|
||||
if (value && typeof value === 'object' &&
|
||||
typeof value.toJSON === 'function') {
|
||||
value = value.toJSON(key);
|
||||
}
|
||||
|
||||
// If we were called with a replacer function, then call the replacer to
|
||||
// obtain a replacement value.
|
||||
|
||||
if (typeof rep === 'function') {
|
||||
value = rep.call(holder, key, value);
|
||||
}
|
||||
|
||||
// What happens next depends on the value's type.
|
||||
|
||||
switch (typeof value) {
|
||||
case 'string':
|
||||
return quote(value);
|
||||
|
||||
case 'number':
|
||||
|
||||
// JSON numbers must be finite. Encode non-finite numbers as null.
|
||||
|
||||
return isFinite(value) ? String(value) : 'null';
|
||||
|
||||
case 'boolean':
|
||||
case 'null':
|
||||
|
||||
// If the value is a boolean or null, convert it to a string. Note:
|
||||
// typeof null does not produce 'null'. The case is included here in
|
||||
// the remote chance that this gets fixed someday.
|
||||
|
||||
return String(value);
|
||||
|
||||
// If the type is 'object', we might be dealing with an object or an array or
|
||||
// null.
|
||||
|
||||
case 'object':
|
||||
|
||||
// Due to a specification blunder in ECMAScript, typeof null is 'object',
|
||||
// so watch out for that case.
|
||||
|
||||
if (!value) {
|
||||
return 'null';
|
||||
}
|
||||
|
||||
// Make an array to hold the partial results of stringifying this object value.
|
||||
|
||||
gap += indent;
|
||||
partial = [];
|
||||
|
||||
// Is the value an array?
|
||||
|
||||
if (Object.prototype.toString.apply(value) === '[object Array]') {
|
||||
|
||||
// The value is an array. Stringify every element. Use null as a placeholder
|
||||
// for non-JSON values.
|
||||
|
||||
length = value.length;
|
||||
for (i = 0; i < length; i += 1) {
|
||||
partial[i] = str(i, value) || 'null';
|
||||
}
|
||||
|
||||
// Join all of the elements together, separated with commas, and wrap them in
|
||||
// brackets.
|
||||
|
||||
v = partial.length === 0 ? '[]' :
|
||||
gap ? '[\n' + gap +
|
||||
partial.join(',\n' + gap) + '\n' +
|
||||
mind + ']' :
|
||||
'[' + partial.join(',') + ']';
|
||||
gap = mind;
|
||||
return v;
|
||||
}
|
||||
|
||||
// If the replacer is an array, use it to select the members to be stringified.
|
||||
|
||||
if (rep && typeof rep === 'object') {
|
||||
length = rep.length;
|
||||
for (i = 0; i < length; i += 1) {
|
||||
k = rep[i];
|
||||
if (typeof k === 'string') {
|
||||
v = str(k, value);
|
||||
if (v) {
|
||||
partial.push(quote(k) + (gap ? ': ' : ':') + v);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
// Otherwise, iterate through all of the keys in the object.
|
||||
|
||||
for (k in value) {
|
||||
if (Object.hasOwnProperty.call(value, k)) {
|
||||
v = str(k, value);
|
||||
if (v) {
|
||||
partial.push(quote(k) + (gap ? ': ' : ':') + v);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Join all of the member texts together, separated with commas,
|
||||
// and wrap them in braces.
|
||||
|
||||
v = partial.length === 0 ? '{}' :
|
||||
gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' +
|
||||
mind + '}' : '{' + partial.join(',') + '}';
|
||||
gap = mind;
|
||||
return v;
|
||||
}
|
||||
}
|
||||
|
||||
// If the JSON object does not yet have a stringify method, give it one.
|
||||
|
||||
if (typeof JSON.stringify !== 'function') {
|
||||
JSON.stringify = function (value, replacer, space) {
|
||||
|
||||
// The stringify method takes a value and an optional replacer, and an optional
|
||||
// space parameter, and returns a JSON text. The replacer can be a function
|
||||
// that can replace values, or an array of strings that will select the keys.
|
||||
// A default replacer method can be provided. Use of the space parameter can
|
||||
// produce text that is more easily readable.
|
||||
|
||||
var i;
|
||||
gap = '';
|
||||
indent = '';
|
||||
|
||||
// If the space parameter is a number, make an indent string containing that
|
||||
// many spaces.
|
||||
|
||||
if (typeof space === 'number') {
|
||||
for (i = 0; i < space; i += 1) {
|
||||
indent += ' ';
|
||||
}
|
||||
|
||||
// If the space parameter is a string, it will be used as the indent string.
|
||||
|
||||
} else if (typeof space === 'string') {
|
||||
indent = space;
|
||||
}
|
||||
|
||||
// If there is a replacer, it must be a function or an array.
|
||||
// Otherwise, throw an error.
|
||||
|
||||
rep = replacer;
|
||||
if (replacer && typeof replacer !== 'function' &&
|
||||
(typeof replacer !== 'object' ||
|
||||
typeof replacer.length !== 'number')) {
|
||||
throw new Error('JSON.stringify');
|
||||
}
|
||||
|
||||
// Make a fake root object containing our value under the key of ''.
|
||||
// Return the result of stringifying the value.
|
||||
|
||||
return str('', {'': value});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// If the JSON object does not yet have a parse method, give it one.
|
||||
|
||||
if (typeof JSON.parse !== 'function') {
|
||||
JSON.parse = function (text, reviver) {
|
||||
|
||||
// The parse method takes a text and an optional reviver function, and returns
|
||||
// a JavaScript value if the text is a valid JSON text.
|
||||
|
||||
var j;
|
||||
|
||||
function walk(holder, key) {
|
||||
|
||||
// The walk method is used to recursively walk the resulting structure so
|
||||
// that modifications can be made.
|
||||
|
||||
var k, v, value = holder[key];
|
||||
if (value && typeof value === 'object') {
|
||||
for (k in value) {
|
||||
if (Object.hasOwnProperty.call(value, k)) {
|
||||
v = walk(value, k);
|
||||
if (v !== undefined) {
|
||||
value[k] = v;
|
||||
} else {
|
||||
delete value[k];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return reviver.call(holder, key, value);
|
||||
}
|
||||
|
||||
|
||||
// Parsing happens in four stages. In the first stage, we replace certain
|
||||
// Unicode characters with escape sequences. JavaScript handles many characters
|
||||
// incorrectly, either silently deleting them, or treating them as line endings.
|
||||
|
||||
cx.lastIndex = 0;
|
||||
if (cx.test(text)) {
|
||||
text = text.replace(cx, function (a) {
|
||||
return '\\u' +
|
||||
('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
||||
});
|
||||
}
|
||||
|
||||
// In the second stage, we run the text against regular expressions that look
|
||||
// for non-JSON patterns. We are especially concerned with '()' and 'new'
|
||||
// because they can cause invocation, and '=' because it can cause mutation.
|
||||
// But just to be safe, we want to reject all unexpected forms.
|
||||
|
||||
// We split the second stage into 4 regexp operations in order to work around
|
||||
// crippling inefficiencies in IE's and Safari's regexp engines. First we
|
||||
// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
|
||||
// replace all simple value tokens with ']' characters. Third, we delete all
|
||||
// open brackets that follow a colon or comma or that begin the text. Finally,
|
||||
// we look to see that the remaining characters are only whitespace or ']' or
|
||||
// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
|
||||
|
||||
if (/^[\],:{}\s]*$/.
|
||||
test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
|
||||
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
|
||||
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
|
||||
|
||||
// In the third stage we use the eval function to compile the text into a
|
||||
// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
|
||||
// in JavaScript: it can begin a block or an object literal. We wrap the text
|
||||
// in parens to eliminate the ambiguity.
|
||||
|
||||
j = eval('(' + text + ')');
|
||||
|
||||
// In the optional fourth stage, we recursively walk the new structure, passing
|
||||
// each name/value pair to a reviver function for possible transformation.
|
||||
|
||||
return typeof reviver === 'function' ?
|
||||
walk({'': j}, '') : j;
|
||||
}
|
||||
|
||||
// If the text is not JSON parseable, then a SyntaxError is thrown.
|
||||
|
||||
throw new SyntaxError('JSON.parse');
|
||||
};
|
||||
}
|
||||
}());
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<extension location="Toolbar">
|
||||
<info text="SVG-edit"
|
||||
description="Click to insert the SVG-edit gadget."
|
||||
imageUrl="http://svg-edit.googlecode.com/svn/trunk/editor/images/logo.png"/>
|
||||
<insertGadget url="http://svg-edit.googlecode.com/svn/trunk/wave/svg-edit.xml"/>
|
||||
</extension>
|
||||
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Module>
|
||||
<ModulePrefs title="SVG-edit" height="600">
|
||||
<Require feature="rpc" />
|
||||
</ModulePrefs>
|
||||
<Content type="html">
|
||||
<![CDATA[
|
||||
<ModulePrefs title="SVG-edit" height="780" author="SVG-edit Developers">
|
||||
<Require feature="wave" />
|
||||
</ModulePrefs>
|
||||
<Content type="html">
|
||||
<![CDATA[
|
||||
|
||||
<script type="text/javascript" src="http://wave-api.appspot.com/public/wave.js"></script>
|
||||
<base href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html"></base>
|
||||
<link rel="stylesheet" href="http://svg-edit.googlecode.com/svn/trunk/editor/jpicker/jpicker.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.css" type="text/css"/>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
|
||||
|
|
@ -16,7 +16,10 @@
|
|||
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/spinbtn/JQuerySpinBtn.js"></script>
|
||||
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svgcanvas.js"></script>
|
||||
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.js"></script>
|
||||
|
||||
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/wave/json2.js"></script>
|
||||
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/wave/wave.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="svg_editor">
|
||||
|
||||
|
|
@ -25,29 +28,39 @@
|
|||
<div id="svgcanvas"></div>
|
||||
</div>
|
||||
|
||||
<div id="logo">
|
||||
<a href="http://svg-edit.googlecode.com/" target="_blank" title="SVG-edit Home Page">
|
||||
<img src="images/logo.png" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="tools_top" class="tools_panel">
|
||||
<!-- File-like buttons: New, Save, Source -->
|
||||
<div>
|
||||
<img class="tool_button" id="tool_clear" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/clear.png" title="New Image [N]" alt="Clear" />
|
||||
<img class="tool_button" id="tool_save" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/save.png" title="Save Image [S]" alt="Save"/>
|
||||
<img class="tool_button" id="tool_source" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/source.png" title="Edit Source [U]" alt="Source"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
|
||||
<img style="display:none" class="tool_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
|
||||
<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
|
||||
<img class="tool_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/>
|
||||
<img class="tool_button" title="Wave" alt="Wave State" onclick="alert(wave.getState().toString())" />
|
||||
</div>
|
||||
|
||||
<!-- History buttons -->
|
||||
<div>
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_button tool_button_disabled" id="tool_undo" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/undo.png" title="Undo [Z]" alt="Undo" />
|
||||
<img class="tool_button tool_button_disabled" id="tool_redo" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/redo.png" title="Redo [Shift+Z/Y]" alt="Redo"/>
|
||||
<img class="tool_button" id="tool_paste" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/paste.png" title="Paste Element [V]" alt="Paste"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button tool_button_disabled" id="tool_undo" src="images/undo.png" title="Undo [Z]" alt="Undo" />
|
||||
<img class="tool_button tool_button_disabled" id="tool_redo" src="images/redo.png" title="Redo [Y]" alt="Redo"/>
|
||||
</div>
|
||||
|
||||
<!-- Buttons when something a single element is selected -->
|
||||
<!-- Buttons when a single element is selected -->
|
||||
<div id="selected_panel">
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_copy" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/copy.png" title="Copy Element [C]" alt="Copy"/>
|
||||
<img class="tool_button" id="tool_delete" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
|
||||
<img class="tool_button" id="tool_move_top" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
|
||||
<img class="tool_button" id="tool_move_bottom" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/>
|
||||
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
|
||||
<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<select id="group_opacity" class="selected_tool" title="Change selected item opacity">
|
||||
<option selected="selected" value="1">100 %</option>
|
||||
<option value="0.9">90 %</option>
|
||||
|
|
@ -59,32 +72,49 @@
|
|||
<option value="0.3">30 %</option>
|
||||
<option value="0.2">20 %</option>
|
||||
<option value="0.1">10 %</option>
|
||||
</select>
|
||||
<option value="0">0 %</option>
|
||||
</select>
|
||||
<span class="selected_tool">angle:</span>
|
||||
<input id="angle" class="selected_tool" title="Change rotation angle" alt="Rotation Angle" size="2" value="0" type="text"/>
|
||||
</div>
|
||||
|
||||
<!-- Buttons when something a single element is selected -->
|
||||
<!-- Buttons when multiple elements are selected -->
|
||||
<div id="multiselected_panel">
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_copy_multi" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/copy.png" title="Copy Elements [C]" alt="Copy"/>
|
||||
<img class="tool_button" id="tool_delete_multi" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
|
||||
<img class="tool_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_alignleft" src="images/align-left.png" title="Align Left" alt="Left"/>
|
||||
<img class="tool_button" id="tool_aligncenter" src="images/align-center.png" title="Align Center" alt="Center"/>
|
||||
<img class="tool_button" id="tool_alignright" src="images/align-right.png" title="Align Right" alt="Right"/>
|
||||
<img class="tool_button" id="tool_aligntop" src="images/align-top.png" title="Align Top" alt="Top"/>
|
||||
<img class="tool_button" id="tool_alignmiddle" src="images/align-middle.png" title="Align Middle" alt="Middle"/>
|
||||
<img class="tool_button" id="tool_alignbottom" src="images/align-bottom.png" title="Align Bottom" alt="Bottom"/>
|
||||
<span class="selected_tool">relative to:</span>
|
||||
<select id="align_relative_to" class="selected_tool" title="Align relative to ...">
|
||||
<option value="selected">selected objects</option>
|
||||
<option value="largest">largest object</option>
|
||||
<option value="smallest">smallest object</option>
|
||||
<option value="page">page</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="rect_panel">
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<label class="rect_tool">x:</label>
|
||||
<input id="rect_x" class="rect_tool attr_changer" title="Change rectangle X coordinate" alt="x" size="3"/>
|
||||
<label class="rect_tool">y:</label>
|
||||
<input id="rect_y" class="rect_tool attr_changer" title="Change rectangle Y coordinate" alt="y" size="3"/>
|
||||
<label class="rect_tool">width:</label>
|
||||
<input id="rect_w" class="rect_tool attr_changer" title="Change rectangle width" alt="width" size="3"/>
|
||||
<input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" alt="width" size="3"/>
|
||||
<label class="rect_tool">height:</label>
|
||||
<input id="rect_h" class="rect_tool attr_changer" title="Change rectangle height" alt="height" size="3"/>
|
||||
<input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" alt="height" size="3"/>
|
||||
<label class="rect_tool">Corner Radius:</label>
|
||||
<input id="rect_radius" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" alt="Corner Radius"/>
|
||||
<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" alt="Corner Radius"/>
|
||||
</div>
|
||||
|
||||
<div id="circle_panel">
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<label class="circle_tool">cx:</label>
|
||||
<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" alt="cx" size="3"/>
|
||||
<label class="circle_tool">cy:</label>
|
||||
|
|
@ -94,7 +124,7 @@
|
|||
</div>
|
||||
|
||||
<div id="ellipse_panel">
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<label class="ellipse_tool">cx:</label>
|
||||
<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" alt="cx" size="3"/>
|
||||
<label class="ellipse_tool">cy:</label>
|
||||
|
|
@ -106,7 +136,7 @@
|
|||
</div>
|
||||
|
||||
<div id="line_panel">
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<label class="line_tool">x1:</label>
|
||||
<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" alt="x1" size="3"/>
|
||||
<label class="line_tool">y1:</label>
|
||||
|
|
@ -118,9 +148,13 @@
|
|||
</div>
|
||||
|
||||
<div id="text_panel">
|
||||
<img class="tool_sep" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_bold" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/bold.png" title="Bold Text [B]" alt="Bold"/>
|
||||
<img class="tool_button" id="tool_italic" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/italic.png" title="Italic Text [I]" alt="Italic"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<label class="text_tool">x:</label>
|
||||
<input id="text_x" class="text_tool attr_changer" title="Change text X coordinate" alt="x" size="3"/>
|
||||
<label class="text_tool">y:</label>
|
||||
<input id="text_y" class="text_tool attr_changer" title="Change text Y coordinate" alt="y" size="3"/>
|
||||
<img class="tool_button" id="tool_bold" src="images/bold.png" title="Bold Text [B]" alt="Bold"/>
|
||||
<img class="tool_button" id="tool_italic" src="images/italic.png" title="Italic Text [I]" alt="Italic"/>
|
||||
<select id="font_family" class="text_tool" title="Change Font Family">
|
||||
<option selected="selected" value="serif">serif</option>
|
||||
<option value="sans-serif">sans-serif</option>
|
||||
|
|
@ -150,13 +184,15 @@
|
|||
</div> <!-- tools_top -->
|
||||
|
||||
<div id="tools_left" class="tools_panel">
|
||||
<img class="tool_button_current" id="tool_select" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/select.png" title="Select Tool [1]" alt="Select"/><br/>
|
||||
<img class="tool_button" id="tool_path" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
|
||||
<img class="tool_button" id="tool_line" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/line.png" title="Line Tool [3]" alt="Line"/><br/>
|
||||
<img class="tool_button" id="tools_rect_show" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/><br/>
|
||||
<img class="tool_button" id="tools_ellipse_show" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
|
||||
<img class="tool_button" id="tool_text" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/text.png" title="Text Tool [6]" alt="Text"/>
|
||||
<img class="tool_button" id="tool_poly" src="images/polygon.png" title="Poly Tool [7]" alt="Poly"/>
|
||||
<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
|
||||
<img class="tool_button" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
|
||||
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/>
|
||||
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/>
|
||||
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
|
||||
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
|
||||
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
|
||||
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/>
|
||||
<img class="tool_button" id="tool_poly" src="images/polygon.png" title="Poly Tool [7]" alt="Poly"/>
|
||||
</div> <!-- tools_left -->
|
||||
|
||||
<div id="tools_bottom" class="tools_panel">
|
||||
|
|
@ -168,6 +204,8 @@
|
|||
<option>1024x768</option>
|
||||
<option>1280x960</option>
|
||||
<option>1600x1200</option>
|
||||
<option>Fit to Content</option>
|
||||
<option>Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -176,13 +214,13 @@
|
|||
<tr>
|
||||
<td>fill:</td>
|
||||
<td><div id="fill_color" class="color_block" title="Change fill color"></div></td>
|
||||
<td><div id="fill_opacity">N/A</div></td>
|
||||
<td><div id="fill_opacity">100%</div></td>
|
||||
</tr><tr>
|
||||
<td>stroke:</td>
|
||||
<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
|
||||
<td><div id="stroke_opacity">100 %</div></td>
|
||||
<td>
|
||||
<input id="stroke_width" title="Change stroke width" alt="Stroke Width" size="2" value="1" type="text"/>
|
||||
<input id="stroke_width" title="Change stroke width" alt="Stroke Width" size="2" value="5" type="text"/>
|
||||
</td>
|
||||
<td>
|
||||
<select id="stroke_style" title="Change stroke dash style">
|
||||
|
|
@ -199,7 +237,7 @@
|
|||
|
||||
<div id="tools_bottom_3">
|
||||
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
|
||||
<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.3-preAlpha</a></div>
|
||||
<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.3-Beta</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -237,112 +275,17 @@
|
|||
<div id="svg_source_editor">
|
||||
<div id="svg_source_overlay"></div>
|
||||
<div id="svg_source_container">
|
||||
<div id="tool_source_back" class="toolbar_button"></div>
|
||||
<div id="tool_source_back" class="toolbar_button">
|
||||
<button id="tool_source_save">Load</button>
|
||||
<button id="tool_source_cancel">Cancel</button>
|
||||
</div>
|
||||
<form>
|
||||
<textarea id="svg_source_textarea"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var svgCanvas = null;
|
||||
|
||||
function stateUpdated() {
|
||||
// 'state' is an object of key-value pairs that map ids to JSON serialization of SVG elements
|
||||
// 'keys' is an array of all the keys in the state
|
||||
var state = wave.getState();
|
||||
var keys = state.getKeys();
|
||||
svgCanvas.each(function(e) {
|
||||
// 'this' is the SVG DOM element node (ellipse, rect, etc)
|
||||
// 'e' is an integer describing the position within the document
|
||||
var k = this.id;
|
||||
var v = state.get(k);
|
||||
if (v) {
|
||||
var ob;
|
||||
eval("ob=" + v); // FIXME: Yes, I'm using eval... Dirty, dirty..
|
||||
if (ob) {
|
||||
svgCanvas.updateElementFromJson(ob);
|
||||
} else {
|
||||
var node = svgdoc.getElementById(k);
|
||||
if (node) node.parentNode.removeChild(node);
|
||||
}
|
||||
keys.remove(k);
|
||||
} else {
|
||||
this.parentNode.removeChild(this);
|
||||
}
|
||||
});
|
||||
|
||||
// New nodes
|
||||
for (var k in keys) {
|
||||
var ob;
|
||||
var v = state.get(keys[k]);
|
||||
eval("ob=" + v); // FIXME: Yes, I'm using eval... Dirty, dirty..
|
||||
if (ob) svgCanvas.updateElementFromJson(ob)
|
||||
}
|
||||
}
|
||||
|
||||
function myPrintJson(a, b, e) {
|
||||
if(!a || typeof a.valueOf() != "object") {
|
||||
if(typeof a == "string")return"'" + a + "'";
|
||||
else if(a instanceof Function)return"[function]";
|
||||
return"" + a
|
||||
}
|
||||
var c = [], f = wave.util.isArray_(a), d = f ? "[]" : "{}", h = b ? "\n" : "", k = b ? " " : "", l = 0, g = e || 1;
|
||||
b || (g = 0);
|
||||
c.push(d.charAt(0));
|
||||
for(var i in a) {
|
||||
var j = a[i];
|
||||
l++ > 0 && c.push(", ");
|
||||
if(f)
|
||||
c.push(myPrintJson(j, b, g + 1));
|
||||
else {
|
||||
c.push(h);
|
||||
c.push(wave.util.toSpaces_(g));
|
||||
c.push("'" + i + "':");
|
||||
c.push(k);
|
||||
c.push(myPrintJson(j, b, g + 1))
|
||||
}
|
||||
}
|
||||
if(!f) {
|
||||
c.push(h);
|
||||
c.push(wave.util.toSpaces_(g - 1))
|
||||
}
|
||||
c.push(d.charAt(1));
|
||||
return c.join("")
|
||||
}
|
||||
|
||||
function sendDelta(svgCanvas, elem) {
|
||||
if (!wave) return;
|
||||
var delta = {};
|
||||
var attrs = {};
|
||||
var a = elem.attributes;
|
||||
for (var i = 0; i < a.length; i++) {
|
||||
attrs[a.item(i).nodeName] = a.item(i).nodeValue;
|
||||
}
|
||||
var ob = { element: elem.nodeName, attr: attrs };
|
||||
// wave.util.printJson has a bug where keys are not quoted like 'stroke-width'
|
||||
delta[elem.id] = myPrintJson(ob, true);
|
||||
wave.getState().submitDelta(delta);
|
||||
}
|
||||
|
||||
function getId(objnum) {
|
||||
return "svg_"+wave.getViewer().getId()+"_"+objnum;
|
||||
}
|
||||
|
||||
function main() {
|
||||
svgCanvas = svg_edit_setup();
|
||||
if (wave && wave.isInWaveContainer()) {
|
||||
wave.setStateCallback(stateUpdated);
|
||||
}
|
||||
svgCanvas.bind("changed", sendDelta);
|
||||
svgCanvas.bind("cleared", stateUpdated);
|
||||
svgCanvas.bind("getid", getId);
|
||||
}
|
||||
|
||||
gadgets.util.registerOnLoadHandler(main);
|
||||
|
||||
</script>
|
||||
]]>
|
||||
</Content>
|
||||
]]>
|
||||
</Content>
|
||||
</Module>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
var shapetime = {};
|
||||
|
||||
function stateUpdated() {
|
||||
// 'state' is an object of key-value pairs that map ids to JSON serialization of SVG elements
|
||||
// 'keys' is an array of all the keys in the state
|
||||
var state = wave.getState();
|
||||
var keys = state.getKeys();
|
||||
svgCanvas.each(function(e) {
|
||||
// 'this' is the SVG DOM element node (ellipse, rect, etc)
|
||||
// 'e' is an integer describing the position within the document
|
||||
var k = this.id;
|
||||
var v = state.get(k);
|
||||
if (v) {
|
||||
var ob = JSON.parse(v);
|
||||
if (ob) {
|
||||
// do nothing
|
||||
} else {
|
||||
//var node = document.getElementById(k);
|
||||
//if (node) node.parentNode.removeChild(node);
|
||||
}
|
||||
//keys.remove(k);
|
||||
|
||||
} else if(this.id != "selectorParentGroup"){
|
||||
//console.log(this)
|
||||
this.parentNode.removeChild(this);
|
||||
}
|
||||
});
|
||||
|
||||
// New nodes
|
||||
for (var k in keys) {
|
||||
var v = state.get(keys[k]);
|
||||
var ob = JSON.parse(v);
|
||||
if (ob){
|
||||
if(!shapetime[k] || ob.time > shapetime[k]){
|
||||
var a;
|
||||
if(a = document.getElementById(k)){
|
||||
var attrs = {};
|
||||
for(var i = a.length; i--;){
|
||||
attrs[a.item(i).nodeName] = a.item(i).nodeValue;
|
||||
}
|
||||
if(JSON.stringify(attrs) != JSON.stringify(ob.attr)){
|
||||
shapetime[k] = ob.time
|
||||
svgCanvas.updateElementFromJson(ob)
|
||||
}
|
||||
}else{
|
||||
shapetime[k] = ob.time
|
||||
svgCanvas.updateElementFromJson(ob)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getId(canvas, objnum) {
|
||||
return "svg_"+wave.getViewer().getId()+"_"+objnum;
|
||||
}
|
||||
|
||||
function main() {
|
||||
$(document).ready(function(){
|
||||
if (wave && wave.isInWaveContainer()) {
|
||||
wave.setStateCallback(stateUpdated);
|
||||
}
|
||||
svgCanvas.bind("changed", function(canvas, elem){
|
||||
var delta = {}
|
||||
$.each(elem, function(){
|
||||
|
||||
var attrs = {};
|
||||
var a = this.attributes;
|
||||
if(a){
|
||||
for(var i = a.length; i--;){
|
||||
attrs[a.item(i).nodeName] = a.item(i).nodeValue;
|
||||
}
|
||||
var ob = {element: this.nodeName, attr: attrs};
|
||||
|
||||
ob.time = shapetime[this.id] = (new Date).getTime()
|
||||
delta[this.id] = JSON.stringify(ob);
|
||||
}else{
|
||||
alert(JSON.stringify(elem))
|
||||
}
|
||||
})
|
||||
wave.getState().submitDelta(delta)
|
||||
//sendDelta(canvas, elem)
|
||||
});
|
||||
svgCanvas.bind("cleared", function(){
|
||||
//alert("cleared")
|
||||
var state = {}, keys = wave.getState().getKeys()
|
||||
for(var i = 0; i < keys.length; i++){
|
||||
state[keys[i]] = null;
|
||||
}
|
||||
wave.getState().submitDelta(state)
|
||||
});
|
||||
svgCanvas.bind("getid", getId);
|
||||
})
|
||||
}
|
||||
|
||||
gadgets.util.registerOnLoadHandler(main);
|
||||
Loading…
Reference in New Issue