Implementacion de barra de controles

Frontend Angular 4/src/app/app.module.ts

@@ -7,10 +7,11 @@ import { AppComponent } from './app.component';
 import { AuthGuard } from './shared/guards/auth.guard';
 import { SessionService } from './shared/services/session.service';
 import { NotificacionService } from './shared/services/notificacion.service';
-import {NotificacionModule} from './notificacion/notificacion.module'
+import {NotificacionModule} from './notificacion/notificacion.module';
+
 @NgModule({
     declarations: [
-        AppComponent,
+        AppComponent
     ],
     imports: [
         NotificacionModule,

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html

@@ -7,7 +7,7 @@
 				style="min-width: 70px;"
 				(click)=changeZoomType()
 			>
-					{{getZoom3DTypeName(zoomType)}}
+				{{getZoom3DTypeName(graphProps.zoomType)}}
 			</button>
 			<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
 				<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
@@ -15,7 +15,7 @@
 					<button 
 						*ngFor="let type of [1,2,3,4]" 
 						class="dropdown-item"
-							[disabled]="type === zoomType"
+						[disabled]="type === graphProps.zoomType"
 						(click)=changeZoomType(type)
 					>
 						{{getZoom3DTypeName(type)}}
@@ -49,46 +49,154 @@
 			triggers="mouseenter:mouseleave" 
 			data-placement="bottom" 
 			class="btn btn-sm btn-secondary" 
-				(click)=zoomMas() 
+			(click)=center() 
 		>
 			<i class="fa fa-arrows"></i>
 		</button>
 
+		<button 
+			closePopoverOnOutsideClick
+			class="btn btn-sm btn-secondary" 
+			placement="bottom" 
+			[ngbPopover]=popoverAxesSize
+			popoverTitle="Rango de ejes"
+			#popover="ngbPopover"
+			tiggers="click"
+		>
+			<i class="fa fa-arrows-h"></i>
+		</button>
+		<ng-template #popoverAxesSize>
+			<div class="axes-size">
+				<div class="axe">
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.xMin"
+						[max]="graphProps.range.xMax-1"
+						[min]="-99" 
+						(change)="onChangeAxesSize('xMin', $event)"
+					/>
+					<div class="less-than">
+						<span>&#8804;</span>x<span>&#8804;</span>
+					</div>
+					
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.xMax"
+						[max]="99"
+						[min]="graphProps.range.xMin+1" 
+						(change)="onChangeAxesSize('xMax', $event)"
+					/>
+				</div>
+
+				<div class="axe">
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.yMin"
+						[max]="graphProps.range.yMax-1"
+						[min]="-99" 
+						(change)="onChangeAxesSize('yMin', $event)"
+					/>
+					<div class="less-than">
+						<span>&#8804;</span>y<span>&#8804;</span>
+					</div>
+					
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.yMax"
+						[max]="99"
+						[min]="graphProps.range.yMin+1" 
+						(change)="onChangeAxesSize('yMax', $event)"
+					/>
+				</div>
+
+				<div class="axe">
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.zMin"
+						[max]="graphProps.range.zMax-1"
+						[min]="-99" 
+						(change)="onChangeAxesSize('zMin', $event)"
+					/>
+					<div class="less-than">
+						<span>&#8804;</span>z<span>&#8804;</span>
+					</div>
+					
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.zMax"
+						[max]="99"
+						[min]="graphProps.range.zMin+1" 
+						(change)="onChangeAxesSize('zMax', $event)"
+					/>
+				</div>
+			</div>
+		</ng-template>
+		
+
 		<button 
 			ngbPopover="Borrar"  
 			triggers="mouseenter:mouseleave" 
 			data-placement="bottom" 
 			class="btn btn-sm btn-secondary" 
-				(click)=zoomMas() 
+			(click)=clear() 
 		>
 			<i class="fa fa-trash"></i>
 		</button>
 
 		<button 
-			ngbPopover="Configuración"  
-			triggers="mouseenter:mouseleave" 
-			data-placement="bottom" 
+		[ngbPopover]=popoverConfig
+			closePopoverOnOutsideClick
+			placement="bottom" 
+		
+			tiggers="click"
 			class="btn btn-sm btn-secondary" 
-			(click)=zoomMas() 
+			popoverTitle="Configuración"
 		>
 			<i class="fa fa-gear"></i>
 		</button>
 
+		<ng-template #popoverConfig>
+			<div style="width: 140px;">
+				<label class="d-block">
+					<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()">
+					Mostrar grilla
+				</label>
+
+				<div style="display: flex;">
+					<span style="margin-right: 8px; align-self: center;">
+						Quality:
+					</span>
+
+					<input 
+						type="number" 
+						style="width: 55px;"
+						class="form-control form-control-sm" 
+					/>
+				</div>
+			</div>
+		</ng-template>
+
+	
 	</div>
 		
 	<div class="card-block contenedor-canvas" >
 		<animation-control
 			[minSpeed]="60"
-			[value]="animation.value"
-			[speed]="animation.speed"
-			[visible]="animation.visible"
-			[playing]="animation.playing"
+			[value]="animationProps.value"
+			[speed]="animationProps.speed"
+			[visible]="animationProps.visible"
+			[playing]="animationProps.playing"
 			[onChangeSpeed]="onAnimationChangeSpeed"
 			[onTogglePlay]="onAnimationTogglePlay"
 		>
 		</animation-control>
 		
-		
 		<div #graph3DElement style="width: 100%; height: 100%;">
 		</div>
 	</div>     

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss

@@ -14,7 +14,25 @@
 		vertical-align: bottom;
 
 		button {
-			padding: 2.5px 5px;
+			padding: 2.5px 8px 2.5px 3px;
+		}
+	}
+
+	.axes-size {
+		width: 165px;
+
+		.axe {
+			display: flex;
+
+			&:not(:last-child) {
+				margin-bottom: 6px;
+			}
+
+			.less-than {
+				padding: 0 2.5px 0 5px;
+				font-size: 17px; 
+				letter-spacing: 4px;
+			}
 		}
 	}
 }
@@ -23,3 +41,7 @@
 	background-color: #f7f7f7;
 	color: #9e9e9e;
 }
