Callback when plugin finish painting elements

[BenjaminOddou]

Hello,

I don't think this feature already exists on this plugin so I would like to share my idea as I think it can be useful in some situations.

It could be great to add eventListeners to this plugin like when all elements are displayed.

My use case : I am adding items by assigning a new value to the items property (with an API refresh call) when the user is clicking on a button. I can create a callback after my API is refreshed and items has a new value but I'd like to wait until the plugin processed the data and display them to the dom (which can take 50 to 300ms depending on the quantity of items that are added to the dom)

[DerYeger]

There is a custom Vue event redraw, which indicates that all items have been processed. See https://github.com/DerYeger/vue-masonry-wall/blob/42d5ff634b5b4fc6a3215a96ba6537335fecfdf7/src/masonry-wall.vue#L85.

[BenjaminOddou]

Thank you @DerYeger for this precision. I am not sure but is it possible to listen for this event ?

I tried this without sucess

onMounted(() => {
  document
    .querySelector<HTMLDivElement>('#masonry-gallery')
    .addEventListener('redraw', () => {
      console.log('redraw') // not displayed
    })
})

[DerYeger]

See https://vuejs.org/guide/components/events.html

[BenjaminOddou]

Thank you @DerYeger ! I checked the doc and it is working. However, not sure that the event is emitted at right time. I am trying to call a refresh function but I still need to put 100ms delay after redraw event to make it work.

see

<script setup lang="ts">
const delay100 = delay(100)
const onRedraw = () => {
  delay100.then(() => {
    ScrollTrigger.refresh()
  })
}
</script>

<template>
  <MasonryWall @redraw="onRedraw"></MasonryWall>
</template>

// utils.ts
export const delay = (n: number) => {
  n = n || 2000
  return new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve()
    }, n)
  })
}

[DerYeger]

The event is emitted after the last item has been inserted into a column. If you need to wait for the last element to be fully mounted, try awaiting nextTick() from vue in your event handler.

[BenjaminOddou]

@DerYeger thanks ! By any means do you know what's the correct syntax for nextTick() ? I have the following error :

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'this.$nextTick')

Here is my code

<script setup lang="ts">
async function onRedraw() {
  await this.$nextTick()
  ScrollTrigger.refresh()
}
</script>

<template>
  <MasonryWall @redraw="onRedraw"></MasonryWall>
</template>

[DerYeger]

<script setup lang="ts">
import { nextTick } from 'vue'

async function onRedraw() {
  await nextTick()
  // ...
}
</script>

[BenjaminOddou]

Hey @DerYeger thank you so much for your time and suggestions. I finally found a workaround 😅 It seems that even nextTick is called a bit 'too early' as I am adding 25 items at a time. I found a trick that implies double requestAnimationFrame :

<script setup lang="ts">
const onRedraw = async () => {
  await nextTick()
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      ScrollTrigger.refresh()
    })
  })
}
</script>