Loading an SVG into the canvas

Question

The code below is loading an svg into the canvas via RaphaelJS. There are mouseover/mouseout events, on click on an element of the svg, and drag/zoom.

I would like to know, what are some good practices, or how to improve the productivity and maybe shorten my code. One issues may be that I use a lot of iterations through the elements(~2000-3000) on the svg image. This is not the only "problem" in my code, so if anyone has any ideas, I am ready to try them.

Raphael.fn.select = (selector) ->
  type     = selector.charAt(0)
  selector = selector.substr(1)
  attr     = if type == '.' then 'class' else 'id'
  els      = []
  bot      = this.bottom
  while bot
    if bot.node.getAttribute(attr) == selector
      els.push(bot)
    bot = bot.next
  return if type == '.' then els else els[0] or null

;((window) ->
  'use strict'

  loadSVG = (file) ->
    response = null
    $.ajax({
      type: 'GET',
      url: file,
      dataType: 'xml',
      async: false,
      success: (svgXML) ->
        response = svgXML
    })
    return response

  selectedPoints = []
  disabledPoints = ['seggiolino_1637', 'seggiolino_1881', 'seggiolino_1984', 'seggiolino_889', 'seggiolino_891', 'seggiolino_893', 'seggiolino_890', 'seggiolino_892', 'seggiolino_894']

  settings =
    clickAnimTime: 0
    hoverScale: 2
    animTime: 300
    animEase: 'backOut'
    scale: 3
    vb:
      x: 0
      y: 0
      width: 1606
      height: 1039
    paper:
      width: 800
      height: 480

  states =
    default:
      transform: ''
      fill: '#008000'
      'stroke-width': 0
    hover:
      transform: 's' + settings.hoverScale
    disabled:
      fill: '#eaeaea'
      'stroke-width': 1
      stroke: '#333333'
    selected:
      transform: 's' + settings.hoverScale
      fill: '#AA8834'
      'stroke-width': 2
      stroke: '#AA8834'

  container = document.getElementById('mapContainer')
  paper     = new Raphael(container, settings.vb.width, settings.vb.height)
  map       = paper.importSVG(loadSVG('img/svgscala.svg'))
  draggable = container.getElementsByTagName('svg')[0]
  paper.setSize(settings.paper.width, settings.paper.height)
  viewBoxWidth  = settings.vb.width
  viewBoxHeight = settings.vb.height
  dx = 0
  dy = 0
  oX = 0
  oY = 0
  oWidth  = viewBoxWidth
  oHeight = viewBoxHeight
  mousedown = false
  startX = 0
  startY = 0
  viewBox = paper.setViewBox(oX, oY, viewBoxWidth, viewBoxHeight, true)
  viewBox.x = oX
  viewBox.y = oY
  zoomLevel = 0
  firedCallback = false

  paper.select('#' + point).attr(states.disabled) for point in disabledPoints

  map.hover(() ->
    if disabledPoints.indexOf(this.node.getAttribute('id')) == -1
      this[0].style.cursor = 'pointer'
      this.animate(states.hover, settings.clickAnimTime, settings.animEase)
    else
      this[0].style.cursor = 'not-allowed'
  , () ->
    if disabledPoints.indexOf(this.node.getAttribute('id')) == -1
      if selectedPoints.indexOf(this.node.getAttribute('id')) == -1
        this.animate(states.default, settings.clickAnimTime, settings.animEase)
  )

  map.click(() ->
    cx = this.attr('cx')
    cy = this.attr('cy')

    if disabledPoints.indexOf(this.node.getAttribute('id')) == -1
      if selectedPoints.indexOf(this.node.getAttribute('id')) == -1
        selectedPoints.push(this.node.getAttribute('id'))
        this.animate(states.selected, settings.clickAnimTime, settings.animEase)
      else
        removeId = selectedPoints.indexOf(this.node.getAttribute('id'))
        selectedPoints.splice(removeId, 1)
        this.animate(states.default, settings.clickAnimTime, settings.animEase)
  )

  wheel = (e) ->
    e = e or window.event
    delta = 0

    if e.wheelDelta
      delta = e.wheelDelta / 120
    else if e.detail
      delta = -e.detail / 3

    if delta then handle(e, delta)
    handleAreas()
    if e.preventDefault then e.preventDefault()

    return e.returnValue = false

  handle = (e, delta) ->
    vBOw = viewBoxWidth
    vBOh = viewBoxHeight
    factor = 0

    if delta > 0
      zoomLevel++
      viewBoxWidth  *= 0.95
      viewBoxHeight *= 0.95
      factor = 0.95
    else
      zoomLevel--
      viewBoxWidth  *= 1.05
      viewBoxHeight *= 1.05
      factor = 1.05

    viewBox.x -= (e.pageX - (viewBoxWidth - vBOw)) * (factor - 1)
    viewBox.y -= (e.pageY - (viewBoxHeight - vBOh)) * (factor - 1)
    paper.setViewBox(viewBox.x, viewBox.y, viewBoxWidth, viewBoxHeight)

  draggable.onmousedown = (e) ->
    if paper.getElementByPoint(e.pageX, e.pageY) != null
      return
    e = e or window.event
    mousedown = true
    startX = e.pageX
    startY = e.pageY

  document.onmousemove = (e) ->
    if mousedown == false then return
    document.body.style.cursor = '-webkit-grabbing'
    e  = e or window.event
    dx = startX - e.pageX
    dy = startY - e.pageY
    x  = viewBoxWidth / paper.width
    y  = viewBoxHeight / paper.height
    dx *= x
    dy *= y

    paper.setViewBox(viewBox.x + dx, viewBox.y + dy, viewBoxWidth, viewBoxHeight)

  document.onmouseup = (e) ->
    document.body.style.cursor = 'initial'
    if mousedown == false then return
    e = e or window.event
    viewBox.x += dx
    viewBox.y += dy
    mousedown  = false

  handleAreas = () ->
    if zoomLevel > 30
      if not firedCallback
        firedCallback = true
        a.attr('fill', '') for a in paper.select('.area')
        console.log 'zoomed in'
    else
      if firedCallback
        firedCallback = false
        a.attr('fill', 'red') for a in paper.select('.area')

  draggable.addEventListener('DOMMouseScroll', wheel, false)
  draggable.onmousewheel = draggable.onmousewheel = wheel
)(window)

