[Question] Vue Touch

[jasperf]

Isn't vue-touch, wrapper for Hammer..js touch gestures no longer maintained and beta still? See https://github.com/vuejs/vue-touch/tree/next Should it not get a replacement?

It is loaded in our resources/assets/vendor/MediaManager/js/manager.js:

// v-touch
let VueTouch = require('vue-touch')
VueTouch.registerCustomEvent('dbltap', {type: 'tap', taps: 2})
VueTouch.registerCustomEvent('hold', {type: 'press', time: 500})
Vue.use(VueTouch)

The component VTouch also seems to be the cause of lots of requests on my desktop or laptop. You would think they would not be used there as the screens are not touch screen...? See DevTools Vue Performance results:

If this is mainly for Hammer JS touch gestures why the loads of beforeUpdate updateRender and updated calls? Any ideas how I can reduce these or avoid them?

[jasperf]

I guess _manager.blade.php loads a load of v-touch events. We have:

<ul class="__files-boxs" ref="filesList">
    <li v-for="(file, index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortName, sortDirection)"
        :key="file.name"
        :data-file-index="index"
        @click.stop="setSelected(file, index, $event)">
        <v-touch class="__file-box mm-animated"
            :class="{'bulk-selected': IsInBulkList(file), 'selected' : isSelected(file)}"
            @swipeup="swipGesture($event, file, index)"
            @swipedown="swipGesture($event, file, index)"
            @swiperight="swipGesture($event, file, index)"
            @swipeleft="swipGesture($event, file, index)"
            @hold="pressGesture($event, file, index)"
            @dbltap="pressGesture($event, file, index)">

in resources/views/vendor/MediaManager/_manager.blade.php could be 6 calls per media item and if I have 55 that would be 330 calls and then there are two sidebar calls:

<v-touch v-if="infoSidebar"
    class="__stack-sidebar is-hidden-touch"
    @swiperight="toggleInfoSidebar(), saveUserPref()"
    @swipeleft="toggleInfoSidebar(), saveUserPref()">

and then we have the button

<div class="control" v-if="!isBulkSelecting()">
    <v-touch class="button is-primary"
        ref="refresh"
        :disabled="isLoading"
        tag="button"
        v-tippy="{arrow: true}"
        title="(R) efresh"
        @tap="refresh()"
        @hold="clearAll()">

with another two calls. So that is 2x55 calls = 110 calls .

Then there is the files box with another 5 swipe calls so another 275

Then I am about half way to 1605 beforeUpdate and updateRender` calls. And not counting them all. The calls grow depending on your interactions or times you load or select items.

Should these then not be loaded just once as events? Like with v-once perhaps? Or only send out events after when an item is really selected or edited?

And then there is the questions still.. why would these events be fired when I use a screen that does not support swipe events?

[ctf0]

u can use most of the touch gestures with the mouse/mice, thats why its registerd on normal pcs as well.

i wanted to add a replacment for it along ago but i dont have time to rewrtie it, if u can help with it plz do.

[jasperf]

@ctf0 I did not know that the touch gestures were used by the mouse as well on the desktop. Thanks for letting me know that. Learned something here.

The repository https://github.com/bsdfzzzy/vue2-hammer is a relatively more recent VueJS Hammer wrapper, but it is also three years old. It is however not in beta but supposedly stable and updated three years ago compared to the beta https://github.com/vuejs/vue-touch/tree/next updated 4 years ago. But all rather poor choices I'm afraid.

So I guess we can keep what we have and or fork. If forked we can at least work on it when need be and make it a stable version. Just wonder why Linus Borg stopped working on it. He is an excellent Vue developer and must have had his reasons..

Update

There is also Vue Touch Events for Vue 2. Last update three months ago. It uses the same directive v-touch. May need to change event names and such though..

End Update

Loads of Calls

What I was also wondering about is the many calls / events when I load the images for a project inside the media manager. I was wondering if we could limit beforeUpdate, updateRender calls for VTouch or the vue-touch component. I for example had 2283/49 so 22843 beforeUpdate / updateRender calls vs 49 create calls in one Vue Performance test:

There are 44 images and I see 49 createcalls. Perhaps some more for other elements that are loaded with vue-touch. Then mounting takes the most time - 5459 ms - and for beforeUpdate and updateRender less is needed. There just are many calls for those and I wonder why. I also wonder why the mounting takes so much time on my box.

Save Image Dimensions Events

I also see the event save-image-dimensions quite a lot on opening the media manager, loading images and just clicking on one for selection.

perhaps called by:

// get images dimensions
EventHub.listen('save-image-dimensions', (obj) => {
    if (!this.checkForDimensions(obj.url)) {
        this.dimensions.push(obj)
    }
})

or

sendDimensionsToParent() {
const manager = this
    let url = this.src

    this.$refs.img.addEventListener('load', function() {
        manager.applyStyles = true
        manager.$el.style.border = 'none'

        if (!manager.checkForDimensions(url)) {
            EventHub.fire('save-image-dimensions', {
                url: url,
                val: `${this.naturalWidth} x ${this.naturalHeight}`
            })
        }
    })
}

So I guess it is to call the image dimensions for some of the 44 images in our case... images I click on?

[ctf0]

Then mounting takes the most time - 5459 ms

to get around that we either remove the whole thing, or use a better wrapper "already under the enhancements ticket".

So I guess it is to call the image dimensions for some of the 44 images in our case... images I click on?

yes

[jasperf]

Yeah, the package I mentioned https://github.com/jerrybendy/vue-touch-events is perhaps one we could use instead of current one. But not sure if that is better performance wise. Just better maintained it is.

Was also thinking about better loading of the images and icons.. using v-for indexing or caching of some kind. We however already have:

{{-- files --}}
<ul class="__files-boxs" ref="filesList">
    <li v-for="(file, index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortName, sortDirection)"
        :key="file.name"
        :data-file-index="index"
        @click.stop="setSelected(file, index, $event)">

for loading so not sure what else we could do to improve the display of images. Perhaps preloading thumbs at fixed dimensions....

Other thing I was thinking about it not loading the media manager with the application main app.js but only on activating the modal we load the media manager in. That would speed up the initial load and modal with media manager is only needed later on anyways. Just was having issues doing that getting issue with recursive components as a warning loading the manager.js and modal.vue separatately, so no luck yet.

Still a lot to learn so is going to take more time.