setRange([start, end], { mode } = {}) {
      if (self.locked) return;
      if (mode === "new") {
        // we need to update existing history item while drawing a new region
        self.parent.annotation.history.setReplaceNextUndoState();
      } else if (mode === "edit") {
        // we need to skip updating history item while editing existing region and record the state when we finish editing
        /** @see Video#finishDrawing() */
        self.parent.annotation.history.setSkipNextUndoState();
      }
      self.ranges = [{ start, end }];
    }
Set range for the region, only one frame for now,
could be extended to multiple frames in a future in a form of (...ranges)
@param {number[]} [start, end] Start and end frames
@param {Object} [options]
@param {"new" | "edit" | undefined} [options.mode] Do we dynamically change the region ("new" one or "edit" existing one) or just edit it precisely (undefined)?
       In first two cases we need to update undo history only once