ImageViewerRubberBandInteractiveMode Object

function lt.Controls.ImageViewerRubberBandInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode 

var _rubberBandShapesComboBox = document.createElement("select"); 
document.body.appendChild(_rubberBandShapesComboBox); 
 
var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode(); 
 
for (var shape in lt.Controls.ImageViewerRubberBandShape) { 
   if (shape.toString() == "__typeName") 
      break; 
   var option = document.createElement("option"); 
   option.textContent = shape.toString(); 
   _rubberBandShapesComboBox.appendChild(option); 
} 
 
_rubberBandShapesComboBox.selectedIndex = rubberBandMode.shape; 
 
_rubberBandShapesComboBox.addEventListener("change", function () { 
   rubberBandMode.shape = this.selectedIndex; 
}); 
 
var myImageViewer = this._imageViewer; 
rubberBandMode.rubberBandCompleted.add(function (sender, e) { 
   if (e.isCanceled) 
      return; 
 
   if (rubberBandMode.item == null) 
      return; 
 
   //var points = new LeadPoint[e.Points.Count]; 
   var points = new Array(e.points.length); 
   for (var i = 0; i < points.length; i++) 
      points[i] = lt.LeadPointD.create(e.points[i].x, e.points[i].y); 
 
   var min = lt.LeadPointD.empty; 
   var max = lt.LeadPointD.empty; 
 
   for (var i = 0; i < points.length; i++) { 
      points[i] = myImageViewer.convertPoint(rubberBandMode.item, lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, points[i]); 
      if (i == 0) { 
         min = points[i].clone(); 
         max = points[i].clone(); 
      } 
      else { 
         min.x = Math.min(min.x, points[i].x); 
         min.y = Math.min(min.y, points[i].y); 
         max.x = Math.max(max.x, points[i].x); 
         max.y = Math.max(max.y, points[i].y); 
      } 
   } 
 
   var center = lt.LeadPointD.create(min.x + (max.x - min.x) / 2, min.y + (max.y - min.y) / 2); 
 
   var item = rubberBandMode.item; 
   var itemCanvas = item.canvas; 
 
   var ctx = itemCanvas.getContext("2d"); 
   ctx.beginPath(); 
 
   switch (rubberBandMode.shape) { 
      case lt.Controls.ImageViewerRubberBandShape.rectangle: 
      case lt.Controls.ImageViewerRubberBandShape.ellipse: 
         { 
            var rect = lt.LeadRectD.fromLTRB(points[0].x, points[0].y, points[1].x, points[1].y); 
            if (rubberBandMode.shape == lt.Controls.ImageViewerRubberBandShape.rectangle) 
               ctx.rect(rect.x, rect.y, rect.width, rect.height) 
            else 
               drawEllipse(ctx, rect.x, rect.y, rect.width, rect.height) 
         } 
         break; 
 
      case lt.Controls.ImageViewerRubberBandShape.roundRectangle: 
         { 
            var radius = rubberBandMode.roundRectangleRadius; 
            var rect = lt.LeadRectD.fromLTRB(points[0].x, points[0].y, points[1].x, points[1].y); 
            addRoundRect(ctx, rect, radius.width); 
         } 
         break; 
 
      case lt.Controls.ImageViewerRubberBandShape.freehand: 
         { 
            var firstPoint = true; 
            var lastPoint = lt.LeadPointD.empty; 
 
            for (var i = 0; i < points.length; i++) { 
               if (!firstPoint) { 
                  ctx.moveTo(lastPoint.x, lastPoint.y); 
                  ctx.lineTo(points[i].x, points[i].y); 
               } 
               else 
                  firstPoint = false; 
 
               lastPoint = points[i]; 
            } 
         } 
         break; 
 
      default: 
         break; 
   } 
 
   ctx.closePath(); 
   if (itemCanvas.width > 1000 || itemCanvas.height > 1000) 
      ctx.lineWidth = 8; 
 
   ctx.strokeStyle = "Yellow"; 
   ctx.stroke(); 
 
   myImageViewer.invalidate(lt.LeadRectD.empty); 
}); 
 
this._imageViewer.interactiveModes.clearItems(); 
 
rubberBandMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet; 
rubberBandMode.itemPart = lt.Controls.ImageViewerItemPart.image; 
this._imageViewer.interactiveModes.beginUpdate(); 
this._imageViewer.interactiveModes.add(rubberBandMode); 
rubberBandMode.isEnabled = true; 
var autopan = new lt.Controls.ImageViewerAutoPanInteractiveMode(); 
autopan.panDelay = 100; 
this._imageViewer.interactiveModes.add(autopan); 
this._imageViewer.interactiveModes.endUpdate(); 
 
var addRoundRect = function (ctx, bounds, radius) { 
   if (bounds.width < 2 * radius) radius = bounds.width / 2; 
   if (bounds.height < 2 * radius) radius = bounds.height / 2; 
   ctx.beginPath(); 
   ctx.moveTo(bounds.x + radius, bounds.y); 
   ctx.arcTo(bounds.x + bounds.width, bounds.y, bounds.x + bounds.width, bounds.y + bounds.height, radius); 
   ctx.arcTo(bounds.x + bounds.width, bounds.y + bounds.height, bounds.x, bounds.y + bounds.height, radius); 
   ctx.arcTo(bounds.x, bounds.y + bounds.height, bounds.x, bounds.y, radius); 
   ctx.arcTo(bounds.x, bounds.y, bounds.x + bounds.width, bounds.y, radius); 
   ctx.closePath(); 
   ctx.stroke();  // Draw it 
}; 
 
var drawEllipse = function (ctx, x, y, w, h) { 
   var kappa = .5522848, 
      ox = (w / 2) * kappa, // control point offset horizontal 
      oy = (h / 2) * kappa, // control point offset vertical 
      xe = x + w,           // x-end 
      ye = y + h,           // y-end 
      xm = x + w / 2,       // x-middle 
      ym = y + h / 2;       // y-middle 
 
   ctx.beginPath(); 
   ctx.moveTo(x, ym); 
   ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); 
   ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); 
   ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); 
   ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); 
   ctx.closePath(); 
   ctx.stroke(); 
};