updates

Author: smasherprog

src/client/src/app/app.component.html

@@ -0,0 +1,4 @@
+<div style="position:relative;">
+    <canvas #drawingcanvas style="position:absolute;"></canvas>
+    <canvas #mousecanvas style="position:absolute;"></canvas>
+</div>

src/client/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild, ElementRef, HostListener} from '@angular/core';
 import {MatDialog} from '@angular/material';
 import {ConnectDialog} from './connect.dialog/connect.dialog';
 import { ConnectModel } from './models/connect.model';
@@ -7,11 +7,15 @@ import { CreateClientDriverConfiguration, IClientDriver, Monitor, Point, Rect, W
 
 @Component({selector : 'app-root', templateUrl : './app.component.html'})
 export class AppComponent implements OnInit {
+    @ViewChild('HTMLCanvasMouseImage_') HTMLCanvasMouseImage_:ElementRef;
+    @ViewChild('HTMLCanvasScreenImage_') HTMLCanvasScreenImage_:ElementRef;
+    OriginalImage_: HTMLImageElement;
 
     ScaleImage_ = false;
     ClientDriver_: IClientDriver;
     Socket_: WebSocket;
     Monitors = new Array<Monitor>();
+    Cursor_: ImageData;
 
     constructor(public dialog: MatDialog) {}
     public ngOnInit(): void
@@ -34,6 +38,7 @@ export class AppComponent implements OnInit {
                         .onMessage((ws: WebSocket, message: WSMessage) => { console.log('onMessage length:' + message.data.byteLength); })
                         .onDisconnection((ws: WebSocket, code: number, message: string) => {
                             console.log('onDisconnection');
+                            this.Cursor_ = null;
                             this.ScaleImage_ = false;
                             this.Monitors = new Array<Monitor>();
                             this.ClientDriver_ = null;
@@ -42,8 +47,8 @@ export class AppComponent implements OnInit {
                         })
                         .onClipboardChanged((clipstring: string) => { console.log('onClipboardChanged: ' + clipstring); })
                         .onFrameChanged((image: HTMLImageElement, monitor: Monitor, rect: Rect) => {
-
-                                        })
+                            this.HTMLCanvasScreenImage_.nativeElement.getContext("2d").drawImage(image, monitor.OffsetX + rect.Origin.X, monitor.OffsetY + rect.Origin.Y);
+                        })
                         .onMonitorsChanged((monitors: Monitor[]) => {
                             this.Monitors = monitors;
                             var width = 0;
@@ -53,17 +58,22 @@ export class AppComponent implements OnInit {
                                 if (m.Height > maxheight)
                                     maxheight = m.Height;
                             });
-
+                            this.HTMLCanvasScreenImage_.nativeElement.width = width;
+                            this.HTMLCanvasScreenImage_.nativeElement.height = maxheight;
+            
                         })
                         .onMouseImageChanged((image: ImageData) => {
-
-                                             })
+                            this.Cursor_ = image;
+                            this.HTMLCanvasMouseImage_.nativeElement.getContext("2d").putImageData(this.Cursor_, 0, 0);
+                        })
                         .onMousePositionChanged((pos: Point) => {
-
-                                                })
+                            this.HTMLCanvasMouseImage_.nativeElement.style.top = pos.Y + "px";
+                            this.HTMLCanvasMouseImage_.nativeElement.style.left = pos.X + "px";
+                        })
                         .onNewFrame((image: HTMLImageElement, monitor: Monitor, rect: Rect) => {
-
-                                    })
+                            this.HTMLCanvasScreenImage_.nativeElement.getContext("2d").drawImage(image, monitor.OffsetX, monitor.OffsetY);
+                            this.OriginalImage_ = image;
+                        })
                         .Build(this.Socket_);
 
                 this.Socket_.onerror = (ev: Event) => { console.log(ev); };
@@ -73,4 +83,47 @@ export class AppComponent implements OnInit {
             }
         });
     }
+
+    @HostListener('window:mousedown', ['$event'])
+    mousedown(ev: MouseEvent) {
+        if(this.ClientDriver_){ 
+            this.ClientDriver_.SendMouseDown(ev.button);
+        }
+    }
+    @HostListener('window:onkeydown', ['$event'])
+    onkeydown(ev: KeyboardEvent) {
+        if(this.ClientDriver_){ 
+            this.ClientDriver_.SendKeyDown(ConvertToKeyCode(ev));
+        }
+    } 
+    @HostListener('window:onkeyup', ['$event'])
+    onkeyup(ev: KeyboardEvent) {
+        if(this.ClientDriver_){ 
+            this.ClientDriver_.SendKeyUp(ConvertToKeyCode(ev));
+        }
+    } 
+    @HostListener('window:onwheel', ['$event'])
+    onwheel(ev: WheelEvent) {
+        if(this.ClientDriver_){ 
+            this.ClientDriver_.SendMouseScroll(ev.deltaY < 0 ? -1 : 1);
+        }
+    }   
+    @HostListener('window:onmove', ['$event'])
+    onmove(ev: WheelEvent) {
+        if(this.ClientDriver_){ 
+            this.ClientDriver_.SendMousePosition({ Y: ev.pageY, X: ev.pageX });
+        }
+    }   
+    @HostListener('window:onmouseup', ['$event'])
+    onmouseup(ev: MouseEvent) {
+        if(this.ClientDriver_){ 
+            this.ClientDriver_.SendMouseUp(ev.button);
+        }
+    }   
+    @HostListener('window:onwonmousedownheel', ['$event'])
+    onmousedown(ev: MouseEvent) {
+        if(this.ClientDriver_){ 
+            this.ClientDriver_.SendMouseDown(ev.button);
+        }
+    }    
 }

src/client/src/index.html

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body style="margin:0;padding:0;">
   <app-root></app-root>
 </body>
 </html>