Xterm.js: Permitir que a seleção seja invertida
Como não podemos mais usar ::selection isso não é mais possível, pois é com a versão atual do VS Code.
Existem alguns desafios ao abordar este problema:
- A seleção é desenhada atualmente abaixo do texto nas linhas, que também podem ter uma cor de fundo. Essa separação é boa e seria uma boa ideia manter a renderização da seleção completamente separada da renderização das linhas.
- Como nem todos os elementos em .xterm-rows não são agrupados em seu próprio elemento, a seleção pode começar ou terminar no meio de um elemento, o que restringe algumas das soluções.
Uma ideia:
- Aproveite a ideia de que a seleção é dividida em 3 partes; linha superior, linhas do meio, linha inferior (como em https://github.com/sourcelair/xterm.js/pull/691)
- Os elementos da linha do meio dentro de
.xterm-rowspodem ser marcados com a classexterm-invert-selectionque inverte as cores de fundo e de primeiro plano via CSS. - As linhas superior e inferior podem ser desenhadas acima das linhas usando
z-index: 1e o conteúdo real da linha é adicionado à seleção.aria-hiddenpode então ser adicionado para garantir que não seja lido duas vezes.
Não tenho certeza se é a solução certa, eu realmente não gosto da duplicação de texto na solução acima, mas pelo menos é apenas em 2 linhas.
Tyriar
Todos 4 comentários
@Tyriar Pensando bem sobre isso, temo que sua ideia acima não funcionará assim que enviarmos o suporte true-color. Infelizmente, temos que dividir o fundo / seleção / primeiro plano em camadas separadas e, em seguida, manipular as colunas de primeiro e segundo plano que estão dentro da seleção. Vou tentar dividi-lo em camadas assim que tivermos o truecolor mesclado.
mofux
em 25 jul. 2017
Isso é mais bom de se ter, não acho que gostaríamos de comprometer o desempenho / arquitetura ou qualquer coisa para tornar isso possível. https://github.com/sourcelair/xterm.js/issues/720 é muito mais importante imo.
Tyriar
em 28 jul. 2017
Não tenho tempo para uma RP no momento, mas descobri que podemos usar a propriedade css mix-blend-mode para fazer isso com o renderizador com muito pouco esforço:
.xterm-selection-layer {
mix-blend-mode: exclusion;
}
Além disso, mesmo com uma cor de seleção não opaca, isso tornará o primeiro plano, a seleção e o plano de fundo visíveis:
.xterm-selection-layer {
mix-blend-mode: multiply;
}
Infelizmente, não parece ser compatível com o Edge atm.
mofux
em 5 jan. 2018
O fechamento é muito mais complexo do que inicialmente parece ser correto e ninguém votou a favor. Além disso, seria mais uma opção.
Tyriar
em 7 out. 2019
Questões relacionadas
7PH
·
4Comentários
fabiospampinato
·
4Comentários
circuitry2
·
4Comentários
jerch
·
3Comentários
zhangjie2012
·
3Comentários
Comentários muito úteis
Não tenho tempo para uma RP no momento, mas descobri que podemos usar a propriedade css
mix-blend-modepara fazer isso com o renderizador com muito pouco esforço:Além disso, mesmo com uma cor de seleção não opaca, isso tornará o primeiro plano, a seleção e o plano de fundo visíveis:
Infelizmente, não parece ser compatível com o Edge atm.