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

Move-To-Layer control now lives in the Layers panel. Restructured layout of layers panel and added a non-functional handle. Changed pointer-events to be 'inherit' for all elements inside the layer. Clear selection after moving elements to a layer. 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@797 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-10-11 04:32:21 +00:00
parent 2549e8ddd6
commit b1393df28c
5 changed files with 86 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
editor/locale/lang.en.js
View File

@ -114,8 +114,7 @@
{"id":"curve_segments","textContent":"Curve"}, {"id":"curve_segments","textContent":"Curve"},
{"id":"tool_node_clone","title":"Clone Node"}, {"id":"tool_node_clone","title":"Clone Node"},
{"id":"tool_node_delete","title":"Delete Node"}, {"id":"tool_node_delete","title":"Delete Node"},
{"id":"selLayerLabel","textContent":"layer:"}, {"id":"selLayerLabel","textContent":"Move elements to:"},
{"id":"selLayerNames","title":"Move selected elements to a different layer"} {"id":"selLayerNames","title":"Move selected elements to a different layer"},
{"id":"mselLayerLabel","textContent":"layer:"}, {"id":"sidepanel_handle","title":"Drag left/right to resize Layer panel","textContent":"L a y e r s"}
{"id":"mselLayerNames","title":"Move selected elements to a different layer"}
]; ];

43
editor/svg-editor.css
View File

@ -71,21 +71,56 @@ body {
#svg_editor #sidepanels { #svg_editor #sidepanels {
display: inline-block; display: inline-block;
background-color: #E8E8E8;
position:absolute; position:absolute;
top: 75px; top: 75px;
bottom: 60px; bottom: 60px;
right: 0px; right: 0px;
width: 126px; width: 136px;
padding: 12px;
border-color: #808080; border-color: #808080;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-left: none;
}
#svg_editor #layerpanel {
display: inline-block;
background-color: #E8E8E8;
position:absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 126px;
overflow-y: scroll; overflow-y: scroll;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
margin: 0px; margin: 0px;
} }
#svg_editor #sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #E8E8E8;
left: 0px;
top: 40%;
width: 1em;
border-style: solid;
border-color: #666;
border-width: 1px;
padding: 2px 1px 2px 4px;
cursor: pointer;
-moz-user-select: none;
}
#svg_editor #sidepanel_handle:hover {
border-width: 2px;
margin-top: -1px;
margin-left: -1px;
}
#svg_editor #sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
}
#svg_editor #layerbuttons { #svg_editor #layerbuttons {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
@ -160,6 +195,10 @@ body {
font-weight: bold; font-weight: bold;
} }
#svg_editor #selLayerNames {
display: block;
}
#svg_editor div.palette_item { #svg_editor div.palette_item {
height: 16px; height: 16px;
width: 16px; width: 16px;

13
editor/svg-editor.html
View File

@ -66,7 +66,12 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<td class="layername">Layer 1</td> <td class="layername">Layer 1</td>
</tr> </tr>
</table> </table>
<span id="selLayerLabel">Move elements to:</span>
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div> </div>
<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize Layer panel">L a y e r s</div>
</div> </div>
<div id="logo"> <div id="logo">
@ -117,10 +122,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</select> </select>
<span id="angleLabel" class="selected_tool">angle:</span> <span id="angleLabel" class="selected_tool">angle:</span>
<input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/> <input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
<span id="selLayerLabel" class="selected_tool">layer:</span>
<select id="selLayerNames" class="selected_tool" title="Move selected elements to a different layer">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div> </div>
<!-- Buttons when multiple elements are selected --> <!-- Buttons when multiple elements are selected -->
@ -143,10 +144,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<option id="page" value="page">page</option> <option id="page" value="page">page</option>
</select> </select>
<img class="tool_sep" src="images/sep.png" alt="|"/> <img class="tool_sep" src="images/sep.png" alt="|"/>
<span id="mselLayerLabel" class="selected_tool">layer:</span>
<select id="mselLayerNames" class="selected_tool" title="Move selected elements to a different layer">
<option selected="selected" value="layer1">Layer 1</option>
</select>
<img class="tool_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/> <img class="tool_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
</div> </div>

50
editor/svg-editor.js
View File

