golden-layout / golden-layout-ng-app

Example application demonstrating using GoldenLayout in Angular

Golden Layout

Golden Layout is a Javascript layout manager which enables you to layout components in a web page and re-arrange them with drag and drop. Its features include:

• Native popup windows
• Touch support
• Support for application frameworks such as Angular and Vue
• Virtual components
• Comprehensive API
• Load and save layouts
• Focus components
• Completely themeable
• Works in modern browsers (Firefox, Chrome)
• Responsive design

Development

Except for simple bug-fixes, commits should go into the dev branch, which will become version 3.0. The dev branch is quite unstable (and not backwards compatible), but should hopefully stabilize soon.

Installation

The library can be installed into an application package with the npm command:
npm i golden-layout

More information

For more information, please refer to the Golden Layout website

golden-layout-ng-app's Issues

how to Allow the tab to movable only to certain dock sections not all dock sections

Is there any way we can allow the tab to movable only to certain dock sections not all dock sections ?

How to add dynamic CSS based on configuration

Is there any way we can apply CSS to stacks based on JSON configuration ?

NgxGoldenLayout2?

Hi Paul,

Firstly, thank you very much for maintaining golden-layout and for providing us this source code for reading. It's a huge help to my team.

My organisation has been heavily relying on ngx-golden-layout in our frontend. Since that package has not been well maintained, I used this repository to sort of "recreate" ngx-golden-layout. I was wondering whether you would consider looking at it considering that it heavily borrows from this codebase.

https://github.com/fresto32/ngx-golden-layout-2/tree/main
https://www.npmjs.com/package/ngx-golden-layout-2

I was wondering whether you might consider porting the code across as another repository under golden-layout or whether this code could be of use to you or anyone else in the organisation.

In any case, if there's anything I can do to help, please let me know.

Thanks,

Taj

p.s. Happy to fork into this library / any alternative you think appropriate

Issue in a Production Enviroment

Hello,

First of all, thank you all very much for maintaining this project. It is a great package.

Now for the issue. While the app demo in its current state works as intended in an angular development environment when creating an angular production build, minifying and uglifying the code destroys the ComponentRegistration logic used, as the component constructor function names will be all uglified to the same name. This obviously breaks the map used with string keys.

To solve this, there are probably many avenues, for example, the easiest would be using static string names instead of constructor.name, as these aren't compressed, which however has its own issues, as we would need to maintain it across all references and thus multiple files. Alternatively registering the function names to not be minified could be another option.

While answering the latter question perfectly might not be in the scope of this demo, fixing the issue and shining a light on this trap fall could help users, which study this example to learn the usage of the package with Angular.

Greetings,
Michael Martini

On docking back the undocked component, component is not loaded completely.

Actual Component:

After undocking and docking In we can see only the text box loaded

Component content new window

Hi, I'm learning about Golden Layout 2 and Angular, thank you for sample project.
I have a doubt about example. Why the component content doesn't show when a new window is opened (popout: true)?

"Virtual" with "View Comp Ref" does not display any controls

If you select "Virtual" with "View Comp Ref" and hit "Load Layout" the panels are shown, but their contents not (if you inspect the HTML, they are there, but "z-index: auto" prevents them from being displayed".

Browsers:
Mozilla Firefox Developer Edition 112.0b3 (64-bits)
Google Chrome 111.0.5563.65 64 bits

2023-03-21_16-38-55-golden-layout-ng-app.-.issue.with.View.Comp.Ref.mp4

Automatically loaded (predefined) Layout with strange popout behaviour

Hi, I discovered a strange GoldenLayout behaviour regarding popouts.

When I set up the project and started it without changes, I can click together a layout with the controls and the popouts work as they should. Same goes for the predefined layouts that you can switch between in the controls.

But when I adapted the AppComponent, so that one of the predefined layouts are loaded automatically during the ngAfterViewInit() in app.component.ts, the popout does not pop out the component only, but the whole application like in the picture below:

Here is the code from the app.component.ts:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { LayoutConfig, ComponentItemConfig } from 'golden-layout';
import { ColorComponent } from './color.component';
import { ControlsComponent } from './controls.component';
import { GoldenLayoutHostComponent } from './golden-layout-host.component';
import { predefinedLayouts } from "./predefined-layouts"

@Component({
  selector: 'app-root',
  template: `
      <button (click)="test()">Test</button>
      <app-controls #controls></app-controls>
      <app-golden-layout-host #goldenLayoutHost></app-golden-layout-host>   
  `,
  styles: [
    `
      :host {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
      }
    `
  ]
})
export class AppComponent implements AfterViewInit {
  title = 'golden-layout-ng-app';

  private _controlsElement: HTMLElement;

  responsiveConfig: LayoutConfig = predefinedLayouts[2].config

  @ViewChild('controls') private _controlsComponent: ControlsComponent; 
  @ViewChild('goldenLayoutHost') private _goldenLayoutHostComponent: GoldenLayoutHostComponent; 

  ngAfterViewInit() {
    setTimeout(() => {
      this._controlsElement = this._controlsComponent.element;

      this._goldenLayoutHostComponent.initialise();
      this._controlsComponent.initialise(this._goldenLayoutHostComponent);
  
      if (this._goldenLayoutHostComponent.isGoldenLayoutSubWindow) {
        this._controlsElement.style.display = 'none';
      }

      this._goldenLayoutHostComponent.goldenLayout.loadLayout(this.responsiveConfig);

    }, 0);
  }

  test(){
    // this._goldenLayoutHostComponent.goldenLayout.loadLayout(this.responsiveConfig);
  }
}

Do you know, why this is happening and how I can avoid this and still load a layout in the initialization process?

Thanks in regard!
Jonas

Issue when triggering redraw while a stack is maximized

If we have a Layout such as the one below, maximize it and trigger a redraw while it is maximized, for example by changing the window size

the Layout will collapse, as all components are redrawn with wrong coordinates.

For few components, this can be fixed by triggering a Layout redraw on handling the Z-Index Change corresponding to the minimization, but it might not be really scalable nor does it feel like a proper solution. to this issue.

Issues with building the library

Hi Paul,
thank you for maintaining Golden Layout for Angular. It is amazing by your side and we appreciate it!

Just to mention that with the last several versions of the library we are not able to start the project.
There are errors during the build phase connected mainly with the types and with the provided number of arguments.

The first error is:

Error: src/app/golden-layout-host.component.ts:4:3 - error TS2305: Module '"golden-layout"' has no exported member 'LogicalZIndex'.

There are about 20 errors and if you need all the logs, just say and I will provide them.

I hope to give enough information.

There are some issues with the versions I suppose and it is possible the issues we face to be only by our side,
but anyway, I decided to write it.

Please let me know if you have any suspicions :-)

Component id setter

Just a simple question: how do you set the component id in the context of goldenLayout.newComponent? I've searched quite a bit for this aspect and I didn't find any info, just the getter which returns an empty string.

How to Configure the few tabs to be non-movable

Is there any way we can make few tabs non-movable ?

unbindComponentEvent doesn't get called when using "Embedded with Events" using "Application Ref" method

As the title says, the unbindComponentEvent doesn't get called when using "Embedded with Events" using "Application Ref" method.

The README of this repository says: "Earlier versions of this application used Golden Layout's getComponentEvent and releaseComponentEvent to implement the above "Embedded with Events" approach. These events are now deprecated. Please use the new bindComponentEvent and unbindComponentEvent events instead."

In my case, I need to do something inside unbindComponentEvent but it gets called only when using the virtual tecnique.

Is that a bug? should I need to use the deprecated releaseComponentEvent?