diff --git a/editor/locale/lang.en.js b/editor/locale/lang.en.js
index 346d5699..b2023493 100644
--- a/editor/locale/lang.en.js
+++ b/editor/locale/lang.en.js
@@ -114,8 +114,7 @@
{"id":"curve_segments","textContent":"Curve"},
{"id":"tool_node_clone","title":"Clone Node"},
{"id":"tool_node_delete","title":"Delete Node"},
-{"id":"selLayerLabel","textContent":"layer:"},
-{"id":"selLayerNames","title":"Move selected elements to a different layer"}
-{"id":"mselLayerLabel","textContent":"layer:"},
-{"id":"mselLayerNames","title":"Move selected elements to a different layer"}
+{"id":"selLayerLabel","textContent":"Move elements to:"},
+{"id":"selLayerNames","title":"Move selected elements to a different layer"},
+{"id":"sidepanel_handle","title":"Drag left/right to resize Layer panel","textContent":"L a y e r s"}
];
diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 9895231d..136c6b7c 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -71,21 +71,56 @@ body {
#svg_editor #sidepanels {
display: inline-block;
- background-color: #E8E8E8;
position:absolute;
top: 75px;
bottom: 60px;
right: 0px;
- width: 126px;
+ width: 136px;
+ padding: 12px;
border-color: #808080;
border-style: solid;
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;
padding-left: 12px;
padding-right: 12px;
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 {
margin: 0px;
padding: 0px;
@@ -160,6 +195,10 @@ body {
font-weight: bold;
}
+#svg_editor #selLayerNames {
+ display: block;
+}
+
#svg_editor div.palette_item {
height: 16px;
width: 16px;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 19f5d4b1..689e1785 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -66,7 +66,12 @@ script type="text/javascript" src="locale/locale.min.js">
Layer 1 |
+ Move elements to:
+
+ L a y e r s
@@ -117,10 +122,6 @@ script type="text/javascript" src="locale/locale.min.js">
angle:
- layer:
-
@@ -143,10 +144,6 @@ script type="text/javascript" src="locale/locale.min.js">
- layer:
-
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 9846c0a7..1a2a52d9 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -197,27 +197,15 @@ function svg_edit_setup() {
$('#angle').val(svgCanvas.getRotationAngle(elem));
return;
}
+
+ var is_node = elem ? (elem.id && elem.id.indexOf('polypointgrip') == 0) : false;
$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
#ellipse_panel, #line_panel, #text_panel, #image_panel, #poly_node_panel').hide();
if (elem != null) {
$('#angle').val(svgCanvas.getRotationAngle(elem));
- var is_node = (elem.id && elem.id.indexOf('polypointgrip') == 0);
-
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();
} else {
$('#poly_node_panel').show();
@@ -281,18 +269,6 @@ function svg_edit_setup() {
}
} // if (elem != null)
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();
}
@@ -311,6 +287,25 @@ function svg_edit_setup() {
}
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; } );
@@ -371,10 +366,11 @@ function svg_edit_setup() {
});
// fired when user wants to move elements to another layer
- $('#selLayerNames,#mselLayerNames').change(function(){
+ $('#selLayerNames').change(function(){
var destLayer = this.options[this.selectedIndex].value;
if (destLayer) {
svgCanvas.moveSelectedToLayer(destLayer);
+ svgCanvas.clearSelection();
}
});
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 98ea5371..3bf0a3f1 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -1519,7 +1519,7 @@ function BatchCommand(text) {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"opacity": cur_shape.opacity / 2,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
freehand_min_x = x;
@@ -1540,7 +1540,7 @@ function BatchCommand(text) {
"height": 0,
"id": getNextId(),
"opacity": cur_shape.opacity / 2,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
newImage.setAttributeNS(xlinkns, "href", "images/logo.png");
@@ -1567,7 +1567,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
break;
@@ -1588,7 +1588,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity,
"fill": "none",
"opacity": cur_shape.opacity / 2,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
break;
@@ -1608,7 +1608,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
break;
@@ -1629,7 +1629,7 @@ function BatchCommand(text) {
"stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity,
"opacity": cur_shape.opacity / 2,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
break;
@@ -1652,7 +1652,7 @@ function BatchCommand(text) {
"font-size": cur_text.font_size,
"font-family": cur_text.font_family,
"text-anchor": "middle",
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
newText.textContent = "text";
@@ -2672,7 +2672,7 @@ function BatchCommand(text) {
"opacity": cur_shape.opacity,
"stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
call("changed",[element]);
@@ -2697,7 +2697,7 @@ function BatchCommand(text) {
"opacity": cur_shape.opacity,
"stroke-opacity": cur_shape.stroke_opacity,
"fill-opacity": cur_shape.fill_opacity,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
call("changed",[element]);
@@ -2742,7 +2742,7 @@ function BatchCommand(text) {
"stroke-dasharray": cur_shape.stroke_style,
"stroke-opacity": cur_shape.stroke_opacity,
"opacity": cur_shape.opacity / 2,
- "style": "pointer-events:all"
+ "style": "pointer-events:inherit"
}
});
// set stretchy line to first point
@@ -3138,7 +3138,8 @@ function BatchCommand(text) {
current_layer = svgzoom.appendChild(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
@@ -3238,9 +3239,9 @@ function BatchCommand(text) {
if (name == all_layers[i][0]) {
if (current_layer != all_layers[i][1]) {
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];
- walkTree(current_layer,function(e){e.setAttribute("style","pointer-events:all");});
+ current_layer.setAttribute("style", "pointer-events:all");
}
return true;
}