Skip to content
Snippets Groups Projects
Select Git revision
  • dja
  • dja_various_fixes
  • dja_differentiate_same_user_connections
  • dja_fix_bugs
  • dja_guest
  • dja_guests
  • dja_sign_out_without_race_conditions
  • dja_subgroups
  • dua_subgroups
  • dja_groups_2
  • dja_groups
  • dja_heroku_11_7_2024
  • dja_share_files
  • dja_execute_files_aux_2
  • dja_execute_files_aux
  • dja_execute_files
  • dja_files_page
  • dja-create-main-button
  • master default
  • feature/aristas-metadata-vertices
  • v2.0
  • v1.0
22 results

graph3D.component.html

Blame
  • graph3D.component.html 5.12 KiB
    <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>