#### PR Dependency Tree
* **PR #15191** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Updated sign-in, sign-up, and email content to show the correct server
name for cloud and self-hosted setups.
* Added clearer workspace status messages for syncing, local workspaces,
and server-connected workspaces.
* Introduced localized text updates for more languages, including new
locale coverage.
* **Bug Fixes**
* Replaced outdated “Cloud” wording throughout the app with more
accurate “Sync” and self-hosted terminology.
* Improved account deletion, password reset, sharing, and storage
prompts for clearer user guidance.
* Updated workspace status labels and tooltips to better reflect the
current server connection.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
fix#14465
In Chinese mode, the document with the specified name may not be
displayed correctly in the sidebar, and it may be mistaken for the
translation of the content that needs to be translated.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed document title display in navigation panels on desktop and
mobile to properly render without additional processing steps.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
#### PR Dependency Tree
* **PR #14452** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved null-safety, dependency tracking, upload validation, and
error logging for more reliable uploads, clipboard, calendar linking,
telemetry, PDF/theme printing, and preview/zoom behavior.
* Tightened handling of all-day calendar events (missing date now
reported).
* **Deprecations**
* Removed deprecated RadioButton and RadioButtonGroup; use RadioGroup.
* **Chores**
* Unified and upgraded linting/config, reorganized imports, and
standardized binary handling for more consistent builds and tooling.
<!-- 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 a new Discord community link in the mobile settings Others
section with an animated "Hot" badge
* **Localization**
* Added multilingual support for the new Discord link across all
supported languages
<!-- 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 a Subscription section in Mobile Settings (for signed-in users)
with plan info and an Upgrade button that opens the native paywall.
- Supports showing “Pro” and “AI” paywalls.
- Integrated native paywall provider on iOS.
- Style
- Introduced new styling for the subscription card, content, and button.
- Localization
- Added English strings for subscription title, description, and button.
- Chores
- Minor iOS project cleanup and internal wiring to enable the paywall
module.
<!-- 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 Document Summary module, enabling live and cached
document summaries with cloud revalidation.
* Added a feature flag for enabling battery save mode.
* Added explicit pause and resume controls for sync operations,
accessible via UI events and programmatically.
* **Improvements**
* Enhanced sync and indexing logic to support pausing, resuming, and
battery save mode, with improved job prioritization.
* Updated navigation and preview components to use the new document
summary service and improved priority handling.
* Improved logging and state reporting for sync and indexing processes.
* Refined backlink handling with reactive loading states and cloud
revalidation.
* Replaced backlink and link management to use a new dedicated document
links service.
* Enhanced workspace engine to conditionally enable battery save mode
based on feature flags and workspace flavor.
* **Bug Fixes**
* Removed unnecessary debug console logs from various components for
cleaner output.
* **Refactor**
* Replaced battery save mode methods with explicit pause/resume methods
throughout the app and services.
* Modularized and streamlined document summary and sync-related code for
better maintainability.
* Restructured backlink components to improve visibility handling and
data fetching.
* Simplified and improved document backlink data fetching with retry and
loading state management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close
[AF-2756](https://linear.app/affine-design/issue/AF-2756/激活输入区的时候，展示toolbar，适配不弹虚拟键盘的场景，比如实体键盘)
#### PR Dependency Tree
* **PR #13384** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Improved virtual keyboard handling by introducing static keyboard
height and app tab safe area tracking for more consistent toolbar
behavior.
* **Bug Fixes**
* Enhanced keyboard visibility detection on Android and iOS, especially
when a physical keyboard is connected.
* **Refactor**
* Simplified and streamlined keyboard toolbar logic, including delayed
panel closing and refined height calculations.
* Removed unused or redundant toolbar closing methods and position
management logic.
* **Style**
* Updated toolbar and panel styles for better positioning and layout
consistency.
* Adjusted and removed certain mobile-specific padding styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
#### PR Dependency Tree
* **PR #13384** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Collapsible section state in navigation panels is now managed using a
unified path-based approach, enabling more consistent and centralized
control across desktop and mobile interfaces.
* The collapsed/expanded state of navigation sections and nodes is now
persistently tracked using hierarchical paths, improving reliability
across sessions and devices.
* Internal state management is streamlined, with local state replaced by
a shared service, resulting in more predictable navigation behavior.
* **Chores**
* Removed obsolete types and legacy section management logic for
improved maintainability.
<!-- 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**
* The journal confirmation flow is now always enabled when creating or
opening journals across all platforms.
* **Refactor**
* Removed the two-step journal confirmation feature flag and all related
conditional logic.
* Simplified journal navigation and creation flows for a more consistent
user experience.
* **Chores**
* Cleaned up unused components and imports related to the removed
feature flag.
<!-- 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 mobile journals page with a two-step confirmation
flow, allowing users to select a date and confirm before creating or
opening a journal.
* Added a dedicated route for journals on mobile devices.
* Implemented a placeholder view when no journal exists for a selected
date on both desktop and mobile.
* **Enhancements**
* Improved mobile and desktop styling for journals pages, including
responsive adjustments for mobile layouts.
* Updated journal navigation behavior based on a feature flag, enabling
or disabling the two-step confirmation flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2752;
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a version compatibility check for self-hosted environments
during sign-in, displaying a clear error message and upgrade
instructions if the server version is outdated.
* **Style**
* Updated the appearance of the notification icon in the mobile header
for improved visual consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
#### PR Dependency Tree
* **PR #13214** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a notification icon with a live badge displaying the
notification count in the mobile home header. The badge dynamically
adjusts and caps the count at "99+".
* Introduced a notification menu in the mobile header, allowing users to
view their notifications directly.
* **Style**
* Improved notification list responsiveness on mobile by making it full
width.
* Enhanced the appearance of the notification badge for better
visibility.
* Updated the app fallback UI to display skeleton placeholders for both
notification and settings icons.
<!-- 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**
* On iOS devices, the app and editor version numbers in the About
section now display only the main version (e.g., "0.23.0"), hiding any
additional suffixes.
* **Other**
* No visible changes for users on non-iOS platforms; full version
strings remain displayed.
<!-- 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 "search locally" option in the docs quick search,
allowing users to perform searches on their local device when supported.
* Added new quick search group labels and options for local search, with
dynamic UI updates based on search mode.
* **Improvements**
* Enhanced search responsiveness by reducing input throttling delay.
* Added a pre-submission check to improve search item handling.
* Improved stability by handling cases where document IDs may be missing
during search result processing.
* **Localization**
* Added English language support for new local search options and
labels.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
https://github.com/user-attachments/assets/41a659c9-6def-4492-be8e-5910eb148d6f
This PR enforces login‑first access (#8716) by disabling or enabling the
guest demo workspace via Admin Server Client Page and redirecting
unauthenticated users straight to `/sign‑in`.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a configuration option to control whether guest users can create
demo workspaces.
* Updated server and client interfaces, GraphQL schema, and queries to
support the new guest demo workspace flag.
* **Bug Fixes**
* Improved sign-out behavior to redirect users appropriately based on
guest demo workspace permissions.
* Enhanced navigation flow to handle guest demo workspace access and
user authentication state.
* **Tests**
* Added tests to verify sign-out logic when guest demo workspaces are
enabled or disabled.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: fengmk2 <fengmk2@gmail.com>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Improvements**
- Updated document explorer to hide quick favorite and document icons,
and display more detailed system properties for each document.
- Enhanced link behavior in the workbench to prevent unintended clicks
from triggering navigation.
<!-- 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 a "Move to Trash" option in the page header menu, allowing users
to move documents to trash with confirmation and permission checks.
- **Refactor**
- Centralized and reorganized tab-related type definitions for improved
maintainability.
- Updated tab components to use shared constants and types.
- **Style**
- Updated menu item styling for the new trash action to indicate a
destructive operation.
<!-- 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 "Delete my account" option in mobile settings with role-based warnings and confirmation modals.
- **Enhancements**
- Added flexible row and reverse row layout options for modal footers and action buttons on mobile.
- **Localization**
- Added English translation for the "Delete my account" setting.
- **Style**
- Updated styles for modal footers and action buttons on mobile.
- Added styling for account deletion dialog descriptions.
<!-- 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 server context awareness for workspaces on mobile web.
- Enhanced handling for missing workspaces by displaying a share page when accessing a document detail route in mobile web environments.
- **Bug Fixes**
- Workspace list now refreshes automatically when switching workspace IDs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Removed Features**
- Removed all quota-reached modal dialogs, including both cloud and local storage quota notifications.
- Users will no longer see modal alerts when storage limits are reached in workspaces.
- **User Interface**
- Quota-reached modals and related styles have been removed from workspace layouts on both desktop and mobile.
- **Other Changes**
- Quota notification logic and related settings have been eliminated from the application.
- Maximum blob size enforcement and related callbacks have been removed from blob management.
- Localization entries related to file upload size limits and quota tips have been removed.
<!-- 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 default sorting and grouping by "Last Updated" for document views.
- Introduced clearer group headers for documents grouped by creation or update date, displaying relative dates or appropriate fallback text.
- **Improvements**
- Enhanced date grouping headers with capitalized, user-friendly text and improved handling of missing dates.
- Added a new localization for "Never updated" to improve clarity in document groupings.
- Initialized document update timestamps at creation to improve date accuracy.
<!-- 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**
- The "Add Selfhosted" and "Add Server" options are now displayed whenever the build configuration is native, without relying on feature flags.
- **Refactor**
- Simplified conditional rendering for server addition buttons by replacing feature flag checks with build configuration checks.
- **Chores**
- Removed the "Multiple Cloud Servers" feature flag and its related localization strings, streamlining feature management and UI labels.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2624, AF-2628, AF-2581
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a draggable handle to document cards in the explorer, visible on hover in card view.
- Added an option to remove grouping in the display menu.
- Added contextual tooltips for user avatars indicating creation or last update.
- Enabled optional tooltips on public user labels.
- Extended dropdown buttons to accept custom styling classes.
- Added a new masonry story showcasing item heights determined by ratios.
- **Style**
- Enhanced drag handle appearance and visibility for card view items.
- Replaced static shadows with theme-aware, smoothly transitioning shadows on card items.
- Adjusted spacing between items in the document explorer for improved layout, with increased horizontal and (in card view) vertical gaps.
- Reduced top padding in workspace page styles.
- Added new button background style for secondary buttons.
- **Bug Fixes**
- Removed duplicate internal property declarations to eliminate redundancy.
- **Refactor**
- Simplified layout props by removing fixed height parameters in multiple components.
- Updated masonry layout logic to support ratio-based item sizing alongside fixed heights.
- Removed randomized skeleton loading placeholders, replacing them with fixed or no placeholders.
- Refined masonry component typings and scrollbar placement for improved styling and layout.
- Improved selection logic to activate selection mode when selecting all documents.
- **Localization**
- Added new translation keys for grouping removal and user attribution tooltips.
- Updated English locale with new strings for "Remove group" and user-created/updated tooltips.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2514
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Enhanced document explorer on mobile with live updates, responsive masonry layout, and improved empty state handling for all documents, collections, and tags.
- Added customization for card height and masonry item width in document explorer views.
- Extended layout components to support additional flexbox styling options for improved layout flexibility.
- **Bug Fixes**
- Improved flexibility in layout components by supporting additional flexbox styling options.
- **Refactor**
- Replaced older static document list and menu components with a unified, context-driven explorer for a more dynamic and interactive experience.
- Removed obsolete CSS and component files related to the previous document list and menu implementations.
<!-- 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 -->
Closes: [BS-2578](https://linear.app/affine-design/issue/BS-2578/优化-footnote-预览的逻辑：支持缓存结果，避免重复-loading)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a link preview caching mechanism, enabling faster and more efficient reuse of link preview data across the app.
- Added a feature flag for enabling or disabling link preview cache, configurable through workspace experimental settings.
- Enhanced localization with new entries describing the link preview cache feature.
- **Improvements**
- Updated link preview service architecture for better extensibility and maintainability.
- Improved integration of feature flags throughout chat and rendering components.
- **Bug Fixes**
- Fixed tooltip formatting for footnote URLs.
- **Chores**
- Updated dependencies and localization completeness tracking.
<!-- 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**
- Images and icons in bookmark cards are now loaded through an image proxy for improved reliability and consistency.
- Embed blocks for GitHub, Loom, and YouTube now display banner and creator images via an image proxy service for enhanced image loading.
- **Refactor**
- Simplified backend URL handling and proxy logic for images, resulting in more efficient processing and reduced complexity.
- Consolidated image proxy middleware and services into a shared adapter module for streamlined imports and improved maintainability.
<!-- 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==-->
Previously, we used `useLiveData(guardService.can$())` to get the guard result, but `guardService.can$()` will request the server to revalidate the permission when calling it, will cause additional network requests when re-render.
This pr make a new hook `useGuard` to fix this problem.
And the side effect in `can$` is moved to `revalidateCan()` to make that the subscribe method is pure
DarkSky
