Fix header and footer height calculation issue with css transform scale

[plc-dev]

Reimplemented the solution proposed by @azmy60. See below discussion of issue #4804 (comment)

Honestly, I don't feel comfortable with the proposed patch. There was a similar issue in CodeMirror 6, and we probably want to follow they've fixed it instead.

@azmy60 Fair enough. Have to agree that walking up the DOM-tree seems brittle, but I just took the available solution since this is just me procrastinating my actual work ¯_(ツ)_/¯

I reimplemented the proposed solution in my fork. Atleast I assumed, your only gripe was with how the scale-factors were calculated. Let me know if there are some more fundamental issues, before I put up another PR.

Since this issue seems to be relevant to more people, I opened another PR that adresses the prior critique (see #4845) and uses the suggested approach. Let me know, if there are other fundamental issues and I'll try to solve them in a timely manner.

[azmy60]

@plc-dev I think this looks much better! Two things I'd suggest adjusting:

1. A single source of scale multipliers

This could be simpler by adding scaleX and scaleY as properties in Tabulator class and use it everywhere. For example:

export default class Column extends CoreFeature { 
    // ...
    getHeight(){
        return this.element.getBoundingClientRect().height * this.table.scaleY;
    }
}

scaleY would be calculated as getBoundingClientRect().height / offsetHeight on the table element (or maybe the RowManager?). scaleX would be calculated similarly. That should match the way CodeMirror 6 works. Also, please make sure that these are updated properly.

2. Please remove the changes in the dist folder. These will be changed when there is a new release.

[azmy60]

Instead of calling Helpers here, could you add a new getWidth method to the RowManager? So this will be:

var totalWidth = this.table.rowManager.getWidth();

[azmy60]

Same as RowManager, please add a new getHeight for FooterManager.

[azmy60]

Please add getHeight to the ColumnManager.

[plc-dev]

2. Please remove the changes in the dist folder. These will be changed when there is a new release.

Done

@plc-dev I think this looks much better! Two things I'd suggest adjusting:

1. A single source of scale multipliers

This could be simpler by adding scaleX and scaleY as properties in Tabulator class and use it everywhere. For example:

export default class Column extends CoreFeature { 
    // ...
    getHeight(){
        return this.element.getBoundingClientRect().height * this.table.scaleY;
    }
}

scaleY would be calculated as getBoundingClientRect().height / offsetHeight on the table element (or maybe the RowManager?). scaleX would be calculated similarly. That should match the way CodeMirror 6 works.

I'm afraid calculating both of the scale-factors based on the dimensions of the element-property of the tabulator-class does not lead to the desired result, as atleast the scaleY-factor depends on the dimensions of the element-property of the columnHeader or the footerHeader.
The scaling factors could thus be tied to the respective managers (x to Row, Y to column and footer) or simply calculated and utilized in the suggested get[Height | Width]-methods, if you would prefer that over the helper-methods.

Also, please make sure that these are updated properly.

As I'm unsure of the implications of turning autoresize off and manually calling the redraw function in userland, maybe it's preferable to put the scale-values into methods that recompute them on call (e.g. getScaleX).

Let me know your preferences and I'll add the changes accordingly.

[plc-dev]

This is actually redundant, as the default case of getCorrectedRect returns the boundingClientRect of the passed HTMLElement, so I'll revert those changes.