Xterm.js: Разрешить инвертировать выделение

Созданный на 10 июн. 2017  ·  4Комментарии  ·  Источник: xtermjs/xterm.js

Поскольку мы больше не можем использовать ::selection это больше невозможно, как в текущей версии VS Code.

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

При подходе к этой проблеме есть несколько проблем:

  • Выделение в настоящее время отображается под текстом в строках, который также может иметь цвет фона. Это разделение хорошо, и было бы неплохо полностью отделить визуализацию выделения от визуализации строк.
  • Поскольку не каждый элемент в .xterm-rows не заключен в отдельный элемент, выбор может начинаться или заканчиваться в середине элемента, что ограничивает некоторые решения.

Одна идея:

  • Воспользуйтесь идеей, что выделение разделено на 3 части; верхний ряд, средние ряды, нижний ряд (как в https://github.com/sourcelair/xterm.js/pull/691)
  • Элементы средней строки в .xterm-rows могут быть помечены классом xterm-invert-selection который инвертирует цвета фона и переднего плана с помощью CSS.
  • Верхнюю и нижнюю строки можно нарисовать над строками с помощью z-index: 1 и фактическое содержимое строки добавляется к выделенному. Затем можно добавить aria-hidden в качестве меры предосторожности, чтобы он не считывался дважды.

Не уверен, что это правильное решение, мне не очень нравится дублирование текста в приведенном выше решении, но, по крайней мере, это всего лишь 2 строки.

areselection out-of-scope typenhancement
Источник
picture Tyriar
👍1

Самый полезный комментарий

У меня сейчас нет времени на пиар, но я обнаружил, что мы можем использовать свойство css mix-blend-mode чтобы сделать это с помощью рендерера с очень небольшими усилиями:

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

Кроме того, даже с непрозрачным цветом выделения это сделает видимыми передний план, выделение и фон:

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

К сожалению, Edge atm не поддерживает его.

picture mofux 5 янв. 2018
👍2

Все 4 Комментарий

@Tyriar Поразмыслив , я боюсь, что ваша идея не сработает, когда мы отправим поддержку True Color. Боюсь, что нам придется разделить фон / выделение / передний план на отдельные слои, а затем манипулировать столбцами переднего плана и фона, которые находятся в выделении. Я попробую разделить его на слои, как только мы объединим truecolor.

mofux picture mofux 25 июл. 2017

Это более приятно, я не думаю, что мы хотели бы пойти на компромисс между производительностью / архитектурой или чем-то еще, чтобы это стало возможным. https://github.com/sourcelair/xterm.js/issues/720 гораздо важнее imo.

Tyriar picture Tyriar 28 июл. 2017
👍2

У меня сейчас нет времени на пиар, но я обнаружил, что мы можем использовать свойство css mix-blend-mode чтобы сделать это с помощью рендерера с очень небольшими усилиями:

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

Кроме того, даже с непрозрачным цветом выделения это сделает видимыми передний план, выделение и фон:

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

К сожалению, Edge atm не поддерживает его.

mofux picture mofux 5 янв. 2018
👍2

Закрытие, поскольку это намного сложнее, чем кажется на первый взгляд правильным, и никто за это не голосовал. Плюс был бы еще один вариант.

Tyriar picture Tyriar 7 окт. 2019
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

tandatle picture tandatle  ·  3Комментарии
LB-J picture LB-J  ·  3Комментарии
Mlocik97-issues picture Mlocik97-issues  ·  3Комментарии
circuitry2 picture circuitry2  ·  4Комментарии
chris-tse picture chris-tse  ·  4Комментарии