v3.9.5 ( September 12, 2023)

This release includes several enhancements, bug fixes, and new features. Below are the details of the changes:

1. Enhanced Scrolling Functionality

   • PR: #664
   • Description: This update implements advanced scrolling functionality, providing smoother and animated scrolling behavior.

2. Reduced API Surface

   • PR: #666
   • Description: Unnecessary exposed methods have been removed, streamlining the API surface for improved usability.

3. Improved Scroll Handling

   • PR: #668
   • Description: Scroll handling for non-document scroll containers has been improved, enhancing the overall scrolling experience.

4. Scrollable Content Criteria

   • PR: #669
   • Description: Introduces scrollable content as a criterion for defining scroll containers, leading to more accurate container detection.

5. Mutation Leak Fix

   • PR: #671
   • Description: This fix addresses a mutation leak issue and improves cleanup for non-connected DOM elements.

6. Race Condition Prevention

   • PR: #677
   • Description: Measures have been put in place to prevent race conditions between unregistering and the mutation observer.

7. Fixed Container Sizing

   • PR: #694
   • Description: The entire dimension is now used (instead of visible dimensions) to set fixed sizes for containers.

8. Reconciliation Prioritization

   • PR: #695
   • Description: Prioritizes reconciliation, starting from addition to deletion in containers, for a more efficient process.

9. Element Management Extraction

   • PR: #696
   • Description: Element management has been extracted to DFlexDOMManager, improving modularity and organization.

10. Preventing Shifting After Reconciliation

• PR: #697
• Description: Fixes an issue where shifting occurred after reconciliation and before indicator reset.

11. Latency Issue Resolution
    • PR: #698
    • Description: Resolves a latency issue in element reconciliation and improves bounding rect retrieval.

v3.9.1 (June 15, 2023)

Enhance transformed elements with default animation and custom CSS transformation options (#659, #658)

• 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.

Optimize build bundle (#661, #662, #663)

Full Changelog: v3.9.0...v3.9.1

v3.9.0 (June 6, 2023)

Performance Enhancement: Utilizing 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:

• Utilize CSS getters and setters: This update enhances the library's usage of CSS getters and setters for improved performance and compatibility.
• Fix resizing event handler: Addressed a bug in the resizing event handler that failed to trigger the expected chain of updates related to the event. This fix ensures that the chain of updaters is correctly executed.
• Enhanced element position detection: Introduced a unified logic to detect an element's position relative to the viewport. This enhancement provides a more consistent and accurate position calculation.
• Remove the optional object for setting the inner scroll threshold: Eliminated the need for an optional object parameter when setting the inner scroll threshold. This simplifies the API and improves code readability.
• Refactor and remove unnecessary methods in the Threshold class: Streamlined the Threshold class by removing unnecessary methods and increasing reliance on the Box model. This refactoring improves code efficiency and maintainability.

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.

Enhance style handling in Draggable element (#655)

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.

Fix scroll threshold for elements outside screen viewport (#653)

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.

• Refactoring the scroll threshold calculation logic to ensure accurate detection of elements outside the viewport.
• Updating the scroll threshold values to align with the element's position relative to the viewport.
• Adding appropriate comments and documentation to clarify the purpose and functionality of the scroll threshold calculations.
• Conducting e2e testing to validate the accuracy of the updated scroll thresholds.

Improve DFlexScrollContainer performance and testability (#644)

• Removing an extra class instance.
• Decoupling event debouncing and testing it in isolation.
• Refactoring updateSiblingsVisibilityLinearly to enhance conditions.

Prevent interactive containers from resizing during elements migration (#643)

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.

Resolve scroll throttle issues during direction change (#652)

Deferred transformation for invisible elements (#651)

Fix scrollable area calculation (#648)

Refactor element rect calculation to consider scroll position (#656)

Migrate visibility test from Cypress to Playwright (#650)

Full Changelog: v3.8.3...v3.9.0

v3.8.3 (March 29, 2023)

Improved Transformations, Stabilizer Mechanisms, and Upgraded Dependencies

• Support V/H transformation for rows, columns, and grids (#629)
• Implement a stabilizer mechanism preventing dragged from being stuck inside an intersected area (#630)
• Upgrade to TS v5 (#632)
• Add e2e test covering stabilizer mechanism (#633)
• Fix grid calculations when transforming through multiple elements (#635)
• Update to pnpmV8 (#636)

Full Changelog: v3.8.2...v3.8.3

v3.8.2 (March 13, 2023)

Bug Fixes

• Prevent extra recursive call when undoing siblings' position (#618)
• Add insertion axis to the element position updater (#624)
• Initializing element grid starting from 0,0 instead of 1,1 (#625)
• Fix updating threshold to deal with dragged instead of the targeted element (#626)
• Assert horizontal and multi-depth transformation (#627)
• Assert elements index attribute along with DOM order (#616)

Full Changelog: v3.8.1...v3.8.2

v3.8.1 (February 24, 2023)

Automatically unregister deleted elements (#614)

Support incremental stream (#615)

Fix MutationObserver for containers that don't belong to the same parent (#611)

• Refactor Generator & Register (#612)
• Refactor Unit Test (#613)

Full Changelog: v3.8.0...v3.8.1

v3.8.0 (February 1, 2023)

Support streaming in an existing layer (#608)

• Support streaming in depth:0. Allowing children to be updated continuously without clearing the store instance entirely.
• Fix a bug in store.destroy() where in some cases migration=null causes an error when it's called.
• Fix a bug in the branch level where the parent container belongs to the same higher parent but is not registered as siblings in DOMGen.
• Depend on the observer to auto-clean removed elements from the store instead of using unregister.
• Override containersTransition & commit for unnecessary usage (#609)
  • Override containersTransition options for an orphan branch.
  • Override commit options for an orphan branch with a solo element to prevent unnecessary reconciliation.
• Add prefix to generated keys in DOM-gen (#610) to avoid potential conflict with user-ids and DFlex auto-generated keys.

Refresh element indicators after reconciling across multiple containers (#600)

• Add global configuration to set general transformation behavior.

 React.useEffect(() => {
    store.config({
      removeContainerWhenEmpty: false,
    });
  }, []);

• Preserve container width when empty to prevent an uncalculated shift in elements' position.
• Refresh all elements' indicators and re-calculate Rect when reconciling across multiple containers.

Support resizing window for transformed/non-transformed containers alike (#603)

• Resizing window will automatically:
  • Trigger reconciliation for transformed containers.
  • Non-transformed containers will update DOMRect.
• Observers are added to the higher registered container depth instead of each parent container.

Prevent drag from updating its transformation position if it's going to reconcile (#606)

Add delay to detect nearest container iteration (#601)

Support migration into an empty container (#602)

Full Changelog: v3.7.1...v3.8.0

v3.7.1 (January 17, 2023)

Fix observer disconnecting when reconciling the DOM (#594)

• Start migrating the DOM reconciliation test between containers to the Playwright.
• Fix the error caused by triggering the observer during DOM reconciliation.
• Add migrated elements into the Migration instance.

Fix missing instances in minified bundle (#598)

Fix dead links under Project Content (#579)

Handle container boundaries when it's empty (#595)

• Add container Rect.
• Update jest config & add a new test case.

Remove unnecessary components from the playground (#593)

v3.7.0 (September 9, 2022)

Enable DOM reconciliation for transformed elements (#573)

• 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.

v3.6.2 (August 1, 2022)

Use viewport threshold percentage to control elements visibility (#566)

• 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 #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.

Fix the wrong axis assignment caused by a typo (#569)

Initiate scroll overflow even if the container is not dynamic (#570)