diff --git a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
index ebbaeb876c7b511198cacfcfeff7e1b1fcd9aa02..93ff5fbb87f4c579c1b3a109235b3279d669238d 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
+++ b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
@@ -1,200 +1,208 @@
<div class="card">
- <div class="controls">
- <div class="btn-group ddown">
- <button
- type="button"
- class="btn btn-secondary"
- style="min-width: 70px;"
- (click)=changeZoomType()>
- {{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>
- <div class="dropdown-menu" ngbDropdownMenu>
- <button
- *ngFor="let type of [1,2,3,4]"
- class="dropdown-item"
- [disabled]="type === graphProps.zoomType"
- (click)=changeZoomType(type)>
- {{getZoom3DTypeName(type)}}
- </button>
- </div>
- </div>
- </div>
-
- <button
- ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} +'
- triggers="mouseenter:mouseleave"
- data-placement="bottom"
- class="btn btn-sm btn-secondary"
- (click)=zoomIn() >
- <i class="fa fa-plus"></i>
- </button>
-
- <button
- ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} -'
- triggers="mouseenter:mouseleave"
- data-placement="bottom"
- class="btn btn-sm btn-secondary"
- (click)=zoomOut() >
- <i class="fa fa-minus"></i>
- </button>
-
- <button
- ngbPopover='{{ "i18n.action.center" | translate | titleCase}}'
- triggers="mouseenter:mouseleave"
- data-placement="bottom"
- class="btn btn-sm btn-secondary"
- (click)=center() >
- <i class="fa fa-arrows"></i>
- </button>
-
- <button
- closePopoverDirective
- 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>≤</span>x<span>≤</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>≤</span>y<span>≤</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>≤</span>z<span>≤</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='{{ "i18n.action.delete" | translate | titleCase }}'
- triggers="mouseenter:mouseleave"
- data-placement="bottom"
- class="btn btn-sm btn-secondary"
- (click)=clear() >
- <i class="fa fa-trash"></i>
- </button>
-
- <button
- [ngbPopover]=popoverConfig
- closePopoverDirective
- placement="bottom"
- tiggers="click"
- class="btn btn-sm btn-secondary"
- popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
- >
- <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()">
- {{ "i18n.object.grid" | translate | titleCase }}
- </label>
-
- <div style="display: flex;">
- <span style="margin-right: 8px; align-self: center;">
- {{ "i18n.object.quality" | translate | titleCase }}:
- </span>
-
- <input
- type="number"
- class="form-control form-control-sm"
- [(ngModel)]="graphProps.quality"
- [max]="99"
- [min]="2"
- (change)="onChangeQuality()"
- style="width: 55px;"
- />
- </div>
- </div>
- </ng-template>
-
-
- </div>
-
- <div class="card-block contenedor-canvas" >
- <animation-control
- [minSpeed]="60"
- [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>
-
+ <div class="controls">
+ <div class="btn-group ddown">
+ <button
+ type="button"
+ class="btn btn-secondary"
+ style="min-width: 70px"
+ (click)="changeZoomType()"
+ >
+ {{ 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>
+ <div class="dropdown-menu" ngbDropdownMenu>
+ <button
+ *ngFor="let type of [1, 2, 3, 4]"
+ class="dropdown-item"
+ [disabled]="type === graphProps.zoomType"
+ (click)="changeZoomType(type)"
+ >
+ {{ getZoom3DTypeName(type) }}
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <button
+ ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
+ triggers="mouseenter:mouseleave"
+ data-placement="bottom"
+ class="btn btn-sm btn-secondary"
+ (click)="zoomIn()"
+ >
+ <i class="fa fa-plus"></i>
+ </button>
+
+ <button
+ ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
+ triggers="mouseenter:mouseleave"
+ data-placement="bottom"
+ class="btn btn-sm btn-secondary"
+ (click)="zoomOut()"
+ >
+ <i class="fa fa-minus"></i>
+ </button>
+
+ <button
+ ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
+ triggers="mouseenter:mouseleave"
+ data-placement="bottom"
+ class="btn btn-sm btn-secondary"
+ (click)="center()"
+ >
+ <i class="fa fa-arrows"></i>
+ </button>
+
+ <button
+ closePopoverDirective
+ 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>≤</span>x<span>≤</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>≤</span>y<span>≤</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>≤</span>z<span>≤</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="{{ 'i18n.action.delete' | translate | titleCase }}"
+ triggers="mouseenter:mouseleave"
+ data-placement="bottom"
+ class="btn btn-sm btn-secondary"
+ (click)="clear()"
+ >
+ <i class="fa fa-trash"></i>
+ </button>
+
+ <button
+ [ngbPopover]="popoverConfig"
+ closePopoverDirective
+ placement="bottom"
+ tiggers="click"
+ class="btn btn-sm btn-secondary"
+ popoverTitle="{{ 'i18n.object.settings' | translate | titleCase }}"
+ >
+ <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()"
+ />
+ {{ "i18n.object.grid" | translate | titleCase }}
+ </label>
+
+ <div style="display: flex">
+ <span style="margin-right: 8px; align-self: center">
+ {{ "i18n.object.quality" | translate | titleCase }}:
+ </span>
+
+ <input
+ type="number"
+ class="form-control form-control-sm"
+ [(ngModel)]="graphProps.quality"
+ [max]="99"
+ [min]="2"
+ (change)="onChangeQuality()"
+ style="width: 55px"
+ />
+ </div>
+ </div>
+ </ng-template>
+ </div>
+
+ <div class="card-block contenedor-canvas">
+ <animation-control
+ [minSpeed]="60"
+ [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>
</div>
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts
index 6b515f740348fa20dffc714a5a7b681afeb14b62..0b9ba75b141f1709ce55e08b00dbeb25fb119530 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts
+++ b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts
@@ -33,6 +33,16 @@ export class Graph3DComponent implements AfterViewInit {
private translateService: any;
private titlecasePipe: any;
+ /**
+ * Diccionario de traducciones para los tipos de Zoom.
+ */
+ private translationTypes = {
+ [Zoom3DType.Normal]: "i18n.object.normal",
+ [Zoom3DType.XAxis]: "i18n.object.axis",
+ [Zoom3DType.YAxis]: "i18n.object.axis",
+ [Zoom3DType.ZAxis]: "i18n.object.axis",
+ };
+
@ViewChild("graph3DElement", { static: true })
private graph3DRef: ElementRef;
@@ -198,29 +208,20 @@ export class Graph3DComponent implements AfterViewInit {
};
public getZoom3DTypeName = (type: Zoom3DType) => {
- switch (type) {
- case Zoom3DType.Normal:
- return this.titlecasePipe.transform(
- this.translateService.get("i18n.object.normal").value
- );
- case Zoom3DType.XAxis:
- return (
- this.titlecasePipe.transform(
- this.translateService.get("i18n.object.axis").value
- ) + " x"
- );
- case Zoom3DType.YAxis:
- return (
- this.titlecasePipe.transform(
- this.translateService.get("i18n.object.axis").value
- ) + " y"
- );
- case Zoom3DType.ZAxis:
- return (
- this.titlecasePipe.transform(
- this.translateService.get("i18n.object.axis").value
- ) + " z"
- );
+ let translation: string;
+
+ this.translateService.get(this.translationTypes[type]).subscribe((res) => {
+ translation = res;
+ });
+
+ if (type == 2) {
+ translation += " x";
+ } else if (type == 3) {
+ translation += " y";
+ } else if (type == 4) {
+ translation += " z";
}
+
+ return this.titlecasePipe.transform(translation);
};
}