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

Merge branch 'bzr/golem' of /Users/distler/Sites/code/instiki

Browse source
This commit is contained in:
Jacques Distler 2010-02-16 23:22:49 -06:00
parent 021c3dfc88 ce47d49e69
commit e5076085df
8 changed files with 562 additions and 298 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
public/svg-edit/editor/extensions/closepath_icons.svg Normal file
View file

@ -0,0 +1,43 @@
<svg xmlns="http://www.w3.org/2000/svg">
<g id="close">
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker viewBox="0 0 10 10" id="close_arrow_fw2" refY="5" markerUnits="strokeWidth" markerWidth="5" markerHeight="5" orient="auto" refX="8">
<path d="m0,0l10,5l-10,5l5,-5l-5,-5z" fill="#f00"/>
</marker>
</defs>
<g>
<title>Layer 1</title>
<path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m121.5,40l-84,106l27,115l166,2l29,-111"/>
<line x1="240" y1="136" x2="169.5" y2="74" stroke="#f00" stroke-width="15" fill="none" marker-end="url(#close_arrow_fw2)"/>
<g stroke-width="15" stroke="#00f" fill="#00ffff">
<circle r="30" cy="41" cx="123"/>
<circle r="30" cy="146" cx="40"/>
<circle r="30" cy="260" cx="69"/>
<circle r="30" cy="260" cx="228"/>
<circle r="30" cy="148" cx="260"/>
</g>
</g>
</svg>
</g>
<g id="open">
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<title>Layer 1</title>
<path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
<line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
<g stroke-width="15" stroke="#00f" fill="#0ff">
<circle r="30" cy="41" cx="123"/>
<circle r="30" cy="146" cx="40"/>
<circle r="30" cy="260" cx="69"/>
<circle r="30" cy="260" cx="228"/>
<circle r="30" cy="148" cx="260"/>
</g>
<g stroke="#f00" stroke-width="20" fill="none">
<line x1="168" y1="24.00001" x2="210" y2="150"/>
<line x1="210" y1="24.00001" x2="168" y2="150"/>
</g>
</g>
</svg>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
public/svg-edit/editor/extensions/ext-closepath.js
View file

