<commit_before>app.LineView = Backbone.View.extend({

  initialize: function() {
    this.listenTo(this.model, 'change:coordinates', this.updateCoordinates);
    this.throttledShowPredicts = _.throttle(this.showPredicts, 150);
    this.throttledReroute = _.throttle(this.reroute, 150);
    this.isDrawing = false;
    this.markers = [];
  },

  render: function() {
    var coordinates = this.model.get('coordinates');
    var color = this.model.get('color');

    // A line showing the main proposed transit route .
    this.line = L.multiPolyline(coordinates, options = {
      color: '#' + color,
      opacity: 1,
      weight: 10,
    }).addTo(app.map);

    this.redrawMarkers();

    // Marker for point to be added in the middle
    /*var markerIcon = L.divIcon({
      className: 'midpointIcon',
      html: '<div class="mapMarker" style="pointer-events: none; background:#' + color + '"></div>'
    });

    this.midpointMarker = L.marker([0,0], {
      opacity: 0,
      icon: markerIcon
    }).addTo(app.map);*/

    //var throttledHandler = _.throttle(this.updateMidpointMarker, 5);
    //this.line.on("mouseover mousemove mouseout", this.updateMidpointMarker, this);
    this.line.getLayers().forEach(function(layer) {
      layer.on("mousedown", this.addMidpoint, this);
    }, this);

    // Jump into drawing mode for newly created lines
    if (coordinates.length < 2) this.startDrawing();
  },

  updateCoordinates: function() {
    var coordinates = this.model.get('coordinates');
    this.line.setLatLngs(coordinates);

  },

  redrawMarkers: function() {
    // Markers at each user-added point. Used for editing.
    this.markers.forEach(function(marker) {
      app.map.removeLayer(marker);
    })

    var points = this.model.getPoints();
    points.forEach(function(point, segmentIndex) {
      this.addMarker(point, segmentIndex);
    }, this);
  },

  updateMidpointMarker: function(event) {
    if (event.type == "mouseover") {
      this.midpointMarker.setOpacity(0.6);
    }

    console.log(event, this.line);
    this.midpointMarker.setLatLng(event.latlng);
  },

  addMidpoint: function(event) {
    console.log(event);
    var newPoint = app.utils.cleanPoint(event.latlng);

    // Index of the segment that was clicked in
    var segmentIndex = this._getIndexOfLayerInLine(event.target, this.line);
    this.model.insertPoint(newPoint, segmentIndex);
    this.addMarker(newPoint, segmentIndex);
    
    this.redrawMarkers();
  },

  _getIndexOfLayerInLine: function(layer, line) {
    console.log(layer, line, line.getLayers());
    var lineLayers = line.getLayers();
    for (var i = 0; i < lineLayers.length; i++) {
      if (layer === lineLayers[i]) {
        return i;
      }
    }
  },

  startDrawing: function() {
    this.isDrawing = true;
    $(app.map._container).addClass('drawCursor');

    app.map.on('click', this.addPoint, this);
    app.map.on('mousemove', this.throttledShowPredicts, this);

    this.predictLine = L.polyline([], {
      color: '#' + this.model.get('color'),
      opacity: 1,
      weight: 10,
    }).addTo(app.map);
  },

  showPredicts: function(event) {
    var coordinates = this.model.get('coordinates');
    if (coordinates.length === 0) return;

    var mousePoint = app.utils.cleanPoint(event.latlng);
    var points = {
      from: this.model.getLastPoint(),
      to: mousePoint,
    };

    var predictLine = this.predictLine;
    this.model.getRoute(points, function(coordinates) {
      predictLine.setLatLngs(coordinates);
    });
  },

  addPoint: function(event) {
    var point = app.utils.cleanPoint(event.latlng);
    this.model.extendLine(point);
    var index = this.model.get('coordinates').length - 1;
    this.addMarker(point, index);
  },

  stopDrawing: function() {
    this.isDrawing = false;
    $(app.map._container).removeClass('drawCursor');
    app.map.off('click', this.addPoint, this);
    app.map.off('mousemove', this.throttledShowPredicts, this);
    if (this.predictLine) app.map.removeLayer(this.predictLine);
  },

  // Markers are user-clicked locations, used for dragging and editing lines
  addMarker: function(point, index) {
    var color = this.model.get('color');
    var icon = L.divIcon({
      className: '',
      html: '<div class="mapMarker" style="background:#' + color + '"></div>'
    });
    var marker = L.marker(point, { icon: icon, draggable: true, }).addTo(app.map);
<commit_msg>Fix marker index problem on line draw.<commit_after>app.LineView = Backbone.View.extend({

  initialize: function() {
    this.listenTo(this.model, 'change:coordinates', this.updateCoordinates);
    this.throttledShowPredicts = _.throttle(this.showPredicts, 150);
    this.throttledReroute = _.throttle(this.reroute, 150);
    this.isDrawing = false;
    this.markers = [];
  },

  render: function() {
    var coordinates = this.model.get('coordinates');
    var color = this.model.get('color');

    // A line showing the main proposed transit route .
    this.line = L.multiPolyline(coordinates, options = {
      color: '#' + color,
      opacity: 1,
      weight: 10,
    }).addTo(app.map);

    this.redrawMarkers();

    // Marker for point to be added in the middle
    /*var markerIcon = L.divIcon({
      className: 'midpointIcon',
      html: '<div class="mapMarker" style="pointer-events: none; background:#' + color + '"></div>'
    });

    this.midpointMarker = L.marker([0,0], {
      opacity: 0,
      icon: markerIcon
    }).addTo(app.map);*/

    //var throttledHandler = _.throttle(this.updateMidpointMarker, 5);
    //this.line.on("mouseover mousemove mouseout", this.updateMidpointMarker, this);
    this.line.getLayers().forEach(function(layer) {
      layer.on("mousedown", this.addMidpoint, this);
    }, this);

    // Jump into drawing mode for newly created lines
    if (coordinates.length < 2) this.startDrawing();
  },

  updateCoordinates: function() {
    var coordinates = this.model.get('coordinates');
    this.line.setLatLngs(coordinates);

  },

  redrawMarkers: function() {
    // Markers at each user-added point. Used for editing.
    this.markers.forEach(function(marker) {
      app.map.removeLayer(marker);
    })

    var points = this.model.getPoints();
    points.forEach(function(point, segmentIndex) {
      this.addMarker(point, segmentIndex);
    }, this);
  },

  updateMidpointMarker: function(event) {
    if (event.type == "mouseover") {
      this.midpointMarker.setOpacity(0.6);
    }

    console.log(event, this.line);
    this.midpointMarker.setLatLng(event.latlng);
  },

  addMidpoint: function(event) {
    console.log(event);
    var newPoint = app.utils.cleanPoint(event.latlng);

    // Index of the segment that was clicked in
    var segmentIndex = this._getIndexOfLayerInLine(event.target, this.line);
    this.model.insertPoint(newPoint, segmentIndex);
    this.addMarker(newPoint, segmentIndex);
    
    this.redrawMarkers();
  },

  _getIndexOfLayerInLine: function(layer, line) {
    console.log(layer, line, line.getLayers());
    var lineLayers = line.getLayers();
    for (var i = 0; i < lineLayers.length; i++) {
      if (layer === lineLayers[i]) {
        return i;
      }
    }
  },

  startDrawing: function() {
    this.isDrawing = true;
    $(app.map._container).addClass('drawCursor');

    app.map.on('click', this.addPoint, this);
    app.map.on('mousemove', this.throttledShowPredicts, this);

    this.predictLine = L.polyline([], {
      color: '#' + this.model.get('color'),
      opacity: 1,
      weight: 10,
    }).addTo(app.map);
  },

  showPredicts: function(event) {
    var coordinates = this.model.get('coordinates');
    if (coordinates.length === 0) return;

    var mousePoint = app.utils.cleanPoint(event.latlng);
    var points = {
      from: this.model.getLastPoint(),
      to: mousePoint,
    };

    var predictLine = this.predictLine;
    this.model.getRoute(points, function(coordinates) {
      predictLine.setLatLngs(coordinates);
    });
  },

  addPoint: function(event) {
    var point = app.utils.cleanPoint(event.latlng);
    this.model.extendLine(point);
    var index = this.markers.length;
    this.addMarker(point, index);
  },

  stopDrawing: function() {
    this.isDrawing = false;
    $(app.map._container).removeClass('drawCursor');
    app.map.off('click', this.addPoint, this);
    app.map.off('mousemove', this.throttledShowPredicts, this);
    if (this.predictLine) app.map.removeLayer(this.predictLine);
  },

  // Markers are user-clicked locations, used for dragging and editing lines
  addMarker: function(point, index) {
    var color = this.model.get('color');
    var icon = L.divIcon({
      className: '',
      html: '<div class="mapMarker" style="background:#' + color + '"></div>'
    });
    var marker = L.marker(point, { icon: icon, draggable: true, }).addTo(app.map);

{'fraction_non_alphanumeric': 0.15115489130434784, 'fraction_numerical': 0.004868659420289855, 'mean_word_length': 3.2384836852207295, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3940215', 'n_tokens_mistral': 2936, 'n_tokens_neox': 2826, 'n_words': 567}