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

Fix connectors to work with foreignObject

Browse source 
Alexis got this working on SVG-Edit trunk.
This commit is contained in:
Jacques Distler 2010-02-18 10:12:44 -06:00
parent 08cd194330
commit 2dfb852727
5 changed files with 95 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,70 +74,44 @@ $(function() {
}
function findConnectors() {
// Check if selected elements have connections
var elems = selElems;
var i = elems.length;
var connectors = $(svgcontent).find(conn_sel);
if(!connectors.length) return;
connections = [];
var sel = ':not(a,g,svg,'+conn_sel+')';
var all_els = [];
// Get children from groups
while(i--) {
var elem = elems[i];
if(!elem) continue;
// Get all children that cannot contain children
var solid_elems = $(elem).find(sel);
// Include self if okay
if($(elem).filter(sel).length) {
solid_elems.push(elem);
}
$.merge(all_els, solid_elems);
}
i = all_els.length;
if(i > 1) {
// Multiselected, so unselect connector
svgCanvas.removeFromSelection($(conn_sel).toArray());
}
// Loop through selected elements
while(i--) {
var elem = all_els[i];
if(!elem) continue;
// Element was deleted, so delete connector
var was_deleted = !elem.parentNode;
// Skip connector
if($(elem).data('c_start')) continue;
// Loop through connectors to see if one is connected to the element
connectors.each(function() {
var start = $(this).data("c_start");
var end = $(this).data("c_end");
// Connector found for this element
if(start == elem.id || end == elem.id) {
if(was_deleted) {
$(this).remove();
return;
var parts = [getElem(start), getElem(end)];
for(var i=0; i<2; i++) {
var c_elem = parts[i];
var add_this = false;
// The connected element might be part of a selected group
$(c_elem).parents().each(function() {
if($.inArray(this, elems) !== -1) {
// Pretend this element is selected
add_this = true;
}
var bb = svgCanvas.getStrokedBBox([elem]);
});
if(!c_elem || !c_elem.parentNode) {
$(this).remove();
continue;
}
if($.inArray(c_elem, elems) !== -1 || add_this) {
var bb = svgCanvas.getStrokedBBox([c_elem]);
connections.push({
elem: elem,
elem: c_elem,
connector: this,
is_start: start == elem.id,
is_start: (i === 0),
start_x: bb.x,
start_y: bb.y
});
}
});
}
});
}
function updateConnectors() {
@ -300,7 +274,6 @@ $(function() {
},
mouseDown: function(opts) {
var e = opts.event;
start_x = opts.start_x,
start_y = opts.start_y;
var mode = svgCanvas.getMode();
@ -316,7 +289,9 @@ $(function() {
if($.inArray(svgcontent, parents) != -1) {
// Connectable element
start_elem = mouse_target;
// If child of foreignObject, use parent
var fo = $(mouse_target).closest("foreignObject");
start_elem = fo.length ? fo[0] : mouse_target;
// Get center of source element
var bb = svgCanvas.getStrokedBBox([start_elem]);
@ -422,10 +397,13 @@ $(function() {
var zoom = svgCanvas.getZoom();
var e = opts.event,
x = opts.mouse_x/zoom,
y = opts.mouse_y/zoom;
y = opts.mouse_y/zoom,
mouse_target = e.target;
if(svgCanvas.getMode() == "connector") {
if(e.target.parentNode.parentNode != svgcontent) {
var fo = $(mouse_target).closest("foreignObject");
if(fo.length) mouse_target = fo[0];
if(mouse_target.parentNode.parentNode != svgcontent) {
// Not a valid target element, so remove line
$(cur_line).remove();
started = false;
@ -434,7 +412,7 @@ $(function() {
element: null,
started: started
}
} else if(e.target == start_elem) {
} else if(mouse_target == start_elem) {
// Start line through click
started = true;
return {
@ -444,7 +422,8 @@ $(function() {
}
} else {
// Valid end element
end_elem = e.target;
end_elem = mouse_target;
var start_id = start_elem.id, end_id = end_elem.id;
var conn_str = start_id + " " + end_id;
var alt_str = end_id + " " + start_id;

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

@ -63,7 +63,6 @@ $(function() {
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();

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

@ -45,7 +45,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<title>SVG-edit</title>
</head>
<body>
<div id="svg_editor">
<div id="workarea">

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

@ -1385,6 +1385,11 @@ function BatchCommand(text) {
}
}
// Safari crashes on a <use> without a xlink:href, so we just remove the node here
if (node.nodeName == "use" && !node.getAttributeNS(xlinkns,"href")) {
parent.removeChild(node);
return;
}
// if the element has attributes pointing to a non-local reference,
// need to remove the attribute
$.each(["clip-path", "fill", "marker-end", "marker-mid", "marker-start", "mask", "stroke"],function(i,attr) {
@ -2647,6 +2652,7 @@ function BatchCommand(text) {
};
var hasMatrixTransform = function(tlist) {
if(!tlist) return false;
var num = tlist.numberOfItems;
while (num--) {
var xform = tlist.getItem(num);
@ -3083,11 +3089,13 @@ function BatchCommand(text) {
start_x: start_x,
start_y: start_y,
selectedElements: selectedElements
});
}, true);
if(ext_result) {
started = ext_result.started;
$.each(ext_result, function(i, r) {
if(r && r.started) {
started = true;
}
});
};
// in this function we do not record any state changes yet (but we do update
@ -3604,13 +3612,15 @@ function BatchCommand(text) {
event: evt,
mouse_x: mouse_x,
mouse_y: mouse_y
});
}, true);
if(ext_result) {
keep = ext_result.keep;
element = ext_result.element;
started = ext_result.started;
$.each(ext_result, function(i, r) {
if(r) {
keep = r.keep || keep;
element = r.element;
started = r.started || started;
}
});
if (!keep && element != null) {
element.parentNode.removeChild(element);
@ -5618,28 +5628,33 @@ function BatchCommand(text) {
var content = $(svgcontent);
var attrs = {
id: 'svgcontent',
overflow: 'visible'
};
// determine proper size
var w, h;
if (content.attr("viewBox")) {
var vb = content.attr("viewBox").split(' ');
w = vb[2];
h = vb[3];
attrs.width = vb[2];
attrs.height = vb[3];
}
// handle content that doesn't have a viewBox
else {
var dims = content.attr(["width", "height"]);
w = convertToNum('width', dims.width);
h = convertToNum('height', dims.height);
// svgcontent.setAttribute("viewBox", ["0", "0", w, h].join(" "));
$.each(['width', 'height'], function(i, dim) {
// Set to 100 if not given
var val = content.attr(dim) || 100;
if((val+'').substr(-1) === "%") {
// Use user units if percentage given
attrs[dim] = parseInt(val);
} else {
attrs[dim] = convertToNum(dim, val);
}
});
}
content.attr({
id: 'svgcontent',
width: w,
height: h,
overflow: 'visible'
});
content.attr(attrs);
batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
// update root to the correct size
var changes = content.attr(["width", "height"]);
@ -6602,7 +6617,19 @@ function BatchCommand(text) {
ret.y += parseFloat(selected.getAttribute('y'));
} else {
try { ret = selected.getBBox(); }
catch(e) { ret = null; }
catch(e) {
// Check if element is child of a foreignObject
var fo = $(selected).closest("foreignObject");
if(fo.length) {
try {
ret = fo[0].getBBox();
} catch(e) {
ret = null;
}
} else {
ret = null;
}
}
}
// get the bounding box from the DOM (which is in that element's coordinate system)
@ -7326,6 +7353,7 @@ function BatchCommand(text) {
// re-creating the getCheckedBBox() function? shouldn't we make this a function
// at the 'canvas' level
var getCheckedBBox = function(elem) {
try {
// TODO: Fix issue with rotated groups. Currently they work
// fine in FF, but not in other browsers (same problem mentioned
@ -7399,7 +7427,10 @@ function BatchCommand(text) {
}
return bb;
} catch(e) { return null; }
} catch(e) {
console.log(elem, e);
return null;
}
}
var full_bb;
@ -7565,7 +7596,7 @@ function BatchCommand(text) {
new_el.appendChild(copyElem(child));
break;
case 3: // text node
new_el.appendChild(child.cloneNode(false));
new_el.textContent = child.nodeValue;
break;
default:
break;
@ -7723,7 +7754,7 @@ function BatchCommand(text) {
// Function: getVersion
// Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function() {
return "svgcanvas.js ($Rev: 1404 $)";
return "svgcanvas.js ($Rev: 1409 $)";
};
this.setUiStrings = function(strs) {

9
public/svg-edit/test/test1.html
View file

@ -124,19 +124,22 @@
module("Import Module");
test("Test import use", function() {
expect(2);
expect(3);
svgCanvas.setSvgString("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" +
"<rect id='the-rect' width='200' height='200'/>" +
"<use id='the-use' xlink:href='#the-rect'/>" +
"<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" +
"<use id='no-use'/>" +
"</svg>");
var u = document.getElementById("the-use"),
fu = document.getElementById("foreign-use");
fu = document.getElementById("foreign-use"),
nfu = document.getElementById("no-use");
equals((u && u.nodeName == "use"), true, "Did not import <use> element");
equals((fu && !fu.getAttributeNS(xlinkns,"href")), true, "Did not remove reference to foreign element in <use>");
equals(fu, null, "Removed <use> element that had a foreign href");
equals(nfu, null, "Removed <use> element that had no href");
});
test("Test getUrlFromAttr", function() {