graph3D.component.html

<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>&#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='{{ "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>