Xterm.js: Autoriser l'inversion de la sélection

Créé le 10 juin 2017  ·  4Commentaires  ·  Source: xtermjs/xterm.js

Comme nous ne pouvons plus utiliser ::selection ce n'est plus possible comme c'est le cas avec la version actuelle de VS Code.

screen shot 2017-06-09 at 4 40 40 pm

Il y a quelques défis à relever lors de l'approche de ce problème :

  • La sélection est actuellement dessinée sous le texte dans les lignes, qui peut également avoir une couleur d'arrière-plan. Cette séparation est bonne et ce serait une bonne idée de garder le rendu de la sélection complètement séparé du rendu des lignes.
  • Étant donné que tous les éléments de .xterm-rows ne sont pas enveloppés dans leur propre élément, la sélection peut commencer ou se terminer au milieu d'un élément, ce qui restreint certaines des solutions.

Une idée :

  • Tirez parti de l'idée que la sélection est divisée en 3 morceaux ; rangée du haut, rangées du milieu, rangée du bas (comme dans https://github.com/sourcelair/xterm.js/pull/691)
  • Les éléments de la rangée du milieu dans .xterm-rows peuvent être marqués avec la classe xterm-invert-selection qui inverse les couleurs d'arrière-plan et de premier plan via CSS.
  • Les lignes du haut et du bas peuvent être dessinées au-dessus des lignes à l'aide de z-index: 1 et le contenu réel de la ligne est ajouté à la sélection. aria-hidden peuvent ensuite être ajoutés pour faire bonne mesure afin de s'assurer qu'il n'est pas lu deux fois.

Je ne sais pas si c'est la bonne solution, je n'aime pas vraiment la duplication de texte dans la solution ci-dessus mais au moins c'est juste sur 2 lignes.

areselection out-of-scope typenhancement

Commentaire le plus utile

Je n'ai pas le temps pour un PR en ce moment, mais j'ai découvert que nous pouvons utiliser la propriété css mix-blend-mode pour faire cela avec le moteur de rendu avec très peu d'effort :

.xterm-selection-layer {
    mix-blend-mode: exclusion;
}

De plus, même avec une couleur de sélection non opaque, le premier plan, la sélection et l'arrière-plan seront visibles :

.xterm-selection-layer {
    mix-blend-mode: multiply;
}

Malheureusement, il ne semble pas être pris en charge par Edge atm.

Tous les 4 commentaires

@Tyriar En

C'est plus agréable à avoir, je ne pense pas que nous voudrions compromettre les performances/architecture ou quoi que ce soit pour rendre cela possible. https://github.com/sourcelair/xterm.js/issues/720 est beaucoup plus important imo.

Je n'ai pas le temps pour un PR en ce moment, mais j'ai découvert que nous pouvons utiliser la propriété css mix-blend-mode pour faire cela avec le moteur de rendu avec très peu d'effort :

.xterm-selection-layer {
    mix-blend-mode: exclusion;
}

De plus, même avec une couleur de sélection non opaque, le premier plan, la sélection et l'arrière-plan seront visibles :

.xterm-selection-layer {
    mix-blend-mode: multiply;
}

Malheureusement, il ne semble pas être pris en charge par Edge atm.

Clôture car c'est beaucoup plus complexe qu'il n'y paraît au départ et personne n'a voté pour. De plus, ce serait une autre option.

Cette page vous a été utile?
0 / 5 - 0 notes