Mejoras zoom en componente graph3D

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

 <div class="card">
     <div class="controls">
-			<div class="btn-group ddown" style="">
-				<button type="button" class="btn btn-secondary">Normal</button>
+			<div class="btn-group ddown">
+				<button 
+					type="button" 
+					class="btn btn-secondary"
+					style="min-width: 70px;"
+					(click)=changeZoomType()
+				>
+					{{getZoom3DTypeName(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>
 					<div class="dropdown-menu" ngbDropdownMenu>
-						<button class="dropdown-item">Eje x</button>
-						<button class="dropdown-item">Eje y</button>
-						<button class="dropdown-item">Eje z</button>
+						<button 
+							*ngFor="let type of [1,2,3,4]" 
+							class="dropdown-item"
+							[disabled]="type === zoomType"
+							(click)=changeZoomType(type)
+						>
+							{{getZoom3DTypeName(type)}}
+						</button>
 					</div>
 				</div>
 			</div> 
@@ -17,7 +29,7 @@
 				triggers="mouseenter:mouseleave" 
 				data-placement="bottom" 
 				class="btn btn-sm btn-secondary" 
-				(click)=zoomMas() 
+				(click)=zoomIn() 
 			>
 				<i class="fa fa-plus"></i>
 			</button>
@@ -27,7 +39,7 @@
 				triggers="mouseenter:mouseleave" 
 				data-placement="bottom" 
 				class="btn btn-sm btn-secondary" 
-				(click)=zoomMas() 
+				(click)=zoomOut() 
 			>
 				<i class="fa fa-minus"></i>
 			</button>

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

@@ -17,4 +17,9 @@
 			padding: 2.5px 5px;
 		}
 	}
+}
+
+.dropdown-item:disabled{
+	background-color: #f7f7f7;
+	color: #9e9e9e;
 }
\ 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 } from './graph3D.helper';
+import { formatJSON, AnimationProps, Zoom3DType } from './graph3D.helper';
 
 @Component({
   selector: 'graph3d-component',
@@ -18,11 +18,12 @@ export class Graph3DComponent implements OnInit {
   @ViewChild('graph3DElement') 
   private graph3DRef: ElementRef;
 
+  public zoomType: Zoom3DType = Zoom3DType.Normal;
+
   private animation : AnimationProps = {
     visible: false,
     playing: false,
     value: 0,
-    t:1,
     speed: 1000
   };
 
@@ -84,4 +85,36 @@ export class Graph3DComponent implements OnInit {
     
     this.animation.playing = !this.animation.playing;
   }
+
+  public changeZoomType = (type: Zoom3DType = null) => {
+    if (type != null) {
+      this.zoomType = type;
+    } 
+    else {
+      this.zoomType = (this.zoomType % 4) + 1;
+    }
+
+    graph3DLib.changeZoomType(this.zoomType);
+  }
+
+  public zoomIn = () => {
+    graph3DLib.changeZoom(true);
+  }
+
+  public zoomOut = () => {
+    graph3DLib.changeZoom(false);
+  }
+  
+  public getZoom3DTypeName = (type: Zoom3DType) => {
+    switch (type) {
+      case Zoom3DType.Normal:
+        return 'Normal';
+      case Zoom3DType.XAxis:
+        return 'Eje x';
+      case Zoom3DType.YAxis:
+        return 'Eje y';
+      case Zoom3DType.ZAxis:
+        return 'Eje z';
+    }
+  }
 }

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

@@ -12,6 +12,13 @@ export interface AnimationProps {
 	visible?: boolean,
 	playing?: boolean,
 	value?: number,
-	speed?: number,
-	t: any
-}
+	speed?: number
+}
+
\ No newline at end of file
+export enum Zoom3DType {
+	Normal = 1,
+	XAxis,
+	YAxis,
+	ZAxis,
+}
+

package-lock.json

+{
+  "lockfileVersion": 1
+}