カスタムセルのprocessMouseLeave/Enterメソッドがコールされない
対象製品
SpreadJS 9J
状況
修正済み
詳細
画面スクロール、ホイールスクロールを行った場合に、カスタムセルのprocessMouseLeave、processMouseEnterメソッドがコールされない現象が発生します。
【現象再現手順】
--------------------------------------------------
1. 以下の再現コードを実行します
2. SpreadJS上で画面スクロール、ホイールスクロールを行います
-赤く着色されたセルが複数表示されます
-processMouseLeave、processMouseEnterメソッドがコールされないために発生している現象です
--------------------------------------------------
【現象再現コード】
--------------------------------------------------
//下記のコードはHTML上のDOM要素、"#ss"に対し、
//SPREADを展開することを前提としたコードです。
function MyCellType(hoverBg) {
this._hoverBg = hoverBg;
this._isMouseOver = false;
}
MyCellType.prototype = new $.wijmo.wijspread.TextCellType();
MyCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
var cellTag = context.sheet.getCell(context.row, context.col).tag();
if (cellTag && cellTag.isMouseOver) {
style.backColor = this._hoverBg;
}
$.wijmo.wijspread.TextCellType.prototype.paint.apply(this, arguments);
}
MyCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
return { x: x, y: y, cellStyle: cellStyle, cellRect: cellRect, context: context };
}
MyCellType.prototype.processMouseEnter = function (hitInfo) {
hitInfo.sheet.getCell(hitInfo.context.row, hitInfo.context.col).tag({ isMouseOver: true });
hitInfo.sheet.repaint(hitInfo.cellRect);
window.lastHoverCellHitInfo = hitInfo;
}
MyCellType.prototype.processMouseLeave = function (hitInfo) {
if (this._toolTipElement) {
document.body.removeChild(this._toolTipElement);
this._toolTipElement = null;
}
hitInfo.sheet.getCell(hitInfo.context.row, hitInfo.context.col).tag({ isMouseOver: false });
hitInfo.sheet.repaint(hitInfo.cellRect);
window.lastHoverCellHitInfo = undefined;
}
$(document).ready(function () {
$("#ss").wijspread();
var spread = $("#ss").wijspread("spread");
var sheet = spread.getActiveSheet();
var style = sheet.getDefaultStyle();
style.cellType = new MyCellType("red");
sheet.setDefaultStyle(style);
});
--------------------------------------------------
【現象再現手順】
--------------------------------------------------
1. 以下の再現コードを実行します
2. SpreadJS上で画面スクロール、ホイールスクロールを行います
-赤く着色されたセルが複数表示されます
-processMouseLeave、processMouseEnterメソッドがコールされないために発生している現象です
--------------------------------------------------
【現象再現コード】
--------------------------------------------------
//下記のコードはHTML上のDOM要素、"#ss"に対し、
//SPREADを展開することを前提としたコードです。
function MyCellType(hoverBg) {
this._hoverBg = hoverBg;
this._isMouseOver = false;
}
MyCellType.prototype = new $.wijmo.wijspread.TextCellType();
MyCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
var cellTag = context.sheet.getCell(context.row, context.col).tag();
if (cellTag && cellTag.isMouseOver) {
style.backColor = this._hoverBg;
}
$.wijmo.wijspread.TextCellType.prototype.paint.apply(this, arguments);
}
MyCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
return { x: x, y: y, cellStyle: cellStyle, cellRect: cellRect, context: context };
}
MyCellType.prototype.processMouseEnter = function (hitInfo) {
hitInfo.sheet.getCell(hitInfo.context.row, hitInfo.context.col).tag({ isMouseOver: true });
hitInfo.sheet.repaint(hitInfo.cellRect);
window.lastHoverCellHitInfo = hitInfo;
}
MyCellType.prototype.processMouseLeave = function (hitInfo) {
if (this._toolTipElement) {
document.body.removeChild(this._toolTipElement);
this._toolTipElement = null;
}
hitInfo.sheet.getCell(hitInfo.context.row, hitInfo.context.col).tag({ isMouseOver: false });
hitInfo.sheet.repaint(hitInfo.cellRect);
window.lastHoverCellHitInfo = undefined;
}
$(document).ready(function () {
$("#ss").wijspread();
var spread = $("#ss").wijspread("spread");
var sheet = spread.getActiveSheet();
var style = sheet.getDefaultStyle();
style.cellType = new MyCellType("red");
sheet.setDefaultStyle(style);
});
--------------------------------------------------
回避方法
SpreadJS 9J SP1(Ver.3.20152.21)で修正済み
SpreadJS 9J SP1(Ver.3.20152.21)より前のバージョンでは次の回避方法が有効です。
------------------------------------------
mousewheelイベントを使用し、コールされなかったメソッドを呼びなおすことで現象を回避可能です。
--------------------------------------------------
//現象再現コードに下記のようなコード追記します
window.addEventListener("mousewheel", function (e) {
var oldHitInfo = window.lastHoverCellHitInfo;
if (oldHitInfo) {
var oldCellType = oldHitInfo.sheet.getCellType(oldHitInfo.context.row, oldHitInfo.context.col);
oldCellType.processMouseLeave(oldHitInfo);
}
}, true);
--------------------------------------------------
SpreadJS 9J SP1(Ver.3.20152.21)より前のバージョンでは次の回避方法が有効です。
------------------------------------------
mousewheelイベントを使用し、コールされなかったメソッドを呼びなおすことで現象を回避可能です。
--------------------------------------------------
//現象再現コードに下記のようなコード追記します
window.addEventListener("mousewheel", function (e) {
var oldHitInfo = window.lastHoverCellHitInfo;
if (oldHitInfo) {
var oldCellType = oldHitInfo.sheet.getCellType(oldHitInfo.context.row, oldHitInfo.context.col);
oldCellType.processMouseLeave(oldHitInfo);
}
}, true);
--------------------------------------------------