The sophisticated Drag and Drop library you've been waiting for 🥳
This release includes several enhancements, bug fixes, and new features. Below are the details of the changes:
Enhanced Scrolling Functionality
Reduced API Surface
Improved Scroll Handling
Scrollable Content Criteria
Mutation Leak Fix
Race Condition Prevention
Fixed Container Sizing
Reconciliation Prioritization
Element Management Extraction
DFlexDOMManager, improving modularity and organization.Preventing Shifting After Reconciliation
Allow null as a valid value for the element animation configuration: This change introduces greater flexibility in configuring element animations. Previously, an animation configuration was required, but now users have the option to use null to disable animations completely.
Rename super.register to addElmToRegistry in the base store's internal implementation: This modification updates the internal implementation of the base store to use the more descriptive method name addElmToRegistry instead of super.register. This improvement enhances code readability and clarity.
Add a unit test for the getParsedElmTransform function: This addition includes a new unit test to verify the behavior and correctness of the getParsedElmTransform function. The test covers various scenarios and ensures that the function accurately parses and returns the transform matrix of the given element.
Create the CSSTransform property in the RegisterInputOpts interface to allow users to specify CSS rules that will be applied to the element when it's interactively dragged: The inclusion of the CSSTransform property provides users with a convenient way to customize the visual appearance of interactive elements during dragging. By specifying CSS rules for CSSTransform, users can have precise control over various visual aspects, including background color, border styles, opacity, box-shadow, and more. These CSS rules are dynamically applied to the element while it is being transformed by dragging, and they are automatically removed when the element is settled in its new position. This enhancement enhances the overall user experience and allows for a more visually engaging dragging interaction.
Add the animation property to the RegisterInputOpts interface, allowing users to specify configuration options for animations applied to transformed elements during dragging. The animation property accepts an object of type Partial<AnimationOpts>, which includes properties such as easing and duration to control the animation behavior. By default, animation is applied unless explicitly configured otherwise.
type RegisterInputOpts = {
id: string;
readonly?: boolean;
+ animation?: Partial<AnimationOpts>;
+ CSSTransform?: CSSClass | CSSStyle;
};
Example:
const registerInput: RegisterInputOpts = {
id: "elementId",
readonly: false,
animation: {
easing: "ease-in-out",
duration: 500,
},
CSSTransform: {
background: "#ff0000",
opacity: 0.5,
},
};
In this example, we specify animation options by setting the animation property to an object with the easing function set to "ease-in-out" and the duration set to 500 milliseconds. Additionally, we customize the CSS applied to the element during dragging by setting the CSSTransform property to an object with background color "#ff0000" and opacity 0.5.
Please note that the animation and CSSTransform properties are optional, and you can omit them if you don't need to customize animations or apply specific CSS transformations during dragging.
Full Changelog: https://github.com/dflex-js/dflex/compare/v3.9.0...v3.9.1
computedStyle, Resizing Fix, and Improved Element Position Detection (#645)Implement CSS Getters and Setters, Resize Event Handler Fix, Enhanced Element Position Detection, Refactoring, and Cleanup (#647). Introduces several improvements and fixes as follows:
Migrate related box model in Threshold to the Box Model (#646): Focuses on migrating the related box model present in the threshold to the Box model. The aim is to consolidate the codebase and improve consistency. Allowing better modularization, and enhancing code maintainability and readability.
Enhancing the style handling in the draggable element by refactoring and optimizing the setMirrorStyle and setOrUnsetOriginStyle functions. The changes improve reusability, reduce duplication, and make the code more concise and maintainable.
Addressing an issue with scroll thresholds for elements that are located outside the screen viewport. The scroll thresholds were not correctly calculated, leading to inaccurate auto-scrolling triggers for these elements.
Addressing the issue of interactive containers resizing during the migration of their child elements, which can lead to layout distortion and cause problems, particularly when the container becomes empty due to the migration of all children. To mitigate this issue, the solution enforces fixed container sizes that remain consistent during element migration, ensuring that the container size is maintained and does not change unexpectedly. It ensures that the layout remains visually consistent, and interactive elements remain correctly sized and positioned. It provides a better user experience by preventing any visual disturbances that could arise from container resizing.
Full Changelog: https://github.com/dflex-js/dflex/compare/v3.8.3...v3.9.0
TS v5 (https://github.com/dflex-js/dflex/pull/632)e2e test covering stabilizer mechanism (https://github.com/dflex-js/dflex/pull/633)pnpmV8 (https://github.com/dflex-js/dflex/pull/636)Full Changelog: https://github.com/dflex-js/dflex/compare/v3.8.2...v3.8.3
0,0 instead of 1,1 (https://github.com/dflex-js/dflex/pull/625)Full Changelog: https://github.com/dflex-js/dflex/compare/v3.8.1...v3.8.2
MutationObserver for containers that don't belong to the same parent (#611)Full Changelog: https://github.com/dflex-js/dflex/compare/v3.8.0...v3.8.1
containersTransition options for an orphan branch.commit options for an orphan branch with a solo element to prevent unnecessary reconciliation. React.useEffect(() => {
store.config({
removeContainerWhenEmpty: false,
});
}, []);
Full Changelog: https://github.com/dflex-js/dflex/compare/v3.7.1...v3.8.0
Use abstract for axes point.
Move to the box model for more consistent geometry.
Add different positions for different types of dragging.
Support interactivity between scroll containers by allowing custom mirroring the dragged when necessary.
Update listener(s) allowing them to be attached to scroll containers with overflow even if they are not dynamic.
Initialize scroll threshold depending on the depth layer instead of the targeted container.
Flushing element indicators without checking the DOM state leaning more into DOM & VDOM instances.
Unify listeners system with payload and status.
Add keyboard listener to the playground app to enable commit for testing.
Add DFlex Cycle as a global migration holder inside the store.
Add DFlex Session to manage user interactivity with the DFlex app.
Manage reconciliation by using SK (containers key) inside Cycle. So the reconciliation only targets the affected container(s).
Add options for committing changes to the DOM. Users still have the ability to transform the elements indefinitely but in some cases, apps need to commit after each cycle. This feature is now enabled with embedded reconciliation that targets only affecting elements in their containers. This feature makes DFlex the first drag-and-drop framework with its own reconciler and the first one that gives the user multiple options for indefinite transformation or committing to the DOM when necessary.
Remove all separate class interfaces in the utility classes. Use class as a type instead.
Enhance registration. All essential data will be assigned and registered even with DFlex being framework agnostic. Register functions still have the capability to create a DFlex-Node instance, along with its container, and scroll. This decreases the scripting time for the first interactive dragging without blocking the initial mount during registration https://github.com/dflex-js/dflex/pull/565.
Use different types for threshold. Previously all thresholds used were external thresholds. I added a new type internal to apply the threshold percentage correctly for the scroll. An internal threshold is a threshold that checks the dragged inside the given area and is always smaller than the working area.
Use essential geometry for Point<number>, Point<boolean> for scroll.
Add more indicators to enhance scrolling. DFlex can identify thresholds, calculate invisible areas,s and based on this information do scroll animation.
Bind scrolling data with scroll listeners. So when scrolling DFlexScrollContainer can do all the related calculations without reading from DOM.
Synchronously update element visibility when scrolling. Avoid any gap that may appear during the scroll. Also, still, the visible area is the scrolling area. Elements' position won't be updated if it's not visible. But the current approach updates visibility and then scrolls so visibility is calculated before taking action.
Thresholds are now direction-dependent. If drag is in the bottom but going up then the threshold is false.
Differentiate the mechanism from the container.