Commit 4d963927 authored by jose.ignacio.fagian's avatar jose.ignacio.fagian
Browse files

Mejoras zoom en componente graph3D

parent 57e5de12
This diff is collapsed.
<div class="card">
<div class="controls">
<div class="btn-group ddown" style="">
<button type="button" class="btn btn-secondary">Normal</button>
<div class="btn-group ddown">
<button
type="button"
class="btn btn-secondary"
style="min-width: 70px;"
(click)=changeZoomType()
>
{{getZoom3DTypeName(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 class="dropdown-item">Eje x</button>
<button class="dropdown-item">Eje y</button>
<button class="dropdown-item">Eje z</button>
<button
*ngFor="let type of [1,2,3,4]"
class="dropdown-item"
[disabled]="type === zoomType"
(click)=changeZoomType(type)
>
{{getZoom3DTypeName(type)}}
</button>
</div>
</div>
</div>
......@@ -17,7 +29,7 @@
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomMas()
(click)=zoomIn()
>
<i class="fa fa-plus"></i>
</button>
......@@ -27,7 +39,7 @@
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomMas()
(click)=zoomOut()
>
<i class="fa fa-minus"></i>
</button>
......
......@@ -17,4 +17,9 @@
padding: 2.5px 5px;
}
}
}
.dropdown-item:disabled{
background-color: #f7f7f7;
color: #9e9e9e;
}
\ No newline at end of file
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import * as graph3DLib from 'graph3d';
import { GHCIService } from '../../../shared/services/ghci.service';
import { formatJSON, AnimationProps } from './graph3D.helper';
import { formatJSON, AnimationProps, Zoom3DType } from './graph3D.helper';
@Component({
selector: 'graph3d-component',
......@@ -18,11 +18,12 @@ export class Graph3DComponent implements OnInit {
@ViewChild('graph3DElement')
private graph3DRef: ElementRef;
public zoomType: Zoom3DType = Zoom3DType.Normal;
private animation : AnimationProps = {
visible: false,
playing: false,
value: 0,
t:1,
speed: 1000
};
......@@ -84,4 +85,36 @@ export class Graph3DComponent implements OnInit {
this.animation.playing = !this.animation.playing;
}
public changeZoomType = (type: Zoom3DType = null) => {
if (type != null) {
this.zoomType = type;
}
else {
this.zoomType = (this.zoomType % 4) + 1;
}
graph3DLib.changeZoomType(this.zoomType);
}
public zoomIn = () => {
graph3DLib.changeZoom(true);
}
public zoomOut = () => {
graph3DLib.changeZoom(false);
}
public getZoom3DTypeName = (type: Zoom3DType) => {
switch (type) {
case Zoom3DType.Normal:
return 'Normal';
case Zoom3DType.XAxis:
return 'Eje x';
case Zoom3DType.YAxis:
return 'Eje y';
case Zoom3DType.ZAxis:
return 'Eje z';
}
}
}
......@@ -12,6 +12,13 @@ export interface AnimationProps {
visible?: boolean,
playing?: boolean,
value?: number,
speed?: number,
t: any
}
\ No newline at end of file
speed?: number
}
export enum Zoom3DType {
Normal = 1,
XAxis,
YAxis,
ZAxis,
}
{
"lockfileVersion": 1
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment