Want to show dotted border for area text selection when SELECTION_MODE is set to rectangular

[Dharmesh Patel]

Hi ,

When i set the SELECTION_MODE  to rectangular  and we select the text it is selecting the text in the area .

I want to show the dotted line when user is selecting the area so that the user can see the area he/she is selecting for text selection (Like a border from x1,y1 to x2,y2 of a square or rectangle area).

The current selection does not show the any border or lines when the area is selected .

Thanks

Dharmesh Patel 

[Matt Parizeau]

Hi Dharmesh,

Here's some code showing how you could add a rectangular border over the area that you're selecting with the text selection tool.

var selectionRectangle = $("<div id='text-select-rect'></div>").css('display', 'none');

var $scrollView = $('#DocumentViewer');

var oldMouseDown = Tools.TextSelectTool.prototype.mouseLeftDown;
Tools.TextSelectTool.prototype.mouseLeftDown = function(e) {
  $('#viewer').append(selectionRectangle);
  oldMouseDown.apply(this, arguments);

  this.mousePt1 = e.data.mouseCoordinate;
};

var oldMouseMove = Tools.TextSelectTool.prototype.mouseMove;
Tools.TextSelectTool.prototype.mouseMove = function(e) {
  oldMouseMove.apply(this, arguments);

  if (!this.mousePt1 || !e.data || !e.data.pageCoordinate) {
    return;
  }

  var mousePt2 = e.data.mouseCoordinate;
  var pageIndex = e.data.pageCoordinate.pageIndex;
  var scrollLeft = $scrollView.scrollLeft();
  var scrollTop = $scrollView.scrollTop();

  var screenW = mousePt2.x - this.mousePt1.x;
  var screenH = mousePt2.y - this.mousePt1.y;

  var pt1 = {
    x: this.mousePt1.x - scrollLeft,
    y: this.mousePt1.y - scrollTop
  };

  var pt2 = {
    x: mousePt2.x - scrollLeft,
    y: mousePt2.y - scrollTop
  };

  var pageWidth = readerControl.docViewer.getPageWidth(pageIndex);
  var pageHeight = readerControl.docViewer.getPageHeight(pageIndex);
  var rectTop = Math.min(pt2.y, pt1.y);
  var rectLeft = Math.min(pt2.x, pt1.x);

  var displayMode = readerControl.docViewer.getDisplayModeManager().getDisplayMode();

  var topLeftPagePoint = displayMode.pageToWindow({
    x: 0,
    y: 0
  }, pageIndex);
  var bottomRightPagePoint = displayMode.pageToWindow({
    x: pageWidth,
    y: pageHeight
  }, pageIndex);

  var minWinPoint = {
    x: Math.min(topLeftPagePoint.x, bottomRightPagePoint.x),
    y: Math.min(topLeftPagePoint.y, bottomRightPagePoint.y)
  };
  var maxWinPoint = {
    x: Math.max(topLeftPagePoint.x, bottomRightPagePoint.x),
    y: Math.max(topLeftPagePoint.y, bottomRightPagePoint.y)
  };

  minWinPoint.x -= scrollLeft;
  minWinPoint.y -= scrollTop;

  if (minWinPoint.y > rectTop) {
    screenH += (minWinPoint.y - rectTop);
    rectTop = minWinPoint.y;
  }
  if (minWinPoint.x > rectLeft) {
    screenW += (minWinPoint.x - rectLeft);
    rectLeft = minWinPoint.x;
  }

  maxWinPoint.x -= scrollLeft;
  maxWinPoint.y -= scrollTop;

  var rectWidth = clamp(Math.abs(screenW), 0, maxWinPoint.x - rectLeft);
  var rectHeight = clamp(Math.abs(screenH), 0, maxWinPoint.y - rectTop);
  selectionRectangle.css({
    "width": rectWidth,
    "height": rectHeight,
    "top": rectTop,
    "left": rectLeft,
    "z-index": "44",
    "position": "absolute",
    "border": "1px dotted black",
    "display": "inline"
  });
};

var oldMouseUp = Tools.TextSelectTool.prototype.mouseLeftUp;
Tools.TextSelectTool.prototype.mouseLeftUp = function(e) {
  oldMouseUp.apply(this, arguments);
  selectionRectangle.css('display', 'none').detach();

  this.mousePt1 = null;
};

function clamp(value, bottom, top) {
  top = (top !== undefined) ? (top) : (Infinity);
  bottom = (bottom !== undefined) ? (bottom) : (-Infinity);
  return Math.max(Math.min(value, top), bottom);
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Dharmesh Patel]

Thanks you Matt this works .
is there a way i can set this for all different type of text selection like underline crossout highlight etc ?

[Dharmesh Patel]

By replacing all the "Tools.TextSelectTool" with "Tools.TextTool" in the code sample above i was able show doted line for all the type of text selection like
underline, crossout, highlight  etc.
Thanks