TSP-1373-Edit List Sweep points without hitting 'Enter' (#52)

When editing list sweep points, no need to hit 'enter' key to apply the
changes. Also, list popup position for step and sweep is preserved if it
was dragged and moved within the script gen UI window.

Author: kaur-mananjeet

script-gen-ui/src/app/components/main-sweep/list/list.component.html

@@ -1,4 +1,4 @@
-<div class="sweep-list-popup" cdkDrag cdkDragBoundary="body">
+<div #listPopUp class="sweep-list-popup" cdkDrag cdkDragBoundary="body">
   <div class="sweep-list-popup-content">
     <div class="sweep-list-popup-header" cdkDragHandle>
       <h3 style="margin: 0">List</h3>
@@ -12,7 +12,7 @@ <h3 style="margin: 0">List</h3>
           [(ngModel)]="noOfPointsOrSteps"
           name="noOfPointsOrSteps"
           *ngIf="noOfPointsOrSteps !== undefined && noOfPointsOrSteps !== null"
-          (keydown.enter)="emitStepsOrPoints()"
+          (inputChange)="emitStepsOrPoints()"
           [disabled]="!isNoOfPointsOrSteps"
         ></app-input-numeric>
       </div>
@@ -39,7 +39,7 @@ <h3 style="margin: 0">List</h3>
                   [unit]="sweep.list[i].unit"
                   automationID= "point-{{(i + 1)}}-{{sweep.chanName}}"
                   [(ngModel)]="sweep.list[i].value"
-                  (keydown.enter)="onEnter()"
+                  (inputChange)="onChange()"
                   style="width: 95%"
                   [disabled]="!sweep.isDeviceValid"
                 ></app-input-plain>

script-gen-ui/src/app/components/main-sweep/list/list.component.ts

@@ -4,6 +4,9 @@ import {
   Input,
   Output,
   OnChanges,
+  AfterViewInit,
+  ViewChild,
+  ElementRef,
 } from '@angular/core';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ParameterFloat } from '../../../model/sweep_data/SweepTimingConfig';
@@ -28,18 +31,21 @@ import { InputNumericComponent } from '../../controls/input-numeric/input-numeri
   templateUrl: './list.component.html',
   styleUrl: './list.component.scss',
 })
