From 8c10b9e82da114f3cb45b421530ca9957e08c60b Mon Sep 17 00:00:00 2001
From: Franco Pariani <franco19ps@gmail.com>
Date: Tue, 26 Feb 2019 01:53:16 -0300
Subject: [PATCH] New way to show external function definitions
---
.../app/layout/archivos/archivos.component.ts | 23 -----
.../app/layout/matefun/matefun.component.html | 32 ++++++-
.../app/layout/matefun/matefun.component.ts | 85 ++++++++++++-------
3 files changed, 83 insertions(+), 57 deletions(-)
diff --git a/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts b/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts
index 30b8bc9..4a4c1e8 100755
--- a/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts
+++ b/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts
@@ -31,8 +31,6 @@ import 'codemirror/mode/markdown/markdown';
})
export class ArchivosComponent {
- file_loaded = null;
- function_to_find = null;
translateService : any;
titlecasePipe: any;
archivos : Archivo[] = [];
@@ -48,7 +46,6 @@ export class ArchivosComponent {
preview: string = '';
directorioActual:any;
sortFunction:any;
- checked: boolean;
configCodeMirror = JSON.parse(sessionStorage.getItem('codeMirrorConfig')) ;
constructor(
@@ -72,13 +69,6 @@ export class ArchivosComponent {
@ViewChild(CodemirrorComponent) codemirror: CodemirrorComponent;
ngOnInit(){
- this.checked = false;
-
- this.route.queryParams.subscribe(params => {
- this.file_loaded = params['file'] || null;
- this.function_to_find = params['word'] || null;
- });
-
this.sortFunction = 'tipo'
let cedula = this.authService.getUser().cedula;
this.loading = true;
@@ -88,12 +78,6 @@ export class ArchivosComponent {
this.archivos = archivos;
this.loading = false;
this.buildTreeFromList();
-
- if (this.file_loaded !== null){
- var file_id = this.file_loaded;
- var found_file = this.archivos.filter(a => a.id == parseInt(file_id))[0];
- this.seleccionarArchivo(found_file);
- }
},
error => console.log(error)
);
@@ -560,11 +544,4 @@ export class ArchivosComponent {
}
});
}
-
- ngAfterViewChecked(){
- if(this.codemirror !== undefined && this.codemirror.instance.doc.getValue() !== "" && this.function_to_find !== null && !this.checked){
- this.checked = true;
- this.codemirror.instance.jumpToDefinitionByWord(this.codemirror.instance.doc, this.function_to_find);
- }
- }
}
diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
index d23c8e8..f605a74 100755
--- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
+++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
@@ -56,7 +56,7 @@
</div>
<button
style="margin-left: 5px; float: right;"
- (click)="reiniciarInterprete()"
+ (click)="mostrandoDefinicion = false; reiniciarInterprete()"
class="btn btn-sm btn-secondary"
ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)'
triggers="mouseenter:mouseleave"
@@ -65,7 +65,7 @@
</button>
<button
style="margin-left: 5px; float: right;"
- (click)="runCode()"
+ (click)="mostrandoDefinicion = false; runCode()"
class="btn btn-sm btn-secondary"
ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)'
triggers="mouseenter:mouseleave"
@@ -167,7 +167,7 @@
</div>
- <div class="col-md-6">
+ <div class="col-md-6" [hidden]="mostrandoDefinicion">
<!--
<ngb-tabset [destroyOnHide]=false>
<ngb-tab title="Programa">
@@ -201,6 +201,32 @@
</div> -->
</div>
+
+ <div class="col-md-6" [hidden]="!mostrandoDefinicion" style="top: 42px">
+ <div class="card">
+ <div class="card-header" style="height: 52.22px">
+ <form>
+ <div class="pull-left" *ngIf="archivoDefinicion">
+ {{ "i18n.object.name" | translate | titleCase }}:
+ {{archivoDefinicion?.nombre}}
+ -
+ {{ "i18n.action.created" | translate | titleCase }}:
+ {{archivoDefinicion?.fechaCreacion | date}}
+ </div>
+ <button style="float: right;" (click)="mostrandoDefinicion = !mostrandoDefinicion">
+ <i class="fa fa-times"></i>
+ </button>
+ </form>
+ </div>
+ <codemirror
+ #codemirror_def
+ class="codemirrorPrograma"
+ [(ngModel)]="archivoDefinicion.contenido"
+ [config]="configCodeMirrorDefinicion"
+ [ngStyle]="{'font-size': configCodeMirrorDefinicion.fontSize+'px'}">
+ </codemirror>
+ </div>
+ </div>
</div>
<span class="version">v{{version}}</span>
</div>
diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts
index 758b50b..d7c190b 100755
--- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts
+++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule, ViewChild, HostListener, ElementRef, ComponentRef, TemplateRef } from '@angular/core';
+import { Component, NgModule, ViewChild, HostListener, ElementRef, ComponentRef, TemplateRef, QueryList, ViewChildren } from '@angular/core';
import { CanvasModule} from '../canvas/canvas.module';
import { CanvasComponent } from '../canvas/canvas.component';
import { Http, JsonpModule } from '@angular/http';
@@ -87,6 +87,10 @@ export class MateFunComponent {
archivosTree :any;
idRecorridos: any;
code: string ='';
+ mostrandoDefinicion = false;
+ archivoDefinicion = "";
+ jump = false;
+ jump_word = "";
configCodeMirror = {
readOnly: false,
lineNumbers: true,
@@ -107,6 +111,7 @@ export class MateFunComponent {
},
files: null
};
+ configCodeMirrorDefinicion: any;
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;
@@ -149,16 +154,18 @@ export class MateFunComponent {
this.code = "my code";
let svg : string = '';
+ this.configCodeMirrorDefinicion = this.configCodeMirror;
+ this.configCodeMirrorDefinicion.readOnly = true;
}
- @ViewChild(CodemirrorComponent) codemirror: CodemirrorComponent;
+ @ViewChildren(CodemirrorComponent) codemirror: QueryList<CodemirrorComponent>;
// @ViewChild(NgbPopover) popover: NgbPopover;
@ViewChild('popover') popover: NgbPopover;
updateConfig(theme){
this.configCodeMirror.theme = theme;
- this.codemirror.instance.setOption('theme', theme);
+ this.codemirror.first.instance.setOption('theme', theme);
sessionStorage.setItem('codeMirrorConfig',JSON.stringify(this.configCodeMirror));
}
@@ -189,7 +196,7 @@ export class MateFunComponent {
node.id = "cursorpos-panel";
node.className = "panel bottom";
this.cursorPanelLabel = node.appendChild(document.createElement("span"));
- var cm = this.codemirror.instance;
+ var cm = this.codemirror.first.instance;
var x = cm.getCursor().line;
var y = cm.getCursor().ch;
x = (Number(x) + 1).toString();
@@ -198,10 +205,10 @@ export class MateFunComponent {
this.cursorPanelLabel.textContent = cursorPositionTranslate + ": (" + x + "," + y + ")";
- this.cursorPanel = this.codemirror.instance.addPanel(node, {position: "bottom", stable: true});
+ this.cursorPanel = this.codemirror.first.instance.addPanel(node, {position: "bottom", stable: true});
var that = this;
//agregamos el evento que setea la posición
- this.codemirror.instance.on("cursorActivity",function(cm){
+ this.codemirror.first.instance.on("cursorActivity",function(cm){
var x = cm.getCursor().line;
var y = cm.getCursor().ch;
x = (Number(x) + 1).toString();
@@ -209,7 +216,7 @@ export class MateFunComponent {
that.cursorPanel.node.innerText = cursorPositionTranslate + ": (" + x + "," + y + ")";
});
- this.codemirror.instance.on("keyHandled",function(cm,name,evt){
+ this.codemirror.first.instance.on("keyHandled",function(cm,name,evt){
if(name.code==="Digit1" && name.ctrlKey && name.shiftKey){
that.seleccionarDirectorio();
} else if(name.code==="Digit2" && name.ctrlKey && name.shiftKey){
@@ -217,10 +224,10 @@ export class MateFunComponent {
}
});
- this.codemirror.instance.on("keypress",function(cm,name,evt){
+ this.codemirror.first.instance.on("keypress",function(cm,name,evt){
if(!that.editDialogFired && JSON.parse(sessionStorage.currentUser).tipo === "docente" && cm.options.readOnly){
- codeMirrorRef = that.codemirror.instance;
+ codeMirrorRef = that.codemirror.first.instance;
componentRef = that;
that.showConfirm();
}
@@ -332,9 +339,9 @@ export class MateFunComponent {
document.getElementById("ProgramBtn").click();
var that = componentRef;
setTimeout(function() {
- that.codemirror.instance.focus();
+ that.codemirror.first.instance.focus();
},250);
- componentRef.codemirror.instance.focus();
+ componentRef.codemirror.first.instance.focus();
focus ="program";
return false;
} else if(evtobj.ctrlKey && evtobj.altKey && evtobj.key.toLowerCase() ==="c"){
@@ -363,16 +370,20 @@ export class MateFunComponent {
}
ngAfterViewInit() {
+ this.codemirror.last.instance.on('change', () => {
+ this.makeAJump();
+ });
+
componentRef = this;
- if(this.codemirror.instance!=null && !this.cursorLabelInit){
+ if(this.codemirror.first.instance!=null && !this.cursorLabelInit){
this.cursorLabelInit = true;
- this.codemirror.instance.setOption('theme', this.configCodeMirror.theme);
+ this.codemirror.first.instance.setOption('theme', this.configCodeMirror.theme);
this.makePanel();
}
- if(!this.editableLoaded && this.codemirror.instance!=null &&(this.sessionService.archivo.editable!==undefined)){
+ if(!this.editableLoaded && this.codemirror.first.instance!=null &&(this.sessionService.archivo.editable!==undefined)){
try{
var editable = this.sessionService.archivo.editable && (this.sessionService.archivo.estado == 'Edicion' || this.sessionService.archivo.estado == 'Devuelto');
- this.codemirror.instance.options.readOnly = !editable;
+ this.codemirror.first.instance.options.readOnly = !editable;
this.editableLoaded = true;
@@ -384,6 +395,13 @@ export class MateFunComponent {
}
+ makeAJump(){
+ if (this.jump){
+ this.jump = false;
+ this.jumpExternalFile(this.jump_word);
+ }
+ }
+
htmlEncode(value:string){
return value
.replace('Prelude> ','')
@@ -452,16 +470,30 @@ export class MateFunComponent {
archivoModificado(event){
if (this.hintsCheck && !event.ctrlKey && !event.altKey){
if (/^[\w\_\d]$/.test(event.key) || event.key == 'Enter'){
- this.codemirror.instance.options.files = this.archivosTree;
- this.codemirror.instance.showHint(event);
+ this.codemirror.first.instance.options.files = this.archivosTree;
+ this.codemirror.first.instance.showHint(event);
}
if(this.copiaNombreArchivo!=this.archivo.nombre || this.copiaContenidoArchivo != this.archivo.contenido){
this.modificado = true;
}else{
this.modificado = false;
}
- }else if (event.ctrlKey && event.shiftKey && event.key == 'K') this.codemirror.instance.toggleComment();
- else if (event.altKey && event.key == '.') this.codemirror.instance.jumpToDefinition(this.archivosTree, this.codemirror.instance.doc, event);
+ }else if (event.ctrlKey && event.shiftKey && event.key == 'K') this.codemirror.first.instance.toggleComment();
+ else if (event.altKey && event.key == '.') this.codemirror.first.instance.jumpToDefinition(this.archivosTree, this.codemirror.first.instance.doc, event);
+ }
+
+ goToFilesPreview(file_found, word){
+ this.mostrandoDefinicion = true;
+ this.configCodeMirrorDefinicion = this.configCodeMirror;
+ this.configCodeMirrorDefinicion.readOnly = true;
+ this.archivoDefinicion = this.archivosTree.archivos.filter(a => a.id == parseInt(file_found.id))[0];
+ this.jump = true;
+ this.jump_word = word;
+ this.jumpExternalFile(word);
+ }
+
+ jumpExternalFile(word){
+ this.codemirror.last.instance.jumpToDefinitionByWord(this.codemirror.last.instance.doc, word);
}
clickEnEditor(event){
@@ -469,18 +501,10 @@ export class MateFunComponent {
let currentSession = sessionStorage.getItem("currentUser");
let langCode = currentSession ? JSON.parse(currentSession).language : 'es';
if (langCode == 'en')
- this.codemirror.instance.functionDefinitionEN(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.instance.doc, event);
+ this.codemirror.first.instance.functionDefinitionEN(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.first.instance.doc, event);
else if (langCode == 'es')
- this.codemirror.instance.functionDefinitionES(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.instance.doc, event);
- }
+ this.codemirror.first.instance.functionDefinitionES(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.first.instance.doc, event);
}
-
- goToFilesPreview(file_found, word){
- let navigationExtras: NavigationExtras = {
- queryParams: { file: file_found.id, word: word },
- skipLocationChange: true
- };
- this.router.navigate(['/archivos'], navigationExtras);
}
guardarArchivo(){
@@ -517,8 +541,7 @@ export class MateFunComponent {
}
}
runCode(){
-
- this.ghciService.setCodemirrorRef(this.codemirror.instance);
+ this.ghciService.setCodemirrorRef(this.codemirror.first.instance);
this.ghciService.resetGutters();
var regex = /^[A-Z]/
if(this.archivo.nombre.trim() == ""){
--
GitLab