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

Added initial support for multiple path node selection (issue 277)

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1245 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Alexis Deveria
2010-01-19 21:14:53 +00:00
parent 783ad05a45
commit eb1aa6ffe9
2 changed files with 277 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
editor/svg-editor.js
View File

@@ -164,40 +164,53 @@ function svg_edit_setup() {
// called when we've selected a different element // called when we've selected a different element
var selectedChanged = function(window,elems) { var selectedChanged = function(window,elems) {
if (selectedElement && selectedElement.id.indexOf('pathpointgrip') == 0) {
$('#path_node_panel').hide();
$('#tools_bottom_2,#tools_bottom_3').show();
var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width');
$('#tool_select').empty().append($.getSvgIcon('select'));
$.resizeSvgIcons({'#tool_select .svg_icon':size});
}
// if elems[1] is present, then we have more than one element // if elems[1] is present, then we have more than one element
selectedElement = (elems.length == 1 || elems[1] == null ? elems[0] : null); selectedElement = (elems.length == 1 || elems[1] == null ? elems[0] : null);
multiselected = (elems.length >= 2 && elems[1] != null); multiselected = (elems.length >= 2 && elems[1] != null);
var is_node = false;
if (selectedElement != null) { if (selectedElement != null) {
// unless we're already in always set the mode of the editor to select because // unless we're already in always set the mode of the editor to select because
// upon creation of a text element the editor is switched into // upon creation of a text element the editor is switched into
// select mode and this event fires - we need our UI to be in sync // select mode and this event fires - we need our UI to be in sync
is_node = !!(selectedElement.id && selectedElement.id.indexOf('pathpointgrip') == 0); if (svgCanvas.getMode() != "multiselect") {
if (svgCanvas.getMode() != "multiselect" && !is_node) {
setSelectMode(); setSelectMode();
updateToolbar(); updateToolbar();
} }
} // if (elem != null) } // if (elem != null)
// Deal with pathedit mode updateContextPanel();
$('#path_node_panel').toggle(is_node); };
$('#tools_bottom_2,#tools_bottom_3').toggle(!is_node);
// called when we've selected a different path node
var selectedPathNodeChanged = function(window, elems) {
$('#path_node_panel').show();
$('#tools_bottom_2,#tools_bottom_3').hide();
var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width'); var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width');
if(is_node) {
// Change select icon // Change select icon
$('.tool_button').removeClass('tool_button_current'); $('.tool_button').removeClass('tool_button_current');
$('#tool_select').addClass('tool_button_current') $('#tool_select').addClass('tool_button_current')
.empty().append($.getSvgIcon('select_node')); .empty().append($.getSvgIcon('select_node'));
} else {
$('#tool_select').empty().append($.getSvgIcon('select'));
}
$.resizeSvgIcons({'#tool_select .svg_icon':size}); $.resizeSvgIcons({'#tool_select .svg_icon':size});
updateContextPanel(); updateContextPanel();
if(elems.length) {
selectedElement = elems[0];
// multiselected = (elems.length >= 2);
}
}; };
// called when any element has changed // called when any element has changed
@@ -508,6 +521,7 @@ function svg_edit_setup() {
// bind the selected event to our function that handles updates to the UI // bind the selected event to our function that handles updates to the UI
svgCanvas.bind("selected", selectedChanged); svgCanvas.bind("selected", selectedChanged);
svgCanvas.bind("nodeselected", selectedPathNodeChanged);
svgCanvas.bind("changed", elementChanged); svgCanvas.bind("changed", elementChanged);
svgCanvas.bind("saved", saveHandler); svgCanvas.bind("saved", saveHandler);
svgCanvas.bind("zoomed", zoomChanged); svgCanvas.bind("zoomed", zoomChanged);
@@ -523,7 +537,7 @@ function svg_edit_setup() {
var color_blocks = ['#FFF','#888','#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)']; var color_blocks = ['#FFF','#888','#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
var str = ''; var str = '';
$.each(color_blocks, function() { $.each(color_blocks, function() {
str += '<div class="color_block" style="background:' + this + ';"></div>'; str += '<div class="color_block" style="background-color:' + this + ';"></div>';
}); });
$('#bg_blocks').append(str); $('#bg_blocks').append(str);
var blocks = $('#bg_blocks div'); var blocks = $('#bg_blocks div');

314
editor/svgcanvas.js
View File

@@ -2911,7 +2911,17 @@ function BatchCommand(text) {
case "path": case "path":
// fall through // fall through
case "pathedit": case "pathedit":
if(rubberBox && rubberBox.getAttribute('display') != 'none') {
assignAttributes(rubberBox, {
'x': Math.min(start_x,x),
'y': Math.min(start_y,y),
'width': Math.abs(x-start_x),
'height': Math.abs(y-start_y)
},100);
}
pathActions.mouseMove(mouse_x, mouse_y); pathActions.mouseMove(mouse_x, mouse_y);
break; break;
case "rotate": case "rotate":
var box = canvas.getBBox(selected), var box = canvas.getBBox(selected),
@@ -3299,35 +3309,80 @@ function BatchCommand(text) {
$('#ctrlpointgrip_container *').attr('display','none'); $('#ctrlpointgrip_container *').attr('display','none');
}; };
//
var addNodeToSelection = function(points) { var addNodeToSelection = function(points) {
// Currently only one node can be selected at a time, should allow more later // var point = points;
// Should point be the index or the grip element? if(!$.isArray(points)) points = [points];
var point = points; for(var i=0; i< points.length; i++) {
// if(!$.isArray(points)) points = [points]; var pt = points[i];
// if($.inArray(pt, selected_pts) == -1) {
// $.merge(selected_pts, points); selected_pts.push(pt);
// $.unique(selected_pts); }
}
selected_pts.sort();
var is_closed = pathIsClosed(); var is_closed = pathIsClosed();
var i = selected_pts.length;
var last_pt = current_path_pts.length/2 - 1; var last_pt = current_path_pts.length/2 - 1;
var grips = new Array(i);
current_path_pt = point;
$('#pathpointgrip_container circle').attr('stroke','#00F'); $('#pathpointgrip_container circle').attr('stroke','#00F');
$('#pathpointgrip_' + point).attr('stroke','#0FF'); // Loop through points to be selected and highlight each
var grip = $('#pathpointgrip_' + point); while(i--) {
$('#ctrlpointgrip_container circle').attr('fill', '#EEE'); var point = selected_pts[i];
$('#ctrlpointgrip_' + current_path_pt + 'c1, #ctrlpointgrip_' + current_path_pt + 'c2').attr('fill','#0FF'); $('#pathpointgrip_' + point).attr('stroke','#0FF');
grips[i] = $('#pathpointgrip_' + point)[0];
$('#ctrlpointgrip_container circle').attr('fill', '#EEE');
$('#ctrlpointgrip_' + point + 'c1, #ctrlpointgrip_' + point + 'c2').attr('fill','#0FF');
}
if(current_path_pt == -1) {
current_path_pt = selected_pts[0];
}
updateSegLine(); updateSegLine();
updateSegLine(true); updateSegLine(true);
call("selected", [grip[0]]); call("nodeselected", grips);
} };
var removeNodeFromSelection = function(point) {
var pos = $.inArray(point, selected_pts);
if(pos == -1) {
return;
} else {
selected_pts.splice(pos, 1);
}
$('#pathpointgrip_' + point).attr('stroke','#00F');
// grips[i] = $('#pathpointgrip_' + point)[0];
$('#ctrlpointgrip_container circle').attr('fill', '#EEE');
$('#ctrlpointgrip_' + point + 'c1, #ctrlpointgrip_' + point + 'c2').attr('fill','#0FF');
current_path_pt = selected_pts[0];
updateSegLine();
updateSegLine(true);
// call("nodeselected", grips);
};
var removeAllNodesFromSelection = function() {
var i = selected_pts.length;
var last_pt = current_path_pts.length/2 - 1;
$('#pathpointgrip_container circle').attr('stroke','#EEE');
$('#ctrlpointgrip_container circle').attr('fill', '#EEE');
selected_pts = [];
// call("nodeselected", []);
};
var selectNode = function(point) {
removeAllNodesFromSelection();
addNodeToSelection(point);
};
var addAllPointGripsToPath = function(pointToSelect) { var addAllPointGripsToPath = function(pointToSelect) {
// loop through and show all pointgrips // loop through and show all pointgrips
@@ -3374,7 +3429,7 @@ function BatchCommand(text) {
setPointContainerTransform(xform); setPointContainerTransform(xform);
} }
if(pointToSelect != null) { if(pointToSelect != null) {
addNodeToSelection(pointToSelect); selectNode(pointToSelect);
} }
}; };
@@ -3601,9 +3656,13 @@ function BatchCommand(text) {
addControlPointGrip(x2,y2, mouse_x,mouse_y, id1, true); addControlPointGrip(x2,y2, mouse_x,mouse_y, id1, true);
} }
} }
updateSegLine(); if(selected_pts.length > 1) {
if(next_type != 4) { getElem("segline").setAttribute('display','none');
updateSegLine(true); } else {
updateSegLine();
if(next_type != 4) {
updateSegLine(true);
}
} }
} }
@@ -3868,54 +3927,82 @@ function BatchCommand(text) {
var id = evt.target.id; var id = evt.target.id;
if (id.substr(0,14) == "pathpointgrip_") { if (id.substr(0,14) == "pathpointgrip_") {
// Select this point // Select this point
current_path_pt_drag = parseInt(id.substr(14)); current_path_pt = current_path_pt_drag = parseInt(id.substr(14));
addNodeToSelection(current_path_pt_drag);
// only clear selection if shift is not pressed (otherwise, add
// node to selection)
if (!evt.shiftKey) {
if(selected_pts.length <= 1 || $.inArray(current_path_pt, selected_pts) == -1) {
removeAllNodesFromSelection();
}
addNodeToSelection(current_path_pt);
} else if($.inArray(current_path_pt, selected_pts) != -1) {
removeNodeFromSelection(current_path_pt);
} else {
addNodeToSelection(current_path_pt);
}
// justSelected = current_path_pt;
updateSegLine(); updateSegLine();
// if(evt.shiftKey) {
// if(current_path_pt)
// }
} else if(id.indexOf("ctrlpointgrip_") == 0) { } else if(id.indexOf("ctrlpointgrip_") == 0) {
current_ctrl_pt_drag = id.split('_')[1]; current_ctrl_pt_drag = id.split('_')[1];
var node_num = current_ctrl_pt_drag.split('c')[0]-0; var node_num = current_ctrl_pt_drag.split('c')[0]-0;
addNodeToSelection(node_num); selectNode(node_num);
} }
if(current_path_pt_drag == -1 && current_ctrl_pt_drag == -1) { if(current_path_pt_drag == -1 && current_ctrl_pt_drag == -1) {
// if we haven't moused down on a shape, then go into multiselect mode
// otherwise, select it
canvas.clearSelection();
if (mouse_target.id != "svgroot") {
current_path = null;
canvas.addToSelection([mouse_target], true);
canvas.setMode("select");
// Insert the dummy transform here in case element is moved // start_x = x;
var tlist = canvas.getTransformList(mouse_target); // start_y = y;
tlist.insertItemBefore(svgroot.createSVGTransform(), 0); if (rubberBox == null) {
rubberBox = selectorManager.getRubberBandBox();
} }
else { assignAttributes(rubberBox, {
canvas.setMode("multiselect"); 'x': start_x * current_zoom,
if (rubberBox == null) { 'y': start_y * current_zoom,
rubberBox = selectorManager.getRubberBandBox();
}
assignAttributes(rubberBox, {
'x': start_x,
'y': start_y,
'width': 0, 'width': 0,
'height': 0, 'height': 0,
'display': 'inline' 'display': 'inline'
}, 100); }, 100);
}
// if we haven't moused down on a shape, then go into multiselect mode
// otherwise, select it
// console.log('clear!')
// canvas.clearSelection();
// if (mouse_target.id != "svgroot") {
// current_path = null;
// canvas.addToSelection([mouse_target], true);
// canvas.setMode("select");
//
// // Insert the dummy transform here in case element is moved
// var tlist = canvas.getTransformList(mouse_target);
// tlist.insertItemBefore(svgroot.createSVGTransform(), 0);
// }
// else {
// canvas.setMode("multiselect");
// if (rubberBox == null) {
// rubberBox = selectorManager.getRubberBandBox();
// }
// assignAttributes(rubberBox, {
// 'x': start_x,
// 'y': start_y,
// 'width': 0,
// 'height': 0,
// 'display': 'inline'
// }, 100);
// }
} }
}, },
mouseMove: function(mouse_x, mouse_y) { mouseMove: function(mouse_x, mouse_y) {
hasMoved = true;
if(current_mode == "path") { if(current_mode == "path") {
var line = getElem("path_stretch_line"); var line = getElem("path_stretch_line");
if (line) { if (line) {
line.setAttribute("x2", x *= current_zoom); line.setAttribute("x2", mouse_x);
line.setAttribute("y2", y *= current_zoom); line.setAttribute("y2", mouse_y);
} }
return; return;
} }
@@ -3923,7 +4010,17 @@ function BatchCommand(text) {
// if we are dragging a point, let's move it // if we are dragging a point, let's move it
if (current_path_pt_drag != -1 && current_path) { if (current_path_pt_drag != -1 && current_path) {
var old_path_pts = $.map(current_path_pts, function(n){return n/current_zoom;}); var old_path_pts = $.map(current_path_pts, function(n){return n/current_zoom;});
updatePath(mouse_x, mouse_y, old_path_pts); var diff_x = mouse_x - old_path_pts[current_path_pt*2];
var diff_y = mouse_y - old_path_pts[current_path_pt*2+1];
// console.log(diff_x, diff_y);
for(var i=0; i<selected_pts.length; i++) {
var sel_pt = selected_pts[i];
var sel_pt_x = old_path_pts[sel_pt*2] + diff_x;
var sel_pt_y = old_path_pts[sel_pt*2+1] + diff_y;
current_path_pt_drag = sel_pt;
updatePath(sel_pt_x, sel_pt_y, old_path_pts);
}
} else if (current_ctrl_pt_drag != -1 && current_path) { } else if (current_ctrl_pt_drag != -1 && current_path) {
// Moving the control point. Since only one segment is altered, // Moving the control point. Since only one segment is altered,
// we only need to do a pathSegList replace. // we only need to do a pathSegList replace.
@@ -3961,9 +4058,34 @@ function BatchCommand(text) {
var new_y = pt[1] - (mouse_y - pt[1]); var new_y = pt[1] - (mouse_y - pt[1]);
updateCurvedSegment(new_x, new_y, index, ctrl_num, true); updateCurvedSegment(new_x, new_y, index, ctrl_num, true);
} }
} else {
var len = current_path_pts.length;
var sel_pts = [];
selected_pts = [];
for(var i=0; i<len; i+=2) {
var x = current_path_pts[i];
var y = current_path_pts[i+1];
var rbb = rubberBox.getBBox();
var pt_bb = {
x: x,
y: y,
width: 0,
height: 0
};
if (Utils.rectsIntersect(rbb, pt_bb)) {
sel_pts.push(i/2);
}
}
removeAllNodesFromSelection();
selectNode(sel_pts);
} }
}, },
mouseUp: function(evt, element, mouse_x, mouse_y) { mouseUp: function(evt, element, mouse_x, mouse_y) {
var tempJustSelected = justSelected;
justSelected = null;
// Create mode // Create mode
if(current_mode == "path") { if(current_mode == "path") {
var x = mouse_x/current_zoom; var x = mouse_x/current_zoom;
@@ -4082,6 +4204,8 @@ function BatchCommand(text) {
// Edit mode // Edit mode
if (current_path_pt_drag != -1) { if (current_path_pt_drag != -1) {
var last_pt = current_path_pt_drag;
current_path_pt_drag = -1; current_path_pt_drag = -1;
var batchCmd = new BatchCommand("Edit Path"); var batchCmd = new BatchCommand("Edit Path");
@@ -4101,6 +4225,21 @@ function BatchCommand(text) {
current_path_pts[current_path_pts.length-1] = getPathPoint(0,true)[1]; current_path_pts[current_path_pts.length-1] = getPathPoint(0,true)[1];
} }
if(evt.shiftKey) {
if(tempJustSelected != current_path_pt) {
removeNodeFromSelection();
}
// if($.inArray(last_pt, selected_pts) != -1) {
// removeNodeFromSelection(last_pt)
// } else {
// addNodeToSelection(last_pt)
// }
} else if(!hasMoved) {
selectNode(last_pt);
}
// make these changes undo-able // make these changes undo-able
} // if (current_path_pt_drag != -1) } // if (current_path_pt_drag != -1)
else if(current_ctrl_pt_drag != -1) { else if(current_ctrl_pt_drag != -1) {
@@ -4110,13 +4249,20 @@ function BatchCommand(text) {
batchCmd.addSubCommand(new ChangeElementCommand(current_path, {d:current_path_oldd})); batchCmd.addSubCommand(new ChangeElementCommand(current_path, {d:current_path_oldd}));
addCommandToHistory(batchCmd); addCommandToHistory(batchCmd);
call("changed", [current_path]); call("changed", [current_path]);
} // else, move back to select mode
else {
current_mode = "select";
removeAllPointGripsFromPath();
canvas.clearSelection();
canvas.addToSelection([evt.target]);
} }
else if(rubberBox && rubberBox.getAttribute('display') != 'none') {
// Done with multi-node-select
rubberBox.setAttribute("display", "none");
if(rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) {
pathActions.toSelectMode(evt.target);
}
// else, move back to select mode
} else {
pathActions.toSelectMode(evt.target);
}
hasMoved = false;
}, },
toEditMode: function(element) { toEditMode: function(element) {
current_path = element; current_path = element;
@@ -4133,10 +4279,20 @@ function BatchCommand(text) {
// save the path's bbox // save the path's bbox
selectedBBoxes[0] = canvas.getBBox(current_path); selectedBBoxes[0] = canvas.getBBox(current_path);
addAllPointGripsToPath(); addAllPointGripsToPath();
addNodeToSelection(0); selectNode(0);
// addAllPointGripsToPath(current_path_pts.length/2 - 1); // addAllPointGripsToPath(current_path_pts.length/2 - 1);
}, },
toSelectMode: function(elem) {
var selPath = (elem == current_path);
current_mode = "select";
removeAllPointGripsFromPath();
canvas.clearSelection();
if(selPath) {
call("selected", [elem]);
canvas.addToSelection([elem], true);
}
},
select: function(target) { select: function(target) {
if (current_path == target) { if (current_path == target) {
pathActions.toEditMode(current_path); pathActions.toEditMode(current_path);
@@ -4307,7 +4463,7 @@ function BatchCommand(text) {
current_path_pts.splice(pt*2 + 2, 0, abs_x, abs_y); current_path_pts.splice(pt*2 + 2, 0, abs_x, abs_y);
resetPointGrips(); resetPointGrips();
addNodeToSelection(pt+1); selectNode(pt+1);
// current_path.setAttribute("d", convertToD(current_path.pathSegList)); // current_path.setAttribute("d", convertToD(current_path.pathSegList));
}, },
@@ -4318,28 +4474,34 @@ function BatchCommand(text) {
if(current_path_pts.length <= (is_closed?6:4)) return; if(current_path_pts.length <= (is_closed?6:4)) return;
var last_pt = current_path_pts.length/2 - 1; var last_pt = current_path_pts.length/2 - 1;
var pt = current_path_pt, list = current_path.pathSegList;
var cur_item = list.getItem(pt);
if(pt == 0) { var len = selected_pts.length;
var next_x = getPathPoint(1)[0]; while(len--) {
var next_y = getPathPoint(1)[1]; var pt = selected_pts[len];
// Make the next point be the "M" point
replacePathSeg(2, 1, [next_x, next_y]);
// Reposition last node var list = current_path.pathSegList;
if(is_closed) { var cur_item = list.getItem(pt);
var last_item = list.getItem(last_pt);
replacePathSeg(4, last_pt, [next_x, next_y]); if(pt == 0) {
removeControlPointGrips(last_pt - 1); var next_x = getPathPoint(1)[0];
current_path_pts.splice(last_pt*2, 2, next_x, next_y); var next_y = getPathPoint(1)[1];
current_path_pts.splice(0, 2); // Make the next point be the "M" point
replacePathSeg(2, 1, [next_x, next_y]);
// Reposition last node
if(is_closed) {
var last_item = list.getItem(last_pt);
replacePathSeg(4, last_pt, [next_x, next_y]);
removeControlPointGrips(last_pt - 1);
current_path_pts.splice(last_pt*2, 2, next_x, next_y);
current_path_pts.splice(0, 2);
}
} else {
current_path_pts.splice(pt*2, 2);
} }
} else {
current_path_pts.splice(pt*2, 2);
}
list.removeItem(pt); list.removeItem(pt);
}
resetPointGrips(); resetPointGrips();
@@ -4351,7 +4513,7 @@ function BatchCommand(text) {
pt--; pt--;
} }
addNodeToSelection(pt); selectNode(pt);
}, },
setPointContainerTransform: setPointContainerTransform, setPointContainerTransform: setPointContainerTransform,
setSegType: function(new_type) { setSegType: function(new_type) {