Show HN: GoldenLayout – JavaScript layout manager with multi-screen support | Hacker News Reader

Show HN: GoldenLayout – JavaScript layout manager with multi-screen support

golden-layout.com

193 pointswolframhempel37 comments

Looks very good, one issue though:

After maximising, I expected the "restore" like icon to get back to the state I was previously, but it seemed to pop-out instead which was very unexpected.

It seems I should have chosen "minimize" looking icon instead, which doesn't minimize but instead puts back to tiled size.

Also, when closing a pop-out I would expect it to re-integrate rather than closing completely, but perhaps I'm unusual in my expectations.

Cheers. It's true, there is no "minimizing" as such, it's just a toggle between maximised and original state.

Similarly the close icon does close a popout window, popping it back in can be done via the button in the bottom right

I found after a mixture of tear out and maximizing and minimizing the widgets end up half way down the page.

To reproduce (Chrome 49.0.x): Take "Fnts 100" maximize, undock, redock, meximize (repeat if needed).

https://terminal.sexy/ is a better demo of Golden Layout's capabilities.

Very nice working example but I don't understand why they would maintain the X to close modules when it is so easy to close required functionality (like Save). Are you unable to remove the Close button and they had to add "Reset Layout" to get around it? To me most of those modules shouldn't be permitted to be closed.

Neat! I was making something like this a while ago, but got dragged away. One thing I was implementing there that I'd push here as a feature-request:

Provide a simple api to allow binding keyboard shortcuts for common manipulation of the layout, like closing a panel, switching a tab etc. That'd be great for complex applications, specially the ones which use this lib for making native apps based on electron/node-webkit etc.

That's an awesome lib! I got confused regarding the license though. The README file says dual licensed as CC-BY-NC 4.0 or GPL 3, but the LICENSE file in the repo says MIT. The FAQ[0] also mentions MIT.

I assume MIT is the right license.

[0] https://www.golden-layout.com/faq/

Good find, thanks. I've changed it, it's just MIT

Nice! And thanks for using such a permissive license like MIT :)

We found this a few months ago. It was perfect for the application we were looking to build. I had to invert his recommended process for mixing it with Angular, allowing Angular to bootstrap naturally, then initializing GL. If you go that route, you just have to manually wire the window resize to resize GL.

Cool, thanks for sharing! Another project providing layouts we've been using in the Jupyter project is the phosphor library: http://phosphorjs.github.io/ (demo of layouts at http://phosphorjs.github.io/examples/dockpanel/).

PhosphorJS seems truly amazing. Dragging and resizing things feels like using native controls. The example has a polished look and everything is written in well-commented and easily understandable TypeScript without any nonsense external dependencies like jQuery.

That's nice, but it's terrible on my iPhone.

yup, its a paradigm that doesn't translate too well to mobile - so mobile support is only rudimentary (at best)

Would it not be possible just turn the whole layout into an accordion on mobile?

yup, you can easily do this programmatically

The demos don't work on my iPad Pro...

1. Long pressing on a window title brings a smaller window under my finger and when I let go the window disappears.

2. I can maximize the window, but when I try to restore/minimize I get a new CodePen window opening.

3. On a stack, when I tap a tab, it highlights, but I can't get it to activate. Long pressing does the same as (1) and also appears to rearrange the tabs.

The only movement that got me hung up was taking the very top standalone tab (Fnts 100), going to move it, and then trying to return it to the top as a standalone tab. The way I discovered to do it was a series of additional moves.

Obviously this is very slick and looks great, though.

This looks very nice - I've been looking for something like this for a future project.

I remember this! I used it to prototype an HTML layout replacement for a Java GUI. Then I moved on to other companies and projects. Still looks great.

Looks great. I'm afraid I'm flailing a little bit on React, though. All the examples I can find are using older versions of react. Is there an example using the current version? Trying to figure out what I call ReactDOM.render with if the DOM is already being modified by GoldenLayout... Thanks!

Wonderful implementation. Especially impressive is the popoout windows, and the implementation of the cross-window communication hub. Kudos!

Looks really cool, would love to use this in a project of mine. Is it possible to attach a layout to an existing react component and run it inside that? From the documentation I see that passing a DOM element to init() is possible, not sure if that's going to make it in my case..

you can create a layout in any DOM element, just pass it as the second argument to the constructor `new GoldenLayout( config, element)` - getting it to work well with reacts component-lifecycle might be a bit more of a challenge though

This is great work, but any scrollbar adjacent to a draggable divider isn't usable :(

Great work. deepstream [0] is doing some exceptional work in real-time web application domain.

[0] https://deepstream.io

I'm using http://docker.webcabin.org/ and I love it. This looks great though!

Wow, this is AWESOME!!!

Looks nice, and the payload is impressively small. I'd be happier if there weren't 4 separate downloads of JQuery on the demo page though

Certainly looks promising, but add your github url on the front page prominently! i had to google it to find it.

it's in the footer: https://github.com/deepstreamIO/golden-layout

Looks and feels very slick, nice job! :)

Does anyone know anything like this that would work well within a React based app?

I don't have much experience with React, so maybe I can't tell, but is there any reason why this won't work? It even has a link to a tutorial on how to use it with React on the front page.

https://www.golden-layout.com/tutorials/getting-started-reac...

Doh - RTFM as usual. Thanks.

That is pretty awesome work! I'm working on an EHR app and may use this.

Fantastic work, thank you for sharing

Reply on news.ycombinator.com