Select Git revision
graph3D.component.html
Marcos Viera authored
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>≤</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>