DLL FMXPixie.dll для Inno Setup 29.10

FMXPixie - экспериментальные CSS Transition через DisplayLink

Добавил экспериментальную реализацию CSS-переходов на базе FMX DisplayLink.

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

Что добавлено

1. Анимация opacity.
Плавное изменение прозрачности элемента при наведении и уходе курсора.

XML:

css
.card {
  opacity: 0.4;
  transition: opacity 180ms ease-out;
}

.card:hover {
  opacity: 1;
}

2. Анимация background-color
Плавный переход между цветами фона.

XML:

css
.card {
  background-color: #164e63;
  transition: background-color 180ms linear;
}

.card:hover {
  background-color: #0f766e;
}

3. Анимация transform
Интерполяция совместимых наборов операций transform, в том числе translate() и scale().

XML:

css
.card {
  transform: translate(0px, 0px) scale(1);
  transition: transform 180ms ease-out;
}

.card:hover {
  transform: translate(8px, -4px) scale(1.05);
}

Важно: transform: scale() изменяет визуальный размер элемента, но не перестраивает layout и не сдвигает соседние элементы. Это обычное поведение CSS.

4. Анимация width и height с перерасчётом layout
Добавлена отдельная реализация анимации размеров, при которой промежуточные значения передаются в движок компоновки. Это позволяет соседним элементам плавно менять положение вслед за изменением ширины или высоты.

XML:

css
.panel {
  width: 240px;
  height: 80px;
  transition: width 240ms ease-out, height 240ms ease-out;
}

.panel:hover {
  width: 340px;
  height: 140px;
}

В отличие от transform: scale(), здесь изменяются реальные размеры блока. Следующие элементы должны перемещаться по мере перерасчёта layout.
На первом этапе плавно интерполируются явные абсолютные размеры, представленные в пикселях. Значения auto, проценты и calc(), min(), max(), clamp() пока не поддерживаются как плавно интерполируемые размеры.

Параметры переходов
Используются существующие CSS-механизмы настройки переходов:

- transition - сокращённая запись.
- transition-property - выбор анимируемых свойств.
- transition-duration - продолжительность.
- transition-timing-function - функция скорости.
- transition-delay - задержка перед началом.
- transition: all - применение к поддерживаемым свойствам.
- Несколько свойств с разными продолжительностью, функцией скорости и задержкой.

Поддерживаются распознаваемые движком функции linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps() и cubic-bezier().

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

Все примеры находятся в каталоге Examples
FMXPixie - CSS Transition DisplayLink Test.iss
FMXPixie - CSS Size Layout Transition Test.iss

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

Добавлен аудиоплеер для фоновой музыки в установщике.

Воспроизведение MP3 без BASS.
Кнопки Play/Pause и регулировка громкости.
Добавлен повтор воспроизведения (Loop).
Добавлен пример приветственной страницы установщика с управлением музыкой.
FMXPixie - AudioPlayer Demo.iss

Добавил новую обёртку FPixiePaintBox.

Это компонент для собственной отрисовки: линии, фигуры, заливки, дуги, текст и т. д. Можно настраивать цвета, перо, шрифт и управлять перерисовкой.

Пригодится, когда возможностей HTML/CSS в Pixie не хватает. Например, для небольших графиков, индикаторов, схем, нестандартных элементов интерфейса или динамической графики.

Пример-тест-демо в комплекте FMXPixie - PaintBox Demo.iss

Небольшое обновление 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.