@ -43,12 +43,13 @@ $(function() {
return { return {
name: "ClosePath", name: "ClosePath",
svgicons: "extensions/closepath_icons.svg",
context_tools: [{ context_tools: [{
type: "tool_button", type: "tool_button",
panel: "closepath_panel", panel: "closepath_panel",
title: "Open or Close path", title: "Open or Close path",
id: "close", id: "close",
events: { mousedown: toggleClosed } events: { click: toggleClosed }
}], }],
callback: function() { callback: function() {
$('#closepath_panel').hide(); $('#closepath_panel').hide();

278
public/svg-edit/editor/extensions/ext-foreignobject.js Normal file
View file

@ -0,0 +1,278 @@
/*
* ext-foreignobject.js
*
* Licensed under the Apache License, Version 2
*
* Copyright(c) 2010 Jacques Distler
* Copyright(c) 2010 Alexis Deveria
*
*/
$(function() {
svgCanvas.addExtension("foreignObject", 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",
editingforeign = false,
svgdoc = S.svgroot.parentNode.ownerDocument;
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; }");
$('#foreignObject_panel').toggle(on);
}
function toggleSourceButtons(on) {
$('#tool_source_save, #tool_source_cancel').toggle(!on);
$('#foreign_save, #foreign_cancel').toggle(on);
}
// Function: setForeignString(xmlString, elt)
// This function sets the content of element elt to the input XML.
//
// Parameters:
// xmlString - The XML text.
// elt - the parent element to append to
//
// Returns:
// This function returns false if the set was unsuccessful, true otherwise.
function setForeignString(xmlString) {
var elt = selElems[0];
try {
// convert string into XML document
var newDoc = Utils.text2xml('<svg xmlns="'+svgns+'" xmlns:xlink="'+xlinkns+'">'+xmlString+'</svg>');
// run it through our sanitizer to remove anything we do not support
S.sanitizeSvg(newDoc.documentElement);
elt.parentNode.replaceChild(svgdoc.importNode(newDoc.documentElement.firstChild, true), elt);
S.call("changed", [elt]);
svgCanvas.clearSelection();
} catch(e) {
console.log(e);
return false;
}
return true;
};
function showForeignEditor() {
var elt = selElems[0];
if (!elt || editingforeign) return;
editingforeign = true;
toggleSourceButtons(true);
elt.removeAttribute('fill');
var str = S.svgToString(elt, 0);
$('#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: "foreignObject",
svgicons: "extensions/foreignobject-icons.xml",
buttons: [{
id: "tool_foreign",
type: "mode",
title: "Foreign Object Tool",
events: {
'click': function() {
svgCanvas.setMode('foreign')
}
}
},{
id: "edit_foreign",
type: "context",
panel: "foreignObject_panel",
title: "Edit ForeignObject Content",
events: {
'click': function() {
showForeignEditor();
}
}
}],
context_tools: [{
type: "input",
panel: "foreignObject_panel",
title: "Change foreignObject's width",
id: "foreign_width",
label: "w",
size: 3,
events: {
change: function() {
setAttr('width', this.value);
}
}
},{
type: "input",
panel: "foreignObject_panel",
title: "Change foreignObject's height",
id: "foreign_height",
label: "h",
events: {
change: function() {
setAttr('height', this.value);
}
}
}, {
type: "input",
panel: "foreignObject_panel",
title: "Change foreignObject's height",
id: "foreign_font_size",
label: "font-size",
size: 2,
defval: 16,
events: {
change: function() {
setAttr('font-size', this.value);
}
}
}
],
callback: function() {
$('#foreignObject_panel').hide();
var endChanges = function() {
$('#svg_source_editor').hide();
editingforeign = 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', 'foreign_save').unbind()
.appendTo("#tool_source_back").click(function() {
if (!editingforeign) return;
if (!setForeignString($('#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', 'foreign_cancel').unbind()
.appendTo("#tool_source_back").click(function() {
endChanges();
});
}, 3000);
},
mouseDown: function(opts) {
var e = opts.event;
if(svgCanvas.getMode() == "foreign") {
var newText = 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 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";
m.appendChild(mi);
m.appendChild(mo);
m.appendChild(mi2);
newText.appendChild(m);
return {
started: true
}
}
},
mouseUp: function(opts) {
var e = opts.event;
if(svgCanvas.getMode() == "foreign") {
var attrs = $(e.target).attr(["width", "height"]);
keep = (attrs.width != 0 || attrs.height != 0);
svgCanvas.addToSelection([e.target], true);
return {
keep: keep,
element: e.target
}
}
},
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) {
$('#foreign_font_size').val(elem.getAttribute("font-size"));
$('#foreign_width').val(elem.getAttribute("width"));
$('#foreign_height').val(elem.getAttribute("height"));
showPanel(true);
} else {
showPanel(false);
}
} else {
showPanel(false);
}
}
},
elementChanged: function(opts) {
var elem = opts.elems[0];
}
};
});
});

96
public/svg-edit/editor/extensions/foreignobject-icons.xml Normal file
View file

@ -0,0 +1,96 @@
<svg xmlns="http://www.w3.org/2000/svg">
<g id="tool_foreign">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 84 84">
<g fill="#444" opacity="0.2" transform="translate(6,6)">
<path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
</g>
<g fill="#444" opacity="0.3" transform="translate(4,4)">
<path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
</g>
<g fill="#444" opacity="0.5" transform="translate(2,2)">
<path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
</g>
<g fill="#0000CC">
<path id="xyz321" d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
</g>
</svg>
</g>
<g id="edit_foreign">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="34 38 170 170" overflow="hidden">
<g fill="#000088">
<path d="M30.1,63.9v-4.3l30.2-14.9V50L36.5,61.7l23.8,11.7v5.3L30.1,63.9z"/>
<path d="M106.1,79.7v-1.1c4.2-0.5,4.8-1.1,4.8-5.2V58.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
c0,4.5,1.1,5.7,5.2,5.8v1.1H86.8v-1.1c4.1-0.3,4.9-1.1,4.9-5.1V57.9c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V55.4c0-3.5-0.6-4.6-2.5-4.6
c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H106.1z"/>
<path d="M147.3,80.5c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C151.3,79.6,149.8,80.5,147.3,80.5z M142.6,60.5c-8.7,3.2-11.7,5.8-11.7,10v0.3
c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V60.5z"/>
<path d="M165.3,80.5c-4.2,0-6.3-3.1-6.3-9.1V49.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C171.8,78.7,169,80.5,165.3,80.5z"/>
<path d="M193.8,79.7v-1.1c4.1-0.4,4.9-1.3,4.9-6.2V58.1c0-5-1.8-7.6-5.4-7.6c-2.8,0-5,1.2-8,4.5v17.4
c0,5,0.7,5.8,4.9,6.3v1.1h-15.6v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V38.5c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2l1.9-0.6
c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c3.3-4.3,6.3-6,10.6-6c5.9,0,8.9,3.9,8.9,11.5v14.3c0,5,0.4,5.5,4.3,6.3v1.1h-15.2V79.7z"/>
<path d="M59.1,116.1v-4.3l30.2-14.9v5.3l-23.8,11.7l23.8,11.7v5.3L59.1,116.1z"/>
<path d="M135.1,131.9v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.1c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.7c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5v-18.2c0-3.5-0.6-4.6-2.5-4.6
c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H135.1z"/>
<path d="M152.1,131.9v-1.1c5-0.3,5.7-1.1,5.7-6.3v-16.6c0-3.2-0.6-4.3-2.4-4.3c-0.6,0-1.6,0.1-2.4,0.2l-0.6,0.1v-1.1
l11.2-4L164,99v25.6c0,5.2,0.6,5.9,5.3,6.3v1.1L152.1,131.9L152.1,131.9z M160.8,93.1c-2,0-3.7-1.6-3.7-3.7c0-2,1.7-3.7,3.7-3.7
c2.1,0,3.7,1.7,3.7,3.7C164.6,91.6,163,93.1,160.8,93.1z"/>
<path d="M175.8,131v-5.3l23.7-11.8l-23.7-11.7v-5.3l30.1,14.9v4.3L175.8,131z"/>
<path d="M31.1,169.5v-4.3l30.2-14.9v5.3l-23.8,11.7L61.3,179v5.3L31.1,169.5z"/>
<path d="M71.3,186.4h-4.9l16.5-49.7h4.8L71.3,186.4z"/>
<path d="M127.1,185.3v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.6c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V161c0-3.5-0.6-4.6-2.5-4.6
c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H127.1L127.1,185.3z"/>
<path d="M168.3,186.1c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C172.3,185.2,170.8,186.1,168.3,186.1z M163.8,166.1c-8.7,3.2-11.7,5.8-11.7,10
v0.3c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V166.1z"/>
<path d="M186.3,186.1c-4.2,0-6.3-3.1-6.3-9.1v-21.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C192.8,184.3,190,186.1,186.3,186.1z"/>
<path d="M209.1,185.3h-13.4v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V144c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2
l1.9-0.6c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c0.9-1.2,1.9-2.2,2.8-3.1"/>
<path d="M209.1,157.9c-0.8,0.7-1.7,1.5-2.7,2.6v17.4c0,4,0.4,5.3,2.7,5.9"/>
</g>
<g>
<polyline opacity="0.2" fill="#231F20" points="209.1,76.4 118.7,186.5 139.1,186.4 209.1,121 209.1,76.4 "/>
<polyline opacity="0.4" fill="#231F20" points="209.1,76.2 118.5,186.5 129.7,186.4 200.2,120.3 209.1,100.8 209.1,76.4 "/>
<path fill="#FFD761" d="M121.6,88.7l0.8,87.5l62.3-56.7c0,0-15.3-25.8-24.8-30C151.1,85.6,121.6,88.7,121.6,88.7z"/>
<path fill="#FEA01E" d="M209.1,19.5h-54l-33.5,69.2c0,0,29.7-3.4,38.3,0.8c8.9,4.4,25,30.8,25,30.8l24.2-50V19.5z"/>
<path d="M120.4,153.7l-0.6,25l23.8-16.9c0,0-8-7-11.2-8.1C129.4,152.8,120.4,153.7,120.4,153.7z"/>
<polyline fill="none" stroke="#231F20" stroke-width="5" points="153.9,19.5 121.6,88.7 120.7,181.2 186.6,120.3 209.1,70.3 "/>
</g>
</svg>
</g>
<g id="svg_eof"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.1 KiB

32
public/svg-edit/editor/svg-editor.css
View file

@ -1,4 +1,4 @@
body { body {
background: #D8D8D8; background: #D8D8D8;
} }
@ -410,7 +410,6 @@ body {
#svg_editor #line_panel, #svg_editor #line_panel,
#svg_editor #image_panel, #svg_editor #image_panel,
#svg_editor #text_panel, #svg_editor #text_panel,
#svg_editor #foreignObject_panel,
#svg_editor #path_node_panel { #svg_editor #path_node_panel {
display: none; display: none;
} }
@ -683,12 +682,11 @@ span.zoom_tool {
text-align: right; text-align: right;
} }
#svg_source_editor, #svg_foreign_editor{ #svg_source_editor {
display: none; display: none;
} }
#svg_source_editor #svg_source_overlay, #svg_source_editor #svg_source_overlay {
#svg_foreign_editor #svg_foreign_overlay {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
@ -699,8 +697,7 @@ span.zoom_tool {
z-index: 5; z-index: 5;
} }
#svg_source_editor #svg_source_container, #svg_source_editor #svg_source_container {
#svg_foreign_editor #svg_foreign_container {
position: absolute; position: absolute;
top: 30px; top: 30px;
left: 30px; left: 30px;
@ -782,8 +779,7 @@ span.zoom_tool {
display: block; display: block;
} }
#svg_source_editor #svg_source_textarea, #svg_source_editor #svg_source_textarea {
#svg_foreign_editor #svg_foreign_textarea {
position: relative; position: relative;
width: 95%; width: 95%;
top: 5px; top: 5px;
@ -792,8 +788,7 @@ span.zoom_tool {
font-size: 12px; font-size: 12px;
} }
#svg_source_editor #tool_source_back, #svg_source_editor #tool_source_back {
#svg_foreign_editor #tool_foreign_back {
text-align: left; text-align: left;
padding-left: 20px; padding-left: 20px;
} }
@ -816,11 +811,6 @@ span.zoom_tool {
text-align: left; text-align: left;
} }
#svg_source_editor button, #svg_foreign_editor button, #svg_docprops button {
padding: 5px 5px 7px 28px;
margin: 5px 20px 0 0;
}
#svg_docprops button { #svg_docprops button {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
@ -849,17 +839,14 @@ span.zoom_tool {
z-index: 20000; z-index: 20000;
} }
button#tool_source_save, .toolbar_button button {
button#tool_source_cancel,
button#tool_foreign_save,
button#tool_foreign_cancel,
button#tool_docprops_save,
button#tool_docprops_cancel {
border:1px solid #dedede; border:1px solid #dedede;
line-height:130%; line-height:130%;
float: left;
background: #E8E8E8 none; background: #E8E8E8 none;
padding:5px 10px 5px 7px; /* Firefox */ padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */ line-height:17px; /* Safari */
margin: 5px 20px 0 0;
} }
.toolbar_button button .svg_icon { .toolbar_button button .svg_icon {
@ -971,4 +958,3 @@ button#tool_docprops_cancel {
-webkit-border-radius: 0px; -webkit-border-radius: 0px;
} }
foreignObject { line-height:1.0; }

