diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml index 5e9161f8..6d6282e7 100644 --- a/.github/workflows/e2e.yaml +++ b/.github/workflows/e2e.yaml @@ -24,6 +24,7 @@ jobs: - name: Build vue app run: | make dev-setup + make patch-external make build-js-production zip -r vue.zip js/ diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 2a42dfee..1afb512d 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -24,6 +24,7 @@ jobs: - name: Build run: | make dev-setup + make patch-external make build-js-production ./scripts/bundle.sh diff --git a/Makefile b/Makefile index b42e2cf7..8df363fa 100644 --- a/Makefile +++ b/Makefile @@ -26,6 +26,9 @@ build-js: build-js-production: rm -f js/* && npm run build +patch-external: + patch -p1 < patches/scroller.patch + watch-js: npm run watch diff --git a/package-lock.json b/package-lock.json index 08a98fe8..76abefa7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "vue-material-design-icons": "^5.1.2", "vue-property-decorator": "^9.1.2", "vue-router": "^3.5.4", - "vue-virtual-scroller": "^1.1.2", + "vue-virtual-scroller": "1.1.2", "webdav": "^4.11.0" }, "devDependencies": { diff --git a/package.json b/package.json index 3de9b1e0..335d8132 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "vue-material-design-icons": "^5.1.2", "vue-property-decorator": "^9.1.2", "vue-router": "^3.5.4", - "vue-virtual-scroller": "^1.1.2", + "vue-virtual-scroller": "1.1.2", "webdav": "^4.11.0" }, "browserslist": [ diff --git a/patches/scroller.patch b/patches/scroller.patch new file mode 100644 index 00000000..89106434 --- /dev/null +++ b/patches/scroller.patch @@ -0,0 +1,54 @@ +--- ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js 2022-10-29 15:40:12.517184534 -0700 ++++ ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js 2022-10-29 15:40:42.814432774 -0700 +@@ -99,6 +99,10 @@ + type: Boolean, + default: false + }, ++ updateInterval: { ++ type: Number, ++ default: 0, ++ }, + skipHover: { + type: Boolean, + default: false +@@ -262,7 +266,9 @@ + handleScroll(event) { + if (!this.$_scrollDirty) { + this.$_scrollDirty = true; +- requestAnimationFrame(() => { ++ if (this.$_updateTimeout) return ++ ++ const requestUpdate = () => requestAnimationFrame(() => { + this.$_scrollDirty = false; + const { + continuous +@@ -272,9 +278,19 @@ + // When non continous scrolling is ending, we force a refresh + if (!continuous) { + clearTimeout(this.$_refreshTimout); +- this.$_refreshTimout = setTimeout(this.handleScroll, 100); ++ this.$_refreshTimout = setTimeout(this.handleScroll, this.updateInterval + 100); + } + }); ++ ++ requestUpdate() ++ ++ // Schedule the next update with throttling ++ if (this.updateInterval) { ++ this.$_updateTimeout = setTimeout(() => { ++ this.$_updateTimeout = 0 ++ if (this.$_scrollDirty) requestUpdate(); ++ }, this.updateInterval) ++ } + } + }, + handleVisibilityChange(isVisible, entry) { +@@ -505,7 +521,7 @@ + // After the user has finished scrolling + // Sort views so text selection is correct + clearTimeout(this.$_sortTimer); +- this.$_sortTimer = setTimeout(this.sortViews, 300); ++ this.$_sortTimer = setTimeout(this.sortViews, this.updateInterval + 300); + return { + continuous + }; diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 33a74c89..28e886ba 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -31,6 +31,7 @@ key-field="id" size-field="size" type-field="type" + :updateInterval="100" @update="scrollChange" @resize="handleResizeWithDelay" >