-export class ListComponent implements OnChanges {
+export class ListComponent implements OnChanges, AfterViewInit {
+  @ViewChild('listPopUp', { static: false }) listPopUp: ElementRef | undefined;
   @Input() noOfPointsOrSteps: number | undefined;
   @Input() isNoOfPointsOrSteps = true;
   @Input() listsWithNames: {
     chanName: string;
     list: ParameterFloat[];
     isDeviceValid: boolean;
   }[] = [];
+  @Input() savedListPosition: { left: number; top: number } | null = null;
   @Output() closeList = new EventEmitter<void>();
   @Output() listOfPoints = new EventEmitter<
     { chanName: string; list: ParameterFloat[] }[]
   >();
+  @Output() listPositionChange = new EventEmitter<{ left: number; top: number }>();
   @Output() updatedStepsOrPoints = new EventEmitter<number>();
 
   rowIndices: number[] = [];
@@ -50,6 +56,13 @@ export class ListComponent implements OnChanges {
       : [];
   }
 
+  ngAfterViewInit(): void {
+    if (this.listPopUp && this.savedListPosition) {
+      this.listPopUp.nativeElement.style.left = `${this.savedListPosition.left}px`;
+      this.listPopUp.nativeElement.style.top = `${this.savedListPosition.top}px`;
+    }
+  }
+
   ngOnChanges() {
     console.log('listsWithNames:', this.listsWithNames);
     if (this.listsWithNames.length > 0) {
@@ -63,15 +76,25 @@ export class ListComponent implements OnChanges {
   }
 
   onClose() {
+    this.captureListPosition();
     this.closeList.emit();
   }
 
-  onEnter() {
+  onChange() {
+    this.captureListPosition();
     this.listOfPoints.emit(this.listsWithNames);
   }
 
   emitStepsOrPoints() {
     // emitting points or steps
+    this.captureListPosition();
     this.updatedStepsOrPoints.emit(this.noOfPointsOrSteps);
   }
+
+  captureListPosition() {
+    if (this.listPopUp) {
+      const rect = this.listPopUp.nativeElement.getBoundingClientRect();
+      this.listPositionChange.emit({ left: rect.left, top: rect.top });
+    }
+  }
 }

script-gen-ui/src/app/components/main-sweep/main-sweep.component.html

@@ -208,6 +208,8 @@ <h3>Step</h3>
             (showStepListChange)="
               onShowStepListChange($event.stepId, $event.value)
             "
+            (stepListPositionChange)="onStepListPositionChange($event)"
+            [savedStepListPosition]="getStepListPosition(stepChannel.start_stop_channel.common_chan_attributes.uuid)"
           ></app-step>
         </div>
       </div>

script-gen-ui/src/app/components/main-sweep/main-sweep.component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-generic-constructors */
 import {
   Component,
   ViewChildren,
@@ -92,7 +93,7 @@ export class MainSweepComponent implements OnChanges {
     if (this.activeComponent !== component || this.activeIndex !== index) {
       this.isScrolled = false;
     }
-    
+
     this.activeComponent = component;
     this.activeIndex = index;
     console.log(`Active Component: ${component}, Index: ${index}`);
@@ -128,7 +129,7 @@ export class MainSweepComponent implements OnChanges {
   }[] = [];
 
   showStepListStates: Record<string, boolean> = {}; // step list pop up box boolean tracking
-
+  stepListPositions: Map<string, { left: number; top: number }> = new Map(); // step list positions
   @Input() sweepConfig: SweepConfig | undefined;
 
   isBiasExpanded = false;
@@ -147,12 +148,12 @@ export class MainSweepComponent implements OnChanges {
       // Handle the change in sweepConfig here if needed
       this.updateAll();
       console.log('sweepConfig updated:', this.sweepConfig);
-      
+
       // Re-scroll to active plot after data updates if there's an active component
       if (this.activeComponent !== null && this.activeIndex !== null) {
         setTimeout(() => {
           this.scrollToPlotInPlotContainer(this.activeComponent!, this.activeIndex!);
-        }, 10); 
+        }, 10);
       }
     }
   }
@@ -283,6 +284,14 @@ export class MainSweepComponent implements OnChanges {
     this.showStepListStates[stepId] = value;
   }
 
+  onStepListPositionChange(data: { stepId: string; position: { left: number; top: number } }) {
+    this.stepListPositions.set(data.stepId, data.position);
+  }
+
+  getStepListPosition(stepId: string): { left: number; top: number } | null {
+    return this.stepListPositions.get(stepId) || null;
+  }
+
   listOfSweepPointsUpdate(
     points: { chanName: string; list: ParameterFloat[] }[]
   ) {

script-gen-ui/src/app/components/main-sweep/step/step.component.html

@@ -193,9 +193,11 @@ <h3>
           [listsWithNames]="stepListsWithNames"
           [noOfPointsOrSteps]="stepPoints?.value"
           [isNoOfPointsOrSteps]="selectedDeviceOption?.isValid ?? false"
+          [savedListPosition]="stepListPosition"
           (closeList)="closeStepListPopup()"
           (listOfPoints)="listOfStepPointsUpdate($event)"
           (updatedStepsOrPoints)="stepPointsUpdatefromList($event)"
+          (listPositionChange)="onStepListPositionChange($event)">
         ></app-list>
       </div>
     </div>

script-gen-ui/src/app/components/main-sweep/step/step.component.ts

@@ -70,11 +70,18 @@ export class StepComponent implements OnChanges {
 
   @Input() listStep = false; // list checkbox
   @Input() showStepList = false; //edit list popup
+  @Input() savedStepListPosition: { left: number; top: number } | null = null;
   @Output() showStepListChange = new EventEmitter<{
     stepId: string;
     value: boolean;
-  }>(); //storing the value main-sweep since this will be reloaded after changes
+  }>();
+  //storing the value main-sweep since this will be reloaded after changes
+  @Output() stepListPositionChange = new EventEmitter<{
+    stepId: string;
+    position: { left: number; top: number };
+  }>();
   list: ParameterFloat[] = []; // list of points
+  stepListPosition: { left: number; top: number } | null = null;
 
   @Input() stepChannel: StepChannel | undefined;
   @Input() stepGlobalParameters: StepGlobalParameters | undefined;
@@ -155,6 +162,11 @@ export class StepComponent implements OnChanges {
       }
 
       this.updateStepListsWithNames();
+
+      // Use saved position if available
+      if (this.savedStepListPosition) {
+        this.stepListPosition = this.savedStepListPosition;
+      }
     }
   }
 
@@ -282,4 +294,13 @@ export class StepComponent implements OnChanges {
       this.submitStepGlobalParamsData();
     }
   }
+
+  onStepListPositionChange(position: { left: number; top: number }) {
+    this.stepListPosition = position;
+    console.log('Step List Position Changed:', position);
+    this.stepListPositionChange.emit({
+      stepId: this.uuid,
+      position: position,
+    });
+  }
 }