TextEditor has a method called refreshDimensions. Is there a similar method for editors descending from BaseEditor. I need to move into focus a panel but having problems calculating the coordinates.
Thanks
Only items based on TextEditor have access to refreshDimension. Can you show us example with problem?
Right now to open my custom editor I compute the following: However I am having in computing the absolute position when a scroll had happened or probably when the header is more than 1 row height. So my question is: Is there a method hat gives me the absolute coordinate of the current cell in the viewport. If not how can I compute it
var width = Handsontable.Dom.outerWidth(this.TD);
// important - group layout reads together for better performance
var height = Handsontable.Dom.outerHeight(this.TD);
var rootOffset = Handsontable.Dom.offset(this.instance.rootElement);
var tdOffset = Handsontable.Dom.offset(this.TD);
var editorSection = this.checkEditorSection();
var cssTransformOffset;
height += Handsontable.Dom.outerHeight(self.compiledTemplate[0]);
switch (editorSection) {
case 'top':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.vertical.clone.wtTable.holder.parentNode);
break;
case 'left':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.horizontal.clone.wtTable.holder.parentNode);
break;
case 'corner':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.corner.clone.wtTable.holder.parentNode);
break;
}
var widget = self.compiledTemplate[0];
var editorStyle = widget.style;
if (cssTransformOffset && cssTransformOffset !== -1) {
editorStyle[cssTransformOffset[0]] = cssTransformOffset[1];
} else {
Handsontable.Dom.resetCssTransform(widget);
}
// editorStyle.height = height + 'px';
editorStyle.minWidth = width + 'px';
editorStyle.top = tdOffset.top - rootOffset.top - 1 + 'px';
editorStyle.left = tdOffset.left - rootOffset.left + 'px';
editorStyle.margin = '0px';
editorStyle.display = '';
`
Using code from other editors I was able to recreate a method for a custom Editor. It seems to me that a method like that should either be part of Handsontable.Dom or of the BaseEditor. Maybe I am missing something.
self.prototype.refreshDimensions = function() {
if (this.state !== Handsontable.EditorState.EDITING) {
return;
}
var editorStyle = this.editorStyle();
var width = Handsontable.Dom.outerWidth(this.TD) + 1,
height = Handsontable.Dom.outerHeight(this.TD) + 1,
currentOffset = Handsontable.Dom.offset(this.TD),
containerOffset = Handsontable.Dom.offset(this.instance.rootElement),
scrollableContainer = Handsontable.Dom.getScrollableElement(this.TD),
editTop = currentOffset.top - containerOffset.top - 1 - (scrollableContainer.scrollTop || 0),
editLeft = currentOffset.left - containerOffset.left - 1 - (scrollableContainer.scrollLeft || 0),
editorSection = this.checkEditorSection(),
cssTransformOffset;
var settings = this.instance.getSettings();
var rowHeadersCount = settings.rowHeaders ? 1 : 0;
var colHeadersCount = settings.colHeaders ? 1 : 0;
switch (editorSection) {
case 'top':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtOverlays.topOverlay.clone.wtTable.holder.parentNode);
break;
case 'left':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtOverlays.leftOverlay.clone.wtTable.holder.parentNode);
break;
case 'top-left-corner':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtOverlays.topLeftCornerOverlay.clone.wtTable.holder.parentNode);
break;
case 'bottom-left-corner':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtOverlays.bottomLeftCornerOverlay.clone.wtTable.holder.parentNode);
break;
case 'bottom':
cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtOverlays.bottomOverlay.clone.wtTable.holder.parentNode);
break;
}
if (cssTransformOffset && cssTransformOffset !== -1) {
editorStyle[cssTransformOffset[0]] = cssTransformOffset[1];
} else {
Handsontable.Dom.resetCssTransform(this.editorPanel());
}
var cellComputedStyle = Handsontable.Dom.getComputedStyle(this.TD);
if (parseInt(cellComputedStyle.borderTopWidth, 10) > 0) {
height -= 1;
}
if (parseInt(cellComputedStyle.borderLeftWidth, 10) > 0) {
width -= 1;
}
// editorStyle.height = height + 'px';
editorStyle.minHeight = height + 'px';
editorStyle.minWidth = width + 'px';
editorStyle.top = editTop + 'px';
editorStyle.left = editLeft + 1 + 'px';
editorStyle.margin = '0px';
};@pdemilly it will be much easier with a working demo.
Can you share it via JSFiddle?
Kind of difficult. My questions are more how to find things inside handsontable source code like an API I could work with.