feat: resizable grid

[Julusian]

UI is pretty crude right now, but functional:

Definitely needs some thought on UX, I don't think buttons saying 'Grow' are very clear, and it would be good to customise the amount it grows by.

Once the grid is larger than the display area, it becomes scrollable:

The 'home position' button reposition the scrolling to have 0/0 in the top left corner. When the page loads it will go to this position too.

Some work has been done to make the panel more friendly at smaller screen sizes, primarily by hiding the button labels when space gets tight:

The size is also editable in the userconfig:

Some more keyboard shortcuts have been added for navigating the grid. When the grid panel is in focus, the arrow keys will move which button is selected, and pageup/pagedown will cycle through pages. In both cases, it will wrap around when reaching the end/beginning of the row/column/pages.

The emulator is now not limited in size, it can be increased to larger than 8x4.
The satellite api allows for adding surfaces which are larger than 8x4

TODO:

• Was there anything else changed that should be mentioned?
• Import
• Export
• Internal actions/feedbacks
• Action recorder
• Remove old Grid implementation
• Grow by custom amounts
• Grow section styling
• Cleanup the button render cache?
• Tablet view?
• Other APIs?
• anything else?

[bryce-seifert]

Two thoughts so far:

• Does there need to be "grow" buttons or any UI for modifying the size within in the button editor? To me, it seems like that's something that should be left to the settings page. I feel like the options in settings are way more concrete and intuitive than anything I can currently imagine for the button editor view
• One idea I feel like it might be helpful to incorporate some sort of "presets" or common devices. So you could select Streamdeck + or XL or a Loupedeck, and it populates the grid sizes for you. That way beginning users can get started more easily.

[Julusian]

Does there need to be "grow" buttons or any UI for modifying the size within in the button editor?

I see your point, and changing the size with these is unlikely to be a frequent occurrence.
The main argument I can think of to do it like this is that as it hasn't been possible to resize the grid for so long, will anyone think to look in the settings to change this, or will they assume its still no longer possible? This growing isnt the best solution to solve discover-ability, but it is one solution that also gives functionality.
Maybe once 'windows' are a thing too it will be more common to want to resize this?

In the exports I have gone with a data structure that will allow us to have different sizes for each page, as I can see value in having that. If we do that (soon? later?) that may have some impact on whether this growing can be done?

Disabling the growing in the grid can be easily done, its controlled by one property in the component, as this ungrowable mode is needed for import and a couple of other places. It could even start off as having a config option to allow this growing

One idea I feel like it might be helpful to incorporate some sort of "presets" or common devices

Yeah I agree that would be useful, but I expect that its going to get very long very fast. We support 5 different streamdecks, 3 loupedecks and many xkeys models. that list is only going to grow over time. which are the common ones to be paired up?

[bryce-seifert]

In the exports I have gone with a data structure that will allow us to have different sizes for each page, as I can see value in having that. If we do that (soon? later?) that may have some impact on whether this growing can be done?

Gotcha. Yeah if per page sizing is in the future, then the "grow" function makes more sense. I was thinking that page size would be for all pages, so in that sense if makes more sense to allow adjust via button editor.

Yeah I agree that would be useful, but I expect that its going to get very long very fast.

True. I think at least having the major players by usage (I'm assuming all the stream decks are at the top) would be helpful. I'm betting once we start getting into specific x-keys models, those using that kind of device are less likely to need a preset to understand what to do. But that may be a generalization.

[Julusian]

Other than a bit more testing, I think I have done everything that needs to be done as part of this.
Some styling could probably do with some more refinement, but I don't have ideas on how to improve things

[willosof]

y/x and not x/y ?

[Julusian]

@willosof see #2499 for the discussion on that

[bryce-seifert]

Couple of testing things:

• I don't think the "Add" buttons are working for me currently. Tried in Safari and Chrome, and they don't seem to affect the size.

• There are a couple of window sizes where I feel like it should bump to the full width grid view sooner, because it becomes really small (see screen shot)

• I'm wondering if it make sense to have some port of button that toggles on/off the "expand" divs? This is just me personally, but I don't see myself frequently needing to adjust the grid size one it's set so it feels sort of extraneous to all ways have those floating about. But that's strictly a preference

[Julusian]

@bryce-seifert Thanks for giving it a test

1. Yeah that was a dumb mistake I made..
2. I have given the grid a minimum height instead, so it will show a little over 3 rows instead (number chosen arbitrarily) Im hesistent to fiddle with the break points as part of this PR, but it could be done if needed.
3. I've added a field for this under the settings tab. I've put it as default enabled for now. Some UX work should probably be put into this area of defining the grid size, and this should probably be added to the wizard too at some point

[bryce-seifert]

1. Looks like the add button is functional now!
2. This works well for the case when the window is really small. Although now there seems to be a lot of extra space before the Add buttons when grid size is smaller.

3. Thanks, yeah seems like something that can be fine tuned after this initial work is complete

4. I'm noticing that the "Add Columns" seems to always add two columns regardless of what I change the value to

5. If I make an edit in the Grid Size on the Settings page and reduce the grid size, I get this error. I also get it when using the add buttons after adjusting the grid size in settings:

error in client handler 'set_userconfig_key': TypeError: Cannot convert undefined or null to object TypeError: Cannot convert undefined or null to object
    at GraphicsController.discardAllOutOfBoundsControls (file:///Users/bryce/Documents/GitHub/companion/lib/Graphics/Controller.js:192:27)
    at DataUserConfig.setKey (file:///Users/bryce/Documents/GitHub/companion/lib/Data/UserConfig.js:361:18)
    at Socket.<anonymous> (file:///Users/bryce/Documents/GitHub/companion/lib/UI/Handler.js:55:6)
    at Socket.emit (node:events:513:28)
    at Socket.emit (node:domain:489:12)
    at Socket.emitUntyped (/Users/bryce/Documents/GitHub/companion/node_modules/socket.io/dist/typed-events.js:69:22)
    at /Users/bryce/Documents/GitHub/companion/node_modules/socket.io/dist/socket.js:703:39
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

[Julusian]

2. I made it do that so that the grow buttons arent always visible. previously the 8x4 default would look like this at 1080p which felt messy:
   

3. yep, another stupid typo

4. and another typo

I miss typescript, it would have caught some of these mistakes...

[bryce-seifert]

2. Gotcha!

3 & 4 just tested and look good to me now