Maybe some of you know a shorthand expression in CoffeeScript, or maybe you can suggest a nice trick in JS. The code works fine, but I won't say I'm happy with it. I will post the code in compiled JavaScript if someone needs it.

Answer 1

wheel = (e) ->
    e = e or window.event
    # the code follows

Here you want to set argument e to some default value if e is missing. CoffeeScript allows you to set default value of an argument right in the function signature:

wheel = (e = window.event) ->
    # the code follows

Also there are some alternative solutions (perhaps more favorable in CoffeeScript):

e ||= window.event
# sets e to window.event if e evaluates to false
# null, unefined, 0, "", NaN and false values will be replaced
# same as `e || (e = window.event)`

and

e ?= window.event
# sets e to window.event only if e is null or undefined
# 0, "" and other falsy friends are allowed
# same as `if (e == null) { e = window.event }`

The operator ? in the latter form is special. It is called The Existential Operator. I guess it is the prefered way to set a variable to default value or test for it existence.

---

You can omit () from () -> function signature since there are no arguments. The possible shortest function signature in CoffeeScript is ->, same as function() {} in JavaScript.

---

if e.preventDefault then e.preventDefault()

may be written as

e.preventDefault?()

Notice the ? operator before (). It will test if e.preventDefault exists and is actually a function before running it.

---

if delta then handle(e, delta)

may be

handle(e, delta) if delta