Skip to content

Commit 7e9fc70

Browse files
AraozuAraozu
committed
Agregar indicador al editor cuando se selecciona una linea vacia.
1 parent 71f3f65 commit 7e9fc70

File tree

3 files changed

+123
-109
lines changed

3 files changed

+123
-109
lines changed

‎src/components/Editor/editor.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template lang="pug">
22
div.contenedor-editor(:style="estiloVariables")
3-
span.letra-prueba-tamano(style="font-family: 'JetBrains Mono', monospace" ref="refElemento")
3+
span.letra-prueba-tamano(style="font-family: 'Source Code Pro', monospace" ref="refElemento")
44
| i_i_i_i_i_
55
div.contenedor-codigo.cont.Fondo-alt(:class="claseContNumLineas")
66
div.cont-num-lineas
@@ -112,7 +112,12 @@ export default {
112112
}
113113
// Si la selección no termina en esta linea
114114
else {
115-
resaltadoLineas.value[lineaActual] = [0, largoLinea];
115+
// Si la linea resaltada esta vacia asignar -1
116+
if (largoLinea === 0) {
117+
resaltadoLineas.value[lineaActual] = [-1, -1];
118+
} else {
119+
resaltadoLineas.value[lineaActual] = [0, largoLinea];
120+
}
116121
}
117122
118123
}

‎src/components/Editor/linea-editor-codigo.vue‎

Lines changed: 72 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -10,83 +10,92 @@ div.LineaCodigo.padding-linea-codigo.cont-linea-codigo
1010
</template>
1111

