diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 0aabe07a..26af6000 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -673,6 +673,8 @@ script type="text/javascript" src="locale/locale.min.js">
  • Paste
  • Paste in Place
  • Delete
  • +
  • Bring Forward
  • +
  • Send Backward
  • diff --git a/editor/svg-editor.js b/editor/svg-editor.js index c97e344f..7292a701 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -355,7 +355,6 @@ '#layer_up':'go_up', '#layer_down':'go_down', - '#layer_moreopts':'context_menu', '#layerlist td.layervis':'eye', '#tool_source_save,#tool_docprops_save':'ok', @@ -444,7 +443,6 @@ default_img_url = curConfig.imgPath + "logo.png", workarea = $("#workarea"), canv_menu = $("#cmenu_canvas"), - layer_menu = $("#cmenu_layers"), show_save_warning = false, exportWindow = null, tool_scale = 1; @@ -474,7 +472,7 @@ if(type == 'prompt') { var input = $('').prependTo(btn_holder); input.val(defText || ''); - input.bind('keyup', 'return', function() {ok.click();}); + input.bind('keydown', 'return', function() {ok.click();}); } if(type == 'process') { @@ -580,6 +578,8 @@ c.width = svgCanvas.contentW; c.height = svgCanvas.contentH; canvg(c, data.svg); + + // T setTimeout(function() { var datauri = c.toDataURL('image/png'); exportWindow.location.href = datauri; @@ -1501,7 +1501,7 @@ $('#selLayerNames').removeAttr('disabled').val(currentLayer); // Enable regular menu options - canv_menu.enableContextMenuItems('#delete,#cut,#copy'); + canv_menu.enableContextMenuItems('#delete,#cut,#copy,#move_down,#move_up'); } else { $('#selLayerNames').attr('disabled', 'disabled'); @@ -2222,12 +2222,18 @@ svgCanvas.moveToTopSelectedElement(); } }; - + var moveToBottomSelected = function() { if (selectedElement != null) { svgCanvas.moveToBottomSelectedElement(); } }; + + var moveUpDownSelected = function(dir) { + if (selectedElement != null) { + svgCanvas.moveUpDownSelected(dir); + } + }; var convertToPath = function() { if (selectedElement != null) { @@ -2666,6 +2672,7 @@ if(size == curPrefs.size && !force) return; // return; // var elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open'); + console.log('size', size); var sel_toscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,\ #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,\ @@ -3121,7 +3128,7 @@ // Test for embedImage support (use timeout to not interfere with page load) setTimeout(function() { - svgCanvas.embedImage(curConfig.imgPath + 'logo.png', function(datauri) { + svgCanvas.embedImage('images/logo.png', function(datauri) { if(!datauri) { // Disable option $('#image_save_opts [value=embed]').attr('disabled','disabled'); @@ -3176,24 +3183,30 @@ }); $('#layer_new').click(function() { - var i = svgCanvas.getNumLayers(); - do { - var uniqName = uiStrings.layer + " " + ++i; - } while(svgCanvas.hasLayer(uniqName)); + var curNames = new Array(svgCanvas.getNumLayers()); + for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getLayer(i); } + var j = (curNames.length+1); + var uniqName = uiStrings.layer + " " + j; + while ($.inArray(uniqName, curNames) != -1) { + j++; + uniqName = uiStrings.layer + " " + j; + } $.prompt(uiStrings.enterUniqueLayerName,uniqName, function(newName) { if (!newName) return; - if (svgCanvas.hasLayer(newName)) { + if ($.inArray(newName, curNames) != -1) { $.alert(uiStrings.dupeLayerName); return; } svgCanvas.createLayer(newName); updateContextPanel(); populateLayers(); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:first').addClass("layersel"); }); }); - function deleteLayer() { + $('#layer_delete').click(function() { if (svgCanvas.deleteCurrentLayer()) { updateContextPanel(); populateLayers(); @@ -3203,62 +3216,55 @@ $('#layerlist tr.layer').removeClass("layersel"); $('#layerlist tr.layer:first').addClass("layersel"); } - } - - function cloneLayer() { - var name = svgCanvas.getCurrentLayer() + ' copy'; - - $.prompt(uiStrings.enterUniqueLayerName, name, function(newName) { - if (!newName) return; - if (svgCanvas.hasLayer(newName)) { - $.alert(uiStrings.dupeLayerName); - return; - } - svgCanvas.cloneLayer(newName); - updateContextPanel(); - populateLayers(); - }); - } - - function mergeLayer() { - if($('#layerlist tr.layersel').index() == svgCanvas.getNumLayers()-1) return; - svgCanvas.mergeLayer(); - updateContextPanel(); - populateLayers(); - } - - function moveLayer(pos) { - var curIndex = $('#layerlist tr.layersel').index(); - var total = svgCanvas.getNumLayers(); - if(curIndex > 0 || curIndex < total-1) { - curIndex += pos; - svgCanvas.setCurrentLayerPosition(total-curIndex-1); - populateLayers(); - } - } - - $('#layer_delete').click(deleteLayer); + }); $('#layer_up').click(function() { - moveLayer(-1); + // find index position of selected option + var curIndex = $('#layerlist tr.layersel').prevAll().length; + if (curIndex > 0) { + var total = $('#layerlist tr.layer').length; + curIndex--; + svgCanvas.setCurrentLayerPosition(total-curIndex-1); + populateLayers(); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel"); + } }); $('#layer_down').click(function() { - moveLayer(1); + // find index position of selected option + var curIndex = $('#layerlist tr.layersel').prevAll().length; + var total = $('#layerlist tr.layer').length; + if (curIndex < total-1) { + curIndex++; + svgCanvas.setCurrentLayerPosition(total-curIndex-1); + populateLayers(); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel"); + } }); - + $('#layer_rename').click(function() { var curIndex = $('#layerlist tr.layersel').prevAll().length; var oldName = $('#layerlist tr.layersel td.layername').text(); $.prompt(uiStrings.enterNewLayerName,"", function(newName) { if (!newName) return; - if (oldName == newName || svgCanvas.hasLayer(newName)) { + if (oldName == newName) { + $.alert(uiStrings.layerHasThatName); + return; + } + + var curNames = new Array(svgCanvas.getNumLayers()); + for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getLayer(i); } + if ($.inArray(newName, curNames) != -1) { $.alert(uiStrings.layerHasThatName); return; } svgCanvas.renameCurrentLayer(newName); populateLayers(); + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel"); }); }); @@ -3353,9 +3359,6 @@ selLayerNames.empty(); var currentlayer = svgCanvas.getCurrentLayer(); var layer = svgCanvas.getNumLayers(); - - layer_menu[(layer == 1?'dis':'en') + 'ableContextMenuItems']('#delete,#merge_down,#merge_all'); - var icon = $.getSvgIcon('eye'); // we get the layers in the reverse z-order (the layer rendered on top is listed first) while (layer--) { @@ -3383,13 +3386,11 @@ } // handle selection of layer $('#layerlist td.layername') - .mouseup(function(evt){ + .click(function(evt){ $('#layerlist tr.layer').removeClass("layersel"); var row = $(this.parentNode); row.addClass("layersel"); svgCanvas.setCurrentLayer(this.textContent); - var isLast = $('#layerlist tr.layer').length-1 == row.index(); - layer_menu[(isLast?'dis':'en') + 'ableContextMenuItems']('#merge_down'); evt.preventDefault(); }) .mouseover(function(evt){ @@ -3414,7 +3415,7 @@ }); // if there were too few rows, let's add a few to make it not so lonely - var num = 5 - $('#layerlist tr.layer').length; + var num = 5 - $('#layerlist tr.layer').size(); while (num-- > 0) { // FIXME: there must a better way to do this layerlist.append("_"); @@ -3753,46 +3754,19 @@ case 'paste_in_place': svgCanvas.pasteElements('in_place'); break; + case 'move_down': + svgCanvas.moveUpDownSelected('Down'); + break; + case 'move_up': + svgCanvas.moveUpDownSelected('Up'); + break; + } if(svgCanvas.clipBoard.length) { canv_menu.enableContextMenuItems('#paste,#paste_in_place'); } - }); - - var lmenu_func = function(action, el, pos) { - switch ( action ) { - case 'dupe': - cloneLayer(); - break; - case 'delete': - deleteLayer(); - break; - case 'merge_down': - mergeLayer(); - break; - case 'merge_all': - svgCanvas.mergeAllLayers(); - updateContextPanel(); - populateLayers(); - break; - } - } - - $("#layerlist").contextMenu({ - menu: 'cmenu_layers', - inSpeed: 0 - }, - lmenu_func - ); - - $("#layer_moreopts").contextMenu({ - menu: 'cmenu_layers', - inSpeed: 0, - allowLeft: true - }, - lmenu_func - ); + }); $('.contextMenu li').mousedown(function(ev) { ev.preventDefault(); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index fb0c0fdd..4e7373df 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -2033,11 +2033,15 @@ var getIntersectionList = this.getIntersectionList = function(rect) { if (resultList == null || typeof(resultList.item) != "function") { resultList = []; - - var rubberBBox = rubberBox.getBBox(); - $.each(rubberBBox, function(key, val) { - rubberBBox[key] = val / current_zoom; - }); + + if(!rect) { + var rubberBBox = rubberBox.getBBox(); + $.each(rubberBBox, function(key, val) { + rubberBBox[key] = val / current_zoom; + }); + } else { + var rubberBBox = rect; + } var i = curBBoxes.length; while (i--) { if(!rubberBBox.width || !rubberBBox.width) continue; @@ -10475,6 +10479,41 @@ this.moveToBottomSelectedElement = function() { } }; +// Function: moveUpDownSelected +// Moves the select element up or down the stack, based on the visibly +// intersecting elements +// +// Parameters: +// dir - String that's either 'Up' or 'Down' +this.moveUpDownSelected = function(dir) { + var selected = selectedElements[0]; + if (!selected) return; + + curBBoxes = []; + var closest, found_cur; + // jQuery sorts this list + var list = $(getIntersectionList(getStrokedBBox([selected]))).toArray(); + if(dir == 'Down') list.reverse(); + + $.each(list, function() { + if(!found_cur) { + if(this == selected) { + found_cur = true; + } + return; + } + closest = this; + return false; + }); + if(!closest) return; + + var t = selected; + var oldParent = t.parentNode; + var oldNextSibling = t.nextSibling; + $(closest)[dir == 'Down'?'before':'after'](t); + addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, "Move " + dir)); +} + // Function: moveSelectedElements // Moves selected elements on the X/Y axis //