enabling menu items

src/index.html

@@ -86,14 +86,14 @@
   <div class="menu">
     <div class="menu_title">Edit</div>
     <div class="menu_list" id="edit_menu">
-      <div class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
+      <div data-action="undo" class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
-      <div class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
+      <div data-action="redo" class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
       <div class="separator"></div>
-      <div class="menu_item action_selected disabled" id="tool_cut">Cut <span class="shortcut">⌘X</span></div>
+      <div data-action="cutSelected" class="menu_item action_selected disabled" id="tool_cut">Cut <span class="shortcut">⌘X</span></div>
-      <div class="menu_item action_selected disabled" id="tool_copy">Copy <span class="shortcut">⌘C</span></div>
+      <div data-action="copySelected" class="menu_item action_selected disabled" id="tool_copy">Copy <span class="shortcut">⌘C</span></div>
-      <div class="menu_item action_selected disabled" id="tool_paste">Paste <span class="shortcut">⌘V</span></div>
+      <div data-action="pasteSelected" class="menu_item action_selected disabled" id="tool_paste">Paste <span class="shortcut">⌘V</span></div>
-      <div class="menu_item action_selected disabled" id="tool_clone">Duplicate <span class="shortcut">⌘D</span></div>
+      <div data-action="duplicateSelected" class="menu_item action_selected disabled" id="tool_clone">Duplicate <span class="shortcut">⌘D</span></div>
-      <div class="menu_item action_selected disabled" id="tool_delete">Delete <span>⌫</span></div>
+      <div  data-action="deleteSelected" class="menu_item action_selected disabled" id="tool_delete">Delete <span>⌫</span></div>
     </div>
   </div>
   

src/js/Keyboard.js

@@ -24,6 +24,7 @@ MD.Keyboard = function(){
       "cmd_c": ()=> editor.copySelected(),
       "cmd_x": ()=> editor.cutSelected(),
       "cmd_v": ()=> editor.pasteSelected(),
+      "cmd_d": ()=> editor.duplicateSelected(),
       "cmd_u": ()=> editor.modal.viewSource(),
       "cmd_a": ()=> svgCanvas.selectAllInCurrentLayer(),
       "cmd_b": ()=> editor.text.setBold(),

src/js/Menu.js

@@ -19,8 +19,7 @@ MD.Menu = function(){
        $(this).parent().addClass('open');
      });
   
-  function blink(e) {
+  function blink(el) {
-    const el = e.target;
     el.style.background = "#fff";
     setTimeout(()=> el.style.background = "#ddd", 50);
     setTimeout(()=> el.style.background = "#fff", 150);
@@ -33,7 +32,7 @@ MD.Menu = function(){
   function close(e){
     if (e.target.nodeName && e.target.nodeName.toLowerCase() === "input") return false;
     if (!$(e.target).hasClass("menu_title") && !$(e.target).parent().hasClass("menu_title")) {
-      if(!$(e.target).hasClass("disabled") && $(e.target).hasClass("menu_item")) blink(e)
+      if(!$(e.target).hasClass("disabled") && $(e.target).hasClass("menu_item")) blink(e.target)
       else $('#menu_bar').removeClass('active')
     } 
   }
@@ -55,7 +54,14 @@ MD.Menu = function(){
    }); 
   }
   
-  $('.menu_item').on('click', blink);
+  $('.menu_item').on('click', function(e){
+    const action = this.getAttribute("data-action");
+    if (action && editor[action]) {
+      editor[action]();
+      blink(this);
+    }
+  });
+
   $("body").on('mousedown', close);
 
   this.flash = flash;

src/js/Panel.js

@@ -138,8 +138,7 @@ MD.Panel = function(){
      
      var menu_items = $('#cmenu_canvas li');
      $('.context_panel').hide();
-     $('.menu_item', '#edit_menu').addClass('disabled');
+     
-     $('.menu_item', '#object_menu').addClass('disabled');
      
      //hack to show the proper multialign box
      if (multiselected) {
@@ -293,21 +292,16 @@ MD.Panel = function(){
      
      if (!elem) {
        menu_items.disableContextMenuItems('#delete,#cut,#copy,#ungroup,#move_front,#move_up,#move_down,#move_back');
+       $('.menu_item', '#edit_menu').addClass('disabled');
+       $('.menu_item', '#object_menu').addClass('disabled');
      }
      
      // update history buttons
-     if (svgCanvas.undoMgr.getUndoStackSize() > 0) {
+     setTimeout(function(){
-       $('#tool_undo').removeClass( 'disabled');
+       $('#tool_paste').toggleClass( 'disabled', !svgCanvas.clipBoard.length > 0);
-     }
+     }, 10)
-     else {
+     $('#tool_undo').toggleClass( 'disabled', !svgCanvas.undoMgr.getUndoStackSize() > 0);
-       $('#tool_undo').addClass( 'disabled');
+     $('#tool_redo').toggleClass( 'disabled', !svgCanvas.undoMgr.getRedoStackSize() > 0);
-     }
-     if (svgCanvas.undoMgr.getRedoStackSize() > 0) {
-       $('#tool_redo').removeClass( 'disabled');
-     }
-     else {
-       $('#tool_redo').addClass( 'disabled');
-     }
      
      svgCanvas.addedNew = false;
      

src/js/editor.js

@@ -18,6 +18,19 @@ MD.Editor = function(){
     svgCanvas.undoMgr.undo();
   }
 
+  function redo(){
+    if (svgCanvas.undoMgr.getRedoStackSize() > 0) {
+      _self.menu.flash($('#edit_menu'));
+      svgCanvas.undoMgr.redo();
+    }
+  }
+
+  function duplicateSelected(){
+    if (!_self.selected.length) return false;
+    _self.menu.flash($('#edit_menu'));
+    svgCanvas.cloneSelectedElements(20,20);
+  };
+
   function deleteSelected(){
     if (svgCanvas.pathActions.getNodePoint()) svgCanvas.pathActions.deletePathNode();
     else svgCanvas.deleteSelectedElements();
@@ -296,6 +309,8 @@ MD.Editor = function(){
   this.switchPaint = switchPaint;
   this.save = save;
   this.undo = undo;
+  this.redo = redo;
+  this.duplicateSelected = duplicateSelected;
   this.deleteSelected = deleteSelected;
   this.cutSelected = cutSelected;
   this.copySelected = copySelected;