1
1
<template >
2
2
<div class =" ansi-output-component" >
3
3
<div class =" ansi-editor d-flex flex-row" >
4
- <div class =" line-numbers-div text-center" :id =" divId+'-lines'" ></div >
5
- <div class =" console-output pl-1 pr-1" :id =" divId+'-content'" ></div >
4
+ <div class =" line-numbers-div text-center" :id =" divId+'-lines'" >
5
+ <pre ><span v-for =" index in lines.length" :key =" index" >{{index}}<br /></span ></pre >
6
+ </div >
7
+ <div class =" console-output pl-1 pr-1" :id =" divId+'-content'" >
8
+ <!-- pre needed to not squeeze white space, i.e., for asci graphics -->
9
+ <pre ><span v-for =" (line, index) in lines" :key =" index"
10
+ v-html =" line" ></span ></pre >
11
+ </div >
6
12
</div >
7
13
</div >
8
14
</template >
@@ -16,41 +22,60 @@ export default {
16
22
divId: String ,
17
23
content: String
18
24
},
19
- methods : {
20
- setAnsiOutput : function () {
21
- let ansi_up = new AU.default ;
22
-
23
- // var txt = "\n\n\x1B[1;33;40m 33;40 \x1B[1;33;41m 33;41 \x1B[1;33;42m 33;42 \x1B[1;33;43m 33;43 \x1B[1;33;44m 33;44 \x1B[1;33;45m 33;45 \x1B[1;33;46m 33;46 \x1B[1m\x1B[0\n\n\x1B[1;33;42m >> Tests OK\n\n "
24
- // var txt= "\u001b[31mHelloWorld";
25
-
26
-
27
- let lines = this . content . split ( / \r ? \n / );
28
- lines = lines . filter ( function ( el ) {
29
- return el != null // && el !== "" && el !== " ";
30
- });
31
-
32
- for ( let line in lines) {
33
- let html = ansi_up . ansi_to_html (lines[line]);
34
- let cdiv = document . getElementById ( this . divId + " - content" );
35
- cdiv . innerHTML += " <span> " + html + " <br> </span> " ;
36
- let linesdiv = document . getElementById ( this . divId + " -lines " );
37
- let linenumber = parseInt (line) + 1 ;
38
- linesdiv . innerHTML += linenumber + " <br> " ;
25
+ data () {
26
+ return {
27
+ /* TODO: adjust height of stdout to height of right tab,
28
+ maybe need computed variable for that;
29
+ in css below height can be "v-bind(height) "
30
+ height: '300px', */
31
+ ansi : undefined ,
32
+ lines : []
33
+ }
34
+ },
35
+ watch : {
36
+ content : function ( concat_content , old_content ) {
37
+ if (concat_content === ' ' ) {
38
+ // should never come to that branch; instead component is mounted again
39
+ // when content resets
40
+ console . log ( ' Clearing out content of ansioutput ' );
41
+ this . lines = []
42
+ } else {
43
+ const new_content = concat_content . substring ( old_content . length ) ;
44
+ this . renderContent (new_content) ;
39
45
}
40
-
41
46
}
42
47
},
48
+ /* TODO: would be nice feature
49
+ updated () {
50
+ // auto-scroll to the bottom when the DOM is updated
51
+ this.$el.scrollTop = this.$el.scrollHeight
52
+ }, */
53
+ beforeMount () {
54
+ this .ansi = new AU.default ;
55
+ },
43
56
mounted () {
44
- this .setAnsiOutput ();
57
+ this .renderContent (this .content );
58
+ // console.log("ansi in mounted")
59
+ },
60
+ methods: {
61
+ renderContent : function (content ) {
62
+ // console.log(this.lines.length);
63
+ const new_lines = content .split (/ \r ? \n / );
64
+ for (let line_idx in new_lines) {
65
+ this .lines .push (this .ansi .ansi_to_html (
66
+ new_lines[line_idx]) + ' <br/>' );
67
+ }
68
+ }
45
69
}
46
70
};
47
71
</script >
48
72
49
73
<!-- Add "scoped" attribute to limit CSS to this component only -->
50
74
<style scoped>
51
75
.ansi-output-component {
52
- height : 250px ;
53
- font-family : Consolas;
76
+ min-height : 250px ;
77
+ height : 325px ;
78
+ font-family : monospace ;
54
79
font-size : inherit ;
55
80
line-height : 2 ;
56
81
border : 1px solid #ddd ;
0 commit comments