zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use SVGElement.getIntersectionList() for multiselect. Remove some try-catch statements

master
Jeff Schiller 2015-11-30 19:08:13 -08:00
parent 59303eb6cc
commit 3f0db99c6c
2 changed files with 84 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
editor/svgcanvas.js
View File

@ -175,7 +175,7 @@ var cur_shape = all_properties.shape;
// Array with all the currently selected elements // Array with all the currently selected elements
// default size of 1 until it needs to grow bigger // default size of 1 until it needs to grow bigger
var selectedElements = new Array(1); var selectedElements = [];
// Function: addSvgElementFromJson // Function: addSvgElementFromJson
// Create a new SVG element based on the given object keys/values and add it to the current layer // Create a new SVG element based on the given object keys/values and add it to the current layer
@ -472,7 +472,7 @@ var encodableImages = {},
// DOM element for selection rectangle drawn by the user // DOM element for selection rectangle drawn by the user
rubberBox = null, rubberBox = null,
// Array of current BBoxes (still needed?) // Array of current BBoxes, used in getIntersectionList().
curBBoxes = [], curBBoxes = [],
// Object to contain all included extensions // Object to contain all included extensions
@ -537,42 +537,37 @@ var round = this.round = function(val) {
// This method sends back an array or a NodeList full of elements that // This method sends back an array or a NodeList full of elements that
// intersect the multi-select rubber-band-box on the current_layer only. // intersect the multi-select rubber-band-box on the current_layer only.
// //
// Since the only browser that supports the SVG DOM getIntersectionList is Opera, // We brute-force getIntersectionList for browsers that do not support it (Firefox).
// we need to provide an implementation here. We brute-force it for now.
// //
// Reference: // Reference:
// Firefox does not implement getIntersectionList(), see https://bugzilla.mozilla.org/show_bug.cgi?id=501421 // Firefox does not implement getIntersectionList(), see https://bugzilla.mozilla.org/show_bug.cgi?id=501421
// Webkit does not implement getIntersectionList(), see https://bugs.webkit.org/show_bug.cgi?id=11274
var getIntersectionList = this.getIntersectionList = function(rect) { var getIntersectionList = this.getIntersectionList = function(rect) {
if (rubberBox == null) { return null; } if (rubberBox == null) { return null; }
var parent = current_group || getCurrentDrawing().getCurrentLayer(); var parent = current_group || getCurrentDrawing().getCurrentLayer();
if (!curBBoxes.length) { var rubberBBox;
// Cache all bboxes if (!rect) {
curBBoxes = getVisibleElementsAndBBoxes(parent); rubberBBox = rubberBox.getBBox();
} else {
rubberBBox = svgcontent.createSVGRect(rect.x, rect.y, rect.width, rect.height);
} }
var resultList = null; var resultList = null;
try { if (typeof(svgroot.getIntersectionList) == 'function') {
resultList = parent.getIntersectionList(rect, null); // Offset the bbox of the rubber box by the offset of the svgcontent element.
} catch(e) { } rubberBBox.x += parseInt(svgcontent.getAttribute('x'), 10);
rubberBBox.y += parseInt(svgcontent.getAttribute('y'), 10);
resultList = svgroot.getIntersectionList(rubberBBox, parent);
}
if (resultList == null || typeof(resultList.item) != 'function') { if (resultList == null || typeof(resultList.item) != 'function') {
resultList = []; resultList = [];
var rubberBBox;
if (!rect) { if (!curBBoxes.length) {
rubberBBox = rubberBox.getBBox(); // Cache all bboxes
var o, curBBoxes = getVisibleElementsAndBBoxes(parent);
bb = {};
for (o in rubberBBox) {
bb[o] = rubberBBox[o] / current_zoom;
}
rubberBBox = bb;
} else {
rubberBBox = rect;
} }
var i = curBBoxes.length; var i = curBBoxes.length;
while (i--) { while (i--) {
@ -582,6 +577,7 @@ var getIntersectionList = this.getIntersectionList = function(rect) {
} }
} }
} }
// addToSelection expects an array, but it's ok to pass a NodeList // addToSelection expects an array, but it's ok to pass a NodeList
// because using square-bracket notation is allowed: // because using square-bracket notation is allowed:
// http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html // http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html
@ -602,47 +598,48 @@ getStrokedBBox = this.getStrokedBBox = function(elems) {
if (!elems.length) {return false;} if (!elems.length) {return false;}
// Make sure the expected BBox is returned if the element is a group // Make sure the expected BBox is returned if the element is a group
var getCheckedBBox = function(elem) { var getCheckedBBox = function(elem) {
// TODO: Fix issue with rotated groups. Currently they work
// fine in FF, but not in other browsers (same problem mentioned
// in Issue 339 comment #2).
try { var bb = svgedit.utilities.getBBox(elem);
// TODO: Fix issue with rotated groups. Currently they work if (!bb) {
// fine in FF, but not in other browsers (same problem mentioned return null;
// in Issue 339 comment #2). }
var angle = svgedit.utilities.getRotationAngle(elem);
var bb = svgedit.utilities.getBBox(elem); if ((angle && angle % 90) ||
var angle = svgedit.utilities.getRotationAngle(elem); svgedit.math.hasMatrixTransform(svgedit.transformlist.getTransformList(elem))) {
// Accurate way to get BBox of rotated element in Firefox:
if ((angle && angle % 90) || // Put element in group and get its BBox
svgedit.math.hasMatrixTransform(svgedit.transformlist.getTransformList(elem))) { var good_bb = false;
// Accurate way to get BBox of rotated element in Firefox: // Get the BBox from the raw path for these elements
// Put element in group and get its BBox var elemNames = ['ellipse', 'path', 'line', 'polyline', 'polygon'];
var good_bb = false; if (elemNames.indexOf(elem.tagName) >= 0) {
// Get the BBox from the raw path for these elements bb = good_bb = canvas.convertToPath(elem, true);
var elemNames = ['ellipse', 'path', 'line', 'polyline', 'polygon']; } else if (elem.tagName == 'rect') {
if (elemNames.indexOf(elem.tagName) >= 0) { // Look for radius
var rx = elem.getAttribute('rx');
var ry = elem.getAttribute('ry');
if (rx || ry) {
bb = good_bb = canvas.convertToPath(elem, true); bb = good_bb = canvas.convertToPath(elem, true);
} else if (elem.tagName == 'rect') {
// Look for radius
var rx = elem.getAttribute('rx');
var ry = elem.getAttribute('ry');
if (rx || ry) {
bb = good_bb = canvas.convertToPath(elem, true);
}
} }
}
if (!good_bb) { if (!good_bb) {
// Must use clone else FF freaks out // Must use clone else FF freaks out
var clone = elem.cloneNode(true); var clone = elem.cloneNode(true);
var g = document.createElementNS(NS.SVG, 'g'); var g = document.createElementNS(NS.SVG, 'g');
var parent = elem.parentNode; var parent = elem.parentNode;
parent.appendChild(g); parent.appendChild(g);
g.appendChild(clone); g.appendChild(clone);
bb = svgedit.utilities.bboxToObj(g.getBBox()); bb = svgedit.utilities.bboxToObj(g.getBBox());
parent.removeChild(g); parent.removeChild(g);
} }
// Old method: Works by giving the rotated BBox, // Old method: Works by giving the rotated BBox,
// this is (unfortunately) what Opera and Safari do // this is (unfortunately) what Opera and Safari do
// natively when getting the BBox of the parent group // natively when getting the BBox of the parent group
// var angle = angle * Math.PI / 180.0; // var angle = angle * Math.PI / 180.0;
// var rminx = Number.MAX_VALUE, rminy = Number.MAX_VALUE, // var rminx = Number.MAX_VALUE, rminy = Number.MAX_VALUE,
// rmaxx = Number.MIN_VALUE, rmaxy = Number.MIN_VALUE; // rmaxx = Number.MIN_VALUE, rmaxy = Number.MIN_VALUE;
@ -672,12 +669,8 @@ getStrokedBBox = this.getStrokedBBox = function(elems) {
// bb.y = rminy; // bb.y = rminy;
// bb.width = rmaxx - rminx; // bb.width = rmaxx - rminx;
// bb.height = rmaxy - rminy; // bb.height = rmaxy - rminy;
}
return bb;
} catch(e) {
console.log(elem, e);
return null;
} }
return bb;
}; };
var full_bb; var full_bb;
@ -753,11 +746,9 @@ var getVisibleElements = this.getVisibleElements = function(parent) {
var contentElems = []; var contentElems = [];
$(parent).children().each(function(i, elem) { $(parent).children().each(function(i, elem) {
try { if (elem.getBBox) {
if (elem.getBBox()) { contentElems.push(elem);
contentElems.push(elem); }
}
} catch(e) {}
}); });
return contentElems.reverse(); return contentElems.reverse();
}; };
@ -780,11 +771,9 @@ var getVisibleElementsAndBBoxes = this.getVisibleElementsAndBBoxes = function(pa
} }
var contentElems = []; var contentElems = [];
$(parent).children().each(function(i, elem) { $(parent).children().each(function(i, elem) {
try { if (elem.getBBox) {
if (elem.getBBox()) { contentElems.push({'elem':elem, 'bbox':getStrokedBBox([elem])});
contentElems.push({'elem':elem, 'bbox':getStrokedBBox([elem])}); }
}
} catch(e) {}
}); });
return contentElems.reverse(); return contentElems.reverse();
}; };
@ -1762,22 +1751,22 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// - if newList contains selected, do nothing // - if newList contains selected, do nothing
// - if newList doesn't contain selected, remove it from selected // - if newList doesn't contain selected, remove it from selected
// - for any newList that was not in selectedElements, add it to selected // - for any newList that was not in selectedElements, add it to selected
var elemsToRemove = [], elemsToAdd = [], var elemsToRemove = selectedElements.slice(), elemsToAdd = [],
newList = getIntersectionList(); newList = getIntersectionList();
len = selectedElements.length;
// For every element in the intersection, add if not present in selectedElements.
for (i = 0; i < len; ++i) {
var ind = newList.indexOf(selectedElements[i]);
if (ind == -1) {
elemsToRemove.push(selectedElements[i]);
} else {
newList[ind] = null;
}
}
len = newList.length; len = newList.length;
for (i = 0; i < len; ++i) { for (i = 0; i < len; ++i) {
if (newList[i]) {elemsToAdd.push(newList[i]);} var intElem = newList[i];
// Found an element that was not selected before, so we should add it.
if (selectedElements.indexOf(intElem) == -1) {
elemsToAdd.push(intElem);
}
// Found an element that was already selected, so we shouldn't remove it.
var foundInd = elemsToRemove.indexOf(intElem);
if (foundInd != -1) {
elemsToRemove.splice(foundInd, 1)
}
} }
if (elemsToRemove.length > 0) { if (elemsToRemove.length > 0) {
@ -1785,7 +1774,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
} }
if (elemsToAdd.length > 0) { if (elemsToAdd.length > 0) {
addToSelection(elemsToAdd); canvas.addToSelection(elemsToAdd);
} }
break; break;

