v3.6.0 Draggable throws Error can't access property "x", translate is undefined

[thomasaull]

Some basic vue example:

<template>
  <div
    :id="id"
    ref="elRoot"
    class="DragAndDrop"
    @mousedown.stop.prevent="onMouseDown"
  ></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { Draggable, store } from '@dflex/draggable'
import cuid from 'cuid'

export default defineComponent({
  name: 'DragAndDrop',
  components: {},

  setup() {
    const id = `draggable-button.${cuid.slug()}`
    let draggedEvent: Draggable
    const elRoot = ref()

    const onMouseDown = (event: MouseEvent) => {
      draggedEvent = new Draggable(id, { x: event.clientX, y: event.clientY })

      document.addEventListener('mouseup', onMouseUp)
      document.addEventListener('mousemove', onMouseMove)
    }

    const onMouseMove = (event: MouseEvent) => {
      if (!draggedEvent) return

      draggedEvent.dragAt(event.clientX, event.clientY)
    }

    const onMouseUp = () => {
      if (draggedEvent) {
        draggedEvent.endDragging()

        document.removeEventListener('mouseup', onMouseUp)
        document.removeEventListener('mousemove', onMouseMove)
      }
    }

    onMounted(() => {
      store.register(id)
    })

    return {
      id,
      elRoot,
      onMouseDown,
      onMouseMove,
    }
  },
})
</script>

<style lang="scss">
.DragAndDrop {
  $block: &;

  width: 200px;
  height: 100px;
  border: 2px solid fuchsia;
  border-radius: 10px;
  background-color: rgba(fuchsia, 0.1);
}
</style>

As soon as the onMouseDown is fired, there is an error:

can't access property "x", translate is undefined

It happens with 3.6.0 but works fine with 3.5.4. I was trying to create a reproduction on Codesandbox but for some reason I can't add @dflex/draggable as a dependency there…

[jalal246]

Hi @thomasaull, thanks for reporting this issue. DFlex does somehow "lazy loading" in order to be scalable and prevent any potential blocking event. To do so, the registration is partitioned to multiple levels. So it doesn't create all the related instance once when your app is mounted. While this is handled in DnD, I forgot to deal with it in the Draggable only :)

[thomasaull]

Thanks for the quick fix :)