Анонс Bryntum Suite 5.0

Сегодня мы очень рады объявить о выпуске новой версии 5.0 нашего набора веб-компонентов Bryntum после более чем года разработки. Он наполнен новыми функциями, а также новыми классными демонстрационными версиями, и в этом посте я дам обзор самых больших улучшений. У нас также есть ряд подробных технических статей.

Кроме того, не пропустите наш предстоящий вебинар 16 марта, на котором вы получите живую демонстрацию всех новых функций.

Улучшенное внешнее перетаскивание

Одна из наиболее частых тем на наших форумах поддержки и предпродажных звонках связана с перетаскиванием задач или объектов из внешней сетки на временную шкалу. Мы решили реорганизовать, упростить и отшлифовать нашу утилиту перетаскивания, и в версии 5.0 перетаскивание из внешних источников и во внешние источники стало намного проще реализовать. Существующие демонстрации перетаскивания были обновлены и добавлено несколько новых.

Мы также сделали руководства, показывающие, как реализовать эти потоки перетаскивания, вы можете найти их в нашей Документации по API.

Новый виджет использования ресурсов

В Scheduler Pro и Gantt появился новый виджет ResourceUtilization, показывающий использование ресурсов с разбивкой по задачам и единицам времени. Это очень полезная визуализация при попытке избежать перераспределения ресурсов. Чтобы узнать больше, обратитесь к Документации по API или попробуйте одну из новых демонстраций.

Новый интерфейс разрешения конфликтов

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

Функция группировки дерева

Компонент Grid имеет новую функцию TreeGroup, которая может преобразовывать как плоские, так и иерархические наборы данных в новые деревья. Родительские levels в новом дереве определяются значениями каждой записи для массива полей (или функций). Ниже вы можете увидеть простой пример, который дает дерево с двумя родительскими уровнями, где первый уровень сгруппирован по значению поля города, а второй уровень сгруппирован по возрасту.

const tree = new TreeGrid({ 
    appendTo : 'container', 
    features : { 
        treeGroup : { levels : ['manager', 'airline'] } 
    } 
});

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

Обратите внимание, что сгенерированные родители доступны только для чтения. Эта функция также поддерживается диаграммой Ганта.

Улучшения производительности

В версии 5.0 время начального рендеринга событий и задач в Scheduler Pro и Gantt было значительно улучшено. Раньше мы откладывали первоначальный рендеринг до тех пор, пока движок не нормализовал и не скорректировал все данные расписания. В последнем релизе мы теперь сразу визуализируем начальные данные и позволяем движку работать в фоновом режиме. Вы можете сравнить предыдущий подход с новым в этой демонстрации Ганта.

Функция выделения родительской области

Мы добавили в нашу диаграмму Ганта новую функцию под названием Родительская область, которая выделяет область, инкапсулирующую все дочерние задачи родителя. Посмотрите это в действии в новой демонстрации родительской области.

Визуализация календарей и промежутков времени

И Gantt, и Scheduler Pro содержат множество данных, касающихся доступности ресурсов и задач, данных, которые конечному пользователю важно увидеть и понять. Если конечный пользователь не может перетащить задачу в определенное место, должен быть понятный пользовательский интерфейс, раскрывающий причины. Поэтому мы добавили несколько новых функций и демонстраций, чтобы помочь вам визуализировать подробные правила вашего расписания и проекта в Scheduler Pro и Gantt.

Новая функция TimeSpanHighlight позволяет временно выделить любой промежуток времени в расписании. В новом демо highlight-time-spans в Гантте используется для отображения границ проекта при перетаскивании задачи:

Эта функция также значительно улучшает взаимодействие с пользователем при изменении расписания задач в Scheduler Pro. Вы увидите, как в демо highlight-time-spans, которое показывает график доставки посылок, где каждая посылка должна быть доставлена ​​в указанный временной интервал, который подсвечивается при перетаскивании событий.

Scheduler Pro также имеет новую функцию CalendarHighlight, которая позволяет визуализировать календарь доступности ресурса или события. Мы сделали две новые демонстрации, чтобы продемонстрировать это, ниже вы можете увидеть демонстрацию highlight-resource-calendars, подсвечивающую календари ресурсов:

И highlight-event-calendars, показывающий, как подсвечивать календари событий:

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

Функция объединения ячеек / диапазона строк

Grid имеет новую функцию MergeCells, которая может объединять ячейки между строками, содержащими одно и то же значение в столбце, по которому сортируется Grid, по существу создавая ячейки, охватывающие строки. Его также можно использовать в продуктах на основе Grid, таких как Scheduler, как показано в новой демонстрации merge-cells.

Время в пути / буфер событий

Одним из самых популярных запросов за последние несколько лет является возможность определения временного интервала до и после события. В приложениях типа выездного обслуживания техническим специалистам обычно необходимо выезжать на место, прежде чем выполнять работу. На заводе может потребоваться подготовить машину перед работой и охладить ее после работы. Новая функция EventBuffer в Scheduler Pro позволяет очень легко визуализировать такие понятия, как время в пути или время установки и отключения. Попробуйте в новой демоверсии путешествия:

