Raphael moveable&resizable rectangle with active cocners, proto

gistfile1.coffee

doctype html

html
  
  head
    meta(charset='utf-8', http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title Project name
    
    link(rel='stylesheet', href = 'css/style.css')
    script(src='vendor/mock.js')

    script(src='proxed/dump.json')


    script(src='vendor/jquery-1.9.1.min.js')
    script(src='vendor/raphael.v2.1.0.min.js')

    :coffeescript

      $ ->
        paper = Raphael "canvas", 500, 500

        rect1 = paper.rect(100, 100, 100, 100).attr
          fill: "hsb(.8, 1, 1)"
          stroke: "none"
          opacity: .5
          cursor: "move"
          tr_path : ''

        rect_start = () ->
          @attr opacity : 1

        rect_up = () ->
          # restoring state
          @attr opacity : .5

          ts = "#{@transform()}"
          @tr_path += ts.slice ts.lastIndexOf 't'

        set = paper.set()
 
        coord_list = [
          [100, 100]
          [200, 100]
          [200, 200]
          [100, 200]
        ]

        for [x, y], idx in coord_list
          circle = paper.circle(x, y, 8).attr
            fill: "hsb(.5, .5, .3)"
            stroke: "none"
            opacity: .7
            tr_path : ''
          
          circle.idx = idx
          set.push circle

        rec_transform = (dx, dy) ->
          @transform "#{@tr_path}t#{dx},#{dy}"
          set.transform "#{@tr_path}t#{dx},#{dy}"

        set_transfom = (dx, dy) ->
          @transform "#{@tr_path}t#{dx},#{dy}"
          console.log "#{@idx}"


        rect1.drag rec_transform, rect_start, rect_up

        set.drag set_transfom, rect_start, rect_up

  body

    div
      p 
        | Its works
      p
        | As expected

    div
      p 
        | Просто проверим скорость обновления

      span "#{Date()}"

    div#canvas