Why none of the DFlex events are dispatched?

[ddenev]

Here is the code sandbox for the use-case: https://codesandbox.io/p/sandbox/holy-hill-fy6sy2

Open the console (the Debugger icon in the top right) and observe no console logs during drag operation.

None of the registered events are dispatched. What am I doing wrong?

Note: I also tried attaching them to document but still no success.

[jalal246]

Edit: Events don't need a subscription. The following is valid for listeners only.

You need to subscribe (As implemented here):

// App.vue
<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import List from './components/DnDList.vue'
import { store } from '@dflex/dnd'

// Effect for layoutState
onMounted(() => {
  const unsubscribeLayout = store.listeners.subscribe((e) => {
    console.info('new layout state', e)
  }, 'layoutState')

  onBeforeUnmount(() => {
    unsubscribeLayout()
  })
})

// Effect for mutation
onMounted(() => {
  const unsubscribeMutation = store.listeners.subscribe((e) => {
    console.info('new mutation state', e)
  }, 'mutation')

  onBeforeUnmount(() => {
    unsubscribeMutation()
  })
})
</script>

[ddenev]

Thank you for the explanation, @jalal246!

Please check the sandbox - I still do not receive events ($onDragOutContainer, $onDragOutThreshold, $onDragOver, $onDragLeave), even after I have subscribed.

https://codesandbox.io/p/sandbox/holy-hill-fy6sy2

[jalal246]

Yeah. it's a bug.

[ddenev]

Do you want me to report it in issues?

[jalal246]

@ddenev Yes sir.

[ddenev]

#739

[ddenev]

DFlex events are similar to any other type of events. You have the flexibility to listen for them anywhere in your application, and it's entirely up to you how you choose to handle these events.

Yes, but I still don't understand why do we need to subscribe to layout/mutation explicitly just to be able to receive these regular DFlex events (the ones that happen during drag&drop operation). I am trying to understand the architectural decision of that approach. It seems I am missing something here which I would like to understand.
For example, I've used quite a lot of different dnd libraries and all of them fired their own events without the need to explicitly subscribe to them.

DFlex events, like mouse events, encompass various types of interactions such as mouse clicks, mouse down, mouse up, and mouse movement. For instance, you can subscribe to events like 'mousedown', 'mouseup', 'mousemove', and others, just as you would with standard mouse events. DFlex provides the same events to capture these interactions.

How can I subscribe to those encompassed events? I don't understand :)

Sorry, I've read the reply once more and I still got questions :)

[jalal246]

I think I made mistakes regarding explaining events and listeners, which may have caused this confusion

1- Events are fired on demand like mouse event.

import type {  DFlexEvents } from "@dflex/dnd";

  const onDFlexEvent = (e: DFlexEvents) => {
  // Do something.
    console.log(`onDFlexEvent: ${e.type}`, e.detail);
  };
  
// Capture DFlex event.
document.addEventListener(
  ON_OUT_CONTAINER /** or another dflex event */,
  onDFlexEvent
);

// Remove it later when dragging is done.
document.removeEventListener(
  ON_OUT_CONTAINER /** or another dflex event */,
  onDFlexEvent
);

Available customer events are:

// Dragged Events.
const ON_OUT_CONTAINER = "$onDragOutContainer";
const ON_OUT_THRESHOLD = "$onDragOutThreshold";

//  Interactivity Events.
const ON_DRAG_OVER = "$onDragOver";
const ON_DRAG_LEAVE = "$onDragLeave";

// Sibling Events.
const ON_LIFT_UP = "$onLiftUpSiblings";
const ON_MOVE_DOWN = "$onMoveDownSiblings";

2- Listeners : from the docs: DFlex listeners are more generic than the custom events and responsible for monitoring the entire layout and reporting back to you.

DFlex has two (2) types of listeners:

1- Layout state listener.: Report to you when:

type LayoutState =
  | "pending" // when DnD is initiated but not activated yet.
  | "ready" // When clicking over the registered element. The element is ready but not being dragged.
  | "dragging" // as expected.
  | "dragEnd" // as expected.
  | "dragCancel"; // When releasing the drag without settling in the new position
  

2- Mutation listener.: Currently just one. Report to you with:

