JSFiddle - React, Tailwind, and code Playground

by rcugut

HTML

<div ng-controller='FeedbackController'>
    <div class='feedback-container'>
        <div class='overlay' drawing-area=''>
          <div class='shape' ng-repeat='shape in data.shapes' shape-rectangle=''></div>
        </div>
    </div>
</div>

CSS

.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  cursor: crosshair;
}

.shape {
  position: absolute;
  border: 2px solid red;
  cursor: crosshair;
}

CoffeeScript

@HuskyApp = angular.module('HuskyApp', ['ngResource'])

@HuskyApp.controller('FeedbackController', ($scope, $http) ->
  $scope.data = {}
  $scope.data.shapes = []
  alert 'asd'
)


@HuskyApp.directive("drawingArea", ($document) ->

  #  K   L
  #  M   N
  #  point A and point B are two opposing points (Ax != Bx and Ay != By)
  #  Returns: {x,y,width,height} for an absolutely positioned div representing
  #           the rectangle described by pointA and pointB
  rectangleShape = (pointA, pointB) ->
    # Figure out if we're dealing with a K, N pair or a L, M pair
    if pointA.x > pointB.x
      if pointA.y > pointB.y
        N = pointA; K = pointB;
      else
        L = pointA; M = pointB;
    else
      if pointA.y > pointB.y
        M = pointA; L = pointB;
      else
        K = pointA; N = pointB;
    if K and N
      return { x: K.x, y: K.y, width: (N.x - K.x), height: (N.y - K.y) }
    else # we know L, M
      return { x: M.x, y: L.y, width: (L.x - M.x), height: (M.y - L.y) }



  return {
    restrict: 'A'
    link: (scope) ->
      $document.bind 'mousedown', ($event) ->
        scope.$apply ->
          console.log('event DOWN: ', $event.clientX, '-', $event.clientY)
          console.log('data', scope.data)
          scope.firstMousePosition = { x: $event.clientX, y: $event.clientY }
          scope.currentShape = rectangleShape(scope.firstMousePosition, scope.firstMousePosition)
          scope.data.shapes.push(scope.currentShape)


      $document.bind 'mousemove', ($event) ->
        scope.$apply ->
          if scope.currentShape
            rectangle = rectangleShape(scope.firstMousePosition, { x: $event.clientX, y: $event.clientY })
            scope.currentShape.x = rectangle.x
            scope.currentShape.y = rectangle.y
            scope.currentShape.width = rectangle.width
            scope.currentShape.height = rectangle.height
            console.log('event MOVE: ', $event.clientX, '-', $event.clientY)


      $document.bind 'mouseup',...