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

Move group opacity up to selected context panel. Shorten the bottom tool panel. Several minor loop optimizations

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@258 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Jeff Schiller
2009-07-03 02:49:42 +00:00
parent b859ba711b
commit 46940f1969
3 changed files with 73 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
editor/svg-editor.css
View File

@@ -68,7 +68,7 @@ body {
top: 70px; top: 70px;
left: 40px; left: 40px;
right: 2px; right: 2px;
bottom: 100px; bottom: 60px;
background-color: #A0A0A0; background-color: #A0A0A0;
border: 1px solid #808080; border: 1px solid #808080;
overflow: auto; overflow: auto;
@@ -134,6 +134,10 @@ div.color_block {
display: none; display: none;
} }
#svg_editor #selected_panel .selected_tool {
vertical-align: 12px;
}
#svg_editor #text_panel .text_tool { #svg_editor #text_panel .text_tool {
vertical-align: 12px; vertical-align: 12px;
} }
@@ -249,7 +253,7 @@ div.color_block {
left: 40px; left: 40px;
right: 2px; right: 2px;
bottom: 2px; bottom: 2px;
height: 100px; height: 60px;
} }
#svg_editor #tools_bottom_1 { #svg_editor #tools_bottom_1 {

32
editor/svg-editor.html
View File

@@ -3,7 +3,8 @@
<head> <head>
<link rel="stylesheet" href="jpicker/jpicker.css" type="text/css"/> <link rel="stylesheet" href="jpicker/jpicker.css" type="text/css"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/> <link rel="stylesheet" href="svg-editor.css" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.js"></script>
<!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script-->
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script> <script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script type="text/javascript" src="jpicker/jpicker.js"></script> <script type="text/javascript" src="jpicker/jpicker.js"></script>
<script type="text/javascript" src="svgcanvas.js"></script> <script type="text/javascript" src="svgcanvas.js"></script>
@@ -39,6 +40,18 @@
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/> <img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/> <img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/> <img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
<select id="group_opacity" class="selected_tool" title="Change selected item opacity">
<option selected="selected" value="1">100 %</option>
<option value="0.9">90 %</option>
<option value="0.8">80 %</option>
<option value="0.7">70 %</option>
<option value="0.6">60 %</option>
<option value="0.5">50 %</option>
<option value="0.4">40 %</option>
<option value="0.3">30 %</option>
<option value="0.2">20 %</option>
<option value="0.1">10 %</option>
</select>
</div> </div>
<!-- Buttons when something a single element is selected --> <!-- Buttons when something a single element is selected -->
@@ -185,23 +198,6 @@
<option value="5,2,2,2,2,2">- ..</option> <option value="5,2,2,2,2,2">- ..</option>
</select> </select>
</td> </td>
</tr><tr>
<td>group:</td>
<td></td>
<td>
<select id="group_opacity" title="Change group opacity">
<option selected="selected" value="1">100 %</option>
<option value="0.9">90 %</option>
<option value="0.8">80 %</option>
<option value="0.7">70 %</option>
<option value="0.6">60 %</option>
<option value="0.5">50 %</option>
<option value="0.4">40 %</option>
<option value="0.3">30 %</option>
<option value="0.2">20 %</option>
<option value="0.1">10 %</option>
</select>
</td>
</tr> </tr>
</table> </table>
</div> </div>

78
editor/svgcanvas.js
View File

