Merge branch 'marking-rectangle'

app/assets/javascripts/components/mark/tools/index.cjsx

@@ -2,5 +2,6 @@ module.exports =
   superAwesomePointTool: require './super-awesome-point-tool'
   verticalMark: require './vertical-mark-tool'
   textRow:      require './text-row-tool'
+  rectangleTool:  require './rectangle-tool'
 
 

app/assets/javascripts/components/mark/tools/rectangle-tool/delete-button.cjsx

@@ -0,0 +1,39 @@
+React = require 'react'
+
+RADIUS = 8
+STROKE_COLOR = 'white'
+FILL_COLOR = 'black'
+STROKE_WIDTH = 1.5
+
+CROSS_PATH = "
+  M #{-1 * RADIUS * 0.7 } 0
+  L #{RADIUS * 0.7 } 0
+  M 0 #{-1 * RADIUS * 0.7 }
+  L 0 #{RADIUS * 0.7 }
+"
+
+DESTROY_TRANSITION_DURATION = 0
+
+module.exports = React.createClass
+  displayName: 'DeleteButton'
+
+  getDefaultProps: ->
+    x: 0
+    y: 0
+    rotate: 0
+
+  render: ->
+    transform = "
+      translate(#{@props.x+40}, #{@props.y-40})
+      rotate(#{@props.rotate})
+      scale(#{1 / @props.tool.props.xScale}, #{1 / @props.tool.props.yScale})
+    "
+
+    <g className="clickable drawing-tool-delete-button" transform={transform} stroke={STROKE_COLOR} strokeWidth={STROKE_WIDTH} onClick={@destroyTool}>
+      <circle r={RADIUS} fill={FILL_COLOR} />
+      <path d={CROSS_PATH} transform="rotate(45)" />
+    </g>
+
+  destroyTool: ->
+    @props.tool.setState destroying: true, =>
+      setTimeout @props.tool.props.onDestroy, DESTROY_TRANSITION_DURATION

app/assets/javascripts/components/mark/tools/rectangle-tool/drag-handle.cjsx

@@ -0,0 +1,14 @@
+React = require 'react'
+Draggable = require 'lib/draggable'
+
+RADIUS = 10
+OVERSHOOT = 4
+
+module.exports = React.createClass
+  displayName: 'DragHandle'
+
+  render: ->
+
+    <Draggable onDrag = {@props.onDrag} >
+      <circle className="drag-handle" r={RADIUS} fill="red" cx="#{@props.x}", cy="#{@props.y}"} stroke="transparent" />
+    </Draggable>

app/assets/javascripts/components/mark/tools/rectangle-tool/index.cjsx

@@ -0,0 +1,188 @@
+# @cjsx React.DOM
+React          = require 'react'
+Draggable      = require 'lib/draggable'
+Classification = require 'models/classification'
+DragHandle     = require './drag-handle'
+DeleteButton    = require './delete-button'
+
+SELECTED_RADIUS = 20
+DELETE_BUTTON_ANGLE = 45
+DELETE_BUTTON_DISTANCE = 9 / 10
+DEBUG = false
+
+
+module.exports = React.createClass
+  displayName: 'RectangleTool'
+
+  propTypes:
+    key:  React.PropTypes.number.isRequired
+    mark: React.PropTypes.object.isRequired
+
+  initCoords: null
+
+  statics:
+    defaultValues: ({x, y}) ->
+      x: x
+      y: y
+      width: 0
+      height: 0
+
+    initStart: ({x,y}, mark) ->
+      @initCoords = {x,y}
+      {x,y}
+
+    initMove: (cursor, mark) ->
+      if cursor.x > @initCoords.x
+        width = cursor.x - mark.x
+        x = mark.x
+      else 
+        width = @initCoords.x - cursor.x
+        x = cursor.x
+
+      if cursor.y > @initCoords.y
+        height = cursor.y - mark.y
+        y = mark.y
+      else
+        height = @initCoords.y - cursor.y
+        y = cursor.y
+
+      {x, y, width, height}
+
+  initCoords: null
+
+
+  getInitialState: ->
+    console.log 'Rectangle GET STATE'
+    console.log "PROPS", @props
+    mark = @props.mark
+    unless mark.status?
+      mark.status = 'mark'
+    mark: mark
+    # set up the state in order to caluclate the polyline as rectangle
+    x: @props.mark.x
+    y: @props.mark.y
+    width: @props.width
+    height: @props.height
+
+    buttonDisabled: false
+    lockTool: false
+
+  componentWillReceiveProps: ->
+    @setState x: @props.mark.x
+    @setState y: @props.mark.y
+    @setState width: @props.width
+    @setState height: @props.height
+
+
+  handleMainDrag: (e) ->
+    # console.log "handleDrag (HD)"
+    return if @state.lockTool
+    { x,y } = @props.getEventOffset e
+    mark = @state.mark
+    markHeight = mark.yLower - mark.yUpper
+    # why? in handleMarkClick clickOffset.x is mark.x - ex. Is not the same event?
+    # does @props.clickOffset.x represent the mark station before the current drag event?
+    mark.x = x + @props.clickOffset.x # add initial click offset
+    mark.y = y + @props.clickOffset.y
+
+    # prevent dragging mark beyond image bounds
+    return if ( y - markHeight/2 ) < 0
+    return if ( y + markHeight/2 ) > @props.imageHeight
+
+    @setState x: mark.x
+    @setState y: mark.y
+    @setState mark: mark
+      # , => @forceUpdate()
+
+  # handleMainDrag: (e, d) ->
+  #   @props.mark.x += d.x / @props.xScale
+  #   @props.mark.y += d.y / @props.yScale
+  #   @props.onChange e
+
+  handleX1Y1Drag: (e, d) ->
+    @props.mark.x += d.x / @props.xScale
+    @props.mark.y += d.y / @props.yScale
+    @props.mark.width -= d.x / @props.xScale
+    @props.mark.height -= d.y / @props.yScale
+    @props.onChange e
+
+  handleX1Y2Drag: (e, d) ->
+    @props.mark.x += d.x / @props.xScale
+    @props.mark.width -= d.x / @props.xScale
+    @props.mark.height += d.y / @props.yScale
+    @props.onChange e
+
+  handleX2Y1Drag: (e, d) ->
+    @props.mark.y += d.y / @props.yScale
+    @props.mark.width += d.x / @props.xScale
+    @props.mark.height -= d.y / @props.yScale
+    @props.onChange e
+
+  handleX2Y2Drag: (e, d) ->
+    @props.mark.width += d.x / @props.xScale
+    @props.mark.height += d.y / @props.yScale
+    @props.onChange e
+
+  getDeleteButtonPosition: ->
+    theta = (DELETE_BUTTON_ANGLE) * (Math.PI / 180)
+    x: (SELECTED_RADIUS / @props.xScale) * Math.cos theta
+    y: -1 * (SELECTED_RADIUS / @props.yScale) * Math.sin theta
+
+  handleMouseDown: ->
+    console.log 'handleMouseDown()'
+    @props.onSelect @props.mark
+
+  render: ->
+    # console.log "Render: Rectangle STATE @ Render", @state
+    classString = "rectangleTool"
+    x1 = @props.mark.x
+    width = @props.mark.width
+    x2 = x1 + width
+    y1 = @props.mark.y
+    height = @props.mark.height
+    y2 = y1 + height
+
+    points = [
+      [x1, y1].join ','
+      [x2, y1].join ','
+      [x2, y2].join ','
+      [x1, y2].join ','
+      [x1, y1].join ','
+    ].join '\n'
+
+    # console.log "render props.clickOffset", @props.clickOffset
+    # console.log "render props", @props
+
+    <g 
+      className = {classString} 
+      tool={this}
+      onMouseDown={@props.onSelect unless @props.disabled}
+    >
+
+      <Draggable 
+        onStart = {@props.handleMarkClick.bind null, @props.mark} 
+        onDrag = {@handleMainDrag} >
+        <polyline points={points} strokeWidth="5" stroke="orange" fill="none"/>
+      </Draggable>
+
+      { if @props.selected
+        <g>
+          <DeleteButton tool={this} x={@state.x + (width * DELETE_BUTTON_DISTANCE)} y={@state.y} />
+          <DragHandle x={@props.mark.x} y={@props.mark.y} onDrag={@handleX1Y1Drag} />
+          <DragHandle x={x2} y={y1} onDrag={@handleX2Y1Drag} />
+          <DragHandle x={x2} y={y2} onDrag={@handleX2Y2Drag} />
+          <DragHandle x={x1} y={y2} onDrag={@handleX1Y2Drag} />
+        </g>
+      }
+    </g>
+
+
+
+
+
+
+
+
+
+
+

app/assets/javascripts/components/mark/tools/text-row-tool/index.cjsx

@@ -78,8 +78,8 @@ module.exports = React.createClass
     # <text x={@props.mark.x} y={@props.mark.y} fill="red" fontSize="55">SuperAwesomePoint!</text>
 
   handleDrag: (e, d) ->
-    console.log 'PROPS: ', @props
-    console.log 'WIDTH: ', @props.ref.props.width * @props.yScale
+    # console.log 'PROPS: ', @props
+    # console.log 'WIDTH: ', @props.ref.props.width * @props.yScale
     @props.mark.x += d.x / @props.xScale
     @props.mark.y += d.y / @props.yScale
     @props.onChange e

app/assets/javascripts/components/subject-viewer.cjsx

@@ -89,6 +89,7 @@ module.exports = React.createClass
 
   handleInitStart: (e) ->
     console.log 'handleInitStart() '
+    console.log "@props.workflow", @props.workflow
 
     taskDescription = @props.workflow.tasks[@props.annotation.task]
     mark = @state.selectedMark
@@ -111,6 +112,7 @@ module.exports = React.createClass
         tool: @props.annotation._toolIndex
       if toolDescription.details?
         mark.details = for detailTaskDescription in toolDescription.details
+          console.log "!taskTacking", tasks[detailTaskDescription.type]
           tasks[detailTaskDescription.type].getDefaultAnnotation()
 
     @props.annotation.value.push mark
@@ -194,13 +196,16 @@ module.exports = React.createClass
       # , => @forceUpdate()
 
   selectMark: (annotation, mark) ->
+    console.log "FIND FIND FIND FIND FIND FIND FIND FIND"
+    console.log "in the selectMark()"
     if annotation? and mark?
       index = annotation.value.indexOf mark
       annotation.value.splice index, 1
       annotation.value.push mark
     @setState selectedMark: mark, =>
       if mark?.details?
         @forceUpdate() # Re-render to reposition the details tooltip.
+    console.log 'leaving selectMark()...'
 
   destroyMark: (annotation, mark) ->
     if mark is @state.selectedMark
@@ -267,7 +272,7 @@ module.exports = React.createClass
                     mark._key ?= Math.random()
                     toolDescription = taskDescription.tools[mark.tool]
 
-                    console.log 'MARK TOOL: ', mark.tool
+                    # console.log 'MARK TOOL: ', mark.tool
 
                     # toolEnv =
                     #   scale: @getScale()
@@ -286,7 +291,7 @@ module.exports = React.createClass
                     #   # onDestroy: @destroyMark.bind this, annotation, mark
 
                     ToolComponent = markingTools[toolDescription.type]
-
+                    # console.log "IS THIS THE MARK STUFF?", @state.selectedMark
                     <ToolComponent 
                       key={mark._key} 
                       mark={mark}
@@ -296,7 +301,7 @@ module.exports = React.createClass
                       selected={mark is @state.selectedMark}
                       getEventOffset={@getEventOffset}
                       ref={@refs.sizeRect}
-
+                      handleMarkClick={@handleMarkClick}
                       onChange={@updateAnnotations} 
                       onSelect={@selectMark.bind this, annotation, mark}
                       onDestroy={@destroyMark.bind this, annotation}

app/assets/javascripts/lib/draggable.cjsx

@@ -27,6 +27,8 @@ module.exports = React.createClass
         onMouseDown: @handleStart
 
   _rememberCoords: (e) ->
+    # console.log "remCoord event", e
+    # console.log "e.pageX", e.pageX
     @_previousEventCoords =
       x: e.pageX
       y: e.pageY
@@ -35,6 +37,7 @@ module.exports = React.createClass
     e.preventDefault()
 
     @_rememberCoords e
+    # console.log "previous coords", @_previousEventCoords
 
     # Prefix with this class to switch from `cursor:grab` to `cursor:grabbing`.
     document.body.classList.add 'dragging'
@@ -48,6 +51,7 @@ module.exports = React.createClass
       startHandler e
 
   handleDrag: (e) ->
+    # console.log "handleDrag event", e
     d =
       x: e.pageX - @_previousEventCoords.x
       y: e.pageY - @_previousEventCoords.y

db/seeds.rb

@@ -273,7 +273,9 @@
         instruction: 'Pick a field and mark it with the corresponding marking tool.',
         tools: [
           {type: 'superAwesomePointTool', label: 'SuperAwesomePointTool', color: 'red'},
-          {type: 'textRow', label: 'Text Row', color: 'green'}
+          {type: 'textRow', label: 'Text Row', color: 'green'},
+          {type: 'rectangleTool', label: 'Rectangle Tool', color: 'yellow'}
+
         ],
         next_task: nil
       }