From e08610fb6eba6a68ca88abbaf92cd0d2cadfca30 Mon Sep 17 00:00:00 2001
From: Brandon Clayton <bclayton@usgs.gov>
Date: Mon, 16 Sep 2024 16:18:02 -0600
Subject: [PATCH] add sliders
---
.../components/plots/plots.component.html | 40 +++++++++++++++++++
.../components/plots/plots.component.ts | 30 +++++++++++++-
2 files changed, 68 insertions(+), 2 deletions(-)
diff --git a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html
index bac86fee0..18e337e2e 100644
--- a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html
+++ b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html
@@ -62,9 +62,49 @@
<!-- Disagg plot -->
<nshmp-lib-ng-hazard-disagg-plot
+ #disaggPlot
[inputs]="{
+ allowDrag: true,
component: form.value.disaggComponent,
imt: form.value.imt,
responseData: serviceResponse()?.response,
}"
/>
+
+<div>
+ <div>
+ X:
+ <mat-slider min="-330" max="300" step="1">
+ <input
+ type="range"
+ matSliderThumb
+ [(ngModel)]="cameraOrigin.x"
+ (valueChange)="setOrigin()"
+ />
+ </mat-slider>
+ </div>
+
+ <div>
+ Y:
+ <mat-slider min="-330" max="300" step="1">
+ <input
+ type="range"
+ matSliderThumb
+ [(ngModel)]="cameraOrigin.y"
+ (valueChange)="setOrigin()"
+ />
+ </mat-slider>
+ </div>
+
+ <div>
+ Z:
+ <mat-slider min="-330" max="300" step="1">
+ <input
+ type="range"
+ matSliderThumb
+ [(ngModel)]="cameraOrigin.z"
+ (valueChange)="setOrigin()"
+ />
+ </mat-slider>
+ </div>
+</div>
diff --git a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts
index 9e5b92f31..e23c0ffa0 100644
--- a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts
+++ b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts
@@ -1,16 +1,23 @@
import {AsyncPipe} from '@angular/common';
-import {Component} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
+import {Component, viewChild} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButton} from '@angular/material/button';
import {MatOption} from '@angular/material/core';
import {MatDivider} from '@angular/material/divider';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatSelect} from '@angular/material/select';
+import {MatSliderModule} from '@angular/material/slider';
import {NshmpLibNgHazardDisaggPlotComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpTemplateService} from '@ghsc/nshmp-template';
import {AppService} from '../../services/app.service';
+interface CameraOrigin {
+ x: number;
+ y: number;
+ z: number;
+}
+
/**
* Disaggregation plot with select menu of component.
*/
@@ -25,6 +32,8 @@ import {AppService} from '../../services/app.service';
MatOption,
AsyncPipe,
ReactiveFormsModule,
+ MatSliderModule,
+ FormsModule,
],
selector: 'app-plots',
standalone: true,
@@ -39,6 +48,14 @@ export class PlotsComponent {
/** Disaggreagtion service response */
serviceResponse = this.service.serviceResponse;
+ cameraOrigin: CameraOrigin = {
+ x: 280,
+ y: -150,
+ z: 180,
+ };
+
+ disaggPlot = viewChild.required(NshmpLibNgHazardDisaggPlotComponent);
+
constructor(
public service: AppService,
public templateService: NshmpTemplateService
@@ -48,4 +65,13 @@ export class PlotsComponent {
exportReport(): void {
print();
}
+
+ setOrigin(): void {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+ this.disaggPlot().view.setOrigin(
+ this.cameraOrigin.x,
+ this.cameraOrigin.y,
+ this.cameraOrigin.z
+ );
+ }
}
--
GitLab