SpreadJS Rotate Text CellType

<!DOCTYPE html>
<html>

  <head>
      <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="SpreadJS@*" data-semver="3.20143.15" rel="stylesheet" href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.3.20143.15.css" />
    <script data-require="SpreadJS@*" data-semver="3.20143.15" src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.3.20143.15.min.js"></script>

    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello SpreadJS!</h1>
    <div id="ss" style="width: 700px; height: 500px; border: 1px solid gray"></div>
  </body>

</html>

var ns = $.wijmo.wijspread;

function RotateTextCellType() {}
RotateTextCellType.prototype = new ns.TextCellType();
RotateTextCellType.prototype.paint = function(ctx, value, x, y, w, h, style, context) {
  ctx.save();
  ctx.rect(x, y, w, h);
  ctx.clip();
  var tw = this.getAutoFitWidth(value, value.toString(), style, 1, context);
  var th = this.getAutoFitHeight(value, value.toString(), style, 1, context);
  if (style.hAlign === ns.HorizontalAlign.general) {
    style.hAlign = ns.HorizontalAlign.left;
    var type = $.type(value);
    if (type === "boolean") {
      style.hAlign = ns.HorizontalAlign.center;
    } else if (type === "number" || type === "date") {
      style.hAlign = ns.HorizontalAlign.right;
    }
  }
  if (style.hAlign === ns.HorizontalAlign.center) {
    x += (w + tw) / 2;
  } else if (style.hAlign === ns.HorizontalAlign.right) {
    x += w - tw / 2;
  } else {
    x += tw;
  }
  if (style.vAlign === ns.VerticalAlign.center) {
    y += (h - th) / 2;
  } else if (style.vAlign === ns.VerticalAlign.bottom) {
    y += h - th - 2;
  } else {
    y += 2;
  }
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.rotate(-0.5 * Math.PI);
  ctx.fillText(value, 0, 0);
  ctx.restore();
};

RotateTextCellType.prototype.getAutoFitHeight = function(value, text, cellStyle, zoomFactor, context) {
  return ns.TextCellType.prototype.getAutoFitWidth.apply(this, arguments);
};
RotateTextCellType.prototype.getAutoFitWidth = function(value, text, cellStyle, zoomFactor, context) {
  return ns.TextCellType.prototype.getAutoFitHeight.apply(this, arguments);
};

function EllipsisTextCellType() {}
EllipsisTextCellType.prototype = new ns.TextCellType();
EllipsisTextCellType.prototype.paint = function(ctx, value, x, y, w, h, style, context) {
  value = fittingString(ctx, value, w - 2);
  ns.TextCellType.prototype.paint.apply(this, arguments);
};
function fittingString(c, str, maxWidth) {
  var width = c.measureText(str).width;
  var ellipsis = '…';
  var ellipsisWidth = c.measureText(ellipsis).width;
  if (width <= maxWidth || width <= ellipsisWidth) {
    return str;
  } else {
    var len = str.length;
    while (width >= maxWidth - ellipsisWidth && len-- > 0) {
      str = str.substring(0, len);
      width = c.measureText(str).width;
    }
    return str + ellipsis;
  }
}
// Initialize SpreadJS
$(document).ready(function() {
  $("#ss").wijspread(); // create wijspread control
  var spread = $("#ss").wijspread("spread"); // get instance of wijspread control
  var sheet = spread.getActiveSheet(); // get active worksheet of the wijspread control
  sheet.isPaintSuspended(true);
  sheet.getCell(1, 1).value("Left-Top").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.left).vAlign(ns.VerticalAlign.top);
  sheet.getCell(2, 1).value("Left-Center").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.left).vAlign(ns.VerticalAlign.center);
  sheet.getCell(3, 1).value("Left-Bottom").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.left).vAlign(ns.VerticalAlign.bottom);
  sheet.getCell(1, 2).value("Center-Top").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.center).vAlign(ns.VerticalAlign.top);
  sheet.getCell(2, 2).value("Center-Center").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.center).vAlign(ns.VerticalAlign.center);
  sheet.getCell(3, 2).value("Center-Bottom").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.center).vAlign(ns.VerticalAlign.bottom);
  sheet.getCell(1, 3).value("Right-Top").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.right).vAlign(ns.VerticalAlign.top);
  sheet.getCell(2, 3).value("Right-Center").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.right).vAlign(ns.VerticalAlign.center);
  sheet.getCell(3, 3).value("Right-Bottom").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.right).vAlign(ns.VerticalAlign.bottom);
  sheet.autoFitRow(1);
  sheet.autoFitRow(2);
  sheet.autoFitRow(3);
  sheet.getCell(5, 1).text("this is ellipsis text.").cellType(new EllipsisTextCellType());
  sheet.isPaintSuspended(false);
});

/* Styles go here */

This is a sample shows rotate text in cell