instiki/public/svg-edit/editor/extensions/ext-itex.js
Jacques Distler aa0a151ba4 Uniquify IDs in SVG-Edit
Since we can have several SVG-Edit graphics
on a page, SVG-Edit should assign unique IDs
to elements, and do so in a fashion that survives
re-editing.

To do this, we use a nonce, and record its value in
a custom se:nonce attribute on the <svg> element.
(Is there a better way?). 

Also, preserve the custom se:connector attribute for
later editing purposes.
2010-02-25 02:25:16 -06:00

306 lines
8.1 KiB
JavaScript

/*
* ext-itex.js
*
* Licensed under the Apache License, Version 2
*
* Copyright(c) 2010 Jacques Distler
* Copyright(c) 2010 Alexis Deveria
*
*/
$(function() {
svgCanvas.addExtension("itex", function(S) {
var svgcontent = S.svgcontent,
addElem = S.addSvgElementFromJson,
selElems,
svgns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
xmlns = "http://www.w3.org/XML/1998/namespace",
xmlnsns = "http://www.w3.org/2000/xmlns/",
se_ns = "http://svg-edit.googlecode.com",
htmlns = "http://www.w3.org/1999/xhtml",
mathns = "http://www.w3.org/1998/Math/MathML",
ajaxEndpoint = "../../itex",
editingitex = false,
svgdoc = S.svgroot.parentNode.ownerDocument,
started,
newFO;
var properlySourceSizeTextArea = function(){
// TODO: remove magic numbers here and get values from CSS
var height = $('#svg_source_container').height() - 80;
$('#svg_source_textarea').css('height', height);
};
function showPanel(on) {
var fc_rules = $('#fc_rules');
if(!fc_rules.length) {
fc_rules = $('<style id="fc_rules"><\/style>').appendTo('head');
}
fc_rules.text(!on?"":" #tool_topath { display: none !important; }");
$('#itex_panel').toggle(on);
}
function toggleSourceButtons(on) {
$('#tool_source_save, #tool_source_cancel').toggle(!on);
$('#itex_save, #itex_cancel').toggle(on);
}
// Function: setItexString(string, url)
// This function sets the content of of the currently-selected foreignObject element,
// based on the itex contained in string.
//
// Parameters:
// string - The itex text.
// url - the url of the itex server to do the conversion
//
// Returns:
// This function returns false if the set was unsuccessful, true otherwise.
function setItexString(tex) {
var elt = selElems[0];
try {
var math = svgdoc.createElementNS(mathns, 'math');
math.setAttributeNS(xmlnsns, 'xmlns', mathns);
math.setAttribute('display', 'inline');
var semantics = document.createElementNS(mathns, 'semantics');
var annotation = document.createElementNS(mathns, 'annotation');
annotation.setAttribute('encoding', 'application/x-tex');
annotation.textContent = tex;
var mrow = document.createElementNS(mathns, 'mrow');
semantics.appendChild(mrow);
semantics.appendChild(annotation);
math.appendChild(semantics);
// make an AJAX request to the server, to get the MathML
$.post(ajaxEndpoint, {'tex': tex, 'display': 'inline'}, function(data){
var children = data.documentElement.childNodes;
while (children.length > 0) {
mrow.appendChild(children[0]);
}
S.sanitizeSvg(math);
S.call("changed", [elt]);
});
elt.replaceChild(math, elt.firstChild);
S.call("changed", [elt]);
svgCanvas.clearSelection();
} catch(e) {
console.log(e);
return false;
}
return true;
};
function showItexEditor() {
var elt = selElems[0];
var annotation = jQuery('math > semantics > annotation', elt);
if (!annotation || editingitex) return;
editingitex = true;
toggleSourceButtons(true);
// elt.removeAttribute('fill');
var str = annotation.text();
$('#svg_source_textarea').val(str);
$('#svg_source_editor').fadeIn();
properlySourceSizeTextArea();
$('#svg_source_textarea').focus();
}
function setAttr(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
S.call("changed", selElems);
}
return {
name: "itex",
svgicons: "extensions/itex-icons.xml",
buttons: [{
id: "tool_itex",
type: "mode",
title: "itex Tool",
events: {
'click': function() {
svgCanvas.setMode('itex')
}
}
},{
id: "edit_itex",
type: "context",
panel: "itex_panel",
title: "Edit TeX Content",
events: {
'click': function() {
showItexEditor();
}
}
}],
context_tools: [{
type: "input",
panel: "itex_panel",
title: "Change enclosing foreignObject's width",
id: "itex_width",
label: "w",
size: 3,
events: {
change: function() {
setAttr('width', this.value);
}
}
},{
type: "input",
panel: "itex_panel",
title: "Change enclosing foreignObject's height",
id: "itex_height",
label: "h",
events: {
change: function() {
setAttr('height', this.value);
}
}
}, {
type: "input",
panel: "itex_panel",
title: "Change font size",
id: "itex_font_size",
label: "font-size",
size: 2,
defval: 16,
events: {
change: function() {
setAttr('font-size', this.value);
}
}
}
],
callback: function() {
$('#itex_panel').hide();
var endChanges = function() {
$('#svg_source_editor').hide();
editingitex = false;
$('#svg_source_textarea').blur();
toggleSourceButtons(false);
}
// TODO: Needs to be done after orig icon loads
setTimeout(function() {
// Create source save/cancel buttons
var save = $('#tool_source_save').clone()
.hide().attr('id', 'itex_save').unbind()
.appendTo("#tool_source_back").click(function() {
if (!editingitex) return;
if (!setItexString($('#svg_source_textarea').val())) {
$.confirm("Errors found. Revert to original?", function(ok) {
if(!ok) return false;
endChanges();
});
} else {
endChanges();
}
// setSelectMode();
});
var cancel = $('#tool_source_cancel').clone()
.hide().attr('id', 'itex_cancel').unbind()
.appendTo("#tool_source_back").click(function() {
endChanges();
});
}, 3000);
},
mouseDown: function(opts) {
var e = opts.event;
if(svgCanvas.getMode() == "itex") {
started = true;
newFO = S.addSvgElementFromJson({
"element": "foreignObject",
"attr": {
"x": opts.start_x,
"y": opts.start_y,
"id": S.getNextId(),
"font-size": 16, //cur_text.font_size,
"width": "48",
"height": "20",
"style": "pointer-events:inherit"
}
});
var m = svgdoc.createElementNS(mathns, 'math');
m.setAttributeNS(xmlnsns, 'xmlns', mathns);
m.setAttribute('display', 'inline');
var semantics = svgdoc.createElementNS(mathns, 'semantics');
var mrow = svgdoc.createElementNS(mathns, 'mrow');
var mi = svgdoc.createElementNS(mathns, 'mi');
mi.setAttribute('mathvariant', 'normal');
mi.textContent = "\u03A6";
var mo = svgdoc.createElementNS(mathns, 'mo');
mo.textContent = "\u222A";
var mi2 = svgdoc.createElementNS(mathns, 'mi');
mi2.textContent = "\u2133";
var annotation = svgdoc.createElementNS(mathns, 'annotation');
annotation.setAttribute('encoding', 'application/x-tex');
annotation.textContent = "\\Phi \\union \\mathcal{M}";
mrow.appendChild(mi);
mrow.appendChild(mo);
mrow.appendChild(mi2);
semantics.appendChild(mrow);
semantics.appendChild(annotation);
m.appendChild(semantics);
newFO.appendChild(m);
return {
started: true
}
}
},
mouseUp: function(opts) {
var e = opts.event;
if(svgCanvas.getMode() == "itex" && started) {
var attrs = $(newFO).attr(["width", "height"]);
keep = (attrs.width != 0 || attrs.height != 0);
svgCanvas.addToSelection([newFO], true);
return {
keep: keep,
element: newFO
}
}
},
selectedChanged: function(opts) {
// Use this to update the current selected elements
selElems = opts.elems;
var i = selElems.length;
while(i--) {
var elem = selElems[i];
if(elem && elem.tagName == "foreignObject") {
if(opts.selectedElement && !opts.multiselected) {
$('#itex_font_size').val(elem.getAttribute("font-size"));
$('#itex_width').val(elem.getAttribute("width"));
$('#itex_height').val(elem.getAttribute("height"));
showPanel(true);
} else {
showPanel(false);
}
} else {
showPanel(false);
}
}
},
elementChanged: function(opts) {
var elem = opts.elems[0];
}
};
});
});