Old editor directive

directive.js

angular.module('filmer').directive 'document', ->

    template = () ->
      '<canvas id="editorWindow" style="background-color: rgba(255, 194, 93, 0.4)" width ="500px" height = "500px"></canvas>'

    getMousePos = (canvas, evt) ->
      rect = canvas.getBoundingClientRect()
      return {
        x: evt.clientX - rect.left
        y: evt.clientY - rect.top
      }

    drawEditor = (scope, element, attribute) ->

      stage = new createjs.Stage('editorWindow')
      createjs.Touch.enable(stage) # touch support

      # Ticker

      createjs.Ticker.setFPS(60);
      createjs.Ticker.addEventListener("tick", stage);

      # Window resize

      handleWindowResize = () ->
        w = $('#window').width()
        h = $('#window').height()

        stage.canvas.height = h
        stage.canvas.width = w

      # Move

      checkOffset = (e) ->
        this.offset = {
          x: this.x - e.stageX
          y: this.y - e.stageY
        }

      handleMove = (e) ->
        this.x = stage.mouseX + this.offset.x
        this.y = stage.mouseY + this.offset.y
        return

      # Resize / Rotate

      onEdit = false

      handleEdit = (e, container) ->
        if onEdit == false

          onEdit = true
          console.log('Starting edit')

          bounds = container.children[0].getBounds()
          coords = [[-4, -4, 8, 8], [bounds.width - 4, -4, 8, 8], [-4, bounds.height - 4, 8, 8], [bounds.width - 4, bounds.height - 4, 8, 8]]

          point1 = new createjs.Shape()
          point2 = new createjs.Shape()
          point3 = new createjs.Shape()
          point4 = new createjs.Shape()
          points = [point1, point2, point3, point4]

          resizeMode = (e, c) ->
            console.log('Entering resize mode')

            handleResize = () ->


            create = (p, c, coords) ->
              p.graphics.beginStroke("black").beginFill("green").rect(coords[i][0],coords[i][1],coords[i][2],coords[i][3])
              c.addChild(p)
              p.on('pressmove', handleResize)

            create point, c, coords for point, i in points
            listener = c.children[0].on 'click', ->
              c.children[0].off 'click', listener
              rotateMode(e, container)


          rotateMode = (e, c) ->
            console.log('Entering rotate mode')

            listener = c.children[0].on 'click', ->
              c.children[0].off 'click', listener
              resizeMode(e, container)

          finishEdit = () ->

            destroy = (i) ->
              container.removeChild(points[i])

            #for i in [1..container.children.length]
            #  destroy(i)
            destroy i for i in [0..container.children.length]
            container.children[0].removeAllEventListeners('click')
            container.off('dblclick', listener)
            onEdit = false
            console.log('Finishing edit')
            console.log(container.children[0])

          resizeMode(e, container)
          listener = container.on('dblclick', finishEdit)


      # Drop

      getDropType = (e, ui) ->
        switch $('.tool').attr('id')
          when 'picture' then pictureRender(e, ui)

      # Pictures

      pictureRender = (e, ui) ->

        canvas = document.getElementById('editorWindow')

        coords = {
          x: getMousePos(canvas, event).x
          y: getMousePos(canvas, event).y
        }

        container = new createjs.Container()

        picturePreload = (e, ui) ->
          queue = new createjs.LoadQueue()
          queue.on("fileload", dropPicture)
          queue.loadFile({
            src: '/images/medium/missing.png'
            type: createjs.AbstractLoader.IMAGE
          })
          return

        dropPicture = (e) ->
          image = new createjs.Bitmap(e.result)

          container.addChild(image)
          container.x = coords.x - (image.image.width / 2)
          container.y = coords.y - (image.image.height / 2)

          container.on('mousedown', checkOffset)
          container.on('pressmove', handleMove)
          container.on 'dblclick', ->
            handleEdit(e, container)
            return

          stage.addChild(container)

        picturePreload()


      $('#editorWindow').droppable({
        accept: '.tool'
        drop: getDropType
      })

      # initialization

      window.addEventListener("resize", handleWindowResize)
      handleWindowResize() #initialization


    return {
      restrict: 'E',
      template: template,
      scope: {},
      link: (scope, element, attribute) ->
        drawEditor(scope, element, attribute)
    }