SpreadJS Documentation
getHitInfo Method
GC.Spread.Sheets.CellTypes Namespace > Base class : getHitInfo Method
x-coordinate of pointer's current location relative to the canvas.
y-coordinate of pointer's current location relative to the canvas.
The current cell's actual style.
The current cell's layout information.
The context associated with the cell type. See the Remarks for more information.
Gets the cell type's hit information.
Syntax
var instance = new GC.Spread.Sheets.CellTypes.Base();
var value; // Type: object
value = instance.getHitInfo(x, y, cellStyle, cellRect, context);
function getHitInfo( 
   x : number,
   y : number,
   cellStyle : Style,
   cellRect : Rect,
   context : object
) : object;

Parameters

x
x-coordinate of pointer's current location relative to the canvas.
y
y-coordinate of pointer's current location relative to the canvas.
cellStyle
The current cell's actual style.
cellRect
The current cell's layout information.
context
The context associated with the cell type. See the Remarks for more information.

Return Value

Returns an object that contains the x, y, row, col, cellRect, and sheetArea parameters, and a value to indicate isReservedLocation. isReservedLocation is true if the hit test is in a special area that the cell type needs to handle; otherwise, false.
Example
This example creates custom cells.
//Custom Cell Type
          function FivePointedStarCellType() {
              this.fillStyle = "orange";
              this.size = 10;
          }
          FivePointedStarCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
          FivePointedStarCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
              if (!ctx) {
                  return;
              }

            ctx.save();

            // draw inside the cell's boundary
              ctx.rect(x, y, w, h);
              ctx.clip();
              ctx.beginPath();

            if (value) {
                  ctx.fillStyle = this.fillStyle;
              } else {
                  ctx.fillStyle = "gray";
              }

            var size = this.size;
              var dx = x + w / 2;
              var dy = y + h / 2;
              ctx.beginPath();
              var dig = Math.PI / 5 * 4;
              for (var i = 0; i < 5; i++) {
                  ctx.lineTo(dx + Math.sin(i * dig) * size, dy + Math.cos(i * dig) * size);
              }
              ctx.closePath();
              ctx.fill();

            ctx.restore();
          };
          FivePointedStarCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
              var xm = cellRect.x + cellRect.width / 2,
                      ym = cellRect.y + cellRect.height / 2,
                      size = 10;
              var info = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea };
              if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) {
                  info.isReservedLocation = true;
              }
              return info;
          };
          FivePointedStarCellType.prototype.processMouseUp = function (hitInfo) {
              var sheet = hitInfo.sheet;
              if (sheet && hitInfo.isReservedLocation) {
                  var row = hitInfo.row, col = hitInfo.col, sheetArea = hitInfo.sheetArea;
                  var newValue = !sheet.getValue(row, col, sheetArea);
                  var cellEditInfo = { row: row, col: col, newValue: newValue };
         spread.commandManager().execute({cmd: "editCell", sheetName: activeSheet.name(), row: row, col: col, newValue: newValue});
                  return true;
              }
              return false;
          };

        function FullNameCellType() {
          }
          FullNameCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
          FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
              if (value) {
                  GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, context]);
              }
          };
          FullNameCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
              if (editorContext) {
                  $(editorContext).width(cellRect.width);
                  $(editorContext).height(100);
              }
          };
          FullNameCellType.prototype.createEditorElement = function (context) {
              var div = document.createElement("div");
              var $div = $(div);
              $div.attr("gcUIElement", "gcEditingInput");
              $div.css("background-color", "white");
              $div.css("position", "absolute");
              $div.css("overflow", "hidden");
              $div.css("border", "2px #5292f7 solid");
              var $span1 = $("<span></span>");
              $span1.css("display", "block");
              var $span2 = $("<span></span>");
              $span2.css("display", "block");
              var $input1 = $("<input type='text'/>");
              var $input2 = $("<input type='text'/>");
              $div.append($span1);
              $div.append($input1);
              $div.append($span2);
              $div.append($input2);
              return div;
          };
          FullNameCellType.prototype.getEditorValue = function (editorContext) {
              if (editorContext && editorContext.children.length === 4) {
                  var input1 = editorContext.children[1];
                  var firstName = $(input1).val();
                  var input2 = editorContext.children[3];
                  var lastName = $(input2).val();
                  return { firstName: firstName, lastName: lastName };
              }
          };
          FullNameCellType.prototype.setEditorValue = function (editorContext, value) {
              if (editorContext && editorContext.children.length === 4) {
                  var span1 = editorContext.children[0];
                  $(span1).text("First Name:");
                  var span2 = editorContext.children[2];
                  $(span2).text("Last Name:");
                  if (value) {
                      var input1 = editorContext.children[1];
                      $(input1).val(value.firstName);
                      var input2 = editorContext.children[3];
                      $(input2).val(value.lastName);
                  }
              }
          };
          FullNameCellType.prototype.isReservedKey = function (e, context) {
              //cell type handle tab key by itself
              return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey);
          };
          FullNameCellType.prototype.isEditingValueChanged = function (oldValue, newValue,context) {
              if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) {
                  return true;
              }
              return false;
          };
          $(function () {

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
              var sheet = spread.getActiveSheet();
              sheet.suspendPaint();
              sheet.setCellType(0, 0, new FivePointedStarCellType());
              sheet.setValue(0, 0, true);
              sheet.setRowHeight(0, 200);
              sheet.setColumnWidth(0, 200);
              sheet.setCellType(0, 1, new FullNameCellType());
              sheet.setColumnWidth(1, 200);
              sheet.setValue(0, 1, { firstName: "Bob", lastName: "Smith" });
              sheet.resumePaint();
          });
Remarks

The context parameter can include the following items:

Item Type Description
context.sheet GC.Spread.Sheets.Sheet instance Indicates the current sheet.
context.row Number The row index.
context.col Number The column index.
context.sheetArea GC.Spread.Sheets.SheetArea The current sheet area.
See Also

Reference

Base class