Skip to content

Release 0.7.0
Compare
Choose a tag to compare
@martinpengellyphillips martinpengellyphillips released this 07 Sep 20:54
· 33 commits to main since this release
0.7.0
031e24a

Refactor core to lean more into reactivity. Note there are multiple breaking
changes in this release - see below for details.

Added

  • Export DragEvent type for external use in order to avoid consumers having to
    redefine this type for custom handlers.

  • Explicitly type Id (for string | number ids) and export for reuse.

  • Add rect getter on Layout for ease of use. When duplicating a Layout,
    can now do new Layout(existingLayout.rect).

  • Support for custom transformers to refine Draggable and Droppable
    transform behaviour. Transformers are specified against an individual item and
    can be used for things like limiting drag movement to a particular axis:

    const transformer = {
  id: "constrain-x-axis",
  order: 100,
  callback: (transform) => ({ ...transform, x: 0 }),
};

onDragStart(({ draggable }) => {
  addTransformer("draggables", draggable.id, transformer);
});

onDragEnd(({ draggable }) => {
  removeTransformer("draggables", draggable.id, transformer.id);
});

  • Support using function element form for DragOverlay children. This enables
    referencing the related Draggable directly without the need to track
    separately. For example:

    <DragOverlay>
  {(draggable) => <div>Draggable {draggable.id}</div>}
</DragOverlay>

Changed

  • Breaking Change Refactor core to lean more into reactivity.

    Notably, make transforms a reactive computation of an array of transformers
    rather than a pre-computed set state. For example, make active draggable
    transform react to current sensor position rather than have sensor set the
    draggable position directly.

    To support this reactivity, introduce a sensorMove function in place of the
    previous dragMove function, add functions (addTransformer,
    removeTransformer) to manage transfomers on draggables and droppables, and
    remove the now redundant displace function.

    Transformers are keyed by id and orderable for ease of use and predictability,
    and can be accessed via the transfomers property on draggables or
    droppables.

  • Breaking Change Sensors should now pass their initial coordinates to
    sensorStart and updated coordinates to the new sensorMove function (which
    replaces the removed dragMove function). The included pointer sensor has
    been updated accordingly.

  • Breaking Change Move 'read state' helpers directly into the state object.
    This makes a clearer separation between actions that typically modify state vs
    accessing the state for readonly purposes. It also feels more intuitive.

    As part of this, rename the existing state entries that refer to 'ids' to
    explicitly reflect this:

    • state.active.draggable -> state.active.draggableId
    • state.active.droppable -> state.active.droppableId
    • state.active.sensor -> state.active.sensorId
    • state.previous.draggable -> state.active.draggableId
    • state.previous.droppable -> state.active.droppableId

    Also, remove all redundant helpers in favour of directly using the state:

    • activeDraggable() -> state.active.draggable
    • previousDraggable() -> state.previous.draggable
    • anyDraggableActive() -> state.active.draggable
    • activeDroppable() -> state.active.droppable
    • previousDroppable() -> state.previous.droppable
    • anyDroppableActive() -> state.active.droppable
    • activeSensor() -> state.active.sensor

  • Breaking Change Remove filter argument from recomputeLayouts. Instead,
    the core will determine which nodes to re-evaluate when called (and will also
    cache nodes to avoid redundant evaluation of layout when appropriate).

Fixed

  • Breaking change Make Solid JS 1.5 the minimum compatible version of Solid
    and update to support its breaking changes to typings, and the new batch
    behaviour.

  • Breaking Change Use DragOverlay layout in collision detection.
    Previously the Draggable layout was used leading to unexpected behaviour
    collision behaviour (such as a larger overlay not triggering a Droppable
    even when over it). As part of this the usingDragOverlay property of dnd
    state is removed in faviour of tracking state.active.overlay data.

  • Auto-center DragOverlay over its related Draggable on drag start for a
    better experience when the overlay is of differing size to the draggable.

  • Avoid reacting to irrelevant droppable changes in onDragEnd.

  • Minimise differences in layout calculations. Due to the way transforms are
    stripped from layouts, it is possible to end up with small differences in
    layout values. This is due to precision issues in JS. Attempt to minimise
    occurences by rounding to nearest whole number (pixel).

Assets 2
Loading