<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added support for draft mode and completion callbacks across filter components, enabling stepwise filter creation and editing.
- Enhanced filter menus and editors with external control via refs and new callback props for open/close state management.
- Introduced new filter option group component for multi-step filter interactions.
- Expanded tag filter methods for more granular filtering options.
- Enabled controlled open state and close event handling for desktop and mobile menus.
- Added programmatic control and completion callbacks to member selector and tags inline editors.
- **Improvements**
- Updated filter and tag editors with improved UI layouts and added "Done" buttons for easier completion.
- Improved menu and editor accessibility by allowing programmatic open/close and completion event handling.
- Refactored date filter components for modularity and consistent draft handling.
- Separated draft filter state management in filter UI for clearer user interactions.
- **Bug Fixes**
- Refined date filter logic for more accurate "after" and "before" comparisons.
- **Style**
- Adjusted styles for draft filters and editor layouts to enhance visual clarity and user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Improved the layout of property display in the card view by consolidating all properties into a single container and streamlining the rendering structure.
- Updated filtering to exclude properties of type "tags" from stack properties.
- **Style**
- Simplified the visual structure for properties, removing unnecessary nested containers for a cleaner appearance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Move the `waitForSynced` method from `frontend` to `nbstore worker` to make the wait more reliable
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added explicit tracking of document updating state to indicate when data is being applied or saved.
- Introduced new methods to wait for update and synchronization completion with abort support.
- **Improvements**
- Applied throttling with leading and trailing emissions to state observables for smoother UI updates.
- Refined synchronization waiting logic for clearer separation between update completion and sync completion.
- Removed throttling in workspace selector component for more immediate state feedback.
- Updated import and clipper services to use the new synchronization waiting methods.
- Simplified asynchronous waiting logic in indexer synchronization methods.
- **Bug Fixes**
- Enhanced accuracy and reliability of document update and sync status indicators.
- **Tests**
- Increased wait timeout in avatar selection test to improve stability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved document grouping logic in the explorer view, allowing for more dynamic and responsive updates when changing grouping criteria.
- **Bug Fixes**
- Prevented unnecessary synchronization operations in local workspace environments, ensuring sync only occurs for applicable workspace types.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2545
fix(core): go to workspace command does not work using CMDK
feat(core): add team badge to user info
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a redesigned user info section in the sidebar, including enhanced account details, cloud and AI usage indicators, and team workspace listing with improved navigation.
- Workspace selector now supports controlled open/close state for smoother sidebar integration.
- Team workspaces are grouped and displayed with role-based badges and tooltips.
- Added new localization for team roles and workspace tooltips.
- **Improvements**
- Updated theming and styling for user plan buttons and usage indicators for a more consistent look.
- Sidebar user info UI is now more modular and responsive.
- **Bug Fixes**
- Improved error handling and loading states for quota and usage displays.
- **Chores**
- Refactored internal state management and code structure for better maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2551
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Updated the sidebar layout by reordering the Collections and Tags panels for improved navigation experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Display preferences and selected collections are now saved and restored across sessions, providing a persistent and personalized experience in the All Documents page.
- **Refactor**
- Display settings menus and related components have been updated to use a controlled component pattern, allowing preferences to be managed externally for improved consistency and flexibility.
- Preference state management has been consolidated, simplifying how display options are handled throughout the interface.
- Various headers and detail views now accept display preferences and update callbacks as props, enabling external control of display settings.
- Components previously relying on internal context and reactive streams were refactored to receive explicit props and callbacks for state management.
- **Bug Fixes**
- Improved collection activation logic to prevent unnecessary updates when the selected collection is already active.
- Added fallback default view to ensure consistent display in document list items.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2583
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new tag list header with breadcrumb navigation and a tag selector dropdown for improved navigation and tag management.
- Added a searchable dropdown menu for selecting and switching between tags.
- **Improvements**
- Updated the tag detail page to use a more dynamic, subscription-based document explorer for displaying tagged content.
- Enhanced header controls with an updated display menu button.
- **Style**
- Added comprehensive new styles for the tag list header and tag selector components.
- Introduced a new scroll area style for flexible layout.
- **Documentation**
- Marked an older page list header component as deprecated.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new document list view with support for different layouts (list, grid, masonry) and improved multi-selection and batch deletion capabilities.
- Added a view toggle control for switching between document list layouts across relevant pages.
- Implemented a new collection list header with breadcrumb navigation and streamlined actions for editing collections and creating new pages.
- **Improvements**
- Simplified and unified document list rendering by delegating logic to a shared component.
- Enhanced document selection behavior, allowing toggling of individual items in select mode.
- Updated styles for document lists, group headers, and collection pages for a more consistent appearance.
- Refined wrapper component styling to prevent unintended HTML attribute forwarding.
- **Refactor**
- Replaced local implementations of view toggles and document grouping with shared components for easier maintenance.
- Removed deprecated and unused styles and props to streamline components and improve code clarity.
- Refactored collection detail and header components to adopt new context-driven document explorer architecture.
- **Documentation**
- Added deprecation notice to an outdated collection page list header component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced "Indexer & Embedding" workspace settings to manage AI embedding for local content, including document ignoring and attachment uploads.
- Added UI components for embedding settings, attachments, and ignored documents with pagination and deletion capabilities.
- Provided comprehensive file-type icons for attachments.
- **Improvements**
- Added a new tab for indexing and embedding in workspace settings navigation.
- Included test identifiers on key UI elements to enhance automated testing.
- **Localization**
- Added English localization strings covering all embedding-related UI text and actions.
- **Bug Fixes**
- Enabled previously skipped end-to-end tests for embedding settings to improve reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [AI-86](https://linear.app/affine-design/issue/AI-86)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced AI model switching in chat, allowing users to select from multiple AI models during conversations.
- Added a floating menu for easy AI model selection within the chat interface.
- Enabled visibility of the AI model switcher through a new experimental feature flag, configurable in workspace settings (canary builds only).
- **Enhancements**
- Improved session management in the chat panel for smoother model switching and state handling.
- Updated localization to support the new AI model switch feature in settings.
- **Bug Fixes**
- None.
- **Chores**
- Registered new components and services to support AI model switching functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Trashed page titles are now visually indicated with a strikethrough style in collection editor dialogs.
- **Bug Fixes**
- Trashed pages are now properly excluded from allowed lists and filtered views.
- **Refactor**
- Improved filtering logic for collections and page lists, separating user filters from system filters for more consistent results.
- Enhanced filter configuration options for more flexible and maintainable filtering behavior.
- **Style**
- Added a new style for displaying trashed items with a strikethrough effect.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added AI-powered store extension to support chat and transcription block schemas.
- Introduced a new database view extension for enhanced database block integration.
- **Refactor**
- Updated and reorganized import paths for improved code structure and maintainability.
- Consolidated and streamlined extension registration for store and view managers.
- **Chores**
- Removed deprecated or redundant extension classes and imports.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new Collection entity and store with reactive management and real-time updates.
- Added reactive favorite and shared filters with expanded filtering options.
- **Refactor**
- Overhauled collection and filtering logic for better performance and maintainability.
- Replaced legacy filtering UI and logic with a streamlined, service-driven rules system.
- Updated collection components to use reactive data streams and simplified props.
- Simplified collection creation by delegating ID generation and instantiation to the service layer.
- Removed deprecated hooks and replaced state-based filtering with observable-driven filtering.
- **Bug Fixes**
- Improved accuracy and consistency of tag and favorite filtering in collections.
- **Chores**
- Removed deprecated and unused filter-related files, types, components, and styles to reduce complexity.
- Cleaned up imports and removed unused code across multiple components.
- **Documentation**
- Corrected inline documentation for improved clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Updated workspace permission handling to use a unified role field within workspace data instead of separate admin and owner flags.
- Permission checks now rely on the workspace role for determining admin and owner status.
- **Chores**
- Removed deprecated queries and types related to admin and owner status.
- Cleaned up internal logic and variable naming for improved consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced feature flag synchronization for enhanced control over feature availability.
- Added new configuration options for store management, allowing initialization and feature flag setup.
- **Improvements**
- Updated how store extensions are accessed throughout the app for more robust initialization and configuration.
- Enhanced workspace entities to support feature flag services, improving flexibility for workspace-specific features.
- Centralized configuration of storage implementations for Electron environments.
- **Refactor**
- Simplified editor module by removing direct feature flag synchronization logic.
- Streamlined imports and configuration for storage modules, especially in Electron-based apps.
- **Bug Fixes**
- Ensured consistent retrieval of store extensions across various modules and platforms.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a filter to exclude empty journals from document collections.
- Added a live-updating list of non-trashed document IDs for improved document management.
- **Improvements**
- Default filters in the document explorer have been updated to show all items, including trashed ones, unless filters are applied.
- Enhanced filtering in workspace views to automatically exclude empty journals and trashed documents.
- Increased the responsiveness of grouped document updates for a smoother user experience.
- **Bug Fixes**
- Removed unnecessary debug output from the document synchronization, member search, session management, and member selector components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2605
[CleanShot 2025-05-08 at 13.56.38.mp4 <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/LakojjjzZNf6ogjOVwKE/4e36e838-7c7f-4f0a-89a8-fd582c2ef573.mp4" />](https://app.graphite.dev/media/video/LakojjjzZNf6ogjOVwKE/4e36e838-7c7f-4f0a-89a8-fd582c2ef573.mp4)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Centralized state management in the document explorer using a reactive context, replacing prop drilling and local state with observable streams for preferences, selection, grouping, and view options.
- Updated multiple components (display menus, quick actions, doc list items, group headers) to consume and update state directly via context observables.
- Simplified component signatures by removing now-unnecessary props related to preferences and state handlers.
- **Style**
- Adjusted user avatar display: avatars now only have right margin when user names are shown, and vertical alignment was improved.
- **New Features**
- User avatar elements now include a data attribute to indicate if the user name is displayed.
- **Bug Fixes**
- Improved handling of document tags to prevent errors when tags are not in the expected format.
- **Documentation**
- Added missing group header property for updated date fields in workspace property types.
- **Chores**
- Clarified and renamed internal types for quick actions to improve code clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new grouped document explorer with a masonry layout, advanced filtering, and multi-select capabilities.
- Added a floating toolbar for batch actions, such as deleting multiple documents.
- Implemented a feature flag to enable the new "All Docs" page, allowing gradual rollout.
- Added a new navigation component with links for Docs, Collections, and Tags.
- Introduced a display menu button supporting additional menu properties.
- **Enhancements**
- Redesigned navigation headers across document, collection, and tag pages for improved consistency and usability.
- Added new display and view toggling options for document lists.
- Improved styling and responsiveness for explorer and header components.
- Updated context to support dynamic view switching in the document explorer.
- **Bug Fixes**
- Updated context and prop types to enhance state management and user interactions.
- **Refactor**
- Replaced legacy page list views with a modern, grouped explorer interface.
- Simplified and modularized header components and styles for better maintainability.
- Removed workspace-specific controls from document headers to focus on explorer functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### New all docs list ui
close AF-2531, AF-2585, AF-2586, AF-2580
### What changed
- a new `display-menu` component
- properties visibility
- quick actions visibility
- extend DocPropertyType definition
- `showInDocList`: configure whether to show in doc and how to show (stack | inline)
- `docListProperty`: define how to render property in doc
- `groupHeader`: define how to render group header when grouped
- implement all properties's `docListProperty` renderer and `groupHeader` renderer
- new `docs-view` component
- render doc in `card` | `list` view
- split doc card into minimal components for reuse in list and card views, as well as visibility control
- implement docs-list with `<Masonry />` and multi-view support
- for list view, make masonry column count always `1`
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Redesigned document explorer with multiple view modes (list, grid, masonry), grouping, selection, and multi-delete.
- Added customizable display properties and quick actions (favorite, trash, split view, new tab, select) for documents.
- Introduced new group header and document item components with improved styling and interaction.
- Enabled dynamic rendering of document properties including tags, dates, users, templates, and themes.
- Added filtering support for trash status and enhanced localization for UI elements.
- Introduced drag handle size customization and expanded masonry layout configurability.
- Added contextual "More" menu with document operations like favorite, info, duplicate, and trash.
- Implemented shared context for explorer state management and multi-selection logic.
- **Enhancements**
- Improved virtual scrolling with active item tracking and configurable preload and debounce settings.
- Responsive, theme-aware styling applied across explorer and property components.
- Configurable UI elements and quick actions via user preferences.
- Enhanced error messages for unsupported property types in filters.
- Refined padding and layout calculations in masonry component for better visual consistency.
- Avatar and date components refactored for explicit prop-driven rendering and customization.
- **Bug Fixes**
- Improved error messages for unsupported property types in filters.
- **Documentation**
- Added new localization keys and updated language completeness for new features.
- **Chores**
- Modularized workspace property types with list and group header display components.
- Consolidated imports and enhanced code maintainability.
- Added new CSS styling modules for explorer components and workspace property types.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
whats changed:
### orm
add a new `select$` method, can subscribe on only one field to improve batch subscribe performance
### yjs-observable
add a new `yjsObservePath` method, which can subscribe to changes from specific path in yjs. Improves batch subscribe performance
```ts
yjsGetPath(
this.workspaceService.workspace.rootYDoc.getMap('meta'),
'pages'
).pipe(
switchMap(pages => yjsObservePath(pages, '*.tags')),
map(pages => {
// only when tags changed
})
)
```
### standard property naming
All `DocProperty` components renamed to `WorkspaceProperty` which is consistent with the product definition.
### `WorkspacePropertyService`
Split the workspace property management logic from the `doc` module and create a new `WorkspacePropertyService`. The new service manages the creation and modification of properties, and the `docService` is only responsible for storing the property value data.
### new `<Filters />` component
in `core/component/filter`
### new `<ExplorerDisplayMenuButton />` component
in `core/component/explorer/display-menu`
### new `/workspace/xxx/all-new` route
New route for test components and functions
### new collection role service
Implemented some filter group order rules
see `collection-rules/index.ts`
### standard property type definition
define type in `modules\workspace-property\types.ts`
define components (name,icon,....) in `components\workspace-property-types\index.ts`
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced comprehensive filtering, grouping, and ordering capabilities for workspace documents with reactive updates.
- Added a new "All Pages" workspace view supporting dynamic filters and display preferences.
- Developed UI components for filter creation, condition editing, and display menu controls.
- Launched enhanced tag management with inline editors, selection, creation, and deletion workflows.
- Added workspace property types with dedicated filter UIs including checkbox, date, tags, and text.
- Introduced workspace property management replacing document property handling.
- Added modular providers for filters, group-by, and order-by operations supporting various property types and system attributes.
- **Improvements**
- Standardized tag and property naming conventions across the application (using `name` instead of `value` or `title`).
- Migrated document property handling to workspace property-centric logic.
- Enhanced internationalization with additional filter and display menu labels.
- Improved styling for filter conditions, display menus, and workspace pages.
- Optimized reactive data subscriptions and state management for performance.
- Refined schema typings and type safety for workspace properties.
- Updated imports and component references to workspace property equivalents throughout frontend.
- **Bug Fixes**
- Resolved tag property inconsistencies affecting display and filtering.
- Fixed filter and tag selection behaviors for accurate and reliable UI interactions.
- **Chores**
- Added and refined test cases for ORM, observables, and filtering logic.
- Cleaned up legacy document property code and improved type safety.
- Modularized and restructured components for better maintainability.
- Introduced new CSS styles for workspace pages and display menus.
- Added framework module configurations for collection rules and workspace property features.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Documents now automatically track and display "created by" and "updated by" user information.
- Document creation and update timestamps are now managed and shown more accurately.
- Workspace and document metadata (name, avatar) updates are more responsive and reliable.
- Document creation supports middleware for customizing properties and behavior.
- **Improvements**
- Simplified and unified event handling for document list updates, reducing redundant event subscriptions.
- Enhanced integration of editor and theme settings into the document creation process.
- Explicit Yjs document initialization for improved workspace stability and reliability.
- Consolidated journal-related metadata display in document icons and titles for clarity.
- **Bug Fixes**
- Fixed inconsistencies in how workspace and document names are set and updated.
- Improved accuracy of "last updated" indicators by handling timestamps automatically.
- **Refactor**
- Removed deprecated event subjects and direct metadata manipulation in favor of more robust, reactive patterns.
- Streamlined document creation logic across various features (quick search, journal, recording, etc.).
- Simplified user avatar display components and removed cloud metadata dependencies.
- Removed legacy editor setting and theme service dependencies from multiple modules.
- **Chores**
- Updated internal APIs and interfaces to support new metadata and event handling mechanisms.
- Cleaned up unused code and dependencies related to editor settings and theme services.
- Skipped flaky end-to-end test to improve test suite stability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [AI-58](https://linear.app/affine-design/issue/AI-58).
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a toggleable AI reasoning feature in the chat interface, allowing users to enable or disable advanced reasoning during AI chat interactions.
- Added a new reasoning button to the chat input for quick access and control.
- **Enhancements**
- Improved chat configuration options to include reasoning settings, providing more flexibility for AI responses.
- Streamlined network search and image upload interactions for a smoother user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [animejs](https://animejs.com) ([source](https://redirect.github.com/juliangarnier/anime)) | [`^3.2.2` -> `^4.0.0`](https://renovatebot.com/diffs/npm/animejs/3.2.2/4.0.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
---
### Release Notes
<details>
<summary>juliangarnier/anime (animejs)</summary>
### [`v4.0.0`](https://redirect.github.com/juliangarnier/anime/releases/tag/4.0.0)
[Compare Source](https://redirect.github.com/juliangarnier/anime/compare/v3.2.2...4.0.0)
> **I'm still finalizing the release notes as there are MANY changes, but in the meantime, you can check out the brand new documentation [here](https://animejs.com/documentation).**
The brand new Anime.js.
### API Breaking changes
Every Anime.js feature is now exported as an ES Module.
This is great for tree shaking, you don't have to ship the entire library anymore, only what you need.
#### Animation
The `anime(parameters)` function has been replaced with the `animate(targets, parameters)` module.
The `targets` parameter has been replaced with a dedicated function parameter: `animate(targets, parameters)`.
V3:
```javascript
import anime from 'animejs';
const animation = anime({
targets: 'div',
translateX: 100,
});
```
V4:
```javascript
import { animate } from 'animejs';
const animation = animate('div', {
translateX: 100,
});
```
#### Easings names
The `ease` prefix has been removed: 'easeInOutQuad' -> 'inOutQuad'.
#### Callbacks
Callbacks have have been renamed like this:
- `begin()` -> `onBegin()`
- `update()` -> `onUpdate()`
Here's all the change to the API
```diff
- import anime from 'animejs';
+ import { animate, createSpring, utils } from 'animejs';
- anime({
- targets: 'div',
+ animate('div', {
translateX: 100,
rotate: {
- value: 360,
+ to: 360,
- easing: 'spring(.7, 80, 10, .5)',
+ ease: createSpring({ mass: .7, damping: 80, stiffness: 10, velocity: .5}),
},
- easing: 'easeinOutExpo',
+ ease: 'inOutExpo',
- easing: () => t => Math.cos(t),
+ ease: t => Math.cos(t),
- direction: 'reverse',
+ reversed: true,
- direction: 'alternate',
+ alternate: true,
- loop: 1,
+ loop: 0,
- round: 100,
+ modifier: utils.round(2),
- begin: () => {},
+ onBegin: () => {},
- update: () => {},
+ onUpdate: () => {},
- change: () => {},
+ onRender: () => {},
- changeBegin: () => {},
- changeComplete: () => {},
- loopBegin: () => {},
- loopComplete: () => {},
+ onLoop: () => {},
- complete: () => {},
+ onComplete: () => {},
});
```
#### Promises
No more `.finished` property, promises are now handled directly with `animation.then()`:
```diff
- import anime from 'animejs';
+ import { animate, utils } from 'animejs';
- anime({ targets: target, prop: x }).finished.then(() => {});
+ animate(target, { prop: x }).then(() => {});
```
#### Values
##### To
The object syntax `value` property has been renamed `to`:
```diff
- translateX: { value: 100 }
+ translateX: { to: 100 }
```
#### Animation parameters
##### Default `easing`
The new default easing is `'outQuad'` instead of `'easeOutElastic(1, .5)'`.
##### `composition`
In V3 all animations coexist and overlaps with each other. This can cause animations with the same targets and animated properties to create weird results.
V4 cancels a running tween if a new one is created on the same target with the same property. This behaviour can be confifugred using the new `composition` parameter.
`composition: 'none'` // The old V3 behaviour, animations can overlaps
`composition: 'replace'` // The new V4 default
`composition: 'add'` // Creates additive animations by adding the values of the currently running animations with the new ones
##### `round` -> `modifier`
The `round` parameter has been replaced with a more flexible parameters that allows you to define custom functions to transform the numerical value of an animation just before the rendering.
```diff
- round: 100
+ modifier: utils.round(2)
```
You can of course defines your own modifier functions like this:
```javascript
const animation = animate('div', {
translateX: '100rem',
modifier: v => v % 10 // Note that the unit 'rem' will automatically be passed to the rendered value
});
```
#### Playback parameters
##### `direction`
The `direction` parameter has been replaced with an `alternate` and `reversed` parameters
V3:
```javascript
const animation = anime({
targets: 'div',
direction: 'reverse',
// direction: 'alternate' It wasn't possible to combined reverse and alternate direction before
});
```
V4:
```javascript
import { animate } from 'animejs';
const animation = animate('div', {
translateX: 100,
reversed: true,
alternate: true,
});
```
#### Timelines:
```diff
- import anime from 'animejs';
+ import { createTimeline, stagger } from 'animejs';
- anime.timeline({
+ createTimeline({
- duration: 500,
- easing: 'easeInOutQuad',
+ defaults: {
+ duration: 500,
+ ease: 'inOutQuad',
+ }
- loop: 2,
+ loop: 1,
- }).add({
- targets: 'div',
+ }).add('div', {
rotate: 90,
})
- .add('.target:nth-child(1)', { opacity: 0, onComplete }, 0)
- .add('.target:nth-child(2)', { opacity: 0, onComplete }, 100)
- .add('.target:nth-child(3)', { opacity: 0, onComplete }, 200)
- .add('.target:nth-child(4)', { opacity: 0, onComplete }, 300)
+ .add('.target', { opacity: 0, onComplete }, stagger(100))
```
##### Stagger
```diff
- import anime from 'animejs';
+ import { animate, stagger } from 'animejs';
- anime({
- targets: 'div',
+ animate('div', {
- translateX: anime.stagger(100),
+ translateX: stagger(100),
- delay: anime.stagger(100, { direction: 'reversed' }),
+ translateX: stagger(100, { reversed: true }),
});
```
#### SVG
```diff
- import anime from 'animejs';
+ import { animate, svg } from 'animejs';
- const path = anime.path('path');
+ const { x, y, angle } = svg.createMotionPath('path');
- anime({
- targets: '#shape1',
+ animate('#shape1', {
- points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369',
+ points: svg.morphTo('#shape2'),
- strokeDashoffset: [anime.setDashoffset, 0],
+ strokeDashoffset: svg.drawLine(),
- translateX: path('x'),
- translateY: path('y'),
- rotate: path('angle'),
+ translateX: x,
+ translateY: y,
+ rotate: angle,
});
```
#### Utils
```diff
- import anime from 'animejs';
+ import { utils } from 'animejs';
- const value = anime.get('#target1', 'translateX');
+ const value = utils.get('#target1', 'translateX');
- anime.set('#target1', { translateX: 100 });
+ utils.set('#target1', { translateX: 100 });
- anime.remove('#target1');
+ utils.remove('#target1');
- const rounded = anime.round(value);
+ const rounded = utils.round(value, 0);
```
#### Engine
```diff
- import anime from 'animejs';
+ import { engine } from 'animejs';
- anime.suspendWhenDocumentHidden = false;
+ engine.pauseWhenHidden = false;
- anime.speed = .5;
+ engine.playbackRate = .5;
```
### Improvements
#### Performances
Major performance boost and lower memory footprint.
V4 has bee re-written from scratch by keeping performance in mind at every steps.
#### Better tween composition
The tween system has been refactored to improve animations behaviours when they overlaps.
This fix lots of issues, especially when creating multiple animations with the same property on the same target.
#### Additive animations
You can also blend animations together with the new `composition: 'add'` parameter.
#### Improved Timelines
- Child animations can new be looped and reversed
- Add supports for labels
- Add supports for `.set()` in timeline
- New position operators for more flexibility
- Multi-target child animation can be positioned using the `stagger` function
- Easier children defaults configuration
- Greatly improved support for CSS transforms composition from one child animation to another
```javascript
const tl = createTimeline({
playbackRate: .2,
defaults: {
duration: 500,
easing: 'outQuad',
}
});
tl.add('START', 100) // Add a label a 100ms
.set('.target', { opacity: 0 })
.add('.target', {
translateY: 100,
opacity: 1,
onComplete: () => {},
}, stagger(100))
.add('.target', {
scale: .75,
}, 'START')
.add('.target', {
rotate: '1turn',
}, '<<+=200')
```
#### Properties
##### CSS Variables
You can now use CSS variables directly like any other property:
```javascript
// Animate the values of the CSS variables '--radius'
animate('#target', { '--radius': '20px' });
```
##### Animating *from*
Animate *from* a value
```diff
+ translateX: { from: 50 }
```
##### From -> To
Even if the `[from, to]` shortcut is still valid in V4, you can now also write it like this:
```diff
+ translateX: { from: 50, to: 100 }
```
##### Colors
You can now animate hex colors with an alpha channel like '#F443' or '#FF444433'.
#### Timers
You can now create timers with the `createTimer` module.
Timers can be use as replacement for `setTimeout`or `setInterval` but with all the playbacks parameters, callbacks and the `Promise` system provided by anime.js.
```
const interval = createTimer({
onLoop: () => { // do something every 500ms },
duration: 500,
});
const timeout = createTimer({
onComplete: () => { // do something in 500ms },
duration: 500,
});
const gameLogicLoop = createTimer({
frameRate: 30,
onUpdate: gameSystems,
});
const gameRenderLoop = createTimer({
frameRate: 60,
onUpdate: gameRender,
});
```
#### Variable frame rate
You can now change the frame rate to all animations or to a specific Timeline / Animation / Timer
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/toeverything/AFFiNE).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOS4yMjcuMyIsInVwZGF0ZWRJblZlciI6IjM5LjIyNy4zIiwidGFyZ2V0QnJhbmNoIjoiY2FuYXJ5IiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==-->
EYHN