31
public/svg-edit/editor/svg-editor.html
View file

@ -21,6 +21,7 @@
<script type="text/javascript" src="extensions/ext-closepath.js"></script> <script type="text/javascript" src="extensions/ext-closepath.js"></script>
<script type="text/javascript" src="extensions/ext-arrows.js"></script> <script type="text/javascript" src="extensions/ext-arrows.js"></script>
<script type="text/javascript" src="extensions/ext-connector.js"></script> <script type="text/javascript" src="extensions/ext-connector.js"></script>
<script type="text/javascript" src="extensions/ext-foreignobject.js"></script>
<!-- Release version of script tags: > <!-- Release version of script tags: >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
@ -331,22 +332,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<input id="text" type="text" title="Change text contents" size="35"/> <input id="text" type="text" title="Change text contents" size="35"/>
</div> </div>
<div id="foreignObject_panel">
<div class="toolset">
<label id="tool_foreign_width">w:
<input id="foreign_width" class="attr_changer" title="Change foreignObject's width" size="3" data-attr="width"/>
</label>
<label id="tool_foreign_height">h:
<input id="foreign_height" class="attr_changer" title="Change foreignObject's height" size="3" data-attr="height"/>
</label>
<label id="tool_foreign_font_size">
<span id="foreign_font_sizeLabel">font-size:</span>
<input id="foreign_font_size" class="attr_changer" title="Change Font Size" size="2" value="16" type="text" data-attr="font-size"/>
</label>
<div class="tool_button" id="tool_edit_foreign" title="Edit ForeignObject Content"><span></span></div>
</div>
</div>
<div id="path_node_panel"> <div id="path_node_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<div class="tool_button" id="tool_node_link" title="Link Control Points"></div> <div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
@ -381,7 +366,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div class="tool_button" id="tool_text" title="Text Tool [6]"></div> <div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
<div class="tool_button" id="tool_image" title="Image Tool [8]"></div> <div class="tool_button" id="tool_image" title="Image Tool [8]"></div>
<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div> <div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
<div class="tool_button" id="tool_foreign" title="Foreign Object Tool"></div>
<div style="display: none"> <div style="display: none">
<div id="tool_rect" title="Rectangle"></div> <div id="tool_rect" title="Rectangle"></div>
@ -469,19 +453,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div> </div>
</div> </div>
<div id="svg_foreign_editor">
<div id="svg_foreign_overlay"></div>
<div id="svg_foreign_container">
<div id="tool_foreign_back" class="toolbar_button">
<button id="tool_foreign_save">Apply Changes</button>
<button id="tool_foreign_cancel">Cancel</button>
</div>
<form>
<textarea id="svg_foreign_textarea" spellcheck="false"></textarea>
</form>
</div>
</div>
<div id="svg_docprops"> <div id="svg_docprops">
<div id="svg_docprops_overlay"></div> <div id="svg_docprops_overlay"></div>
<div id="svg_docprops_container"> <div id="svg_docprops_container">

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

