You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
7.8 KiB
187 lines
7.8 KiB
/* |
|
Embedded SVG-edit API |
|
|
|
General usage: |
|
- Have an iframe somewhere pointing to a version of svg-edit > r1000 |
|
- Initialize the magic with: |
|
var svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit); |
|
- Pass functions in this format: |
|
svgCanvas.setSvgString('string') |
|
- Or if a callback is needed: |
|
svgCanvas.setSvgString('string')(function(data, error){ |
|
if (error){ |
|
// There was an error |
|
} else{ |
|
// Handle data |
|
} |
|
}) |
|
|
|
Everything is done with the same API as the real svg-edit, |
|
and all documentation is unchanged. |
|
|
|
However, this file depends on the postMessage API which |
|
can only support JSON-serializable arguments and |
|
return values, so, for example, arguments whose value is |
|
'undefined', a function, a non-finite number, or a built-in |
|
object like Date(), RegExp(), etc. will most likely not behave |
|
as expected. In such a case one may need to host |
|
the SVG editor on the same domain and reference the |
|
JavaScript methods on the frame itself. |
|
|
|
The only other difference is |
|
when handling returns: the callback notation is used instead. |
|
|
|
var blah = new EmbeddedSVGEdit(window.frames.svgedit); |
|
blah.clearSelection('woot', 'blah', 1337, [1, 2, 3, 4, 5, 'moo'], -42, {a: 'tree',b:6, c: 9})(function(){console.log('GET DATA',arguments)}) |
|
*/ |
|
|
|
(function () {'use strict'; |
|
|
|
var cbid = 0; |
|
|
|
function getCallbackSetter (d) { |
|
return function () { |
|
var t = this, // New callback |
|
args = [].slice.call(arguments), |
|
cbid = t.send(d, args, function(){}); // The callback (currently it's nothing, but will be set later) |
|
|
|
return function(newcallback){ |
|
t.callbacks[cbid] = newcallback; // Set callback |
|
}; |
|
}; |
|
} |
|
|
|
/* |
|
* Having this separate from messageListener allows us to |
|
* avoid using JSON parsing (and its limitations) in the case |
|
* of same domain control |
|
*/ |
|
function addCallback (t, data) { |
|
var result = data.result || data.error; |
|
cbid = data.id; |
|
if (t.callbacks[cbid]) { |
|
if (data.result) { |
|
t.callbacks[cbid](result); |
|
} else { |
|
t.callbacks[cbid](result, 'error'); |
|
} |
|
} |
|
} |
|
|
|
function messageListener (e) { |
|
// We accept and post strings as opposed to objects for the sake of IE9 support; this |
|
// will most likely be changed in the future |
|
if (typeof e.data !== 'string') { |
|
return; |
|
} |
|
var allowedOrigins = this.allowedOrigins, |
|
data = e.data && JSON.parse(e.data); |
|
if (!data || typeof data !== 'object' || data.namespace !== 'svg-edit' || |
|
e.source !== this.frame.contentWindow || |
|
(allowedOrigins.indexOf('*') === -1 && allowedOrigins.indexOf(e.origin) === -1) |
|
) { |
|
return; |
|
} |
|
addCallback(this, data); |
|
} |
|
|
|
function getMessageListener (t) { |
|
return function (e) { |
|
messageListener.call(t, e); |
|
}; |
|
} |
|
|
|
/** |
|
* @param {HTMLIFrameElement} frame |
|
* @param {array} [allowedOrigins=[]] Array of origins from which incoming |
|
* messages will be allowed when same origin is not used; defaults to none. |
|
* If supplied, it should probably be the same as svgEditor's allowedOrigins |
|
*/ |
|
function EmbeddedSVGEdit (frame, allowedOrigins) { |
|
if (!(this instanceof EmbeddedSVGEdit)) { // Allow invocation without 'new' keyword |
|
return new EmbeddedSVGEdit(frame); |
|
} |
|
this.allowedOrigins = allowedOrigins || []; |
|
// Initialize communication |
|
this.frame = frame; |
|
this.callbacks = {}; |
|
// List of functions extracted with this: |
|
// Run in firebug on http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html |
|
|
|
// for (var i=0,q=[],f = document.querySelectorAll('div.CFunction h3.CTitle a'); i < f.length; i++) { q.push(f[i].name); }; q |
|
// var functions = ['clearSelection', 'addToSelection', 'removeFromSelection', 'open', 'save', 'getSvgString', 'setSvgString', |
|
// 'createLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', |
|
// 'moveSelectedToLayer', 'clear']; |
|
|
|
// Newer, well, it extracts things that aren't documented as well. All functions accessible through the normal thingy can now be accessed though the API |
|
// var l = []; for (var i in svgCanvas){ if (typeof svgCanvas[i] == 'function') { l.push(i);} }; |
|
// Run in svgedit itself |
|
var i, |
|
functions = ['updateElementFromJson', 'embedImage', 'fixOperaXML', 'clearSelection', |
|
'addToSelection', |
|
'removeFromSelection', 'addNodeToSelection', 'open', 'save', 'getSvgString', 'setSvgString', 'createLayer', |
|
'deleteCurrentLayer', 'getCurrentDrawing', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', |
|
'setLayerVisibility', 'moveSelectedToLayer', 'clear', 'clearPath', 'getNodePoint', 'clonePathNode', 'deletePathNode', |
|
'getResolution', 'getImageTitle', 'setImageTitle', 'setResolution', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode', |
|
'getStrokeColor', 'setStrokeColor', 'getFillColor', 'setFillColor', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth', |
|
'setStrokeWidth', 'getStrokeStyle', 'setStrokeStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'setFillOpacity', |
|
'getStrokeOpacity', 'setStrokeOpacity', 'getTransformList', 'getBBox', 'getRotationAngle', 'setRotationAngle', 'each', |
|
'bind', 'setIdPrefix', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'getFontSize', |
|
'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setRectRadius', 'setSegType', 'quickClone', |
|
'changeSelectedAttributeNoUndo', 'changeSelectedAttribute', 'deleteSelectedElements', 'groupSelectedElements', 'zoomChanged', |
|
'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveSelectedElements', |
|
'getStrokedBBox', 'getVisibleElements', 'cycleElement', 'getUndoStackSize', 'getRedoStackSize', 'getNextUndoCommandText', |
|
'getNextRedoCommandText', 'undo', 'redo', 'cloneSelectedElements', 'alignSelectedElements', 'getZoom', 'getVersion', |
|
'setIconSize', 'setLang', 'setCustomHandlers']; |
|
|
|
// TODO: rewrite the following, it's pretty scary. |
|
for (i = 0; i < functions.length; i++) { |
|
this[functions[i]] = getCallbackSetter(functions[i]); |
|
} |
|
|
|
// Older IE may need a polyfill for addEventListener, but so it would for SVG |
|
window.addEventListener('message', getMessageListener(this), false); |
|
} |
|
|
|
EmbeddedSVGEdit.prototype.send = function (name, args, callback){ |
|
var t = this; |
|
cbid++; |
|
|
|
this.callbacks[cbid] = callback; |
|
setTimeout(function () { // Delay for the callback to be set in case its synchronous |
|
/* |
|
* Todo: Handle non-JSON arguments and return values (undefined, |
|
* nonfinite numbers, functions, and built-in objects like Date, |
|
* RegExp), etc.? Allow promises instead of callbacks? Review |
|
* SVG-Edit functions for whether JSON-able parameters can be |
|
* made compatile with all API functionality |
|
*/ |
|
// We accept and post strings for the sake of IE9 support |
|
if (window.location.origin === t.frame.contentWindow.location.origin) { |
|
// Although we do not really need this API if we are working same |
|
// domain, it could allow us to write in a way that would work |
|
// cross-domain as well, assuming we stick to the argument limitations |
|
// of the current JSON-based communication API (e.g., not passing |
|
// callbacks). We might be able to address these shortcomings; see |
|
// the todo elsewhere in this file. |
|
var message = {id: cbid}, |
|
svgCanvas = t.frame.contentWindow.svgCanvas; |
|
try { |
|
message.result = svgCanvas[name].apply(svgCanvas, args); |
|
} |
|
catch (err) { |
|
message.error = err.message; |
|
} |
|
addCallback(t, message); |
|
} |
|
else { // Requires the ext-xdomain-messaging.js extension |
|
t.frame.contentWindow.postMessage(JSON.stringify({namespace: 'svgCanvas', id: cbid, name: name, args: args}), '*'); |
|
} |
|
}, 0); |
|
return cbid; |
|
}; |
|
|
|
window.embedded_svg_edit = EmbeddedSVGEdit; // Export old, deprecated API |
|
window.EmbeddedSVGEdit = EmbeddedSVGEdit; // Follows common JS convention of CamelCase and, as enforced in JSLint, of initial caps for constructors |
|
|
|
}());
|
|
|