Two Ctrl+Cs in a row and copy works!

frontend/src/Metamaps/Export.js

@@ -1,29 +1,57 @@
 /* global $ */
+import clipboard from 'clipboard-js'
+
 import Active from './Active'
+import Control from './Control'
 import GlobalUI from './GlobalUI'
 import Selected from './Selected'
 
+// simple hack to use the existing ruby export code
+// someday we can build a real export function here
+
 const Export = {
-  // simple hack to use the existing ruby export code
+  data: null,
-  // someday we can build a real export function here
   copySelection: function() {
-    if (!Active.Map) return // someday we can expand this
+    if (Export.data === null) {
-    const topic_ids = Selected.Nodes.map(node => node.id).join(',')
+      Export.loadCopyData()
-    const synapse_ids = Selected.Edges.map(edge => {
-      return edge.getData('synapses')[edge.getData('displayIndex')].id
-    }).join(',')
-    const url = `/maps/${Active.Map.id}/export.json`
-    const query = `topic_ids=${topic_ids}&synapse_ids=${synapse_ids}`
-    $.ajax(`${url}?${query}`, {
-      success: data => {
-        $('body').append($('<div id="clipboard-text" style="display: none">" + data + </div>').select())
-        const copied = document.execCommand('copy')
-        $('#clipboard-text').remove()
-        if (copied) {
-          GlobalUI.notifyUser(`${Selected.Nodes.length} topics and ${Selected.Edges.length} synapses were copied to the clipboard`)
     } else {
-          GlobalUI.notifyUser(`Copy-paste failed, try manually exporting the map at ${url}.`)
+      clipboard.copy({
+        'text/plain': Export.data,
+        'application/json': Export.data
+      }).then(() => {
+        GlobalUI.notifyUser(`${Selected.Nodes.length} topics and ${Selected.Edges.length} synapses were copied to the clipboard`)
+      }, error => {
+        GlobalUI.notifyUser(error)
+      })
+      Export.data = null
     }
+  },
+
+  loadCopyData: function() {
+    if (!Active.Map) return // someday we can expand this
+    const topics = Selected.Nodes.map(node => node.id)
+
+    // deselect synapses not joined to a selected topic
+    Selected.Edges.slice(0).forEach(edge => {
+      const synapse = edge.getData('synapses')[edge.getData('displayIndex')]
+      const topic1_id = synapse.get('topic1_id')
+      const topic2_id = synapse.get('topic2_id')
+      if (topics.indexOf(topic1_id) === -1 || topics.indexOf(topic2_id) === -1) {
+        Control.deselectEdge(edge)
+      }
+    })
+
+    const synapses = Selected.Edges.map(edge => {
+      return edge.getData('synapses')[edge.getData('displayIndex')].id
+    })
+    
+    const url = `/maps/${Active.Map.id}/export.json`
+    const query = `topic_ids=${topics.join(',')}&synapse_ids=${synapses.join(',')}`
+    $.ajax(`${url}?${query}`, {
+      dataType: 'text',
+      success: data => {
+        Export.data = data
+        GlobalUI.notifyUser(`Press Ctrl+C again to copy ${topics.length} topics and ${synapses.length} synapses`)
       }
     })
   }

frontend/src/Metamaps/Listeners.js

@@ -1,5 +1,7 @@
 /* global $ */
 
+import clipboard from 'clipboard-js'
+
 import Active from './Active'
 import Create from './Create'
 import Control from './Control'
@@ -31,9 +33,26 @@ const Listeners = {
         case 27: // if esc key is pressed
           JIT.escKeyHandler()
           break
-        case 38: // if UP key is pressed
+        case 37: // if Left arrow key is pressed
+          if (e.target.tagName === 'BODY') {
+            Visualize.mGraph.canvas.translate(-20, 0)
+          }
+          break
+        case 38: // if Up arrow key is pressed
           if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
             Control.selectNeighbors()
+          } else if (e.target.tagName === 'BODY') {
+            Visualize.mGraph.canvas.translate(0, -20)
+          }
+          break
+        case 39: // if Right arrow key is pressed
+          if (e.target.tagName === 'BODY') {
+            Visualize.mGraph.canvas.translate(20, 0)
+          }
+          break
+        case 40: // if Down arrow key is pressed
+          if (e.target.tagName === 'BODY') {
+            Visualize.mGraph.canvas.translate(0, 20)
           }
           break
         case 46: // if DEL is pressed