@@ -435,8 +435,8 @@ function SvgCanvas(c)
var rubberBBox = rubberBox.getBBox(); var rubberBBox = rubberBox.getBBox();
var nodes = svgroot.childNodes; var nodes = svgroot.childNodes;
var len = svgroot.childNodes.length; var i = svgroot.childNodes.length;
for (var i = 0; i < len; ++i) { while (i--) {
if (nodes[i].id != "selectorParentGroup" && if (nodes[i].id != "selectorParentGroup" &&
Utils.rectsIntersect(rubberBBox, nodes[i].getBBox())) Utils.rectsIntersect(rubberBBox, nodes[i].getBBox()))
{ {
@@ -585,8 +585,10 @@ function SvgCanvas(c)
var M = selected.pathSegList.getItem(0); var M = selected.pathSegList.getItem(0);
var curx = M.x, cury = M.y; var curx = M.x, cury = M.y;
var newd = "M" + remapx(curx) + "," + remapy(cury); var newd = "M" + remapx(curx) + "," + remapy(cury);
for (var i = 1; i < selected.pathSegList.numberOfItems; ++i) { var segList = selected.pathSegList;
var l = selected.pathSegList.getItem(i); var len = segList.numberOfItems;
for (var i = 1; i < len; ++i) {
var l = segList.getItem(i);
var x = l.x, y = l.y; var x = l.x, y = l.y;
// webkit browsers normalize things and this becomes an absolute // webkit browsers normalize things and this becomes an absolute
// line segment! we need to turn this back into a rel line segment // line segment! we need to turn this back into a rel line segment
@@ -662,14 +664,11 @@ function SvgCanvas(c)
}; };
var recalculateSelectedOutline = function() { var recalculateSelectedOutline = function() {
for (var i = 0; i < selectedElements.length; ++i) { var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
var selected = selectedElements[i]; var selected = selectedElements[i];
if (selected == null) break; if (selected == null) break;
var selectedBBox = selectedBBoxes[i] selectorManager.requestSelector(selected).resize(selectedBBoxes[i]);
var theSelector = selectorManager.requestSelector(selected);
if (selected != null && theSelector != null) {
theSelector.resize(selectedBBox);
}
} }
}; };
@@ -677,8 +676,8 @@ function SvgCanvas(c)
this.clearSelection = function() { this.clearSelection = function() {
if (selectedElements[0] == null) { return; } if (selectedElements[0] == null) { return; }
var len = selectedElements.length;
for (var i = 0; i < selectedElements.length; ++i) { for (var i = 0; i < len; ++i) {
var elem = selectedElements[i]; var elem = selectedElements[i];
if (elem == null) break; if (elem == null) break;
selectorManager.releaseSelector(elem); selectorManager.releaseSelector(elem);
@@ -701,7 +700,8 @@ function SvgCanvas(c)
} }
// now add each element consecutively // now add each element consecutively
for (var i = 0; i < elemsToAdd.length; ++i) { var i = elemsToAdd.length;
while (i--) {
var elem = elemsToAdd[i]; var elem = elemsToAdd[i];
// we ignore any selectors // we ignore any selectors
if (elem.id.substr(0,13) == "selectorGrip_") continue; if (elem.id.substr(0,13) == "selectorGrip_") continue;
@@ -723,7 +723,8 @@ function SvgCanvas(c)
// find every element and remove it from our array copy // find every element and remove it from our array copy
var newSelectedItems = new Array(selectedElements.length); var newSelectedItems = new Array(selectedElements.length);
var j = 0; var j = 0;
for (var i = 0; i < selectedElements.length; ++i) { var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
var elem = selectedElements[i]; var elem = selectedElements[i];
if (elem) { if (elem) {
// keep the item // keep the item
@@ -934,16 +935,17 @@ function SvgCanvas(c)
if (selectedElements[0] != null) { if (selectedElements[0] != null) {
var dx = x - start_x; var dx = x - start_x;
var dy = y - start_y; var dy = y - start_y;
var ts = "translate(" + dx + "," + dy + ")"; var ts = ["translate(",dx,",",dy,")"].join('');
for (var i = 0; i < selectedElements.length; ++i) { var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
var selected = selectedElements[i]; var selected = selectedElements[i];
if (selected == null) break; if (selected == null) break;
selectedBBoxes[i] = selected.getBBox();
selectedBBoxes[i].x += dx;
selectedBBoxes[i].y += dy;
selected.setAttribute("transform", ts); selected.setAttribute("transform", ts);
var box = selected.getBBox();
box.x += dx; box.y += dy;
selectorManager.requestSelector(selected).resize(box);
selectedBBoxes[i] = box;
} }
recalculateSelectedOutline();
} }
break; break;
case "multiselect": case "multiselect":
@@ -959,8 +961,31 @@ function SvgCanvas(c)
// if (nodeName != "div" && nodeName != "svg") { // if (nodeName != "div" && nodeName != "svg") {
// canvas.addToSelection([evt.target]); // canvas.addToSelection([evt.target]);
// } // }
// clear out selection and set it to the new list
canvas.clearSelection(); canvas.clearSelection();
canvas.addToSelection(getIntersectionList()); canvas.addToSelection(getIntersectionList());
/*
// for each selected:
// - if newList contains selected, do nothing
// - if newList doesn't contain selected, remove it from selected
// - for any newList that was not in selectedElements, add it to selected
var elemsToRemove = [];
var newList = getIntersectionList();
var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
var ind = newList.indexOf(selectedElements[i]);
if (ind == -1) {
elemsToRemove.push(selectedElements[i]);
}
else {
newList[ind] = null;
}
}
if (elemsToRemove.length > 0)
canvas.removeFromSelection(elemsToRemove);
*/
break; break;
case "resize": case "resize":
// we track the resize bounding box and translate/scale the selected element // we track the resize bounding box and translate/scale the selected element
@@ -1000,9 +1025,8 @@ function SvgCanvas(c)
selectedBBox.height = -selectedBBox.height; selectedBBox.height = -selectedBBox.height;
} }
ts = "translate(" + (left+tx) + "," + (top+ty) + ") scale(" + (sx) + "," + (sy) + selected.setAttribute("transform", ("translate(" + (left+tx) + "," + (top+ty) +
") translate(" + (-left) + "," + (-top) + ")"; ") scale(" + (sx) + "," + (sy) + ") translate(" + (-left) + "," + (-top) + ")"));
selected.setAttribute("transform", ts);
recalculateSelectedOutline(); recalculateSelectedOutline();
break; break;
case "text": case "text":
@@ -1376,7 +1400,8 @@ function SvgCanvas(c)
this.changeSelectedAttribute = function(attr, val) { this.changeSelectedAttribute = function(attr, val) {
var batchCmd = new BatchCommand("Change " + attr); var batchCmd = new BatchCommand("Change " + attr);
for (var i = 0; i < selectedElements.length; ++i) { var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
var selected = selectedElements[i]; var selected = selectedElements[i];
if (selected == null) break; if (selected == null) break;
@@ -1385,6 +1410,7 @@ function SvgCanvas(c)
if (attr == "#text") selected.textContent = val; if (attr == "#text") selected.textContent = val;
else selected.setAttribute(attr, val); else selected.setAttribute(attr, val);
selectedBBoxes[i] = selected.getBBox(); selectedBBoxes[i] = selected.getBBox();
// TODO: do the select calculation in here directly
recalculateSelectedOutline(); recalculateSelectedOutline();
var changes = {}; var changes = {};
changes[attr] = oldval; changes[attr] = oldval;
@@ -1405,7 +1431,8 @@ function SvgCanvas(c)
this.deleteSelectedElements = function() { this.deleteSelectedElements = function() {
var batchCmd = new BatchCommand("Delete Elements"); var batchCmd = new BatchCommand("Delete Elements");
for (var i = 0; i < selectedElements.length; ++i) { var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
var selected = selectedElements[i]; var selected = selectedElements[i];
if (selected == null) break; if (selected == null) break;
@@ -1445,6 +1472,7 @@ function SvgCanvas(c)
} }
}; };
// TODO: get this to work with multiple selected elements
this.moveSelectedElement = function(dx,dy) { this.moveSelectedElement = function(dx,dy) {
var selected = selectedElements[0]; var selected = selectedElements[0];
if (selected != null) { if (selected != null) {