feat: allow KVM fullscreen

Author: Mike

CHANGELOG.md

@@ -1,18 +1,15 @@
 # [9.0.0](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/compare/v8.0.5...v9.0.0) (2025-01-07)
 
-
 ### chore
 
-* update build tasks, package.json and changelog ([#1668](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/issues/1668)) ([17294a2](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/commit/17294a28b6e5eff874dfef7cc9c7edf67fc3195a))
-
-
-* chore!: address incorrectly released breaking change ([b3a5414](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/commit/b3a541477b4c71795ff0754f501df3f59b61a4a1))
+- update build tasks, package.json and changelog ([#1668](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/issues/1668)) ([17294a2](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/commit/17294a28b6e5eff874dfef7cc9c7edf67fc3195a))
 
+- chore!: address incorrectly released breaking change ([b3a5414](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/commit/b3a541477b4c71795ff0754f501df3f59b61a4a1))
 
 ### BREAKING CHANGES
 
-* move to angular 19
-*   - build(deps): bump angular 18 to 19
+- move to angular 19
+- - build(deps): bump angular 18 to 19
 
 ## [8.0.6](https://github.com/open-amt-cloud-toolkit/ui-toolkit-angular/compare/v8.0.5...v8.0.6) (2025-01-07)
 

kvm/src/kvm.component.css

@@ -2,3 +2,7 @@
   max-height: 80%;
   max-width: 100%;
 }
+
+canvas.fullscreen {
+  height: 100vh !important;
+}

kvm/src/kvm.component.ts

@@ -11,7 +11,12 @@ import {
   viewChild,
   input,
   output,
-  EventEmitter
+  EventEmitter,
+  inject,
+  Renderer2,
+  computed,
+  model,
+  effect
 } from '@angular/core'
 import {
   AMTDesktop,
@@ -32,9 +37,11 @@ import { throttleTime } from 'rxjs/operators'
   styleUrls: ['./kvm.component.css']
 })
 export class KVMComponent implements OnInit, AfterViewInit, OnDestroy {
+  renderer = inject(Renderer2)
   readonly canvas = viewChild<ElementRef>('canvas')
   readonly device = viewChild.required<string>('device')
   public context!: CanvasRenderingContext2D
+  public isFullscreen = input(false)
 
   //setting a width and height for the canvas
 
@@ -45,8 +52,9 @@ export class KVMComponent implements OnInit, AfterViewInit, OnDestroy {
   public deviceId = input('')
 
   readonly deviceStatus = output<number>()
-  readonly deviceConnection = input<EventEmitter<boolean>>(new EventEmitter<boolean>())
-  readonly selectedEncoding = input<EventEmitter<number>>(new EventEmitter<number>())
+  readonly deviceConnection = input(new EventEmitter<boolean>())
+  readonly selectedEncoding = input(new EventEmitter<number>())
+
   module: AMTDesktop | null
   redirector: AMTKvmDataRedirector | null
   dataProcessor!: IDataProcessor | null
@@ -61,6 +69,11 @@ export class KVMComponent implements OnInit, AfterViewInit, OnDestroy {
     { value: 2, viewValue: 'RLE 16' }
   ]
 
+  constructor() {
+    effect(() => {
+      this.toggleFullscreen()
+    })
+  }
   ngOnInit(): void {
     this.deviceConnection().subscribe((data: boolean) => {
       if (data) {
@@ -79,6 +92,26 @@ export class KVMComponent implements OnInit, AfterViewInit, OnDestroy {
     this.init()
   }
 
+  toggleFullscreen(): void {
+    const canvasElement = this.canvas()?.nativeElement
+    if (!canvasElement) return
+
+    if (this.isFullscreen()) {
+      if (canvasElement.requestFullscreen) {
+        canvasElement.requestFullscreen()
+      }
+      this.renderer.addClass(canvasElement, 'fullscreen')
+    } else {
+      if (document.exitFullscreen && document.fullscreenElement != null) {
+        document.exitFullscreen()
+      }
+      this.renderer.removeClass(canvasElement, 'fullscreen')
+    }
+    if (this.mouseHelper != null) {
+      this.mouseHelper.resetOffsets()
+    }
+  }
+
   instantiate(): void {
     const canvas = this.canvas()
     this.context = canvas?.nativeElement.getContext('2d')

package-lock.json

@@ -18,7 +18,7 @@
     "e2e": "ng e2e"
   },
   "peerDependencies": {
-    "@open-amt-cloud-toolkit/ui-toolkit": "~3.2.9",
+    "@open-amt-cloud-toolkit/ui-toolkit": "^3.3.0",
     "@xterm/xterm": "^5.5.0"
   },
   "devDependencies": {
@@ -29,9 +29,9 @@
     "@angular/cdk": "^19.0.4",
     "@angular/cli": "^19.0.6",
     "@angular/common": "^19.0.5",
-    "@angular/core": "^19.0.5",
     "@angular/compiler": "^19.0.5",
     "@angular/compiler-cli": "^19.0.5",
+    "@angular/core": "^19.0.5",
     "@angular/platform-browser": "^19.0.5",
     "@angular/platform-browser-dynamic": "^19.0.5",
     "@types/jasmine": "~5.1.5",
@@ -47,14 +47,14 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-junit-reporter": "^2.0.1",
+    "ng-packagr": "^19.0.1",
     "prettier-config-standard": "^7.0.0",
     "prettier-plugin-multiline-arrays": "^3.0.6",
     "rxjs": "~7.8.1",
     "ts-node": "~10.9.2",
     "tslib": "^2.8.1",
-    "ng-packagr": "^19.0.1",
-    "zone.js": "~0.15.0",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.15.0"
+    "typescript-eslint": "^8.15.0",
+    "zone.js": "~0.15.0"
   }
 }