16
editor/svgutils.js
View File

@ -476,14 +476,14 @@ svgedit.utilities.getBBox = function(elem) {
ret = selected.getBBox(); ret = selected.getBBox();
selected.textContent = ''; selected.textContent = '';
} else { } else {
try { ret = selected.getBBox();} catch(e){} if (selected.getBBox) { ret = selected.getBBox(); }
} }
break; break;
case 'path': case 'path':
if(!svgedit.browser.supportsPathBBox()) { if(!svgedit.browser.supportsPathBBox()) {
ret = svgedit.utilities.getPathBBox(selected); ret = svgedit.utilities.getPathBBox(selected);
} else { } else {
try { ret = selected.getBBox();} catch(e2){} if (selected.getBBox) { ret = selected.getBBox(); }
} }
break; break;
case 'g': case 'g':
@ -509,18 +509,14 @@ svgedit.utilities.getBBox = function(elem) {
ret = bb; ret = bb;
//} //}
} else if(~visElems_arr.indexOf(elname)) { } else if(~visElems_arr.indexOf(elname)) {
try { ret = selected.getBBox();} if (selected) { ret = selected.getBBox(); }
catch(e3) { else {
// Check if element is child of a foreignObject // Check if element is child of a foreignObject
var fo = $(selected).closest('foreignObject'); var fo = $(selected).closest('foreignObject');
if(fo.length) { if (fo.length) {
try { if (fo[0].getBBox) {
ret = fo[0].getBBox(); ret = fo[0].getBBox();
} catch(e4) {
ret = null;
} }
} else {
ret = null;
} }
} }
} }