
Show HN: GoldenLayout – JavaScript layout manager with multi-screen support - wolframhempel
https://www.golden-layout.com/
======
eterm
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.

~~~
wolframhempel
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

~~~
robmcm
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).

------
vdm
[https://terminal.sexy/](https://terminal.sexy/) is a better demo of Golden
Layout's capabilities.

~~~
51Cards
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.

------
awalGarg
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.

------
dovyski
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/](https://www.golden-layout.com/faq/)

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

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

------
azurelogic
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.

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

~~~
jjrv
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.

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

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

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

~~~
wolframhempel
yup, you can easily do this programmatically

------
martingordon
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.

------
grimgrin
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.

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

------
karmakaze
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.

------
derekja
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!

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

------
oskarer
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..

~~~
wolframhempel
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

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

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

[0] [https://deepstream.io](https://deepstream.io)

------
Blinkky
I'm using [http://docker.webcabin.org/](http://docker.webcabin.org/) and I
love it. This looks great though!

------
d--b
Wow, this is AWESOME!!!

------
takno
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

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

~~~
wolframhempel
it's in the footer: [https://github.com/deepstreamIO/golden-
layout](https://github.com/deepstreamIO/golden-layout)

------
NKCSS
Looks and feels very slick, nice job! :)

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

~~~
squeaky-clean
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...](https://www.golden-layout.com/tutorials/getting-started-react.html)

~~~
wertop
Doh - RTFM as usual. Thanks.

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

------
pjgomez
Fantastic work, thank you for sharing

