Add shortcut to maximize golden layout panes

[daniel-wer]

This is the best I could come up with. keyboardjs doesn't easily allow to set a "target element" and keyup event handlers can only be attached at the document level, so I had to get a little more involved. What do you think? :)

Of course the shortcut is debatable, I picked M for Maximize, ideally it would be a single key press, but there have been voices in the community to avoid those.
The shortcut is . now.

URL of deployed dev instance (used for testing):

• https://___.webknossos.xyz

Steps to test:

• Open tracing view, move mouse over any pane and press . to toggle maximize.

Issues:

• fixes Add shortcut to maximize pane #3926

---

• Updated changelog
• Ready for review

[fm3]

just noting that ctrl+m is “mute tab” in firefox, but since wk doesn’t produce sound, I guess it is fair to overwrite that :)

[philippotto]

Sweet! With the shortcut, the maximize feature feels even better. However, I'm personally not a fan of ctrl+m, since I bound that to a different action in my browser :D However, that's my problem, I guess.

In general, a one-key short cut would be super cool, imo. Would enter be free? Wdyt @fm3 @normanrz regarding the shortcut? Even if invoked accidentally, the effect should be quite obvious to the user and the pane can even be unmaximized via the "maximize" button in the top right corner which should be intuitive.

keyboardjs doesn't easily allow to set a "target element" and keyup event handlers can only be attached at the document level, so I had to get a little more involved. What do you think? :)

Doesn't your code attach keyup at the document level? document.addEventListener("keyup", maximizeListener) doesn't contain a target, does it?

If I'm understanding it correctly an keyup handler is attached for each created component, right? So, for each key up event, approx. 10 listeners will fire. There is probably not a measurable difference, but I'm a bit hesitant with adding too many listeners, since we already have quite a lot of those 🙈
I played a bit around in the console and found the following way which would allow to only attach one listener (all hail the premature optimization!):

// ...
// attach one key up listener and if it's ctrl+m do the following
// ...
const hoveredComponents = glRoot.getItemsByFilter(item => {
  return item.isComponent && item.element[0].matches(":hover")
});
if (hoveredComponents.length > 0) {
  hoveredComponents[0].toggleMaximise();
}

What do you think?

[normanrz]

I guess just m would be a good shortcut. I don't know what the concerns with single-key shortcuts are, but we do have a bunch of them already.

From a code perspective, would it be feasible to have a keyboard shortcuts defined in one place?

[daniel-wer]

@philippotto Thanks for your feedback, you were right with both suggestions, I switched to using a single keyboardjs handler :)

The shortcut is now .

From a code perspective, would it be feasible to have a keyboard shortcuts defined in one place?

@normanrz I see the benefit of this, but I think it would be rather complicated or at least I don't have a good idea how to do that. We should definitely pay attention to keeping the shortcut overview up-to-date, so we're not losing track for now.

[philippotto]

Very nice clean up 👍

[philippotto]

Wow, nice catch. Didn't spot in the other PR.

[normanrz]

nice. looking forward to tweet about this 🐦