             />
 
             <DeleteButton 
-              transform = "translate(50, #{Math.round @state.markHeight/2})" 
+              transform = "translate(50, #{Math.round markHeight/2})" 
               onClick = {@handleMarkDelete}
               workflow = {@props.workflow}
               isSelected = {@props.selected}

      {x, y}

  getInitialState: ->
    # # DEBUG CODE
    # console.log "PROPS [#{@props.mark.yUpper},#{@props.mark.yLower}]"
    # console.log "INITIAL (STATE.X, STATE.Y): (#{Math.round @props.mark.x},#{Math.round @props.mark.y})"
    mark: @props.mark
    centerX: @props.mark.x
    centerY: @props.mark.y
    markHeight: @props.defaultMarkHeight
    fillColor: 'rgba(0,0,0,0.5)'
    strokeColor: 'rgba(0,0,0,0.5)'
    strokeWidth: 6
    yUpper: @props.mark.yUpper
    yLower: @props.mark.yLower
    markHeight: @props.mark.yLower - @props.mark.yUpper
    markStatus: 'mark'

  componentWillReceiveProps: ->
    @setState
      key: @props.mark.key
      yUpper: @props.mark.yUpper
      yLower: @props.mark.yLower
      centerX: @props.mark.x
      centerY: @props.mark.y
      markHeight: @props.mark.yLower - @props.mark.yUpper

  onClickMarkButton: ->
    markStatus = @state.markStatus
    console.log 'markStatus is ', markStatus

    else
      markDragHandler = @props.handleDragMark

    markHeight = @state.mark.yLower - @state.mark.yUpper

    <g 
      className = "point drawing-tool" 
      transform = {"translate(#{Math.ceil @state.strokeWidth}, #{Math.round( @state.mark.y - markHeight/2 ) })"} 
      data-disabled = {@props.disabled || null} 
      data-selected = {@props.selected || null}
    >