@ -165,7 +165,6 @@ function svg_edit_setup() {
var selectedElement = null; var selectedElement = null;
var multiselected = false; var multiselected = false;
var editingsource = false; var editingsource = false;
var editingforeign = false;
var docprops = false; var docprops = false;
var fillPaint = new $.jGraduate.Paint({solidColor: "FF0000"}); // solid red var fillPaint = new $.jGraduate.Paint({solidColor: "FF0000"}); // solid red
@ -417,6 +416,73 @@ function svg_edit_setup() {
} }
} }
if(ext.context_tools) {
$.each(ext.context_tools, function(i, tool) {
// Add select tool
var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):"";
var panel = $('#' + tool.panel);
if(!panel.length) {
panel = $('<div>', {id: tool.panel}).appendTo("#tools_top");
}
// TODO: Allow support for other types, or adding to existing tool
switch (tool.type) {
case 'tool_button':
var html = '<div class="tool_button">' + tool.id + '</div>';
var div = $(html).appendTo(panel);
if (tool.events) {
$.each(tool.events, function(evt, func) {
$(div).bind(evt, func);
});
}
break;
case 'select':
var html = '<label' + cont_id + '>'
+ '<select id="' + tool.id + '">';
$.each(tool.options, function(val, text) {
var sel = (val == tool.defval) ? " selected":"";
html += '<option value="'+val+'"' + sel + '>' + text + '</option>';
});
html += "</select></label>";
// Creates the tool, hides & adds it, returns the select element
var sel = $(html).appendTo(panel).find('select');
$.each(tool.events, function(evt, func) {
$(sel).bind(evt, func);
});
break;
case 'input':
var html = '<label' + cont_id + '>'
+ '<span id="' + tool.id + '_label">'
+ tool.label + ':</span>'
+ '<input id="' + tool.id + '" title="' + tool.title
+ '" size="' + (tool.size || "4") + '" value="' + (tool.defval || "") + '" type="text"/></label>'
// Creates the tool, hides & adds it, returns the select element
// Add to given tool.panel
var inp = $(html).appendTo(panel).find('input');
if(tool.spindata) {
inp.SpinButton(tool.spindata);
}
if(tool.events) {
$.each(tool.events, function(evt, func) {
inp.bind(evt, func);
});
}
break;
default:
break;
}
});
}
if(ext.buttons) { if(ext.buttons) {
var fallback_obj = {}, var fallback_obj = {},
placement_obj = {}, placement_obj = {},
@ -451,6 +517,10 @@ function svg_edit_setup() {
cls = 'tool_button'; cls = 'tool_button';
parent = "#tools_left"; parent = "#tools_left";
break; break;
case 'context':
cls = 'tool_button';
parent = "#" + btn.panel;
break;
} }
var button = $('<div/>') var button = $('<div/>')
@ -521,11 +591,21 @@ function svg_edit_setup() {
$.each(btn.events, function(name, func) { $.each(btn.events, function(name, func) {
if(name == "click") { if(name == "click") {
if(btn.type == 'mode') { if(btn.type == 'mode') {
if(btn.includeWith) {
button.bind(name, func); button.bind(name, func);
} else {
button.bind(name, function() {
if(toolButtonClick(button)) {
func();
}
});
}
if(btn.key) { if(btn.key) {
$(document).bind('keydown', {combi: btn.key, disableInInput: true}, func); $(document).bind('keydown', {combi: btn.key, disableInInput: true}, func);
if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']'); if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']');
} }
} else {
button.bind(name, func);
} }
} else { } else {
button.bind(name, func); button.bind(name, func);
@ -542,7 +622,6 @@ function svg_edit_setup() {
fallback: fallback_obj, fallback: fallback_obj,
placement: placement_obj, placement: placement_obj,
callback: function(icons) { callback: function(icons) {
// Bad hack to make the icon match the current size // Bad hack to make the icon match the current size
// TODO: Write better hack! // TODO: Write better hack!
var old = curPrefs.iconsize; var old = curPrefs.iconsize;
@ -555,72 +634,6 @@ function svg_edit_setup() {
}); });
} }
if(ext.context_tools) {
$.each(ext.context_tools, function(i, tool) {
// Add select tool
var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):"";
var panel = $('#' + tool.panel);
if(!panel.length) {
panel = $('<div>', {id: tool.panel}).appendTo("#tools_top");
}
// TODO: Allow support for other types, or adding to existing tool
switch (tool.type) {
case 'tool_button':
var html = '<div class="tool_button">' + tool.id + '</div>';
var div = $(html).appendTo(panel);
if (tool.events) {
$.each(tool.events, function(evt, func) {
$(div).bind(evt, func);
});
}
break;
case 'select':
var html = '<label' + cont_id + '>'
+ '<select id="' + tool.id + '">';
$.each(tool.options, function(val, text) {
var sel = (val == tool.defval) ? " selected":"";
html += '<option value="'+val+'"' + sel + '>' + text + '</option>';
});
html += "</select></label>";
// Creates the tool, hides & adds it, returns the select element
var sel = $(html).appendTo(panel).find('select');
$.each(tool.events, function(evt, func) {
$(sel).bind(evt, func);
});
break;
case 'input':
var html = '<label' + cont_id + '">'
+ '<span id="' + tool.id + '_label">'
+ tool.label + ':</span>'
+ '<input id="' + tool.id + '" title="' + tool.title
+ '" size="' + (tool.size || "4") + '" value="' + (tool.defval || "") + '" type="text"/></label>'
// Creates the tool, hides & adds it, returns the select element
// Add to given tool.panel
var inp = $(html).appendTo(panel).find('input');
if(tool.spindata) {
inp.SpinButton(tool.spindata);
}
if(tool.events) {
$.each(tool.events, function(evt, func) {
$(sel).bind(evt, func);
});
}
break;
default:
break;
}
});
}
runCallback(); runCallback();
}; };
@ -652,8 +665,8 @@ function svg_edit_setup() {
// updates the toolbar (colors, opacity, etc) based on the selected element // updates the toolbar (colors, opacity, etc) based on the selected element
var updateToolbar = function() { var updateToolbar = function() {
if (selectedElement != null && if (selectedElement != null &&
selectedElement.tagName != "foreignObject" &&
selectedElement.tagName != "image" && selectedElement.tagName != "image" &&
selectedElement.tagName != "foreignObject" &&
selectedElement.tagName != "g") selectedElement.tagName != "g")
{ {
// get opacity values // get opacity values
@ -734,7 +747,7 @@ function svg_edit_setup() {
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\ $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
#ellipse_panel, #line_panel, #text_panel, #image_panel, #foreignObject_panel').hide(); #ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
if (elem != null) { if (elem != null) {
var elname = elem.nodeName; var elname = elem.nodeName;
var angle = svgCanvas.getRotationAngle(elem); var angle = svgCanvas.getRotationAngle(elem);
@ -772,7 +785,7 @@ function svg_edit_setup() {
} }
// Elements in this array cannot be converted to a path // Elements in this array cannot be converted to a path
var no_path = $.inArray(elname, ['image', 'text', 'path', 'g', 'use', 'foreignObject']) == -1; var no_path = $.inArray(elname, ['image', 'text', 'path', 'g', 'use']) == -1;
$('#tool_topath').toggle(no_path); $('#tool_topath').toggle(no_path);
$('#tool_reorient').toggle(elname == 'path'); $('#tool_reorient').toggle(elname == 'path');
$('#tool_reorient').toggleClass('disabled', angle == 0); $('#tool_reorient').toggleClass('disabled', angle == 0);
@ -800,7 +813,6 @@ function svg_edit_setup() {
circle: ['cx','cy','r'], circle: ['cx','cy','r'],
ellipse: ['cx','cy','rx','ry'], ellipse: ['cx','cy','rx','ry'],
line: ['x1','y1','x2','y2'], line: ['x1','y1','x2','y2'],
foreignObject: [],
text: [] text: []
}; };
@ -837,12 +849,6 @@ function svg_edit_setup() {
$('#text').focus().select(); $('#text').focus().select();
} }
} // text } // text
else if (el_name == 'foreignObject') {
$('#foreignObject_panel').css("display", "inline");
$('#foreign_font_size').val(elem.getAttribute("font-size"));
$('#foreign_width').val(elem.getAttribute("width"));
$('#foreign_height').val(elem.getAttribute("height"));
} //foreignObject
else if(el_name == 'image') { else if(el_name == 'image') {
var xlinkNS="http://www.w3.org/1999/xlink"; var xlinkNS="http://www.w3.org/1999/xlink";
var href = elem.getAttributeNS(xlinkNS, "href"); var href = elem.getAttributeNS(xlinkNS, "href");
@ -1331,11 +1337,6 @@ function svg_edit_setup() {
svgCanvas.setMode('text'); svgCanvas.setMode('text');
}; };
var clickForeign = function(){
toolButtonClick('#tool_foreign');
svgCanvas.setMode('foreign');
};
var clickPath = function(){ var clickPath = function(){
toolButtonClick('#tool_path'); toolButtonClick('#tool_path');
svgCanvas.setMode('path'); svgCanvas.setMode('path');
@ -1540,21 +1541,10 @@ function svg_edit_setup() {
var str = svgCanvas.getSvgString(); var str = svgCanvas.getSvgString();
$('#svg_source_textarea').val(str); $('#svg_source_textarea').val(str);
$('#svg_source_editor').fadeIn(); $('#svg_source_editor').fadeIn();
properlySourceSizeTextArea('source'); properlySourceSizeTextArea();
$('#svg_source_textarea').focus(); $('#svg_source_textarea').focus();
}; };
var showForeignEditor = function(elt){
if (!elt || editingforeign) return;
editingforeign = true;
elt.removeAttribute('fill');
var str = svgCanvas.getForeignString(elt);
$('#svg_foreign_textarea').val(str);
$('#svg_foreign_editor').fadeIn();
properlySourceSizeTextArea('foreign');
$('#svg_foreign_textarea').focus();
};
$('#svg_docprops_container').draggable({cancel:'button,fieldset'}); $('#svg_docprops_container').draggable({cancel:'button,fieldset'});
var showDocProperties = function(){ var showDocProperties = function(){
@ -1590,40 +1580,18 @@ function svg_edit_setup() {
$('#svg_docprops').fadeIn(); $('#svg_docprops').fadeIn();
}; };
var properlySourceSizeTextArea = function(str){ var properlySourceSizeTextArea = function(){
// TODO: remove magic numbers here and get values from CSS // TODO: remove magic numbers here and get values from CSS
var height = $('#svg_'+str+'_container').height() - 80; var height = $('#svg_source_container').height() - 80;
$('#svg_'+str+'_textarea').css('height', height); $('#svg_source_textarea').css('height', height);
}; };
var saveForeignEditor = function(elt){
if (!editingforeign) return;
var saveChanges = function() {
svgCanvas.clearSelection();
hideSourceEditor('foreign');
zoomImage();
populateLayers();
setTitle(svgCanvas.getImageTitle());
}
if (!svgCanvas.setForeignString($('#svg_foreign_textarea').val(), elt)) {
$.confirm(uiStrings.QerrorsRevertToSource, function(ok) {
if(!ok) return false;
saveChanges();
});
} else {
saveChanges();
}
setSelectMode();
}
var saveSourceEditor = function(){ var saveSourceEditor = function(){
if (!editingsource) return; if (!editingsource) return;
var saveChanges = function() { var saveChanges = function() {
svgCanvas.clearSelection(); svgCanvas.clearSelection();
hideSourceEditor('source'); hideSourceEditor();
zoomImage(); zoomImage();
populateLayers(); populateLayers();
setTitle(svgCanvas.getImageTitle()); setTitle(svgCanvas.getImageTitle());
@ -1850,28 +1818,18 @@ function svg_edit_setup() {
setFlyoutPositions(); setFlyoutPositions();
} }
var cancelOverlays = function(elt) { var cancelOverlays = function() {
$('#dialog_box').hide(); $('#dialog_box').hide();
if (!editingsource && !editingforeign && !docprops) return; if (!editingsource && !docprops) return;
if (editingsource) { if (editingsource) {
var oldString = svgCanvas.getSvgString(); var oldString = svgCanvas.getSvgString();
if (oldString != $('#svg_source_textarea').val()) { if (oldString != $('#svg_source_textarea').val()) {
$.confirm(uiStrings.QignoreSourceChanges, function(ok) { $.confirm(uiStrings.QignoreSourceChanges, function(ok) {
if(ok) hideSourceEditor('source'); if(ok) hideSourceEditor();
}); });
} else { } else {
hideSourceEditor('source'); hideSourceEditor();
}
}
else if (editingforeign) {
var oldString = svgCanvas.getForeignString(elt);
if (oldString != $('#svg_foreign_textarea').val()) {
$.confirm(uiStrings.QignoreSourceChanges, function(ok) {
if(ok) hideSourceEditor('foreign');
});
} else {
hideSourceEditor('foreign');
} }
} }
else if (docprops) { else if (docprops) {
@ -1880,11 +1838,10 @@ function svg_edit_setup() {
}; };
var hideSourceEditor = function(str){ var hideSourceEditor = function(){
$('#svg_'+str+'_editor').hide(); $('#svg_source_editor').hide();
editingsource = false; editingsource = false;
editingforeign = false; $('#svg_source_textarea').blur();
$('#svg_'+str+'_textarea').blur();
}; };
var hideDocProperties = function(){ var hideDocProperties = function(){
@ -1897,11 +1854,8 @@ function svg_edit_setup() {
// TODO: add canvas-centering code in here // TODO: add canvas-centering code in here
$(window).resize(function(evt) { $(window).resize(function(evt) {
if (editingsource) { if (!editingsource) return;
properlySourceSizeTextArea('source'); properlySourceSizeTextArea();
} else if(editingforeign) {
properlySourceSizeTextArea('foreign');
}
}); });
$('#url_notice').click(function() { $('#url_notice').click(function() {
@ -2037,7 +1991,7 @@ function svg_edit_setup() {
var bNoFill = (svgCanvas.getFillColor() == 'none'); var bNoFill = (svgCanvas.getFillColor() == 'none');
var bNoStroke = (svgCanvas.getStrokeColor() == 'none'); var bNoStroke = (svgCanvas.getStrokeColor() == 'none');
var buttonsNeedingStroke = [ '#tool_fhpath', '#tool_line' ]; var buttonsNeedingStroke = [ '#tool_fhpath', '#tool_line' ];
var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_foreign', '#tool_path', '#tool_edit_foreign']; var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_path'];
if (bNoStroke) { if (bNoStroke) {
for (index in buttonsNeedingStroke) { for (index in buttonsNeedingStroke) {
var button = buttonsNeedingStroke[index]; var button = buttonsNeedingStroke[index];
@ -2500,19 +2454,13 @@ function svg_edit_setup() {
{sel:'#tool_text', fn: clickText, evt: 'click', key: 7}, {sel:'#tool_text', fn: clickText, evt: 'click', key: 7},
{sel:'#tool_image', fn: clickImage, evt: 'mouseup', key: 8}, {sel:'#tool_image', fn: clickImage, evt: 'mouseup', key: 8},
{sel:'#tool_zoom', fn: clickZoom, evt: 'mouseup', key: 9}, {sel:'#tool_zoom', fn: clickZoom, evt: 'mouseup', key: 9},
{sel:'#tool_foreign', fn: clickForeign, evt: 'mouseup'},
{sel:'#tool_edit_foreign', fn: function(){showForeignEditor(selectedElement)}, evt: 'mouseup'},
{sel:'#tool_clear', fn: clickClear, evt: 'mouseup', key: [modKey+'N', true]}, {sel:'#tool_clear', fn: clickClear, evt: 'mouseup', key: [modKey+'N', true]},
{sel:'#tool_save', fn: function() { if(editingsource){saveSourceEditor()} {sel:'#tool_save', fn: function() { editingsource?saveSourceEditor():clickSave()}, evt: 'mouseup', key: [modKey+'S', true]},
else if(editingforeign){saveForeignEditor(selectedElement)}
else clickSave()}, evt: 'mouseup', key: [modKey+'S', true]},
{sel:'#tool_open', fn: clickOpen, evt: 'mouseup', key: [modKey+'O', true]}, {sel:'#tool_open', fn: clickOpen, evt: 'mouseup', key: [modKey+'O', true]},
{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]}, {sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]}, {sel:'#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true}, {sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
{sel:'#tool_foreign_cancel,#svg_source_overlay,#tool_docprops_cancel', fn: function(){cancelOverlays(selectedElement)}, evt: 'click', key: ['esc', false, false], hidekey: true},
{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'}, {sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},
{sel:'#tool_foreign_save', fn: function(){saveForeignEditor(selectedElement)}, evt: 'click'},
{sel:'#tool_docprops_save', fn: saveDocProperties, evt: 'click'}, {sel:'#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
{sel:'#tool_docprops', fn: showDocProperties, evt: 'mouseup', key: [modKey+'I', true]}, {sel:'#tool_docprops', fn: showDocProperties, evt: 'mouseup', key: [modKey+'I', true]},
{sel:'#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]}, {sel:'#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
@ -2812,7 +2760,7 @@ function svg_edit_setup() {
updateCanvas(true); updateCanvas(true);
}); });
// var revnums = "svg-editor.js ($Rev: 1386 $) "; // var revnums = "svg-editor.js ($Rev: 1395 $) ";
// revnums += svgCanvas.getVersion(); // revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums); // $('#copyright')[0].setAttribute("title", revnums);
return svgCanvas; return svgCanvas;
@ -2850,8 +2798,6 @@ function svg_edit_setup() {
'text':'text.png', 'text':'text.png',
'image':'image.png', 'image':'image.png',
'zoom':'zoom.png', 'zoom':'zoom.png',
'foreign':'foreign.png',
'edit_foreign':'edit_foreign.png',
'clone':'clone.png', 'clone':'clone.png',
'delete':'delete.png', 'delete':'delete.png',
@ -2905,8 +2851,6 @@ function svg_edit_setup() {
'#tool_text,#layer_rename':'text', '#tool_text,#layer_rename':'text',
'#tool_image':'image', '#tool_image':'image',
'#tool_zoom':'zoom', '#tool_zoom':'zoom',
'#tool_foreign':'foreign',
'#tool_edit_foreign':'edit_foreign',
'#tool_clone,#tool_clone_multi,#tool_node_clone':'clone', '#tool_clone,#tool_clone_multi,#tool_node_clone':'clone',
'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete', '#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
@ -2931,8 +2875,8 @@ function svg_edit_setup() {
'#layer_down':'go_down', '#layer_down':'go_down',
'#layerlist td.layervis':'eye', '#layerlist td.layervis':'eye',
'#tool_source_save,#tool_foreign_save,#tool_docprops_save':'ok', '#tool_source_save,#tool_docprops_save':'ok',
'#tool_source_cancel,#tool_foreign_cancel,#tool_docprops_cancel':'cancel', '#tool_source_cancel,#tool_docprops_cancel':'cancel',
'.flyout_arrow_horiz':'arrow_right', '.flyout_arrow_horiz':'arrow_right',
'.dropdown button, #main_button .dropdown':'arrow_down', '.dropdown button, #main_button .dropdown':'arrow_down',
@ -2977,13 +2921,13 @@ function svg_edit_setup() {
// 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=') != -1) {
var pre = 'source=data:image/svg+xml;base64,'; var pre = '?source=data:image/svg+xml;base64,';
var src = loc.substring(loc.indexOf(pre) + pre.length); var src = loc.substring(loc.indexOf(pre) + pre.length);
svgCanvas.setSvgString(Utils.decode64(src)); svgCanvas.setSvgString(Utils.decode64(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({ $.ajax({
'url': url, 'url': url,

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

@ -99,7 +99,7 @@ var isOpera = !!window.opera,
"ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], "ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
"feGaussianBlur": ["class", "id", "requiredFeatures", "stdDeviation"], "feGaussianBlur": ["class", "id", "requiredFeatures", "stdDeviation"],
"filter": ["class", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"], "filter": ["class", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"],
"foreignObject": ["class", "color", "font-size", "height", "id", "markdown", "opacity", "overflow", "requiredFeatures", "style", "transform", "width", "x", "y"], "foreignObject": ["class", "font-size", "height", "id", "markdown", "opacity", "overflow", "requiredFeatures", "style", "transform", "width", "x", "y"],
"g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], "g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
"image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"], "image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
"line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"], "line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"],
@ -114,7 +114,7 @@ var isOpera = !!window.opera,
"radialGradient": ["class", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "id", "r", "requiredFeatures", "spreadMethod", "systemLanguage", "xlink:href"], "radialGradient": ["class", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "id", "r", "requiredFeatures", "spreadMethod", "systemLanguage", "xlink:href"],
"rect": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "width", "x", "y"], "rect": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "width", "x", "y"],
"stop": ["class", "id", "offset", "requiredFeatures", "stop-color", "stop-opacity", "style", "systemLanguage"], "stop": ["class", "id", "offset", "requiredFeatures", "stop-color", "stop-opacity", "style", "systemLanguage"],
"svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "markdown", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "transform", "viewBox", "width", "xmlns", "xmlns:xlink"], "svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "markdown", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "transform", "viewBox", "width", "xmlns", "xmlns:se", "xmlns:xlink"],
"switch": ["class", "id", "requiredFeatures", "systemLanguage"], "switch": ["class", "id", "requiredFeatures", "systemLanguage"],
"symbol": ["class", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "preserveAspectRatio", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "viewBox"], "symbol": ["class", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "preserveAspectRatio", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "viewBox"],
"text": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "transform", "x", "xml:space", "y"], "text": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "transform", "x", "xml:space", "y"],
@ -155,6 +155,7 @@ var isOpera = !!window.opera,
"semantics": [] "semantics": []
}, },
// console.log('Start profiling') // console.log('Start profiling')
// setTimeout(function() { // setTimeout(function() {
// canvas.addToSelection(canvas.getVisibleElements()); // canvas.addToSelection(canvas.getVisibleElements());
@ -1557,7 +1558,8 @@ function BatchCommand(text) {
&& elem.nodeName == 'image' && elem.nodeName == 'image'
&& attr.localName == 'href' && attr.localName == 'href'
&& save_options.images && save_options.images
&& save_options.images == 'embed') { && save_options.images == 'embed')
{
var img = encodableImages[attrVal]; var img = encodableImages[attrVal];
if(img) attrVal = img; if(img) attrVal = img;
} }
@ -3056,28 +3058,6 @@ function BatchCommand(text) {
}); });
newText.textContent = "text"; newText.textContent = "text";
break; break;
case "foreign":
started = true;
var newText = addSvgElementFromJson({
"element": "foreignObject",
"attr": {
"x": x,
"y": y,
"id": getNextId(),
"font-size": cur_text.font_size,
"width": "24",
"height": "24",
"style": "pointer-events:inherit"
}
});
var m = svgdoc.createElementNS(mathns, 'math');
m.setAttributeNS(xmlnsns, 'xmlns', mathns);
m.setAttribute('display', 'inline');
var mi = svgdoc.createElementNS(mathns, 'mo');
mi.textContent = "\u03A6";
m.appendChild(mi);
newText.appendChild(m);
break;
case "path": case "path":
// Fall through // Fall through
case "pathedit": case "pathedit":
@ -3296,14 +3276,6 @@ function BatchCommand(text) {
'height': Math.abs(y-start_y*current_zoom) 'height': Math.abs(y-start_y*current_zoom)
},100); },100);
break; break;
case "foreignObject":
assignAttributes(shape,{
'width': 24,
'height': 24,
'x': x,
'y': y
},1000);
break;
case "text": case "text":
assignAttributes(shape,{ assignAttributes(shape,{
'x': x, 'x': x,
@ -3318,6 +3290,8 @@ function BatchCommand(text) {
shape.setAttributeNS(null, "y2", y); shape.setAttributeNS(null, "y2", y);
if (!window.opera) svgroot.unsuspendRedraw(handle); if (!window.opera) svgroot.unsuspendRedraw(handle);
break; break;
case "foreignObject":
// fall through
case "square": case "square":
// fall through // fall through
case "rect": case "rect":
@ -3525,7 +3499,7 @@ function BatchCommand(text) {
var attrs = $(element).attr(["x1", "x2", "y1", "y2"]); var attrs = $(element).attr(["x1", "x2", "y1", "y2"]);
keep = (attrs.x1 != attrs.x2 || attrs.y1 != attrs.y2); keep = (attrs.x1 != attrs.x2 || attrs.y1 != attrs.y2);
break; break;
case "foreign": case "foreignObject":
case "square": case "square":
case "rect": case "rect":
case "image": case "image":
@ -3667,7 +3641,7 @@ function BatchCommand(text) {
cleanupElement(element); cleanupElement(element);
if(current_mode == "path") { if(current_mode == "path") {
pathActions.toEditMode(element); pathActions.toEditMode(element);
} else if (current_mode == "text" || current_mode == "image" || current_mode == "foreign") { } else if (current_mode == "text" || current_mode == "image" || current_mode == "foreignObject") {
// keep us in the tool we were in unless it was a text or image element // keep us in the tool we were in unless it was a text or image element
canvas.addToSelection([element], true); canvas.addToSelection([element], true);
} }
@ -5376,6 +5350,15 @@ function BatchCommand(text) {
"visibility":"hidden" "visibility":"hidden"
}; };
// any attribute on the element not covered by the above
// TODO: make this list global so that we can properly maintain it
// TODO: what about @transform, @clip-rule, @fill-rule, etc?
$.each(['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'], function() {
if (elem.getAttribute(this)) {
attrs[this] = elem.getAttribute(this);
}
});
var path = addSvgElementFromJson({ var path = addSvgElementFromJson({
"element": "path", "element": "path",
"attr": attrs "attr": attrs
@ -5570,19 +5553,6 @@ function BatchCommand(text) {
return svgCanvasToString(); return svgCanvasToString();
}; };
// Function: getForeignString(elt)
// Returns the contents of element elt as XML text.
//
// Parameters:
// elt - The foreignObject Element.
//
// Returns:
// The contents of elt as raw XML text.
this.getForeignString = function(elt) {
var s = svgToString(elt, 0);
return s;
};
// Function: setSvgString // Function: setSvgString
// This function sets the current drawing as the input SVG XML. // This function sets the current drawing as the input SVG XML.
// //
@ -5694,32 +5664,6 @@ function BatchCommand(text) {
return true; return true;
}; };
// Function: setForeignString(xmlString, elt)
// This function sets the content of element elt to the input XML.
//
// Parameters:
// xmlString - The XML text.
// elt - the parent element to append to
//
// Returns:
// This function returns false if the set was unsuccessful, true otherwise.
this.setForeignString = function(xmlString, elt) {
try {
// convert string into XML document
var newDoc = Utils.text2xml('<svg xmlns="'+svgns+'" xmlns:xlink="'+xlinkns+'">'+xmlString+'</svg>');
// run it through our sanitizer to remove anything we do not support
sanitizeSvg(newDoc.documentElement);
elt.parentNode.replaceChild(svgdoc.importNode(newDoc.documentElement.firstChild, true), elt);
call("changed", [elt]);
} catch(e) {
console.log(e);
return false;
}
return true;
};
// Layer API Functions // Layer API Functions
// Group: Layers // Group: Layers
@ -7595,8 +7539,9 @@ function BatchCommand(text) {
// manually create a copy of the element // manually create a copy of the element
var new_el = document.createElementNS(el.namespaceURI, el.nodeName); var new_el = document.createElementNS(el.namespaceURI, el.nodeName);
$.each(el.attributes, function(i, attr) { $.each(el.attributes, function(i, attr) {
if (attr.localName != '-moz-math-font-style') if (attr.localName != '-moz-math-font-style') {
new_el.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.nodeValue); new_el.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.nodeValue);
}
}); });
// set the copied element's new id // set the copied element's new id
new_el.removeAttribute("id"); new_el.removeAttribute("id");
@ -7776,7 +7721,7 @@ 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: 1391 $)"; return "svgcanvas.js ($Rev: 1394 $)";
}; };
this.setUiStrings = function(strs) { this.setUiStrings = function(strs) {