+
+.d-block{
+	display: block;
+}
\ No newline at end of file

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts

 import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
 import * as graph3DLib from 'graph3d';
 import { GHCIService } from '../../../shared/services/ghci.service';
-import { formatJSON, AnimationProps, Zoom3DType } from './graph3D.helper';
+import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps } from './graph3D.helper';
 
 @Component({
   selector: 'graph3d-component',
@@ -18,16 +18,17 @@ export class Graph3DComponent implements OnInit {
   @ViewChild('graph3DElement') 
   private graph3DRef: ElementRef;
 
-  public zoomType: Zoom3DType = Zoom3DType.Normal;
+  private graphProps : GraphProps = Default_GraphProps;
   
-  private animation : AnimationProps = {
+  private animationProps : AnimationProps = {
     visible: false,
     playing: false,
     value: 0,
     speed: 1000
   };
   
-  constructor(private ghciService: GHCIService, private zone: NgZone) {
+
+  constructor(ghciService: GHCIService, private zone: NgZone) {
     this.ghciServiceSub = ghciService.messages.subscribe(
       message => {
         if (message.tipo == "canvas3D") {
@@ -38,12 +39,13 @@ export class Graph3DComponent implements OnInit {
         else if (message.tipo == "animacion3D") {
           const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame)));
 
-          this.animation.visible = true;
-          this.animation.playing = true;
-          this.animation.value = 0;
+          this.animationProps.visible = true;
+          this.animationProps.playing = true;
+          this.animationProps.value = 0;
 
+          graph3DLib.clear();
           graph3DLib.initializeAnimation(frames, 
-            (value) => this.animation.value = value
+            (value) => this.animationProps.value = value
           );
 
           graph3DLib.playAnimation();
@@ -53,9 +55,9 @@ export class Graph3DComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.zone.runOutsideAngular(() => {
+  //  this.zone.runOutsideAngular(() => {
       graph3DLib.initialize(this.graph3DRef.nativeElement);
-    })
+    //})
   }
 
   ngOnDestroy() {
@@ -71,30 +73,52 @@ export class Graph3DComponent implements OnInit {
   }
 
   onAnimationChangeSpeed = (value) => {
-    this.animation.speed = parseInt(value);
+    this.animationProps.speed = parseInt(value);
     graph3DLib.changeSpeedAnimation(parseInt(value));
   }
 
   onAnimationTogglePlay = () => {
-    if (this.animation.playing) {
+    if (this.animationProps.playing) {
       graph3DLib.pauseAnimation();
     }
     else {
       graph3DLib.playAnimation();
     }
     
-    this.animation.playing = !this.animation.playing;
+    this.animationProps.playing = !this.animationProps.playing;
   }
 
   public changeZoomType = (type: Zoom3DType = null) => {
     if (type != null) {
-      this.zoomType = type;
+      this.graphProps.zoomType = type;
     } 
     else {
-      this.zoomType = (this.zoomType % 4) + 1;
+      this.graphProps.zoomType = (this.graphProps.zoomType % 4) + 1;
+    }
+
+    graph3DLib.changeZoomType(this.graphProps.zoomType);
+  }
+
+  public changeAxesVisibility = () => {
+    this.graphProps.showAxes = !this.graphProps.showAxes;
+    graph3DLib.showAxes(this.graphProps.showAxes);
+  }
+
+  public onChangeAxesSize = (v, event) => {
+    let value = this.graphProps.range[v];
+
+    const min = parseInt(event.target.min);
+    const max = parseInt(event.target.max);
+
+    if (value < min) {
+      this.graphProps.range[v] = min;
+    } 
+    
+    if (value > max) {
+      this.graphProps.range[v] = max;
     }
     
-    graph3DLib.changeZoomType(this.zoomType);
+    graph3DLib.changeAxesSize(this.graphProps.range)
   }
 
   public zoomIn = () => {
@@ -105,6 +129,18 @@ export class Graph3DComponent implements OnInit {
     graph3DLib.changeZoom(false);
   }
   
+  public clear = () => {
+    this.animationProps.visible = false;
+
+    graph3DLib.clear();
+  }
+  
+  public center = () => {
+    this.graphProps = Default_GraphProps;
+
+    graph3DLib.reset();
+  }
+
   public getZoom3DTypeName = (type: Zoom3DType) => {
     switch (type) {
       case Zoom3DType.Normal:

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.helper.ts

@@ -8,6 +8,7 @@ export function formatJSON(jsonString: string) : string {
 	)
 }
 
+
 export interface AnimationProps {
 	visible?: boolean,
 	playing?: boolean,
@@ -22,3 +23,29 @@ export enum Zoom3DType {
 	ZAxis,
 }
 
+export interface GraphProps {
+	zoomType?: Zoom3DType,
+	showAxes?: boolean,
+	range: {
+		xMin?: number,
+		xMax?: number,
+		yMin?: number,
+		yMax?: number,
+		zMin?: number,
+		zMax?: number
+	}
+}
+
+export const Default_GraphProps : GraphProps = {
+	zoomType: Zoom3DType.Normal,
+	showAxes: true,
+	range: {
+		xMin: -10,
+		xMax: 10,
+		yMin: -10,
+		yMax: 10,
+		zMin: -10,
+		zMax: 10
+	}
+}
+

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.module.ts

@@ -5,12 +5,15 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule } from '@angular/forms';
 import { Graph3DComponent } from './graph3D.component';
 import { AnimationControlComponent } from '../animation-control/animation-control.component';
+import { ClosePopoverOnOutsideClickDirective } from '../../../shared/utils/closePopoverDirective';
+
 
 @NgModule({
     imports: [FormsModule, RouterModule, CommonModule, NgbModule],
     declarations: [
         AnimationControlComponent, 
-        Graph3DComponent
+        Graph3DComponent,
+        ClosePopoverOnOutsideClickDirective
     ],
     entryComponents: [
         AnimationControlComponent

Frontend Angular 4/src/app/shared/config.ts

@@ -5,5 +5,9 @@
 //export const GHCI_URL = 'ws://localhost:9090/endpoint';
 
 //Configuracion dinamica pensando en servidor con ip dinamica
-export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
-export const GHCI_URL = window.location.protocol == 'http:'?  'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
+
+// export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
+// export const GHCI_URL = window.location.protocol == 'http:'?  'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
+
+export const SERVER = 'http://192.168.95.3:9090';
+export const GHCI_URL = 'ws://192.168.95.3:9090/endpoint';

Frontend Angular 4/src/app/shared/utils/closePopoverDirective.ts

+import { Directive, HostListener, ElementRef, ComponentRef } from '@angular/core';
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPopoverWindow } from '@ng-bootstrap/ng-bootstrap/popover/popover';
+
+@Directive({
+  selector: '[closePopoverOnOutsideClick][ngbPopover]'
+})
+export class ClosePopoverOnOutsideClickDirective {
+
+  constructor(private elementRef: ElementRef,
+              private ngbPopover: NgbPopover) {
+
+  }
+
+  @HostListener('document:click', ['$event'])
+  private documentClicked(event: MouseEvent): void {
+
+    // Popover is open
+    if (this.ngbPopover && this.ngbPopover.isOpen()) {
+
+      // Not clicked on self element
+      if (!this.elementRef.nativeElement.contains(event.target)) {
+
+        // Hacking typescript to access private member
+        const popoverWindowRef: ComponentRef<NgbPopoverWindow> = (this.ngbPopover as any)._windowRef;
+
+        // If clicked outside popover window
+        if (!popoverWindowRef.location.nativeElement.contains(event.target)) {
+          this.ngbPopover.close();
+        }
+      }
+    }
+  }
+}
\ No newline at end of file