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

Fix Issue 55: height of bottom toolbar. Also improve code for recalculating outline/dimensions. Also fix it so that multiple elements can be moved using the arrow keys 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@281 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-07-08 00:03:08 +00:00
parent cc545ba273
commit 5551bc97ca
3 changed files with 153 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
editor/svg-editor.css
View File

@ -258,13 +258,11 @@ div.color_block {
#svg_editor #tools_bottom_1 {
width: 100px;
height: 100px;
float: left;
}
#svg_editor #tools_bottom_2 {
width: 250px;
height: 100px;
float: left;
}

2
editor/svg-editor.js
View File

@ -350,7 +350,7 @@ function svg_edit_setup() {
}
var moveSelected = function(dx,dy) {
if (selectedElement != null) {
if (selectedElement != null || multiselected) {
svgCanvas.moveSelectedElement(dx,dy);
}
}

92
editor/svgcanvas.js
View File

@ -108,7 +108,8 @@ function BatchCommand(text) {
this.stack = [];
this.apply = function() {
for (var i = 0; i < this.stack.length; ++i) {
var len = this.stack.length;
for (var i = 0; i < len; ++i) {
this.stack[i].apply();
}
};
@ -551,22 +552,38 @@ function SvgCanvas(c)
return out;
}; // end svgToString()
var recalculateSelectedDimensions = function() {
var recalculateAllSelectedDimensions = function() {
var text = (current_resize_mode == "none" ? "position" : "size");
var batchCmd = new BatchCommand(text);
for (var i = 0; i < selectedElements.length; ++i) {
var i = selectedElements.length;
while(i--) {
var cmd = recalculateSelectedDimensions(i);
if (cmd) {
batchCmd.addSubCommand(cmd);
}
}
if (!batchCmd.isEmpty()) {
addCommandToHistory(batchCmd);
call("changed", selectedElements);
}
};
// this function returns the command which resulted from th selected change
var recalculateSelectedDimensions = function(i) {
var selected = selectedElements[i];
if (selected == null) break;
if (selected == null) return null;
var selectedBBox = selectedBBoxes[i];
var box = selected.getBBox();
// if we have not moved/resized, then immediately leave
if (box.x == selectedBBox.x && box.y == selectedBBox.y &&
box.width == selectedBBox.width && box.height == selectedBBox.height) {
return;
return null;
}
// after this point, we have some change
// after this point, we have some change to this element
var remapx = function(x) {return ((x-box.x)/box.width)*selectedBBox.width + selectedBBox.x;}
var remapy = function(y) {return ((y-box.y)/box.height)*selectedBBox.height + selectedBBox.y;}
@ -659,20 +676,7 @@ function SvgCanvas(c)
break;
}
if (changes) {
batchCmd.addSubCommand(new ChangeElementCommand(selected, changes, text));
}
} // for each selected element
if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd);
call("changed", selectedElements);
};
var recalculateSelectedOutline = function() {
var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
var selected = selectedElements[i];
if (selected == null) break;
selectorManager.requestSelector(selected).resize(selectedBBoxes[i]);
return new ChangeElementCommand(selected, changes);
}
};
@ -1031,7 +1035,7 @@ function SvgCanvas(c)
selected.setAttribute("transform", ("translate(" + (left+tx) + "," + (top+ty) +
") scale(" + (sx) + "," + (sy) + ") translate(" + (-left) + "," + (-top) + ")"));
recalculateSelectedOutline();
selectorManager.requestSelector(selected).resize(selectedBBox);
break;
case "text":
shape.setAttribute("x", x);
@ -1085,7 +1089,8 @@ function SvgCanvas(c)
// TODO: should we fire the change event here? I'm thinking only fire
// this event when the user mouses up. That's when the action (create,
// move, resize, draw) has finished
// fire changed event
// Only question is whether in Wave Gadget mode whether we want to see the
// person live-dragging the element around (for instance)
// call("changed", selected);
};
@ -1093,7 +1098,7 @@ function SvgCanvas(c)
// and store it on the Undo stack
// - in move/resize mode, the element's attributes which were affected by the move/resize are
// identified, a ChangeElementCommand is created and stored on the stack for those attrs
// this is done in recalculateSelectedDimensions()
// this is done in when we recalculate the selected dimensions()
var mouseUp = function(evt)
{
if (!started) return;
@ -1129,8 +1134,11 @@ function SvgCanvas(c)
selectorManager.requestSelector(selected).showGrips(selected.tagName != "text");
}
recalculateSelectedDimensions();
recalculateSelectedOutline();
recalculateAllSelectedDimensions();
var i = selectedElements.length;
while(i--) {
selectorManager.requestSelector(selectedElements[i]).resize(selectedBBoxes[i]);
}
// we return immediately from select so that the obj_num is not incremented
return;
}
@ -1230,8 +1238,7 @@ function SvgCanvas(c)
// remove the selected outline before serializing
this.clearSelection();
var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n";
// see http://jwatt.org/svg/authoring/#doctype-declaration
// str += "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
// no need for doctype, see http://jwatt.org/svg/authoring/#doctype-declaration
str += svgToString(svgroot, 0);
this.saveHandler(str);
};
@ -1441,6 +1448,9 @@ function SvgCanvas(c)
}
};
// TODO: to prevent paths/lines from getting fill values set, we can special-case
// the fill attribute here and if tagName == "path" or "line" then ignore it?
// ^^^ is a hack though
this.changeSelectedAttribute = function(attr, val) {
var batchCmd = new BatchCommand("Change " + attr);
var len = selectedElements.length;
@ -1453,8 +1463,7 @@ function SvgCanvas(c)
if (attr == "#text") selected.textContent = val;
else selected.setAttribute(attr, val);
selectedBBoxes[i] = selected.getBBox();
// TODO: do the select calculation in here directly
recalculateSelectedOutline();
selectorManager.requestSelector(selected).resize(selectedBBoxes[i]);
var changes = {};
changes[attr] = oldval;
batchCmd.addSubCommand(new ChangeElementCommand(selected, changes, attr));
@ -1515,16 +1524,25 @@ function SvgCanvas(c)
}
};
// TODO: get this to work with multiple selected elements
this.moveSelectedElement = function(dx,dy) {
var selected = selectedElements[0];
var batchCmd = new BatchCommand("position");
var i = selectedElements.length;
while (i--) {
var selected = selectedElements[i];
if (selected != null) {
selectedBBoxes[0] = selected.getBBox();
selectedBBoxes[0].x += dx;
selectedBBoxes[0].y += dy;
recalculateSelectedDimensions();
recalculateSelectedOutline();
selectedBBoxes[i] = selected.getBBox();
selectedBBoxes[i].x += dx;
selectedBBoxes[i].y += dy;
var cmd = recalculateSelectedDimensions(i);
if (cmd) {
batchCmd.addSubCommand(cmd);
}
selectorManager.requestSelector(selected).resize(selectedBBoxes[i]);
}
}
if (!batchCmd.isEmpty()) {
addCommandToHistory(batchCmd);
call("changed", selectedElements);
}
};