golden-layout / golden-layout-ng-app Goto Github PK
View Code? Open in Web Editor NEWExample application demonstrating using GoldenLayout in Angular
License: MIT License
Example application demonstrating using GoldenLayout in Angular
License: MIT License
Is there any way we can make few tabs non-movable ?
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.
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?
Is there any way we can allow the tab to movable only to certain dock sections not all dock sections ?
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.
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
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
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
Is there any way we can apply CSS to stacks based on JSON configuration ?
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 :-)
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
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
)?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.