DLL FMXPixie.dll для Inno Setup 20.10

Небольшое обновление FMXPixie

Добавлена настройка полос прокрутки, поскольку стандартного CSS-оформления для них недостаточно.
Теперь можно настраивать ширину, отступ, минимальную высоту ползунка, цвета ползунка и дорожки, а также видимость скроллбара.

Спойлер: Новые методы:

code_language.pascal:

procedure SetScrollbarWidth(FValue: Integer);
procedure SetScrollbarMargin(FValue: Integer);
procedure SetScrollbarMinThumbHeight(FValue: Integer);
procedure SetScrollbarThumbColor(FColor: TAlphaColor);
procedure SetScrollbarTrackColor(FColor: TAlphaColor);
procedure SetScrollbarVisibility(FType: TPixieScrollbarVisibility);

Спойлер: Пример использования:

Код:

HtmlView.SetScrollbarWidth(8);
HtmlView.SetScrollbarMargin(2);
HtmlView.SetScrollbarMinThumbHeight(24);
HtmlView.SetScrollbarThumbColor($FF60A5FA);
HtmlView.SetScrollbarTrackColor($FF17243A);

Также добавлены новые компоненты:

FPixieSvgView
Отображение SVG. загрузка SVG, масштаб, выравнивание, размеры изображения и оформление прозрачного фона.

FPixieTagBar
Интерактивные цветные теги: создание, удаление, редактирование, выбор и смена цвета.

FPixieMarkdownView
Рендеринг Markdown. Компонент наследует общую FMX-базу HTML-представления. Специфические возможности - загрузка Markdown и UseDefaultStyles.

Раньше Pixie сам обрабатывал наведение и менял CSS

XML:

.card:hover {
  background: green;
}

Но выполнить свой код Pascal Script именно в момент наведения было нельзя. Теперь можно.

Пример: выполнить действие при наведении
Допустим, у HTML-элемента есть id="tile-alpha". Мы хотим при наведении изменить текст другого элемента на форме, а при уходе курсора вернуть другой текст.

code_language.pascal:

procedure ViewElementMouseEvent(
  Sender, El: TObject;
  Event: TPixieMouseEvent);
var
  Id, S: String;
  H: NativeInt;
begin
  if El = nil then
    Exit;

  Elem.FCreate(NativeInt(El));
  Id := Elem.GetAttr('id', '');

  { Нас интересует только эта карточка }
  if Id <> 'tile-alpha' then
    Exit;

  case Event of
    meEnter:
      S := 'Курсор над карточкой Alpha';

    meLeave:
      S := 'Курсор ушёл с карточки Alpha';
  end;

  { Обновляем элемент status в другом HTML-документе }
  H := StatusDoc.GetElementById('status');
  if H <> 0 then
  begin
    StatusDoc.SetElementText(H, S);
    StatusDoc.Changed;
  end;
end;

Здесь Elem - объект TFPixieElement, а StatusDoc - документ, в котором есть элемент <escape><div id="status">Ожидание...</div></escape>

Подключение обработчика выполняется один раз:

code_language.pascal:

View.OnElementMouseEvent(@ViewElementMouseEvent);

Как это работает​

• meEnter - курсор вошёл на элемент.
• meLeave - курсор покинул элемент.
• Id позволяет выбрать нужный HTML-элемент.
• Внутри case можно выполнять свой код: вызвать процедуру, изменить значение, обновить другую часть интерфейса и так далее.

То есть теперь можно обрабатывать наведение обычным кодом Inno Setup, а не только стилями CSS.

Это один общий обработчик OnElementMouseEvent, а не отдельное свойство OnEnter у каждой HTML-карточки. Но по смыслу ты получаешь именно нужное поведение: проверяешь элемент и выполняешь своё действие при meEnter или meLeave.

Описание изменений:

Исправлена потеря событий клика при активном или оставшемся выделении текста.

• Исправлена обработка MouseUp: вместо HasSelection используется HasRangeSelection, чтобы отличать фактический диапазон выделения от состояния внутренней карты выделения.
• Добавлена очистка предыдущего выделения при новом нажатии мыши, чтобы оно не блокировало обработку следующего клика.
• Добавлен порог перетаскивания 4 CSS-пикселя: небольшие движения мыши больше не запускают выделение текста преждевременно.
• Добавлено отслеживание начальных координат мыши и состояния порога перетаскивания.

Результат: обычные и быстрые клики обрабатываются стабильно, в том числе после выделения текста. Исправление находится в ядре Pixie.