From 00a5230c9f2cc37fbb22325b3d6348cd019dccac Mon Sep 17 00:00:00 2001 From: Varun Patil Date: Sat, 29 Oct 2022 16:08:06 -0700 Subject: [PATCH] Revert "Improve scroller performance" This reverts commit 0fbd076a5222d97d12080b99626b896c7d91f01f. --- .github/workflows/e2e.yaml | 15 ++++---- .github/workflows/release.yaml | 55 +++++++++++++++--------------- Makefile | 3 -- package-lock.json | 2 +- package.json | 2 +- patches/scroller.patch | 54 ----------------------------- src/components/ScrollerManager.vue | 25 +++----------- src/components/Timeline.vue | 3 +- 8 files changed, 42 insertions(+), 117 deletions(-) delete mode 100644 patches/scroller.patch diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml index 6d6282e7..69c921e9 100644 --- a/.github/workflows/e2e.yaml +++ b/.github/workflows/e2e.yaml @@ -24,7 +24,6 @@ jobs: - name: Build vue app run: | make dev-setup - make patch-external make build-js-production zip -r vue.zip js/ @@ -41,8 +40,8 @@ jobs: # do not stop on another job's failure fail-fast: false matrix: - php-versions: ["7.4"] - server-versions: ["stable25"] + php-versions: ['7.4'] + server-versions: ['stable25'] services: mysql: @@ -101,6 +100,7 @@ jobs: name: report-mysql-${{ matrix.php-versions }}-${{ matrix.server-versions }} path: apps/${{ env.APP_NAME }}/playwright-report + pgsql: runs-on: ubuntu-latest needs: vue @@ -109,8 +109,8 @@ jobs: # do not stop on another job's failure fail-fast: false matrix: - php-versions: ["7.4"] - server-versions: ["stable25"] + php-versions: ['7.4'] + server-versions: ['stable25'] services: postgres: @@ -181,8 +181,8 @@ jobs: # do not stop on another job's failure fail-fast: false matrix: - php-versions: ["7.4"] - server-versions: ["stable25"] + php-versions: ['7.4'] + server-versions: ['stable25'] steps: - name: Checkout server @@ -231,3 +231,4 @@ jobs: with: name: report-sqlite-${{ matrix.php-versions }}-${{ matrix.server-versions }} path: apps/${{ env.APP_NAME }}/playwright-report + diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 1afb512d..653f6d62 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -13,35 +13,34 @@ jobs: permissions: contents: write steps: - - name: Checkout - uses: actions/checkout@v3 + - name: Checkout + uses: actions/checkout@v3 - - name: Use Node.js - uses: actions/setup-node@v3 - with: - node-version: 18.x + - name: Use Node.js + uses: actions/setup-node@v3 + with: + node-version: 18.x - - name: Build - run: | - make dev-setup - make patch-external - make build-js-production - ./scripts/bundle.sh + - name: Build + run: | + make dev-setup + make build-js-production + ./scripts/bundle.sh - - name: Upload app tarball to release - uses: svenstaro/upload-release-action@v2 - id: attach_to_release - with: - file: memories.tar.gz - asset_name: memories.tar.gz - tag: ${{ github.ref }} - overwrite: true + - name: Upload app tarball to release + uses: svenstaro/upload-release-action@v2 + id: attach_to_release + with: + file: memories.tar.gz + asset_name: memories.tar.gz + tag: ${{ github.ref }} + overwrite: true - - name: Upload app to Nextcloud appstore - uses: R0Wi/nextcloud-appstore-push-action@v1 - with: - app_name: ${{ env.APP_NAME }} - appstore_token: ${{ secrets.APPSTORE_TOKEN }} - download_url: ${{ steps.attach_to_release.outputs.browser_download_url }} - app_private_key: ${{ secrets.APP_PRIVATE_KEY }} - nightly: ${{ github.event.release.prerelease }} + - name: Upload app to Nextcloud appstore + uses: R0Wi/nextcloud-appstore-push-action@v1 + with: + app_name: ${{ env.APP_NAME }} + appstore_token: ${{ secrets.APPSTORE_TOKEN }} + download_url: ${{ steps.attach_to_release.outputs.browser_download_url }} + app_private_key: ${{ secrets.APP_PRIVATE_KEY }} + nightly: ${{ github.event.release.prerelease }} \ No newline at end of file diff --git a/Makefile b/Makefile index 8df363fa..b42e2cf7 100644 --- a/Makefile +++ b/Makefile @@ -26,9 +26,6 @@ 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 76abefa7..08a98fe8 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 335d8132..3de9b1e0 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 deleted file mode 100644 index 89106434..00000000 --- a/patches/scroller.patch +++ /dev/null @@ -1,54 +0,0 @@ ---- ./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/ScrollerManager.vue b/src/components/ScrollerManager.vue index 65c0f2b8..990c1362 100644 --- a/src/components/ScrollerManager.vue +++ b/src/components/ScrollerManager.vue @@ -83,11 +83,9 @@ export default class ScrollerManager extends Mixins(GlobalMixin) { /** Scrolling recycler timer */ private scrollingRecyclerTimer = null as number | null; /** View size reflow timer */ - private reflowRequest!: boolean; + private reflowRequest = false; /** Tick adjust timer */ - private adjustRequest!: boolean; - /** Recycler scrolling throttle */ - private recyclerScrollDirty!: boolean; + private adjustRequest = false; /** Get the visible ticks */ get visibleTicks() { @@ -117,17 +115,6 @@ export default class ScrollerManager extends Mixins(GlobalMixin) { /** Recycler scroll event, must be called by timeline */ public recyclerScrolled() { - if (!this.recyclerScrollDirty) { - this.recyclerScrollDirty = true; - window.setTimeout(() => { - this.recyclerScrollDirty = false; - requestAnimationFrame(this.updateFromRecyclerScroll); - }, 100); - } - } - - /** Update cursor position from recycler scroll position */ - public updateFromRecyclerScroll() { // Ignore if not initialized if (!this.ticks.length) return; @@ -569,7 +556,6 @@ export default class ScrollerManager extends Mixins(GlobalMixin) { min-width: 100%; min-height: 1.5px; will-change: transform; - transition: transform 0.1s linear; &.st { font-size: 0.75em; @@ -593,11 +579,8 @@ export default class ScrollerManager extends Mixins(GlobalMixin) { } } } - &:hover > .cursor { - transition: none; - &.st { - opacity: 1; - } + &:hover > .cursor.st { + opacity: 1; } } \ No newline at end of file diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 0506d8d4..33a74c89 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -26,12 +26,11 @@ :class="{ empty: list.length === 0 }" :items="list" :emit-update="true" - :buffer="800" + :buffer="400" :skipHover="true" key-field="id" size-field="size" type-field="type" - :updateInterval="100" @update="scrollChange" @resize="handleResizeWithDelay" >