1212
<script>
13-
import {ref, computed, watchEffect} from "vue";
14-
import {obtenerTokens, escaparToken} from "../codigo/kanAHTML.coffee";
15-
16-
export default {
17-
name: "linea-editor-codigo.vue",
18-
props: {
19-
linea: {
20-
type: String,
21-
required: true
22-
},
23-
resaltadoArr: {
24-
type: Array,
25-
required: true
26-
},
27-
anchoE: {
28-
type: Number,
29-
required: true
30-
}
13+
import {ref, computed, watchEffect} from "vue";
14+
import {obtenerTokens, escaparToken} from "../codigo/kanAHTML.coffee";
15+
16+
export default {
17+
name: "linea-editor-codigo.vue",
18+
props: {
19+
linea: {
20+
type: String,
21+
required: true
22+
},
23+
resaltadoArr: {
24+
type: Array,
25+
required: true
3126
},
32-
setup(props) {
33-
const datosTokens = computed(() =>
34-
obtenerTokens(props.linea).map((t) => {
35-
const [htmlToken, claseAdicional] = escaparToken(t);
36-
return [`token ${t.tipo} ${claseAdicional}`, htmlToken];
37-
})
38-
);
39-
40-
const estilosResaltado = ref({});
41-
const anchoE = computed(() => props.anchoE);
42-
43-
const manejarResaltado = () => {
44-
const [izq, der] = props.resaltadoArr;
45-
46-
if (izq !== der ) {
47-
estilosResaltado.value = {
48-
transform: `translateX(${izq * anchoE.value}px)`,
49-
width: `${(der - izq) * anchoE.value}px`
50-
};
51-
} else {
52-
estilosResaltado.value = {};
53-
}
54-
};
55-
56-
watchEffect(manejarResaltado);
57-
58-
return {
59-
estilosResaltado,
60-
datosTokens
27+
anchoE: {
28+
type: Number,
29+
required: true
30+
}
31+
},
32+
setup(props) {
33+
const datosTokens = computed(() =>
34+
obtenerTokens(props.linea).map((t) => {
35+
const [htmlToken, claseAdicional] = escaparToken(t);
36+
return [`token ${t.tipo} ${claseAdicional}`, htmlToken];
37+
})
38+
);
39+
40+
const estilosResaltado = ref({});
41+
const anchoE = computed(() => props.anchoE);
42+
43+
const manejarResaltado = () => {
44+
const [izq, der] = props.resaltadoArr;
45+
46+
// Resaltar la sección adecuada segun izq y der
47+
if (izq !== der) {
48+
estilosResaltado.value = {
49+
transform: `translateX(${izq * anchoE.value}px)`,
50+
width: `${(der - izq) * anchoE.value}px`
51+
};
52+
}
53+
// Si se recibe -1 significa que se está resaltando la linea, pero esta está vacia.
54+
else if (izq === -1 && der === -1) {
55+
estilosResaltado.value = {
56+
width: "100%"
57+
};
6158
}
59+
// Eliminar resaltado
60+
else {
61+
estilosResaltado.value = {};
62+
}
63+
};
64+
65+
watchEffect(manejarResaltado);
66+
67+
return {
68+
estilosResaltado,
69+
datosTokens
6270
}
6371
}
72+
}
6473
6574
</script>
6675

6776
<style scoped lang="sass">
6877
69-
.cont-linea-codigo, .resaltado
70-
line-height: calc(var(--altoE) * 1.1)
71-
height: calc(var(--altoE) * 1.1)
78+
.cont-linea-codigo, .resaltado
79+
line-height: calc(var(--altoE) * 1.1)
80+
height: calc(var(--altoE) * 1.1)
7281
7382
74-
.padding-linea-codigo
75-
padding: 0 var(--anchoE)
83+
.padding-linea-codigo
84+
padding: 0 var(--anchoE)
7685
7786
78-
.cont-linea-codigo
79-
position: relative
87+
.cont-linea-codigo
88+
position: relative
8089
8190
82-
.resaltado
83-
position: absolute
84-
top: 0
85-
left: calc(var(--anchoE) * var(--numDigitos))
86-
height: 100%
87-
width: 0
88-
background-color: var(--color-cod)
89-
opacity: 0.25
91+
.resaltado
92+
position: absolute
93+
top: 0
94+
left: calc(var(--anchoE) * var(--numDigitos))
95+
height: 100%
96+
width: 0
97+
background-color: var(--color-cod)
98+
opacity: 0.25
9099
91-
//
100+
//
92101
</style>

‎src/views/Editor.vue‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,62 +7,62 @@ div.pad
77
</template>
88

99
<script>
10-
import {ref, computed, watchEffect, onMounted} from "vue";
11-
import Codigo from "@/components/codigo/codigo";
12-
import Cursor from "@/components/Editor/cursor";
13-
import LineaEditorCodigo from "@/components/Editor/linea-editor-codigo"
14-
import editorV from "@/components/Editor/editor";
10+
import {ref, computed, watchEffect, onMounted} from "vue";
11+
import Codigo from "@/components/codigo/codigo";
12+
import Cursor from "@/components/Editor/cursor";
13+
import LineaEditorCodigo from "@/components/Editor/linea-editor-codigo"
14+
import editorV from "@/components/Editor/editor";
1515
16-
export default {
17-
name: "Editor",
18-
components: {LineaEditorCodigo, Cursor, Codigo, editorV},
19-
setup() {
20-
const codigo = ref(`console.log "Hola mundo"\nconst s = 20 - 40\nconsole.log "Adios mundo"\nlet a = 80\n`);
16+
export default {
17+
name: "Editor",
18+
components: {LineaEditorCodigo, Cursor, Codigo, editorV},
19+
setup() {
20+
const codigo = ref(`console.log "Hola mundo"\nconst s = 20 - 40\nconsole.log "Adios mundo"\nlet a = 80\n`);
2121
22-
return {
23-
codigo
24-
}
22+
return {
23+
codigo
2524
}
2625
}
26+
}
2727
2828
</script>
2929

3030
<style scoped lang="sass">
3131
32-
.contenedor-codigo
33-
box-sizing: border-box
34-
position: absolute
35-
top: 0
36-
left: 0
37-
width: 100%
38-
min-height: 15rem
32+
.contenedor-codigo
33+
box-sizing: border-box
34+
position: absolute
35+
top: 0
36+
left: 0
37+
width: 100%
38+
min-height: 15rem
3939
4040
41-
.codigo-raw
42-
position: absolute
43-
top: 0
44-
left: 0
45-
opacity: 0
46-
box-sizing: border-box
47-
width: 100%
48-
min-height: 15rem
49-
resize: none
50-
line-height: 1.35rem
51-
font:
52-
family: "JetBrains Mono", monospace
53-
size: var(--tamanoFuenteCodigo)
54-
padding: 10px 30px 10px calc(15px + 1.75rem)
55-
margin: 0
56-
border: solid 1px var(--color-borde)
57-
background-color: var(--color-cod-fondo)
58-
color: var(--color-cod)
41+
.codigo-raw
42+
position: absolute
43+
top: 0
44+
left: 0
45+
opacity: 0
46+
box-sizing: border-box
47+
width: 100%
48+
min-height: 15rem
49+
resize: none
50+
line-height: 1.35rem
51+
font:
52+
family: "JetBrains Mono", monospace
53+
size: var(--tamanoFuenteCodigo)
54+
padding: 10px 30px 10px calc(15px + 1.75rem)
55+
margin: 0
56+
border: solid 1px var(--color-borde)
57+
background-color: var(--color-cod-fondo)
58+
color: var(--color-cod)
5959
60-
.contenedor-test
61-
width: 50rem
62-
position: absolute
60+
.contenedor-test
61+
width: 50rem
62+
position: absolute
6363
64-
.pad
65-
padding: 0 2.5rem
64+
.pad
65+
padding: 0 2.5rem
6666
67-
//
67+
//
6868
</style>

0 commit comments

Comments
 (0)