diff --git a/exemplos/reverso/exemplo-metodos.css b/exemplos/reverso/exemplo-metodos.css index 908a7bc5..d9df51e1 100644 --- a/exemplos/reverso/exemplo-metodos.css +++ b/exemplos/reverso/exemplo-metodos.css @@ -33,12 +33,15 @@ div { a { backdrop-filter: hue-rotate(90deg); + transform: translateX(200px); } p { backdrop-filter: sepia(60%); + transform: translateY(50%); } div { backdrop-filter: saturate(5); + transform: translateZ(150); } \ No newline at end of file diff --git a/fontes/avaliador-sintatico/avaliador-sintatico-reverso.ts b/fontes/avaliador-sintatico/avaliador-sintatico-reverso.ts index 8ff8e49c..623c00f3 100644 --- a/fontes/avaliador-sintatico/avaliador-sintatico-reverso.ts +++ b/fontes/avaliador-sintatico/avaliador-sintatico-reverso.ts @@ -747,6 +747,137 @@ export class AvaliadorSintaticoReverso implements AvaliadorSintaticoInterface { lexema, [valorSepia, quantificadorSepia] ); + + case "translate": + this.consumir(tiposDeSimbolos.PARENTESE_ESQUERDO, "Esperado parêntese esquerdo após método 'translate'."); + + const valorTranslacao1 = this.avancarEDevolverAnterior(); + + let quantificadorTranlacao1; + if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { + quantificadorTranlacao1 = this.avancarEDevolverAnterior(); + } else { + quantificadorTranlacao1 = null; + } + + let valorTranslacao2; + let quantificadorTranlacao2; + if (this.simbolos[this.atual].tipo === 'VIRGULA') { + this.consumir(tiposDeSimbolos.VIRGULA, "Esperado vírgula após primeiro argumento do método 'translate'."); + valorTranslacao2 = this.avancarEDevolverAnterior(); + quantificadorTranlacao2 = this.avancarEDevolverAnterior(); + } else { + valorTranslacao2 = null; + quantificadorTranlacao2 = null; + } + + this.consumir(tiposDeSimbolos.PARENTESE_DIREITO, "Esperado parêntese direito após método 'translação'."); + return new SeletorValorReverso( + lexema, + [valorTranslacao1, quantificadorTranlacao1, valorTranslacao2, quantificadorTranlacao2] + ); + + case "translate-3d": + this.consumir(tiposDeSimbolos.PARENTESE_ESQUERDO, "Esperado parêntese esquerdo após método 'translate-3d'."); + + const valorTranslacao3d1 = this.avancarEDevolverAnterior(); + + let quantificadorTranlacao3d1; + if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { + quantificadorTranlacao3d1 = this.avancarEDevolverAnterior(); + } else { + quantificadorTranlacao3d1 = null; + } + + let valorTranslacao3d2; + let quantificadorTranlacao3d2; + if (this.simbolos[this.atual].tipo === 'VIRGULA') { + this.consumir(tiposDeSimbolos.VIRGULA, "Esperado vírgula após primeiro argumento do método 'translate-3d'."); + valorTranslacao3d2 = this.avancarEDevolverAnterior(); + if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { + quantificadorTranlacao3d2 = this.avancarEDevolverAnterior(); + } else { + quantificadorTranlacao3d2 = null; + } + } else { + valorTranslacao3d2 = null; + quantificadorTranlacao3d2 = null; + } + + let valorTranslacao3d3; + let quantificadorTranlacao3d3; + if (this.simbolos[this.atual].tipo === 'VIRGULA') { + this.consumir(tiposDeSimbolos.VIRGULA, "Esperado vírgula após primeiro argumento do método 'translate-3d'."); + valorTranslacao3d3 = this.avancarEDevolverAnterior(); + if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { + quantificadorTranlacao3d3 = this.avancarEDevolverAnterior(); + } else { + quantificadorTranlacao3d3 = null; + } + } else { + valorTranslacao3d3 = null; + quantificadorTranlacao3d3 = null; + } + + this.consumir(tiposDeSimbolos.PARENTESE_DIREITO, "Esperado parêntese direito após método 'translate-3d'."); + return new SeletorValorReverso( + lexema, + [valorTranslacao3d1, quantificadorTranlacao3d1, valorTranslacao3d2, quantificadorTranlacao3d2, valorTranslacao3d3, quantificadorTranlacao3d3] + ); + + case "translateX": + this.consumir(tiposDeSimbolos.PARENTESE_ESQUERDO, "Esperado parêntese esquerdo após método 'translateX'."); + const valorTranslaçaoX = this.avancarEDevolverAnterior(); + let quantificadorTranslaçaoX; + if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { + quantificadorTranslaçaoX = this.avancarEDevolverAnterior(); + } else { + quantificadorTranslaçaoX = null; + } + this.consumir(tiposDeSimbolos.PARENTESE_DIREITO, "Esperado parêntese direito após método 'translateX'."); + return new SeletorValorReverso( + lexema, + [valorTranslaçaoX, quantificadorTranslaçaoX] + ); + + case "translateY": + this.consumir(tiposDeSimbolos.PARENTESE_ESQUERDO, "Esperado parêntese esquerdo após método 'translateY'."); + const valorTranslaçaoY = this.avancarEDevolverAnterior(); + let quantificadorTranslaçaoY; + if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { + quantificadorTranslaçaoY = this.avancarEDevolverAnterior(); + } else { + quantificadorTranslaçaoY = null; + } + this.consumir(tiposDeSimbolos.PARENTESE_DIREITO, "Esperado parêntese direito após método 'translateY'."); + return new SeletorValorReverso( + lexema, + [valorTranslaçaoY, quantificadorTranslaçaoY] + ); + + case "translateZ": + this.consumir(tiposDeSimbolos.PARENTESE_ESQUERDO, "Esperado parêntese esquerdo após método 'translateZ'."); + const valorTranslaçaoZ = this.avancarEDevolverAnterior(); + let quantificadorTranslaçaoZ; + if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { + quantificadorTranslaçaoZ = this.avancarEDevolverAnterior(); + } else { + quantificadorTranslaçaoZ = null; + } + this.consumir(tiposDeSimbolos.PARENTESE_DIREITO, "Esperado parêntese direito após método 'translateZ'."); + return new SeletorValorReverso( + lexema, + [valorTranslaçaoZ, quantificadorTranslaçaoZ] + ); + + // case "url": + // this.consumir(tiposDeSimbolos.PARENTESE_ESQUERDO, "Esperado parêntese esquerdo após método 'url'."); + // const url = this.validacaoUrl(); + // this.consumir(tiposDeSimbolos.PARENTESE_DIREITO, "Esperado parêntese direito após argumento do método url."); + // return new SeletorValorReverso( + // lexema, + // [url] + // ); } } diff --git a/fontes/avaliador-sintatico/avaliador-sintatico.ts b/fontes/avaliador-sintatico/avaliador-sintatico.ts index de0529e3..32ba02b4 100644 --- a/fontes/avaliador-sintatico/avaliador-sintatico.ts +++ b/fontes/avaliador-sintatico/avaliador-sintatico.ts @@ -703,28 +703,28 @@ export class AvaliadorSintatico implements AvaliadorSintaticoInterface { const valorTranslacao1 = this.avancarEDevolverAnterior(); - let quantificadorTranlacao1; + let quantificadorTranslacao1; if (this.simbolos[this.atual].tipo === 'QUANTIFICADOR') { - quantificadorTranlacao1 = this.avancarEDevolverAnterior(); + quantificadorTranslacao1 = this.avancarEDevolverAnterior(); } else { - quantificadorTranlacao1 = null; + quantificadorTranslacao1 = null; } let valorTranslacao2; - let quantificadorTranlacao2; + let quantificadorTranslacao2; if (this.simbolos[this.atual].tipo === 'VIRGULA') { this.consumir(tiposDeSimbolos.VIRGULA, "Esperado vírgula após primeiro argumento do método 'translação'."); valorTranslacao2 = this.avancarEDevolverAnterior(); - quantificadorTranlacao2 = this.avancarEDevolverAnterior(); + quantificadorTranslacao2 = this.avancarEDevolverAnterior(); } else { valorTranslacao2 = null; - quantificadorTranlacao2 = null; + quantificadorTranslacao2 = null; } this.consumir(tiposDeSimbolos.PARENTESE_DIREITO, "Esperado parêntese direito após método 'translação'."); return new SeletorValor( lexema, - [valorTranslacao1, quantificadorTranlacao1, valorTranslacao2, quantificadorTranlacao2] + [valorTranslacao1, quantificadorTranslacao1, valorTranslacao2, quantificadorTranslacao2] ); case "translacao": diff --git a/fontes/modificadores/dicionario/dicionario-reverso-modificadores.ts b/fontes/modificadores/dicionario/dicionario-reverso-modificadores.ts index 5b8b252e..809472ce 100644 --- a/fontes/modificadores/dicionario/dicionario-reverso-modificadores.ts +++ b/fontes/modificadores/dicionario/dicionario-reverso-modificadores.ts @@ -397,6 +397,12 @@ import { RotateZ } from "../../valores/metodos/css/rotateZ"; import { HueRotate } from "../../valores/metodos/css/hue-rotate"; import { Saturate } from "../../valores/metodos/css/saturate"; import { Sepia } from "../../valores/metodos/css/sepia"; +import { Translate3d } from "../../valores/metodos/css/translate3d"; +import { TranslateZ } from "../../valores/metodos/css/translateZ"; +import { TranslateX } from "../../valores/metodos/css/translateX"; +import { TranslateY } from "../../valores/metodos/css/translateY"; +import { Translate } from "../../valores/metodos/css/translate"; +import { Url } from "../../valores/metodos/css/url"; export const DicionarioReversoModificadores: { [nomeCss: string]: any } = { "word-wrap": AgruparPalavra, @@ -800,4 +806,10 @@ export const DicionarioReversoModificadores: { [nomeCss: string]: any } = { "skewX": SkewX, "skewY": SkewY, "steps": Steps, + // "translate": Translate, + "translate3d": Translate3d, + "translateX": TranslateX, + "translateY": TranslateY, + "translateZ": TranslateZ, + "url": Url, } diff --git a/fontes/valores/metodos/css/translate.ts b/fontes/valores/metodos/css/translate.ts new file mode 100644 index 00000000..bc9de7c9 --- /dev/null +++ b/fontes/valores/metodos/css/translate.ts @@ -0,0 +1,35 @@ +import { Simbolo } from "../../../lexador"; +import { MetodoCss } from "./metodo-css"; + +export class Translate extends MetodoCss { + valor1: number; + quantificador1: string; + valor2: number; + quantificador2: string; + traducao: string; + + constructor(valor1: Simbolo, quantificador1: Simbolo, valor2: Simbolo, quantificador2: Simbolo) { + super(); + this.valor1 = Number(valor1.lexema); + this.quantificador1 = quantificador1 ? quantificador1.lexema : null; + this.valor2 = valor2 ? Number(valor2.lexema) : null; + this.quantificador2 = quantificador2 ? quantificador2.lexema : null; + this.traducao = 'translate'; + } + + paraTexto() { + if (!this.quantificador1 && !this.valor2 && !this.quantificador2) { + return `translacao(${this.valor1})` + } + + if (!this.valor2 && !this.quantificador2) { + this.quantificador1 === 'graus' ? this.quantificador1 = 'deg' : null; + return `translacao(${this.valor1}${this.quantificador1})` + } + + this.quantificador1 === 'graus' ? this.quantificador1 = 'deg' : null; + this.quantificador2 === 'graus' ? this.quantificador2 = 'deg' : null; + + return `translacao(${this.valor1}${this.quantificador1}, ${this.valor2}${this.quantificador2})` + } +} diff --git a/fontes/valores/metodos/css/translate3d.ts b/fontes/valores/metodos/css/translate3d.ts new file mode 100644 index 00000000..cc564fe4 --- /dev/null +++ b/fontes/valores/metodos/css/translate3d.ts @@ -0,0 +1,55 @@ +import { Simbolo } from "../../../lexador"; +import { MetodoCss } from "./metodo-css"; + +export class Translate3d extends MetodoCss { + valor1: number; + quantificador1: string; + valor2: number; + quantificador2: string; + valor3: number; + quantificador3: string; + traducao: string; + + constructor(valor1: Simbolo, quantificador1: Simbolo, valor2: Simbolo, quantificador2: Simbolo, valor3: Simbolo, quantificador3: Simbolo) { + super(); + this.valor1 = Number(valor1.lexema); + this.quantificador1 = quantificador1 ? quantificador1.lexema : null; + this.valor2 = valor2 ? Number(valor2.lexema) : null; + this.quantificador2 = quantificador2 ? quantificador2.lexema : null; + this.valor3 = valor3 ? Number(valor3.lexema) : null; + this.quantificador3 = quantificador3 ? quantificador3.lexema : null; + this.traducao = 'translate3d'; + } + + paraTexto() { + if (!this.quantificador1 && !this.valor2 && !this.quantificador2 && !this.valor3 && !this.quantificador3) { + return `translacao-3d(${this.valor1})` + } + + if (!this.quantificador1 && this.quantificador2 && this.quantificador3) { + return `translacao-3d(${this.valor1}, ${this.valor2}${this.quantificador2}, ${this.valor3}${this.quantificador3})` + } + + if (!this.quantificador2 && this.quantificador1 && this.quantificador3) { + return `translacao-3d(${this.valor1}${this.quantificador1}, ${this.valor2}, ${this.valor3}${this.quantificador3})` + } + + if (!this.quantificador3 && this.quantificador2 && this.quantificador1) { + return `translacao-3d(${this.valor1}${this.quantificador1}, ${this.valor2}${this.quantificador2}, ${this.valor3})` + } + + if (!this.quantificador1 && !this.quantificador2 && this.quantificador3) { + return `translacao-3d(${this.valor1}, ${this.valor2}, ${this.valor3}${this.quantificador3})` + } + + if (!this.quantificador3 && this.quantificador2 && !this.quantificador1) { + return `translacao-3d(${this.valor1}, ${this.valor2}${this.quantificador2}, ${this.valor3})` + } + + if (!this.quantificador3 && !this.quantificador2 && this.quantificador1) { + return `translacao-3d(${this.valor1}${this.quantificador1}, ${this.valor2}, ${this.valor3})` + } + + return `translacao-3d(${this.valor1}${this.quantificador1}, ${this.valor2}${this.quantificador2}, ${this.valor3}${this.quantificador3})` + } +} \ No newline at end of file diff --git a/fontes/valores/metodos/css/translateX.ts b/fontes/valores/metodos/css/translateX.ts new file mode 100644 index 00000000..6008a6a7 --- /dev/null +++ b/fontes/valores/metodos/css/translateX.ts @@ -0,0 +1,23 @@ +import { Simbolo } from "../../../lexador"; +import { MetodoCss } from "./metodo-css"; + +export class TranslateX extends MetodoCss { + valor: number; + quantificador: string; + traducao: string; + + constructor(valor: Simbolo, quantificador: Simbolo) { + super(); + this.valor = Number(valor.lexema); + this.quantificador = quantificador ? quantificador.lexema : null; + this.traducao = 'translateX'; + } + + paraTexto() { + if (this.quantificador) { + return `translacao-horizontal(${this.valor}${this.quantificador})` + } + + return `translacao-horizontal(${this.valor})` + } +} \ No newline at end of file diff --git a/fontes/valores/metodos/css/translateY.ts b/fontes/valores/metodos/css/translateY.ts new file mode 100644 index 00000000..688cb755 --- /dev/null +++ b/fontes/valores/metodos/css/translateY.ts @@ -0,0 +1,23 @@ +import { Simbolo } from "../../../lexador"; +import { MetodoCss } from "./metodo-css"; + +export class TranslateY extends MetodoCss { + valor: number; + quantificador: string; + traducao: string; + + constructor(valor: Simbolo, quantificador: Simbolo) { + super(); + this.valor = Number(valor.lexema); + this.quantificador = quantificador ? quantificador.lexema : null; + this.traducao = 'translateY'; + } + + paraTexto() { + if (this.quantificador) { + return `translacao-vertical(${this.valor}${this.quantificador})` + } + + return `translacao-vertical(${this.valor})` + } +} \ No newline at end of file diff --git a/fontes/valores/metodos/css/translateZ.ts b/fontes/valores/metodos/css/translateZ.ts new file mode 100644 index 00000000..99317089 --- /dev/null +++ b/fontes/valores/metodos/css/translateZ.ts @@ -0,0 +1,23 @@ +import { Simbolo } from "../../../lexador"; +import { MetodoCss } from "./metodo-css"; + +export class TranslateZ extends MetodoCss { + valor: number; + quantificador: string; + traducao: string; + + constructor(valor: Simbolo, quantificador: Simbolo) { + super(); + this.valor = Number(valor.lexema); + this.quantificador = quantificador ? quantificador.lexema : null; + this.traducao = 'translateZ'; + } + + paraTexto() { + if (this.quantificador) { + return `translacao-eixo-z(${this.valor}${this.quantificador})` + } + + return `translacao-eixo-z(${this.valor})` + } +} \ No newline at end of file diff --git a/fontes/valores/metodos/css/url.ts b/fontes/valores/metodos/css/url.ts new file mode 100644 index 00000000..da28eb9b --- /dev/null +++ b/fontes/valores/metodos/css/url.ts @@ -0,0 +1,16 @@ +import { MetodoCss } from "./metodo-css"; + +export class Url extends MetodoCss { + link: string; + traducao: string; + + constructor(link: string) { + super(); + this.link = link; + this.traducao = 'url'; + } + + paraTexto() { + return `url('${this.link}')` + } +} \ No newline at end of file