Skip to content
Snippets Groups Projects
Select Git revision
  • d517c3e400807dc6e45fd7078e98ace9380717a2
  • master default
  • 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
  • feature/aristas-metadata-vertices
  • v2.0
  • v1.0
23 results

graph3D.helper.ts

Blame
  • graph2D.component.html 5.36 KiB
    <!-- Buttons Controls -->
    <div class="buttons-control">
    	<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} +'
    			class="btn btn-sm btn-secondary btn-zoom-increase"
    			data-placement="bottom"
    			triggers="mouseenter:mouseleave"
    			(click)=zoomIn() >
    		<i class="fa fa-plus"></i>
    	</button>
    	<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} -'
    			class="btn btn-sm btn-secondary btn-zoom-decrease"
    			data-placement="bottom"
    			triggers="mouseenter:mouseleave"
    			(click)=zoomOut() >
    		<i class="fa fa-minus"></i>
    	</button>
    	<button ngbPopover='{{ "i18n.action.center" | translate | titleCase }}'
    			class="btn btn-sm btn-secondary btn-zoom-center"
    			data-placement="bottom"
    			triggers="mouseenter:mouseleave"
    			(click)="recenterPlot()" >
    		<i class="fa fa-arrows"></i>
    	</button>
    	<button ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'
    			class="btn btn-sm btn-secondary btn-trash"
    			data-placement="bottom"
    			triggers="mouseenter:mouseleave"
    			(click)="cleanPlot()" >
    		<i class="fa fa-trash"></i>
    	</button>
    	<button ngbPopover='{{ "i18n.action.download" | translate | titleCase }} PNG'
    			class="btn btn-sm btn-secondary btn-download"
    			data-placement="bottom"
    			triggers="mouseenter:mouseleave"
    			(click)=exportPlot() >
    		<i class="fa fa-download"></i>
    	</button>
    	<button id="settings"
    			class="btn btn-sm btn-secondary btn-setting"
    			placement="bottom"
    			closePopoverDirective
    			[ngbPopover]=popoverCanvas
    			popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
    			#popover="ngbPopover"
    			tiggers="click">
    		<i class="fa fa-gear"></i>
    	</button>
    </div>
    
    <div class="card">
        <div class="card-block contenedor-canvas" >
    		<!-- Download Link -->
    		<a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none">
    			Download Canvas
    		</a>
    
    		<!-- Settings Popover Content -->
    		<ng-template #popoverCanvas>
    			<div class="form-group settings-popover-content">
    				<div class="chart-controls setting-section">
    					<label>
    						<input 	
    							type="checkbox" 
    							name="grid"
    							class="form-control form-control-sm"
    							[checked]= settings.grid
    							(click)="toggleGrid()">
    							{{ "i18n.object.grid" | translate | titleCase }}
    					</label>
    					<label>
    						<input 	
    							type="checkbox"
    							name="axis"
    							class="form-control form-control-sm"
    							[checked]= settings.axis 
    							(click)="toggleAxis()">
    							{{ "i18n.object.axes" | translate | titleCase }}
    					</label>
    					<!-- <label>
    						<input 	
    							type="checkbox"
    							name="tip"
    							class="form-control form-control-sm"
    							[checked]= settings.tip
    							(click)="toggleTip()">
    							{{ "i18n.object.tip" | translate | titleCase }}
    					</label> -->
    					<label [class.disabled]="funciones.length === 0">
    						<input
    							type="checkbox"
    							[attr.disabled]="funciones.length === 0 ? '' : null"
    							[checked]=animation.boton
    							(click)="multiGraf(value)">
    							{{ "i18n.msg.figure.multiPlot" | translate | titleCase }}
    					</label>
    				</div>
    				<hr>
    				<div class="zoom-control setting-section">
    					<div [class.disabled]="funciones.length === 0" style="display: flex;">
    						<span style="margin-right: 8px; align-self: center;">
    							{{ "i18n.action.zoom" | translate | titleCase }}
    						</span>
    						<input 
    							type="number" 
    							class="form-control form-control-sm"
    							[attr.disabled]="funciones.length === 0 ? '' : null"
    							[(ngModel)]="animation.zoo"
    							[max]="1000000"
    							[min]="8"
    							(change)="setZoom()"
    							style="width: 70px;"
    						/>
    					</div>
    				</div>
    				<hr>
    				<div class="animation-controls setting-section"
    					[class.disabled]="animation.data.length === 0">
    					<label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label>
    					<div>
    						<button class="btn btn-sm btn-secondary"
    								[attr.disabled]="animation.data.length === 0 ? '' : null"
    								(click)='decreaseSpeed()'>
    							<i class="fa fa-minus"></i>
    						</button>
    						<button class="btn btn-sm btn-secondary"
    								[attr.disabled]="animation.data.length === 0 ? '' : null"
    								(click)='restoreSpeed()'>
    							<span>1x</span>
    						</button>
    						<button class="btn btn-sm btn-secondary"
    								[attr.disabled]="animation.data.length === 0 ? '' : null"
    								(click)='increaseSpeed()'>
    							<i class="fa fa-plus"></i>
    						</button>
    						<span class="speed-value">
    							{{animation.speedX | number:'1.0'}}x
    						</span>
    					</div>
    				</div>
    			</div>
            </ng-template>
    		
    		<!-- Animation -->
    		<div class="animation" *ngIf="animation.data.length>0">
    			<button class="btn btn-sm btn-secondary btn-play"
    					data-placement="bottom"
    					*ngIf="!animation.playing"
    					(click)="runAnimation()" >
    				<i class="fa fa-play"></i>
    			</button>
    			<button class="btn btn-sm btn-secondary btn-pause"
    					data-placement="bottom"
    					*ngIf="animation.playing"
    					(click)="pauseAnimation()" >
    				<i class="fa fa-pause"></i>
    			</button>
    
    			<ngb-progressbar
    				class="progressbar"
    				type="info"
    				[value]="((animation.currentFrame+1)/animation.data.length)*100">
    			</ngb-progressbar>
    		</div>
    
    		<!-- Graph Container -->
    		<div #graph2DContainer id="graph2D-container">
    			
            </div>
        </div>
    </div>