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

Added some optimization to element selection 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1712 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-09-10 18:51:59 +00:00
parent 354e5ce9fb
commit 6c4bc512ff
1 changed files with 90 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
editor/svgcanvas.js
View File

@ -427,6 +427,7 @@ var Utils = this.Utils = function() {
}(); }();
var elData = $.data;
// TODO: declare the variables and set them as null, then move this setup stuff to // TODO: declare the variables and set them as null, then move this setup stuff to
// an initialization function - probably just use clear() // an initialization function - probably just use clear()
@ -1159,58 +1160,17 @@ var SelectorManager;
} }
}) ); }) );
// this holds a reference to the grip elements for this selector // this holds a reference to the grip coordinates for this selector
this.selectorGrips = { "nw":null, this.gripCoords = { "nw":null,
"n":null, "n":null,
"ne":null, "ne":null,
"e":null, "e":null,
"se":null, "se":null,
"s":null, "s":null,
"sw":null, "sw":null,
"w":null "w":null
}; };
this.rotateGripConnector = this.selectorGroup.appendChild( addSvgElementFromJson({
"element": "line",
"attr": {
"id": ("selectorGrip_rotateconnector_" + this.id),
"stroke": "#22C",
"stroke-width": "1"
}
}) );
this.rotateGrip = this.selectorGroup.appendChild( addSvgElementFromJson({
"element": "circle",
"attr": {
"id": ("selectorGrip_rotate_" + this.id),
"fill": "lime",
"r": 4,
"stroke": "#22C",
"stroke-width": 2,
"style": "cursor:url(" + curConfig.imgPath + "rotate.png) 12 12, auto;"
}
}) );
// add the corner grips
for (var dir in this.selectorGrips) {
this.selectorGrips[dir] = this.selectorGroup.appendChild(
addSvgElementFromJson({
"element": "circle",
"attr": {
"id": ("selectorGrip_resize_" + dir + "_" + this.id),
"fill": "#22C",
"r": 4,
"style": ("cursor:" + dir + "-resize"),
// This expands the mouse-able area of the grips making them
// easier to grab with the mouse.
// This works in Opera and WebKit, but does not work in Firefox
// see https://bugzilla.mozilla.org/show_bug.cgi?id=500174
"stroke-width": 2,
"pointer-events":"all",
"display":"none"
}
}) );
}
// Function: Selector.showGrips // Function: Selector.showGrips
// Show the resize grips of this selector // Show the resize grips of this selector
// //
@ -1219,13 +1179,12 @@ var SelectorManager;
this.showGrips = function(show) { this.showGrips = function(show) {
// TODO: use suspendRedraw() here // TODO: use suspendRedraw() here
var bShow = show ? "inline" : "none"; var bShow = show ? "inline" : "none";
this.rotateGrip.setAttribute("display", bShow); selectorManager.selectorGripsGroup.setAttribute("display", bShow);
this.rotateGripConnector.setAttribute("display", bShow);
var elem = this.selectedElement; var elem = this.selectedElement;
for (var dir in this.selectorGrips) { if(elem && show) {
this.selectorGrips[dir].setAttribute("display", bShow); this.selectorGroup.appendChild(selectorManager.selectorGripsGroup);
this.updateGripCursors(getRotationAngle(elem));
} }
if(elem) this.updateGripCursors(getRotationAngle(elem));
}; };
// Function: Selector.updateGripCursors // Function: Selector.updateGripCursors
@ -1237,7 +1196,7 @@ var SelectorManager;
var dir_arr = []; var dir_arr = [];
var steps = Math.round(angle / 45); var steps = Math.round(angle / 45);
if(steps < 0) steps += 8; if(steps < 0) steps += 8;
for (var dir in this.selectorGrips) { for (var dir in selectorManager.selectorGrips) {
dir_arr.push(dir); dir_arr.push(dir);
} }
while(steps > 0) { while(steps > 0) {
@ -1245,8 +1204,8 @@ var SelectorManager;
steps--; steps--;
} }
var i = 0; var i = 0;
for (var dir in this.selectorGrips) { for (var dir in selectorManager.selectorGrips) {
this.selectorGrips[dir].setAttribute('style', ("cursor:" + dir_arr[i] + "-resize")); selectorManager.selectorGrips[dir].setAttribute('style', ("cursor:" + dir_arr[i] + "-resize"));
i++; i++;
}; };
}; };
@ -1255,7 +1214,8 @@ var SelectorManager;
// Updates the selector to match the element's size // Updates the selector to match the element's size
this.resize = function() { this.resize = function() {
var selectedBox = this.selectorRect, var selectedBox = this.selectorRect,
selectedGrips = this.selectorGrips, mgr = selectorManager,
selectedGrips = mgr.selectorGrips,
selected = this.selectedElement, selected = this.selectedElement,
sw = selected.getAttribute("stroke-width"); sw = selected.getAttribute("stroke-width");
var offset = 1/current_zoom; var offset = 1/current_zoom;
@ -1338,7 +1298,7 @@ var SelectorManager;
+ " " + nbax + "," + (nbay+nbah) + "z"; + " " + nbax + "," + (nbay+nbah) + "z";
assignAttributes(selectedBox, {'d': dstr}); assignAttributes(selectedBox, {'d': dstr});
var gripCoords = { this.gripCoords = {
nw: [nbax, nbay], nw: [nbax, nbay],
ne: [nbax+nbaw, nbay], ne: [nbax+nbaw, nbay],
sw: [nbax, nbay+nbah], sw: [nbax, nbay+nbah],
@ -1350,8 +1310,8 @@ var SelectorManager;
}; };
if(selected == selectedElements[0]) { if(selected == selectedElements[0]) {
for(var dir in gripCoords) { for(var dir in this.gripCoords) {
var coords = gripCoords[dir]; var coords = this.gripCoords[dir];
assignAttributes(selectedGrips[dir], { assignAttributes(selectedGrips[dir], {
cx: coords[0], cy: coords[1] cx: coords[0], cy: coords[1]
}); });
@ -1366,11 +1326,11 @@ var SelectorManager;
} }
// we want to go 20 pixels in the negative transformed y direction, ignoring scale // we want to go 20 pixels in the negative transformed y direction, ignoring scale
assignAttributes(this.rotateGripConnector, { x1: nbax + (nbaw)/2, assignAttributes(mgr.rotateGripConnector, { x1: nbax + (nbaw)/2,
y1: nbay, y1: nbay,
x2: nbax + (nbaw)/2, x2: nbax + (nbaw)/2,
y2: nbay- 20}); y2: nbay- 20});
assignAttributes(this.rotateGrip, { cx: nbax + (nbaw)/2, assignAttributes(mgr.rotateGrip, { cx: nbax + (nbaw)/2,
cy: nbay - 20 }); cy: nbay - 20 });
svgroot.unsuspendRedraw(sr_handle); svgroot.unsuspendRedraw(sr_handle);
@ -1409,11 +1369,70 @@ var SelectorManager;
// create parent selector group and add it to svgroot // create parent selector group and add it to svgroot
mgr.selectorParentGroup = svgdoc.createElementNS(svgns, "g"); mgr.selectorParentGroup = svgdoc.createElementNS(svgns, "g");
mgr.selectorParentGroup.setAttribute("id", "selectorParentGroup"); mgr.selectorParentGroup.setAttribute("id", "selectorParentGroup");
mgr.selectorGripsGroup = svgdoc.createElementNS(svgns, "g");
svgroot.appendChild(mgr.selectorParentGroup); svgroot.appendChild(mgr.selectorParentGroup);
mgr.selectorParentGroup.appendChild(mgr.selectorGripsGroup);
mgr.selectorMap = {}; mgr.selectorMap = {};
mgr.selectors = []; mgr.selectors = [];
mgr.rubberBandBox = null; mgr.rubberBandBox = null;
// this holds a reference to the grip elements
mgr.selectorGrips = { "nw":null,
"n":null,
"ne":null,
"e":null,
"se":null,
"s":null,
"sw":null,
"w":null
};
// add the corner grips
for (var dir in mgr.selectorGrips) {
var grip = addSvgElementFromJson({
"element": "circle",
"attr": {
"id": ("selectorGrip_resize_" + dir),
"fill": "#22C",
"r": 4,
"style": ("cursor:" + dir + "-resize"),
// This expands the mouse-able area of the grips making them
// easier to grab with the mouse.
// This works in Opera and WebKit, but does not work in Firefox
// see https://bugzilla.mozilla.org/show_bug.cgi?id=500174
"stroke-width": 2,
"pointer-events":"all"
}
});
elData(grip, "dir", dir);
elData(grip, "type", "resize");
this.selectorGrips[dir] = mgr.selectorGripsGroup.appendChild(grip);
}
// add rotator elems
this.rotateGripConnector = this.selectorGripsGroup.appendChild( addSvgElementFromJson({
"element": "line",
"attr": {
"id": ("selectorGrip_rotateconnector"),
"stroke": "#22C",
"stroke-width": "1"
}
}) );
this.rotateGrip = this.selectorGripsGroup.appendChild( addSvgElementFromJson({
"element": "circle",
"attr": {
"id": "selectorGrip_rotate",
"fill": "lime",
"r": 4,
"stroke": "#22C",
"stroke-width": 2,
"style": "cursor:url(" + curConfig.imgPath + "rotate.png) 12 12, auto;"
}
}) );
elData(this.rotateGrip, "type", "rotate");
if($("#canvasBackground").length) return; if($("#canvasBackground").length) return;
var canvasbg = svgdoc.createElementNS(svgns, "svg"); var canvasbg = svgdoc.createElementNS(svgns, "svg");
@ -4317,17 +4336,18 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// if it is a selector grip, then it must be a single element selected, // if it is a selector grip, then it must be a single element selected,
// set the mouse_target to that and update the mode to rotate/resize // set the mouse_target to that and update the mode to rotate/resize
if (mouse_target == selectorManager.selectorParentGroup && selectedElements[0] != null) { if (mouse_target == selectorManager.selectorParentGroup && selectedElements[0] != null) {
var gripid = evt.target.id, var grip = evt.target;
griptype = gripid.substr(0,20); var griptype = elData(grip, "type");
// rotating // rotating
if (griptype == "selectorGrip_rotate_") { if (griptype == "rotate") {
current_mode = "rotate"; current_mode = "rotate";
} }
// resizing // resizing
else if(griptype == "selectorGrip_resize_") { else if(griptype == "resize") {
current_mode = "resize"; current_mode = "resize";
current_resize_mode = gripid.substr(20,gripid.indexOf("_",20)-20); current_resize_mode = elData(grip, "dir");
} }
mouse_target = selectedElements[0]; mouse_target = selectedElements[0];
} }