drawing.js

require([
  "dojo/on",
  "esri/Map",
  "esri/views/MapView",
  "esri/Graphic",
  "esri/geometry/Polyline",
  "esri/geometry/Point",
  "esri/layers/GraphicsLayer",
  "esri/symbols/SimpleLineSymbol",
  "dojo/domReady!"
],
function(on, Map, MapView, Graphic, Polyline, Point, GraphicsLayer, SimpleLineSymbol) {
  
  var lineSymbol = new SimpleLineSymbol({
    color: [226, 119, 40],
    width: 4
  });
  
  map = new Map({
    basemap: "topo"
  });
  
  graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);
  view = new MapView({
    container: "mapDiv",
    map: map,
    scale: 5000000,
    center: [-101.17, 21,78]
  });
  
  var handle = on.pausable(view, "click", function(e) {
    graphicsLayer.clear();
    handle.pause();
    var mp = e.mapPoint;
    var line;
    var hover = on.pausable(view.container, "mousemove", function(evt) {
      var mp2 = new Point();
      view.toMap(evt.offsetX, evt.offsetY, mp2);
      graphicsLayer.clear();
      graphicsLayer.add(new Graphic({
        geometry: new Polyline({ 
          paths: [[mp.x, mp.y], [mp2.x, mp2.y]],
          spatialReference: map.spatialReference
        }),
        symbol: lineSymbol
      }));
      on.once(view, "click", function(event) {
        graphicsLayer.clear();
        hover.pause();
        var mp3 = event.mapPoint;
        graphicsLayer.add(new Graphic({
          geometry: new Polyline({
            paths: [[mp.x, mp.y], [mp3.x, mp3.y]],
            spatialReference: map.spatialReference
          }),
          symbol: lineSymbol
        }));
        hover.remove();
        handle.resume();
      });
    });
  });
  
});