interface DFlexElmMutationEvent {
  type: "mutation";
  status: "committed"
  payload: {
    target: HTMLElement; // HTML element container.
    ids: string[]; // Committed Elements' id in order.
  };
}

[ddenev]

To summarize then - I do NOT have to subscribe to listeners in order to receive events.
Could you please confirm that, as the whole discussion confused me that these are linked and you never explicitly said that they are not?

If you check the code in the sandbox, you will see that I am registering events exactly like you show above - but they are still not fired (see below the // none of these are dispatched comment):

<template>
  <component :is="tag" :id="id" ref="rootRef" style="touch-action: none">
    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </component>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { store, DnD } from '@dflex/dnd'

const props = defineProps({
  tag: { type: [String, Object], required: true },
  id: { type: String, required: true },
  handle: { type: String, default: null } // The CSS selector, relative to the curent element, for the drag handle(s)
})

const rootRef = ref(null)
/** @type {import('vue').ComputedRef<Element>} */
const rootEl = computed(() => '$el' in rootRef.value ? rootRef.value.$el : rootRef.value)
const handleEls = computed(() => props.handle ? Array.from(rootEl.value.querySelectorAll(props.handle)) : [rootEl.value])

// ---------------------------------------------------------------------------------------------------------------------
// Component checks
// ---------------------------------------------------------------------------------------------------------------------
onMounted(() => {
  if (rootEl.value.nodeType !== Node.ELEMENT_NODE) {
    throw Error('Multi-root and text-root components are not allowed.')
  }
})

// ---------------------------------------------------------------------------------------------------------------------
// DFlex store setup
// ---------------------------------------------------------------------------------------------------------------------
let dndSession = null
store.register({ id: props.id })
onUnmounted(() => {
  store.unregister(props.id)
})

// ---------------------------------------------------------------------------------------------------------------------
// DnD setup
// ---------------------------------------------------------------------------------------------------------------------
onMounted(() => {
  handleEls.value.forEach(el => el.addEventListener('pointerdown', onPointerDown))
})
onUnmounted(() => {
  handleEls.value.forEach(el => el.removeEventListener('pointerdown', onPointerDown))
})
function onPointerDown (event) {
  rootEl.value.setPointerCapture(event.pointerId)
  rootEl.value.addEventListener('pointermove', onPointerMove)
  rootEl.value.addEventListener('pointerup', onPointerUp)

// none of these are dispatched
  rootEl.value.addEventListener('$onDragOutContainer', onDFlexEvent)
  rootEl.value.addEventListener('$onDragOutThreshold', onDFlexEvent)
  handleEls.value.forEach(el => el.addEventListener('$onDragOver', onDFlexEvent))
  handleEls.value.forEach(el => el.addEventListener('$onDragLeave', onDFlexEvent))

  dndSession = new DnD(props.id, { x: event.clientX, y: event.clientY })
}

function onPointerMove (event) {
  dndSession.dragAt(event.clientX, event.clientY)
}

function onPointerUp (event) {
  dndSession.endDragging()
  dndSession = null

  rootEl.value.removeEventListener('pointermove', onPointerMove)
  rootEl.value.removeEventListener('pointerup', onPointerUp)
  
  rootEl.value.removeEventListener('$onDragOutContainer', onDFlexEvent)
  rootEl.value.removeEventListener('$onDragOutThreshold', onDFlexEvent)
  handleEls.value.forEach(el => el.removeEventListener('$onDragOver', onDFlexEvent))
  handleEls.value.forEach(el => el.removeEventListener('$onDragLeave', onDFlexEvent))
}

function onDFlexEvent (event) {
  console.log(event)
}
</script>

[jalal246]

To summarize then - I do NOT have to subscribe to in order to receive events.

Correct.

If you check the code in the sandbox, you will see that I am registering events exactly like you show above - but they are still not fired

Yes. it's a bug.

as the whole discussion confused me

Sorry. I did a terrible job explaining them which led to this confusion.

You're free to choose between listeners, events, or a mix of both. Additionally, you can pick specific events or types of listeners that best fit your requirements. Both, listeners and events are not connected to each other.

The code above is accurate, and the events should work correctly after fixing issue #739.

[ddenev]

Thank you very much, @jalal246, for persistently explaining the details, much appreciated! Will wait for the fix then :)