Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce new events: $onDragCommitted and $onDragTransformed #749

Merged
merged 6 commits into from
Oct 19, 2023

Conversation

jalal246
Copy link
Member

@jalal246 jalal246 commented Oct 19, 2023

This PR adds two new drag end events: $onDragCommitted and $onDragTransformed. These allow consumers to handle drag endings differently depending on whether the drag was committed to the DOM or just transformed.

Both event payloads emit the following details:

type PayloadDragMutation = {
  /** Represents the main category of the drag event. */
  type: typeof DRAG_CAT;

  /** Indicates the timestamp when the event occurred. */
  timestamp: number;

  /** Targeted elements */
  element: HTMLElement;

  indexes: {
    /** The initial index of the moved element. */
    initial: number;

    /** The index where it was inserted in the receiving container. */
    inserted: number;
  };

  containers: {
    /** The container from which the element originated. */
    origin: HTMLElement;

    /** The container where the element is now located. */
    target: HTMLElement;
  };
}

The $onDragCommitted event is fired when a drag ends and changes are reconciled back to the data store. The $onDragTransformed event is fired if there is no reconciliation, but the element is transformed visually.

The motivation for this change is to allow consumers to handle committed drags differently than drags that were just transformed with no data changes. For example, triggering a re-render or data fetch on commit but not on transform.

@github-actions github-actions bot added the DnD label Oct 19, 2023
@github-actions
Copy link

github-actions bot commented Oct 19, 2023

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
packages/dflex-dnd/dist/dflex-dnd.mjs 11.78 KB (+0.29% 🔺) 236 ms (+0.29% 🔺) 328 ms (+29.54% 🔺) 564 ms
packages/dflex-core-instance/dist/dflex-core.mjs 60 B (0%) 10 ms (0%) 357 ms (+121.06% 🔺) 367 ms
packages/dflex-dom-gen/dist/dflex-dom.mjs 23 B (0%) 10 ms (0%) 245 ms (+1.05% 🔺) 255 ms
packages/dflex-store/dist/dflex-store.mjs 244 B (0%) 10 ms (0%) 171 ms (-43.22% 🔽) 181 ms
packages/dflex-utils/dist/dflex-utils.mjs 263 B (0%) 10 ms (0%) 189 ms (+16.42% 🔺) 199 ms
packages/dflex-draggable/dist/dflex-draggable.mjs 5.99 KB (+0.18% 🔺) 120 ms (+0.18% 🔺) 223 ms (-30.06% 🔽) 343 ms

@jalal246 jalal246 force-pushed the dev/wip_10_19_p2 branch 2 times, most recently from 0690c5b to a4b3098 Compare October 19, 2023 15:10
@jalal246 jalal246 changed the title init Introduce new events: $onDragCommitted and $onDragTransformed Oct 19, 2023
@jalal246 jalal246 merged commit 5827264 into main Oct 19, 2023
20 checks passed
@jalal246 jalal246 deleted the dev/wip_10_19_p2 branch October 19, 2023 16:32
@jalal246 jalal246 linked an issue Oct 19, 2023 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: none of the DFlex events are dispatched
1 participant