src/views/canvas/CanvasSelection.js
function(data) {

    let xZero = data.xZero;
    const yZero = data.yZero;
    const n = data.n;
    const k = data.k;
    const selection = data.selection;
    // and checks the prev and next row for selection  -> no borders in a selection
    const mPrevSel= data.mPrevSel;
    const mNextSel = data.mNextSel;

    // get the length of this selection
    let selectionLength = 0;
    const end = data.model.get("seq").length - 1;
    for (let i = n; i <= end; i++) {
      if (selection.indexOf(i) >= 0) {
        selectionLength++;
      } else {
        break;
      }
    }

    // TODO: ugly!
    const boxWidth = this.g.zoomer.get("columnWidth");
    const boxHeight = this.g.zoomer.get("rowHeight");
    const totalWidth = (boxWidth * selectionLength) + 1;

    const hidden = this.g.columns.get('hidden');

    this.ctx.beginPath();
    const beforeWidth = this.ctx.lineWidth;
    this.ctx.lineWidth = 3;
    const beforeStyle = this.ctx.strokeStyle;
    this.ctx.strokeStyle = "#FF0000";

    xZero += k * boxWidth;

    // split up the selection into single cells
    let xPart = 0;
    const end1 = selectionLength - 1;
    for (let i = 0; i <= end1; i++) {
      let xPos = n + i;
      if (hidden.indexOf(xPos) >= 0) {
        continue;
      }
      // upper line
      if (!((typeof mPrevSel !== "undefined" && mPrevSel !== null) && mPrevSel.indexOf(xPos) >= 0)) {
        this.ctx.moveTo(xZero + xPart, yZero);
        this.ctx.lineTo(xPart + boxWidth + xZero, yZero);
      }
      // lower line
      if (!((typeof mNextSel !== "undefined" && mNextSel !== null) && mNextSel.indexOf(xPos) >= 0)) {
        this.ctx.moveTo(xPart + xZero, boxHeight + yZero);
        this.ctx.lineTo(xPart + boxWidth + xZero, boxHeight + yZero);
      }

      xPart += boxWidth;
    }

    // left
    this.ctx.moveTo(xZero,yZero);
    this.ctx.lineTo(xZero, boxHeight + yZero);

    // right
    this.ctx.moveTo(xZero + totalWidth,yZero);
    this.ctx.lineTo(xZero + totalWidth, boxHeight + yZero);

    this.ctx.stroke();
    this.ctx.strokeStyle = beforeStyle;
    return this.ctx.lineWidth = beforeWidth;
  }
function(data) {

    let xZero = data.xZero;
    const yZero = data.yZero;
    const n = data.n;
    const k = data.k;
    const selection = data.selection;
    // and checks the prev and next row for selection  -> no borders in a selection
    const mPrevSel= data.mPrevSel;
    const mNextSel = data.mNextSel;

    // get the length of this selection
    let selectionLength = 0;
    const end = data.model.get("seq").length - 1;
    for (let i = n; i <= end; i++) {
      if (selection.indexOf(i) >= 0) {
        selectionLength++;
      } else {
        break;
      }
    }

    // TODO: ugly!
    const boxWidth = this.g.zoomer.get("columnWidth");
    const boxHeight = this.g.zoomer.get("rowHeight");
    const totalWidth = (boxWidth * selectionLength) + 1;

    const hidden = this.g.columns.get('hidden');

    this.ctx.beginPath();
    const beforeWidth = this.ctx.lineWidth;
    this.ctx.lineWidth = 3;
    const beforeStyle = this.ctx.strokeStyle;
    this.ctx.strokeStyle = "#FF0000";

    xZero += k * boxWidth;

    // split up the selection into single cells
    let xPart = 0;
    const end1 = selectionLength - 1;
    for (let i = 0; i <= end1; i++) {
      let xPos = n + i;
      if (hidden.indexOf(xPos) >= 0) {
        continue;
      }
      // upper line
      if (!((typeof mPrevSel !== "undefined" && mPrevSel !== null) && mPrevSel.indexOf(xPos) >= 0)) {
        this.ctx.moveTo(xZero + xPart, yZero);
        this.ctx.lineTo(xPart + boxWidth + xZero, yZero);
      }
      // lower line
      if (!((typeof mNextSel !== "undefined" && mNextSel !== null) && mNextSel.indexOf(xPos) >= 0)) {
        this.ctx.moveTo(xPart + xZero, boxHeight + yZero);
        this.ctx.lineTo(xPart + boxWidth + xZero, boxHeight + yZero);
      }

      xPart += boxWidth;
    }

    // left
    this.ctx.moveTo(xZero,yZero);
    this.ctx.lineTo(xZero, boxHeight + yZero);

    // right
    this.ctx.moveTo(xZero + totalWidth,yZero);
    this.ctx.lineTo(xZero + totalWidth, boxHeight + yZero);

    this.ctx.stroke();
    this.ctx.strokeStyle = beforeStyle;
    return this.ctx.lineWidth = beforeWidth;
  }
function ( data ) { let xZero = data . xZero ; const yZero = data . yZero ; const n = data . n ; const k = data . k ; const selection = data . selection ; // and checks the prev and next row for selection  -> no borders in a selection const mPrevSel = data . mPrevSel ; const mNextSel = data . mNextSel ; // get the length of this selection let selectionLength = 0 ; const end = data . model . get ( "seq" ) . length - 1 ; for ( let i = n ; i <= end ; i ++ ) { if ( selection . indexOf ( i ) >= 0 ) { selectionLength ++ ; } else { break ; } } // TODO: ugly! const boxWidth = this . g . zoomer . get ( "columnWidth" ) ; const boxHeight = this . g . zoomer . get ( "rowHeight" ) ; const totalWidth = ( boxWidth * selectionLength ) + 1 ; const hidden = this . g . columns . get ( 'hidden' ) ; this . ctx . beginPath ( ) ; const beforeWidth = this . ctx . lineWidth ; this . ctx . lineWidth = 3 ; const beforeStyle = this . ctx . strokeStyle ; this . ctx . strokeStyle = "#FF0000" ; xZero += k * boxWidth ; // split up the selection into single cells let xPart = 0 ; const end1 = selectionLength - 1 ; for ( let i = 0 ; i <= end1 ; i ++ ) { let xPos = n + i ; if ( hidden . indexOf ( xPos ) >= 0 ) { continue ; } // upper line if ( ! ( ( typeof mPrevSel !== "undefined" && mPrevSel !== null ) && mPrevSel . indexOf ( xPos ) >= 0 ) ) { this . ctx . moveTo ( xZero + xPart , yZero ) ; this . ctx . lineTo ( xPart + boxWidth + xZero , yZero ) ; } // lower line if ( ! ( ( typeof mNextSel !== "undefined" && mNextSel !== null ) && mNextSel . indexOf ( xPos ) >= 0 ) ) { this . ctx . moveTo ( xPart + xZero , boxHeight + yZero ) ; this . ctx . lineTo ( xPart + boxWidth + xZero , boxHeight + yZero ) ; } xPart += boxWidth ; } // left this . ctx . moveTo ( xZero , yZero ) ; this . ctx . lineTo ( xZero , boxHeight + yZero ) ; // right this . ctx . moveTo ( xZero + totalWidth , yZero ) ; this . ctx . lineTo ( xZero + totalWidth , boxHeight + yZero ) ; this . ctx . stroke ( ) ; this . ctx . strokeStyle = beforeStyle ; return this . ctx . lineWidth = beforeWidth ; }
draws a single user selection
draws a single user selection