3 ms·
Thanks! I'd to write a proper "How It's Made" article about it in the future, but this is basically how it's done: There is a blank DOM node "scrollArea" in fr
by robbiejs 6y ago
Thanks! I'd to write a proper "How It's Made" article about it in the future, but this is basically how it's done:
There is a blank DOM node "scrollArea" in front of all others that catches the native JS scroll event.
It then converts these scroll offsets (scrollTop and scrollLeft) to cell/viewport coordinates, by default 40px actual pixels per row/column.
So if the scrollArea has a scrollLeft of 40px and a scrollTop of 200px , an underlying DOM node that renders the cell values and column lines, will render at viewport position {x: 1, y: 5}.
The other important part that makes it snappy, is that a viewport of let's say 20 rows by 10 columns does not actually consist of 200 DOM nodes. Only columns are DOM nodes. The values inside a column are made to look like rows by CSS white-space property. So it only updates 10 DOM nodes when scrolling.
- janci 6y agoThere is a bug that is caused directly by this whitespace hack. If you copy two lines of text and paste it to one cell, it displays as two cells and shifts the column content below the affected cell (if the affected cell is in the viewport)
- robbiejs 6y agoI am not sure if this is actually a bug, that will probably also happen when pasting those two lines to Excel or G. Sheets. Correct me if I'm wrong.
- janci 6y agoYes, it is possible to paste cells in excel and shift cells below in Excel. But here the cells are shifted if the corrupted cell is visible and shift back if it's not. Definitely a bug.
- robbiejs 6y agoAh I think I know what you mean now. I think you mean when you paste multi-line text inside the cell value editor! You're right, thanks for spotting it! This does not happen when you paste when the editor is not open, am I correct?
- janci 6y agoYes, exactly.
- robbiejs 6y agoThanks! Bug will be fixed in next update (upcoming week)
- robbiejs 6y agoHi janci, just letting you know that the bug has been fixed. Thank you for spotting it! The current solution that I came up with: replace \n with Return HTML-entity. Not sure if that is the best solution for you (or anybody else) but at least it prevents the unwanted shift of column contents. Thanks again!