From baa5c7d4a0c15f44f58feb675a00e497923447d1 Mon Sep 17 00:00:00 2001 From: Varun Patil Date: Mon, 11 Mar 2024 15:48:16 -0700 Subject: [PATCH] editor: bump to latest Signed-off-by: Varun Patil --- CHANGELOG.md | 1 + package-lock.json | 266 +++++++-------- package.json | 4 +- src/components/viewer/ImageEditor.vue | 304 ++++++------------ .../viewer/ImageEditorTranslations.ts | 4 +- 5 files changed, 221 insertions(+), 358 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d0c29c245..1012a0c02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ All notable changes to this project will be documented in this file. - Prevent automatically retrying failed indexing jobs - Support for 3GP videos ([#1055](https://github.com/pulsejet/memories/issues/1055)) - Option to show metadata in slideshow ([#819](https://github.com/pulsejet/memories/issues/819)) +- Improve UX of image editor especially on mobile ## [v6.2.2] - 2024-01-10 diff --git a/package-lock.json b/package-lock.json index e8a027c19..7860a26fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@nextcloud/router": "^2.2.0", "@nextcloud/sharing": "^0.1.0", "@nextcloud/vue": "7.12.7", - "filerobot-image-editor": "4.5.2", + "filerobot-image-editor": "^4.7.0", "fuse.js": "^7.0.0", "hammerjs": "^2.0.8", "justified-layout": "^4.1.0", @@ -29,7 +29,7 @@ "path-posix": "^1.0.0", "photoswipe": "^5.4.3", "plyr": "^3.7.8", - "react-filerobot-image-editor": "4.5.2", + "react-filerobot-image-editor": "^4.7.0", "video.js": "^8.10.0", "vue": "^2.7.15", "vue-material-design-icons": "^5.3.0", @@ -2454,9 +2454,9 @@ "dev": true }, "node_modules/@scaleflex/icons": { - "version": "1.0.0-beta.99", - "resolved": "https://registry.npmjs.org/@scaleflex/icons/-/icons-1.0.0-beta.99.tgz", - "integrity": "sha512-LXFn0/7jbtCxv90yO7dt7Mx/n9f5Fvl9bovf8HABFX1Y2V4Iw+egdnm6LGt+fbl61lq7Ea8aFCr/YKH4jmGpvw==", + "version": "2.1.23", + "resolved": "https://registry.npmjs.org/@scaleflex/icons/-/icons-2.1.23.tgz", + "integrity": "sha512-zyqAzAyjNGxHt4amNajbTVDrNh9l0DKGhgBgX2Nmkzkv8mKv1oKutw7doNIgv+OAz7k7K5YldB/Bye81seYQrQ==", "engines": { "node": ">=12" }, @@ -2466,12 +2466,13 @@ } }, "node_modules/@scaleflex/ui": { - "version": "1.0.0-beta.99", - "resolved": "https://registry.npmjs.org/@scaleflex/ui/-/ui-1.0.0-beta.99.tgz", - "integrity": "sha512-PglsU+2xHI7MYiLS9BNbPacXTbsc+Nvj7/p0fQ37E9mhJiM2/rRKCJG4YiyDQRpnc9VjyOIF12GDvHAmiFnrCQ==", + "version": "2.1.24", + "resolved": "https://registry.npmjs.org/@scaleflex/ui/-/ui-2.1.24.tgz", + "integrity": "sha512-lmlV0xGILo1KfYjWxfTZGSTNZNYVog1cz/Tu5NnOwsZ+N0RY3sjo6/vxwOD61MVZQRke4GOdO2CVJMl4m7ZYKg==", "dependencies": { "@popperjs/core": "^2.6.0", - "@scaleflex/icons": "^1.0.0-beta.99", + "@scaleflex/icons": "^2.1.23", + "@tippyjs/react": "^4.2.6", "lodash.merge": "^4.6.2", "lodash.throttle": "^4.1.1", "polished": "^3.6.6", @@ -2512,6 +2513,18 @@ "string.prototype.matchall": "^4.0.6" } }, + "node_modules/@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "dependencies": { + "tippy.js": "^6.3.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -4784,9 +4797,9 @@ } }, "node_modules/filerobot-image-editor": { - "version": "4.5.2", - "resolved": "https://registry.npmjs.org/filerobot-image-editor/-/filerobot-image-editor-4.5.2.tgz", - "integrity": "sha512-z1PHj9rrVue94FK8mdvCDfY9JPxCdsvUYsbVxksZcKGTclPn5vSxDD3eFp+x2fQsfwBPf9Ibi31/SADveELRVw==", + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/filerobot-image-editor/-/filerobot-image-editor-4.7.0.tgz", + "integrity": "sha512-/Lrg1jmNmYIi/quxkUe6V89LrZAR4zBFryJiBYTnUga1+bayeppBfVH3Ogh7hL2C3Mp9pM8HP1Rk4xVEi5TDNQ==", "dependencies": { "@babel/runtime": "^7.17.2", "react": "18.2.0", @@ -4795,7 +4808,7 @@ "styled-components": "5.3.5" }, "peerDependencies": { - "react-filerobot-image-editor": "^4.3.7" + "react-filerobot-image-editor": "^4.7.0" } }, "node_modules/filerobot-image-editor/node_modules/react-konva": { @@ -4828,21 +4841,6 @@ "react-dom": ">=18.0.0" } }, - "node_modules/filerobot-image-editor/node_modules/react-reconciler": { - "version": "0.29.0", - "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", - "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==", - "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" - }, - "engines": { - "node": ">=0.10.0" - }, - "peerDependencies": { - "react": "^18.2.0" - } - }, "node_modules/filerobot-image-editor/node_modules/styled-components": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", @@ -4928,9 +4926,9 @@ } }, "node_modules/focus-lock": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.0.0.tgz", - "integrity": "sha512-a8Ge6cdKh9za/GZR/qtigTAk7SrGore56EFcoMshClsh7FLk1zwszc/ltuMfKhx56qeuyL/jWQ4J4axou0iJ9w==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.3.4.tgz", + "integrity": "sha512-Gv0N3mvej3pD+HWkNryrF8sExzEHqhQ6OSFxD4DPxm9n5HGCaHme98ZMBZroNEAJcsdtHxk+skvThGKyUeoEGA==", "dependencies": { "tslib": "^2.0.3" }, @@ -5929,9 +5927,9 @@ } }, "node_modules/its-fine": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.1.0.tgz", - "integrity": "sha512-nEoEt5EYSed1mmvwCRv3l1+6T7pyu4ltyBihzPjUtaSWhFhUPU/c7xkPDIutTh8FeIv0F1F5wOFYI8a2s5rlBA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.1.1.tgz", + "integrity": "sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==", "dependencies": { "@types/react-reconciler": "^0.28.0" }, @@ -7889,13 +7887,13 @@ } }, "node_modules/react-filerobot-image-editor": { - "version": "4.5.2", - "resolved": "https://registry.npmjs.org/react-filerobot-image-editor/-/react-filerobot-image-editor-4.5.2.tgz", - "integrity": "sha512-DHdJ9yyDaYInEmkxllaA6NZZCPG9ftpsr73Qk4LPsOk298KnpcJ00Vh/Z1UDFjNWRsDEe7YTjyX2zW1oiaYJNg==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-filerobot-image-editor/-/react-filerobot-image-editor-4.7.1.tgz", + "integrity": "sha512-T10ZcVIFKgMadsxLmwRdbcjvJPSnFDyba1wEGRQ4fq3TJaF6/MXLh56Irmuu2LsqQWZw7GmSK3NzDPcb/BYX9Q==", "dependencies": { "@babel/runtime": "^7.17.2", - "@scaleflex/icons": "1.0.0-beta.99", - "@scaleflex/ui": "1.0.0-beta.99", + "@scaleflex/icons": "2.1.23", + "@scaleflex/ui": "2.1.24", "konva": "8.4.3", "prop-types": "15.7.2" }, @@ -7907,12 +7905,12 @@ } }, "node_modules/react-focus-lock": { - "version": "2.9.6", - "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.6.tgz", - "integrity": "sha512-B7gYnCjHNrNYwY2juS71dHbf0+UpXXojt02svxybj8N5bxceAkzPChKEncHuratjUHkIFNCn06k2qj1DRlzTug==", + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.11.2.tgz", + "integrity": "sha512-DDTbEiov0+RthESPVSTIdAWPPKic+op3sCcP+icbMRobvQNt7LuAlJ3KoarqQv5sCgKArru3kXmlmFTa27/CdQ==", "dependencies": { "@babel/runtime": "^7.0.0", - "focus-lock": "^1.0.0", + "focus-lock": "^1.3.2", "prop-types": "^15.6.2", "react-clientside-effect": "^1.2.6", "use-callback-ref": "^1.3.0", @@ -7935,9 +7933,9 @@ "peer": true }, "node_modules/react-konva": { - "version": "18.1.1", - "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.1.1.tgz", - "integrity": "sha512-oh01+z6pQn9XNP4phRI8CWy8/LnkEZA2tagrvnT3xSt4eRrKeWOQ2eH5f5s5nf937U8hLhVI+kvqPxMBRc4T+g==", + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.10.tgz", + "integrity": "sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==", "funding": [ { "type": "patreon", @@ -7954,47 +7952,30 @@ ], "peer": true, "dependencies": { - "react-reconciler": "~0.28.0", - "scheduler": "^0.22.0" + "@types/react-reconciler": "^0.28.2", + "its-fine": "^1.1.1", + "react-reconciler": "~0.29.0", + "scheduler": "^0.23.0" }, "peerDependencies": { - "konva": "^8.0.1 || ^7.2.5", + "konva": "^8.0.1 || ^7.2.5 || ^9.0.0", "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, - "node_modules/react-konva/node_modules/scheduler": { - "version": "0.22.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz", - "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0" - } - }, "node_modules/react-reconciler": { - "version": "0.28.0", - "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.28.0.tgz", - "integrity": "sha512-sGIHDOpgVjRYgsi8NgosDnbkDvvkYFFSF900ZUhUw0+lSBEA5n76TcKFaVkfYMIuYm+7W6mT8Q673DLBfuTxcQ==", - "peer": true, + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", + "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.22.0" + "scheduler": "^0.23.0" }, "engines": { "node": ">=0.10.0" }, "peerDependencies": { - "react": "^18.1.0" - } - }, - "node_modules/react-reconciler/node_modules/scheduler": { - "version": "0.22.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz", - "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0" + "react": "^18.2.0" } }, "node_modules/readable-stream": { @@ -9046,6 +9027,14 @@ "node": "*" } }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -9625,9 +9614,9 @@ "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==" }, "node_modules/use-callback-ref": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", - "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz", + "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==", "dependencies": { "tslib": "^2.0.0" }, @@ -12310,18 +12299,19 @@ } }, "@scaleflex/icons": { - "version": "1.0.0-beta.99", - "resolved": "https://registry.npmjs.org/@scaleflex/icons/-/icons-1.0.0-beta.99.tgz", - "integrity": "sha512-LXFn0/7jbtCxv90yO7dt7Mx/n9f5Fvl9bovf8HABFX1Y2V4Iw+egdnm6LGt+fbl61lq7Ea8aFCr/YKH4jmGpvw==", + "version": "2.1.23", + "resolved": "https://registry.npmjs.org/@scaleflex/icons/-/icons-2.1.23.tgz", + "integrity": "sha512-zyqAzAyjNGxHt4amNajbTVDrNh9l0DKGhgBgX2Nmkzkv8mKv1oKutw7doNIgv+OAz7k7K5YldB/Bye81seYQrQ==", "requires": {} }, "@scaleflex/ui": { - "version": "1.0.0-beta.99", - "resolved": "https://registry.npmjs.org/@scaleflex/ui/-/ui-1.0.0-beta.99.tgz", - "integrity": "sha512-PglsU+2xHI7MYiLS9BNbPacXTbsc+Nvj7/p0fQ37E9mhJiM2/rRKCJG4YiyDQRpnc9VjyOIF12GDvHAmiFnrCQ==", + "version": "2.1.24", + "resolved": "https://registry.npmjs.org/@scaleflex/ui/-/ui-2.1.24.tgz", + "integrity": "sha512-lmlV0xGILo1KfYjWxfTZGSTNZNYVog1cz/Tu5NnOwsZ+N0RY3sjo6/vxwOD61MVZQRke4GOdO2CVJMl4m7ZYKg==", "requires": { "@popperjs/core": "^2.6.0", - "@scaleflex/icons": "^1.0.0-beta.99", + "@scaleflex/icons": "^2.1.23", + "@tippyjs/react": "^4.2.6", "lodash.merge": "^4.6.2", "lodash.throttle": "^4.1.1", "polished": "^3.6.6", @@ -12350,6 +12340,14 @@ "string.prototype.matchall": "^4.0.6" } }, + "@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "requires": { + "tippy.js": "^6.3.1" + } + }, "@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -14104,9 +14102,9 @@ } }, "filerobot-image-editor": { - "version": "4.5.2", - "resolved": "https://registry.npmjs.org/filerobot-image-editor/-/filerobot-image-editor-4.5.2.tgz", - "integrity": "sha512-z1PHj9rrVue94FK8mdvCDfY9JPxCdsvUYsbVxksZcKGTclPn5vSxDD3eFp+x2fQsfwBPf9Ibi31/SADveELRVw==", + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/filerobot-image-editor/-/filerobot-image-editor-4.7.0.tgz", + "integrity": "sha512-/Lrg1jmNmYIi/quxkUe6V89LrZAR4zBFryJiBYTnUga1+bayeppBfVH3Ogh7hL2C3Mp9pM8HP1Rk4xVEi5TDNQ==", "requires": { "@babel/runtime": "^7.17.2", "react": "18.2.0", @@ -14126,15 +14124,6 @@ "scheduler": "^0.23.0" } }, - "react-reconciler": { - "version": "0.29.0", - "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", - "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==", - "requires": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" - } - }, "styled-components": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", @@ -14194,9 +14183,9 @@ } }, "focus-lock": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.0.0.tgz", - "integrity": "sha512-a8Ge6cdKh9za/GZR/qtigTAk7SrGore56EFcoMshClsh7FLk1zwszc/ltuMfKhx56qeuyL/jWQ4J4axou0iJ9w==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.3.4.tgz", + "integrity": "sha512-Gv0N3mvej3pD+HWkNryrF8sExzEHqhQ6OSFxD4DPxm9n5HGCaHme98ZMBZroNEAJcsdtHxk+skvThGKyUeoEGA==", "requires": { "tslib": "^2.0.3" } @@ -14899,9 +14888,9 @@ "dev": true }, "its-fine": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.1.0.tgz", - "integrity": "sha512-nEoEt5EYSed1mmvwCRv3l1+6T7pyu4ltyBihzPjUtaSWhFhUPU/c7xkPDIutTh8FeIv0F1F5wOFYI8a2s5rlBA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.1.1.tgz", + "integrity": "sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==", "requires": { "@types/react-reconciler": "^0.28.0" } @@ -16260,24 +16249,24 @@ } }, "react-filerobot-image-editor": { - "version": "4.5.2", - "resolved": "https://registry.npmjs.org/react-filerobot-image-editor/-/react-filerobot-image-editor-4.5.2.tgz", - "integrity": "sha512-DHdJ9yyDaYInEmkxllaA6NZZCPG9ftpsr73Qk4LPsOk298KnpcJ00Vh/Z1UDFjNWRsDEe7YTjyX2zW1oiaYJNg==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-filerobot-image-editor/-/react-filerobot-image-editor-4.7.1.tgz", + "integrity": "sha512-T10ZcVIFKgMadsxLmwRdbcjvJPSnFDyba1wEGRQ4fq3TJaF6/MXLh56Irmuu2LsqQWZw7GmSK3NzDPcb/BYX9Q==", "requires": { "@babel/runtime": "^7.17.2", - "@scaleflex/icons": "1.0.0-beta.99", - "@scaleflex/ui": "1.0.0-beta.99", + "@scaleflex/icons": "2.1.23", + "@scaleflex/ui": "2.1.24", "konva": "8.4.3", "prop-types": "15.7.2" } }, "react-focus-lock": { - "version": "2.9.6", - "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.6.tgz", - "integrity": "sha512-B7gYnCjHNrNYwY2juS71dHbf0+UpXXojt02svxybj8N5bxceAkzPChKEncHuratjUHkIFNCn06k2qj1DRlzTug==", + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.11.2.tgz", + "integrity": "sha512-DDTbEiov0+RthESPVSTIdAWPPKic+op3sCcP+icbMRobvQNt7LuAlJ3KoarqQv5sCgKArru3kXmlmFTa27/CdQ==", "requires": { "@babel/runtime": "^7.0.0", - "focus-lock": "^1.0.0", + "focus-lock": "^1.3.2", "prop-types": "^15.6.2", "react-clientside-effect": "^1.2.6", "use-callback-ref": "^1.3.0", @@ -16291,45 +16280,24 @@ "peer": true }, "react-konva": { - "version": "18.1.1", - "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.1.1.tgz", - "integrity": "sha512-oh01+z6pQn9XNP4phRI8CWy8/LnkEZA2tagrvnT3xSt4eRrKeWOQ2eH5f5s5nf937U8hLhVI+kvqPxMBRc4T+g==", + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.10.tgz", + "integrity": "sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==", "peer": true, "requires": { - "react-reconciler": "~0.28.0", - "scheduler": "^0.22.0" - }, - "dependencies": { - "scheduler": { - "version": "0.22.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz", - "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==", - "peer": true, - "requires": { - "loose-envify": "^1.1.0" - } - } + "@types/react-reconciler": "^0.28.2", + "its-fine": "^1.1.1", + "react-reconciler": "~0.29.0", + "scheduler": "^0.23.0" } }, "react-reconciler": { - "version": "0.28.0", - "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.28.0.tgz", - "integrity": "sha512-sGIHDOpgVjRYgsi8NgosDnbkDvvkYFFSF900ZUhUw0+lSBEA5n76TcKFaVkfYMIuYm+7W6mT8Q673DLBfuTxcQ==", - "peer": true, + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", + "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.22.0" - }, - "dependencies": { - "scheduler": { - "version": "0.22.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz", - "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==", - "peer": true, - "requires": { - "loose-envify": "^1.1.0" - } - } + "scheduler": "^0.23.0" } }, "readable-stream": { @@ -17094,6 +17062,14 @@ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -17498,9 +17474,9 @@ "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==" }, "use-callback-ref": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", - "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz", + "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==", "requires": { "tslib": "^2.0.0" } diff --git a/package.json b/package.json index f40e8e372..bbb389605 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@nextcloud/router": "^2.2.0", "@nextcloud/sharing": "^0.1.0", "@nextcloud/vue": "7.12.7", - "filerobot-image-editor": "4.5.2", + "filerobot-image-editor": "^4.7.0", "fuse.js": "^7.0.0", "hammerjs": "^2.0.8", "justified-layout": "^4.1.0", @@ -50,7 +50,7 @@ "path-posix": "^1.0.0", "photoswipe": "^5.4.3", "plyr": "^3.7.8", - "react-filerobot-image-editor": "4.5.2", + "react-filerobot-image-editor": "^4.7.0", "video.js": "^8.10.0", "vue": "^2.7.15", "vue-material-design-icons": "^5.3.0", diff --git a/src/components/viewer/ImageEditor.vue b/src/components/viewer/ImageEditor.vue index bb78fd511..ae3422609 100644 --- a/src/components/viewer/ImageEditor.vue +++ b/src/components/viewer/ImageEditor.vue @@ -91,9 +91,7 @@ export default defineComponent({ .filter((tab) => ![TABS.WATERMARK, TABS.ANNOTATE].includes(tab)) .sort((a: string, b: string) => a.localeCompare(b, getLanguage())) as any[], - // onBeforeSave: this.onBeforeSave, onClose: this.onClose, - // onModify: this.onModify, onSave: this.onSave, Rotate: { @@ -131,16 +129,16 @@ export default defineComponent({ palette: { 'bg-secondary': 'var(--color-main-background)', 'bg-primary': 'var(--color-background-dark)', - // Accent + 'bg-hover': 'var(--color-background-hover)', + 'bg-stateless': 'var(--color-background-dark)', + 'accent-primary': 'var(--color-primary)', - // Use by the slider + 'accent-stateless': 'var(--color-primary-element)', 'border-active-bottom': 'var(--color-primary)', - 'icons-primary': 'var(--color-main-text)', - // Active state + 'bg-primary-active': 'var(--color-background-dark)', 'bg-primary-hover': 'var(--color-background-hover)', 'accent-primary-active': 'var(--color-main-text)', - // Used by the save button 'accent-primary-hover': 'var(--color-primary)', warning: 'var(--color-error)', @@ -195,6 +193,20 @@ export default defineComponent({ const source = await this.getImage(); const config = { ...this.config, source }; + // Add observer to update nodes as added + new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if (!(node instanceof Element)) return; + + node.querySelectorAll('.FIE_tools-bar button').forEach((node) => { + // Do not apply parent styles + node.classList.add('button-vue'); + }); + }); + }); + }).observe(div, { childList: true, subtree: true }); + // Create the editor this.imageEditor = new FilerobotImageEditor(div, config); this.imageEditor.render(); @@ -204,7 +216,7 @@ export default defineComponent({ // Fragment navigation utils.fragment.push(utils.fragment.types.editor); - utils.bus.on('memories:fragment:pop:editor', this.close); + utils.bus.on('memories:fragment:pop:editor', this.warnUnsaved); }, beforeDestroy() { @@ -216,7 +228,7 @@ export default defineComponent({ // Fragment navigation utils.fragment.pop(utils.fragment.types.editor); - utils.bus.off('memories:fragment:pop:editor', this.close); + utils.bus.off('memories:fragment:pop:editor', this.warnUnsaved); }, methods: { @@ -238,10 +250,12 @@ export default defineComponent({ }, onClose(closingReason: any, haveNotSavedChanges: boolean) { - if (haveNotSavedChanges) { - this.onExitWithoutSaving(); - return; - } + // Prevent the hook from being called again since we + // are going to quit now + utils.bus.off('memories:fragment:pop:editor', this.warnUnsaved); + + // Cleanup + this.imageEditor?.terminate(); window.removeEventListener('keydown', this.handleKeydown, true); this.$emit('close'); }, @@ -264,7 +278,7 @@ export default defineComponent({ state: any, ): Promise { // Copy state - state = JSON.parse(JSON.stringify(state)); + state = structuredClone(state); // Convert crop to relative values if (state?.adjustments?.crop) { @@ -308,23 +322,32 @@ export default defineComponent({ } this.onClose(undefined, false); } catch (err) { - showError(this.t('memories', 'Error saving image')); + showError( + this.t('memories', 'Error saving image: {error}', { + error: err?.response?.data?.message ?? err?.message ?? this.t('memories', 'Unknown'), + }), + ); console.error(err); } }, - /** - * Show warning if unsaved changes - */ - async onExitWithoutSaving() { + /** Show warning for unsaved changes */ + async warnUnsaved() { + // This method is only used when pressing the back button + + // To find whether there are unsaved changes, just check + // if the reset button is enabled + const noChanges = this.refs.editor?.querySelector('button[title="Reset"]')?.hasAttribute('disabled'); + if ( - await utils.confirmDestructive({ + noChanges || + (await utils.confirmDestructive({ title: this.t('memories', 'Unsaved changes'), - message: translations.changesLoseConfirmation + '\n\n' + translations.changesLoseConfirmationHint, + message: translations.discardChangesWarningHint, confirm: this.t('memories', 'Drop changes'), confirmClasses: 'error', cancel: translations.cancel, - }) + })) ) { this.onClose('warning-ignored', false); } else { @@ -382,54 +405,47 @@ export default defineComponent({ z-index: 10102 !important; } -// Default styling -.viewer__image-editor, -.SfxModal-Wrapper, -.SfxPopper-wrapper { - * { - // Fix font size for the entire image editor - font-size: var(--default-font-size) !important; - } - +.viewer__image-editor { label, button { color: var(--color-main-text); - > span { - font-size: var(--default-font-size) !important; - } } +} - // Fix button ratio and center content - button { - display: flex; - align-items: center; - justify-content: center; - min-width: 44px; - min-height: 44px; - padding: 6px 12px; - } +.FIE_canvas-node { + background: none !important; } // Input styling .SfxInput-root { height: auto !important; padding: 0 !important; + background: none !important; + border: none !important; .SfxInput-Base { margin: 0 !important; + min-height: 0 !important; + height: 28px !important; + font-size: 0.85em !important; + + .FIE_tool-options-wrapper & { + padding: 0 !important; + } } } // Select styling .SfxSelect-root { padding: 8px !important; + line-height: initial !important; } -// Global buttons .SfxButton-root { - min-height: 44px !important; - margin: 0 !important; - border: transparent !important; - &[color='error'] { + min-height: 0 !important; + border: none !important; + + &[color='error'], + &[color='warning-primary'] { color: white !important; background-color: var(--color-error) !important; &:hover, @@ -438,6 +454,7 @@ export default defineComponent({ background-color: var(--color-error-hover) !important; } } + &[color='primary'] { color: var(--color-primary-text) !important; background-color: var(--color-primary-element) !important; @@ -450,49 +467,30 @@ export default defineComponent({ // Menu items .SfxMenuItem-root { - height: 44px; - padding-left: 8px !important; - // Center the menu entry icon and fix width - > div { - margin-right: 0; - padding: 14px; - // Minus the parent padding-left - padding: calc(14px - 8px); - cursor: pointer; - } - - // Disable jpeg saving (jpg is already here) &[value='jpeg'] { + // Disable jpeg saving (jpg is already here) display: none; } } -// Modal .SfxModal-Container { - min-height: 300px; - padding: 22px; - - // Fill height - .SfxModal-root, .SfxModalTitle-root { - flex: 1 1 100%; - justify-content: center; - color: var(--color-main-text); + color: var(--color-main-text) !important; } + .SfxModalTitle-Icon { - margin-bottom: 22px !important; background: none !important; - // Fit EmptyContent styling + padding: 0 !important; + svg { width: 64px; height: 64px; opacity: 0.4; - // Override all coloured icons - --color-primary: var(--color-main-text); --color-error: var(--color-main-text); } } + // Hide close icon (use cancel button) .SfxModalTitle-Close { display: none !important; @@ -501,39 +499,17 @@ export default defineComponent({ .SfxModalActions-root { justify-content: space-evenly !important; } -} -// Header buttons -.FIE_topbar-center-options > button, -.FIE_topbar-center-options > label { - margin-left: 6px !important; + .SfxSlider-root { + margin-top: 10px; + } } -// Tabs .FIE_tabs { - padding: 6px !important; - overflow: hidden; - overflow-y: auto; + box-shadow: none !important; } .FIE_tab { - width: 80px !important; - height: 80px !important; - padding: 8px; - border-radius: var(--border-radius-large) !important; - svg { - width: 16px; - height: 16px; - } - &-label { - margin-top: 8px !important; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - white-space: nowrap; - display: block !important; - } - &:hover, &:focus { background-color: var(--color-background-hover) !important; @@ -546,36 +522,11 @@ export default defineComponent({ } } -// Tools bar -.FIE_tools-bar { - &-wrapper { - max-height: max-content !important; - } - - // Matching buttons tools - & > div[class$='-tool-button'], - & > div[class$='-tool'] { - display: flex; - align-items: center; - justify-content: center; - min-width: 44px; - height: 44px; - padding: 6px 16px; - border-radius: var(--border-radius-pill); - } +[data-phone='true'] .FIE_topbar { + padding-top: 8px !important; + padding-bottom: 6px !important; } -// Crop preset select button -.FIE_crop-presets-opener-button { - // override default button width - min-width: 0 !important; - padding: 5px !important; - padding-left: 10px !important; - border: none !important; - background-color: transparent !important; -} - -// Force icon-only style .FIE_topbar-history-buttons button, .FIE_topbar-close-button, .FIE_resize-ratio-locker { @@ -586,24 +537,6 @@ export default defineComponent({ &:focus { background-color: var(--color-background-hover) !important; } - - svg { - width: 16px; - height: 16px; - } -} - -// Left top bar buttons -.FIE_topbar-history-buttons button { - &.FIE_topbar-reset-button { - &::before { - content: attr(title); - font-weight: normal; - } - svg { - display: none; - } - } } // Save button fixes @@ -617,77 +550,32 @@ export default defineComponent({ } } -// Save Modal fixes -.FIE_resize-tool-options { - .FIE_resize-width-option, - .FIE_resize-height-option { - flex: 1 1; - min-width: 0; +.FIE_filters-item { + cursor: pointer; + .FIE_filters-item-preview, + .konvajs-content { + pointer-events: none; } -} -// Resize lock -.FIE_resize-ratio-locker { - margin-right: 8px !important; - // Icon is very thin - svg { - width: 20px; - height: 20px; - path { - stroke-width: 1; - stroke: var(--color-main-text); - fill: var(--color-main-text); - } + &[aria-selected='true'] .FIE_filters-item-preview { + padding: 0 !important; + border: none !important; + outline: 1px solid var(--color-main-text) !important; } } -// Close editor button fixes -.FIE_topbar-close-button { - svg path { - // The path viewbox is weird and - // not correct, this fixes it - transform: scale(1.6); +.FIE_carousel-prev-button, +.FIE_carousel-next-button { + width: 30px !important; + background: rgba(0, 0, 0, 0.5) !important; + padding: 5px !important; + svg { + color: white !important; + transform: scale(1.25) !important; } } -// Canvas container -.FIE_canvas-container { - background-color: var(--color-main-background) !important; -} - -// Loader -.FIE_spinner::after, -.FIE_spinner-label { - display: none !important; -} - .FIE_spinner-wrapper { - background-color: transparent !important; -} - -.FIE_spinner::before { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - width: 28px; - height: 28px; - margin: -16px 0 0 -16px; - content: ''; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; - -webkit-animation: rotate 0.8s infinite linear; - animation: rotate 0.8s infinite linear; - border: 2px solid var(--color-loading-light); - border-top-color: var(--color-loading-dark); - border-radius: 100%; - - filter: var(--background-invert-if-dark); -} - -.FIE_carousel-prev-button, -.FIE_carousel-next-button { - background: none !important; + background-color: var(--color-main-background) !important; } diff --git a/src/components/viewer/ImageEditorTranslations.ts b/src/components/viewer/ImageEditorTranslations.ts index 070b402c5..ee40eb0da 100644 --- a/src/components/viewer/ImageEditorTranslations.ts +++ b/src/components/viewer/ImageEditorTranslations.ts @@ -13,10 +13,8 @@ export default { saveAs: t('memories', 'Save as'), back: t('memories', 'Back'), loading: t('memories', 'Loading …'), - // resetOperations: 'Reset/delete all operations', resetOperations: t('memories', 'Reset'), - changesLoseConfirmation: t('memories', 'All changes will be lost.'), - changesLoseConfirmationHint: t('memories', 'Are you sure you want to continue?'), + discardChangesWarningHint: t('memories', 'Are you sure you want to discard the changes?'), cancel: t('memories', 'Cancel'), continue: t('memories', 'Continue'), undoTitle: t('memories', 'Undo'),