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:
-
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;
}