metamaps--metamaps/frontend/src/Metamaps/Listeners.js

/* global $ */

import Active from './Active'
import Control from './Control'
import JIT from './JIT'
import Mobile from './Mobile'
import Realtime from './Realtime'
import Selected from './Selected'
import Topic from './Topic'
import Util from './Util'
import Visualize from './Visualize'
import { Search } from './GlobalUI'

const Listeners = {
  init: function () {
    var self = this
    $(document).on('keydown', function (e) {
      if (!(Active.Map || Active.Topic)) return

      switch (e.which) {
        case 13: // if enter key is pressed
          // prevent topic creation if sending a message
          if (e.target.className !== 'chat-input') {
            JIT.enterKeyHandler()
          }
          break
        case 27: // if esc key is pressed
          JIT.escKeyHandler()
          break
        case 65: // if a or A is pressed
          if (e.ctrlKey || e.metaKey) {
            Control.deselectAllNodes()
            Control.deselectAllEdges()

            e.preventDefault()
            Visualize.mGraph.graph.eachNode(function (n) {
              Control.selectNode(n, e)
            })

            Visualize.mGraph.plot()
          }

          break
        case 68: // if d or D is pressed
          if (e.ctrlKey || e.metaKey) {
            e.preventDefault()
            Control.deleteSelected()
          }
          break
        case 69: // if e or E is pressed
          if ((e.ctrlKey || e.metaKey) && Active.Map) {
            e.preventDefault()
            JIT.zoomExtents(null, Visualize.mGraph.canvas)
            break
          }
          if (e.altKey && Active.Topic) {
            e.preventDefault()

            if (Active.Topic) {
              self.centerAndReveal(Selected.Nodes, {
                center: true,
                reveal: false
              })
            }
            break
          }
          break
        case 72: // if h or H is pressed
          if (e.ctrlKey || e.metaKey) {
            e.preventDefault()
            Control.hideSelectedNodes()
            Control.hideSelectedEdges()
          }
          break
        case 77: // if m or M is pressed
          if (e.ctrlKey || e.metaKey) {
            e.preventDefault()
            Control.removeSelectedNodes()
            Control.removeSelectedEdges()
          }
          break
        case 82: // if r or R is pressed
          if (e.altKey && Active.Topic) {
            e.preventDefault()
            self.centerAndReveal(Selected.Nodes, {
              center: false,
              reveal: true
            })
          }
          break
        case 84: // if t or T is pressed
          if (e.altKey && Active.Topic) {
            e.preventDefault()
            self.centerAndReveal(Selected.Nodes, {
              center: true,
              reveal: true
            })
          }
          break
        case 191: // if / is pressed
          if (e.ctrlKey || e.metaKey) {
            Search.focus()
          }
          break
        default:
          // console.log(e.which)
          break
      }
    })

    $(window).resize(function () {
      if (Visualize && Visualize.mGraph) {
        // Find the current canvas scale and map-coordinate at the centre of the user's screen
        let canvas = Visualize.mGraph.canvas
        const scaleX = canvas.scaleOffsetX
        const scaleY = canvas.scaleOffsetY
        const centrePixX = canvas.canvases[0].size.width / 2
        const centrePixY = canvas.canvases[0].size.height / 2
        const centreCoords = Util.pixelsToCoords({ x: centrePixX, y: centrePixY })

        // Resize the canvas to fill the new window size. Based on how JIT works, this also resets the map back to scale 1 and tranlations = 0
        canvas.resize($(window).width(), $(window).height())

        // Return the map to the original scale, and then put the previous central map-coordinate back to the centre of user's newly resized screen
        canvas.scale(scaleX, scaleY)
        const newCentrePixX = canvas.canvases[0].size.width / 2
        const newCentrePixY = canvas.canvases[0].size.height / 2
        const newCentreCoords = Util.pixelsToCoords({ x: newCentrePixX, y: newCentrePixY })

        canvas.translate(newCentreCoords.x - centreCoords.x, newCentreCoords.y - centreCoords.y)
      }

      if (Active.Map && Realtime.inConversation) Realtime.positionVideos()
      Mobile.resizeTitle()
    })
  },
  centerAndReveal: function (nodes, opts) {
    if (nodes.length < 1) return
    var node = nodes[nodes.length - 1]
    if (opts.center && opts.reveal) {
      Topic.centerOn(node.id, function () {
        Topic.fetchRelatives(nodes)
      })
    } else if (opts.center) {
      Topic.centerOn(node.id)
    } else if (opts.reveal) {
      Topic.fetchRelatives(nodes)
    }
  }
}

export default Listeners