Grid V2

[mofojed]

At some point we want to refactor our Grid component and make a V2. Add discussion points here.

[mofojed]

Some ideas from @mattrunyon :

1. What if we treat events kind of like it was in the DOM. What I mean is don’t call all the handlers on each event. Instead, have the event determine where it is (header, footer, column, row, cell, etc.) and then trigger events based on that. So an event handler subscribes to something like headerEvent or columnHeaderEvent and then in the general onDrag we determine what we’re dragging and only fire those events (@mofojed : he raw mouse event handlers already have the coordinate/cell that's clicked on, perhaps some more info could be added to that. Exposing the raw mouse events/handlers that we do right now on just the grid canvas is quite flexible, but it gets sticky whenever we mix actual DOM in though (such as for advanced filters and input tables). In reality I think we should simplify out just the GridCanvas component that just draws the data and emits the raw events. Then at a higher level, you can add a mouse handler that and combine it for the headerEvent (or other such events); and with floating rows/columns, they'd be separate GridCanvas (going back to the first point).
2. Treat floating spaces as separate grids, but that might be more confusing. It might simplify some things though so who knows. (@mofojed : I think this is a great idea, but need to keep grids in sync. One canvas or multiple canvases?)

[mattrunyon]

More ideas/thoughts on a refactor

1. Make some helper classes instead of static utils like we currently have. I think it would make function discoverability easier if we had something like Column, Row, and Cell classes that can be created from the indexes. Then each of those classes has methods like Column.getWidth() or Cell.getTop(). It can currently be difficult as a developer to find what functions already exist for things I need. One thing that is reused in many places is getting the height/width/value of a column/row/cell. Currently these are usually done by getting values from metrics, converting visible index to model index, then using model index to get width/coordinate from metrics maps.
2. Adding methods/points to inject into rendering more easily. Maybe a beforeHeaders, beforeBackground, beforeCellContent, etc. for injecting some drawing methods before the specified rendering steps. The current method of overriding might still work fine, but some event handlers might be easier with this type of interface. My initial thought is a mouse handler to add something on hover attaches to an onCellHover event which receives a cell. It then attaches something to onBeforeCellContent which draws something before the normal cell renders content. Removes the event listener on leaving the cell. Not sure if this would actually make things easier or not, but right now for a mouse/keyboard handler to modify rendering, it must set a value in IrisGrid which is then read by the renderer to override the specific rendering method.

[mattrunyon]

We also need a better separation/definition of metrics/model/component or a rework of the data stored in them. Should look into ways to clean up the user override items. Right now I believe most of the overridable items (moved columns, frozen columns, etc.) are tracked in the component and then passed to metrics before render. Not really sure what we would do, but I'm sure we can think of something cleaner

[mattrunyon]

Consider changing GridRange to GridArea and GridAxisRange to GridRange. I think it would be more clear what each represents for the range to be 1 dimensional and area 2 dimensional

[mattrunyon]

Maybe GridModel -> GridDataSource and then we have something else to manage the visible stuff. Currently if you want to move or do anything with non-moveable columns, it's up to you to check everything is allowed and handle the state updates (this is just 1 example). Instead, it would be nice if I could just have simple APIs like Grid.moveColumn(from: number, to: number) where I don't need to worry about getting movedColumns from the metrics and setting the state for Grid. Let Grid handle all that in a single spot because that logic is duplicated all over the place