source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Mappings/tsp.js @ 10594

/*
 * Model ... the domain model
 * Element ... the table to add new elements to
 */
function addExtension(model, element) {
  /* Specify the name of your row entry */
  var name = 'TSP Solution';

  /* Create the content of your row by using the model */
  var content = $('<div/>');  

  // look up coordinates for TSP
  var coords = [];
  
  coords = _.find(model.get('results'), function(elem) {
    return elem.Name == "Best TSP Solution";
  }).Value;
   
  // draw TSP
  var canvasWidth = 400;
  var canvasHeight = 400;
  var radius = 6;
  var canvas = $('<canvas/>').prop({
      width: canvasWidth,
      height: canvasHeight
  }).appendTo(content);

  var ctx = undefined;
  if (canvas[0].getContext == undefined) {
    ctx = G_vmlCanvasManager.initElement(canvas[0]).getContext("2d");
  } else {
    ctx = canvas[0].getContext("2d");
  }
  ctx.fillStyle = "#FFFFFF";    
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  ctx.fillStyle = "#000000";
  if (coords && coords.length > 0) {
      // determine max/min boundings
    var xMin = Number.MAX_VALUE;
    var xMax = Number.MIN_VALUE;
    var yMin = Number.MAX_VALUE;
    var yMax = Number.MIN_VALUE;
    for (var i = 0; i < coords.length; i++) {
      if (xMin > coords[i][0]) xMin = coords[i][0];
      if (yMin > coords[i][1]) yMin = coords[i][1];
      if (xMax < coords[i][0]) xMax = coords[i][0];
      if (yMax < coords[i][1]) yMax = coords[i][1];
    }

    var border = 20;
    var xStep = 1;
    if (xMax != xMin) xStep = (canvasWidth - 2 * border) / (xMax - xMin);
    var yStep = 1;
    if (yMax != yMin) yStep = (canvasHeight - 2 * border) / (yMax - yMin);

    ctx.beginPath();
    var x = Math.round(border + (coords[0][0] - xMin) * xStep);
    var y = Math.round(canvasHeight - (border + (coords[0][1] - yMin) * yStep));
    ctx.moveTo(x, y);
    for (var i = 1; i < coords.length + 1; i++) {
      var x = Math.round(border + (coords[i % coords.length][0] - xMin) * xStep);
      var y = Math.round(canvasHeight - (border + (coords[i % coords.length][1] - yMin) * yStep));
      ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.stroke();
    for (var i = 0; i < coords.length + 1; i++) {
      var x = Math.round(border + (coords[i % coords.length][0] - xMin) * xStep);
      var y = Math.round(canvasHeight - (border + (coords[i % coords.length][1] - yMin) * yStep));
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();
    }
  } else {
    ctx.font = "20px Arial";
    var txt = "No coordinates defined or in wrong format.";
    var w = ctx.measureText(txt).width;
    ctx.fillText("No coordinates defined or in wrong format.", (canvasWidth - w) / 2, (canvasHeight - 20) / 2);
  }

  /* Creates a new row and adds it to element */
  var row = $('<tr/>');
  var nameTd = $('<td/>').text(name).appendTo(row);
  var contentTd = $('<td/>').appendTo(row);
  content.appendTo(contentTd);
  row.appendTo(element);
}