How to use ve-range-utils - 10 common examples

start: caretPosition,
    end: normalizePositionByRangeLength(
      nearestCaretPos - 1,
      sequenceLength,
      true
    )
  };
  let dragStart = {
    start: nearestCaretPos,
    end: normalizePositionByRangeLength(caretPosition - 1, sequenceLength, true)
  };
  if (caretPosition === nearestCaretPos) {
    return; // do nothing because nearestCaretPos === caretPosition
  } else if (
    getRangeLength(dragEnd, sequenceLength) <
    getRangeLength(dragStart, sequenceLength)
  ) {
    draggingEnd = true; //the caret becomes the "selection end"
    selectionLayerUpdate(dragEnd);
    caretPositionOnDragStart = null;
  } else {
    draggingEnd = false; //the caret becomes the "selection end"
    selectionLayerUpdate(dragStart);
    caretPositionOnDragStart = null;
  }
}
export function handleCaretDrag({

sequenceData = { sequence: "" },
        readOnly,
        updateSequenceData,
        wrappedInsertSequenceDataAtPositionOrRange,
        caretPositionUpdate
        // handleInsert
      } = this.props;
      const sequenceLength = sequenceData.sequence.length;
      if (readOnly) {
        return window.toastr.warning("Sorry the sequence is Read-Only");
      }
      if (sequenceLength > 0) {
        let rangeToDelete = selectionLayer;
        if (caretPosition > 0) {
          rangeToDelete = {
            start: normalizePositionByRangeLength(
              caretPosition - (sequenceData.isProtein ? 3 : 1),
              sequenceLength
            ),
            end: normalizePositionByRangeLength(
              caretPosition - 1,
              sequenceLength
            )
          };
        }
        const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
          {},
          sequenceData,
          rangeToDelete
        );
        updateSequenceData(newSeqData);
        caretPositionUpdate(

//no selection layer yet, so we'll start one if necessary
  // 0 1 2 3 4 5 6 7 8 9
  //    c
  //        n
  //
  let dragEnd = {
    start: caretPosition,
    end: normalizePositionByRangeLength(
      nearestCaretPos - 1,
      sequenceLength,
      true
    )
  };
  let dragStart = {
    start: nearestCaretPos,
    end: normalizePositionByRangeLength(caretPosition - 1, sequenceLength, true)
  };
  if (caretPosition === nearestCaretPos) {
    return; // do nothing because nearestCaretPos === caretPosition
  } else if (
    getRangeLength(dragEnd, sequenceLength) <
    getRangeLength(dragStart, sequenceLength)
  ) {
    draggingEnd = true; //the caret becomes the "selection end"
    selectionLayerUpdate(dragEnd);
    caretPositionOnDragStart = null;
  } else {
    draggingEnd = false; //the caret becomes the "selection end"
    selectionLayerUpdate(dragStart);
    caretPositionOnDragStart = null;
  }
}

validate: (values, { sequenceLength }) => {
      let errors = {};
      if (
        !isRangeWithinRange(
          convertRangeTo0Based(values, sequenceLength),
          { start: 0, end: sequenceLength - 1 },
          sequenceLength
        )
      ) {
        errors.start = "Range must fit within sequence";
        errors.end = "Range must fit within sequence";
      }

      values.locations &&
        values.locations.length > 1 &&
        values.locations.forEach((loc, index) => {
          // if (!isRangeWithinRange(loc, values, sequenceLength)) {
          //   errors.locations = errors.locations || {};
          //   errors.locations[index] = {
          //     start: "Range must fit within feature",
          //     end: "Range must fit within feature"

snipRange,
  row,
  sequenceLength,
  bpsPerRow,
  snipConnectorStyle,
  charWidth,
  index
) {
  //tnr: we basically need to first determine what the range start and end are..
  // var _snipRange = {
  //     ...snipRange,
  //     end: norm(snipRange.end-1,sequenceLength)
  // }
  //then mask the range by the row

  let overlaps = getOverlapsOfPotentiallyCircularRanges(
    snipRange,
    { ...row, end: row.end + 1 },
    sequenceLength
  );
  return overlaps.map(function(overlap, index2) {
    let { xStart, width } = getXStartAndWidthOfRangeWrtRow(
      overlap,
      row,
      bpsPerRow,
      charWidth,
      sequenceLength
    );
    width -= charWidth;
    //the second logical operator catches the special case where we're at the very end of the sequence..
    let newCursorStyle = assign({}, snipConnectorStyle, {
      left: xStart + 2,

.map(function(deletionLayer, index) {
          let rangeSpansSequence =
            deletionLayer.start === deletionLayer.end + 1 ||
            (deletionLayer.start === 0 &&
              deletionLayer.end === sequenceLength - 1);
          let { /* className = "", style = {},  */ color } = deletionLayer;
          let overlaps = getOverlapsOfPotentiallyCircularRanges(
            deletionLayer,
            row,
            sequenceLength
          );
          return overlaps.map(function(overlap) {
            let { xStart, width } = getXStartAndWidthOfRangeWrtRow(
              overlap,
              row,
              bpsPerRow,
              charWidth,
              sequenceLength
            );
            let deletionStart = overlap.start === deletionLayer.start;
            let deletionEnd = overlap.end === deletionLayer.end;

            return [

.map(function(lineageLine, index) {
          let rangeSpansSequence =
            lineageLine.start === lineageLine.end + 1 ||
            (lineageLine.start === 0 && lineageLine.end === sequenceLength - 1);
          let { /* className = "", style = {}, */ color } = lineageLine;
          let overlaps = getOverlapsOfPotentiallyCircularRanges(
            lineageLine,
            row,
            sequenceLength
          );
          return overlaps.map(function(overlap) {
            let { xStart, width } = getXStartAndWidthOfRangeWrtRow(
              overlap,
              row,
              bpsPerRow,
              charWidth,
              sequenceLength,
              ...(getGaps ? getGaps(row) : [])
            );
            let lineageStart =
              (getGaps ? getGaps(overlap.start).gapsBefore : 0) +
                overlap.start ===

// const numBpsToShow = Math.ceil(sequenceLength / this.state.zoomLevel);
    const angle = 2 * Math.PI * percentOfCircle;

    let radius =
      this.state.zoomLevel === 1
        ? BASE_RADIUS
        : Math.max(BASE_RADIUS, svgWidth / Math.sin(angle / 2) / 2);

    const initialRadius = radius;

    const rotation = this.state.rotationDegrees * 0.0174533; //get radians
    const rangeToShowStart = getPositionFromAngle(
      rotation - angle / 2,
      sequenceLength
    );
    const rangeToShowEnd = getPositionFromAngle(
      rotation + angle / 2,
      sequenceLength
    );
    const rangeToShow =
      this.state.zoomLevel === 1
        ? { start: 0, end: Math.max(sequenceLength - 1, 0) }
        : {
            start: normalizePositionByRangeLength(
              rangeToShowStart,
              sequenceLength
            ),
            end: normalizePositionByRangeLength(rangeToShowEnd, sequenceLength)
          };

    const allLabels = [];
    const paredDownMessages = [];

// if (percentOfCircle === 1) {
    //   return "normal"
    // }

    // const numBpsToShow = Math.ceil(sequenceLength / this.state.zoomLevel);
    const angle = 2 * Math.PI * percentOfCircle;

    let radius =
      this.state.zoomLevel === 1
        ? BASE_RADIUS
        : Math.max(BASE_RADIUS, svgWidth / Math.sin(angle / 2) / 2);

    const initialRadius = radius;

    const rotation = this.state.rotationDegrees * 0.0174533; //get radians
    const rangeToShowStart = getPositionFromAngle(
      rotation - angle / 2,
      sequenceLength
    );
    const rangeToShowEnd = getPositionFromAngle(
      rotation + angle / 2,
      sequenceLength
    );
    const rangeToShow =
      this.state.zoomLevel === 1
        ? { start: 0, end: Math.max(sequenceLength - 1, 0) }
        : {
            start: normalizePositionByRangeLength(
              rangeToShowStart,
              sequenceLength
            ),
            end: normalizePositionByRangeLength(rangeToShowEnd, sequenceLength)

annotationsSVG.push(
      
        
      
    );
    // transform={"scale(" + transformX + ",.2) "}
    // annotationsSVG = annotationsSVG.concat(translationSVG);
  });