slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题

 slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题

　　上次解决区域选择不能跨冻结列问题的时候，剩了个尾巴，从右往左选择的时候，会出现选择不正常的情况，后续对这个问题进行了修正。

在修正问题前，需要选择的方向，即从左往右还是从右往左选择（L->R Or R->L)。

　　确定是否跨区域，前提知道选择的方向，即（L->R && Start <= frozenColumn && End > frozenColumn || R->L && Start>frozenColumn && End <=frozenColumn) 。

　　从选择方向得知，我们需要记录开始和结束 （Start ，End)。

　　上述准备条件之后剩下的就是计算border了，L->R的情况跨区域的时候 L的右边框0，R->L 的时候，R的左边框0。

　　起点问题 ，L->R跨区域的情况，R的Left为0；R->L跨区域的情况，L的起点为L父容器的宽度- 当前的左起点。

　　分析之后，改造代码：

　　

function handleDrag(e, dd) {
      if (!_dragging) {
        return;
      }
      e.stopImmediatePropagation();

      var end = _grid.getCellFromPoint(
        e.pageX - _$activeCanvas.offset().left + _columnOffset,
        e.pageY - _$activeCanvas.offset().top + _rowOffset
      );

      if ((!_grid.canCellBeSelected(end.row, end.cell))
        //|| (!_isRightCanvas && (end.cell > _gridOptions.frozenColumn))
        //|| (_isRightCanvas && (end.cell <= _gridOptions.frozenColumn))
        //|| ( !_isBottomCanvas && ( end.row >= _gridOptions.frozenRow ) )
        || (_isBottomCanvas && (end.row < _gridOptions.frozenRow))
      ) {
        return;
      }

      dd.range.end = end;
      var canvas = $(_grid.getActiveCanvasNode(e));
      _decorator.show(new Slick.Range(dd.range.start.row, dd.range.start.cell, end.row, end.cell), {
        start: _startCell.cell,
        canvas: canvas,
        end: dd.range.end.cell
      });
    }

function show(range, cfg) {
      var canvas = cfg.canvas;
      var start = cfg.start;
      var end = cfg.end;
      var from = grid.getCellNodeBox(range.fromRow, range.fromCell);
      var to = grid.getCellNodeBox(range.toRow, range.toCell);

      // range left to right
      var directLR = start <= end;
      // frozenColumn temp var
      var frozenColumn = grid.getOptions().frozenColumn;

      var lR = false;
      // lR true condition
      if (directLR) {
        lR = start <= frozenColumn && end > frozenColumn;
      } else {
        lR = start > frozenColumn && end <= frozenColumn;
      }

      if (!_elem) {
        _elem = $("<div></div>", { css: options.selectionCss })
          .addClass(options.selectionCssClass)
          .css("position", "absolute")
          .appendTo(grid.getActiveCanvasNode());
        _borderWidth = _elem.css("border-left-width");
      }

      // lr ,create new element .
      if (lR && !_rElem) {
        _rElem = $("<div></div>", { css: options.selectionCss })
          .addClass(options.selectionCssClass)
          .css("position", "absolute")
          .appendTo(canvas);
      }

      // ! lr ,remove _rElem
      if (!lR && _rElem) {
        _rElem.remove();
        _rElem = null;
      }

      var temp = lR && directLR ? _rElem : _elem;
      var lWidth = lR ? directLR ? canvas.width() : to.right - 2 : (to.right - from.left - 2);
      var lLeft = lR && !directLR ? 0 : (from.left - 1);
      //console.log("DIRECT_LR:" + directLR + " FROM_L:" + from.left + " TO_L:" + to.left + " FROM_R:" + from.right + " TO_R" + to.right + " START:" + start + " END:" + end + " LWIDTH:" + lWidth)
      if (_elem) {
        _elem.css("border-right-width", lR ? directLR ? "0px" : _borderWidth : _borderWidth);
        _elem.css("border-left-width", lR ? directLR ? _borderWidth : "0px" : _borderWidth);
        _elem.css({
          top: from.top - 1,
          left: lLeft,
          height: to.bottom - from.top - 2,
          width: lWidth
        });
      }

      if (_rElem) {
        var rLeft = directLR ? 0 : from.left;
        var rWidth = !directLR ? canvas.width() : (to.right - 2);
        //console.log("RWIDTH:" + rWidth + " RLEFT:" + rLeft);
        _rElem.css("border-left-width", lR ? directLR ? "0px" : _borderWidth : _borderWidth);
        _rElem.css("border-right-width", lR ? directLR ? _borderWidth : "0px" : _borderWidth);
        _rElem.css({
          top: from.top - 1,
          left: rLeft,
          height: to.bottom - from.top - 2,
          width: rWidth
        });
      }

      return temp;
    }

修正后的结果：

OK 到这里，未完待续！