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