@ -197,27 +197,15 @@ function svg_edit_setup() {
$('#angle').val(svgCanvas.getRotationAngle(elem)); $('#angle').val(svgCanvas.getRotationAngle(elem));
return; return;
} }
var is_node = elem ? (elem.id && elem.id.indexOf('polypointgrip') == 0) : false;
$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\ $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
#ellipse_panel, #line_panel, #text_panel, #image_panel, #poly_node_panel').hide(); #ellipse_panel, #line_panel, #text_panel, #image_panel, #poly_node_panel').hide();
if (elem != null) { if (elem != null) {
$('#angle').val(svgCanvas.getRotationAngle(elem)); $('#angle').val(svgCanvas.getRotationAngle(elem));
var is_node = (elem.id && elem.id.indexOf('polypointgrip') == 0);
if(!is_node) { if(!is_node) {
// update the selected elements' layer
var opts = $('#selLayerNames option');
for (var i = 0; i < opts.length; ++i) {
var opt = opts[i];
if (currentLayer == opt.textContent) {
opt.setAttribute('selected', 'selected');
}
else {
opt.removeAttribute('selected');
}
}
$('#selected_panel').show(); $('#selected_panel').show();
} else { } else {
$('#poly_node_panel').show(); $('#poly_node_panel').show();
@ -281,18 +269,6 @@ function svg_edit_setup() {
} }
} // if (elem != null) } // if (elem != null)
else if (multiselected) { else if (multiselected) {
// update the selected layer
var opts = $('#mselLayerNames option');
for (var i = 0; i < opts.length; ++i) {
var opt = opts[i];
if (currentLayer == opt.textContent) {
opt.setAttribute('selected', 'selected');
}
else {
opt.removeAttribute('selected');
}
}
$('#multiselected_panel').show(); $('#multiselected_panel').show();
} }
@ -311,6 +287,25 @@ function svg_edit_setup() {
} }
svgCanvas.addedNew = false; svgCanvas.addedNew = false;
if ( (elem && !is_node) || multiselected) {
// update the selected elements' layer
$('#selLayerNames')[0].removeAttribute('disabled');
var opts = $('#selLayerNames option');
for (var i = 0; i < opts.length; ++i) {
var opt = opts[i];
if (currentLayer == opt.textContent) {
opt.setAttribute('selected', 'selected');
}
else {
opt.removeAttribute('selected');
}
}
}
else {
$('#selLayerNames')[0].setAttribute('disabled', 'disabled');
}
}; };
$('#text').focus( function(){ textBeingEntered = true; } ); $('#text').focus( function(){ textBeingEntered = true; } );
@ -371,10 +366,11 @@ function svg_edit_setup() {
}); });
// fired when user wants to move elements to another layer // fired when user wants to move elements to another layer
$('#selLayerNames,#mselLayerNames').change(function(){ $('#selLayerNames').change(function(){
var destLayer = this.options[this.selectedIndex].value; var destLayer = this.options[this.selectedIndex].value;
if (destLayer) { if (destLayer) {
svgCanvas.moveSelectedToLayer(destLayer); svgCanvas.moveSelectedToLayer(destLayer);
svgCanvas.clearSelection();
} }
}); });

27
editor/svgcanvas.js
View File

@ -1519,7 +1519,7 @@ function BatchCommand(text) {
"stroke-linecap": "round", "stroke-linecap": "round",
"stroke-linejoin": "round", "stroke-linejoin": "round",
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
freehand_min_x = x; freehand_min_x = x;
@ -1540,7 +1540,7 @@ function BatchCommand(text) {
"height": 0, "height": 0,
"id": getNextId(), "id": getNextId(),
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
newImage.setAttributeNS(xlinkns, "href", "images/logo.png"); newImage.setAttributeNS(xlinkns, "href", "images/logo.png");
@ -1567,7 +1567,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
break; break;
@ -1588,7 +1588,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill": "none", "fill": "none",
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
break; break;
@ -1608,7 +1608,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
break; break;
@ -1629,7 +1629,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
break; break;
@ -1652,7 +1652,7 @@ function BatchCommand(text) {
"font-size": cur_text.font_size, "font-size": cur_text.font_size,
"font-family": cur_text.font_family, "font-family": cur_text.font_family,
"text-anchor": "middle", "text-anchor": "middle",
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
newText.textContent = "text"; newText.textContent = "text";
@ -2672,7 +2672,7 @@ function BatchCommand(text) {
"opacity": cur_shape.opacity, "opacity": cur_shape.opacity,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
call("changed",[element]); call("changed",[element]);
@ -2697,7 +2697,7 @@ function BatchCommand(text) {
"opacity": cur_shape.opacity, "opacity": cur_shape.opacity,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity, "fill-opacity": cur_shape.fill_opacity,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
call("changed",[element]); call("changed",[element]);
@ -2742,7 +2742,7 @@ function BatchCommand(text) {
"stroke-dasharray": cur_shape.stroke_style, "stroke-dasharray": cur_shape.stroke_style,
"stroke-opacity": cur_shape.stroke_opacity, "stroke-opacity": cur_shape.stroke_opacity,
"opacity": cur_shape.opacity / 2, "opacity": cur_shape.opacity / 2,
"style": "pointer-events:all" "style": "pointer-events:inherit"
} }
}); });
// set stretchy line to first point // set stretchy line to first point
@ -3138,7 +3138,8 @@ function BatchCommand(text) {
current_layer = svgzoom.appendChild(current_layer); current_layer = svgzoom.appendChild(current_layer);
all_layers.push( [newname, current_layer] ); all_layers.push( [newname, current_layer] );
} }
walkTree(current_layer, function(e){e.setAttribute("style","pointer-events:all");}); walkTree(current_layer, function(e){e.setAttribute("style","pointer-events:inherit");});
current_layer.setAttribute("style","pointer-events:all");
}; };
// Function: createLayer // Function: createLayer
@ -3238,9 +3239,9 @@ function BatchCommand(text) {
if (name == all_layers[i][0]) { if (name == all_layers[i][0]) {
if (current_layer != all_layers[i][1]) { if (current_layer != all_layers[i][1]) {
canvas.clearSelection(); canvas.clearSelection();
walkTree(current_layer,function(e){e.setAttribute("style","pointer-events:none");}); current_layer.setAttribute("style", "pointer-events:none");
current_layer = all_layers[i][1]; current_layer = all_layers[i][1];
walkTree(current_layer,function(e){e.setAttribute("style","pointer-events:all");}); current_layer.setAttribute("style", "pointer-events:all");
} }
return true; return true;
} }