const scheduler = new SchedulerPro({ 
    appendTo : 'container', 
    features : { 
        eventBuffer : { 
           showDuration : true, 
           tooltipTemplate : ({ duration }) => `Travel time: ${duration}` 
        } 
    } 
});

Объединение нескольких компонентов Bryntum

В версии 5.0 мы значительно упростили объединение нескольких компонентов Bryntum в одном приложении, введя тонкие пакеты как для JavaScript, так и для CSS. Разница между тонкими пакетами и нашими старыми пакетами заключается в том, что тонкие пакеты содержат только код для конкретного продукта, что позволяет объединять несколько продуктов без многократной загрузки общего кода. Этот подход также гарантирует, что доступна только одна версия класса, избегая некоторых ловушек, связанных с объединением старых пакетов. Этот фрагмент иллюстрирует использование старого и нового:

// Old, all imports from a single bundle 
import { Scheduler, DateHelper } from 'scheduler.module.js'; 
// New (optional), import from the correct products thin bundle import { DateHelper } from 'core.module.thin.js'; 
import { Scheduler } from 'scheduler.module.thin.js';

Обратите внимание, что использование тонких пакетов не является обязательным, и если вы используете один компонент Bryntum, использование старых пакетов модулей снижает накладные расходы.

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

Модель проекта Ганта в Angular, React и Vue

Еще одним шагом к упрощению объединения нескольких продуктов Bryntum в одном приложении является введение отдельного компонента ProjectModel для Angular, React и Vue. Это позволяет создать один проект и разделить его между несколькими компонентами так же, как это делается в приложениях без фреймворка. Этот фрагмент иллюстрирует, как это делается в React:

// Project holding all data 
<BryntumProjectModel ref={project} calendars={calendars} tasks={tasks} assignments={assignments} dependencies={dependencies} resources={resources} timeRanges={timeRanges} /> 
// Gantt using the project 
<BryntumGantt ref={gantt} project={project} />

Для каждой платформы есть новая демонстрация под названием «inline-data», показывающая, как ее использовать (и новое руководство по привязке данных для каждой платформы):

Компоненты React теперь используют комплект модулей ES.

Оболочка React и сопутствующие демонстрации теперь используют пакет модуля ES вместо устаревшего пакета UMD. Помимо того, что это более современный подход, пакет немного меньше и более производительный. Если вы используете нашу оболочку React, вам необходимо соответствующим образом настроить импорт:

// 4.x imports from the umd bundle 
import { TaskModel } from '@bryntum/react/gantt.umd.js'; 
// 5.x imports from the module bundle (which is the default bundle for the package) import { TaskModel } from '@bryntum/react';

Оболочка Vue и демоверсии уже используют комплект модулей ES, и планируется перенести Angular в версию 5.1. Обратите внимание, что пакет UMD по-прежнему будет доступен, но не будет использоваться по умолчанию.

Извлечение тестового примера

Сообщая нам о сложно воспроизводимой проблеме на форуме поддержки Bryntum, мы часто запрашиваем тестовый пример, показывающий проблему. Хороший тестовый пример значительно сокращает время, которое требуется от сообщения об ошибке до момента, когда исправление может быть установлено и выпущено.

Чтобы упростить процесс создания тестового примера, мы внедрили новую функцию под названием downloadTestCase() для всех продуктов Bryntum. При его выполнении все значения конфигурации, используемые вашим приложением, и текущий набор данных собираются и компилируются в приложение JavaScript, которое мы можем запускать и отлаживать.

Приложение, скорее всего, потребует небольшой ручной настройки, прежде чем вы сможете отправить его нам, но мы надеемся, что это облегчит вам создание тестового примера. Запустите grid.downloadTestCase() на консоли в любой демонстрации Grid, чтобы попробовать. Любые отзывы о том, как это можно улучшить, будут оценены!

Улучшения боковой панели календаря

Выбор даты на боковой панели теперь можно настроить так, чтобы он отображал небольшой маркер для ячеек дня, содержащих события. Это полезно для конечных пользователей, которые ищут свободный день или наоборот.

calendar = new Calendar({ 
    // Show event presence as bullets in the date picker cells     
    datePicker : { events : true } 
});

В других новостях…

Релиз содержит еще больше новых функций и улучшений, таких как:

• События в планировщике и планировщике Pro теперь абсолютно позиционированы, что позволяет нам использовать нативное липкое поведение (дешевле).
• Записи теперь можно сделать только для чтения, чтобы предотвратить редактирование
• Новые виджеты Радиокнопка и РадиоГруппа
• Виджеты теперь могут автоматически сохранять состояние изменений
• Встроенная версия FontAwesome Free была обновлена ​​до v6, которая включает в себя несколько спонсируемых Bryntum значков Gantt, используемых в меню задач (например, этот)

Подведение итогов

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

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

Скачать бесплатную пробную версию 5.0

Первоначально опубликовано на https://www.bryntum.com 23 февраля 2022 г.