diff --git a/frontend/src/Metamaps/Export.js b/frontend/src/Metamaps/Export.js index b0cf429c..dcabd2d9 100644 --- a/frontend/src/Metamaps/Export.js +++ b/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 - // someday we can build a real export function here + data: null, copySelection: function() { + if (Export.data === null) { + Export.loadCopyData() + } else { + 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 topic_ids = Selected.Nodes.map(node => node.id).join(',') - const synapse_ids = Selected.Edges.map(edge => { + 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 - }).join(',') + }) + const url = `/maps/${Active.Map.id}/export.json` - const query = `topic_ids=${topic_ids}&synapse_ids=${synapse_ids}` + const query = `topic_ids=${topics.join(',')}&synapse_ids=${synapses.join(',')}` $.ajax(`${url}?${query}`, { + dataType: 'text', success: data => { - $('body').append($('').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}.`) - } + Export.data = data + GlobalUI.notifyUser(`Press Ctrl+C again to copy ${topics.length} topics and ${synapses.length} synapses`) } }) } diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index b5670e1e..c60ba2dc 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/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