From 246160d966b8f39e235acc6af59b6cb3371308fd Mon Sep 17 00:00:00 2001 From: Pleroma Renovate Bot Date: Fri, 28 Mar 2025 09:05:02 +0000 Subject: [PATCH 1/2] Update dependency cropperjs to v2 --- package.json | 2 +- yarn.lock | 110 +++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 107 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 342e35d52..47edaf2cb 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "body-scroll-lock": "3.1.5", "chromatism": "3.0.0", "click-outside-vue3": "4.0.1", - "cropperjs": "1.6.2", + "cropperjs": "2.0.0", "escape-html": "1.0.3", "globals": "^16.0.0", "hash-sum": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index 5453d7efe..c991c8d8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1004,6 +1004,105 @@ resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== +"@cropper/element-canvas@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-canvas/-/element-canvas-2.0.0.tgz#d41f47cf6fd293e6bcb78a39956d9bed24036c69" + integrity sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element-crosshair@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-crosshair/-/element-crosshair-2.0.0.tgz#ff4d026a383a5b8517119e6939b0c38a58b839c1" + integrity sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element-grid@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-grid/-/element-grid-2.0.0.tgz#a5f3b3a8fb1579517cdd984da767cbe9e855f99e" + integrity sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element-handle@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-handle/-/element-handle-2.0.0.tgz#44d8fa04f78eb7180efece8940cd4a6ab966e7f1" + integrity sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element-image@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-image/-/element-image-2.0.0.tgz#9c6a52cb71fe0f62befb7ef3bb9d06561a9f06d0" + integrity sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/element-canvas" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element-selection@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-selection/-/element-selection-2.0.0.tgz#8b69b310cbb8e6eb15a63d077eae052b332f01c9" + integrity sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/element-canvas" "^2.0.0" + "@cropper/element-image" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element-shade@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-shade/-/element-shade-2.0.0.tgz#ddfcf69c5d4db20b6beae8cbfab82e69218e4a6d" + integrity sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/element-canvas" "^2.0.0" + "@cropper/element-selection" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element-viewer@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element-viewer/-/element-viewer-2.0.0.tgz#a2b67af726ee0eb6c7aa86ebb4878a051a1344d9" + integrity sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/element-canvas" "^2.0.0" + "@cropper/element-image" "^2.0.0" + "@cropper/element-selection" "^2.0.0" + "@cropper/utils" "^2.0.0" + +"@cropper/element@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/element/-/element-2.0.0.tgz#5eb636842aa47468de451dfab0987ef3fd783808" + integrity sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA== + dependencies: + "@cropper/utils" "^2.0.0" + +"@cropper/elements@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/elements/-/elements-2.0.0.tgz#48782beb470c313ee964ba26ea5f163455d2f380" + integrity sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ== + dependencies: + "@cropper/element" "^2.0.0" + "@cropper/element-canvas" "^2.0.0" + "@cropper/element-crosshair" "^2.0.0" + "@cropper/element-grid" "^2.0.0" + "@cropper/element-handle" "^2.0.0" + "@cropper/element-image" "^2.0.0" + "@cropper/element-selection" "^2.0.0" + "@cropper/element-shade" "^2.0.0" + "@cropper/element-viewer" "^2.0.0" + +"@cropper/utils@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@cropper/utils/-/utils-2.0.0.tgz#735873696e15073405ceadb9423507508d738103" + integrity sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg== + "@csstools/color-helpers@^5.0.2": version "5.0.2" resolved "https://registry.yarnpkg.com/@csstools/color-helpers/-/color-helpers-5.0.2.tgz#82592c9a7c2b83c293d9161894e2a6471feb97b8" @@ -3130,10 +3229,13 @@ crc32-stream@^4.0.2: crc-32 "^1.2.0" readable-stream "^3.4.0" -cropperjs@1.6.2: - version "1.6.2" - resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.6.2.tgz#d1a5d627d880581cca41b7901f06923500e4201b" - integrity sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA== +cropperjs@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-2.0.0.tgz#0dc6187a66a27e8f6de1e7320c92997dbacc854b" + integrity sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ== + dependencies: + "@cropper/elements" "^2.0.0" + "@cropper/utils" "^2.0.0" cross-spawn@7.0.6, cross-spawn@^7.0.0, cross-spawn@^7.0.6: version "7.0.6" From eda51ae48623ca6d4c675376e4b4863376bd417b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 30 Mar 2025 17:06:19 +0300 Subject: [PATCH 2/2] upgrade to new cropperjs 2.0 API --- src/components/image_cropper/image_cropper.js | 65 +++++++++++-------- .../image_cropper/image_cropper.vue | 57 +++++++++++----- .../settings_modal/tabs/profile_tab.js | 6 +- vite.config.js | 3 + 4 files changed, 86 insertions(+), 45 deletions(-) diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index 55e901a03..3cb4f6fd1 100644 --- a/src/components/image_cropper/image_cropper.js +++ b/src/components/image_cropper/image_cropper.js @@ -1,5 +1,4 @@ -import Cropper from 'cropperjs' -import 'cropperjs/dist/cropper.css' +import 'cropperjs' // This adds all of the cropperjs's components into DOM import { library } from '@fortawesome/fontawesome-svg-core' import { faCircleNotch @@ -19,19 +18,6 @@ const ImageCropper = { type: Function, required: true }, - cropperOptions: { - type: Object, - default () { - return { - aspectRatio: 1, - autoCropArea: 1, - viewMode: 1, - movable: false, - zoomable: false, - guides: false - } - } - }, mimes: { type: String, default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' @@ -48,7 +34,6 @@ const ImageCropper = { }, data () { return { - cropper: undefined, dataUrl: undefined, filename: undefined, submitting: false @@ -67,27 +52,30 @@ const ImageCropper = { }, methods: { destroy () { - if (this.cropper) { - this.cropper.destroy() - } this.$refs.input.value = '' this.dataUrl = undefined this.$emit('close') }, submit (cropping = true) { this.submitting = true - this.submitHandler(cropping && this.cropper, this.file) - .then(() => this.destroy()) - .finally(() => { - this.submitting = false - }) + + let cropperPromise + if (cropping) { + cropperPromise = this.$refs.cropperSelection.$toCanvas() + } else { + cropperPromise = Promise.resolve() + } + cropperPromise.then(canvas => { + this.submitHandler(canvas, this.file) + .then(() => this.destroy()) + .finally(() => { + this.submitting = false + }) + }) }, pickImage () { this.$refs.input.click() }, - createCropper () { - this.cropper = new Cropper(this.$refs.img, this.cropperOptions) - }, getTriggerDOM () { return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger) }, @@ -103,6 +91,29 @@ const ImageCropper = { reader.readAsDataURL(this.file) this.$emit('changed', this.file, reader) } + }, + inSelection(selection, maxSelection) { + return ( + selection.x >= maxSelection.x + && selection.y >= maxSelection.y + && (selection.x + selection.width) <= (maxSelection.x + maxSelection.width) + && (selection.y + selection.height) <= (maxSelection.y + maxSelection.height) + ) + }, + onCropperSelectionChange(event) { + const cropperCanvas = this.$refs.cropperCanvas + const cropperCanvasRect = cropperCanvas.getBoundingClientRect() + const selection = event.detail + const maxSelection = { + x: 0, + y: 0, + width: cropperCanvasRect.width, + height: cropperCanvasRect.height, + } + + if (!this.inSelection(selection, maxSelection)) { + event.preventDefault(); + } } }, mounted () { diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 8647ed4d7..6d11ad4ec 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -1,14 +1,43 @@