Add button for adding device panel vertically into view panel

frontend/go.work.sum

@@ -0,0 +1,5 @@
+github.com/hashicorp/errwrap v1.0.0/go.mod h1:YH+1FKiLXxHSkmPseP+kNlulaMuP3n2brvKWEqk/Jc4=
+github.com/hashicorp/go-multierror v1.1.1/go.mod h1:iw975J/qwKPdAO1clOe2L8331t/9/fmwbPZ6JB6eMoM=
+golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/term v0.18.0/go.mod h1:ILwASektA3OnRv7amZ1xhE/KTR+u50pbXfZ03+6Nx58=
+golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=

frontend/src/operator/webui/src/app/app.component.html

@@ -2,6 +2,14 @@
   <mat-toolbar class="cloud-android-toolbar">
     <button mat-icon-button id="device-pane-toggle" (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
     <h1 class="cloud-android-title">Cloud Android</h1>
+    <mat-slide-toggle
+      color="primary"
+      [checked]="(displaysService.addVertically$ | async)!"
+      (change)="displaysService.toggleAddVertically($event.checked)"
+      class="add-vertically-toggle"
+      >
+      Add Device Panel<br />Vertically
+    </mat-slide-toggle>
   </mat-toolbar>
 
   <mat-sidenav-container class="drawer-container">

frontend/src/operator/webui/src/app/app.component.scss

@@ -11,14 +11,33 @@
 }
 
 .cloud-android-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
   background: #073042;
   color: #eee;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
-  text-align: center;
 }
 
 .cloud-android-title {
-  margin: 0 auto;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+}
+
+.add-vertically-toggle {
+  margin-left: auto;
+  font-size: 13px;
+  line-height: 1.2;
+  color: #fff;
+
+  ::ng-deep .mdc-label {
+    color: #fff;
+    white-space: normal;
+    text-align: left;
+  }
 }
 
 .drawer-container {

frontend/src/operator/webui/src/app/app.component.ts

@@ -13,7 +13,7 @@ import {BUILD_VERSION} from '../environments/version'
 })
 export class AppComponent {
   readonly version = BUILD_VERSION;
-  constructor(private displaysService: DisplaysService) {}
+  constructor(public displaysService: DisplaysService) {}
 
   @HostListener('window:message', ['$event'])
   onWindowMessage(e: MessageEvent) {

frontend/src/operator/webui/src/app/displays.service.ts

@@ -1,5 +1,5 @@
 import {Injectable, inject} from '@angular/core';
-import {Subject, merge} from 'rxjs';
+import {BehaviorSubject, Subject, merge} from 'rxjs';
 import {map, mergeMap} from 'rxjs/operators';
 import {DeviceService} from './device.service';
 
@@ -9,6 +9,12 @@ import {DeviceService} from './device.service';
 export class DisplaysService {
   private deviceService = inject(DeviceService);
 
+  addVertically$ = new BehaviorSubject<boolean>(false);
+
+  toggleAddVertically(enabled: boolean): void {
+    this.addVertically$.next(enabled);
+  }
+
   private devices = this.deviceService.getAllDevices();
 
   private visibleDeviceIds: string[] = [];

frontend/src/operator/webui/src/app/view-pane/view-pane.component.html

@@ -1,7 +1,7 @@
 <div #viewPane>
   <ktd-grid
     class="view-pane"
-    compactType="horizontal"
+    [compactType]="(displaysService.addVertically$ | async) ? 'vertical' : 'horizontal'"
     rowHeight="1"
     scrollSpeed="4"
     [cols]="cols"

frontend/src/operator/webui/src/app/view-pane/view-pane.component.ts

@@ -237,16 +237,25 @@ export class ViewPaneComponent implements OnInit, OnDestroy, AfterViewInit {
     item: DeviceGridItem,
     layout: DeviceGridItem[]
   ): DeviceGridItem {
-    const lastMaxY =
-      layout.length !== 0 ? Math.max(...layout.map(obj => obj.y)) : 0;
-    const lastRowLayout = layout.filter(obj => obj.y === lastMaxY);
-    const lastMaxX =
-      layout.length !== 0
-        ? Math.max(...lastRowLayout.map(obj => obj.x))
-        : -item.w;
-
-    item.x = lastMaxX + item.w * 2 <= this.cols ? lastMaxX + item.w : 0;
-    item.y = lastMaxX + item.h * 2 <= this.cols ? lastMaxY : lastMaxY + item.h;
+    if (this.displaysService.addVertically$.value) {
+      const newItemY =
+        layout.length !== 0
+          ? Math.max(...layout.map(obj => obj.y + obj.h))
+          : 0;
+      item.x = 0;
+      item.y = newItemY;
+    } else {
+      const lastItemY =
+        layout.length !== 0 ? Math.max(...layout.map(obj => obj.y)) : 0;
+      const lastRowLayout = layout.filter(obj => obj.y === lastItemY);
+      const lastItemX =
+        layout.length !== 0
+          ? Math.max(...lastRowLayout.map(obj => obj.x))
+          : -item.w;
+
+      item.x = lastItemX + item.w * (1.0 / this.defaultDisplayZoom) <= this.cols ? lastItemX + item.w : 0;
+      item.y = lastItemX + item.w * (1.0 / this.defaultDisplayZoom) <= this.cols ? lastItemY : lastItemY + item.h;
+    }
 
     item.placed = true;
 
@@ -294,6 +303,7 @@ export class ViewPaneComponent implements OnInit, OnDestroy, AfterViewInit {
         }
         layoutById.set(id, item);
     });
+
     return Array.from(layoutById, ([, value]) => value);
   }, []), map(items => items.filter(item => item.visible)));