# What's new in Gantt v5.6.0

## Task project border treatment

In this release `TaskModel` has got new
[projectConstraintResolution](#Gantt/model/TaskModel#field-projectConstraintResolution) field allowing to configure
how a task should treat the project _fixed border_ (project _start_ or _end_ - for a forward or backward scheduled
project respectively).

A task can either respect the project border and in that case it cannot be placed before the project start (or after the 
project end respectively if it's scheduled backwards). Or a task can ignore the project border and be scheduled freely.

Possible values are:

- `honor` - task respects the project border. This is the field's default value out of the box.
- `ignore` - task ignores the project border.
- `conflict` - the project triggers [schedulingConflict](#Gantt/model/ProjectModel#event-schedulingConflict) event when 
  a task attempts to violate its border. So if the Gantt has 
  [displaySchedulingIssueResolutionPopup](#Gantt/view/Gantt#config-displaySchedulingIssueResolutionPopup) enabled  
  (default) it displays a special popup asking user to choose an appropriate resolution.

In order to change the behavior for all tasks one should adjust the field default value. Here, for example, we specify 
change the value to `conflict` to ask user's opinion every time a task violates the project border:

```javascript
class Task extends TaskModel {

    static fields = [
        // enable project border constraint check
        { name : 'projectConstraintResolution', defaultValue : 'conflict' }
    ];

}

new Gantt {
    project : {
        // Let the Project know we want to use our custom Task model
        taskModelClass : Task,
        ...
    },
    ...
}
```

The [projectConstraintResolution](#Gantt/model/TaskModel#field-projectConstraintResolution) field
is also represented on UI level with new "Project border" combobox on the task editor "Advanced" tab.

## New npm packages for combining products

This release introduces a new set of npm packages and framework components, that allows combining multiple Bryntum
products in the same application.

These packages contain the product specific code only, as opposed to the current packages that has all code for the
products each product builds upon (for example Scheduler contains all code from Grid & Core).

The new packages are called `thin` packages, and moving forward it will be the recommended way of using Bryntum
products in npm based applications (for all supported frameworks). The packages are initially available for licensed
users only, but will be made available for trial users in the near future.

The following packages are available:

| Package                    | Purpose                                     |
|----------------------------|---------------------------------------------|
| @bryntum/core-thin         | Bryntum Core data and UI components package |
| @bryntum/grid-thin         | Bryntum Grid component package              |
| @bryntum/scheduler-thin    | Bryntum Scheduler component package         |
| @bryntum/schedulerpro-thin | Bryntum Scheduler Pro component package     |
| @bryntum/gantt-thin        | Bryntum Gantt component package             |
| @bryntum/calendar-thin     | Bryntum Calendar component package          |
| @bryntum/taskboard-thin    | Bryntum TaskBoard component package         |
| @bryntum/engine-thin       | Bryntum Scheduling engine component package |

Applications should install packages for the products they use, and the products those are built upon (see links to
guides below for more information). For example an application using Scheduler Pro should also install Scheduler, Grid &
Core:

```bash
npm install @bryntum/core-thin @bryntum/grid-thin @bryntum/scheduler-thin @bryntum/schedulerpro-thin
```

There are also new corresponding wrappers for the supported frameworks, which should be used instead of the current
wrappers. For example for React:

| Package                          | Purpose                                        |
|----------------------------------|------------------------------------------------|
| @bryntum/core-react-thin         | Bryntum Core UI widgets React wrappers package |
| @bryntum/grid-react-thin         | Bryntum Grid React wrapper package             |
| @bryntum/scheduler-react-thin    | Bryntum Scheduler React wrapper package        |
| @bryntum/schedulerpro-react-thin | Bryntum Scheduler Pro React wrapper package    |
| @bryntum/gantt-react-thin        | Bryntum Gantt React wrapper package            |
| @bryntum/calendar-react-thin     | Bryntum Calendar React wrapper package         |
| @bryntum/taskboard-react-thin    | Bryntum TaskBoard React wrapper package        |

Applications should install wrappers **only** for the products they use, there is **no** need to install them for the
products those are built upon. For example an application using Scheduler Pro:

```bash
npm install @bryntum/schedulerpro-react-thin
```

More information:
* [Multiple products in Angular](#Gantt/guides/integration/angular/multiple-products.md)
* [Multiple products in React](#Gantt/guides/integration/react/multiple-products.md)
* [Multiple products in Vue](#Gantt/guides/integration/vue/multiple-products.md)

## Locale updates

There are some new locales used by the logic allowing to move a task before the project start date:

| Class                                       | Locale key          | English value                                                                    |
|---------------------------------------------|---------------------|----------------------------------------------------------------------------------|
| AdvancedTab                                 | askUser             | Ask user                                                                         |
| AdvancedTab                                 | honor               | Honor                                                                            |
| AdvancedTab                                 | ignore              | Ignore                                                                           |
| AdvancedTab                                 | projectBorder       | Project border                                                                   |
| HonorProjectConstraintResolution            | descriptionTpl      | Adjust the task to honor the project border.                                     |
| IgnoreProjectConstraintResolution           | descriptionTpl      | Ignore the project border and proceed with the change.                           |
| ProjectConstraintConflictEffectDescription  | endDescriptionTpl   | You moved "{0}" task to finish on {1}. This is after the project end date {2}.   |
| ProjectConstraintConflictEffectDescription  | startDescriptionTpl | You moved "{0}" task to start on {1}. This is before the project start date {2}. |

## Functions and events declarations for TypeScript have been improved

Declarations of class config/property functions and events (which are represented as **onEventName** functions) were
improved to contain all available parameters and return type.

See examples below:

**Old declarations:**

```typescript
    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: Function|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: Function
```

**New declarations:**

```typescript
    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: ((event : { source: Combo, value: string, event: Event }) => void)|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: (record: Model, combo: Combo) => string|null
```


## Client side print / PDF export

A new [Print feature](#Gantt/feature/export/Print) was added to allow printing Gantt content using the browser print
dialog. It extends the [PDFExport feature](#Gantt/feature/export/PdfExport) and uses same configs which manage HTML
markup rendering (exporters, columns, paper size, etc.). The only difference is that instead of sending generated HTML
to a backend, the feature creates an iframe element with generated content and opens the browser print dialog from it.

## ScrollButtons feature

`ScrollButtons` is a new feature that injects buttons in each row, that scrolls the task bar into view when clicked. The
buttons are only visible when the task bar is out of view.

<div class="external-example" data-file="Gantt/feature/ScrollButtons.js"></div>


<p class="last-modified">Last modified on 2023-10-26 8:19:02</p>