Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update Angular cache and TypeScript build info

Browse Source
This commit is contained in:
bruno
2025-10-02 16:05:25 -04:00
parent b6d47bde5b
commit ce67d6e0de
17 changed files with 1402 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/graph/ui/inline-settings-panel.component.ts
+8 -39
View File
@@ -1,11 +1,8 @@
import { Component, ChangeDetectionStrategy, inject, input, output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GraphSettingsService } from '../graph-settings.service';
import { GraphFiltersSectionComponent } from './sections/filters-section.component';
import { GraphGroupsSectionComponent } from './sections/groups-section.component';
import { GraphDisplaySectionComponent } from './sections/display-section.component';
import { GraphForcesSectionComponent } from './sections/forces-section.component';
import { GraphConfig } from '../graph-settings.types';
import { GraphSettingsAccordionComponent } from '../../../components/graph-settings/graph-settings-accordion.component';
@Component({
selector: 'app-graph-inline-settings',
@@ -13,10 +10,7 @@ import { GraphConfig } from '../graph-settings.types';
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
CommonModule,
GraphFiltersSectionComponent,
GraphGroupsSectionComponent,
GraphDisplaySectionComponent,
GraphForcesSectionComponent,
GraphSettingsAccordionComponent
],
template: `
<div class="flex flex-col gap-3">
@@ -34,37 +28,12 @@ import { GraphConfig } from '../graph-settings.types';
</button>
</div>
<!-- Filters -->
<section class="rounded-xl border border-obs-l-border/60 bg-obs-l-bg-main/70 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60">
<div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">Filters</div>
<div class="px-3 pb-3">
<app-graph-filters-section [config]="config()" (configChange)="onConfigChange($event)"></app-graph-filters-section>
</div>
</section>
<!-- Groups -->
<section class="rounded-xl border border-obs-l-border/60 bg-obs-l-bg-main/70 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60">
<div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">Groups</div>
<div class="px-3 pb-3">
<app-graph-groups-section [config]="config()" (configChange)="onConfigChange($event)"></app-graph-groups-section>
</div>
</section>
<!-- Display -->
<section class="rounded-xl border border-obs-l-border/60 bg-obs-l-bg-main/70 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60">
<div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">Display</div>
<div class="px-3 pb-3">
<app-graph-display-section [config]="config()" (configChange)="onConfigChange($event)" (animateRequested)="animateRequested.emit()"></app-graph-display-section>
</div>
</section>
<!-- Forces -->
<section class="rounded-xl border border-obs-l-border/60 bg-obs-l-bg-main/70 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60">
<div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">Forces</div>
<div class="px-3 pb-3">
<app-graph-forces-section [config]="config()" (configChange)="onConfigChange($event)"></app-graph-forces-section>
</div>
</section>
<ov-graph-settings-accordion
[config]="config()"
[showCollapseToggle]="true"
(configChange)="onConfigChange($event)"
(animateRequested)="animateRequested.emit()"
></ov-graph-settings-accordion>
</div>
`,
})
src/app/graph/ui/settings-panel.component.ts
+18 -182
View File
@@ -1,21 +1,15 @@
import { Component, ChangeDetectionStrategy, input, output, inject, effect, signal } from '@angular/core';
import { Component, ChangeDetectionStrategy, input, output, inject, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GraphConfig } from '../graph-settings.types';
import { GraphSettingsService } from '../graph-settings.service';
import { GraphFiltersSectionComponent } from './sections/filters-section.component';
import { GraphGroupsSectionComponent } from './sections/groups-section.component';
import { GraphDisplaySectionComponent } from './sections/display-section.component';
import { GraphForcesSectionComponent } from './sections/forces-section.component';
import { GraphSettingsAccordionComponent } from '../../../components/graph-settings/graph-settings-accordion.component';
@Component({
selector: 'app-graph-settings-panel',
standalone: true,
imports: [
CommonModule,
GraphFiltersSectionComponent,
GraphGroupsSectionComponent,
GraphDisplaySectionComponent,
GraphForcesSectionComponent
CommonModule,
GraphSettingsAccordionComponent
],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
@@ -52,82 +46,12 @@ import { GraphForcesSectionComponent } from './sections/forces-section.component
</div>
<div class="panel-body">
<p-accordion
class="graph-settings-accordion"
[multiple]="true"
[value]="accordionValue()"
(valueChange)="onAccordionValueChange($event)">
<p-accordion-panel value="filters">
<p-accordion-header>
<span class="header-content">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
<span>Filters</span>
</span>
</p-accordion-header>
<p-accordion-content>
<app-graph-filters-section
[config]="config()"
(configChange)="onConfigChange($event)">
</app-graph-filters-section>
</p-accordion-content>
</p-accordion-panel>
<p-accordion-panel value="groups">
<p-accordion-header>
<span class="header-content">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
<span>Groups</span>
</span>
</p-accordion-header>
<p-accordion-content>
<app-graph-groups-section
[config]="config()"
(configChange)="onConfigChange($event)">
</app-graph-groups-section>
</p-accordion-content>
</p-accordion-panel>
<p-accordion-panel value="display">
<p-accordion-header>
<span class="header-content">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
<span>Display</span>
</span>
</p-accordion-header>
<p-accordion-content>
<app-graph-display-section
[config]="config()"
(configChange)="onConfigChange($event)"
(animateRequested)="animateRequested.emit()">
</app-graph-display-section>
</p-accordion-content>
</p-accordion-panel>
<p-accordion-panel value="forces">
<p-accordion-header>
<span class="header-content">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span>Forces</span>
</span>
</p-accordion-header>
<p-accordion-content>
<app-graph-forces-section
[config]="config()"
(configChange)="onConfigChange($event)">
</app-graph-forces-section>
</p-accordion-content>
</p-accordion-panel>
</p-accordion>
<ov-graph-settings-accordion
[config]="config()"
[showCollapseToggle]="true"
(configChange)="onConfigChange($event)"
(animateRequested)="animateRequested.emit()">
</ov-graph-settings-accordion>
</div>
</div>
}
@@ -187,78 +111,6 @@ import { GraphForcesSectionComponent } from './sections/forces-section.component
padding: 1rem;
}
:host ::ng-deep .graph-settings-accordion .p-accordion-panel {
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.85rem;
background-color: #ffffff;
overflow: hidden;
margin-bottom: 0.875rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
:host ::ng-deep .graph-settings-accordion .p-accordion-panel:last-of-type {
margin-bottom: 0;
}
:host ::ng-deep .graph-settings-accordion .p-accordion-header {
font-size: 0.9rem;
font-weight: 600;
color: #1e293b;
padding: 0.95rem 1.2rem;
background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(248, 250, 252, 0.6) 100%);
}
:host ::ng-deep .graph-settings-accordion .p-accordion-header .header-content {
display: flex;
align-items: center;
gap: 0.6rem;
}
:host ::ng-deep .graph-settings-accordion .p-accordion-header:hover {
background: rgba(241, 245, 249, 0.9);
}
:host ::ng-deep .graph-settings-accordion .p-accordion-toggle-icon {
color: #0f172a;
}
:host ::ng-deep .graph-settings-accordion .p-accordion-panel-active {
border-color: rgba(59, 130, 246, 0.45);
box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.35);
}
:host ::ng-deep .graph-settings-accordion .p-accordion-content {
background-color: #ffffff;
padding: 1.1rem 1.25rem 1.25rem;
}
:host-context(.dark) ::ng-deep .graph-settings-accordion .p-accordion-panel {
border-color: rgba(71, 85, 105, 0.5);
background-color: rgba(30, 41, 59, 0.9);
}
:host-context(.dark) ::ng-deep .graph-settings-accordion .p-accordion-panel-active {
border-color: rgba(96, 165, 250, 0.6);
box-shadow: 0 12px 28px -12px rgba(2, 132, 199, 0.35);
}
:host-context(.dark) ::ng-deep .graph-settings-accordion .p-accordion-header {
color: #f8fafc;
background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.75) 100%);
}
:host-context(.dark) ::ng-deep .graph-settings-accordion .p-accordion-header:hover {
background: rgba(30, 41, 59, 0.9);
}
:host-context(.dark) ::ng-deep .graph-settings-accordion .p-accordion-toggle-icon {
color: #e2e8f0;
}
:host-context(.dark) ::ng-deep .graph-settings-accordion .p-accordion-content {
background-color: rgba(15, 23, 42, 0.9);
}
@media (max-width: 768px) {
.panel-content {
max-width: 100%;
@@ -274,7 +126,6 @@ export class GraphSettingsPanelComponent {
private settingsService = inject(GraphSettingsService);
config = this.settingsService.config;
accordionValue = signal<string[]>([]);
constructor() {
// Listen to Escape key globally when panel is open
@@ -293,30 +144,15 @@ export class GraphSettingsPanelComponent {
return () => document.removeEventListener('keydown', handler);
});
}
// Keep accordion state in sync with persisted collapse flags
effect(() => {
const currentConfig = this.config();
const active: string[] = [];
if (!currentConfig['collapse-filter']) {
active.push('filters');
}
if (!currentConfig['collapse-color-groups']) {
active.push('groups');
}
if (!currentConfig['collapse-display']) {
active.push('display');
}
if (!currentConfig['collapse-forces']) {
active.push('forces');
}
this.accordionValue.set(active);
});
onConfigChange(patch: Partial<GraphConfig>): void {
this.settingsService.save(patch);
}
onResetAll(): void {
if (confirm('Reset all graph settings to defaults?')) {
this.settingsService.resetToDefaults();
}
}
}