Skip to content
Snippets Groups Projects
Commit 73c5a5eb authored by jose.ignacio.fagian's avatar jose.ignacio.fagian
Browse files

Merge branch 'feature/3DComponentInitialization' into feature/integration-graph-2d-3d

# Conflicts:
#	Frontend Angular 4/src/app/app.module.ts
#	Frontend Angular 4/src/app/shared/config.ts
parents cde84378 9ff4f175
Branches
Tags
No related merge requests found
Showing
with 674 additions and 106 deletions
...@@ -7,11 +7,11 @@ import { AppComponent } from './app.component'; ...@@ -7,11 +7,11 @@ import { AppComponent } from './app.component';
import { AuthGuard } from './shared/guards/auth.guard'; import { AuthGuard } from './shared/guards/auth.guard';
import { SessionService } from './shared/services/session.service'; import { SessionService } from './shared/services/session.service';
import { NotificacionService } from './shared/services/notificacion.service'; import { NotificacionService } from './shared/services/notificacion.service';
import {NotificacionModule} from './notificacion/notificacion.module' import {NotificacionModule} from './notificacion/notificacion.module';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent
], ],
imports: [ imports: [
NotificacionModule, NotificacionModule,
......
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("codemirror/lib/codemirror"));
else if (typeof define == "function" && define.amd) // AMD
define(["codemirror/lib/codemirror"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";
CodeMirror.defineMode("matefun-EN", function(_config, modeConfig) {
function switchState(source, setState, f) {
setState(f);
return f(source, setState);
}
var smallRE = /[a-z_]/;
var largeRE = /[A-Z]/;
var digitRE = /\d/;
var hexitRE = /[0-9A-Fa-f]/;
var octitRE = /[0-7]/;
var idRE = /[a-z_A-Z0-9'\xa1-\uffff]/;
var symbolRE = /[-!#$%&*+.\/<=>?@\\^|~:]/;
var specialRE = /[(),;[\]`{}]/;
var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer
function normal(source, setState) {
if (source.eatWhile(whiteCharRE)) {
return null;
}
var ch = source.next();
if (specialRE.test(ch)) {
if (ch == '{' && source.eat('-')) {
var t = "comment";
if (source.eat('#')) {
t = "meta";
}
return switchState(source, setState, ncomment(t, 1));
}
return null;
}
if (ch == '\'') {
if (source.eat('\\')) {
source.next(); // should handle other escapes here
}
else {
source.next();
}
if (source.eat('\'')) {
return "string";
}
return "string error";
}
if (ch == '"') {
return switchState(source, setState, stringLiteral);
}
if (largeRE.test(ch)) {
source.eatWhile(idRE);
if (source.eat('.')) {
return "qualifier";
}
return "variable-2";
}
if (smallRE.test(ch)) {
source.eatWhile(idRE);
return "variable";
}
if (digitRE.test(ch)) {
if (ch == '0') {
if (source.eat(/[xX]/)) {
source.eatWhile(hexitRE); // should require at least 1
return "integer";
}
if (source.eat(/[oO]/)) {
source.eatWhile(octitRE); // should require at least 1
return "number";
}
}
source.eatWhile(digitRE);
var t = "number";
if (source.match(/^\.\d+/)) {
t = "number";
}
if (source.eat(/[eE]/)) {
t = "number";
source.eat(/[-+]/);
source.eatWhile(digitRE); // should require at least 1
}
return t;
}
if (ch == "." && source.eat("."))
return "keyword";
if (symbolRE.test(ch)) {
if (ch == '-' && source.eat(/-/)) {
source.eatWhile(/-/);
if (!source.eat(symbolRE)) {
source.skipToEnd();
return "comment";
}
}
var t = "variable";
if (ch == ':') {
t = "variable-2";
}
source.eatWhile(symbolRE);
return t;
}
return "error";
}
function ncomment(type, nest) {
if (nest == 0) {
return normal;
}
return function(source, setState) {
var currNest = nest;
while (!source.eol()) {
var ch = source.next();
if (ch == '{' && source.eat('-')) {
++currNest;
}
else if (ch == '-' && source.eat('}')) {
--currNest;
if (currNest == 0) {
setState(normal);
return type;
}
}
}
setState(ncomment(type, currNest));
return type;
};
}
function stringLiteral(source, setState) {
while (!source.eol()) {
var ch = source.next();
if (ch == '"') {
setState(normal);
return "string";
}
if (ch == '\\') {
if (source.eol() || source.eat(whiteCharRE)) {
setState(stringGap);
return "string";
}
if (source.eat('&')) {
}
else {
source.next(); // should handle other escapes here
}
}
}
setState(normal);
return "string error";
}
function stringGap(source, setState) {
if (source.eat('\\')) {
return switchState(source, setState, stringLiteral);
}
source.next();
setState(normal);
return "error";
}
var wellKnownWords = (function() {
var wkw = {};
function setType(t) {
return function () {
for (var i = 0; i < arguments.length; i++)
wkw[arguments[i]] = t;
};
}
setType("keyword")(
"include"
,"set","in"
,"if", "or"
,"isEmpty");
setType("keyword")("<-", "->");
setType("builtin")("-", "+", "*", "/","^","!",":","==","/=","<",">","<=",">=","::","->","X","|");
//tipos predefinidos
setType("builtin")("Red", "Green", "Blue", "Black","White","Gray","Yellow","FigEmpty", "[]"
,"R", "Fig", "Fig3D", "Color", "color3D", "join3D", "rotate3D", "move3D"
);
setType("builtin")(
"abs", "acos", "acosh", "all", "and", "any", "appendFile", "asTypeOf",
"asin", "asinh", "atan", "atan2", "atanh", "break", "catch", "ceiling",
"compare", "concat", "concatMap", "const", "cos", "cosh", "curry",
"cycle", "decodeFloat", "div", "divMod", "drop", "dropWhile", "either",
"elem", "encodeFloat", "enumFrom", "enumFromThen", "enumFromThenTo",
"enumFromTo", "error", "even", "exp", "exponent", "fail", "filter",
"flip", "floatDigits", "floatRadix", "floatRange", "floor", "fmap",
"foldl", "foldl1", "foldr", "foldr1", "fromEnum", "fromInteger",
"fromIntegral", "fromRational", "fst", "gcd", "getChar", "getContents",
"getLine", "head", "id", "init", "interact", "ioError", "isDenormalized",
"isIEEE", "isInfinite", "isNaN", "isNegativeZero", "iterate", "last",
"lcm", "length", "lex", "lines", "log", "logBase", "lookup", "map",
"mapM", "mapM_", "max", "maxBound", "maximum", "maybe", "min", "minBound",
"minimum", "mod", "negate", "not", "notElem", "null", "odd", "or",
"otherwise", "pi", "pred", "print", "product", "properFraction",
"putChar", "putStr", "putStrLn", "quot", "quotRem", "read", "readFile",
"readIO", "readList", "readLn", "readParen", "reads", "readsPrec",
"realToFrac", "recip", "rem", "repeat", "replicate", "return", "reverse",
"round", "scaleFloat", "scanl", "scanl1", "scanr", "scanr1", "seq",
"sequence", "sequence_", "show", "showChar", "showList", "showParen",
"showString", "shows", "showsPrec", "significand", "signum", "sin",
"sinh", "snd", "span", "splitAt", "sqrt", "subtract", "succ", "sum",
"tail", "take", "takeWhile", "tan", "tanh", "toEnum", "toInteger",
"toRational", "truncate", "uncurry", "undefined", "unlines", "until",
"unwords", "unzip", "unzip3", "userError", "words", "writeFile", "zip",
"zip3", "zipWith", "zipWith3");
var override = modeConfig.overrideKeywords;
if (override) for (var word in override) if (override.hasOwnProperty(word))
wkw[word] = override[word];
return wkw;
})();
return {
startState: function () { return { f: normal }; },
copyState: function (s) { return { f: s.f }; },
token: function(stream, state) {
var t = state.f(stream, function(s) { state.f = s; });
var w = stream.current();
return wellKnownWords.hasOwnProperty(w) ? wellKnownWords[w] : t;
},
blockCommentStart: "{-",
blockCommentEnd: "-}",
lineComment: "--"
};
});
CodeMirror.defineMIME("text/x-matefun", "matefun-EN");
});
\ No newline at end of file
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
})(function(CodeMirror) { })(function(CodeMirror) {
"use strict"; "use strict";
CodeMirror.defineMode("matefun", function(_config, modeConfig) { CodeMirror.defineMode("matefun-ES", function(_config, modeConfig) {
function switchState(source, setState, f) { function switchState(source, setState, f) {
setState(f); setState(f);
...@@ -256,6 +256,6 @@ ...@@ -256,6 +256,6 @@
}); });
CodeMirror.defineMIME("text/x-matefun", "matefun"); CodeMirror.defineMIME("text/x-matefun", "matefun-ES");
}); });
\ No newline at end of file
...@@ -40,7 +40,8 @@ import 'codemirror/addon/search/matchesonscrollbar'; ...@@ -40,7 +40,8 @@ import 'codemirror/addon/search/matchesonscrollbar';
import 'codemirror/addon/search/jump-to-line'; import 'codemirror/addon/search/jump-to-line';
import 'codemirror/addon/edit/matchbrackets'; import 'codemirror/addon/edit/matchbrackets';
import './codemirror-matefun-mode.js' import './codemirror/matefun-mode-ES.js'
import './codemirror/matefun-mode-EN.js'
var codeMirrorRef:any; var codeMirrorRef:any;
var componentRef : any; var componentRef : any;
...@@ -80,7 +81,7 @@ export class MateFunComponent { ...@@ -80,7 +81,7 @@ export class MateFunComponent {
matchBrackets: true, matchBrackets: true,
extraKeys: {"Ctrl-Space": "autocomplete"}, extraKeys: {"Ctrl-Space": "autocomplete"},
mode: { mode: {
name: "matefun", name: "matefun-EN",
globalVars: true globalVars: true
}, },
gutters: ["CodeMirror-linenumbers", "breakpoints"], gutters: ["CodeMirror-linenumbers", "breakpoints"],
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
style="min-width: 70px;" style="min-width: 70px;"
(click)=changeZoomType() (click)=changeZoomType()
> >
{{getZoom3DTypeName(zoomType)}} {{getZoom3DTypeName(graphProps.zoomType)}}
</button> </button>
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown"> <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button> <button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<button <button
*ngFor="let type of [1,2,3,4]" *ngFor="let type of [1,2,3,4]"
class="dropdown-item" class="dropdown-item"
[disabled]="type === zoomType" [disabled]="type === graphProps.zoomType"
(click)=changeZoomType(type) (click)=changeZoomType(type)
> >
{{getZoom3DTypeName(type)}} {{getZoom3DTypeName(type)}}
...@@ -49,46 +49,158 @@ ...@@ -49,46 +49,158 @@
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" data-placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)=zoomMas() (click)=center()
> >
<i class="fa fa-arrows"></i> <i class="fa fa-arrows"></i>
</button> </button>
<button
closePopoverOnOutsideClick
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 <button
ngbPopover="Borrar" ngbPopover="Borrar"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" data-placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)=zoomMas() (click)=clear()
> >
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</button> </button>
<button <button
ngbPopover="Configuración" [ngbPopover]=popoverConfig
triggers="mouseenter:mouseleave" closePopoverOnOutsideClick
data-placement="bottom" placement="bottom"
tiggers="click"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)=zoomMas() popoverTitle="Configuración"
> >
<i class="fa fa-gear"></i> <i class="fa fa-gear"></i>
</button> </button>
<ng-template #popoverConfig>
<div style="width: 140px;">
<label class="d-block">
<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()">
Mostrar grilla
</label>
<div style="display: flex;">
<span style="margin-right: 8px; align-self: center;">
Quality:
</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>
<div class="card-block contenedor-canvas" > <div class="card-block contenedor-canvas" >
<animation-control <animation-control
[minSpeed]="60" [minSpeed]="60"
[value]="animation.value" [value]="animationProps.value"
[speed]="animation.speed" [speed]="animationProps.speed"
[visible]="animation.visible" [visible]="animationProps.visible"
[playing]="animation.playing" [playing]="animationProps.playing"
[onChangeSpeed]="onAnimationChangeSpeed" [onChangeSpeed]="onAnimationChangeSpeed"
[onTogglePlay]="onAnimationTogglePlay" [onTogglePlay]="onAnimationTogglePlay"
> >
</animation-control> </animation-control>
<div #graph3DElement style="width: 100%; height: 100%;"> <div #graph3DElement style="width: 100%; height: 100%;">
</div> </div>
</div> </div>
......
...@@ -14,7 +14,25 @@ ...@@ -14,7 +14,25 @@
vertical-align: bottom; vertical-align: bottom;
button { button {
padding: 2.5px 5px; padding: 2.5px 8px 2.5px 3px;
}
}
.axes-size {
width: 165px;
.axe {
display: flex;
&:not(:last-child) {
margin-bottom: 6px;
}
.less-than {
padding: 0 2.5px 0 5px;
font-size: 17px;
letter-spacing: 4px;
}
} }
} }
} }
...@@ -23,3 +41,7 @@ ...@@ -23,3 +41,7 @@
background-color: #f7f7f7; background-color: #f7f7f7;
color: #9e9e9e; color: #9e9e9e;
} }
.d-block{
display: block;
}
\ No newline at end of file
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core'; import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import * as graph3DLib from 'graph3d'; import * as graph3DLib from 'graph3d';
import { GHCIService } from '../../../shared/services/ghci.service'; import { GHCIService } from '../../../shared/services/ghci.service';
import { formatJSON, AnimationProps, Zoom3DType } from './graph3D.helper'; import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps, debounce } from './graph3D.helper';
@Component({ @Component({
selector: 'graph3d-component', selector: 'graph3d-component',
...@@ -11,23 +11,24 @@ import { formatJSON, AnimationProps, Zoom3DType } from './graph3D.helper'; ...@@ -11,23 +11,24 @@ import { formatJSON, AnimationProps, Zoom3DType } from './graph3D.helper';
'(window:resize)': 'onResize($event)' '(window:resize)': 'onResize($event)'
} }
}) })
export class Graph3DComponent implements OnInit { export class Graph3DComponent {
private ghciServiceSub: any; private ghciServiceSub: any;
@ViewChild('graph3DElement') @ViewChild('graph3DElement')
private graph3DRef: ElementRef; private graph3DRef: ElementRef;
public zoomType: Zoom3DType = Zoom3DType.Normal; private graphProps : GraphProps = Default_GraphProps;
private animation : AnimationProps = { private animationProps : AnimationProps = {
visible: false, visible: false,
playing: false, playing: false,
value: 0, value: 0,
speed: 1000 speed: 1000
}; };
constructor(private ghciService: GHCIService, private zone: NgZone) {
constructor(ghciService: GHCIService, private zone: NgZone) {
this.ghciServiceSub = ghciService.messages.subscribe( this.ghciServiceSub = ghciService.messages.subscribe(
message => { message => {
if (message.tipo == "canvas3D") { if (message.tipo == "canvas3D") {
...@@ -38,12 +39,13 @@ export class Graph3DComponent implements OnInit { ...@@ -38,12 +39,13 @@ export class Graph3DComponent implements OnInit {
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)));
this.animation.visible = true; this.animationProps.visible = true;
this.animation.playing = true; this.animationProps.playing = true;
this.animation.value = 0; this.animationProps.value = 0;
graph3DLib.clear();
graph3DLib.initializeAnimation(frames, graph3DLib.initializeAnimation(frames,
(value) => this.animation.value = value (value) => this.animationProps.value = value
); );
graph3DLib.playAnimation(); graph3DLib.playAnimation();
...@@ -52,10 +54,10 @@ export class Graph3DComponent implements OnInit { ...@@ -52,10 +54,10 @@ export class Graph3DComponent implements OnInit {
) )
} }
ngOnInit() { ngAfterViewInit() {
this.zone.runOutsideAngular(() => { // this.zone.runOutsideAngular(() => {
graph3DLib.initialize(this.graph3DRef.nativeElement); graph3DLib.initialize(this.graph3DRef.nativeElement);
}) //})
} }
ngOnDestroy() { ngOnDestroy() {
...@@ -71,30 +73,76 @@ export class Graph3DComponent implements OnInit { ...@@ -71,30 +73,76 @@ export class Graph3DComponent implements OnInit {
} }
onAnimationChangeSpeed = (value) => { onAnimationChangeSpeed = (value) => {
this.animation.speed = parseInt(value); this.animationProps.speed = parseInt(value);
graph3DLib.changeSpeedAnimation(parseInt(value)); graph3DLib.changeSpeedAnimation(parseInt(value));
} }
onAnimationTogglePlay = () => { onAnimationTogglePlay = () => {
if (this.animation.playing) { if (this.animationProps.playing) {
graph3DLib.pauseAnimation(); graph3DLib.pauseAnimation();
} }
else { else {
graph3DLib.playAnimation(); graph3DLib.playAnimation();
} }
this.animation.playing = !this.animation.playing; this.animationProps.playing = !this.animationProps.playing;
} }
public changeZoomType = (type: Zoom3DType = null) => { public changeZoomType = (type: Zoom3DType = null) => {
if (type != null) { if (type != null) {
this.zoomType = type; this.graphProps.zoomType = type;
}
else {
this.graphProps.zoomType = (this.graphProps.zoomType % 4) + 1;
}
graph3DLib.changeZoomType(this.graphProps.zoomType);
}
public changeAxesVisibility = () => {
this.graphProps.showAxes = !this.graphProps.showAxes;
graph3DLib.showAxes(this.graphProps.showAxes);
}
handleAxesRangeDebounced = debounce(function () {
setTimeout(() =>
graph3DLib.changeAxesSize(this.graphProps.range)
);
}, 500);
public onChangeAxesSize = (v, event) => {
let value = this.graphProps.range[v];
const min = parseInt(event.target.min);
const max = parseInt(event.target.max);
if (value == null) {
value = v.search('Min') ? min : max;
this.graphProps.range[v] = value;
}
if (value < min) {
this.graphProps.range[v] = min;
}
if (value > max) {
this.graphProps.range[v] = max;
}
this.handleAxesRangeDebounced();
//graph3DLib.changeAxesSize(this.graphProps.range)
}
public onChangeQuality = () => {
const value = this.graphProps.quality;
if (value == null || value <= 1) {
this.graphProps.quality = 30;
} }
else { else {
this.zoomType = (this.zoomType % 4) + 1; this.graphProps.quality = value;
} }
graph3DLib.changeZoomType(this.zoomType); graph3DLib.changeOptions({quality: value});
} }
public zoomIn = () => { public zoomIn = () => {
...@@ -105,6 +153,18 @@ export class Graph3DComponent implements OnInit { ...@@ -105,6 +153,18 @@ export class Graph3DComponent implements OnInit {
graph3DLib.changeZoom(false); graph3DLib.changeZoom(false);
} }
public clear = () => {
this.animationProps.visible = false;
graph3DLib.clear();
}
public center = () => {
this.graphProps = Default_GraphProps;
graph3DLib.reset();
}
public getZoom3DTypeName = (type: Zoom3DType) => { public getZoom3DTypeName = (type: Zoom3DType) => {
switch (type) { switch (type) {
case Zoom3DType.Normal: case Zoom3DType.Normal:
......
export function formatJSON(jsonString: string) : string { export function formatJSON(jsonString: string) : string {
const regexRot = /\"rot\"\:\((\d*.\d*),(\d*.\d*),(\d*.\d*)\)/g; const regexRot = /\"rot\"\:\((\d*.\d*),(\d*.\d*),(\d*.\d*)\)/g;
const regexPts = /\"pts\"\:\[\((\-?\d*.\d*),(\-?\d*.\d*),(\-?\d*.\d*)\),\((\-?\d*.\d*),(\-?\d*.\d*),(\-?\d*.\d*)\)\]/g;
return jsonString.replace( return jsonString
.replace(
regexRot, (match, x, y, z) => { regexRot, (match, x, y, z) => {
return `"rot": { "x": ${x}, "y": ${y}, "z": ${z} }` return `"rot": { "x": ${x}, "y": ${y}, "z": ${z} }`
} }
) )
.replace(
regexPts, (match, x1, y1, z1, x2, y2, z2) => {
return `"pts": [{ "x": ${x1}, "y": ${y1}, "z": ${z1} },{ "x": ${x2}, "y": ${y2}, "z": ${z2} }]`
} }
)
}
export interface AnimationProps { export interface AnimationProps {
visible?: boolean, visible?: boolean,
...@@ -22,3 +30,42 @@ export enum Zoom3DType { ...@@ -22,3 +30,42 @@ export enum Zoom3DType {
ZAxis, ZAxis,
} }
export interface GraphProps {
zoomType?: Zoom3DType,
showAxes?: boolean,
quality?: number,
range: {
xMin?: number,
xMax?: number,
yMin?: number,
yMax?: number,
zMin?: number,
zMax?: number
}
}
export const Default_GraphProps : GraphProps = {
zoomType: Zoom3DType.Normal,
showAxes: true,
quality: 30,
range: {
xMin: -10,
xMax: 10,
yMin: -10,
yMax: 10,
zMin: -10,
zMax: 10
}
}
export function debounce(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
...@@ -5,12 +5,15 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ...@@ -5,12 +5,15 @@ 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 { ClosePopoverOnOutsideClickDirective } from '../../../shared/utils/closePopoverDirective';
@NgModule({ @NgModule({
imports: [FormsModule, RouterModule, CommonModule, NgbModule], imports: [FormsModule, RouterModule, CommonModule, NgbModule],
declarations: [ declarations: [
AnimationControlComponent, AnimationControlComponent,
Graph3DComponent Graph3DComponent,
ClosePopoverOnOutsideClickDirective
], ],
entryComponents: [ entryComponents: [
AnimationControlComponent AnimationControlComponent
......
...@@ -4,12 +4,15 @@ ...@@ -4,12 +4,15 @@
//export const SERVER = 'http://localhost:9090'; //export const SERVER = 'http://localhost:9090';
//export const GHCI_URL = 'ws://localhost:9090/endpoint'; //export const GHCI_URL = 'ws://localhost:9090/endpoint';
export const SERVER = 'http://localhost:8080'; //export const SERVER = 'http://localhost:8080';
export const GHCI_URL = 'ws://localhost:8080/endpoint'; //export const GHCI_URL = 'ws://localhost:8080/endpoint';
//Configuracion dinamica pensando en servidor con ip dinamica //Configuracion dinamica pensando en servidor con ip dinamica
// export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090'; // export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
// export const GHCI_URL = window.location.protocol == 'http:'? 'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint'; // export const GHCI_URL = window.location.protocol == 'http:'? 'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
//export const SERVER = 'http://ec2-52-15-74-22.us-east-2.compute.amazonaws.com:9090'; // Google cloud platform
//export const GHCI_URL = 'ws://ec2-52-15-74-22.us-east-2.compute.amazonaws.com:9090/endpoint'; export const SERVER = 'http://35.199.110.129:9090';
\ No newline at end of file export const GHCI_URL = 'ws://35.199.110.129:9090/endpoint';
//export const SERVER = 'https://matefun.mybluemix.net';
//export const GHCI_URL = 'wss://matefun.mybluemix.net/endpoint';
//export const SERVER = 'http://localhost:9090';
//export const GHCI_URL = 'ws://localhost:9090/endpoint';
export const SERVER = 'http://localhost:8080';
export const GHCI_URL = 'ws://localhost:8080/endpoint';
//Configuracion dinamica pensando en servidor con ip dinamica
<<<<<<< HEAD
//export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
//export const GHCI_URL = window.location.protocol == 'http:'? 'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
//export const SERVER = 'http://ec2-52-15-74-22.us-east-2.compute.amazonaws.com:9090';
//export const GHCI_URL = 'ws://ec2-52-15-74-22.us-east-2.compute.amazonaws.com:9090/endpoint';
=======
// export const SERVER = window.location.protocol + '//' + window.location.host;//'http://localhost:9090';
// export const GHCI_URL = window.location.protocol == 'http:'? 'ws://'+window.location.host+'/endpoint': 'wss://'+window.location.host+'/endpoint';
//export const SERVER = 'http://192.168.95.3:9090';
//export const GHCI_URL = 'ws://192.168.95.3:9090/endpoint';
export const SERVER = 'http://35.199.110.129:9090';
export const GHCI_URL = 'ws://35.199.110.129:9090/endpoint';
>>>>>>> feature/3DComponentInitialization
import { Directive, HostListener, ElementRef, ComponentRef } from '@angular/core';
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
import { NgbPopoverWindow } from '@ng-bootstrap/ng-bootstrap/popover/popover';
@Directive({
selector: '[closePopoverOnOutsideClick][ngbPopover]'
})
export class ClosePopoverOnOutsideClickDirective {
constructor(private elementRef: ElementRef,
private ngbPopover: NgbPopover) {
}
@HostListener('document:click', ['$event'])
private documentClicked(event: MouseEvent): void {
// Popover is open
if (this.ngbPopover && this.ngbPopover.isOpen()) {
// Not clicked on self element
if (!this.elementRef.nativeElement.contains(event.target)) {
// Hacking typescript to access private member
const popoverWindowRef: ComponentRef<NgbPopoverWindow> = (this.ngbPopover as any)._windowRef;
// If clicked outside popover window
if (!popoverWindowRef.location.nativeElement.contains(event.target)) {
this.ngbPopover.close();
}
}
}
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment