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

fix 3d chart dissapear bug, fix click outside directive

parent 4dc37e1e
This diff is collapsed.
...@@ -3611,7 +3611,8 @@ ...@@ -3611,7 +3611,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -3632,12 +3633,14 @@ ...@@ -3632,12 +3633,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -3652,17 +3655,20 @@ ...@@ -3652,17 +3655,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -3779,7 +3785,8 @@ ...@@ -3779,7 +3785,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -3791,6 +3798,7 @@ ...@@ -3791,6 +3798,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -3805,6 +3813,7 @@ ...@@ -3805,6 +3813,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -3812,12 +3821,14 @@ ...@@ -3812,12 +3821,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -3836,6 +3847,7 @@ ...@@ -3836,6 +3847,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -3916,7 +3928,8 @@ ...@@ -3916,7 +3928,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -3928,6 +3941,7 @@ ...@@ -3928,6 +3941,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -4013,7 +4027,8 @@ ...@@ -4013,7 +4027,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -4049,6 +4064,7 @@ ...@@ -4049,6 +4064,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -4068,6 +4084,7 @@ ...@@ -4068,6 +4084,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -4111,12 +4128,14 @@ ...@@ -4111,12 +4128,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
...@@ -4390,13 +4409,6 @@ ...@@ -4390,13 +4409,6 @@
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
"dev": true "dev": true
}, },
"graph3D": {
"version": "git://github.com/ifagian/graph3D.git#79bb55dedbaf4e3b853f138acf4409b6bbcb4d07",
"from": "git://github.com/ifagian/graph3D.git#master",
"requires": {
"three": "^0.90.0"
}
},
"handle-thing": { "handle-thing": {
"version": "1.2.5", "version": "1.2.5",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
...@@ -10297,11 +10309,6 @@ ...@@ -10297,11 +10309,6 @@
"execa": "^0.7.0" "execa": "^0.7.0"
} }
}, },
"three": {
"version": "0.90.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.90.0.tgz",
"integrity": "sha512-sCTgOp/0ITLy0bsUoNeUROq2Tt1G0+StfRBs9ljFTENRF5JkKlTjZ+RWSH6qyq6O3c5fDKRupfuqZE/+LbETiA=="
},
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
......
{ {
"name": "sb-admin-angular4-bootstrap4", "name": "matefun",
"version": "1.0.0", "version": "2.0.1",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="container-fluid" style=" padding-left: 0px; padding-right: 0px; margin-top: -13px; margin-left: -6px; margin-right: -6px;"> <div class="container-fluid" style=" padding-left: 0px; padding-right: 0px; margin-top: -13px; margin-left: -6px; margin-right: -6px;">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<ngb-tabset [destroyOnHide]=false> <ngb-tabset [destroyOnHide]=false (tabChange)="onChangeTab($event)">
<ngb-tab id="ProgramBtn"title="Programa"> <ngb-tab id="ProgramBtn"title="Programa">
<ng-template ngbTabContent> <ng-template ngbTabContent>
...@@ -129,5 +129,6 @@ ...@@ -129,5 +129,6 @@
</div> </div>
</div> </div>
<span class="version">v{{version}}</span>
</div> </div>
...@@ -3,3 +3,8 @@ ...@@ -3,3 +3,8 @@
height: 100% !important; height: 100% !important;
} }
.version {
position: absolute;
font-size: 11px;
right: 0;
}
\ No newline at end of file
...@@ -43,6 +43,8 @@ import 'codemirror/addon/edit/matchbrackets'; ...@@ -43,6 +43,8 @@ import 'codemirror/addon/edit/matchbrackets';
import './codemirror/matefun-mode-ES.js' import './codemirror/matefun-mode-ES.js'
import './codemirror/matefun-mode-EN.js' import './codemirror/matefun-mode-EN.js'
import * as npm from './../../../../package.json'
var codeMirrorRef:any; var codeMirrorRef:any;
var componentRef : any; var componentRef : any;
var focus: any; var focus: any;
...@@ -89,7 +91,7 @@ export class MateFunComponent { ...@@ -89,7 +91,7 @@ export class MateFunComponent {
fontSize: 12 fontSize: 12
}; };
themes = ['3024-day', '3024-night', 'abcdef', 'ambiance-mobile', 'ambiance', 'base16-dark', 'base16-light', 'bespin', 'blackboard', 'cobalt', 'colorforth', 'dracula', 'duotone-dark', 'duotone-light', 'eclipse', 'elegant', 'erlang-dark', 'hopscotch', 'icecoder', 'isotope', 'lesser-dark', 'liquibyte', 'material', 'mbo', 'mdn-like', 'midnight', 'monokai', 'neat', 'neo', 'night', 'panda-syntax', 'paraiso-dark', 'paraiso-light', 'pastel-on-dark', 'railscasts', 'rubyblue', 'seti', 'solarized', 'the-matrix', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'ttcn', 'twilight', 'vibrant-ink', 'xq-dark', 'xq-light', 'yeti', 'zenburn'] themes = ['3024-day', '3024-night', 'abcdef', 'ambiance-mobile', 'ambiance', 'base16-dark', 'base16-light', 'bespin', 'blackboard', 'cobalt', 'colorforth', 'dracula', 'duotone-dark', 'duotone-light', 'eclipse', 'elegant', 'erlang-dark', 'hopscotch', 'icecoder', 'isotope', 'lesser-dark', 'liquibyte', 'material', 'mbo', 'mdn-like', 'midnight', 'monokai', 'neat', 'neo', 'night', 'panda-syntax', 'paraiso-dark', 'paraiso-light', 'pastel-on-dark', 'railscasts', 'rubyblue', 'seti', 'solarized', 'the-matrix', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'ttcn', 'twilight', 'vibrant-ink', 'xq-dark', 'xq-light', 'yeti', 'zenburn']
version: string = npm.version;
constructor( constructor(
private haskellService: HaskellService, private haskellService: HaskellService,
...@@ -605,6 +607,11 @@ export class MateFunComponent { ...@@ -605,6 +607,11 @@ export class MateFunComponent {
}); });
} }
onChangeTab(event) {
if (event.nextId == 'FigurasBtn3D') {
this.graph3DComp.onActivate();
}
}
} }
...@@ -12,8 +12,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ...@@ -12,8 +12,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NotificacionModule } from '../../notificacion/notificacion.module'; import { NotificacionModule } from '../../notificacion/notificacion.module';
import { Graph2DModule } from '../plotter/graph2D/graph2D.module'; import { Graph2DModule } from '../plotter/graph2D/graph2D.module';
import { Graph3DModule } from '../plotter/graph3D/graph3D.module'; import { Graph3DModule } from '../plotter/graph3D/graph3D.module';
import { ClosePopoverOnOutsideClickDirective } from '../../shared/utils/closePopoverDirective';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -35,8 +33,7 @@ import { ClosePopoverOnOutsideClickDirective } from '../../shared/utils/closePop ...@@ -35,8 +33,7 @@ import { ClosePopoverOnOutsideClickDirective } from '../../shared/utils/closePop
declarations: [ declarations: [
MateFunComponent, MateFunComponent,
ConfirmComponent, ConfirmComponent,
SeleccionarDirectorioComp, SeleccionarDirectorioComp
ClosePopoverOnOutsideClickDirective
], ],
exports: [MateFunComponent] exports: [MateFunComponent]
}) })
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<button id="settings" <button id="settings"
class="btn btn-sm btn-secondary btn-setting" class="btn btn-sm btn-secondary btn-setting"
placement="bottom" placement="bottom"
closePopoverOnOutsideClick closePopoverDirective
[ngbPopover]=popoverCanvas [ngbPopover]=popoverCanvas
popoverTitle="Configuración" popoverTitle="Configuración"
#popover="ngbPopover" #popover="ngbPopover"
......
...@@ -4,9 +4,10 @@ import { RouterModule } from '@angular/router'; ...@@ -4,9 +4,10 @@ import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { Graph2DComponent } from './graph2D.component'; import { Graph2DComponent } from './graph2D.component';
import { DirectivesModule } from '../../../shared/directives/directives.module';
@NgModule({ @NgModule({
imports: [FormsModule, RouterModule, CommonModule, NgbModule], imports: [FormsModule, RouterModule, CommonModule, NgbModule, DirectivesModule],
declarations: [Graph2DComponent], declarations: [Graph2DComponent],
exports: [Graph2DComponent], exports: [Graph2DComponent],
}) })
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</button> </button>
<button <button
closePopoverOnOutsideClick closePopoverDirective
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
placement="bottom" placement="bottom"
[ngbPopover]=popoverAxesSize [ngbPopover]=popoverAxesSize
...@@ -150,10 +150,9 @@ ...@@ -150,10 +150,9 @@
</button> </button>
<button <button
[ngbPopover]=popoverConfig [ngbPopover]=popoverConfig
closePopoverOnOutsideClick closePopoverDirective
placement="bottom" placement="bottom"
tiggers="click" tiggers="click"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
popoverTitle="Configuración" popoverTitle="Configuración"
......
...@@ -28,21 +28,24 @@ export class Graph3DComponent implements AfterViewInit { ...@@ -28,21 +28,24 @@ export class Graph3DComponent implements AfterViewInit {
}; };
constructor(ghciService: GHCIService, private zone: NgZone) { constructor(ghciService: GHCIService, private zone: NgZone) {
const self = this;
this.ghciServiceSub = ghciService.messages.subscribe( this.ghciServiceSub = ghciService.messages.subscribe(
message => { message => {
if (message.tipo == "canvas3D") { if (message.tipo == "canvas3D") {
const figures = JSON.parse(formatJSON(message.resultado)); const figures = JSON.parse(formatJSON(message.resultado));
self.clear();
graph3DLib.drawFigures(figures); graph3DLib.drawFigures(figures);
} }
else if (message.tipo == "animacion3D") { else if (message.tipo == "animacion3D") {
const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame))); const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame)));
self.clear();
this.animationProps.visible = true; this.animationProps.visible = true;
this.animationProps.playing = true; this.animationProps.playing = true;
this.animationProps.value = 0; this.animationProps.value = 0;
graph3DLib.clear();
graph3DLib.initializeAnimation(frames, graph3DLib.initializeAnimation(frames,
(value) => this.animationProps.value = value (value) => this.animationProps.value = value
); );
...@@ -54,14 +57,8 @@ export class Graph3DComponent implements AfterViewInit { ...@@ -54,14 +57,8 @@ export class Graph3DComponent implements AfterViewInit {
} }
ngAfterViewInit() { ngAfterViewInit() {
// this.zone.runOutsideAngular(() => { //this.zone.runOutsideAngular(() => {
graph3DLib.initialize(this.graph3DRef.nativeElement, true); graph3DLib.initialize(this.graph3DRef.nativeElement);
(function render() {
console.info("ngAfterViewInit: ####### FIRED");
//requestAnimationFrame(render);
graph3DLib.forceUpdateRenderer();
}());
//}) //})
} }
...@@ -71,10 +68,17 @@ export class Graph3DComponent implements AfterViewInit { ...@@ -71,10 +68,17 @@ export class Graph3DComponent implements AfterViewInit {
} }
} }
onResize(event){ onActivate() {
const {width, height} = this.graph3DRef.nativeElement.getBoundingClientRect(); setTimeout(() => {
this.onResize(null);
})
}
graph3DLib.changeSize({width, height}); onResize(event){
const {width, height} = this.graph3DRef.nativeElement.getBoundingClientRect();
if (width > 0 && height > 0)
graph3DLib.changeSize({width, height});
} }
onAnimationChangeSpeed = (value) => { onAnimationChangeSpeed = (value) => {
......
...@@ -5,10 +5,11 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ...@@ -5,10 +5,11 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { Graph3DComponent } from './graph3D.component'; import { Graph3DComponent } from './graph3D.component';
import { AnimationControlComponent } from '../animation-control/animation-control.component'; import { AnimationControlComponent } from '../animation-control/animation-control.component';
import { DirectivesModule } from '../../../shared/directives/directives.module';
@NgModule({ @NgModule({
imports: [FormsModule, RouterModule, CommonModule, NgbModule], imports: [FormsModule, RouterModule, CommonModule, NgbModule, DirectivesModule],
declarations: [ declarations: [
AnimationControlComponent, AnimationControlComponent,
Graph3DComponent Graph3DComponent
......
...@@ -3,9 +3,9 @@ import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'; ...@@ -3,9 +3,9 @@ import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
import { NgbPopoverWindow } from '@ng-bootstrap/ng-bootstrap/popover/popover'; import { NgbPopoverWindow } from '@ng-bootstrap/ng-bootstrap/popover/popover';
@Directive({ @Directive({
selector: '[closePopoverOnOutsideClick][ngbPopover]' selector: '[closePopoverDirective][ngbPopover]'
}) })