ngx-lil-gui
Version:
Lil-GUI wrapper for Angular
327 lines (319 loc) • 13.5 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, inject, ElementRef, NgZone, Component, ChangeDetectionStrategy, Input, Output, Directive, NgModule } from '@angular/core';
import GUI from 'lil-gui';
class NgxLilGui {
constructor() {
this.zoneless = false;
this.self = false;
this.guiChange = new EventEmitter();
this.guiFinishChange = new EventEmitter();
this.guiReady = new EventEmitter();
this.#hostElement = inject(ElementRef, {
skipSelf: true,
});
this.#parentGUI = inject(NgxLilGui, { skipSelf: true, optional: true });
this.#ngZone = inject(NgZone);
}
#gui;
#hostElement;
#parentGUI;
#ngZone;
ngOnInit() {
this.zoneless = this.#parentGUI?.zoneless ?? this.zoneless;
this.run(() => {
let container = this.container instanceof HTMLElement
? this.container
: this.#hostElement.nativeElement;
if (typeof this.container === 'boolean') {
container = undefined;
}
this.#gui = new GUI({
container,
touchStyles: this.touchStyles,
autoPlace: this.autoPlace,
injectStyles: this.injectStyles,
width: this.width,
title: this.title,
parent: this.self ? undefined : this.#parentGUI?.gui || undefined,
});
this.#setupEvents();
if (this.config) {
this.#buildGUI(this.config);
}
this.guiReady.emit(this.gui);
});
}
get gui() {
return this.#gui;
}
addController(property, controllerConfig) {
return this.run(() => {
if (this.object) {
const [, , ...config] = extractControllerConfig(controllerConfig);
return this.gui.add(this.object, property, ...config);
}
return undefined;
});
}
addColor(property, colorConfig) {
return this.run(() => {
if (this.object) {
return this.gui.addColor(this.object, property, colorConfig?.rgbScale);
}
return undefined;
});
}
run(fn) {
if (this.zoneless) {
return this.#ngZone.runOutsideAngular(() => {
return fn();
});
}
return fn();
}
ngOnDestroy() {
this.run(() => {
this.#gui.destroy();
});
}
#setupEvents() {
this.gui.onChange((arg0) => {
this.guiChange.emit({ ...arg0, gui: this.gui });
});
this.gui.onFinishChange((arg0) => {
this.guiFinishChange.emit({ ...arg0, gui: this.gui });
});
}
#buildGUI(config, gui = this.gui) {
const { guis, colors, object, controllers } = config;
for (const [controllerKey, controllerValue] of Object.entries(controllers || {})) {
const [onChange, onFinishChange, ...config] = extractControllerConfig(controllerValue);
const controller = gui.add(object, controllerKey, ...config);
if (onChange) {
controller.onChange((value) => {
onChange({ value, controller });
});
}
if (onFinishChange) {
controller.onFinishChange((value) => {
onFinishChange({ value, controller });
});
}
}
for (const [colorKey, colorValue] of Object.entries(colors || {})) {
const { rgbScale, onChange, onFinishChange } = colorValue;
const controller = gui.addColor(object, colorKey, rgbScale);
if (onChange) {
controller.onChange((value) => {
onChange({ value, controller });
});
}
if (onFinishChange) {
controller.onFinishChange((value) => {
onFinishChange({ value, controller });
});
}
}
for (const [folderKey, folderConfig] of Object.entries(guis || {})) {
const folder = gui.addFolder(folderKey);
this.#buildGUI(folderConfig, folder);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGui, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgxLilGui, isStandalone: true, selector: "\n ngx-lil-gui:not([config]):not([object]),\n ngx-lil-gui[config]:not([object]),\n ngx-lil-gui[object]:not([config])\n ", inputs: { zoneless: "zoneless", self: "self", autoPlace: "autoPlace", container: "container", width: "width", title: "title", injectStyles: "injectStyles", touchStyles: "touchStyles", object: "object", config: "config" }, outputs: { guiChange: "guiChange", guiFinishChange: "guiFinishChange", guiReady: "guiReady" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGui, decorators: [{
type: Component,
args: [{
selector: `
ngx-lil-gui:not([config]):not([object]),
ngx-lil-gui[config]:not([object]),
ngx-lil-gui[object]:not([config])
`,
template: ` <ng-content></ng-content> `,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
}]
}], propDecorators: { zoneless: [{
type: Input
}], self: [{
type: Input
}], autoPlace: [{
type: Input
}], container: [{
type: Input
}], width: [{
type: Input
}], title: [{
type: Input
}], injectStyles: [{
type: Input
}], touchStyles: [{
type: Input
}], object: [{
type: Input
}], config: [{
type: Input
}], guiChange: [{
type: Output
}], guiFinishChange: [{
type: Output
}], guiReady: [{
type: Output
}] } });
function extractControllerConfig(controllerConfig) {
const config = [undefined, undefined];
if (controllerConfig) {
config[0] = controllerConfig.onChange;
config[1] = controllerConfig.onFinishChange;
config[2] =
controllerConfig.collection ||
controllerConfig.min;
config[3] = controllerConfig.max;
config[4] = controllerConfig.step;
}
return config;
}
class NgxLilGuiColor {
constructor() {
this.valueChange = new EventEmitter();
this.finishChange = new EventEmitter();
this.colorReady = new EventEmitter();
this.preAdd = new EventEmitter();
this.#parentGui = inject(NgxLilGui, { skipSelf: true, optional: true });
}
#colorController;
get colorController() {
return this.#colorController;
}
#parentGui;
ngOnInit() {
if (!this.#parentGui) {
throw new Error('ngx-lil-gui-color must be used within a ngx-lil-gui');
}
this.preAdd.emit();
this.#colorController = this.#parentGui.addColor(this.property, this.colorConfig);
this.#parentGui.run(() => {
if (this.colorController) {
this.colorController.updateDisplay();
this.colorController.onChange((value) => {
this.valueChange.emit({ value, controller: this.colorController });
});
this.colorController.onFinishChange((value) => {
this.finishChange.emit({ value, controller: this.colorController });
});
this.colorReady.emit(this.colorController);
}
});
}
ngOnDestroy() {
if (this.colorController) {
this.colorController.destroy();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiColor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgxLilGuiColor, isStandalone: true, selector: "ngx-lil-gui-color", inputs: { property: "property", colorConfig: "colorConfig" }, outputs: { valueChange: "valueChange", finishChange: "finishChange", colorReady: "colorReady", preAdd: "preAdd" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiColor, decorators: [{
type: Directive,
args: [{
selector: 'ngx-lil-gui-color',
standalone: true,
}]
}], propDecorators: { property: [{
type: Input,
args: [{ required: true }]
}], colorConfig: [{
type: Input
}], valueChange: [{
type: Output
}], finishChange: [{
type: Output
}], colorReady: [{
type: Output
}], preAdd: [{
type: Output
}] } });
class NgxLilGuiController {
constructor() {
this.valueChange = new EventEmitter();
this.finishChange = new EventEmitter();
this.controllerReady = new EventEmitter();
this.preAdd = new EventEmitter();
this.#parentGui = inject(NgxLilGui, { optional: true, skipSelf: true });
}
#controller;
#parentGui;
ngOnInit() {
if (!this.#parentGui) {
throw new Error('ngx-lil-gui-controller must be used within a ngx-lil-gui');
}
this.preAdd.emit();
this.#controller = this.#parentGui.addController(this.property, this.controllerConfig);
this.#parentGui.run(() => {
if (this.controller) {
this.controller.updateDisplay();
this.controller.onChange((value) => {
this.valueChange.emit({ value, controller: this.controller });
});
this.controller.onFinishChange((value) => {
this.finishChange.emit({ value, controller: this.controller });
});
this.controllerReady.emit(this.controller);
}
});
}
ngOnDestroy() {
if (this.controller) {
this.controller.destroy();
}
}
get controller() {
return this.#controller;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiController, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgxLilGuiController, isStandalone: true, selector: "ngx-lil-gui-controller", inputs: { property: "property", controllerConfig: "controllerConfig" }, outputs: { valueChange: "valueChange", finishChange: "finishChange", controllerReady: "controllerReady", preAdd: "preAdd" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiController, decorators: [{
type: Directive,
args: [{
selector: 'ngx-lil-gui-controller',
standalone: true,
}]
}], propDecorators: { property: [{
type: Input,
args: [{ required: true }]
}], controllerConfig: [{
type: Input
}], valueChange: [{
type: Output
}], finishChange: [{
type: Output
}], controllerReady: [{
type: Output
}], preAdd: [{
type: Output
}] } });
/**
* @description Using standalone components is recommended
*/
class NgxLilGuiModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiModule, imports: [NgxLilGui, NgxLilGuiController, NgxLilGuiColor], exports: [NgxLilGui, NgxLilGuiController, NgxLilGuiColor] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgxLilGuiModule, decorators: [{
type: NgModule,
args: [{
imports: [NgxLilGui, NgxLilGuiController, NgxLilGuiColor],
exports: [NgxLilGui, NgxLilGuiController, NgxLilGuiColor],
}]
}] });
/*
* Public API Surface of ngx-lil-gui
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxLilGui, NgxLilGuiColor, NgxLilGuiController, NgxLilGuiModule };
//# sourceMappingURL=ngx-lil-gui.mjs.map