# Upgrade guide for Gantt v5.6.0

## New location for `Core.util.helper.Point` class

The `Core.util.helper.Point` class has been moved to solve circular module dependencies. It is now a named (`Point`)
export of the `Core.util.helper.Rectangle` module.

Changes are required if you are directly importing the class from sources:

**Old code:**

```javascript
import Point from 'path-to-lib/Core/helper/util/Point.js';
```

**New code:**

```javascript
import { Point } from 'path-to-lib/Core/helper/util/Rectangle.js';
```

Note: No changes required for importing from module or umd bundles.

## Task bars use CSS grid layout

The task bar wrapper element (`.b-gantt-task-wrap`) now uses CSS grid layout to better match event bars in Scheduler.
This makes it easier to internally share styling with Scheduler for features like labels. If your app uses custom CSS
for task bars that rely on the wrapper using flexbox, you might need to adjust it.

## `ScrollOptions` has been renamed to `BryntumScrollOptions`

If you use TypeScript in your application rename imported type `ScrollOptions` to `BryntumScrollOptions`.

**Old code:**

```typescript
import { ScrollOptions } from '@bryntum/gantt'
```

**New code:**

```typescript
import { BryntumScrollOptions } from '@bryntum/gantt'
```

## Filter feature changed to multi-filter by default

The Filter feature has changed to use the new [FieldFilterPicker](#Core/widget/FieldFilterPicker)-based
UI in its popup by default. (This mode was previously accessible using the `isMulti` flag, which is now
deprecated.)

The feature's context menus have also changed. Now, when right-clicking a grid cell or column header, the
filtering options are under a new Filter sub-menu. The available filter operators have also changed to
match the ones available in the FieldFilterPicker for the column's data type.

To provide custom configuration for the [GridFieldFilterPickerGroup](#Grid/widget/GridFieldFilterPickerGroup)
used in the popup UI, pass the new `pickerConfig` config to the Filter feature.

If you are using the `isMulti` flag in your Filter feature config, you can remove it as this mode is now
the default.

- Old `isMulti` feature configuration:

```javascript
{
  features : {
    filter : { isMulti : true }
  }
}
```

- New feature configuration (`isMulti` flag no longer required):

```javascript
{
  features : {
    filter : true
  }
}
```

To use the old UI instead, configure `legacyMode : true` on the Filter feature.

- Old feature configuration:

```javascript
{
  features : {
    filter : true
  }
}
```

- New feature configuration (to opt out of new UI and keep the old):

```javascript
{
  features : {
    filter : {
      legacyMode : true
    }
  }
}
```

## `BryntumProjectModel` component has been renamed to `BryntumGanttProjectModel`

The non-visual framework component representing a `ProjectModel` has been renamed to
`BryntumGanttProjectModel` to match component name from new `thin` bundles. 

Update imported class name and html tag accordingly.

**Note:** The old `BryntumProjectModel` component is still available too, it will be removed in version `6.0.0`.

### Angular

**app.component.ts**

```typescript
import { BryntumGanttProjectModelComponent } from '@bryntum/gantt-angular';
```

**app.component.html:**

```html
<bryntum-gantt-project-model
...
/>
```

### React

**App.ts:**

```typescript
import { BryntumGanttProjectModel } from '@bryntum/gantt-react';

...

return (
     <>
         <BryntumGanttProjectModel
             ...
         />
     </>
 );
}
```

### Vue

**App.vue:**

```javascript
<template>
    <div>
        <bryntum-gantt-project-model
            ...
        />
    </div>
</template>
    
...

import { BryntumGanttProjectModel } from '@bryntum/gantt-vue-3';
```


<p class="last-modified">Last modified on 2023-10-26 8:19:02</p>